/* ============================================================================ Studio Geizi Silva — Design system compartilhado (Home, Serviços, Sobre, Contato). A página /agendar É INTENCIONALMENTE INDEPENDENTE deste arquivo (ver agendar/agendar.css) para poder abrir rápido em 3G/4G vinda de um link externo (Google Maps), sem herdar o peso do site institucional. ============================================================================ */ /* ---- Design tokens (paleta e tipografia oficiais da marca) ---- Repaginada 2026-08: mesma essência dourada/elegante da marca, com paleta levemente enriquecida (tons quentes de dourado + "preto quente" em vez de preto neutro), raios de borda maiores (cartões arredondados = sensação de boutique/spa em vez de corporativo), sombras com leve tingimento dourado em vez de cinza puro, e uma escala tipográfica fluida (clamp) para títulos respirarem melhor do mobile ao desktop sem precisar de mais breakpoints. */ :root { --color-primary: #9C7A3D; --color-primary-dark: #6F5934; --color-primary-light: #C9A768; --color-primary-soft: rgba(156, 122, 61, 0.09); --color-primary-soft-strong: rgba(156, 122, 61, 0.16); --color-bg: #FDFDFB; --color-bg-alt: #F8F3EC; --color-text: #201C16; --color-text-soft: #4A4640; --color-text-muted: #7A756C; --color-border: #E9DFCF; --color-white: #FFFFFF; --font-title: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container-width: 1140px; --space-2xs: 0.4rem; --space-xs: 0.75rem; --space-sm: 1.25rem; --space-md: 2rem; --space-lg: 3.5rem; --space-xl: 5.5rem; --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; --shadow-soft: 0 16px 40px -12px rgba(76, 58, 20, 0.16); --shadow-lift: 0 24px 48px -16px rgba(76, 58, 20, 0.26); --transition: 0.25s ease; --transition-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* ---- Reset básico ---- */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip também em (não só ): o menu mobile (.site-nav) é position:fixed + transform: translateX(100%) para ficar fora da tela quando fechado — mas elementos fixed não são contidos pelo overflow-x do (são posicionados relativo ao viewport/initial containing block, não ao body), então sem isso aqui o navegador ainda soma a caixa do menu "fora da tela" na largura rolável da página, criando uma barra de rolagem horizontal fantasma abaixo de 900px mesmo com o menu visualmente invisível. Bug real encontrado e corrigido em 2026-07-09 (auditoria de responsivo). */ html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* Guarda contra o overflow-x que o truque full-bleed (100vw) do .location-map pode gerar quando a barra de rolagem vertical entra no cálculo de 100vw. */ overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; } /* ---- Foco visível (acessibilidade de teclado) ---- Aplicado a todo elemento interativo do site institucional; componentes com um estado de foco mais específico (ex.: .category-quicknav a, .category- header, .nav-toggle) sobrescrevem/complementam isso sem removê-lo. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* ---- Microinteração: revelar seções ao rolar a página ---- Classe aplicada via assets/js/main.js (IntersectionObserver) a seções e cartões, não no HTML — puramente progressiva: se o JS não rodar por qualquer motivo, o elemento nunca ganha a classe "reveal" e permanece com opacidade/posição normais (sem risco de conteúdo escondido). */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } } h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; margin: 0 0 var(--space-xs); color: var(--color-text); } /* Escala fluida: cresce suavemente entre o menor e o maior viewport-alvo em vez de saltar num único breakpoint — títulos ficam bem proporcionados em qualquer largura de tela, não só nos pontos de quebra testados. */ h1 { font-size: clamp(2.15rem, 1.7rem + 2.1vw, 3.4rem); } h2 { font-size: clamp(1.7rem, 1.5rem + 0.9vw, 2.15rem); } h3 { font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.35rem); } p { margin: 0 0 var(--space-xs); color: var(--color-text-soft); } .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-sm); } .center { text-align: center; } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--color-primary-dark); font-weight: 600; margin-bottom: var(--space-2xs); } /* Pequeno traço dourado antes do texto — reforça a linguagem "delicada" da marca sem precisar de ícone/imagem nova. Propositalmente um ::before inline-block (não flex no .eyebrow inteiro): .eyebrow continua sendo um

de bloco normal, então a centralização já existente — seja pela própria classe .center no eyebrow (Home) seja herdada de um container pai com .center (Sobre/Contato) — continua funcionando sem regressão, porque o traço flui como parte do conteúdo inline junto com o texto. */ .eyebrow::before { content: ''; display: inline-block; vertical-align: middle; width: 22px; height: 1px; margin-right: 0.55em; margin-bottom: 0.15em; background: var(--color-primary); } .hero .eyebrow::before { background: rgba(255, 255, 255, 0.6); } .section-title { margin-bottom: var(--space-md); } /* Sublinhado curto e centralizado sob o título de seção — assinatura visual discreta reaproveitada em todas as páginas para dar unidade à repaginada. */ .section-title.center::after { content: ''; display: block; width: 46px; height: 2px; margin: var(--space-xs) auto 0; background: var(--color-primary); border-radius: var(--radius-pill); } /* ---- Botões ---- */ .btn { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.03em; padding: 0.9rem 1.9rem; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); text-align: center; } .btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: 0 10px 24px -10px rgba(76, 58, 20, 0.55); } .btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(76, 58, 20, 0.6); } .btn-primary:active { transform: translateY(0); } .btn-outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); } .btn-outline:hover { background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); } .btn-outline:active { transform: translateY(0); } /* Antes .btn-lg era, na prática, MENOR que .btn (padding/fonte reduzidos) — inconsistente com seu próprio nome e com o papel de destaque que ocupa (CTA principal do hero e fim de página). Agora é de fato o botão de maior destaque da hierarquia, mesma forma pill dos demais botões. */ .btn-lg { padding: 1.05rem 2.4rem; font-size: 1.02rem; border-radius: var(--radius-pill); } /* ---- Header / navegação ---- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(253, 253, 251, 0.88); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 rgba(156, 122, 61, 0.06); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-xs); } .logo { display: flex; align-items: center; } .logo img { height: 46px; width: auto; display: block; } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .nav-toggle span { display: block; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .site-nav { position: fixed; inset: 0 0 0 30%; top: 71px; background: var(--color-bg); border-left: 1px solid var(--color-border); padding: var(--space-md) var(--space-sm); transform: translateX(100%); transition: transform var(--transition-slow); display: flex; flex-direction: column; gap: var(--space-md); height: calc(100vh - 71px); overflow-y: auto; box-shadow: var(--shadow-lift); } .site-nav.is-open { transform: translateX(0); } .site-nav ul { display: flex; flex-direction: column; gap: var(--space-sm); } .site-nav a { display: inline-block; font-size: 1.05rem; font-weight: 500; padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: color var(--transition), background-size var(--transition); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--color-primary); background-size: 100% 1px; } /* .nav-actions agrupa a ação primária (Agendar) e a secundária (Minhas reservas) para que fiquem visualmente próximas, com hierarquia clara: "Agendar" continua como botão sólido (conversão); "Minhas reservas" é um link discreto de suporte pós-agendamento, sem competir com o CTA. */ .nav-actions { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .nav-secondary-link { font-size: 0.85rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding-bottom: 2px; /* Sublinhado animado (em vez de text-decoration: underline abrupto): uma régua de 1px que cresce da esquerda para a direita via background-size, mesma linguagem "dourado sutil" do resto do site. */ background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px; transition: color var(--transition), background-size var(--transition); } .nav-secondary-link:hover, .nav-secondary-link:focus-visible { color: var(--color-primary); background-size: 100% 1px; } .nav-cta.btn { padding: 0.6rem 1.5rem; font-size: 0.85rem; } .nav-cta.btn:hover { color: var(--color-white); text-shadow: 0 0 1px rgba(255, 255, 255, 0.6); } @media (min-width: 900px) { .logo img { height: 60px; } .footer-logo { height: 76px; } .nav-toggle { display: none; } .site-nav { position: static; inset: auto; transform: none; background: none; border: none; padding: 0; height: auto; flex-direction: row; align-items: center; gap: var(--space-md); } .site-nav ul { flex-direction: row; gap: var(--space-md); } .nav-actions { align-self: center; flex-direction: row; align-items: center; gap: var(--space-sm); } } /* ---- Hero ---- */ .hero { position: relative; overflow: hidden; padding-block: calc(var(--space-xl) + var(--space-sm)) var(--space-lg); } /* Gradiente com leve tingimento dourado nas bordas (em vez de um overlay cinza/preto neutro) — reforça a identidade "quente" da marca mesmo sobre a foto, e ainda garante contraste AA para o texto branco por cima. */ .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(32, 24, 10, 0.55) 0%, rgba(20, 15, 8, 0.82) 100%), linear-gradient(0deg, rgba(156, 122, 61, 0.28) 0%, rgba(156, 122, 61, 0) 45%); pointer-events: none; } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media-bg { width: 100%; height: 100%; object-fit: cover; } .hero-inner { position: relative; z-index: 2; max-width: 720px; text-align: center; margin-inline: auto; } .hero .eyebrow { color: var(--color-bg-alt); } .hero h1 { margin-bottom: var(--space-sm); color: var(--color-white); } .hero-sub { font-size: clamp(1rem, 0.93rem + 0.35vw, 1.15rem); margin-bottom: var(--space-md); color: rgba(255, 255, 255, 0.92); } .hero-tagline { font-family: var(--font-title); font-style: italic; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); font-weight: 600; color: var(--color-primary-light); margin-bottom: var(--space-md); } /* ---- Serviços (destaque na Home) ---- */ .services { padding-block: var(--space-xl); } .services-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-bottom: var(--space-md); } .service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; text-align: center; box-shadow: var(--shadow-soft); transition: transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--color-primary-light); } .service-card-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition-slow); } /* Zoom suave na foto ao passar o mouse — o corte fica contido porque .service-card já tem overflow: hidden. */ .service-card:hover .service-card-image { transform: scale(1.06); } .service-card-body { padding: var(--space-md); } .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--color-primary-soft); font-size: 1.15rem; color: var(--color-primary-dark); margin-bottom: var(--space-xs); } .service-card h3 { margin-bottom: var(--space-2xs); } .service-card p { font-size: 0.95rem; margin-bottom: 0; } @media (min-width: 700px) { .services-grid { grid-template-columns: repeat(3, 1fr); } /* 7 cards em grade de 3 colunas deixam a última linha com 1 item solto; centraliza esse item na coluna do meio em vez de alinhá-lo à esquerda. */ .services-grid > .service-card:last-child:nth-child(3n+1) { grid-column: 2 / 3; } } /* ---- Por que escolher (Home) ---- */ .why-choose { background: var(--color-bg-alt); padding-block: var(--space-xl); } .why-choose-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; } .why-choose-list { display: flex; flex-direction: column; gap: var(--space-md); } .why-choose-item { display: flex; align-items: flex-start; gap: var(--space-sm); } .why-choose-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-primary-soft); font-size: 1.2rem; line-height: 1; color: var(--color-primary-dark); } .why-choose-item h3 { margin-bottom: var(--space-2xs); font-size: 1.15rem; } .why-choose-item p { font-size: 0.95rem; margin-bottom: 0; } /* Imagem tratada como "selo de autenticidade" -- moldura de card (mesmo padrão visual de .service-card: fundo branco, borda sutil, sombra suave) e tamanho contido, em vez de ocupar 100% da coluna. O arquivo original é grande e denso (~1195x910px, texto embutido, 4 certificados emoldurados), então precisa de um limite de largura bem mais conservador para não competir com o restante da seção. */ .why-choose-media { display: flex; flex-direction: column; align-items: center; } .why-choose-media-frame { display: inline-block; width: 100%; max-width: 300px; padding: var(--space-xs); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .why-choose-media img { display: block; width: 100%; height: auto; border-radius: 2px; } .why-choose-media-caption { margin-top: var(--space-2xs); margin-bottom: 0; font-size: 0.85rem; color: var(--color-text-soft); text-align: center; } @media (min-width: 800px) { .why-choose-grid { grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); } .why-choose-media-frame { max-width: 380px; } } /* ---- Sobre a Geizi (teaser na Home) ---- Reaproveita .about-intro-grid/.about-photo (definidas em "Sobre") porque é o mesmo par foto+texto, com o mesmo arquivo de imagem — só muda o wrapper de seção (espaçamento/fundo de Home em vez do padding de página interna). O tamanho da foto aqui é reduzido de forma escopada (seletor descendente ".about-teaser .about-photo", não a classe global) para não afetar a mesma foto em sobre.html, que continua ocupando a coluna inteira do grid lá. */ .about-teaser { padding-block: var(--space-xl); } .about-teaser .about-photo { max-width: 380px; margin-inline: auto; } @media (min-width: 800px) { .about-teaser .about-intro-grid { grid-template-columns: 1fr 1.5fr; } } /* ---- Avaliações Google ---- */ .reviews { background: var(--color-bg-alt); padding-block: var(--space-xl); } .reviews .container { max-width: 1100px; } .stars { color: var(--color-primary); font-size: 1.6rem; letter-spacing: 0.2em; margin-bottom: var(--space-xs); } /* Layout geral: card de resumo + carrossel */ .reviews-widget { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); } /* Card de resumo (esquerda em telas largas) */ .reviews-summary-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: var(--space-md) var(--space-sm); text-align: center; display: flex; flex-direction: column; align-items: center; } .reviews-summary-badge { font-family: var(--font-title); font-weight: 600; font-size: 1.7rem; color: var(--color-primary-dark); margin: 0 0 var(--space-2xs); } .reviews-summary-card .stars { font-size: 1.4rem; } .reviews-summary-count { font-size: 0.85rem; color: var(--color-text-soft); margin: 0 0 var(--space-sm); } .reviews-summary-logo { height: 18px; width: auto; } /* Carrossel */ .reviews-carousel-wrap { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; } .reviews-nav { flex-shrink: 0; display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-primary); box-shadow: var(--shadow-soft); cursor: pointer; transition: background var(--transition), color var(--transition), opacity var(--transition); } .reviews-nav:hover:not(:disabled) { background: var(--color-primary); color: var(--color-white); } .reviews-nav:disabled { opacity: 0.35; cursor: default; } /* Setas só aparecem a partir de tablet/desktop e quando há overflow real (menos cards do que cabem na tela = sem setas). Em telas pequenas a navegação é só por swipe/scroll horizontal nativo. */ @media (min-width: 700px) { .reviews-carousel-wrap.has-overflow .reviews-nav { display: flex; } } .reviews-list { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: var(--space-2xs) var(--space-2xs) var(--space-sm); margin: 0; min-width: 0; } .reviews-list::-webkit-scrollbar { display: none; } .review-card { flex: 0 0 82%; max-width: 320px; scroll-snap-align: start; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: var(--space-md) var(--space-sm) var(--space-sm); margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .review-avatar, .review-avatar-placeholder { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; margin-bottom: var(--space-2xs); } .review-avatar { object-fit: cover; border: 1px solid var(--color-border); } .review-avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary-dark); color: var(--color-white); font-family: var(--font-title); font-size: 1.15rem; font-weight: 600; } .review-text { font-size: 0.95rem; font-style: italic; color: var(--color-text-soft); margin: 0 0 var(--space-sm); } .review-card-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); min-width: 0; } .review-author-row { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; max-width: 100%; } .review-author { font-size: 0.95rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-google-icon { display: inline-flex; line-height: 0; flex-shrink: 0; } .review-stars { color: var(--color-primary); font-size: 0.85rem; letter-spacing: 0.12em; margin: 0; } .reviews-attribution { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .google-attribution-link { display: inline-flex; line-height: 0; } .google-maps-logo { height: 18px; width: auto; } .reviews-html-attributions { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; } .reviews-html-attributions:empty { display: none; } @media (min-width: 700px) { .review-card { flex-basis: 300px; } } @media (min-width: 900px) { .reviews-widget { flex-direction: row; align-items: center; gap: var(--space-lg); } .reviews-summary-card { flex: 0 0 240px; } .reviews-carousel-wrap { flex: 1; } .review-card { flex-basis: 320px; } } /* ---- Localização (Home) ---- */ .location { padding-block: var(--space-xl); } .location-address { margin-bottom: var(--space-md); color: var(--color-text-soft); } /* Full-bleed: o mapa sai do fluxo do .container (que tem max-width/padding-inline) e ocupa 100% da largura da viewport, mesmo com pai(s) restritos. O truque left:50% + margin-left:-50vw funciona independente da largura do elemento pai. Especificidade .location-map.contact-map (0,2,0) sobrescreve as regras de .contact-map (0,1,0) definidas mais abaixo, para width/aspect-ratio/ bordas/cantos — aqui o mapa não é mais um card com moldura, e sim uma faixa full-bleed. */ .location-map.contact-map { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; aspect-ratio: auto; height: 350px; min-height: 0; border-radius: 0; border: 0; box-shadow: none; } @media (min-width: 800px) { .location-map.contact-map { height: 420px; } } /* ---- Footer ---- */ .site-footer, .site-footer * { font-family: 'Quicksand', sans-serif; } .site-footer { position: relative; background: var(--color-text); color: var(--color-bg-alt); padding-block: var(--space-lg) var(--space-md); } /* Linha dourada fina no topo do rodapé — mesma assinatura visual do sublinhado de .section-title, reforçando a identidade em toda a página sem precisar de imagem nova. */ .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 3px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid rgba(253, 253, 253, 0.15); margin-bottom: var(--space-sm); } .footer-logo { display: block; height: 60px; width: auto; margin-bottom: var(--space-xs); } .footer-title { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; font-weight: 600; color: var(--color-bg); margin-bottom: var(--space-sm); } .site-footer p { font-size: 0.9rem; color: rgba(253, 253, 253, 0.75); margin-bottom: var(--space-2xs); } .site-footer a:hover { color: var(--color-bg); } .footer-social-link { display: inline-flex; align-items: center; gap: 0.4rem; transition: transform var(--transition), color var(--transition); } .footer-social-link:hover { transform: translateX(3px); } .footer-social-icon { display: inline-flex; line-height: 0; flex-shrink: 0; } .footer-social-icon.contact-whatsapp-icon { color: var(--color-white); } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); } .footer-nav a { display: inline-block; padding-block: 0.2rem; font-size: 0.9rem; } .footer-copy { font-size: 0.75rem; color: rgba(253, 253, 253, 0.55); text-align: center; margin: 0; } @media (min-width: 700px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; } } /* ============================================================================ Páginas internas — Sobre, Contato, Serviços ============================================================================ */ /* ---- Cabeçalho genérico de página interna ---- */ .page-header { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%); padding-block: calc(var(--space-xl) - var(--space-sm)) var(--space-md); } /* Mancha dourada suave e desfocada ao fundo — só decorativa (aria-hidden via pseudo-elemento, não entra na árvore de acessibilidade), dá profundidade ao cabeçalho de página interna sem exigir imagem nova. */ .page-header::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 560px; height: 320px; background: radial-gradient(closest-side, var(--color-primary-soft-strong), transparent); pointer-events: none; } .page-header .container { position: relative; max-width: 720px; } .page-header p { margin-top: var(--space-xs); } .page-header .btn { margin-top: var(--space-sm); } /* ---- CTA genérico de fim de página ---- */ .cta-section { background: var(--color-bg-alt); padding-block: var(--space-xl); text-align: center; } .cta-section h2 { margin-bottom: var(--space-sm); } /* ---- Sobre ---- */ .about-intro { padding-block: var(--space-lg) var(--space-md); } .about-intro-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: center; } .about-photo { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; height: auto; object-fit: cover; /* aspect-ratio mais estreito que a proporção intrínseca (1388/1600 ≈ 0.8675) do arquivo original, para que o object-fit: cover corte as faixas pretas (pillarbox) gravadas nas laterais da própria imagem. Valor estimado visualmente — ajustar fino após conferir no navegador (ex.: 3.3/5 corta ainda mais, 3.8/5 corta menos). */ aspect-ratio: 3.6 / 5; } .about-intro-text h2 { margin-bottom: var(--space-xs); } @media (min-width: 800px) { .about-intro-grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-lg); } } .about-blocks { padding-block: var(--space-md) var(--space-xl); } .about-block { padding-block: var(--space-md); border-top: 1px solid var(--color-border); } .about-block:first-child { border-top: none; } .about-block h2 { color: var(--color-primary-dark); } .about-block p { max-width: 720px; margin-bottom: 0; } .about-feature { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: center; } .about-feature-image { border-radius: var(--radius); box-shadow: var(--shadow-soft); width: 100%; max-width: 360px; height: auto; object-fit: cover; margin-inline: auto; } @media (min-width: 800px) { .about-feature { grid-template-columns: 1.2fr 1fr; gap: var(--space-lg); } .about-feature-image { max-width: none; } } /* ---- Contato ---- */ .contact-section { padding-block: var(--space-md) var(--space-xl); } .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } .contact-info h2 { margin-bottom: var(--space-sm); } .contact-item { margin-bottom: var(--space-sm); } .contact-item strong { display: block; color: var(--color-text); font-weight: 600; margin-bottom: 0.2rem; } .contact-whatsapp-link { display: inline-flex; align-items: center; gap: 0.4rem; } .contact-whatsapp-icon { display: inline-flex; line-height: 0; flex-shrink: 0; color: #25D366; } .contact-ambient-image { width: 100%; max-width: 360px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-top: var(--space-sm); filter: contrast(1.06) saturate(1.1) brightness(1.02); } .contact-cta { margin-top: var(--space-sm); } .contact-map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); } .contact-map iframe { width: 100%; height: 100%; border: 0; display: block; } @media (min-width: 800px) { .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: stretch; } .contact-map { aspect-ratio: auto; height: 100%; min-height: 380px; } } /* ---- Navegação rápida por categoria (quicknav sticky) ---- */ .category-quicknav { position: sticky; top: 71px; /* altura do .site-header no mobile (logo 46px + padding-block) */ z-index: 90; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .category-quicknav-inner { display: flex; /* "safe center": centraliza quando todas as categorias cabem na largura disponível (desktop/tablet); quando não cabem (mobile, com overflow-x: auto ativo), o navegador recua automaticamente para o comportamento de "start" em vez de cortar os primeiros itens à esquerda — preserva o scroll horizontal "arraste para ver mais categorias" sem precisar de um breakpoint fixo. Fallback (browsers sem suporte a safe/unsafe): a declaração é ignorada e o alinhamento default (flex-start) é mantido, ou seja, degrada para o comportamento atual (sem quebra no mobile). */ justify-content: safe center; gap: var(--space-2xs); overflow-x: auto; white-space: nowrap; padding-block: var(--space-xs); -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .category-quicknav-inner::-webkit-scrollbar { height: 4px; } .category-quicknav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0.5rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 500; color: var(--color-text-soft); background: var(--color-white); transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .category-quicknav a:hover, .category-quicknav a:focus-visible, .category-quicknav a.is-active { color: var(--color-white); background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 8px 18px -8px rgba(76, 58, 20, 0.45); } @media (min-width: 900px) { .category-quicknav { top: 85px; } /* altura do .site-header no desktop (logo 60px + padding-block) */ } /* ---- Serviços (lista completa, agrupada por categoria) ---- */ .services-list-section { padding-block: var(--space-md) var(--space-xl); } .category-block { margin-bottom: var(--space-lg); scroll-margin-top: 125px; } .category-block:last-child { margin-bottom: 0; } .category-header { display: flex; align-items: center; gap: var(--space-sm); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-xs); margin-bottom: var(--space-md); cursor: pointer; list-style: none; border-radius: var(--radius); } .category-header::-webkit-details-marker { display: none; } .category-header::marker { content: ""; } /* Feedback de que o cabeçalho inteiro é clicável (não só a seta) — reforça affordance em mouse e teclado sem exigir sublinhado/underline no título. */ .category-header:hover .category-title, .category-header:focus-visible .category-title { color: var(--color-primary); } .category-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .category-image { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; box-shadow: var(--shadow-soft); flex-shrink: 0; } .category-title { color: var(--color-primary-dark); margin: 0; /* Menor que o h2 padrão (1.9rem) no mobile: ao lado de uma miniatura de 64px, o tamanho padrão de section title competia demais por espaço e desequilibrava a hierarquia da lista de categorias. Volta ao tamanho padrão a partir de 700px, quando a miniatura também cresce. */ font-size: 1.4rem; transition: color var(--transition); } .category-count { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--color-text-soft); margin-left: 0.35rem; white-space: nowrap; } .category-chevron { margin-left: auto; flex-shrink: 0; font-size: 1.2rem; line-height: 1; color: var(--color-primary); transition: transform var(--transition); } details[open] > .category-header .category-chevron { transform: rotate(180deg); } @media (min-width: 700px) { .category-image { width: 96px; height: 96px; } .category-title { font-size: 1.9rem; } } @media (min-width: 900px) { .category-block { scroll-margin-top: 140px; } } .services-compact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); } .service-compact-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-sm); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .service-compact-card:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-soft); transform: translateY(-2px); } .service-compact-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem var(--space-xs); margin-bottom: 0.2rem; } /* flex-basis com wrap: nomes de serviço longos (ex. "Depilação Completa (axila, pernas, virilha...)") quebram linha em vez de espremer o preço contra a borda do card em telas estreitas (360-390px). */ .service-compact-header h3 { margin: 0; font-size: 1.05rem; flex: 1 1 200px; } .service-compact-price { color: var(--color-primary); font-weight: 600; font-family: var(--font-body); white-space: nowrap; } .service-compact-meta { font-size: 0.8rem; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-2xs); } .service-compact-desc { font-size: 0.9rem; margin-bottom: 0; } @media (min-width: 700px) { .services-compact-grid { grid-template-columns: repeat(2, 1fr); } }