/*
Theme Name: Dra Viviane Bertoncelo
Theme URI: https://dravivianebertoncelo.com.br
Author: Agência Bird
Author URI: https://aazizagencia.com.br
Description: Landing page da Dra. Viviane Bertoncelo — médica nutróloga em Maringá/PR. Fundo grafite, retrato em preto e branco e painel completo de edição.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viviane-bertoncelo
Tags: one-page, landing-page, medical, dark
*/

/* ==========================================================================
   1. TOKENS
   Uma cor de destaque só (areia), usada em botões e palavras-chave.
   Areia sobre grafite: 9,5:1. Cinza de apoio sobre grafite: 7,2:1.
   ========================================================================== */
:root{
  --noite:#0D0C0B;     /* topo, faixas de destaque e rodapé */
  --grafite:#141312;   /* fundo da página */
  --carvao:#1C1B19;    /* faixa alternada */
  --vidro:rgba(255,255,255,.055);
  --vidro-2:rgba(255,255,255,.08);
  --fio:rgba(237,233,225,.14);
  --fio-2:rgba(237,233,225,.28);
  --fio-areia:rgba(200,185,143,.42);

  --osso:#EDE9E1;
  --cinza:#A8A195;
  --areia:#C8B98F;
  --areia-2:#DACDA8;

  --f:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --sec:clamp(72px,8vw,112px);
  --raio:18px;
  --raio-g:28px;
  --e:cubic-bezier(.2,.62,.28,1);
  color-scheme:dark;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grafite);color:var(--osso);
  font:400 17px/1.65 var(--f);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.menu-aberto{overflow:hidden}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:600}
[hidden]{display:none!important}
::selection{background:var(--areia);color:var(--noite)}
:focus-visible{outline:2px solid var(--areia);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.pular{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--areia);color:var(--noite);padding:10px 18px;border-radius:999px;font-weight:600}
.pular:focus{left:12px}

/* Fotos em preto e branco — vale para qualquer foto que a Dra. suba depois */
.pb img{filter:grayscale(1) contrast(1.06)}

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
.titulo{
  font-size:clamp(1.6rem,1rem + 2.1vw,2.55rem);line-height:1.14;
  font-weight:400;letter-spacing:.035em;text-transform:uppercase;text-wrap:balance;
}
.titulo b{font-weight:600;color:var(--areia)}
.lead{font-size:clamp(1.02rem,.95rem + .3vw,1.14rem);line-height:1.7;color:var(--cinza)}
.apoio{color:var(--cinza)}
.miudo{font-size:14px;line-height:1.6;color:var(--cinza)}
.rotulo,.olho{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--areia)}

/* ==========================================================================
   4. BOTÕES
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:14px 30px;border-radius:999px;
  background:var(--areia);color:var(--noite);
  font-size:16px;font-weight:600;letter-spacing:.01em;line-height:1.2;text-align:center;
  transition:background .25s,transform .25s var(--e);
}
.btn:hover{background:var(--areia-2);transform:translateY(-1px)}
.btn .seta{transition:transform .25s var(--e)}
.btn:hover .seta{transform:translateX(3px)}
.btn-largo{width:100%}

.link{
  display:inline-flex;align-items:center;gap:8px;padding-block:8px;
  font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--osso);border-bottom:1px solid var(--fio-2);
  transition:color .25s,border-color .25s;
}
.link::after{content:"→";letter-spacing:0;transition:transform .25s var(--e)}
.link:hover{color:var(--areia);border-color:var(--areia)}
.link:hover::after{transform:translateX(3px)}

/* ==========================================================================
   5. SEÇÕES E CARDS
   ========================================================================== */
.sec{position:relative;padding-block:var(--sec)}
.sec-noite{background:var(--noite)}
.sec-carvao{background:var(--carvao)}

.cab{display:grid;gap:18px;max-width:780px;margin-bottom:clamp(36px,5vw,64px)}
.cab-centro{margin-inline:auto;text-align:center;justify-items:center}
.cab-centro .lead{max-width:60ch}
.cab-linha{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.cab-t{display:grid;gap:14px;max-width:760px}

.fecho{margin-top:clamp(36px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.fecho p{max-width:56ch;color:var(--cinza)}
.fecho-centro{flex-direction:column;text-align:center}

.card{
  background:var(--vidro);border:1px solid var(--fio);border-radius:var(--raio);
  padding:clamp(22px,2.4vw,32px);
  transition:border-color .3s,background .3s,transform .3s var(--e);
}

/* ==========================================================================
   6. TOPO FIXO E MENU
   ========================================================================== */
.topo{
  position:fixed;inset:0 0 auto;z-index:50;
  padding-top:env(safe-area-inset-top,0px);
  border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s;
}
.topo.fixo{background:rgba(13,12,11,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--fio)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px;transition:height .35s}
.topo.fixo .topo-in{height:68px}

.marca{display:flex;align-items:center;gap:12px;position:relative;z-index:2}
.marca-mono{width:42px;height:42px;border:1px solid var(--fio-2);border-radius:50%;display:grid;place-items:center;font-size:12px;letter-spacing:.14em}
.marca-txt{display:grid;line-height:1.25}
.marca-nome{font-size:16px;letter-spacing:.05em}
.marca-sub{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cinza)}
.marca-logo{max-height:44px;width:auto}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza);transition:color .2s}
.nav a:hover{color:var(--osso)}
.nav .nav-cta{color:var(--noite);background:var(--areia);padding:12px 22px;border-radius:999px;font-weight:600;letter-spacing:.1em}
.nav .nav-cta:hover{background:var(--areia-2);color:var(--noite)}

.burger{display:none;width:44px;height:44px;place-items:center;position:relative;z-index:2}
.burger span{display:block;width:22px;height:1.5px;margin:5px auto;background:var(--osso);transition:transform .3s var(--e),opacity .2s}
.menu-aberto .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-aberto .burger span:nth-child(2){opacity:0}
.menu-aberto .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu-mob{
  position:fixed;inset:0;z-index:45;background:var(--noite);
  display:flex;flex-direction:column;justify-content:center;
  padding:110px var(--pad) calc(40px + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.menu-aberto .menu-mob{opacity:1;visibility:visible}
.menu-mob a:not(.btn){font-size:clamp(1.5rem,7vw,2.1rem);letter-spacing:.05em;text-transform:uppercase;padding-block:14px;border-bottom:1px solid var(--fio)}
.menu-mob .btn{margin-top:32px}

/* ==========================================================================
   7. TOPO (HERO)
   Retrato à direita, texto à esquerda — no celular, retrato em cima.
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;background:var(--noite);
  min-height:clamp(640px,100svh,940px);
  display:flex;align-items:center;padding-block:140px 88px;
}
.hero-bg{position:absolute;inset:0;opacity:.3}
.hero-bg picture,.hero-bg img{width:100%;height:100%}
.hero-bg img{object-fit:cover}
.hero-foto{position:absolute;top:0;right:0;bottom:0;width:min(54%,900px)}
.hero-foto picture,.hero-foto img{width:100%;height:100%}
.hero-foto img{object-fit:cover;object-position:center 16%}
.hero-foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--noite) 0%,rgba(13,12,11,.6) 20%,rgba(13,12,11,0) 46%),
    linear-gradient(0deg,var(--noite) 0%,rgba(13,12,11,0) 24%),
    linear-gradient(180deg,rgba(13,12,11,.55) 0%,rgba(13,12,11,0) 18%);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-txt{max-width:min(600px,48%);display:grid;gap:26px;justify-items:start}
.hero h1{
  font-size:clamp(1.85rem,1rem + 3vw,3.5rem);line-height:1.07;
  letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;font-weight:600;
}
.hero h1 .leve{font-weight:300}
.hero .lead{max-width:54ch}
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.hero-nota{margin-top:-8px}
.cred{display:flex;flex-wrap:wrap;gap:14px 32px;padding-top:24px;border-top:1px solid var(--fio);width:100%}
.cred li{display:grid;gap:2px}
.cred span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--areia)}
.cred strong{font-size:14px;font-weight:400}

/* ==========================================================================
   8. ANTES E DEPOIS
   ========================================================================== */
.ad{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"galeria cab" "galeria fecho";grid-template-rows:auto 1fr;
  column-gap:clamp(32px,6vw,88px);
}
.ad-cab{grid-area:cab;display:grid;gap:16px;align-self:end;margin-bottom:28px}
.ad-galeria{grid-area:galeria;position:relative;outline-offset:8px}
.ad-fecho{grid-area:fecho;display:grid;gap:24px;align-content:start;justify-items:start}
.ad-palco{position:relative}
.ad-caso.on{animation:surgir .5s var(--e)}
.ad-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ad-foto{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:8px;background:var(--carvao)}
.ad-foto picture,.ad-foto img{width:100%;height:100%}
.ad-foto img{object-fit:cover}
.ad-rot{
  position:absolute;left:12px;top:12px;padding:4px 12px;border-radius:999px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  background:rgba(13,12,11,.78);border:1px solid var(--fio);
}
.ad-leg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding-top:16px;font-size:15px}
.ad-leg strong{font-weight:500}
.ad-leg span{color:var(--cinza)}
.ad-nav{
  position:absolute;top:44%;translate:0 -50%;z-index:2;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:rgba(13,12,11,.82);border:1px solid var(--fio-2);
  transition:background .2s,color .2s;
}
.ad-nav:hover{background:var(--areia);color:var(--noite)}
.ad-nav svg{width:20px;height:20px}
.ad-ant{left:-18px}
.ad-prox{right:-18px}
.ad-pontos{display:flex;gap:4px;margin-top:14px}
.ad-pontos button{width:28px;height:28px;display:grid;place-items:center}
.ad-pontos button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fio-2);transition:background .2s,transform .2s}
.ad-pontos button[aria-current="true"]::before{background:var(--areia);transform:scale(1.3)}

/* ==========================================================================
   9. FAIXA DESLIZANTE
   ========================================================================== */
.faixa{overflow:hidden;background:var(--carvao);border-block:1px solid var(--fio);padding-block:16px}
.faixa-trilho{display:flex;width:max-content;animation:faixa 52s linear infinite}
.faixa:hover .faixa-trilho{animation-play-state:paused}
.faixa-item{flex:none;display:flex;align-items:center;padding-left:22px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--cinza);white-space:nowrap}
.faixa-item::after{content:"";width:5px;height:5px;margin-left:44px;border-radius:50%;background:var(--areia)}
@keyframes faixa{to{transform:translateX(-50%)}}

/* ==========================================================================
   10. LISTAS E NÚMEROS
   ========================================================================== */
.num{font-size:30px;font-weight:300;line-height:1;color:var(--areia);font-variant-numeric:tabular-nums}

.lista-fio{border-top:1px solid var(--fio)}
.lista-fio li{padding:14px 0;border-bottom:1px solid var(--fio);font-size:16px;line-height:1.5}

.lista-num{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;border-top:1px solid var(--fio)}
.lista-num li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;padding:15px 0;border-bottom:1px solid var(--fio);font-size:15.5px;line-height:1.5}
.lista-num li span{padding-top:2px;font-size:13px;color:var(--areia);font-variant-numeric:tabular-nums}

.lista-check{display:grid;gap:13px}
.lista-check li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.55}
.lista-check li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;border:1px solid var(--fio-areia)}
.lista-check li::after{content:"";position:absolute;left:7px;top:calc(.2em + 4px);width:4px;height:8px;border:solid var(--areia);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.lista-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 40px}

/* ==========================================================================
   11. SINTOMAS, MÉTODO E CONSULTA
   ========================================================================== */
.sint-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sint{display:grid;gap:14px;align-content:start}
.sint:hover,.fase:hover{border-color:var(--fio-areia);background:var(--vidro-2)}
.sint h3{font-size:15px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.4}
.sint p{font-size:15px;line-height:1.6;color:var(--cinza)}

.selo-protocolo{padding:7px 18px;border:1px solid var(--fio-areia);border-radius:999px;background:rgba(200,185,143,.08);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--areia)}
.fases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fase{display:grid;gap:12px;align-content:start}
.fase h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem);font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.25}
.fase-d{color:var(--cinza)}
.fase .lista-check{margin-top:8px;padding-top:20px;border-top:1px solid var(--fio)}

.consulta-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.consulta-lista li{position:relative;display:flex;align-items:center;min-height:76px;padding:18px 24px 18px 68px;font-size:16px;line-height:1.45}
.consulta-lista li::before{content:"";position:absolute;left:24px;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;border:1px solid var(--fio-areia)}
.consulta-lista li::after{content:"";position:absolute;left:34px;top:calc(50% - 2px);width:5px;height:10px;border:solid var(--areia);border-width:0 1.5px 1.5px 0;transform:translateY(-50%) rotate(45deg)}

/* ==========================================================================
   12. LIPEDEMA, PARA QUEM É E QUEM É
   ========================================================================== */
.lp-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,88px);align-items:start}
.lp-solo{grid-template-columns:minmax(0,1fr)}
.lp-texto{display:grid;gap:20px}
.lp-texto .rotulo{margin-top:10px}
.lp-conduta{margin-top:clamp(32px,4vw,48px);display:grid;gap:20px}

.moldura-foto{position:relative;padding:0 18px 18px 0}
.moldura-foto::before{content:"";position:absolute;inset:18px 0 0 18px;border:1px solid var(--fio-2);border-radius:var(--raio-g)}
.moldura-foto img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:var(--raio-g)}

.perfil-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.perfil{display:grid;gap:22px;align-content:start}
.perfil-sim{border-color:var(--fio-areia)}
.perfil-nao .lista-check li::before{border-color:var(--fio-2)}
.perfil-nao .lista-check li::after{left:5px;top:calc(.2em + 8px);width:8px;height:0;border:0;border-top:1.5px solid var(--cinza);transform:none}

.sobre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.sobre-txt{display:grid;gap:20px;justify-items:start}
.sobre-cargo{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--areia)}
.sobre-fil{margin:0;display:grid;gap:8px;padding:4px 0 4px 22px;border-left:2px solid var(--areia)}
.sobre-fil p{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.5;font-weight:300}
.sobre-form{display:flex;flex-wrap:wrap;gap:10px}
.sobre-form li{display:flex;align-items:baseline;gap:8px;padding:8px 18px;border:1px solid var(--fio);border-radius:999px}
.sobre-form strong{font-size:14px;font-weight:500}
.sobre-form span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}
.sobre-foto{position:relative;overflow:hidden;border-radius:var(--raio-g)}
.sobre-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.sobre-foto-vazia{aspect-ratio:4/5;display:grid;place-items:center;background:var(--carvao);font-size:48px;letter-spacing:.1em;color:var(--cinza)}
.selo{
  position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;
  padding:12px 18px;border-radius:14px;border:1px solid var(--fio);
  background:rgba(13,12,11,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:13px;color:var(--cinza);
}
.selo b{font-size:26px;font-weight:300;color:var(--areia);line-height:1}

/* ==========================================================================
   12b. ÍNDICE LATERAL
   ========================================================================== */
.indice{position:fixed;right:12px;top:50%;translate:0 -50%;z-index:35;display:none;flex-direction:column;align-items:flex-end;gap:2px}
.indice a{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:26px;padding-inline:4px}
.indice-t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--osso);padding:3px 10px;border-radius:999px;background:rgba(13,12,11,.88);border:1px solid var(--fio);opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .25s,transform .25s var(--e)}
.indice a:hover .indice-t,.indice a:focus-visible .indice-t{opacity:1;transform:none}
.indice a i{display:block;width:14px;height:1px;background:var(--fio-2);transition:width .3s var(--e),background .3s}
.indice a:hover i{background:var(--osso)}
.indice a.on i{width:28px;background:var(--areia)}
@media (min-width:1280px){.indice{display:flex}}

/* ==========================================================================
   13. PACIENTES
   ========================================================================== */
.depo-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.depo{display:flex;flex-direction:column;gap:22px}
.depo-res{align-self:flex-start;padding:4px 12px;border:1px solid var(--fio-areia);border-radius:999px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--areia)}
.depo blockquote p{font-size:16.5px;line-height:1.7;font-weight:300}
.depo-quem{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--fio)}
.depo-quem img,.depo-ini{width:44px;height:44px;border-radius:50%;flex:none}
.depo-quem img{object-fit:cover}
.depo-ini{display:grid;place-items:center;background:var(--carvao);border:1px solid var(--fio);font-size:12px;letter-spacing:.1em}
.depo-quem strong{display:block;font-size:15px;font-weight:500}
.depo-quem em{font-style:normal;font-size:13px;color:var(--cinza)}
.aviso{margin-top:28px;max-width:80ch}

/* ==========================================================================
   14. DÚVIDAS
   ========================================================================== */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-lado{position:sticky;top:110px;display:grid;gap:20px;justify-items:start}
.faq-lista{border-top:1px solid var(--fio)}
.faq-item{border-bottom:1px solid var(--fio)}
.faq-item h3{font:inherit}
.faq-n{font-size:13px;color:var(--areia);font-variant-numeric:tabular-nums}
.faq-bt{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 30px;gap:14px;align-items:center;padding:22px 0;text-align:left;font-size:17px;font-weight:500;line-height:1.45;transition:color .2s}
.faq-bt:hover{color:var(--areia)}
.faq-mais{position:relative;width:30px;height:30px;border:1px solid var(--fio-2);border-radius:50%}
.faq-mais::before,.faq-mais::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--areia);translate:-50% -50%;transition:transform .3s var(--e)}
.faq-mais::after{transform:rotate(90deg)}
.faq-item.on .faq-mais::after{transform:rotate(0deg)}
.faq-r{overflow:hidden}
.js .faq-r{height:0;transition:height .4s var(--e)}
.faq-r-in{display:grid;gap:12px;padding:0 50px 24px 48px;color:var(--cinza)}

/* ==========================================================================
   15. CHAMADA FINAL E CONTATO
   ========================================================================== */
.cta{text-align:center}
.cta-in{display:grid;justify-items:center;gap:26px}
.cta .titulo{font-size:clamp(2rem,1rem + 3.4vw,3.6rem);font-weight:300;line-height:1.08}
.cta .lead{max-width:62ch}
.passos{width:100%;display:grid;gap:20px;margin-top:20px}
.passos ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.passos li{display:grid;gap:8px;align-content:start}
.passos-n{font-size:30px;font-weight:300;line-height:1;color:var(--areia)}
.passos strong{font-weight:500}
.passos li p{font-size:15px;color:var(--cinza)}
.cta-acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 30px;margin-top:8px}
.link-sem-seta::after{content:none}
.cta-vagas{color:var(--cinza)}

.contato{padding-block:clamp(48px,6vw,80px)}
.contato-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contato-card{display:grid;gap:6px;align-content:start}
.contato-card strong{font-size:18px;font-weight:500;overflow-wrap:anywhere}
.contato-card p{font-size:14px;color:var(--cinza)}
a.contato-card:hover{border-color:var(--fio-areia);background:var(--vidro-2)}
.mapa{margin-top:16px;overflow:hidden;border:1px solid var(--fio);border-radius:var(--raio);aspect-ratio:21/6;min-height:260px}
.mapa iframe{display:block;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}

/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
.rodape{background:var(--noite);border-top:1px solid var(--fio);padding-block:clamp(56px,7vw,88px) calc(32px + env(safe-area-inset-bottom,0px))}
.rodape-topo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:40px;padding-bottom:40px;border-bottom:1px solid var(--fio)}
.rodape-marca{display:grid;gap:12px;align-content:start;max-width:42ch}
.rodape-marca .marca-nome{font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.rodape-marca p{font-size:15px;color:var(--cinza)}
.rodape-col{display:grid;gap:10px;align-content:start;font-size:15px}
.rodape-col a{color:var(--cinza);transition:color .2s;overflow-wrap:anywhere}
.rodape-col a:hover{color:var(--osso)}
.rodape-col p{color:var(--cinza)}
.rodape-t{margin-bottom:6px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--areia)}
.rodape-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;font-size:12.5px;color:var(--cinza)}
.rodape-aviso{max-width:52ch}
.rodape-base a:hover{color:var(--osso)}

/* ==========================================================================
   17. BARRA DO CELULAR E BOTÃO DO WHATSAPP
   ========================================================================== */
.barra-mob{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(13,12,11,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--fio);transform:translateY(110%);transition:transform .4s var(--e);
}
.barra-mob.on{transform:none}
.barra-mob-txt{display:grid;line-height:1.3;min-width:0}
.barra-mob strong{font-size:14px;font-weight:500}
.barra-mob span{font-size:12px;color:var(--cinza)}
.barra-mob .btn{min-height:46px;padding:10px 22px;font-size:15px;flex:none}

.zap{
  position:fixed;right:24px;bottom:24px;z-index:40;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;background:var(--areia);color:var(--noite);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .35s,transform .35s var(--e),background .2s;
}
.zap.on{opacity:1;transform:none;pointer-events:auto}
.zap:hover{background:var(--areia-2)}
.zap svg{width:28px;height:28px}

/* ==========================================================================
   18. POST INDIVIDUAL
   ========================================================================== */
.post{padding-top:clamp(140px,14vw,200px)}
.post .wrap{max-width:780px}
.post h1{margin-top:12px;font-size:clamp(1.9rem,1rem + 2.8vw,3.2rem);line-height:1.1;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
.post-capa{margin-block:44px}
.post-conteudo{margin-top:36px;display:grid;gap:20px;color:var(--cinza)}
.post-conteudo h2,.post-conteudo h3{color:var(--osso);font-weight:500;margin-top:16px}
.post-conteudo a{color:var(--areia);text-decoration:underline;text-underline-offset:3px}
.post-voltar{margin-top:56px}

/* ==========================================================================
   19. ENTRADA DOS ELEMENTOS
   Só esconde quando há JavaScript para revelar — sem JS, tudo aparece.
   ========================================================================== */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--e),transform .8s var(--e)}
.js .reveal.vis{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}
.js .reveal[data-d="2"]{transition-delay:.16s}
.js .reveal[data-d="3"]{transition-delay:.24s}
.js .reveal[data-d="4"]{transition-delay:.32s}
/* O topo entra por animação de CSS, sem depender do observador: a primeira
   dobra aparece mesmo em aba de fundo, pré-renderização ou JS atrasado. */
.js .hero .reveal{opacity:1;transform:none;animation:subir .9s var(--e) both}
.js .hero .reveal[data-d="1"]{animation-delay:.08s}
.js .hero .reveal[data-d="2"]{animation-delay:.16s}
.js .hero .reveal[data-d="3"]{animation-delay:.24s}
.js .hero .reveal[data-d="4"]{animation-delay:.32s}
@keyframes surgir{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ==========================================================================
   20. RESPONSIVO
   ========================================================================== */
@media (max-width:1100px){
  .sint-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:grid}
}

@media (max-width:960px){
  .depo-grade{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(280px,82%);
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
    scrollbar-width:none;
  }
  .depo-grade::-webkit-scrollbar{display:none}
  .depo{scroll-snap-align:start}

  .lp-grade{grid-template-columns:minmax(0,1fr)}
  .moldura-foto{max-width:420px;width:100%}
  .fases,.consulta-lista,.perfil-grade{grid-template-columns:minmax(0,1fr)}
  .lista-num,.lista-cols{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:860px){
  body{font-size:16.5px}

  .hero{display:block;min-height:0;padding:0 0 64px}
  .hero-bg{height:76svh;bottom:auto}
  .hero-foto{position:relative;width:100%;aspect-ratio:3/4;max-height:72svh}
  .hero-foto img{object-position:center 8%}
  .hero-foto::after{background:linear-gradient(0deg,var(--noite) 3%,rgba(13,12,11,0) 46%),linear-gradient(180deg,rgba(13,12,11,.6) 0%,rgba(13,12,11,0) 22%)}
  .hero-in{margin-top:-128px}
  .hero-txt{max-width:none;gap:20px}
  .hero .lead{font-size:15.5px;line-height:1.6}
  .acoes{width:100%}
  .acoes .btn{flex:1 1 100%}

  .ad{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "galeria" "fecho";grid-template-rows:none}
  .ad-cab{margin-bottom:28px}
  .ad-fecho{margin-top:28px}
  .ad-ant{left:8px}
  .ad-prox{right:8px}
  .ad-nav{width:42px;height:42px}

  .sobre,.faq{grid-template-columns:minmax(0,1fr)}
  .sobre-foto{order:-1;max-width:420px;width:100%}
  .faq-lado{position:static}
  .faq-r-in{padding-right:0}

  .passos ol,.contato-grade{grid-template-columns:minmax(0,1fr)}
  .mapa{aspect-ratio:4/3}

  .rodape{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .rodape-topo{grid-template-columns:minmax(0,1fr)}

  .barra-mob{display:flex}
  .zap{display:none}
}

@media (max-width:560px){
  .sint-grade{grid-template-columns:minmax(0,1fr)}
  .consulta-lista li{padding-left:62px}
  .faq-bt{grid-template-columns:28px minmax(0,1fr) 30px;gap:10px}
  .faq-r-in{padding-left:38px}
  .btn{padding-inline:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}