/* =========================================================
   YOGAMAR | Centro de Iyengar Yoga
   Landing page
   Direção: estrutura e luz. Filetes, campos de cor, cantos retos.
   ========================================================= */

:root{
  /* ---- tinta ---- */
  --tinta-900:#0d1c27;
  --tinta-800:#13293a;
  --tinta-700:#1d3a4f;
  --tinta-500:#3d5566;
  --tinta-400:#6b8090;

  /* ---- areia ---- */
  --areia-050:#fbf8f3;
  --areia-100:#f2ebdf;
  --areia-200:#e3d8c6;

  /* ---- luz (o dourado da janela) ---- */
  --luz-700:#8a5c16;     /* ouro fechado: o único que pode virar TEXTO sobre claro (4.9:1) */
  --luz-500:#c98b33;     /* filete e sinal gráfico sobre claro; texto sobre escuro */
  --luz-300:#e0b878;

  /* ---- maré ---- */
  --mare-400:#8fb2c6;
  --mare-200:#cfe0e9;

  --filete-claro: 1px solid var(--areia-200);
  --filete-escuro:1px solid rgba(255,255,255,.16);

  --raio: 0;

  /* ---- tipografia ---- */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --logo:  "Comfortaa", var(--sans);

  --t-display: clamp(3rem,    1.90rem + 4.90vw, 5.50rem);
  --t-h2:      clamp(2.15rem, 1.55rem + 2.60vw, 3.50rem);
  --t-h3:      clamp(1.30rem, 1.15rem + 0.65vw, 1.65rem);
  --t-quote:   clamp(1.60rem, 1.15rem + 1.90vw, 2.60rem);
  --t-hora:    clamp(1.45rem, 1.20rem + 0.90vw, 1.90rem);
  --t-lead:    clamp(1.10rem, 1.02rem + 0.38vw, 1.32rem);
  --t-corpo:   clamp(1.00rem, 0.96rem + 0.20vw, 1.0625rem);
  --t-peq:     0.9375rem;
  --t-rotulo:  0.70rem;

  /* ---- grade e ritmo ---- */
  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --u:8px;
  --medida:62ch;
  --topo-h:84px;

  /* ---- tokens de movimento ---- */
  --ease-respiro: cubic-bezier(.22,.61,.24,1);
  --ease-peso:    cubic-bezier(.32,.72,0,1);
  --ease-saida:   cubic-bezier(.55,.06,.86,.34);
  --ease-estado:  cubic-bezier(.4,.2,.2,1);

  --dur-instante: 120ms;
  --dur-curta:    240ms;
  --dur-media:    420ms;
  --dur-faq:      300ms;
  --dur-longa:    720ms;
  --dur-ampla:   1100ms;
  --passo:         80ms;

  --transicao: var(--dur-curta) var(--ease-estado);

  /* ---- grão ---- */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; scroll-padding-top:6.5rem;
  -webkit-text-size-adjust:100%; font-optical-sizing:auto;
}
body{
  margin:0;
  background:var(--areia-050);
  color:var(--tinta-800);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--t-corpo);
  line-height:1.72;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,blockquote p,.card__num,.oferta__num,.hora,.pessoa__inicial,.campo__lista li{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 20,"WONK" 0;
  margin:0;
}
h1{ font-size:var(--t-display); font-weight:400; line-height:1.02; letter-spacing:-.030em; text-wrap:balance; }
h2{ font-size:var(--t-h2);      font-weight:400; line-height:1.14; letter-spacing:-.020em; text-wrap:balance; max-width:22ch; }
h3{ font-size:var(--t-h3);      font-weight:500; line-height:1.22; letter-spacing:-.010em; }
h1 em, h2 em{ font-style:italic; font-weight:300; }

p{ margin:0 0 1.1em; max-width:var(--medida); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.grade{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:clamp(1rem,2vw,2rem); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--tinta-800); color:#fff; padding:.75rem 1.25rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--tinta-800); outline-offset:3px; border-radius:0; }
.secao--escura :focus-visible,
.hero :focus-visible,
.fecho :focus-visible,
.rodape :focus-visible,
.zap-flutuante:focus-visible{ outline-color:var(--luz-300); }

/* ---------- tipografia utilitária ---------- */
.rotulo,.eyebrow,.pessoa__papel,.contatos__rot,.provas,.dia__prof,
.campo__rot,.galeria__legenda,.citacao figcaption{
  font-family:var(--sans); font-size:var(--t-rotulo); font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; line-height:1.2;
}

/* a marca de medida: o "apoio" virando grafismo */
.rotulo{
  position:relative; padding-left:2.5rem; color:var(--tinta-500);
  margin:0 0 calc(var(--u)*2); max-width:none;
}
.rotulo::before{
  content:""; position:absolute; left:0; top:.55em;
  width:1.75rem; height:1px; background:var(--luz-500);
}
.secao--escura .rotulo{ color:var(--mare-400); }
.secao--escura .rotulo::before{ background:var(--luz-300); }

.eyebrow{ color:var(--mare-200); margin:0 0 calc(var(--u)*3); max-width:none; }

.lead{
  font-size:var(--t-lead); line-height:1.62; font-weight:400;
  color:var(--tinta-500); max-width:54ch;
}
.secao--escura .lead{ color:#c2d2dc; }

.hora{
  font-size:var(--t-hora); font-weight:400;
  font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;
}
.hora i{ font-style:italic; font-weight:300; color:var(--luz-300); font-size:.7em; }

.nota{
  font-size:var(--t-peq); line-height:1.7; color:var(--tinta-500);
}

/* ---------- imagens: chapas, grade e tritone ---------- */
.chapa{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--tinta-800); margin:0;
}
.chapa::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grao); background-size:180px 180px;
  mix-blend-mode:overlay; opacity:.26;
}
.img-a{ filter:saturate(.88) contrast(1.06) brightness(1.02); }
.img-b{ filter:url(#tritone) contrast(1.05) brightness(1.02); }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  padding:1.05rem 2rem; border-radius:0; border:1px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color var(--dur-curta) var(--ease-estado),
             border-color var(--dur-curta) var(--ease-estado),
             background-color var(--dur-curta) var(--ease-estado),
             transform var(--dur-instante) var(--ease-estado);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--btn-hover, rgba(255,255,255,.14));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform var(--dur-media) var(--ease-respiro);
}
.btn svg{ width:1.1em; height:1.1em; fill:currentColor; flex:none; }
.btn:active{ transform:scale(.985); }

.btn--claro   { background:var(--areia-050); color:var(--tinta-800); border-color:var(--areia-050); --btn-hover:var(--mare-200); }
.btn--escuro  { background:var(--tinta-800); color:#fff; border-color:var(--tinta-800); --btn-hover:var(--tinta-700); }
.btn--fantasma{ border-color:rgba(255,255,255,.45); color:#fff; --btn-hover:rgba(255,255,255,.14); }
.btn--zap     { background:var(--tinta-800); color:#fff; border-color:var(--tinta-800);
                padding:.95rem 1.5rem; font-size:.72rem; --btn-hover:var(--tinta-700); }
.btn--zap svg { fill:#25D366; }          /* o verde vive só dentro do glifo */
.btn--grande  { padding:1.2rem 2.6rem; font-size:.8rem; }

@media (hover:hover){
  .btn:hover::before{ transform:scaleY(1); }
  .btn--escuro:hover,
  .btn--zap:hover{ border-color:var(--luz-500); }
  .btn--fantasma:hover,
  .btn--claro:hover{ border-color:var(--luz-300); }
}

/* ---------- links com seta ---------- */
.link-seta{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--tinta-800);
  padding-bottom:.35rem; position:relative;
}
.link-seta::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform-origin:left;
  transition:transform var(--dur-media) var(--ease-respiro),
             background-color var(--dur-curta) var(--ease-estado);
}
.link-seta::after{
  content:"→";
  transition:transform var(--dur-media) var(--ease-respiro);
}
.link-seta--peq{ font-size:.68rem; }
.link-seta--peq::before{ opacity:.4; }
@media (hover:hover){
  .link-seta:hover::after { transform:translateX(5px); }
  .link-seta:hover::before{ transform:scaleX(1.06); background:var(--luz-700); }
}

.link-nota{
  display:inline-block; margin-top:calc(var(--u)*2);
  font-size:var(--t-rotulo); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--tinta-500); text-decoration:none;
  border-bottom:1px solid var(--luz-700); padding-bottom:.25rem;
  transition:color var(--dur-curta) var(--ease-estado);
}
.link-nota:hover{ color:var(--tinta-800); }

/* ---------- header ---------- */
.topo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:calc(var(--u)*2) 0; isolation:isolate;
}
.topo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,248,243,.96);
  backdrop-filter:blur(6px);
  border-bottom:var(--filete-claro);
  opacity:0;
  transition:opacity var(--dur-media) var(--ease-estado);
}
.topo.solido::before{ opacity:1; }

/* barra de progresso de leitura */
.topo::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--luz-500); transform:scaleX(0); transform-origin:left;
  opacity:0; transition:opacity var(--dur-media) var(--ease-estado);
}
.topo.solido::after{ opacity:.9; }

.topo__wrap{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:2rem;
}

.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.marca__icone{ width:44px; height:44px; border-radius:50%; background:var(--areia-050); flex:none; }
.marca__texto{ display:flex; flex-direction:column; line-height:1; }
.marca__nome{
  font-family:var(--logo); font-weight:600; font-size:1.5rem;
  letter-spacing:-.01em; color:#fff; transition:color var(--transicao);
}
.marca__linha{
  font-family:var(--sans); font-size:.5rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(255,255,255,.72); margin-top:.5rem; transition:color var(--transicao);
}
.topo.solido .marca__nome{ color:var(--tinta-800); }
.topo.solido .marca__linha{ color:var(--tinta-500); }

.nav{ display:flex; gap:1.9rem; }
.nav a{
  font-size:.8rem; font-weight:400; letter-spacing:.06em;
  text-decoration:none; color:rgba(255,255,255,.88);
  padding-bottom:.25rem; border-bottom:0; position:relative;
  transition:color var(--dur-curta) var(--ease-estado);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--luz-300); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-curta) var(--ease-estado);
}
@media (hover:hover){
  .nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
}
.topo.solido .nav a{ color:var(--tinta-800); }
.topo.solido .nav a::after{ background:var(--luz-700); }

.topo:not(.solido) .topo__cta{ background:transparent; border-color:rgba(255,255,255,.5); }
.topo:not(.solido) .topo__cta{ --btn-hover:rgba(255,255,255,.12); }

.menu-btn{
  display:none; width:44px; height:44px; border:0; background:none;
  padding:10px; cursor:pointer; flex-direction:column; justify-content:space-between;
}
.menu-btn span{
  display:block; height:1.5px; background:#fff; width:100%;
  transition:transform var(--transicao), opacity var(--transicao), background-color var(--transicao);
}
.topo.solido .menu-btn span{ background:var(--tinta-800); }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; color:#fff;
  min-height:min(100svh, 940px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--topo-h) + var(--u)*4);
}
.hero__midia{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--tinta-900); }
.hero__midia img{
  width:100%; height:100%; object-fit:cover; object-position:52% 46%;
  filter:saturate(.92) contrast(1.05) brightness(1.06);
  transform:scale(1.06);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(9,20,29,.86) 0%, rgba(9,20,29,.66) 34%, rgba(9,20,29,.12) 64%, rgba(9,20,29,0) 82%),
    linear-gradient(180deg, rgba(9,20,29,.55) 0%, rgba(9,20,29,0) 22%),
    linear-gradient(0deg,   rgba(9,20,29,.78) 0%, rgba(9,20,29,0) 26%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--grao); background-size:180px 180px;
  mix-blend-mode:overlay; opacity:.2;
}
.hero__conteudo{ padding-bottom:clamp(3rem,7vw,5.5rem); }
.hero h1{ text-shadow:0 1px 24px rgba(0,0,0,.35); }
.hero h1 .linha{ display:block; }
.hero h1 .linha__in{ display:block; }
.hero__sub{
  max-width:46ch; margin-top:calc(var(--u)*3);
  font-size:var(--t-lead); color:rgba(255,255,255,.92);
}
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:calc(var(--u)*4); }

.hero__rodape{
  border-top:1px solid rgba(224,184,120,.34);
  background:rgba(9,20,29,.5);
}
.hero__rodape-in{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding-block:1.15rem;
}
.provas{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem 2.2rem;
  font-size:.7rem; letter-spacing:.2em;
  color:rgba(255,255,255,.86);
}
.provas li{ position:relative; }
.provas li + li::before{
  content:""; position:absolute; left:-1.1rem; top:50%;
  width:3px; height:3px; background:var(--luz-300); transform:translateY(-50%);
}
.selo{ width:132px; height:auto; flex:none; }

/* ---------- seções ---------- */
.secao{ padding-block:clamp(6rem,11vw,11rem); }
.secao--areia{ background:var(--areia-100); }
.secao--escura{ background:var(--tinta-800); color:#e9f0f4; padding-block:clamp(7rem,13vw,13rem); }
.secao--escura h2, .secao--escura h3{ color:#fff; }

.cabeca{ max-width:60ch; margin-bottom:calc(var(--u)*8); }
.cabeca h2 + .lead{ margin-top:calc(var(--u)*2.5); }

.grade-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem); align-items:center;
}

/* ---------- intro ---------- */
.intro__grade{ align-items:start; row-gap:calc(var(--u)*7); }
.intro__texto{ grid-column:1 / span 5; }
.intro__texto h2{ margin-bottom:calc(var(--u)*2.5); }
.intro__texto .lead{ margin-bottom:calc(var(--u)*3); }
.intro__texto .link-seta{ margin-top:calc(var(--u)*2); }
.intro__apoio{
  grid-column:7 / -1;
  background:var(--areia-100);
  padding:clamp(2rem,3vw,3.25rem);
  display:grid; justify-items:start; gap:calc(var(--u)*3);
  align-content:start;
}
.intro__apoio figure{ margin:0; width:100%; max-width:340px; }
.intro__apoio img{ width:100%; height:auto; }
.intro__cap{
  margin:0; max-width:34ch; font-size:var(--t-peq); line-height:1.65;
  color:var(--tinta-500); border-left:2px solid var(--luz-500);
  padding-left:calc(var(--u)*2);
}

/* ---------- método ---------- */
.cards{
  --lado: max(0px, calc((100vw - var(--wrap)) / 2));
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(255,255,255,.16);
  border-block:1px solid rgba(255,255,255,.16);
  width:100%;
}
.card{
  background:var(--tinta-800);
  padding:calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*7);
  display:grid; align-content:start;
}
.card__num{
  display:block; font-style:italic; font-size:1.05rem; font-weight:400;
  font-variant-numeric:tabular-nums; color:var(--luz-300);
  margin-bottom:calc(var(--u)*4);
}
.card h3{ margin-bottom:calc(var(--u)*1.5); max-width:16ch; }
.card p{ font-size:var(--t-peq); line-height:1.7; color:#c2d2dc; margin:0; max-width:34ch; }

@media (min-width:1001px){
  .card:first-child{ padding-left:calc(var(--lado) + var(--gut)); }
  .card:last-child { padding-right:calc(var(--lado) + var(--gut)); }
}

/* ---------- citação ---------- */
.citacao{
  display:grid; grid-template-columns:minmax(0,1fr) 280px;
  gap:clamp(2.5rem,6vw,5rem); align-items:start;
  margin-top:clamp(4rem,8vw,7rem);
}
.citacao figure{ margin:0; }
.citacao blockquote{ margin:0; }
.citacao blockquote p{
  font-size:var(--t-quote); font-weight:300; font-style:italic;
  line-height:1.32; letter-spacing:-.01em; color:#fff; margin:0; max-width:26ch;
}
.citacao figcaption{
  margin-top:calc(var(--u)*4); padding-top:calc(var(--u)*3);
  border-top:1px solid rgba(224,184,120,.4); max-width:44ch;
  color:var(--mare-400); line-height:1.9;
}
.citacao__foto figure{ max-width:280px; }
.citacao__foto img{ width:100%; height:auto; }
.citacao__nota{
  margin:calc(var(--u)*2) 0 0; font-size:var(--t-peq); line-height:1.65;
  color:#a9bdc9; max-width:34ch;
}

/* ---------- perfis ---------- */
.perfis__grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(var(--u)*5) calc(var(--u)*4); }
.perfil{ border-top:var(--filete-claro); padding-top:calc(var(--u)*3); }
.perfil h3{ margin-bottom:calc(var(--u)*1.5); }
.perfil p{ font-size:var(--t-peq); line-height:1.7; color:var(--tinta-500); }

.ressalva{
  margin:calc(var(--u)*8) 0 0; max-width:78ch;
  background:var(--areia-100); border-left:3px solid var(--luz-500);
  padding:calc(var(--u)*3) calc(var(--u)*4);
  font-size:var(--t-peq); line-height:1.7; color:var(--tinta-500);
}

/* ---------- oferta ---------- */
.oferta{ display:block; }
.oferta__item{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) minmax(0,var(--chapa-w,420px));
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  padding-block:calc(var(--u)*7);
  border-top:var(--filete-claro);
}
.oferta__item:last-child{ border-bottom:var(--filete-claro); }
.oferta__num{
  font-style:italic; font-size:1.05rem; font-weight:400;
  font-variant-numeric:tabular-nums; color:var(--luz-700); margin:0;
}
.oferta__texto h3{ margin-bottom:calc(var(--u)*2); }
.oferta__texto > p{ color:var(--tinta-500); max-width:48ch; }
.oferta__item figure{ margin:0; }
.oferta__item figure img{ width:100%; height:auto; }

.marcadores{ list-style:none; margin:0 0 calc(var(--u)*4); padding:0; }
.marcadores li{
  position:relative; padding-left:1.6rem; margin-bottom:.6rem;
  font-size:var(--t-peq); color:var(--tinta-500);
}
.marcadores li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--tinta-800);
}

.campo{ background:var(--tinta-800); color:#fff; padding:calc(var(--u)*5) calc(var(--u)*4); }
.campo__rot{ color:var(--luz-300); margin:0 0 calc(var(--u)*3); max-width:none; }
.campo__lista{ list-style:none; margin:0; padding:0; }
.campo__lista li{
  font-size:1.5rem; font-weight:300; line-height:1;
  padding-block:calc(var(--u)*1.5); border-bottom:1px solid rgba(255,255,255,.14);
}
.campo__lista li:last-child{ border-bottom:0; }

/* ---------- horários ---------- */
.grade-horarios{ display:grid; grid-template-columns:1fr; border-top:var(--filete-escuro); }
.dia{
  display:grid; grid-template-columns:minmax(10rem,15rem) 1fr;
  gap:clamp(1rem,3vw,3rem);
  padding-block:calc(var(--u)*4);
  border-bottom:var(--filete-escuro);
  border-left:0; border-right:0; background:none;
  transition:background-color var(--dur-curta) var(--ease-estado);
}
.dia:hover{ background:rgba(255,255,255,.035); }
/* o destaque é um filete dourado ao lado da linha; não desalinha a coluna */
.dia--cheio{ position:relative; }
.dia--cheio::before{
  content:""; position:absolute; left:-1.25rem; top:0; bottom:0;
  width:2px; background:var(--luz-500);
}
.dia h3{ font-size:1.5rem; margin:0; padding:0; border:0; align-self:start; }
.dia h3 span{ font-style:italic; font-weight:300; color:var(--luz-300); }
.dia ul{ list-style:none; margin:0; padding:0; display:grid; gap:calc(var(--u)*2); }
.dia li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.25rem; }
.dia li .hora{ color:#fff; }
.dia__prof{ color:var(--mare-400); }

.horarios__cta{
  margin-top:calc(var(--u)*7);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:calc(var(--u)*3);
}
.horarios__cta p{ margin:0; color:#c2d2dc; max-width:48ch; }

/* ---------- quem conduz ---------- */
.time__grade{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start; }
.pessoa{ border-top:var(--filete-claro); padding-top:calc(var(--u)*3); }
.pessoa figure,.pessoa__inicial{
  margin:0 0 calc(var(--u)*3); aspect-ratio:4/4.6; overflow:hidden; max-width:360px;
}
.pessoa figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; }
.pessoa__inicial{
  background:var(--areia-100); display:grid; place-items:center;
  font-size:clamp(3.5rem,7vw,5.5rem); font-weight:300;
  color:var(--luz-500); line-height:1; max-width:360px;
}
.pessoa h3{ margin-bottom:calc(var(--u)*1); }
.pessoa__papel{ color:var(--tinta-500); margin:0 0 calc(var(--u)*2); max-width:none; }
.pessoa p:not([class]){ font-size:var(--t-peq); line-height:1.7; color:var(--tinta-500); }
.pessoa .link-seta{ margin-top:calc(var(--u)*2); }

/* ---------- galeria ---------- */
.galeria{
  display:grid; gap:calc(var(--u)*2);
  padding-inline:var(--gut); max-width:1500px;
  margin:0 auto clamp(2.5rem,5vw,4rem);
}
.galeria__principal{ height:clamp(340px,42vw,560px); position:relative; margin:0; }
.galeria__principal img{ width:100%; height:100%; object-fit:cover; object-position:52% 46%; }
.galeria__principal::before{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(9,20,29,.66), rgba(9,20,29,0));
}
.galeria__principal::after{ z-index:2; }
.galeria__legenda{
  position:absolute; left:calc(var(--u)*3); bottom:calc(var(--u)*3); z-index:3; margin:0;
  color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.galeria__fila{
  display:grid; grid-template-columns:repeat(3,minmax(0,300px));
  gap:calc(var(--u)*2); justify-content:start;
}
.galeria__fila figure{ margin:0; aspect-ratio:1/1; }
.galeria__fila img{ width:100%; height:100%; object-fit:cover; }
.galeria__nota{ color:var(--tinta-500); font-size:var(--t-peq); margin:0; max-width:64ch; }
.galeria__nota a{ border-bottom:1px solid var(--luz-700); text-decoration:none; padding-bottom:1px; }

/* ---------- faq ---------- */
.grade-2--faq{ grid-template-columns:.8fr 1.2fr; align-items:start; }
.faq__intro{ display:flex; flex-direction:column; align-self:stretch; }
.faq__intro h2{ margin-bottom:calc(var(--u)*2); }
.faq__intro .btn{ margin-top:auto; align-self:start; padding-top:1.05rem; }
.faq__intro .lead{ margin-bottom:calc(var(--u)*4); }

.faq__lista details{ border-bottom:var(--filete-claro); }
.faq__lista details:first-child{ border-top:var(--filete-claro); }
.faq__lista summary{
  cursor:pointer; list-style:none;
  padding:calc(var(--u)*3) 3rem calc(var(--u)*3) 0;
  font-size:1.05rem; font-weight:400; position:relative;
  transition:color var(--dur-curta) var(--ease-estado);
}
.faq__lista summary::-webkit-details-marker{ display:none; }
.faq__lista summary::marker{ content:none; }
.faq__lista summary::after{ content:none; }
.faq__lista summary:hover{ color:var(--tinta-700); }

.faq__lista .sinal{
  position:absolute; right:.2rem; top:50%; width:14px; height:14px;
  transform:translateY(-50%);
}
.faq__lista .sinal::before,.faq__lista .sinal::after{
  content:""; position:absolute; background:var(--luz-700);
  transition:transform var(--dur-media) var(--ease-respiro), opacity var(--dur-media) var(--ease-respiro);
}
.faq__lista .sinal::before{ left:0; top:6.5px; width:14px; height:1px; }
.faq__lista .sinal::after { top:0; left:6.5px; height:14px; width:1px; }
.faq__lista details[open] .sinal::after{ transform:scaleY(0); opacity:0; }
@media (hover:hover){
  .faq__lista summary:hover .sinal::before,
  .faq__lista summary:hover .sinal::after{ background:var(--tinta-800); }
}
.faq__lista details p{
  margin:0 0 calc(var(--u)*3); padding-right:2.5rem;
  font-size:var(--t-peq); line-height:1.72; color:var(--tinta-500);
}

/* ---------- onde ---------- */
.grade-2--onde{ align-items:center; }
.onde address{
  font-style:normal; font-size:1.1rem; line-height:1.9;
  color:#d9e4ea; margin:calc(var(--u)*3) 0 calc(var(--u)*4); max-width:36ch;
}
.contatos{ list-style:none; margin:0 0 calc(var(--u)*5); padding:0; display:flex; flex-wrap:wrap; gap:2.5rem; }
.contatos__rot{ display:block; color:var(--mare-400); margin-bottom:.45rem; }
.contatos a{
  font-size:1.12rem; text-decoration:none;
  border-bottom:1px solid rgba(224,184,120,.5); padding-bottom:.2rem;
  transition:border-color var(--dur-curta) var(--ease-estado);
}
.contatos a:hover{ border-bottom-color:var(--luz-300); }
.mapa{ border:var(--filete-escuro); border-radius:0; overflow:hidden; aspect-ratio:4/3.4; background:var(--tinta-900); }
.mapa iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.06) brightness(.9) sepia(.16); }

/* ---------- fecho ---------- */
.fecho{
  background:linear-gradient(180deg, var(--tinta-800), var(--tinta-900));
  color:#fff; padding-block:clamp(6rem,11vw,10rem);
}
.fecho__grade{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,2vw,2rem); align-items:center;
}
.fecho__texto{ grid-column:1 / span 6; text-align:left; }
.fecho__texto h2{ max-width:14ch; }
.fecho__texto p{ max-width:42ch; color:rgba(255,255,255,.88); margin:calc(var(--u)*3) 0 calc(var(--u)*5); }
.fecho__chapa{ grid-column:9 / -1; margin:0; max-width:360px; justify-self:end; }
.fecho__chapa img{ width:100%; height:auto; }

/* ---------- rodapé ---------- */
.rodape{ background:var(--tinta-900); color:#b8c9d4; padding-top:clamp(4rem,8vw,6rem); }
.rodape__in{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:calc(var(--u)*4);
  align-items:start; padding-bottom:calc(var(--u)*6);
}
.rodape__marca{ display:grid; grid-template-columns:auto 1fr; gap:calc(var(--u)*1.5); align-items:center; }
.rodape__marca .marca__nome{ color:#fff; display:block; font-size:1.7rem; }
.rodape__marca .marca__linha{ display:block; color:var(--mare-400); margin-top:.45rem; }
.rodape__nav{ display:flex; flex-direction:column; gap:.7rem; align-items:start; }
.rodape__nav a, .rodape__contato a{ text-decoration:none; font-size:.94rem; }
.rodape__nav a{ border-bottom:1px solid transparent; padding-bottom:2px; transition:color var(--dur-curta) var(--ease-estado), border-color var(--dur-curta) var(--ease-estado); }
.rodape__nav a:hover{ color:#fff; border-bottom-color:var(--luz-500); }
.rodape__contato{ display:flex; flex-direction:column; gap:.5rem; align-items:start; }
.rodape__contato a:hover{ color:#fff; }
.rodape__contato p{ margin:.6rem 0 0; font-size:.88rem; line-height:1.7; color:#8fa4b2; }
.rodape__base{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  padding-block:calc(var(--u)*3) calc(var(--u)*4);
}
.rodape__base p{ margin:0; font-size:.8rem; color:#7e93a1; }
.selo--peq{ width:104px; opacity:.85; }

/* ---------- whatsapp flutuante ---------- */
.zap-flutuante{
  position:fixed; right:calc(var(--u)*2); bottom:calc(var(--u)*2); z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.15rem; border-radius:0;
  background:var(--tinta-800); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none;
  transition:background-color var(--dur-curta) var(--ease-estado),
             border-color var(--dur-curta) var(--ease-estado);
}
.zap-flutuante svg{ width:20px; height:20px; fill:#25D366; flex:none; }
.zap-flutuante:hover{ background:var(--tinta-700); border-color:var(--luz-500); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1100px){
  .oferta__item{ grid-template-columns:4rem minmax(0,1fr) minmax(0,340px); }
}

@media (max-width:1000px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .perfis__grade{ grid-template-columns:repeat(2,1fr); }
  .citacao{ grid-template-columns:1fr; }
  .citacao__foto figure{ max-width:240px; }
  .rodape__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width:960px){
  .oferta__item{ grid-template-columns:1fr; gap:calc(var(--u)*3); }
  .oferta__num{ margin-bottom:calc(var(--u)*-1); }
  .oferta__item figure, .oferta__item .campo{ max-width:520px; }
}

@media (max-width:860px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--tinta-800); flex-direction:column; gap:0;
    padding:6.5rem 2rem 2rem;
    transform:translateX(100%); transition:transform var(--dur-media) var(--ease-respiro);
  }
  .nav.aberto{ transform:none; }
  .nav a{ color:#fff !important; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:1rem; }
  .nav a::after{ content:none; }
  .menu-btn{ display:flex; }
  .topo__cta{ display:none; }
  .topo.solido .menu-btn[aria-expanded="true"] span{ background:#fff; }

  .hero{ min-height:min(92svh, 780px); padding-top:7rem; }
  .hero__rodape-in{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .selo{ width:104px; }

  .intro__texto,.intro__apoio{ grid-column:1 / -1; }
  .grade-2, .grade-2--faq, .grade-2--onde{ grid-template-columns:1fr; }
  .time__grade{ grid-template-columns:1fr; }
  .pessoa figure, .pessoa__inicial{ max-width:280px; }
  .dia{ grid-template-columns:1fr; gap:calc(var(--u)*2); }
  .dia h3{ font-size:1.3rem; }
  .mapa{ aspect-ratio:4/3; }
  .fecho__texto,.fecho__chapa{ grid-column:1 / -1; }
  .fecho__chapa{ justify-self:start; max-width:260px; margin-top:calc(var(--u)*5); }
}

@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .perfis__grade{ grid-template-columns:1fr; }
  .galeria__fila{ grid-template-columns:1fr 1fr; }
  .rodape__in{ grid-template-columns:1fr; gap:2rem; }
  .rodape__base{ flex-direction:column-reverse; align-items:flex-start; }
  .provas{ gap:.45rem 1.6rem; font-size:.65rem; letter-spacing:.16em; }
  .btn{ padding:1rem 1.5rem; }
  .hero__acoes .btn{ flex:1 1 100%; }
  .horarios__cta .btn{ width:100%; }
  .zap-flutuante span{ display:none; }
  .zap-flutuante{ padding:.9rem; }
}

/* =========================================================
   MOVIMENTO
   Estático é o padrão. Tudo aqui só existe sob .anima, classe
   que o script inline do <head> só adiciona quando há JS e o
   sistema não pede movimento reduzido.
   ========================================================= */

/* --- escalas compostas: reveal e hover não brigam --- */
@property --esc-rev { syntax:"<number>"; inherits:false; initial-value:1; }
@property --esc-hov { syntax:"<number>"; inherits:false; initial-value:1; }

.chapa img{
  --esc-rev:1; --esc-hov:1;
  transform:scale(calc(var(--esc-rev,1) * var(--esc-hov,1)));
  transition:--esc-hov var(--dur-media) var(--ease-estado);
}
@media (hover:hover){
  .oferta__item:hover figure img,
  .galeria__fila figure:hover img,
  .galeria__principal:hover img{ --esc-hov:1.045; }
}

/* =========================================================
   1 · MOTOR DE REVELAÇÃO
   ========================================================= */
.anima .reveal{ opacity:0; }
.anima .reveal.a-pai{ opacity:1; }

.anima .a{
  opacity:0;
  transition:
    opacity   var(--dur, var(--dur-longa)) var(--ea, var(--ease-respiro)) var(--d, 0ms),
    transform var(--dur, var(--dur-longa)) var(--ea, var(--ease-respiro)) var(--d, 0ms),
    clip-path var(--dur, var(--dur-longa)) var(--ea, var(--ease-respiro)) var(--d, 0ms);
}
.anima .a.visivel{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

.anima .a--rotulo{ --dur:var(--dur-media); transform:translate3d(0,10px,0); }
.anima .a--titulo{ --dur:var(--dur-longa); transform:translate3d(0,18px,0); }
.anima .a--texto { --dur:var(--dur-longa); transform:translate3d(0,16px,0); }
.anima .a--card  { --dur:var(--dur-longa); transform:translate3d(0,22px,0); }
.anima .a--bloco { --dur:var(--dur-ampla); --ea:var(--ease-peso); transform:translate3d(0,26px,0); }

.anima .a--imagem{
  --dur:var(--dur-ampla); --ea:var(--ease-peso);
  transform:none;
  clip-path:inset(0 0 14% 0);
}
.anima .a--imagem img{
  --esc-rev:1.06;
  transition:--esc-rev var(--dur-ampla) var(--ease-peso) var(--d,0ms),
             --esc-hov var(--dur-media) var(--ease-estado);
}
.anima .a--imagem.visivel img{ --esc-rev:1; }

/* --- números: confirmam depois que o card assenta --- */
.anima .a--card .card__num{
  opacity:0; transform:translate3d(0,6px,0);
  transition:opacity   var(--dur-media) var(--ease-respiro) calc(var(--d,0ms) + 220ms),
             transform var(--dur-media) var(--ease-respiro) calc(var(--d,0ms) + 220ms);
}
.anima .a--card.visivel .card__num{ opacity:1; transform:none; }

/* --- filete que desenha antes do conteúdo --- */
.anima .perfil, .anima .pessoa{ position:relative; border-top-color:transparent; }
.anima .perfil::before, .anima .pessoa::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--areia-200); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-longa) var(--ease-peso) var(--d,0ms);
}
.anima .perfil.visivel::before, .anima .pessoa.visivel::before{ transform:scaleX(1); }

/* --- traços dos marcadores --- */
.anima .marcadores.a li::before{
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-media) var(--ease-respiro)
             calc(var(--d,0ms) + 180ms + var(--i,0ms));
}
.anima .marcadores.a.visivel li::before{ transform:scaleX(1); }
.marcadores li:nth-child(2){ --i:70ms; }
.marcadores li:nth-child(3){ --i:140ms; }

/* --- horários escalonados dentro da linha do dia --- */
.anima .dia.a li{
  opacity:0; transform:translate3d(0,8px,0);
  transition:opacity   var(--dur-media) var(--ease-respiro) calc(var(--d,0ms) + 260ms + var(--i,0ms)),
             transform var(--dur-media) var(--ease-respiro) calc(var(--d,0ms) + 260ms + var(--i,0ms));
}
.anima .dia.a.visivel li{ opacity:1; transform:none; }
.dia li:nth-child(2){ --i:60ms; }
.dia li:nth-child(3){ --i:120ms; }

/* =========================================================
   2 · ENTRADA DA PÁGINA (html.intro)
   ========================================================= */
.anima .hero .reveal{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity   var(--dur-longa) var(--ease-respiro) var(--d,0ms),
             transform var(--dur-longa) var(--ease-respiro) var(--d,0ms);
}
.anima.intro .hero .reveal{ opacity:1; transform:none; }

.anima .hero .eyebrow{ --d:260ms; --dur-longa:520ms; }
.anima .hero__sub    { --d:620ms; }
.anima .hero__acoes  { --d:760ms; }

/* --- título por linha, com máscara --- */
.anima .hero h1.reveal{ opacity:1; transform:none; transition:none; }
.anima .hero h1 .linha{
  overflow:hidden;
  padding-left:.08em;   margin-left:-.08em;
  padding-bottom:.06em; margin-bottom:-.06em;
}
.anima .hero h1 .linha__in{
  transform:translate3d(0,112%,0);
  transition:transform var(--dur-ampla) var(--ease-peso) var(--d,0ms);
}
.anima .hero h1 .linha:nth-child(1) .linha__in{ --d:380ms; }
.anima .hero h1 .linha:nth-child(2) .linha__in{ --d:490ms; }
.anima.intro .hero h1 .linha__in{ transform:none; }
.anima .hero h1.livre .linha{ overflow:visible; }

/* --- botões do hero --- */
.anima .hero__acoes .btn{
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity   640ms var(--ease-respiro) var(--d,0ms),
             transform 640ms var(--ease-respiro) var(--d,0ms),
             color var(--dur-curta) var(--ease-estado);
}
.anima .hero__acoes .btn:nth-child(1){ --d:760ms; }
.anima .hero__acoes .btn:nth-child(2){ --d:830ms; }
.anima.intro .hero__acoes .btn{ opacity:1; transform:none; }

/* --- rodapé do hero + filete + selo --- */
.anima .hero__rodape{
  opacity:0; transform:translate3d(0,14px,0);
  border-top-color:transparent; position:relative;
  transition:opacity   700ms var(--ease-respiro) 900ms,
             transform 700ms var(--ease-respiro) 900ms,
             border-top-color 500ms linear 1300ms;
}
.anima .hero__rodape::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(224,184,120,.34); transform:scaleX(0); transform-origin:left;
  transition:transform 900ms var(--ease-peso) 940ms;
}
.anima.intro .hero__rodape{ opacity:1; transform:none; }
.anima.intro .hero__rodape::before{ transform:scaleX(1); }

.anima .hero__rodape .selo{ opacity:0; transition:opacity 800ms var(--ease-respiro) 1040ms; }
.anima.intro .hero__rodape .selo{ opacity:1; }

/* --- cabeçalho --- */
.anima .topo .marca{
  opacity:0; transform:translate3d(0,-8px,0);
  transition:opacity   620ms var(--ease-respiro) 140ms,
             transform 620ms var(--ease-respiro) 140ms;
}
.anima.intro .topo .marca{ opacity:1; transform:none; }

@media (min-width:861px){
  .anima .topo .nav a, .anima .topo__cta{
    opacity:0; transform:translate3d(0,-6px,0);
    transition:opacity   520ms var(--ease-respiro) var(--d,200ms),
               transform 520ms var(--ease-respiro) var(--d,200ms),
               color var(--dur-curta) var(--ease-estado);
  }
  .anima .topo .nav a:nth-child(1){ --d:200ms }
  .anima .topo .nav a:nth-child(2){ --d:240ms }
  .anima .topo .nav a:nth-child(3){ --d:280ms }
  .anima .topo .nav a:nth-child(4){ --d:320ms }
  .anima .topo .nav a:nth-child(5){ --d:360ms }
  .anima .topo__cta               { --d:440ms }
  .anima.intro .topo .nav a, .anima.intro .topo__cta{ opacity:1; transform:none; }
}

/* --- página aberta já rolada ou via #hash --- */
.anima.sem-intro .hero .reveal,
.anima.sem-intro .hero h1 .linha__in,
.anima.sem-intro .hero__acoes .btn,
.anima.sem-intro .hero__rodape,
.anima.sem-intro .hero__rodape::before,
.anima.sem-intro .hero__rodape .selo,
.anima.sem-intro .topo .marca,
.anima.sem-intro .topo .nav a,
.anima.sem-intro .topo__cta{ transition-duration:1ms; transition-delay:0ms; }

/* --- resgate: o main.js não chegou ao fim --- */
.anima.resgate .reveal,
.anima.resgate .a,
.anima.resgate .a--card .card__num,
.anima.resgate .dia.a li,
.anima.resgate .marcadores.a li::before{
  opacity:1 !important; transform:none !important;
  clip-path:none !important; transition:none !important;
}
.anima.resgate .perfil::before,
.anima.resgate .pessoa::before{ transform:scaleX(1) !important; transition:none !important; }
.anima.resgate .zap-flutuante{ opacity:1; transform:none; pointer-events:auto; }

/* o hero também entra de uma vez, sem esperar os delays da coreografia */
.anima.resgate .hero .reveal,
.anima.resgate .hero h1 .linha__in,
.anima.resgate .hero__acoes .btn,
.anima.resgate .hero__rodape,
.anima.resgate .hero__rodape .selo,
.anima.resgate .topo .marca,
.anima.resgate .topo .nav a,
.anima.resgate .topo__cta{
  opacity:1 !important; transform:none !important; transition:none !important;
}
.anima.resgate .hero h1 .linha{ overflow:visible; }
.anima.resgate .hero__rodape{ border-top-color:rgba(224,184,120,.34) !important; }
.anima.resgate .hero__rodape::before{ transform:scaleX(1) !important; transition:none !important; }

/* =========================================================
   3 · SCROLL-DRIVEN (nativo, com fallback estático)
   ========================================================= */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .anima.hero-pronto .hero__midia img{
      animation:heroDeriva linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100vh;
    }
    .anima .topo::after{
      animation:progresso linear both;
      animation-timeline:scroll(root block);
    }
  }
}
@keyframes heroDeriva{
  from{ transform:scale(1.06) translate3d(0,0,0); }
  to  { transform:scale(1.06) translate3d(0,2.6%,0); }
}
@keyframes progresso{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* =========================================================
   4 · FAQ (único lugar que anima layout, de propósito)
   ========================================================= */
.faq-anim .faq__caixa{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-faq) var(--ease-respiro);
}
.faq-anim[open] .faq__caixa{ grid-template-rows:1fr; }
.faq-anim .faq__corpo{ overflow:hidden; }
.faq-anim .faq__corpo > *{
  opacity:0; transform:translate3d(0,-6px,0);
  transition:opacity   var(--dur-curta) var(--ease-respiro) 80ms,
             transform var(--dur-curta) var(--ease-respiro) 80ms;
}
.faq-anim[open] .faq__corpo > *{ opacity:1; transform:none; }

.faq-anim.fechando .faq__caixa{
  grid-template-rows:0fr;
  transition-timing-function:var(--ease-saida);
}
.faq-anim.fechando .faq__corpo > *{ opacity:0; transition-duration:120ms; transition-delay:0ms; }

/* =========================================================
   5 · MENU MOBILE
   ========================================================= */
.scrim{
  position:fixed; inset:0; z-index:99;
  background:rgba(9,20,29,.5);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-media) var(--ease-estado);
}
.scrim.on{ opacity:1; pointer-events:auto; }

@media (max-width:860px){
  .nav:not(.aberto){ transition:transform var(--dur-curta) var(--ease-saida); }

  .anima .nav a{
    opacity:0; transform:translate3d(18px,0,0);
    transition:opacity   var(--dur-media) var(--ease-respiro) var(--d,0ms),
               transform var(--dur-media) var(--ease-respiro) var(--d,0ms);
  }
  .anima .nav.aberto a{ opacity:1; transform:none; }
  .anima .nav:not(.aberto) a{ transition-delay:0ms; transition-duration:var(--dur-curta); }

  .nav a:nth-child(1){ --d:130ms } .nav a:nth-child(2){ --d:155ms }
  .nav a:nth-child(3){ --d:180ms } .nav a:nth-child(4){ --d:205ms }
  .nav a:nth-child(5){ --d:230ms }
}

/* =========================================================
   6 · WHATSAPP FLUTUANTE
   ========================================================= */
/* Esconder o chip sobre o hero e sobre o fecho é POSICIONAMENTO,
   não animação: ali ele cobriria o selo Iyengar e duplicaria o CTA.
   Por isso a base pendura em .js-zap (que o JS só liga quando
   consegue observar) e não em .anima. */
.js-zap .zap-flutuante{
  opacity:0; transform:translate3d(0,14px,0) scale(.9); pointer-events:none;
}
.js-zap .zap-flutuante.aparece{ opacity:1; transform:none; pointer-events:auto; }
.anima.js-zap .zap-flutuante{
  transition:opacity   var(--dur-media) var(--ease-respiro),
             transform var(--dur-media) var(--ease-respiro),
             background-color var(--dur-curta) var(--ease-estado),
             border-color var(--dur-curta) var(--ease-estado);
}
.zap-flutuante:active{ transform:scale(.96); transition-duration:var(--dur-instante); }

/* =========================================================
   7 · REDE DE SEGURANÇA
   Não é *{animation:none}. Cada elemento é nomeado e recebe
   o ESTADO FINAL legível, sem depender de JS ter rodado.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .reveal, .a, .hero .reveal,
  .hero h1 .linha__in, .hero__acoes .btn,
  .hero__rodape, .hero__rodape .selo,
  .topo .marca, .topo .nav a, .topo__cta,
  .card__num, .dia li, .faq__corpo > *, .nav a{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
    animation:none !important;
  }

  .hero h1 .linha{ overflow:visible !important; }

  .perfil::before, .pessoa::before,
  .marcadores li::before, .hero__rodape::before{
    transform:none !important; transition:none !important;
  }
  .perfil, .pessoa{ border-top-color:var(--areia-200) !important; }
  .hero__rodape{ border-top-color:rgba(224,184,120,.34) !important; }

  /* sem transição, mas o chip continua obedecendo o .js-zap:
     ele aparece depois do hero e some no fecho, sem animar. */
  .zap-flutuante{ transition:none !important; transform:none !important; }
  html:not(.js-zap) .zap-flutuante{
    opacity:1 !important; pointer-events:auto !important;
  }

  .topo::before{ transition:none; }
  .topo::after { display:none; }
  .btn::before { transition:none; }
  .faq-anim .faq__caixa{ transition:none; }
  .sinal::before, .sinal::after{ transition:none !important; }

  .chapa img, .hero__midia img{
    animation:none !important; transition:none !important;
  }
  .chapa img{ transform:none !important; }
}