/* ============================================================
   OLYMPIA ACADEMIA
   Sistema visual — preto, vermelho de ação, tipografia pesada.

   Os tokens dizem a FUNÇÃO, não a cor: --fundo é sempre o fundo,
   --texto é sempre o texto. É isso que faz o modo dia caber numa
   troca de valores, sem duplicar uma linha de regra.
   ============================================================ */

:root{
  /* --- superfícies --- */
  --fundo:        #000000;
  --fundo-2:      #08080a;   /* seções alternadas          */
  --superficie:   #121215;   /* card                        */
  --superficie-2: #1a1a1f;   /* card elevado / hover        */
  --borda:        rgba(255,255,255,.09);
  --borda-forte:  rgba(255,255,255,.16);

  /* Verde só de sinal: a luz de "aberto agora". Não é cor de marca
     e não aparece em mais lugar nenhum — verde é o que todo mundo
     entende sem ler. */
  --verde:        #3fd98a;

  /* --- marca --- */
  --vermelho:      #e10600;
  --vermelho-vivo: #ff2b20;
  --vermelho-brilho:#ff6155;  /* a crista do degrade que corre nos botoes */
  --vermelho-fundo:#8a0300;

  /* --- texto --- */
  --texto:     #f4f4f2;      /* branco quebrado cansa menos que #fff */
  --texto-2:   #a9a9b0;
  --texto-3:   #82828b;

  /* --- profundidade: camadas, não um borrão só --- */
  --sombra-1: 0 1px 2px rgba(0,0,0,.5);
  --sombra-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-3: 0 4px 8px rgba(0,0,0,.45), 0 16px 48px rgba(0,0,0,.45);
  --sombra-vermelha: 0 8px 30px -8px rgba(225,6,0,.55);

  /* --- forma --- */
  --raio:    14px;
  --raio-sm: 10px;
  --raio-lg: 20px;
  --pill:    999px;

  /* --- ritmo --- */
  --shell:  min(1200px, 100% - 3rem);
  --shell-estreito: min(760px, 100% - 3rem);
  --secao:  clamp(5rem, 3rem + 7vw, 8rem);
  --secao-g: clamp(6.5rem, 4rem + 9vw, 10rem);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-suave: cubic-bezier(.4,0,.2,1);

  color-scheme: dark;
}

/* ---------- modo dia ----------
   Cinza-concreto quente. A página continua com cara de academia,
   não de escritório. O vermelho escurece para manter contraste. */
:root[data-theme="light"]{
  --fundo:        #f2f1ee;
  --fundo-2:      #e9e7e3;
  --superficie:   #ffffff;
  --superficie-2: #faf9f7;
  --borda:        rgba(0,0,0,.1);
  --borda-forte:  rgba(0,0,0,.2);

  --verde:        #0a7f45;   /* escurece para ler no claro: 5,08 no branco */

  --vermelho:      #c90500;
  --vermelho-vivo: #e01a10;
  --vermelho-brilho:#f0483c;

  --texto:   #141416;
  --texto-2: #55555e;
  --texto-3: #666670;  /* 4.6:1 no fundo mais claro — o #7d7d87 ficava em 3.3 */

  --sombra-1: 0 1px 2px rgba(20,20,22,.06);
  --sombra-2: 0 2px 4px rgba(20,20,22,.05), 0 8px 24px rgba(20,20,22,.08);
  --sombra-3: 0 4px 8px rgba(20,20,22,.06), 0 16px 48px rgba(20,20,22,.1);
  --sombra-vermelha: 0 8px 30px -8px rgba(201,5,0,.4);

  color-scheme: light;
}

/* Estas faixas seguem escuras no modo dia: elas assentam sobre foto,
   e a logo tem a palavra "Olympia" em branco — sumiria no claro. */
:root[data-theme="light"] .cabecalho,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .fechamento,
:root[data-theme="light"] .rodape{
  --fundo:#000; --fundo-2:#08080a;
  --superficie:#121215; --superficie-2:#1a1a1f;
  --borda:rgba(255,255,255,.09); --borda-forte:rgba(255,255,255,.16);
  --verde:#3fd98a;
  --vermelho:#e10600; --vermelho-vivo:#ff2b20; --vermelho-brilho:#ff6155;
  --texto:#f4f4f2; --texto-2:#a9a9b0; --texto-3:#82828b;   /* 4.9:1 — o #75757e antigo ficava em 4.1 e nao passava no AA */
  color:var(--texto);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }

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

body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
h1,h2,h3,h4,p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }

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

.wrap{ width:var(--shell); margin-inline:auto }

section[id]{ scroll-margin-top:6rem }

.pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--vermelho); color:#fff;
  padding:.85rem 1.4rem; border-radius:0 0 var(--raio-sm) 0;
  font-weight:700;
}
.pular:focus{ left:0; top:0 }

.so-leitor{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================================================
   TIPOGRAFIA — a escala abre de verdade entre os níveis
   ============================================================ */
.display,
.titulo,
.preco__valor{
  font-variation-settings:"wdth" 112,"wght" 900;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.025em;
}

/* H1 — só um na página, e ele domina */
.display{
  font-size:clamp(2.6rem, 1.4rem + 5.2vw, 5.25rem);
  letter-spacing:-.035em;
}

/* H2 — bem abaixo do H1, para a hierarquia se ver de longe */
.titulo{
  font-size:clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  text-wrap:balance;
}
.titulo--centro{ text-align:center; margin-inline:auto }

/* H3 */
.subtitulo{
  font-size:1.0625rem;
  font-variation-settings:"wdth" 104,"wght" 800;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.25;
}

/* rótulo de seção */
.olho{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.7rem;
  font-variation-settings:"wdth" 100,"wght" 700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--vermelho);
}
.olho::before{
  content:""; width:22px; height:2px;
  background:var(--vermelho); border-radius:2px;
}
.olho--centro{ justify-content:center }

.lede{
  color:var(--texto-2);
  font-size:1.0625rem;
  line-height:1.75;
  max-width:60ch;
}
.lede--centro{ text-align:center; margin-inline:auto }

.destaque{ color:var(--vermelho) }

/* cabeçalho de seção reutilizável */
.cabeca{ display:grid; gap:1rem; margin-bottom:clamp(2.5rem,1.5rem + 2.5vw,4rem) }
.cabeca--centro{ justify-items:center; text-align:center }
.cabeca--centro .lede{ text-align:center }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  --py:1rem; --px:1.75rem;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:var(--py) var(--px);
  border:1px solid transparent;
  /* canto de 8px, nao pilula: e o que mais muda a cara do botao */
  border-radius:8px;
  font-size:.9375rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  transition:transform .25s var(--ease),
             background-color .25s var(--ease-suave),
             border-color .25s var(--ease-suave),
             box-shadow .25s var(--ease-suave),
             color .25s var(--ease-suave);
}
/* Cresce 2% em vez de saltar. Fica em 2% de proposito: os botoes de
   largura cheia, dentro dos cards e no celular, estourariam a caixa
   com os 4% do original. */
.btn:hover{ transform:scale(1.02) }
.btn:active{ transform:scale(.99) }

.btn__icone{ width:18px; height:18px; flex:0 0 auto; fill:currentColor }
/* Os ícones de traço vêm com fill="none" no próprio SVG, mas o CSS
   acima ganha de um atributo de apresentação e os pintaria por
   dentro — o Instagram virava um quadrado branco. */
.btn__icone[fill="none"]{ fill:none }
.btn__seta{
  width:17px; height:17px; flex:0 0 auto;
  transition:transform .25s var(--ease);
}
.btn:hover .btn__seta{ transform:translateX(3px) }

/* O degrade corre pelo botao o tempo todo, nao so no hover. Sao tres
   paradas com a mesma cor nas pontas: assim a volta e invisivel e o
   laco nao tem emenda. */
.btn--principal{
  color:#fff;
  background:linear-gradient(90deg,
              var(--vermelho) 0%,
              var(--vermelho-vivo) 25%,
              var(--vermelho-brilho) 50%,
              var(--vermelho-vivo) 75%,
              var(--vermelho) 100%) 0 0 / 200% 100%;
  box-shadow:var(--sombra-vermelha);
}
@media (prefers-reduced-motion: no-preference){
  .btn--principal{ animation:btn-correr 5s linear infinite }
}
/* no hover o degrade acelera e a sombra vermelha se abre */
.btn--principal:hover{
  animation-duration:1.4s;
  box-shadow:0 18px 50px -8px rgba(225,6,0,.85);
}
@keyframes btn-correr{
  to{ background-position:200% 0 }
}

.btn--contorno{
  border-color:var(--borda-forte);
  color:var(--texto);
  background:transparent;
}
.btn--contorno:hover{
  border-color:var(--texto-2);
  background:rgba(127,127,140,.1);
}

.btn--sm{ --py:.6rem; --px:1.1rem; font-size:.8125rem }
.btn--lg{ --py:1.2rem; --px:2.4rem; font-size:1.0625rem }
.btn--bloco{ width:100% }

/* ============================================================
   SLOT DE FOTO
   O sistema que recebe as fotos reais da academia. Sem arquivo,
   mostra uma superfície trabalhada — nunca um buraco vazio.
   ============================================================ */
.foto{
  position:relative;
  overflow:hidden;
  background-color:#0a0a0c;
  isolation:isolate;
}
.foto::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 25% 15%, rgba(225,6,0,.22), transparent 62%),
    radial-gradient(80% 80% at 85% 90%, rgba(138,3,0,.3), transparent 60%),
    linear-gradient(155deg,#1c1c20 0%,#0a0a0c 62%);
}
.foto::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  opacity:.14; mix-blend-mode:overlay;
  pointer-events:none;
}
/* a foto real entra por cima de tudo quando existir */
.foto > img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease), opacity .5s ease;
}
.foto > img:not([src]),
.foto > img[src=""]{ opacity:0 }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease-suave),
             border-color .35s var(--ease-suave),
             backdrop-filter .35s;
}
.cabecalho.grudou{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.09);
}

.cabecalho__inner{
  width:var(--shell); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
  padding-block:.75rem;
  transition:padding .35s var(--ease-suave);
}
.cabecalho.grudou .cabecalho__inner{ padding-block:.45rem }

.marca{ display:flex; align-items:center; margin-right:auto; flex:0 0 auto }
.marca img{
  width:auto; height:56px;
  transition:height .35s var(--ease-suave);
}
.cabecalho.grudou .marca img{ height:46px }

.menu{ display:flex; align-items:center; gap:2.25rem }
.menu a{
  position:relative;
  color:var(--texto-2);
  font-size:.9375rem;
  font-variation-settings:"wdth" 100,"wght" 600;
  padding-block:.35rem;
  transition:color .25s var(--ease-suave);
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; border-radius:2px;
  background:var(--vermelho);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s var(--ease);
}
.menu a:hover{ color:var(--texto) }
.menu a:hover::after{ transform:scaleX(1); transform-origin:left }

.cabecalho__acoes{ display:flex; align-items:center; gap:.7rem }

/* botão de tema */
.tema{
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--borda);
  border-radius:50%;
  cursor:pointer;
  transition:background-color .25s,border-color .25s,transform .2s var(--ease);
}
.tema:hover{ background:rgba(255,255,255,.13); border-color:var(--borda-forte) }
.tema:active{ transform:scale(.93) }
.tema svg{ grid-area:1/1; width:18px; height:18px; transition:opacity .3s,transform .4s var(--ease) }
.tema__lua{ opacity:0; transform:rotate(-70deg) scale(.5) }
:root[data-theme="light"] .tema__sol{ opacity:0; transform:rotate(70deg) scale(.5) }
:root[data-theme="light"] .tema__lua{ opacity:1; transform:none }

/* hambúrguer */
.hamburguer{
  display:none;
  width:42px; height:42px;
  place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--borda);
  border-radius:50%;
  cursor:pointer;
}
.hamburguer__traco{
  display:block; width:17px; height:2px;
  background:var(--texto); border-radius:2px;
  transition:transform .35s var(--ease), opacity .2s var(--ease-suave);
}
.hamburguer__traco + .hamburguer__traco{ margin-top:4px }
.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(2){ opacity:0 }
.hamburguer[aria-expanded="true"] .hamburguer__traco:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* painel do menu mobile */
.gaveta{
  position:fixed; inset:0; z-index:99;
  display:grid; align-content:start;
  gap:.25rem;
  padding:6.5rem 1.5rem 2rem;
  background:rgba(0,0,0,.97);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease-suave), visibility .35s;
}
.gaveta.aberta{ opacity:1; visibility:visible }
.gaveta a{
  padding:1rem .25rem;
  border-bottom:1px solid var(--borda);
  font-size:1.35rem;
  font-variation-settings:"wdth" 106,"wght" 800;
  text-transform:uppercase;
  color:var(--texto);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gaveta.aberta a{ opacity:1; transform:none }
.gaveta.aberta a:nth-child(1){ transition-delay:.06s }
.gaveta.aberta a:nth-child(2){ transition-delay:.12s }
.gaveta.aberta a:nth-child(3){ transition-delay:.18s }
.gaveta.aberta a:nth-child(4){ transition-delay:.24s }
.gaveta .btn{ margin-top:1.75rem; opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--ease) .3s, transform .4s var(--ease) .3s }
.gaveta.aberta .btn{ opacity:1; transform:none }

body.travado{ overflow:hidden }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:9rem 0 clamp(2.5rem,2rem + 3vw,4.5rem);
  isolation:isolate;
  overflow:hidden;
}
.hero__foto{ position:absolute; inset:0; z-index:-2 }
/* o véu que garante a leitura sobre qualquer foto */
.hero__veu{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, #000 2%, rgba(0,0,0,.35) 32%, transparent 60%);
}

.hero__inner{ width:var(--shell); margin-inline:auto }


/* O H1 é mais estreito que o resto da tipografia display (wdth 88
   contra 112). As duas frases do título têm 20 e 18 caracteres: no
   eixo largo elas mediam 881px numa coluna de 596 e passavam por
   baixo da logo. Estreitando a letra, o corpo pode ficar em 58px em
   vez de 47 — e letra pesada e estreita é mais esportiva, ainda por
   cima. */
.hero__titulo{
  max-width:15ch; margin-bottom:1.5rem;
  font-variation-settings:"wdth" 88,"wght" 900;
}
.hero__titulo > span{ display:block }

.hero__lede{
  color:var(--texto-2);
  font-size:clamp(1rem,.95rem + .35vw,1.1875rem);
  line-height:1.7;
  max-width:46ch;
  margin-bottom:2.25rem;
}

/* ---------- o preço em destaque da primeira dobra ----------
   Ele precisa ser lido num relance e, ao mesmo tempo, não brigar
   com o título: fica em 2rem contra os 4,5rem do H1, e ganha
   atenção pela cor e pela moldura, não pelo tamanho. */
.hero__preco{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.55rem 1.1rem .55rem 1rem;
  margin-bottom:2rem;
  border-radius:var(--pill);
  background:linear-gradient(120deg, rgba(225,6,0,.18), rgba(225,6,0,.05));
  border:1px solid rgba(225,6,0,.38);
  box-shadow:var(--sombra-vermelha);
}
.hero__preco__rotulo{
  font-size:.75rem;
  letter-spacing:.11em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
  color:var(--texto-2);
  line-height:1.2;
}
.hero__preco__valor{
  display:inline-flex; align-items:baseline; gap:.15rem;
  font-size:2rem;
  font-variation-settings:"wdth" 112,"wght" 900;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--texto);
}
.hero__preco__valor i{
  font-size:.9375rem; font-style:normal;
  font-variation-settings:"wdth" 100,"wght" 800;
  color:var(--vermelho-vivo);
}


.hero__acoes{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.5rem }


/* barra de confiança — só o que a academia realmente informou */
.confianca{
  display:flex; flex-wrap:wrap;
  gap:1rem clamp(1.5rem,1rem + 2vw,3rem);
  padding-top:1.75rem;
  border-top:1px solid var(--borda);
}
.confianca li{ display:flex; align-items:center; gap:.65rem }
.confianca svg{ width:19px; height:19px; flex:0 0 auto; color:var(--vermelho) }
.confianca b{
  display:block;
  font-size:1.0625rem; line-height:1.2;
  font-variation-settings:"wdth" 106,"wght" 800;
  color:var(--texto);
}
.confianca span{ font-size:.8125rem; color:var(--texto-3); line-height:1.3 }


/* ============================================================
   FAIXA — a assinatura diagonal, usada uma vez só
   ============================================================ */
.faixa{
  position:relative; z-index:3;
  background:var(--vermelho);
  transform:rotate(-1.6deg) scale(1.05);
  margin-block:-1.75rem;
  padding-block:.8rem;
  overflow:hidden;
}
.faixa__trilho{ display:flex; width:max-content; animation:correr 34s linear infinite }
.faixa__trilho span{
  padding-right:2.5rem; white-space:nowrap;
  color:#fff;
  font-size:clamp(.9rem,.85rem + .3vw,1.15rem);
  font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase; letter-spacing:.02em;
}
.faixa__trilho i{ font-style:normal; color:rgba(0,0,0,.45); padding-inline:.6rem }
@keyframes correr{ to{ transform:translateX(-50%) } }

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{ padding-block:var(--secao); position:relative }
.secao--alt{ background:var(--fundo-2) }
.secao--grande{ padding-block:var(--secao-g) }

/* ---------- por que a olympia ---------- */
.vantagens{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(4,1fr);
}
.vantagem{
  position:relative;
  padding:2rem 1.6rem 2.1rem;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  box-shadow:var(--sombra-1);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease-suave),
             border-color .35s var(--ease-suave);
}
/* brilho que nasce no topo do card e some — a profundidade */
.vantagem::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  opacity:0; transition:opacity .35s var(--ease-suave);
}
.vantagem::after{
  content:"";
  position:absolute; top:-40%; right:-30%;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle,rgba(225,6,0,.16),transparent 68%);
  opacity:0; transition:opacity .45s var(--ease-suave);
  pointer-events:none;
}
.vantagem:hover{
  transform:translateY(-6px);
  border-color:var(--borda-forte);
  box-shadow:var(--sombra-3);
}
.vantagem:hover::before,
.vantagem:hover::after{ opacity:1 }

.vantagem__icone{
  display:grid; place-items:center;
  width:50px; height:50px;
  margin-bottom:1.35rem;
  border-radius:var(--raio-sm);
  background:linear-gradient(140deg,rgba(225,6,0,.22),rgba(225,6,0,.06));
  border:1px solid rgba(225,6,0,.28);
  color:var(--vermelho);
  transition:transform .35s var(--ease);
}
.vantagem:hover .vantagem__icone{ transform:scale(1.06) rotate(-3deg) }
.vantagem__icone svg{ width:24px; height:24px }
.vantagem h3{ margin-bottom:.6rem }
.vantagem p{ color:var(--texto-2); font-size:.9375rem; line-height:1.65 }

/* ---------- planos ---------- */
/* O miolo do card. A largura dele mora junto com o carrossel,
   mais abaixo; aqui fica só o conteúdo. */
.plano{
  position:relative;
  display:flex; flex-direction:column;
  padding:2.1rem 1.6rem 1.75rem;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  box-shadow:var(--sombra-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease-suave),
             border-color .35s var(--ease-suave), background-color .35s var(--ease-suave);
}
.plano:hover{
  transform:translateY(-5px);
  background:var(--superficie-2);
  border-color:var(--borda-forte);
  box-shadow:var(--sombra-2);
}

/* O recomendado. É um só na fileira inteira — com dois ou três
   "destaques" ninguém sabe mais qual é o destaque. */
.plano--recomendado{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,6,0,.17), transparent 62%),
    var(--superficie-2);
  border-color:rgba(225,6,0,.55);
  box-shadow:var(--sombra-2), 0 0 0 1px rgba(225,6,0,.18),
             0 14px 40px -18px rgba(225,6,0,.5);
}
.plano--recomendado:hover{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,6,0,.22), transparent 62%),
    var(--superficie-2);
  border-color:var(--vermelho);
  box-shadow:var(--sombra-3), 0 0 0 1px rgba(225,6,0,.3),
             0 18px 48px -18px rgba(225,6,0,.58);
}

.plano__selo{
  position:absolute; top:-11px; left:50%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .8rem;
  background:var(--vermelho); color:#fff;
  border-radius:var(--pill);
  box-shadow:var(--sombra-vermelha);
  font-size:.6875rem;
  font-variation-settings:"wdth" 102,"wght" 800;
  letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap;
}

.plano__nome{
  font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 700;
  color:var(--texto-3);
  margin-bottom:.7rem;
}
.plano--recomendado .plano__nome{ color:var(--vermelho) }

/* Para quem o plano serve. Duas linhas reservadas de propósito:
   assim os preços da fileira caem todos na mesma altura e dá
   para comparar passando o olho, que é o objetivo da seção. */
.plano__para{
  font-size:.9375rem; line-height:1.55;
  color:var(--texto);
  min-height:3.1em;
  margin-bottom:1.1rem;
  text-wrap:pretty;
}

/* altura fixa na linha do preco: assim o numero grande e a tarja
   "consulte condicoes" ocupam o mesmo espaco e o periodo de todos
   os cards cai exatamente na mesma linha. */
.preco{
  display:flex; align-items:flex-start; gap:.2rem;
  min-height:3.5rem;
  margin-bottom:.35rem;
}
.preco__moeda{
  font-size:1.0625rem; color:var(--texto-2);
  font-variation-settings:"wdth" 100,"wght" 700;
  margin-top:.55rem;
}
.preco__valor{
  font-size:clamp(2.75rem,2.2rem + 1.6vw,3.5rem);
  letter-spacing:-.04em;
}
.preco__centavos{
  font-size:1.0625rem; color:var(--texto-2);
  font-variation-settings:"wdth" 100,"wght" 700;
  margin-top:.55rem;
}

/* a linha do período fecha o bloco de preço e abre o do conteúdo */
.plano__periodo{
  font-size:.8125rem; color:var(--texto-3);
  padding-bottom:1.2rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--borda);
}
.plano--recomendado .plano__periodo{ border-bottom-color:rgba(225,6,0,.25) }

/* a razão de o mensal ser o recomendado, dita em uma linha */
.plano__nota{
  display:flex; align-items:flex-start; gap:.55rem;
  padding:.7rem .8rem;
  margin-bottom:1.2rem;
  border-radius:var(--raio-sm);
  background:rgba(225,6,0,.1);
  border:1px solid rgba(225,6,0,.28);
  color:var(--texto);
  font-size:.8125rem; line-height:1.45;
}
.plano__nota svg{
  width:16px; height:16px; flex:0 0 auto; margin-top:.1rem;
  color:var(--vermelho-vivo);
}

.plano__itens{ display:grid; gap:.65rem; margin-bottom:1.5rem }
.plano__itens li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.90625rem; line-height:1.55;
  color:var(--texto-2);
}
.plano__itens svg{
  width:17px; height:17px; flex:0 0 auto; margin-top:.2rem;
  color:var(--vermelho);
}
.plano .btn{ margin-top:auto }

.planos__nota{
  margin-top:1.5rem;
  padding-left:.9rem;
  border-left:2px solid var(--borda);
  color:var(--texto-3);
  font-size:.875rem;
}

/* ---------- processo / stepper ---------- */
.jornada{
  position:relative;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(4,1fr);
}
/* a linha que liga os passos */
.jornada::before{
  content:"";
  position:absolute; top:26px; left:calc(12.5% + 26px); right:calc(12.5% + 26px);
  height:2px;
  background:repeating-linear-gradient(90deg,var(--borda-forte) 0 6px,transparent 6px 14px);
}
.passo{ position:relative; display:grid; gap:.6rem; align-content:start }
.passo__bolha{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:52px; height:52px;
  margin-bottom:.9rem;
  border-radius:50%;
  background:var(--superficie);
  border:1px solid var(--borda-forte);
  color:var(--vermelho);
  font-size:.9375rem;
  font-variation-settings:"wdth" 104,"wght" 900;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--fundo);
  transition:transform .35s var(--ease), border-color .35s, background-color .35s;
}
.secao--alt .passo__bolha{ box-shadow:0 0 0 6px var(--fundo-2) }
.passo:hover .passo__bolha{
  transform:scale(1.08);
  border-color:var(--vermelho);
  background:var(--superficie-2);
}
.passo p{ color:var(--texto-2); font-size:.9375rem; line-height:1.6; max-width:30ch }

/* ---------- depoimentos ---------- */
.depoimentos{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(3,1fr);
}
.depoimento{
  display:flex; flex-direction:column;
  padding:1.9rem 1.75rem;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  box-shadow:var(--sombra-1);
}
.depoimento__aspas{
  width:30px; height:30px; margin-bottom:1rem;
  color:var(--vermelho); opacity:.5;
}
.depoimento__notas{
  display:flex; gap:.2rem; margin-bottom:.9rem;
}
.depoimento__notas svg{ width:16px; height:16px; color:var(--vermelho) }
.depoimento blockquote{
  margin:0 0 1.5rem;
  color:var(--texto-2);
  font-size:1rem; line-height:1.7;
  flex:1;
}
.depoimento__pessoa{
  display:flex; align-items:center; gap:.85rem;
  padding-top:1.25rem;
  border-top:1px solid var(--borda);
}
.depoimento__retrato{
  width:44px; height:44px; flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--borda);
  background:var(--superficie-2);
}
.depoimento__retrato .foto{ position:absolute; inset:0 }
.depoimento__retrato{ position:relative }
.depoimento__nome{
  font-size:.9375rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  color:var(--texto);
}
.depoimento__desde{ font-size:.8125rem; color:var(--texto-3) }

/* marca de campo a preencher */
.vago{
  color:var(--texto-3);
  font-style:italic;
}
/* ---------- faq ---------- */
.faq-grid{
  display:grid; gap:3rem;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  align-items:start;
}
.faq-lado{ position:sticky; top:7rem; display:grid; gap:1.25rem; justify-items:start }

.pergunta{
  border:1px solid var(--borda);
  border-radius:var(--raio);
  background:var(--superficie);
  margin-bottom:.75rem;
  overflow:hidden;
  transition:border-color .3s var(--ease-suave), background-color .3s var(--ease-suave);
}
.pergunta[open]{ border-color:var(--borda-forte); background:var(--superficie-2) }
.pergunta summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem;
  padding:1.2rem 1.4rem;
  cursor:pointer;
  list-style:none;
  font-size:1rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  transition:color .25s var(--ease-suave);
}
.pergunta summary::-webkit-details-marker{ display:none }
.pergunta summary:hover{ color:var(--vermelho) }
.pergunta__mais{
  position:relative; flex:0 0 auto;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid var(--borda-forte);
  transition:transform .35s var(--ease), border-color .3s, background-color .3s;
}
.pergunta__mais::before,
.pergunta__mais::after{
  content:""; position:absolute; top:50%; left:50%;
  width:9px; height:1.5px; border-radius:2px;
  background:var(--vermelho);
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease-suave);
}
.pergunta__mais::after{ transform:translate(-50%,-50%) rotate(90deg) }
.pergunta[open] .pergunta__mais{ transform:rotate(180deg); border-color:var(--vermelho) }
.pergunta[open] .pergunta__mais::after{ opacity:0 }
.pergunta__corpo{ overflow:hidden }
.pergunta__corpo p{
  padding:0 1.4rem 1.35rem;
  color:var(--texto-2);
  font-size:.9375rem; line-height:1.7;
  max-width:62ch;
}

/* ---------- fechamento ---------- */
.fechamento{
  position:relative;
  padding-block:var(--secao-g);
  isolation:isolate;
  overflow:hidden;
  text-align:center;
}
.fechamento .foto{ position:absolute; inset:0; z-index:-2 }
.fechamento::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(225,6,0,.3), transparent 62%),
    linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,.72) 45%, rgba(0,0,0,.94));
}
.fechamento__inner{ display:grid; justify-items:center; gap:1.5rem }
.fechamento .display{ max-width:16ch }
.fechamento .lede{ text-align:center }
.fechamento__nota{ color:var(--texto-3); font-size:.875rem }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape{
  background:#050506;
  border-top:1px solid var(--borda);
  padding-top:clamp(3.5rem,2.5rem + 3vw,5rem);
}
.rodape__inner{
  display:grid; gap:3rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  padding-bottom:3rem;
}
.rodape__marca{ display:grid; gap:1.25rem; justify-items:start }
.rodape__marca img{ width:auto; height:78px }
.rodape__marca p{ color:var(--texto-2); max-width:34ch }
.rodape__redes{ display:flex; gap:.6rem }
.rodape__redes a{
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid var(--borda);
  color:var(--texto-2);
  transition:color .25s,border-color .25s,background-color .25s,transform .25s var(--ease);
}
.rodape__redes a:hover{
  color:#fff; border-color:var(--vermelho);
  background:rgba(225,6,0,.16); transform:translateY(-2px);
}
.rodape__redes svg{ width:19px; height:19px }

.rodape__dados{
  display:grid; gap:1.75rem 2rem;
  grid-template-columns:repeat(2,1fr);
  align-content:start;
}
.rodape__dados dt{
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.45rem;
  color:var(--vermelho);
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 800;
}
.rodape__dados dt svg{ width:15px; height:15px }
.rodape__dados dd{ color:var(--texto-2); font-size:.9375rem; line-height:1.6 }
/* O texto tem 17px de altura — alvo curto demais para o dedo. O
   respiro entra por dentro e a margem negativa devolve, entao o
   alvo passa a 37px sem mexer no desenho do rodape. */
.rodape__dados dd a{
  display:inline-block;
  padding:.6rem .25rem;
  margin:-.6rem -.25rem;
  border-bottom:1px solid var(--borda);
  transition:border-color .25s,color .25s;
}
.rodape__dados dd a:hover{ color:var(--texto); border-color:var(--vermelho) }

.rodape__barra{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content:space-between;
  padding-block:1.5rem;
  border-top:1px solid var(--borda);
  color:var(--texto-3);
  font-size:.8125rem;
}

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.zap{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.3rem;
  background:var(--vermelho); color:#fff;
  border-radius:10px;
  box-shadow:var(--sombra-vermelha), var(--sombra-2);
  font-size:.875rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  transition:background-color .25s, transform .3s var(--ease), opacity .3s, visibility .3s;
}
.zap:hover{ background:var(--vermelho-vivo); transform:translateY(-3px) }
.zap:active{ transform:translateY(-1px) scale(.97) }
.zap svg{ width:22px; height:22px; fill:currentColor; flex:0 0 auto }

/* Entrada discreta, uma vez só, quando a página termina de montar.
   Quem pediu menos movimento não vê nada disso. */
@keyframes zap-entra{
  from{ opacity:0; transform:translateY(14px) scale(.94) }
  to  { opacity:1; transform:none }
}
@media (prefers-reduced-motion: no-preference){
  .zap{ animation:zap-entra .5s var(--ease) .6s backwards }
}
.zap.recolhido{
  opacity:0; visibility:hidden;
  transform:translateY(120%);
  transition:transform .35s var(--ease), opacity .3s, visibility 0s .35s;
}

/* ============================================================
   ENTRADA DOS BLOCOS — discreta, uma vez só
   ============================================================ */
.surge{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease-suave), transform .7s var(--ease);
}
.surge.visivel{ opacity:1; transform:none }
.surge:nth-child(2){ transition-delay:.07s }
.surge:nth-child(3){ transition-delay:.14s }
.surge:nth-child(4){ transition-delay:.21s }
.surge:nth-child(5){ transition-delay:.28s }
.surge:nth-child(6){ transition-delay:.35s }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1100px){
  .vantagens{ grid-template-columns:repeat(2,1fr) }
  .jornada{ grid-template-columns:repeat(2,1fr); gap:2rem 1.25rem }
  .jornada::before{ display:none }
  .depoimentos{ grid-template-columns:1fr }
  .faq-grid{ grid-template-columns:1fr; gap:2.25rem }
  .faq-lado{ position:static }
}

@media (max-width:900px){
  :root{ --shell:min(1200px, 100% - 2.5rem) }
  .menu{ display:none }
  .hamburguer{ display:grid }
  .cabecalho__acoes .btn--principal{ display:none }
  .rodape__inner{ grid-template-columns:1fr; gap:2.5rem }
}

@media (max-width:640px){
  :root{
    --shell:min(1200px, 100% - 2rem);
    --secao:clamp(3.5rem,2.5rem + 6vw,5rem);
    --secao-g:clamp(4.5rem,3rem + 8vw,6.5rem);
  }
  body{ font-size:.9375rem }

  .hero{ min-height:auto; padding:7rem 0 3rem }
  .hero__titulo{ max-width:none }
  .hero__lede{ max-width:none }
  .hero__acoes{ flex-direction:column; align-items:stretch; gap:.7rem }
  .hero__acoes .btn{ width:100% }
  .confianca{ gap:.9rem 1.5rem }
  .confianca li{ flex:1 1 40% }

  .vantagens{ grid-template-columns:1fr }
  .jornada{ grid-template-columns:1fr; gap:1.5rem }
  .passo__bolha{ width:44px; height:44px; margin-bottom:.5rem }

  .rodape__dados{ grid-template-columns:1fr }
  .rodape__barra{ justify-content:flex-start }
  /* alvo de toque confortável: 52px de lado, acima dos 44 do mínimo */
  .zap{ right:1rem; bottom:1rem; padding:.9375rem }
  .zap span{ display:none }
  .faixa{ margin-block:-1.25rem }
}

/* telas bem estreitas — 320px ainda respira */
@media (max-width:380px){
  :root{ --shell:min(1200px, 100% - 1.5rem) }
  .marca img{ height:44px }
  .cabecalho.grudou .marca img{ height:40px }
  .btn{ --px:1.25rem; font-size:.875rem }
  .plano{ padding:1.6rem 1.25rem }
  .vantagem{ padding:1.6rem 1.25rem 1.75rem }
  .confianca li{ flex:1 1 100% }
  .gaveta a{ font-size:1.15rem }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .surge{ opacity:1; transform:none }
  .faixa__trilho{ animation:none }
}

@media print{
  .cabecalho,.zap,.faixa,.gaveta{ display:none }
  body{ background:#fff; color:#000 }
  .foto{ display:none }
}

/* o atributo hidden precisa vencer o display das regras acima */
[hidden]{ display:none !important }

/* ============================================================
   AJUSTES FINOS DE CELULAR
   ============================================================ */
@media (max-width:640px){
  /* a barra de confiança vira duas colunas de verdade, com o
     ícone preso ao texto em vez de se soltar na quebra */
  .confianca{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.1rem .9rem;
  }
  .confianca li{ align-items:flex-start }
  .confianca svg{ width:17px; height:17px; margin-top:.15rem }
  .confianca b{ font-size:.9375rem; line-height:1.25 }
  .confianca span{ font-size:.75rem }
}

@media (max-width:380px){
  /* cada linha do título cabe inteira, sem virar seis linhas */
  .display{ font-size:2.15rem }
  .confianca{ grid-template-columns:1fr }
  .hero{ padding-top:6rem }
}

/* As três linhas do hambúrguer são linhas de grid: sem align-content
   elas esticam para preencher o botão e ficam longe demais entre si,
   e aí o X de fechar não fecha. Compactadas, o giro encontra o centro. */
.hamburguer{ align-content:center }

/* ============================================================
   A LOGO EM PARTÍCULAS — na primeira dobra, ao lado do texto
   ============================================================ */
.hero{ align-items:center }
.hero__inner{
  display:grid;
  align-items:center;
  gap:clamp(2rem,1rem + 4vw,4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}

.orb{
  position:relative;
  aspect-ratio:1;
  /* 76%, não 100%: a área de desenho é 132% da logo (ver .orb__canvas),
     então este é o maior tamanho que ainda cabe sem invadir o texto */
  width:min(76%,400px);
  justify-self:center;
  display:grid;
  place-items:center;
  isolation:isolate;
}

/* a brasa atrás separa a logo da foto do fundo */
.orb__brasa{
  position:absolute; inset:6%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,43,32,.5) 0%,
    rgba(225,6,0,.3) 30%,
    rgba(0,0,0,.72) 58%,
    transparent 74%);
  filter:blur(16px);
  animation:brasa-orb 5.5s ease-in-out infinite;
}
@keyframes brasa-orb{
  0%,100%{ opacity:.78; transform:scale(.97) }
  50%    { opacity:1;   transform:scale(1.05) }
}

/* o anel de texto girando */
.orb__anel{
  position:absolute; inset:-2%;
  width:104%; height:104%;
  overflow:visible;
  pointer-events:none;
  animation:girar-anel 26s linear infinite;
}
.orb__anel text{
  fill:var(--texto-3);
  font-family:"Archivo",sans-serif;
  font-size:12.5px;
  font-variation-settings:"wdth" 100,"wght" 700;
  text-transform:uppercase;
}
@keyframes girar-anel{ to{ transform:rotate(360deg) } }

/* a área de desenho passa da caixa da logo: a nuvem dispersa precisa
   de folga. A máscara redonda garante que a borda nunca apareça. */
.orb__canvas{
  position:absolute; inset:-16%;
  width:132%; height:132%;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 68%,transparent 94%);
          mask-image:radial-gradient(circle at 50% 50%,#000 68%,transparent 94%);
}

/* a logo parada: é o que aparece sem JS, com movimento reduzido,
   ou quando o navegador não deixa ler os pixels */
.orb__still{
  width:78%; height:auto;
  filter:drop-shadow(0 18px 40px rgba(225,6,0,.34));
}
.orb.is-live .orb__still{ display:none }

@media (max-width:900px){
  .hero__inner{
    grid-template-columns:1fr;
    justify-items:center;
    gap:2.25rem;
  }
  .hero__copy{ order:2; width:100% }
  .orb{ order:1; width:min(100%,300px) }
}

@media (max-width:640px){
  .orb{ width:min(66%,220px) }
  .orb__anel text{ font-size:13.5px }
}

@media (max-width:380px){
  .orb{ width:min(62%,190px) }
}

/* ============================================================
   LINHAS DO FUNDO DA PRIMEIRA DOBRA

   Ficam ACIMA do véu escuro de propósito: embaixo dele o preto
   as engole e não se vê nada. O conteúdo sobe por cima delas.
   ============================================================ */
.hero__linhas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:1 }

/* ============================================================
   TÍTULO DO HERO — três linhas limpas

   Cada frase ocupa a sua linha inteira. Sem isso "SEU OBJETIVO."
   partia no meio e o bloco virava seis linhas, estourando a altura
   da primeira tela.
   ============================================================ */
.hero__titulo{ max-width:none }
.hero__titulo > span{ display:block }

/* o nowrap vale só onde eu controlo a largura da coluna: abaixo disso
   ele estoura a tela em vez de arrumar a quebra */
@media (min-width:901px){
  .hero__titulo > span{ white-space:nowrap }
}

@media (min-width:901px){
  /* "A sua melhor versão" mede 10,95px de largura para cada 1px de
     corpo — mais que as frases anteriores, porque "versão" tem letras
     largas. O teto de 3.3rem é o maior corpo em que ela ainda cabe
     inteira na coluna de 596px, com wdth 88. */
  .hero__titulo{ font-size:clamp(2.2rem, -0.35rem + 4.6vw, 3.3rem) }
}

/* ============================================================
   A LOGO EMPARELHADA COM O TÍTULO

   O topo da logo começa na mesma linha do título, e não no meio
   do bloco de texto. O recuo pula exatamente o selo que fica
   acima do título — por isso o valor acompanha a altura dele.
   ============================================================ */
@media (min-width:901px){
  .orb{
    align-self:start;
    margin-top:calc(2.1875rem + 1.5rem);   /* altura do selo + o respiro dele */
  }
}

/* ============================================================
   CELULAR — o botão principal precisa caber na primeira tela

   Numa tela de 568 a 667 px de altura (iPhone SE e Androids
   comuns) o CTA caía abaixo da dobra. O espaço veio de quatro
   lugares, sem apertar nenhum deles isoladamente.
   ============================================================ */
@media (max-width:900px){
  .hero{ padding-top:5.5rem }
  .hero__inner{ gap:1.5rem }
  .hero__lede{ margin-bottom:1.5rem }
  .hero__acoes{ margin-bottom:1.75rem }
}

@media (max-width:640px){
  .orb{ width:min(58%,170px) }
  .hero__titulo{ margin-bottom:1.1rem }
  .confianca{ padding-top:1.25rem }
}

@media (max-width:380px){
  .orb{ width:min(54%,150px) }
  .hero{ padding-top:5rem }
}

/* telas baixas e deitadas: a logo encolhe em vez de empurrar o botão */
@media (max-height:600px) and (max-width:900px){
  .orb{ width:min(42%,130px) }
  .hero{ padding-top:4.5rem }
}

/* ============================================================
   TÍTULO NO CELULAR — uma frase por linha, sempre

   Medido: numa coluna de 296 px, "SEU OBJETIVO." só cabe inteiro
   até 30 px. A fórmula abaixo é essa proporção transformada em
   regra, então vale de 320 a 900 px sem precisar de exceção.
   Sem nowrap aqui de propósito: se algum caso escapar, ele quebra
   a linha em vez de estourar a tela.
   ============================================================ */
@media (max-width:900px){
  /* Uma frase por linha, também no celular. Medido: com wdth 88 a
     frase mais longa ocupa 10,95px de largura para cada 1px de corpo,
     então ela cabe inteira enquanto o corpo ficar abaixo de um décimo
     da coluna. A fórmula abaixo é essa conta com 3% de folga, e vale
     de 320 a 900px sem exceção.

     Isso não é capricho tipográfico: com o título em quatro linhas, o
     botão caía 127px abaixo da dobra num iPhone SE.

     O balance fica de rede de segurança — se alguma tela escapar da
     conta, a frase se reparte ao meio em vez de deixar uma palavra
     órfã na segunda linha. */
  .hero__titulo{ font-size:min(calc(8.1vw - 0.5px), 2.8rem) }
  .hero__titulo > span{ text-wrap:balance }
}

/* ============================================================
   A PRIMEIRA DOBRA NO CELULAR — o botão não pode sumir

   O selo de preço acrescenta 83px à dobra. Num iPhone SE (320x568)
   isso é a diferença entre ver o botão ou não: sem estes ajustes o
   "Quero começar agora" caía 109px abaixo da linha da tela.

   O espaço vem de várias peças cedendo um pouco, em vez de uma só
   sendo espremida.
   ============================================================ */
@media (max-width:640px){
  .hero__preco{
    gap:.6rem;
    padding:.45rem .9rem .45rem .85rem;
    margin-bottom:1.25rem;
  }
  .hero__preco__rotulo{ font-size:.6875rem; letter-spacing:.08em }
  .hero__preco__valor{ font-size:1.6rem }
  .hero__preco__valor i{ font-size:.875rem }
  .hero__lede{ margin-bottom:1rem }
}

/* telas curtas de verdade — SE e Androids de 568 a 700px de altura */
@media (max-width:640px) and (max-height:700px){
  .hero{ padding-top:3.75rem }
  .hero__inner{ gap:.9rem }
  .orb{ width:min(32%,96px) }
  .hero__titulo{ margin-bottom:.6rem }
  .hero__lede{ margin-bottom:.75rem }
  .hero__preco{ margin-bottom:.8rem }
  /* 53px de altura: continua bem acima dos 44 de alvo de toque */
  .hero__acoes .btn{ --py:1rem; font-size:1rem }
  .hero__acoes{ gap:.6rem }
}

/* ============================================================
   TELAS BAIXAS — notebook de 768 px de altura é comum

   Num 1366×768 o hero media 870 px e a barra de confiança ficava
   cortada. O espaço sai do respiro e do tamanho do título, que
   nessas telas pode ser um pouco menor sem perder o impacto.
   ============================================================ */
@media (min-width:901px) and (max-height:820px){
  .hero{ padding-top:7rem; padding-bottom:2.5rem }
  .hero__titulo{ font-size:clamp(2rem, .6rem + 3vw, 3.2rem) }
  .hero__lede{ margin-bottom:1.75rem }
  .hero__acoes{ margin-bottom:1.75rem }
  .confianca{ padding-top:1.25rem }
  .orb{ width:min(70%,330px) }
}

/* tablet em pé: mesma ideia, em dose menor */
@media (min-width:641px) and (max-width:900px){
  .orb{ width:min(50%,210px) }
  .hero__acoes{ margin-bottom:1.5rem }
}

/* ============================================================
   PLANOS — a fileira que desliza

   São sete planos. Numa grade eles viram 4+3 e sobram órfãos na
   segunda linha; empilhados viram uma lista comprida. Então é
   uma fileira única: quatro cards visíveis no desktop, dois no
   tablet, um e um pedaço no celular — com setas, teclado, arrasto
   e barra de progresso. Todos na mesma linha e na mesma altura,
   que é o que faz comparar preço ser fácil.
   ============================================================ */
.carrossel{ min-width:0 }

.carrossel__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1rem;
}
.carrossel__dica{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--texto-3);
  font-size:.8125rem;
}
.carrossel__dica svg{ width:16px; height:16px }

.carrossel__setas{ display:flex; gap:.5rem; flex:0 0 auto }
.seta{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--borda);
  border-radius:50%;
  background:var(--superficie);
  color:var(--texto);
  cursor:pointer;
  transition:background-color .25s,border-color .25s,transform .2s var(--ease),opacity .25s;
}
.seta svg{ width:19px; height:19px }
.seta:hover:not(:disabled){ background:var(--superficie-2); border-color:var(--borda-forte) }
.seta:active:not(:disabled){ transform:scale(.93) }
.seta:disabled{ opacity:.3; cursor:default }

/* o trilho que desliza */
.carrossel__trilho{
  --porvista:4;
  --folga:1.1rem;
  display:flex;
  align-items:flex-start;   /* cada card termina no seu conteúdo */
  gap:var(--folga);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* o respiro de cima precisa caber o selo do plano recomendado,
     que sobe 11px acima da borda do card. Com overflow-x:auto o
     navegador não deixa o eixo Y transbordar, então o que passar
     daqui é cortado. A margem negativa devolve o espaço. */
  padding:1.1rem .25rem 1.25rem;
  margin:-1.1rem -.25rem 0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carrossel__trilho::-webkit-scrollbar{ display:none }
.carrossel__trilho:focus-visible{ outline:3px solid var(--vermelho-vivo); outline-offset:4px; border-radius:var(--raio) }

.carrossel__trilho > .plano{
  flex:0 0 280px;   /* reserva, caso o calc abaixo não seja entendido */
  min-height:25rem; /* piso comum: alinha a base dos cinco mais curtos sem
                       inflar os dois longos ate deixar 250px de vazio */
  flex-basis:calc((100% - (var(--porvista) - 1) * var(--folga)) / var(--porvista));
  scroll-snap-align:start;
  /* o piso acima e em rem de proposito: min-height:100% dentro de um
     flex se realimenta e infla a altura de todos os cards. */
}

/* barra de progresso do carrossel */
.carrossel__barra{
  height:3px; border-radius:2px;
  margin-top:.25rem;
  background:var(--borda);
  overflow:hidden;
}
.carrossel__progresso{
  display:block; height:100%; width:30%;
  border-radius:2px;
  background:var(--vermelho);
  transition:width .2s linear, transform .2s linear;
}

/* ---------- preço ainda a definir ---------- */
/* ---------- bloco Olympia+ dentro do card ---------- */
.mais{
  margin:0 0 1.3rem;
  padding:.1rem 0 .1rem .9rem;
  border-left:2px solid var(--vermelho);
}
.mais__marca{
  font-size:.875rem;
  font-variation-settings:"wdth" 112,"wght" 900;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--texto);
  margin-bottom:.5rem;
}
.mais__marca span{ color:var(--vermelho) }
.mais__itens{ display:grid; gap:.4rem }
.mais__itens li{
  position:relative;
  padding-left:1.1rem;
  font-size:.875rem; line-height:1.5;
  color:var(--texto-2);
}
.mais__itens li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%;
  background:var(--vermelho);
}

/* ---------- faixa do programa ---------- */
.mais-faixa{
  display:grid;
  gap:1.25rem 2rem;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:center;
  margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);
  padding:1.6rem 1.85rem;
  border-radius:var(--raio);
  background:linear-gradient(120deg, rgba(225,6,0,.12), rgba(225,6,0,.03));
  border:1px solid rgba(225,6,0,.25);
}
.mais-faixa__marca{ display:grid; gap:.2rem }
.mais__marca--grande{ font-size:1.5rem; margin-bottom:0 }
.mais-faixa__marca p:last-child{
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--texto-3);
  font-variation-settings:"wdth" 100,"wght" 700;
}
.mais-faixa__texto{
  color:var(--texto-2);
  font-size:.9375rem; line-height:1.7;
  max-width:70ch;
}

/* ============================================================
   ACOMPANHAMENTO HÍBRIDO

   Não é o oitavo plano: é outro tipo de oferta. Por isso ocupa a
   largura inteira, abaixo da fileira — texto e benefícios à
   esquerda, o painel de contratação à direita.
   ============================================================ */
.acomp{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.6fr) minmax(0,1.25fr) minmax(0,.78fr);
  gap:clamp(1.5rem,1rem + 2vw,2.75rem);
  align-items:center;
  margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);
  padding:clamp(1.75rem,1.2rem + 2vw,2.6rem);
  border-radius:var(--raio);
  background:
    radial-gradient(70% 120% at 100% 0%, rgba(225,6,0,.16), transparent 62%),
    var(--superficie);
  border:1px solid var(--borda-forte);
  box-shadow:var(--sombra-2);
  overflow:hidden;
}
.acomp::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,6,0,.7),transparent);
}
/* a foto ao lado do bloco */
.acomp__pessoa{ position:relative; margin:0; align-self:stretch; min-width:0 }
.acomp__pessoa .foto{
  height:100%;
  min-height:300px;
  border-radius:var(--raio-sm);
  border:1px solid var(--borda);
}
.acomp__pessoa figcaption{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:2.5rem .9rem .8rem;
  /* o degradê é o que mantém o nome legível por cima de qualquer
     parte da foto, sem precisar de uma tarja sólida */
  background:linear-gradient(to top, rgba(0,0,0,.85) 30%, transparent);
  border-radius:0 0 var(--raio-sm) var(--raio-sm);
  color:#fff;
  font-size:.875rem;
  font-variation-settings:"wdth" 104,"wght" 800;
  letter-spacing:.01em;
}

.acomp__selo{
  display:inline-block;
  padding:.3rem .8rem; margin-bottom:1rem;
  background:var(--vermelho); color:#fff;
  border-radius:var(--pill);
  box-shadow:var(--sombra-vermelha);
  font-size:.6875rem;
  font-variation-settings:"wdth" 102,"wght" 800;
  letter-spacing:.07em; text-transform:uppercase;
}
.acomp__titulo{
  font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);
  font-variation-settings:"wdth" 110,"wght" 900;
  text-transform:uppercase;
  line-height:1.05;
  letter-spacing:-.02em;
  margin-bottom:.7rem;
}
.acomp__lede{
  color:var(--texto-2);
  font-size:.9375rem; line-height:1.65;
  margin-bottom:1.5rem;
  max-width:56ch;
}

/* duas colunas, quatro itens: a grade fecha certinha e o painel não
   fica alto demais ao lado da foto */
.acomp__itens{
  display:grid; gap:1rem 1.5rem;
  grid-template-columns:1fr 1fr;
}
.acomp__itens li{ display:flex; align-items:flex-start; gap:.85rem }
.acomp__itens svg{
  width:22px; height:22px; flex:0 0 auto; margin-top:.1rem;
  color:var(--vermelho);
}
.acomp__itens b{
  display:block;
  font-size:.9375rem; line-height:1.3;
  font-variation-settings:"wdth" 104,"wght" 800;
  color:var(--texto);
}
.acomp__itens span{ font-size:.875rem; color:var(--texto-2); line-height:1.5 }

/* o painel de contratação */
.acomp__oferta{
  display:grid; gap:1rem;
  padding:1.5rem 1.35rem;
  border-radius:var(--raio-sm);
  background:var(--fundo-2);
  border:1px solid var(--borda);
  text-align:center;
}
.acomp__rotulo{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--texto-3);
  font-variation-settings:"wdth" 100,"wght" 700;
}
.acomp__preco{ justify-content:center; margin:0; min-height:0 }

/* ============================================================
   "AINDA NÃO SABE QUAL ESCOLHER?" — a saída para quem travou
   ============================================================ */
.ajuda{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.25rem 2rem;
  margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);
  padding:clamp(1.4rem,1rem + 1.4vw,1.9rem) clamp(1.35rem,1rem + 2vw,2.4rem);
  border-radius:var(--raio);
  background:var(--superficie);
  border:1px solid var(--borda);
}
.ajuda__titulo{
  font-size:1.125rem;
  font-variation-settings:"wdth" 106,"wght" 800;
  margin-bottom:.3rem;
}
.ajuda__texto p{
  color:var(--texto-2);
  font-size:.9375rem; line-height:1.6;
  max-width:52ch;
}
.ajuda__btn{ flex:0 0 auto }

/* ============================================================
   PLANOS — responsivo
   ============================================================ */
@media (max-width:1180px){
  .carrossel__trilho{ --porvista:3 }
}

@media (max-width:980px){
  /* a foto sai da lateral e vira retrato: em largura cheia ela
     ficaria com 500px de altura e engoliria o bloco */
  .acomp{ grid-template-columns:1fr; align-items:start }
  .acomp__itens{ grid-template-columns:1fr }
  /* No empilhado ela vai para o meio da coluna. A largura precisa ser
     explicita: com max-width + margem automatica o figure vira
     shrink-to-fit, e como a foto la dentro e absoluta ele nao tem
     largura propria nenhuma — colapsava para 1px e sumia. */
  .acomp__pessoa{ width:min(220px, 100%); margin-inline:auto }
  .acomp__pessoa .foto{ aspect-ratio:3/4; height:auto; min-height:0 }
}

@media (max-width:900px){
  .carrossel__trilho{ --porvista:2.3 }
}

@media (max-width:760px){
  .carrossel__trilho{ --porvista:1.55 }
  /* Um card por vez. Aqui os cards tem a mesma altura de proposito:
     com a base solta, o trilho ficava do tamanho do card mais alto e
     sobrava um buraco de 190px embaixo do card curto da vez. Esticando,
     esse espaco vira respiro dentro do card, acima do botao. */
  .carrossel__trilho{ align-items:stretch }
  .carrossel__trilho > .plano{ min-height:0 }
  .carrossel__dica{ font-size:.75rem }
  .mais-faixa{ grid-template-columns:1fr; padding:1.4rem 1.35rem }
  .ajuda{ flex-direction:column; align-items:flex-start }
  .ajuda__btn{ width:100% }
}

@media (max-width:560px){
  .carrossel__trilho{ --porvista:1.12 }
  .plano{ padding:2rem 1.4rem 1.6rem }
  .plano__para{ font-size:1rem }
}

/* A dica some? Nao. Ela ficava por tras das setas com o texto longo
   antigo; com "Arraste para comparar" cabe ao lado delas ate 320px.
   Esconder era tirar do visitante a unica frase que diz que a fileira
   anda — o resto e pedaco de card e barrinha, que nem todo mundo le. */
@media (max-width:420px){
  .carrossel__dica{ font-size:.7rem; letter-spacing:-.01em }
  .carrossel__dica svg{ width:14px; height:14px }
  .carrossel__topo{ gap:.6rem }
}

/* "ACOMPANHAMENTO" é uma palavra só, e em 24px ela mede 287px. A
   coluna do painel tem 240px numa tela de 320, então ela passava da
   borda e era cortada pelo overflow:hidden. Abaixo de 380px o titulo
   cede o suficiente para a palavra caber inteira. */
@media (max-width:380px){
  .acomp__titulo{ font-size:1.2rem }
}

@media (max-width:380px){
  .carrossel__trilho{ --porvista:1.06 }
}
/* ============================================================
   A ESTEIRA DE FOTOS

   Uma fita de fotos que atravessa a tela de ponta a ponta, anda
   sozinha e pode ser arrastada com o dedo ou com o mouse. As
   pontas somem num degradê em vez de terminarem numa reta.

   Quem move a fita é o JavaScript, não o CSS: arrastar e andar
   sozinho disputam a mesma propriedade, e com uma animação de
   CSS no meio o arrasto brigaria com ela a cada quadro.
   ============================================================ */
.esteira{
  position:relative;
  /* sai da coluna de 1200px e vai até as bordas da tela */
  width:100vw;
  max-width:100vw;
  margin-inline:calc(50% - 50vw);
  padding-block:.5rem;
  overflow:hidden;
  cursor:grab;
  /* o dedo rola a página na vertical; a horizontal é nossa */
  touch-action:pan-y;
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.esteira.arrastando{ cursor:grabbing }

.esteira__fita{
  display:flex;
  gap:1rem;
  width:max-content;
  margin:0; padding:0 .5rem;
  list-style:none;
  will-change:transform;
  user-select:none;
}

.esteira__foto{
  position:relative;
  flex:0 0 220px;
  border-radius:14px;
  border:1px solid var(--borda);
  background:var(--superficie);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.esteira__foto .foto{ aspect-ratio:3 / 4 }
.esteira__foto img{ pointer-events:none }   /* o arrasto não vira drag de imagem */

.esteira:not(.arrastando) .esteira__foto:hover{
  transform:translateY(-6px);
  border-color:var(--borda-forte);
}

.esteira__legenda{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:2.2rem .9rem .8rem;
  /* o degradê é o que segura a legenda legível sobre qualquer
     parte da foto, sem precisar de tarja sólida */
  background:linear-gradient(to top, rgba(0,0,0,.88) 28%, transparent);
  color:#fff;
  font-size:.75rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  text-transform:uppercase; letter-spacing:.04em;
  overflow-wrap:anywhere;
}

@media (max-width:640px){
  .esteira__foto{ flex:0 0 170px; border-radius:12px }
  .esteira__fita{ gap:.75rem }
}

/* Quem pediu menos movimento não vê a fita andar sozinha — mas
   continua podendo arrastar, então nada fica fora de alcance. */
@media (prefers-reduced-motion: reduce){
  .esteira__foto{ transition:none }
  .esteira:not(.arrastando) .esteira__foto:hover{ transform:none }
}

/* ============================================================
   A PALAVRA SELECIONADA E O CURSOR

   Os dois contam a mesma história: a página é um canvas de
   ferramenta de design, e a pessoa está dentro dele. Uma palavra
   do título aparece selecionada, com moldura e ponteiro no canto,
   e a seta do sistema dá lugar a um cursor com o nome de quem
   está ali.
   ============================================================ */

/* ---------- a palavra dentro da moldura ---------- */
/* Sem padding de proposito: a moldura e o ponteiro sao absolutos e
   crescem para fora em em, entao a selecao nao empurra uma linha
   sequer do titulo — e o titulo tem medida contada ate 320px. */
.selecao{
  position:relative;
  display:inline-block;
}

/* O degradê corre por dentro das letras. A cor sólida fica como
   reserva: se o recorte no texto não for entendido, o título
   continua vermelho em vez de sumir. */
.selecao__texto{
  color:var(--vermelho);
  background:linear-gradient(100deg,
              var(--vermelho) 0%,
              #ff7a70 28%,
              var(--vermelho-vivo) 52%,
              var(--vermelho) 100%) 0 0 / 300% 100%;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .selecao__texto{
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
@media (prefers-reduced-motion: no-preference){
  .selecao__texto{ animation:selecao-brilho 6s linear infinite }
}
@keyframes selecao-brilho{
  to{ background-position:200% 50% }
}

.selecao__moldura{
  position:absolute; inset:-.1em -.22em; z-index:1;
  border:2px solid var(--vermelho);
  pointer-events:none;
}

/* o ponteiro mora no canto de baixo à direita da moldura, como o
   de quem acabou de clicar no elemento */
.selecao__ponteiro{
  position:absolute; right:-.22em; bottom:-.1em; z-index:2;
  display:block;
  transform:translate(58%, 64%);
  color:var(--vermelho);
  pointer-events:none;
}
.selecao__ponteiro svg{
  display:block;
  fill:currentColor;
  stroke:rgba(0,0,0,.3); stroke-width:.6; stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* ---------- o cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:300;
  pointer-events:none;
  user-select:none;
  opacity:0;
  transition:opacity .14s linear;
}
.cursor[hidden]{ display:none }
.cursor.visivel{ opacity:1 }

.cursor__seta{
  position:absolute; top:0; left:0;
  fill:var(--vermelho-vivo);
  stroke:rgba(0,0,0,.25); stroke-width:.6; stroke-linejoin:round;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.5));
  will-change:transform;
}
.cursor__nome{
  position:absolute; top:0; left:0;
  padding:.35rem .7rem;
  border-radius:8px;
  background:var(--vermelho);
  color:#fff;
  font-size:.8125rem;
  font-variation-settings:"wdth" 102,"wght" 700;
  line-height:1.1;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transform-origin:0% 50%;
  will-change:transform;
}

/* A seta do sistema só sai de cena depois que a nossa está no ar:
   é o JS que põe esta classe. Sem ela, nada muda. */
html.cursor-proprio,
html.cursor-proprio *{ cursor:none }

/* ============================================================
   A FILEIRA DE ALUNOS NA PRIMEIRA DOBRA

   Cinco retratos sobrepostos ao lado do botao, como prova de
   quem treina ali. Nao ha texto de quantidade: numero de aluno
   so entra aqui quando a academia informar um.
   ============================================================ */
.alunos{
  display:flex;
  align-self:center;
  /* a primeira foto recua 6px como todas; isto devolve o recuo
     para a fileira comecar alinhada com o botao ao lado */
  padding-left:6px;
}
.alunos__foto{
  position:relative; z-index:1;
  width:30px; height:30px;
  margin-left:-6px;
  border-radius:9px;
  border:2px solid rgba(255,255,255,.55);
  background:var(--superficie-2);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.alunos__foto img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.alunos__foto:hover{
  transform:translateY(-7px) scale(1.08);
  z-index:20;
}

@media (max-width:900px){
  /* no celular os botoes empilham esticados; a fileira nao estica */
  .alunos{ align-self:flex-start }
}

/* Numa tela curta a fileira custaria os 40px que faltam para o botao
   caber acima da dobra. Entre a prova social e o botao, o botao. */
@media (max-width:640px) and (max-height:700px){
  .alunos{ display:none }
}

/* a secao corta o que a fita de largura total passa das bordas:
   clip em vez de hidden para nao criar um container de rolagem */
#academia{ overflow-x:clip }

/* ============================================================
   HORÁRIOS E LOCALIZAÇÃO

   Dois painéis lado a lado: a semana de um lado, o mapa do outro.
   É a seção que responde "posso ir agora?" e "fica onde?" sem
   obrigar ninguém a abrir o WhatsApp para perguntar.
   ============================================================ */
.onde{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.25rem,.75rem + 2vw,2rem);
  align-items:start;
}
.onde__painel{
  display:grid; gap:1.25rem; align-content:start;
  padding:clamp(1.25rem,.9rem + 1.4vw,2rem);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  background:var(--superficie);
}
.onde__painel .subtitulo{ margin:0 }

/* ---------- a semana ---------- */
.grade{ display:grid; list-style:none; margin:0; padding:0 }
.grade__linha{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--borda);
  font-size:.9375rem;
  color:var(--texto-2);
}
.grade__linha:last-child{ border-bottom:0 }
.grade__linha span:last-child{
  font-variation-settings:"wdth" 100,"wght" 700;
  color:var(--texto);
  white-space:nowrap;
}
.grade__linha--fechado span:last-child{
  color:var(--texto-3);
  font-variation-settings:"wdth" 100,"wght" 600;
}

/* Hoje — a linha que a pessoa veio procurar. O fundo sangra até a
   borda do painel pela margem negativa, e o "· hoje" escrito garante
   que quem não distingue a cor continue achando a linha certa. */
.grade__linha--hoje{
  margin-inline:-.75rem;
  padding-inline:.75rem;
  border-radius:10px;
  border-bottom-color:transparent;
  background:linear-gradient(90deg, rgba(225,6,0,.16), rgba(225,6,0,.02));
  color:var(--texto);
}
.grade__linha--hoje span:first-child{ font-variation-settings:"wdth" 100,"wght" 700 }
.grade__linha--hoje span:first-child::after{
  content:" · hoje";
  color:var(--vermelho-brilho);
  font-variation-settings:"wdth" 100,"wght" 600;
}
/* no claro o vermelho-brilho fica em 3,7 sobre o branco do painel —
   abaixo do mínimo para texto pequeno. O vermelho fechado dá 6,0. */
:root[data-theme="light"] .grade__linha--hoje span:first-child::after{
  color:var(--vermelho);
}

/* ---------- aberto ou fechado agora ---------- */
.status{
  display:inline-flex; align-items:center; gap:.6rem;
  justify-self:start;
  margin:0;
  padding:.5rem .95rem;
  border:1px solid var(--borda);
  border-radius:var(--pill);
  font-size:.875rem;
  font-variation-settings:"wdth" 100,"wght" 650;
}
.status[hidden]{ display:none }
.status i{
  position:relative;
  width:9px; height:9px; flex:none;
  border-radius:50%;
  background:currentColor;
}
.status--aberto{
  color:var(--verde);
  background:color-mix(in srgb, var(--verde) 12%, transparent);
  border-color:color-mix(in srgb, var(--verde) 35%, transparent);
}
.status--fechado{ color:var(--texto-3) }

/* O anel que pulsa: cresce e some em transform e opacidade, nunca em
   box-shadow — sombra é repintura a cada quadro e come quadros. */
.status--aberto i::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid currentColor;
  animation:pulso-status 2.4s ease-out infinite;
}
@keyframes pulso-status{
  from{ transform:scale(1); opacity:.7 }
  to  { transform:scale(2.8); opacity:0 }
}
@media (prefers-reduced-motion:reduce){
  .status--aberto i::after{ animation:none; opacity:.45 }
}

/* ---------- o endereço e os botões ---------- */
.onde__endereco{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:0;
  font-size:.9375rem; line-height:1.6;
  color:var(--texto-2);
}
.onde__endereco svg{
  width:18px; height:18px; flex:none;
  margin-top:.2rem;
  color:var(--vermelho-brilho);
}
.onde__acoes{ display:flex; flex-wrap:wrap; gap:.75rem }
.onde__acoes .btn{ flex:1 1 12rem; justify-content:center }

@media (max-width:860px){
  .onde{ grid-template-columns:1fr }
}

/* ============================================================
   O MAPA

   Vive dentro do painel de localização. O src dele é escrito pelo
   JavaScript: sem endereço preenchido, o iframe nunca chega a
   pedir nada.
   ============================================================ */
.mapa{
  border-radius:var(--raio);
  border:1px solid var(--borda);
  overflow:hidden;
  background:var(--superficie-2);
}
.mapa[hidden]{ display:none }
.mapa__quadro{
  display:block;
  width:100%; height:300px;
  border:0;
  /* o mapa do Google chega branco; um cinza leve o encaixa no
     rodapé escuro sem comprometer a leitura das ruas */
  filter:grayscale(.3) contrast(1.05);
}
@media (max-width:760px){
  .mapa__quadro{ height:240px }
}