/* ==========================================================================
   Thamires Marques — Advocacia Previdenciária · folha de estilo
   Base: layout "Oris", adaptado à marca. Cores, fontes e elementos seguem o
   manual (marca/identidade-visual/09_manual_marca, página 16).
   Blocos na ordem da página: cabeçalho, hero, serviços, passo a passo,
   4 motivos, quem é, FAQ, chamada final, rodapé, WhatsApp e menu mobile.
   ========================================================================== */

/* ---------- Fontes (servidas localmente; geradas por _scripts/preparar-identidade.mjs) ---------- */
@font-face{font-family:'Manrope';src:url(../fonts/manrope.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens (manual da marca, p. 16) ---------- */
:root{
  --marrom:#80664D;   /* botões, destaques, chamada final */
  --cafe:#4A3428;     /* capas, faixas e blocos escuros */
  --caramelo:#B08D68; /* fios, losango, números (só detalhe) */
  --cacau:#35261F;    /* texto e cartão escuro */
  --nevoa:#F5F2EE;    /* fundo da página */
  --areia:#D9D2C9;    /* blocos de apoio */
  --linho:#DED7CF;    /* bordas e divisórias */
  --branco:#FFFFFF;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base (Oris) ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;hyphens:manual;background:var(--nevoa);color:var(--cacau);font:400 16px/1.6 Manrope,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{max-width:100%;display:block}
.serif{font-family:Newsreader,Georgia,serif}
.micro{font-size:.7rem;letter-spacing:.27em;text-transform:uppercase}
.wrap{width:min(1280px,calc(100% - 40px));margin:auto}
.nobr{white-space:nowrap} /* ex.: "on-line" não quebra no hífen */
.br-celular{display:none} /* quebra de linha só no celular (ver @media 600px) */
section[id],.prose [id]{scroll-margin-top:104px} /* âncoras do menu não ficam atrás do cabeçalho fixo */
:focus-visible{outline:2px solid var(--marrom);outline-offset:4px;border-radius:4px}
/* Sobre fundos escuros (café, marrom) o contorno de foco fica névoa, senão some. */
.exp-card :focus-visible,.final-card :focus-visible,.service:nth-child(3) :focus-visible,.cookies :focus-visible{outline-color:var(--nevoa)}
/* Link "Pular para o conteúdo": invisível até receber foco pelo teclado. */
.pular{position:absolute;left:16px;top:-80px;z-index:60;background:var(--cacau);color:var(--branco);padding:12px 20px;border-radius:999px;font-weight:600}
.pular:focus{top:16px}

/* ---------- Cabeçalho (Oris) ---------- */
.top{position:fixed;z-index:30;top:18px;left:50%;transform:translateX(-50%);width:min(1220px,calc(100% - 32px));height:72px;border-radius:36px;background:#fffffff0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 40px rgb(74 52 40 / 8%);border:1px solid var(--branco);display:flex;align-items:center;padding:0 12px 0 28px}
/* Logotipo horizontal em SVG. O arquivo traz a área de proteção embutida (margem
   transparente): com 264 px de largura, o desenho fica com ~240 px, o mínimo do
   manual, e a margem negativa devolve a altura útil ao cabeçalho. */
.logo{display:block;line-height:0;flex:none}
.logo img{width:264px;max-width:none;height:auto;margin:-12px 0 -12px -11px}
.nav{margin:auto;display:flex;gap:28px;font-size:.82rem}
.nav a{position:relative}
.nav a:after{content:'';position:absolute;height:1px;bottom:-7px;left:0;width:0;background:var(--marrom);transition:.35s}
.nav a:hover:after{width:100%}
.talk{display:inline-flex;align-items:center;gap:12px;border-radius:28px;background:var(--marrom);color:var(--branco);padding:13px 20px;transition:.35s;border:0;cursor:pointer}
.talk:hover{background:var(--cacau);color:var(--branco);transform:translateY(-2px)}
.menu{display:none;border:0;background:none;color:var(--cacau);font-size:1.5rem;cursor:pointer;width:44px;height:44px;line-height:1}

/* ---------- Hero: texto de um lado, foto nítida do outro (sem sobreposição) ---------- */
.hero{padding:108px 20px 20px}
.hero-card{width:min(1480px,100%);margin:auto;min-height:calc(100vh - 128px);border-radius:52px;background:var(--branco);display:grid;grid-template-columns:1.2fr auto .8fr;overflow:hidden}
.hero-copy{padding:clamp(40px,5vw,88px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--cacau)}
.hero .micro{color:var(--marrom)}
.hero h1{font-size:clamp(2.6rem,4.2vw,5rem);font-weight:400;line-height:.98;letter-spacing:-.035em;margin:22px 0 26px;max-width:680px}
.hero-sub{font-size:1.08rem;max-width:520px;margin:0 0 32px}
.hero-apoio{font-size:.86rem;max-width:430px;margin:18px 0 0}
.hero-note{writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;color:var(--marrom);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;padding:0 6px}
.hero-photo{position:relative;margin:16px;border-radius:40px 140px 40px 40px;overflow:hidden;background:var(--areia);min-height:520px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* ---------- Como podemos te ajudar: cartões de serviço (Oris) ---------- */
.services{padding:120px 0 60px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px;gap:30px}
.section-head h2{font:400 clamp(3rem,5vw,5.8rem)/.9 Newsreader,Georgia,serif;margin:10px 0}
.section-head p{max-width:380px;color:var(--cacau)}
.services .section-head p,.faq .section-head p{max-width:560px;margin:16px 0 0} /* texto logo abaixo do título */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.service{display:flex;flex-direction:column;border-radius:120px 120px 34px 34px;background:var(--branco);overflow:hidden;border:1px solid var(--branco);--anel:var(--branco)}
.service:nth-child(2){background:var(--areia);border-color:var(--areia);border-radius:34px 120px 34px 120px;--anel:var(--areia)}
.service:nth-child(3){background:var(--marrom);border-color:var(--marrom);color:var(--branco);border-radius:120px 34px 120px 34px;--anel:var(--marrom)}
.service-img{position:relative;aspect-ratio:4/3;background:var(--linho)}
.service-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)} /* --focus no img: enquadramento de cada foto */
/* Ícone em linha fina marrom, em círculo areia, sobre a divisa foto/texto (referência De Pauli Pacheco). */
.service-icon{position:relative;z-index:1;width:72px;height:72px;margin:-36px auto 0;border-radius:50%;background:var(--areia);color:var(--marrom);display:grid;place-items:center;box-shadow:0 0 0 6px var(--anel)}
.service:nth-child(2) .service-icon{background:var(--branco)}
.service-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.service-body{padding:20px 32px 40px;text-align:center}
.service .micro{color:var(--marrom)}
.service:nth-child(3) .micro{color:var(--nevoa)}
.service h3{font:400 clamp(2rem,2.6vw,2.8rem)/1 Newsreader,Georgia,serif;margin:10px 0 20px}
.service ul{list-style:none;margin:0 auto;padding:0;display:grid;gap:8px;text-align:left;max-width:300px}
.service li{position:relative;padding-left:20px}
/* marcador: o losango da marca (caramelo; areia sobre o cartão marrom) */
.service li:before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--caramelo);transform:rotate(45deg)}
.service:nth-child(3) li:before{background:var(--areia)}
.services-cta{text-align:center;margin:44px 0 0}
.services-cta .talk{justify-content:center;text-align:center}

/* ---------- Passo a passo: linha do tempo (6 etapas) ---------- */
.passos{padding:40px 0 60px;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:start}
.passos-head{position:sticky;top:130px}
.passos h2{font:400 clamp(2.6rem,4.2vw,3.8rem)/1 Newsreader,Georgia,serif;margin:16px 0 22px}
.passos-head p{font-size:1.08rem;max-width:420px;margin:0}
.passos-lista{list-style:none;margin:0;padding:0}
.passo{position:relative;display:grid;grid-template-columns:64px 1fr;gap:26px;padding-bottom:40px}
.passo:last-child{padding-bottom:0}
.passo:not(:last-child):before{content:'';position:absolute;left:32px;top:64px;bottom:0;width:1px;background:var(--areia)}
.passo-no{width:64px;height:64px;border-radius:50%;border:1px solid var(--marrom);display:grid;place-items:center;font:400 1.35rem Newsreader,Georgia,serif;color:var(--marrom);background:var(--nevoa)}
.passo h3{font:400 1.6rem/1.15 Newsreader,Georgia,serif;margin:12px 0 8px}
.passo p{margin:0;max-width:520px}

/* ---------- 4 motivos: cartão café (Oris .experience) ---------- */
.experience{padding:20px}
.exp-card{width:min(1480px,100%);margin:auto;background:var(--cafe);color:var(--branco);border-radius:52px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;min-height:760px}
.exp-photo{background:var(--marrom) 35% center/cover no-repeat;clip-path:ellipse(95% 78% at 2% 50%);position:relative;overflow:hidden}
.exp-copy{padding:7vw 6vw;display:flex;flex-direction:column;justify-content:center}
.exp-copy h2{font-size:clamp(3.7rem,6vw,7rem);font-weight:400;line-height:.82;margin:18px 0}
.exp-copy>p{color:var(--nevoa);max-width:470px}
.exp-copy>p+p{margin-top:0}
.exp-copy .talk{margin-top:30px;width:max-content;background:var(--branco);color:var(--cacau)}
.exp-copy .micro{color:var(--areia)} /* areia sobre café 7,7:1 (caramelo só em texto grande) */

/* 4 motivos: foto à esquerda, título e grade 2×2 à direita (referência De Pauli Pacheco) */
.motivos .exp-card{grid-template-columns:.8fr 1.2fr;min-height:0}
.motivos .exp-copy{padding:clamp(48px,5vw,88px)}
.motivos .exp-copy h2{font-size:clamp(2.2rem,3.2vw,3.6rem);line-height:1.02;margin:16px 0 40px;max-width:720px}
.motivos-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:38px 34px}
.motivo-topo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.motivo-no{font:400 2.4rem/1 Newsreader,Georgia,serif;color:var(--caramelo)} /* número grande: caramelo sobre café 3,8:1 */
.motivo-icone{width:52px;height:52px;border-radius:50%;background:var(--cacau);color:var(--caramelo);display:grid;place-items:center;flex:none}
.motivo-icone svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.motivo h3{font:400 1.45rem/1.15 Newsreader,Georgia,serif;margin:0 0 8px;color:var(--branco)}
.motivo p{margin:0;color:var(--nevoa);font-size:.95rem}

/* ---------- Quem é a Dra. Thamires: retrato (Oris .about) ---------- */
.about{padding:120px 0 60px;display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}
.portrait{min-height:660px;border-radius:48% 48% 24px 24px;background:var(--areia) 70% center/cover no-repeat;position:relative;overflow:visible}
.portrait:after{content:attr(data-note);position:absolute;background:var(--branco);border-radius:60px;padding:20px 28px;right:-35px;bottom:45px;font:italic 1.4rem Newsreader,Georgia,serif;box-shadow:0 16px 40px rgb(74 52 40 / 11%);color:var(--cacau);white-space:nowrap}
.about h2{font:400 clamp(2.6rem,4.2vw,3.8rem)/1 Newsreader,Georgia,serif;margin:16px 0 14px} /* teto: acima de ~1440 px a coluna para de crescer */
.about-titulacao{font:500 .78rem/1.6 Manrope,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--marrom);margin:0 0 26px}
.about h3{font:400 1.4rem/1.2 Newsreader,Georgia,serif;margin:30px 0 12px}
.about p{color:var(--cacau);max-width:520px}
.about .talk{margin-top:34px}
.about .about-texto{text-wrap:pretty;max-width:545px}
/* Justificado (linhas terminando na mesma margem) só quando a coluna tem os 545 px inteiros:
   sem hifenização, colunas mais estreitas abrem buracos entre as palavras. */
@media(min-width:1280px){.about .about-texto{text-align:justify}}
/* Lista com o losango da marca como marcador */
.lista-losango{list-style:none;margin:0;padding:0;display:grid;gap:9px;max-width:520px}
.lista-losango li{position:relative;padding-left:20px}
.lista-losango li:before{content:'';position:absolute;left:2px;top:.62em;width:7px;height:7px;background:var(--caramelo);transform:rotate(45deg)}

/* ---------- Chamada final e rodapé (Oris) ---------- */
.final{padding:0 20px 20px}
.final-card{width:min(1480px,100%);margin:auto;text-align:center;background:var(--marrom);color:var(--branco);border-radius:52px;padding:120px 25px}
.final h2{font:400 clamp(2.6rem,5vw,5rem)/1 Newsreader,Georgia,serif;margin:18px auto 22px;max-width:900px;text-wrap:balance}
.final p{color:var(--nevoa);max-width:560px;margin-inline:auto}
.final .talk{background:var(--branco);color:var(--cacau);margin-top:25px}
.final .final-ligar{margin:24px auto 0;color:var(--branco)}
.final-ligar a{font-weight:600;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.final-ligar a:hover{text-decoration-thickness:2px}
.final .final-horario{margin:6px auto 0;font-size:.86rem;color:var(--nevoa)}
/* Rodapé em 4 colunas: marca + OAB · áreas · contato · links rápidos; faixa final com © e privacidade. */
footer{background:var(--branco);color:var(--cacau);font-size:.9rem;padding:80px 0 0}
footer a:hover{color:var(--marrom)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
footer p{margin:0}
.rodape-grid{display:grid;grid-template-columns:1.1fr .95fr 1.45fr .75fr;gap:48px}
.rodape-logo{display:inline-block}
.rodape-logo img{width:240px;max-width:none;height:auto;margin:-11px 0 -6px -10px}
.rodape-nome{font-weight:600;margin-top:16px!important}
.rodape-oab{margin-top:4px!important}
.rodape-titulo{font:500 .7rem/1.4 Manrope,Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--marrom);margin:6px 0 22px}
.rodape-contato li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.rodape-ic{width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--marrom);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rodape-contato a{text-decoration:underline;text-decoration-color:var(--linho);text-underline-offset:3px;overflow-wrap:anywhere}
.rodape-contato a:hover{text-decoration-color:currentColor}
.rodape-faixa{display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-top:64px;padding:26px 0 30px;border-top:1px solid var(--linho);font-size:.8rem}

/* Filete duplo no topo do rodapé: linha marrom + linha areia, como 04_elementos_graficos/TM_filete-duplo.svg. */
footer{background-image:linear-gradient(var(--marrom),var(--marrom)),linear-gradient(var(--areia),var(--areia));background-repeat:no-repeat;background-size:min(1280px,calc(100% - 40px)) 1px,min(1280px,calc(100% - 40px)) 1px;background-position:50% 0,50% 4px}

/* ---------- WhatsApp flutuante e revelação (Oris) ---------- */
.wa{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:25;width:62px;height:62px;border-radius:50%;background:#426b52;color:var(--branco);display:grid;place-items:center;box-shadow:0 14px 32px #24372b45;font-size:1.45rem;transition:.3s}
.wa:hover{transform:scale(1.08) rotate(-8deg)}
.wa svg{width:30px;height:30px;fill:currentColor}
.reveal{opacity:0;transform:translateY(34px);transition:1s var(--ease)}
.reveal.on{opacity:1;transform:none}

/* ---------- Aviso de cookies (só aparece com o Meta Pixel ativo; ver js/main.js) ---------- */
.cookies{position:fixed;left:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:30;width:min(560px,calc(100% - 32px));background:var(--cafe);color:var(--nevoa);border-radius:28px 28px 28px 8px;padding:22px 24px;box-shadow:0 14px 40px #4a342840;display:grid;gap:14px;font-size:.88rem;line-height:1.5}
.cookies p{margin:0}
.cookies a{color:var(--branco);text-decoration:underline;text-underline-offset:3px}
.cookies-botoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cookies button{font:600 .85rem Manrope,Arial,sans-serif;border-radius:999px;padding:11px 22px;cursor:pointer;border:1px solid var(--nevoa);background:transparent;color:var(--nevoa)}
.cookies button[data-escolha="aceito"]{background:var(--nevoa);color:var(--cacau)}
.cookies button:hover{background:var(--branco);color:var(--cacau);border-color:var(--branco)}

/* ---------- Painel de tela cheia (Oris .modal → menu mobile) ---------- */
.modal{position:fixed;inset:0;background:var(--nevoa);z-index:50;display:none;overflow:auto}
.modal.open{display:block;animation:fade .4s}
.modal-close{position:fixed;top:25px;right:25px;width:58px;height:58px;border:0;border-radius:50%;background:var(--branco);color:var(--cacau);font-size:1.7rem;z-index:2;cursor:pointer;box-shadow:0 10px 30px rgb(74 52 40 / 8%)}
.modal-grid{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.modal-copy{padding:10vw;display:flex;flex-direction:column;justify-content:center}
.modal-copy h2{font:400 clamp(4rem,8vw,9rem)/.8 Newsreader,Georgia,serif;margin:25px 0}
.modal-copy p{max-width:520px;color:var(--cacau)}
.modal-art{background:var(--marrom);display:grid;place-items:center}
.drop{width:min(65%,520px);aspect-ratio:1;border-radius:62% 38% 54% 46%;background:var(--areia);display:grid;place-items:center;text-align:center;color:var(--marrom);font:italic 1.7rem Newsreader,Georgia,serif;animation:morph 8s infinite;padding:30px}
.modal-nav{display:grid;gap:6px;margin:10px 0 30px}
.modal-nav a{font:400 clamp(2.4rem,7vw,4rem)/1.05 Newsreader,Georgia,serif;letter-spacing:-.02em;padding:6px 0;border-bottom:1px solid var(--linho)}

@keyframes morph{50%{border-radius:42% 58% 38% 62%;transform:rotate(8deg)}}
@keyframes fade{from{opacity:0}}

/* ==========================================================================
   EXTENSÕES — registradas em docs/registro-desvios.md
   ========================================================================== */

/* Imagens reais no lugar dos background-image do protótipo (permite srcset e lazy). */
.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 50%)}
.portrait{overflow:hidden}
.portrait .cover{border-radius:inherit}
.portrait-wrap{position:relative}
.portrait-wrap .portrait:after{content:none}
.portrait-note{position:absolute;background:var(--branco);border-radius:60px;padding:20px 28px;right:-35px;bottom:45px;font:italic 1.4rem Newsreader,Georgia,serif;box-shadow:0 16px 40px rgb(74 52 40 / 11%);color:var(--cacau);white-space:nowrap}

/* Hero com frase longa: mesma família, escala reduzida para manter a leitura. */

/* Galeria: faixa horizontal com rolagem por gesto, contador e setas. */

/* Perguntas frequentes: item herdado de .unit (mist/pastel alternado). */
.faq{padding:30px 0 90px}
.faq .section-head h2{font-size:clamp(2.6rem,4.2vw,3.8rem);line-height:1}
.faq-list{display:grid;gap:14px}
.faq-item{background:var(--branco);border-radius:36px;transition:.4s;border:1px solid var(--branco)}
.faq-item:nth-child(even){background:var(--areia);border-color:var(--areia)} /* manual: areia nos blocos alternados do FAQ */
.faq-item[open]{border-radius:36px 90px 36px 36px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 36px;font:400 1.5rem/1.2 Newsreader,Georgia,serif}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:1.2rem;transition:.4s}
.faq-item[open] summary span{transform:rotate(45deg);background:var(--cacau);color:var(--branco);border-color:var(--cacau)}
.faq-item p{margin:0;padding:0 36px 32px;max-width:720px;color:var(--cacau)}

/* Abas dos protocolos (Essência · Equilíbrio · Identidade). */

/* Cartões das unidades com fotografia da cidade (páginas internas). */

/* Segurança de largura: filhos de grade nunca forçam rolagem horizontal. */
.exp-card>*,.about>*,.modal-grid>*{min-width:0}
.talk{max-width:100%;flex-wrap:nowrap} /* texto longo quebra dentro do botão; a seta fica ao lado */
.exp-copy .talk,.modal-copy .talk{width:max-content;max-width:100%}

/* Bloco de texto simples (página de privacidade). */
.prose{padding:150px 0 100px;max-width:760px}
.prose h1{font:400 clamp(3rem,6vw,5.5rem)/.9 Newsreader,Georgia,serif;margin:16px 0 30px}
.prose h2{font:400 2rem/1.1 Newsreader,Georgia,serif;margin:40px 0 12px}
.prose p,.prose li{color:var(--cacau)}
.prose .micro{color:var(--marrom)}
.prose .prose-data{font-size:.85rem;margin-top:-14px}
.prose a:not(.talk){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--marrom)}
.prose a:not(.talk):hover{color:var(--marrom)}
.prose .lista-losango{list-style:none;padding:0;display:grid;gap:8px}
.prose .talk{border:0;cursor:pointer}

/* ---------- Responsivo (Oris + extensões) ---------- */
/* Rodapé: 4 colunas só a partir de 1101 px; abaixo disso, 2 colunas (o contato não cabe estreito). */
@media(max-width:1100px){
  .rodape-grid{grid-template-columns:1fr 1fr;grid-template-areas:"marca contato" "areas contato" "links contato";gap:44px 32px}
  .rodape-marca{grid-area:marca}.rodape-areas{grid-area:areas}.rodape-contato{grid-area:contato}.rodape-links{grid-area:links}
}
/* Logotipo (264 px) + 5 itens de menu + botão só cabem lado a lado acima de ~1000 px.
   Abaixo disso o cabeçalho usa o menu em painel (o mesmo ponto está em js/main.js). */
@media(max-width:1000px){
  .nav{display:none}
  .top .talk{display:none}
  .menu{display:block;margin-left:auto}
}
@media(max-width:850px){
  .top{height:72px;padding-left:22px} /* 72 px: o logotipo no tamanho mínimo do manual precisa de respiro */
  .hero{padding:102px 10px 10px}
  .hero-card{grid-template-columns:1fr;border-radius:34px;min-height:0}
  .hero-photo{order:-1;margin:10px 10px 0;min-height:0;aspect-ratio:8/7;border-radius:28px 80px 28px 28px}
  .hero-photo img{object-position:50% 45%}
  .hero-copy{padding:22px 24px 34px}
  .hero .micro{font-size:clamp(9px,calc(3.3vw - 2.4px),.7rem)} /* rótulo numa linha só a partir de ~340 px */
  .hero-sub{font-size:1rem;margin-bottom:24px}
  .hero h1{font-size:clamp(2rem,7.8vw,2.8rem);margin:12px 0 16px}
  .hero-note{display:none}
  .section-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:34px}
  /* No celular os cartões ficam empilhados (mais claro para o público do que um carrossel). */
  .services{padding:90px 0 36px}
  .service-grid{grid-template-columns:1fr;gap:14px}
  .service{border-radius:80px 80px 28px 28px}
  .service:nth-child(2){border-radius:28px 80px 28px 80px}
  .service:nth-child(3){border-radius:80px 28px 80px 28px}
  .service-img{aspect-ratio:16/9}
  .service-body{padding:18px 26px 34px}
  .exp-card{grid-template-columns:1fr;border-radius:36px}
  .exp-photo{min-height:470px;clip-path:ellipse(100% 78% at 40% 0)}
  .exp-copy{padding:70px 28px}
  .motivos .exp-card{grid-template-columns:1fr}
  .motivos .exp-photo{min-height:360px;clip-path:ellipse(115% 96% at 50% 0)}
  .motivos .exp-copy{padding:20px 26px 60px}
  .motivos .exp-copy h2{font-size:clamp(1.9rem,7.4vw,2.4rem);margin-bottom:32px}
  .motivos-lista{grid-template-columns:1fr;gap:30px}
  .about{grid-template-columns:1fr;padding:100px 0 40px}
  .portrait{min-height:460px}
  .about h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .passos{grid-template-columns:1fr;gap:40px;padding:40px 0 50px}
  .passos-head{position:static}
  .passos h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .passo{grid-template-columns:52px 1fr;gap:18px;padding-bottom:32px}
  .passo:not(:last-child):before{left:26px;top:52px}
  .passo-no{width:52px;height:52px;font-size:1.15rem}
  .passo h3{font-size:1.35rem;margin:8px 0 6px}
  .portrait-note{right:12px;font-size:1.15rem}
  .final{padding:0 10px 10px}
  .final-card{border-radius:36px;padding:80px 22px}
  .final h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  footer{padding-top:60px}
  .rodape-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"marca marca" "areas links" "contato contato";gap:44px 20px}
  .rodape-titulo{letter-spacing:.2em;white-space:nowrap}
  .br-pc{display:none}
  .rodape-faixa{flex-direction:column;margin-top:48px;padding-bottom:96px} /* espaço para o WhatsApp flutuante */
  .modal-grid{grid-template-columns:1fr}
  .modal-copy{padding:90px 28px 50px}
  .modal-art{min-height:400px}
  .drop{width:min(84%,420px);font-size:1.2rem;padding:24px}
  .faq{padding-bottom:60px}
  .faq-item summary{padding:24px 26px;font-size:1.25rem}
  .faq-item p{padding:0 26px 28px}
  .faq .section-head h2{font-size:clamp(1.9rem,8vw,2.6rem)}
  .wa{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:600px){
  .br-celular{display:inline}
  .nobr-celular{white-space:nowrap}
}
@media(max-width:420px){
  .section-head h2{font-size:2.7rem}
  .exp-copy h2{font-size:3.1rem}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}