/* =========================================================================
   LP DRA. ARUANA RIBAS
   Identidade: mauve nude + off-white quente, serifada didone, editorial claro.
   ========================================================================= */

:root{
  /* cor */
  --off:        #FDFBF9;
  --areia:      #F4EDEA;
  --areia-2:    #EADFDA;
  --mauve:      #A28B87;
  --mauve-esc:  #7B615C;
  /* mauve mais fechado, só para texto display em itálico: traço fino
     somado a cor clara é o que derruba a legibilidade */
  --mauve-txt:  #6E5650;
  --mauve-cl:   #DDCFCB;
  --tinta:      #2B2522;
  --tinta-70:   rgba(43,37,34,.70);
  --tinta-50:   rgba(43,37,34,.50);
  --linha:      rgba(43,37,34,.13);

  /* tipografia */
  --display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --corpo:   "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-hero:  clamp(2.15rem, 3.9vw, 3.55rem);
  --t-secao: clamp(1.75rem, 3.1vw, 2.6rem);
  --t-sub:   clamp(1.02rem, 1.35vw, 1.18rem);

  /* ritmo */
  --pad-secao: clamp(4.5rem, 9vw, 8.5rem);
  --topo-alt: 68px;
  --raio: 3px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--off);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* A Bodoni Moda é variável e afina os traços finos sozinha conforme o
     tamanho cresce (eixo opsz). Em tamanho de título isso some na tela.
     Travar o eixo baixo mantém a didone de alto contraste, sem fio fantasma.
     font-variation-settings é herdada, então vale para toda a página.
     A Instrument Sans não tem esse eixo e simplesmente ignora. */
  font-variation-settings:"opsz" 11;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,blockquote,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }

::selection{ background:var(--mauve-cl); color:var(--tinta); }

:focus-visible{
  outline:2px solid var(--mauve-esc);
  outline-offset:3px;
  border-radius:2px;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinta); color:var(--off); padding:.8rem 1.2rem;
}
.pular:focus{ left:1rem; top:1rem; }

.limite{
  width:min(1180px, 100% - clamp(2rem, 7vw, 6rem));
  margin-inline:auto;
}

/* ───────────────────────── tipografia base ───────────────────────── */

.sobrancelha{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--mauve-esc);
  margin-bottom:1.15rem;
}

.titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-secao);
  line-height:1.12;
  letter-spacing:-.012em;
  max-width:22ch;
}

.cabecalho--centro .titulo,
.cabecalho--centro .apoio{ margin-inline:auto; }

.cabecalho{ margin-bottom:clamp(2.8rem, 5vw, 4.2rem); }
.cabecalho--centro{ text-align:center; }

.apoio{
  margin-top:1.4rem;
  font-size:var(--t-sub);
  color:var(--tinta-70);
  max-width:60ch;
}

.mini{
  font-size:.78rem;
  color:var(--tinta-50);
  letter-spacing:.01em;
}

/* ───────────────────────── botões ───────────────────────── */

.botao{
  --bg: var(--tinta);
  appearance:none;
  border:0;
  background:var(--bg);
  color:var(--off);
  font-family:var(--corpo);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.015em;
  padding:1.05rem 1.9rem;
  border-radius:var(--raio);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:background .35s ease, transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
  box-shadow:0 1px 2px rgba(43,37,34,.10);
}
.botao:hover{
  --bg: var(--mauve-esc);
  transform:translateY(-2px);
  box-shadow:0 10px 26px -12px rgba(43,37,34,.45);
}
.botao:active{ transform:translateY(0); }

.botao--grande{ padding:1.2rem 2.4rem; font-size:.96rem; }
.botao--compacto{ padding:.72rem 1.25rem; font-size:.82rem; }
.botao--cheio{ width:100%; }

.link-discreto{
  color:var(--tinta-70);
  font-size:.9rem;
  text-decoration:none;
  border-bottom:1px solid var(--mauve-cl);
  padding-bottom:2px;
  transition:color .3s ease, border-color .3s ease;
}
.link-discreto:hover{ color:var(--tinta); border-color:var(--mauve-esc); }

/* ───────────────────────── barra superior ───────────────────────── */

.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  background:rgba(253,251,249,.90);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, box-shadow .4s ease;
}
.topo.rolado{
  border-bottom-color:var(--linha);
  box-shadow:0 1px 22px -14px rgba(43,37,34,.5);
}

.topo__interno{
  width:min(1180px, 100% - clamp(1.6rem, 7vw, 6rem));
  margin-inline:auto;
  height:var(--topo-alt);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.marca{ text-decoration:none; color:inherit; line-height:1.15; }
.marca__nome{
  display:block;
  font-family:var(--display);
  font-size:1.06rem;
  letter-spacing:.005em;
}
.marca__crm{
  display:block;
  font-size:.61rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mauve-esc);
  margin-top:2px;
}

/* ───────────────────────── hero ───────────────────────── */

.hero{
  padding-top:calc(var(--topo-alt) + clamp(1.6rem, 3.4vw, 2.8rem));
  padding-bottom:clamp(3rem, 6vw, 5rem);
  display:grid;
  gap:clamp(2.8rem, 5vw, 4rem);
  align-items:center;
  width:min(1180px, 100% - clamp(2rem, 7vw, 6rem));
  margin-inline:auto;
  position:relative;
}

.hero__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--t-hero);
  line-height:1.03;
  letter-spacing:-.022em;
  margin-bottom:1.6rem;
  /* evita a linha órfã com uma palavra só, que é o que estraga
     a quebra de um título em serifada de corpo grande */
  text-wrap:balance;
}
.hero__titulo em{
  display:block;
  text-wrap:balance;
  font-style:italic;
  color:var(--mauve-esc);
  font-size:.6em;
  line-height:1.18;
  margin-top:.6rem;
  letter-spacing:-.008em;
}

.hero__sub{
  font-size:var(--t-sub);
  color:var(--tinta-70);
  max-width:46ch;
}

.hero__acoes{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.4rem;
  margin-top:2.2rem;
}

.selos{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.5rem;
  margin-top:2.6rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linha);
  font-size:.8rem;
  color:var(--tinta-70);
}
.selos strong{ color:var(--tinta); font-weight:500; }

.hero__retrato{ position:relative; }
.hero__retrato img{
  width:100%;
  max-height:min(74vh, 680px);
  object-fit:cover;
  object-position:50% 22%;
  border-radius:var(--raio);
  filter:saturate(.97);
}

.cartao-credencial{
  position:absolute;
  left:clamp(-1.2rem, -2vw, -2.2rem);
  bottom:clamp(1.4rem, 4vw, 2.6rem);
  background:var(--off);
  padding:1.15rem 1.5rem;
  border-radius:var(--raio);
  box-shadow:0 24px 48px -30px rgba(43,37,34,.55);
  max-width:19rem;
}
.cartao-credencial__nome{
  font-family:var(--display);
  font-size:1.12rem;
  line-height:1.2;
}
.cartao-credencial__linha{
  font-size:.76rem;
  color:var(--tinta-70);
  margin-top:.3rem;
  line-height:1.4;
}
.cartao-credencial__crm{
  font-size:.63rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mauve-esc);
  margin-top:.5rem;
}

/* selo circular, elemento da identidade dela */
.selo-circular{
  position:absolute;
  top:clamp(-1.6rem, -2vw, -2.4rem);
  left:clamp(-2.2rem, -3vw, -3.4rem);
  width:clamp(88px, 9vw, 116px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:var(--off);
  border-radius:50%;
  box-shadow:0 18px 40px -26px rgba(43,37,34,.5);
}
.selo-circular svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  animation:girar 26s linear infinite;
}
.selo-circular text{
  font-family:var(--corpo);
  font-size:11.5px;
  font-weight:500;
  fill:var(--mauve-esc);
  text-transform:uppercase;
}
.selo-circular__centro{
  font-family:var(--display);
  font-size:1.4rem;
  color:var(--tinta);
  letter-spacing:.02em;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

/* ───────────────────────── seções ───────────────────────── */

.secao{ padding-block:var(--pad-secao); }
.secao--sinais{ background:var(--off); }
.secao--crenca{ background:var(--areia); }
.secao--mecanismo{ background:var(--areia-2); }
.secao--consulta{ background:var(--off); }
.secao--casos{ background:var(--areia); padding-bottom:clamp(3rem,6vw,5rem); }
.secao--sobre{ background:var(--off); }
.secao--incluso{ background:var(--areia); }
.secao--faq{ background:var(--off); }

/* ───────────────────────── sinais ───────────────────────── */

.sinais{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--linha);
}
.sinais li{
  position:relative;
  padding:1.45rem 0 1.45rem 3.2rem;
  border-bottom:1px solid var(--linha);
  font-size:1.04rem;
  max-width:58ch;
}
.sinais li::before{
  content:"";
  position:absolute;
  left:0; top:2.05rem;
  width:1.6rem; height:1px;
  background:var(--mauve);
}

.fecho{ margin-top:clamp(2.6rem, 5vw, 3.6rem); }
.fecho p{
  font-size:1.1rem;
  max-width:48ch;
  margin-bottom:1.8rem;
  color:var(--tinta-70);
}
.fecho--centro{ text-align:center; }
.fecho--centro p{ margin-inline:auto; }

/* ───────────────────────── quebra de crença ───────────────────────── */

.crenca{
  display:grid;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}

.crenca__aspas blockquote{
  font-family:var(--display);
  font-size:clamp(1.9rem, 4.2vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.018em;
  position:relative;
}
.crenca__aspas blockquote em{
  font-style:italic;
  color:var(--mauve-esc);
}
/* barra vertical no lugar de aspas decorativas: a fala já está entre aspas na leitura */
.crenca__aspas blockquote{
  padding-left:clamp(1.1rem, 2vw, 1.8rem);
  border-left:2px solid var(--mauve);
}

.crenca__resposta p{ margin-bottom:1.2rem; max-width:56ch; color:var(--tinta-70); }
.crenca__resposta p:last-of-type{ margin-bottom:0; }

.nota{
  margin-top:2.2rem;
  padding:1.6rem 1.8rem;
  background:var(--off);
  border-left:2px solid var(--mauve);
  border-radius:0 var(--raio) var(--raio) 0;
}
.nota__titulo{
  font-family:var(--display);
  font-style:italic;
  font-size:1.12rem;
  color:var(--tinta);
  margin-bottom:.55rem !important;
}

/* ───────────────────────── lente de tricoscopia ───────────────────────── */

.lente{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(2rem, 4vw, 3.2rem);
}

.lente__palco{
  position:relative;
  width:100%;
  max-width:600px;
  aspect-ratio:1;
  margin-inline:auto;
  border-radius:var(--raio);
  overflow:hidden;
  cursor:none;
  background:var(--tinta);
  box-shadow:0 40px 70px -50px rgba(43,37,34,.75);
  touch-action:none;
}
/* a base fica levemente maior que o palco para o blur não abrir borda transparente */
.lente__base{
  width:104%; height:104%;
  margin:-2%;
  object-fit:cover;
  filter:blur(5px) saturate(.72) brightness(1.1) contrast(.92);
  user-select:none;
  -webkit-user-drag:none;
}

/* o background-size e o background-position são calculados no main.js,
   em pixels, a partir do tamanho real do palco. Sem isso o "zoom" viraria
   uma redução, porque a porcentagem do background é relativa ao vidro. */
.lente__vidro{
  position:absolute;
  top:50%; left:50%;
  width:clamp(150px, 30%, 210px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(253,251,249,.92);
  box-shadow:
    0 0 0 1px rgba(43,37,34,.22),
    0 22px 40px -18px rgba(43,37,34,.8),
    inset 0 0 26px rgba(43,37,34,.22);
  background-image:url("../assets/img/tricoscopia-densa.jpg");
  background-repeat:no-repeat;
  pointer-events:none;
}

.lente__dica{
  position:absolute;
  left:50%; bottom:1.4rem;
  transform:translateX(-50%);
  background:rgba(253,251,249,.94);
  color:var(--tinta);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem 1.1rem;
  border-radius:100px;
  pointer-events:none;
  transition:opacity .5s ease;
}
.lente__palco.tocado .lente__dica{ opacity:0; }

.lente__legenda{ width:100%; max-width:940px; }
.lente__legenda ul{ display:grid; gap:0 clamp(1.2rem,3vw,2.6rem); }
.lente__legenda li{
  display:flex;
  gap:.9rem;
  align-items:baseline;
  padding:1.05rem 0;
  border-top:1px solid rgba(43,37,34,.18);
  font-size:.95rem;
  line-height:1.4;
}
.lente__legenda li span{
  font-family:var(--display);
  font-size:.82rem;
  color:var(--mauve-esc);
  letter-spacing:.06em;
}
.lente__legenda .mini{ margin-top:1.2rem; display:block; text-align:center; }

/* remate em serifada: fecha o raciocínio da seção sem virar mais um parágrafo */
.apoio--destaque,
.fecho__remate{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.12rem, 1.8vw, 1.4rem);
  line-height:1.4;
  color:var(--tinta);
  margin-top:1.6rem;
  max-width:46ch;
}
.cabecalho--centro .apoio--destaque{ margin-inline:auto; }
.fecho--centro .fecho__remate{ margin-inline:auto; margin-bottom:1.9rem; }

.modal__convite{
  margin-top:1.1rem;
  font-family:var(--display);
  font-style:italic;
  font-size:1.08rem;
  color:var(--mauve-esc);
}

/* ───────────────────────── etapas da consulta ───────────────────────── */

.etapas{ border-top:1px solid var(--linha); }

.etapa{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.6rem;
  padding:clamp(1.8rem, 3.4vw, 2.8rem) 0;
  border-bottom:1px solid var(--linha);
  align-items:start;
}
.etapa__num{
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--mauve-esc);
  letter-spacing:.08em;
  padding-top:.15rem;
  min-width:2.4rem;
}
.etapa h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem, 2.1vw, 1.6rem);
  line-height:1.2;
  margin-bottom:.55rem;
}
.etapa p{ color:var(--tinta-70); max-width:54ch; }
.etapa--ilustrada img{
  border-radius:var(--raio);
  width:100%;
  max-width:170px;
  aspect-ratio:1;
  object-fit:cover;
  justify-self:end;
}

/* ───────────────────────── pilha de casos ───────────────────────── */

.pilha{
  width:min(1180px, 100% - clamp(2rem, 7vw, 6rem));
  margin:clamp(1rem,3vw,2rem) auto 0;
  padding-bottom:clamp(2rem, 6vw, 5rem);
}

.pilha__item{
  position:sticky;
  top:calc(var(--topo-alt) + 22px + (var(--i) * 20px));
  margin-bottom:clamp(3rem, 7vw, 6rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}
.pilha__item:last-child{ margin-bottom:0; }

.pilha__moldura{
  position:relative;
  width:min(86vw, 430px);
  background:var(--off);
  /* o topo largo é o que aparece do card de trás quando o próximo sobe */
  padding:1.6rem .55rem 2.4rem;
  border-radius:var(--raio);
  box-shadow:0 40px 80px -40px rgba(43,37,34,.7);
}
.pilha__moldura img{ border-radius:1px; width:100%; }
.pilha__moldura::after{
  content:"";
  position:absolute;
  top:1.6rem; bottom:2.4rem; left:50%;
  width:1px;
  background:rgba(253,251,249,.4);
  pointer-events:none;
}

.pilha__rotulo{
  position:absolute;
  top:2.25rem;
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(253,251,249,.93);
  color:var(--tinta);
  padding:.3rem .65rem;
  border-radius:100px;
}
.pilha__rotulo--esq{ left:1.2rem; }
.pilha__rotulo--dir{ right:1.2rem; }

/* contador vive dentro da moldura, na tarja inferior */
.pilha__contador{
  position:absolute;
  left:0; right:0; bottom:.85rem;
  text-align:center;
  font-family:var(--display);
  font-size:.78rem;
  color:var(--mauve-esc);
  letter-spacing:.16em;
}
.pilha__contador span{ color:var(--tinta); }

.aviso{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  font-size:.8rem;
  line-height:1.65;
  color:var(--tinta-50);
  max-width:72ch;
  margin-inline:auto;
  text-align:center;
}

/* ───────────────────────── sobre ───────────────────────── */

.sobre{
  display:grid;
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}
.sobre__foto img{ border-radius:var(--raio); width:100%; }

.sobre__credencial{
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--mauve-esc);
  margin:.9rem 0 1.8rem;
}
.sobre__texto p{ color:var(--tinta-70); margin-bottom:1.15rem; max-width:54ch; }

.manifesto{
  margin-top:2.2rem;
  padding-left:1.6rem;
  border-left:2px solid var(--mauve);
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.15rem, 1.9vw, 1.45rem);
  line-height:1.42;
  color:var(--tinta);
  max-width:44ch;
}

/* ───────────────────────── o que está incluso ───────────────────────── */

.cartao-incluso{
  background:var(--off);
  padding:clamp(2.2rem, 5vw, 4rem);
  border-radius:var(--raio);
  max-width:760px;
  margin-inline:auto;
  text-align:center;
  box-shadow:0 40px 80px -60px rgba(43,37,34,.6);
}
.cartao-incluso .titulo{ margin-inline:auto; }

.lista-check{
  margin:2.4rem auto 0;
  max-width:34rem;
  text-align:left;
}
.lista-check li{
  position:relative;
  padding:.85rem 0 .85rem 2.2rem;
  border-bottom:1px solid var(--linha);
  font-size:1rem;
}
.lista-check li:last-child{ border-bottom:0; }
.lista-check li::before{
  content:"";
  position:absolute;
  left:.15rem; top:1.42rem;
  width:.62rem; height:.32rem;
  border-left:1.5px solid var(--mauve-esc);
  border-bottom:1.5px solid var(--mauve-esc);
  transform:rotate(-45deg);
}

.qualificacao{
  margin:2rem auto 2.2rem;
  font-size:.92rem;
  color:var(--tinta-70);
  max-width:42ch;
}

/* ───────────────────────── faq ───────────────────────── */

.faq{ border-top:1px solid var(--linha); max-width:820px; }

.faq details{ border-bottom:1px solid var(--linha); }
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.35rem 3rem 1.35rem 0;
  position:relative;
  font-size:1.04rem;
  font-weight:500;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--mauve-esc); }
.faq summary::after,
.faq summary::before{
  content:"";
  position:absolute;
  right:.3rem;
  top:50%;
  background:var(--mauve-esc);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.faq summary::before{ width:14px; height:1.5px; transform:translateY(-50%); }
.faq summary::after{ width:1.5px; height:14px; right:calc(.3rem + 6.25px); transform:translateY(-50%); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(90deg); opacity:0; }

.faq details p{
  padding:0 2rem 1.6rem 0;
  color:var(--tinta-70);
  max-width:62ch;
  animation:abrir .4s ease both;
}
@keyframes abrir{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

/* ───────────────────────── cta final ───────────────────────── */

.secao--final{
  position:relative;
  background:
    linear-gradient(rgba(253,251,249,.90), rgba(253,251,249,.94)),
    url("../assets/img/fios-editorial.jpg") center/cover no-repeat;
}

.cartao-final{
  background:var(--off);
  padding:clamp(2.6rem, 6vw, 4.5rem);
  border-radius:var(--raio);
  max-width:720px;
  margin-inline:auto;
  text-align:center;
  box-shadow:0 50px 90px -60px rgba(43,37,34,.7);
}
.cartao-final .titulo{ margin-inline:auto; max-width:17ch; }
.cartao-final .apoio{ margin-bottom:2.4rem; }

/* ───────────────────────── rodapé ───────────────────────── */

.rodape{
  background:var(--areia-2);
  padding-block:clamp(3rem, 5vw, 4.5rem);
  font-size:.82rem;
  color:var(--tinta-70);
}
.rodape p{ margin-bottom:.35rem; }
.rodape__marca{
  font-family:var(--display);
  font-size:1.25rem;
  color:var(--tinta);
  margin-bottom:.7rem !important;
}
.rodape__aviso{
  margin-top:1.8rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(43,37,34,.15);
  font-size:.74rem;
  color:var(--tinta-50);
  max-width:72ch;
  line-height:1.6;
}

/* ───────────────────────── botão flutuante ───────────────────────── */

.flutuante{
  position:fixed;
  left:50%;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  transform:translate(-50%, 140%);
  z-index:55;
  width:calc(100% - 2rem);
  max-width:26rem;
  padding:1.1rem 1.5rem;
  border:0;
  border-radius:var(--raio);
  background:var(--tinta);
  color:var(--off);
  font-family:var(--corpo);
  font-size:.95rem;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 20px 40px -18px rgba(43,37,34,.75);
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.flutuante.visivel{ transform:translate(-50%, 0); }

/* ───────────────────────── modal ───────────────────────── */

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:1rem;
}
.modal[hidden]{ display:none; }

.modal__fundo{
  position:absolute;
  inset:0;
  background:rgba(43,37,34,.62);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .35s ease;
}
.modal.aberto .modal__fundo{ opacity:1; }

.modal__caixa{
  position:relative;
  background:var(--off);
  width:min(560px, 100%);
  max-height:min(92svh, 900px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:clamp(1.9rem, 4.5vw, 2.9rem);
  border-radius:var(--raio);
  box-shadow:0 50px 100px -40px rgba(43,37,34,.8);
  opacity:0;
  transform:translateY(18px) scale(.985);
  transition:opacity .4s ease, transform .45s cubic-bezier(.2,.8,.3,1);
}
.modal.aberto .modal__caixa{ opacity:1; transform:none; }

.modal__fechar{
  position:absolute;
  top:.9rem; right:.9rem;
  width:2.3rem; height:2.3rem;
  display:grid; place-items:center;
  border:0; background:transparent;
  cursor:pointer; border-radius:50%;
  transition:background .3s ease;
}
.modal__fechar:hover{ background:var(--areia); }
.modal__fechar svg{
  width:1.05rem; height:1.05rem;
  stroke:var(--tinta-70); stroke-width:1.5; fill:none; stroke-linecap:round;
}

.modal__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem, 3.6vw, 1.95rem);
  line-height:1.16;
  letter-spacing:-.012em;
}
.modal__titulo em{ font-style:italic; color:var(--mauve-esc); }

.modal__apoio{
  margin-top:.9rem;
  color:var(--tinta-70);
  font-size:.95rem;
}

/* o CTA gruda no rodapé da caixa: com cinco itens a lista passa da tela
   no celular, e o botão não pode depender de rolagem para aparecer */
.modal__rodape{
  position:sticky;
  bottom:calc(clamp(1.9rem, 4.5vw, 2.9rem) * -1);
  background:var(--off);
  padding:.9rem 0 clamp(1.9rem, 4.5vw, 2.9rem);
  margin-top:-.4rem;
}
.modal__rodape::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1.6rem;
  height:1.6rem;
  background:linear-gradient(rgba(253,251,249,0), var(--off));
  pointer-events:none;
}

.modal__lista{
  margin:1.8rem 0 1.2rem;
  border-top:1px solid var(--linha);
}
.modal__lista li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.95rem;
  padding:1rem 0;
  border-bottom:1px solid var(--linha);
  font-size:.93rem;
  line-height:1.55;
  color:var(--tinta-70);
}
.modal__lista strong{ color:var(--tinta); font-weight:500; }
.modal__lista .ico{
  width:1.15rem; height:1.15rem;
  margin-top:.18rem;
  fill:none;
  stroke:var(--mauve-esc);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.modal__valor strong{
  font-family:var(--display);
  font-size:1.05rem;
}

.modal__voltar{
  display:block;
  margin:1.1rem auto 0;
  border:0;
  background:transparent;
  color:var(--tinta-50);
  font-family:var(--corpo);
  font-size:.85rem;
  cursor:pointer;
  padding:.4rem;
  transition:color .3s ease;
}
.modal__voltar:hover{ color:var(--tinta); }

body.travado{ overflow:hidden; }

/* ───────────────────────── revelação no scroll ───────────────────────── */

.revelar{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1);
}
.revelar.visivel{ opacity:1; transform:none; }

/* ───────────────────────── responsivo ───────────────────────── */

@media (min-width:900px){
  .hero{ grid-template-columns:1.02fr .98fr; }
  .sinais{ grid-template-columns:1fr 1fr; column-gap:clamp(2rem,5vw,4rem); }
  .sinais li:nth-last-child(-n+2){ border-bottom:0; }
  .crenca{ grid-template-columns:.85fr 1.15fr; }
  .lente__legenda ul{ grid-template-columns:repeat(4, 1fr); }
  .etapa--ilustrada{ grid-template-columns:auto 1fr auto; }
  .sobre{ grid-template-columns:.85fr 1.15fr; }
  .flutuante{ display:none; }
}

@media (min-width:600px) and (max-width:899px){
  .lente__legenda ul{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:899px){
  .hero{ padding-top:calc(var(--topo-alt) + 2rem); }
  .hero__retrato{ order:2; margin-top:.5rem; }
  .hero__texto{ order:1; }
  .selo-circular{ display:none; }
  .cartao-credencial{ left:auto; right:.9rem; bottom:.9rem; max-width:15rem; padding:.9rem 1.1rem; }
  .cartao-credencial__linha{ font-size:.7rem; }
  .etapa--ilustrada img{ grid-column:1 / -1; max-width:100%; aspect-ratio:16/10; justify-self:start; margin-top:.6rem; }
  .lente__palco{ cursor:grab; }
  body{ padding-bottom:5.5rem; }
}

@media (max-width:560px){
  /* o :not evita que a regra estoure o botão da barra superior */
  .botao:not(.botao--compacto){ width:100%; text-align:center; }
  .hero__acoes{ gap:1rem; }
  .hero__acoes .link-discreto{ margin-inline:auto; }

  :root{ --topo-alt:58px; }
  .marca__nome{ font-size:.95rem; white-space:nowrap; }
  .marca__crm{ display:none; }
  .botao--compacto{ padding:.62rem 1rem; font-size:.78rem; white-space:nowrap; }
}

/* ───────────────────────── peso da tipografia display ─────────────────────────
   Vem no fim de propósito: sobe todo texto em Bodoni de 400 para 500, que é o
   peso em que os traços finos da didone sobrevivem à renderização em tela.
   Mesma especificidade dos seletores originais, ganha pela ordem.            */

.hero__titulo,
.titulo,
.crenca__aspas blockquote,
.manifesto,
.etapa h3,
.modal__titulo,
.marca__nome,
.cartao-credencial__nome,
.rodape__marca,
.nota__titulo,
.etapa__num,
.pilha__contador,
.lente__legenda li span,
.selo-circular__centro,
.modal__valor strong{
  font-weight:500;
}

/* o itálico é o caso mais frágil: traço fino, inclinado e colorido */
.hero__titulo em,
.crenca__aspas blockquote em,
.modal__titulo em{
  font-weight:500;
  color:var(--mauve-txt);
}

/* ───────────────────────── acessibilidade de movimento ───────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .revelar{ opacity:1; transform:none; }
  .pilha__item{ position:static; }
}

.rodape__contato{ font-style:normal; margin-top:.9rem; }
.rodape__contato a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }