/* ════════ TOKENS: VERSÃO 2 ════════
   Paleta do cliente, na regra 60-30-10:

     60–65%  fundo dominante ...... creme  #F5F1E8
     25–30%  contraste ............ esmeralda #174F3A / #1D513D
                                    verde profundo #102D24
      5–10%  realce ............... ouro #C7A35A / champanhe #DFC98F

   Texto principal #171914, secundário #686B63.

   Dois grupos, como na versão 1: os que viram no modo escuro e os
   fixos, usados nas faixas que já nascem escuras.

   Duas observações sobre legibilidade, que valem a leitura:

   · O ouro #C7A35A sobre o creme dá 2,1:1 de contraste: bonito em
     fio, ilegível em texto. Por isso ele ficou nos fios, bordas e
     molduras (--latao) e ganhou um irmão mais fundo para quando vira
     texto (--latao-tex). Sobre fundo escuro quem assume é o champanhe,
     que ali rende 9:1.
   · O cinza secundário #686B63 do cliente dá 4,5:1 sobre o creme:
     serve para legenda, fica no limite para parágrafo. Ele ficou em
     --tinta-50 (legendas) e o corpo de texto usa --tinta-70, o mesmo
     cinza mais fundo, a 7,6:1. É o "aumentar o contraste do cinza"
     pedido para a seção da garantia.                                */
:root{
  color-scheme:light;

  /* --- superfície e texto: invertem --- */
  --papel:#F5F1E8;        /* creme: 60–65% da página            */
  --papel-2:#EBE5D6;      /* painéis, um tom abaixo             */
  --tinta:#171914;        /* texto principal                    */
  --tinta-70:#4A4D45;     /* corpo de texto: 7,6:1 no creme    */
  --tinta-50:#686B63;     /* secundário do cliente: legendas   */
  --tinta-35:rgba(23,25,20,.42);
  --fio:rgba(23,25,20,.13);
  --vidro:rgba(245,241,232,.9);    /* topo e barra fixa          */
  --realce:rgba(23,25,20,.03);     /* fundo de linha no hover    */
  --erro:#9B3A1C;         /* só nos estados de erro do formulário */
  --ouro-veu:rgba(199,163,90,.09); /* véu quente da seção 05     */
  --ouro-veu-forte:rgba(199,163,90,.16); /* contido de propósito:*/
                          /* ouro é realce, não superfície       */
  --hachura:rgba(23,25,20,.045);   /* trama dos placeholders     */
  --sombra:rgba(16,45,36,.5);
  --verde-tex:#174F3A;    /* esmeralda como texto: 8,4:1       */
  --disco-1:#FBF9F3;      /* centro do selo da garantia         */
  --disco-2:#E9E2D1;      /* borda do selo                      */
  --latao:#C7A35A;        /* ouro do cliente: fios e bordas     */
  --latao-tex:#7C5E22;    /* o mesmo ouro, mais fundo, em texto:*/
                          /* o véu das faixas escurece o fundo  */
                          /* e o #856628 caía para 4,46:1       */
  --latao-fio:rgba(199,163,90,.45);
  --elo:var(--latao-tex); /* href: o mesmo ouro do texto; era  */
  --elo-fio:rgba(199,163,90,.6);  /* o verde-tex, que sumia no  */
                          /* meio do parágrafo. Só o fio é seu. */
  --orbita-1:rgba(199,163,90,.28); /* borda que orbita o botão   */
  --orbita-2:rgba(223,201,143,.9);

  /* --- fixos: não invertem.  Exceção: --escuro e --verde-oferta
     descem um degrau no tema escuro (não invertem, só escurecem,
     para o bloco do checkout não brigar com a página).       --- */
  --verde:#174F3A;        /* esmeralda: hero e painel           */
  --verde-2:#1D513D;      /* esmeralda irmã, para o hover       */
  --escuro:#102D24;       /* verde profundo: texto sobre o ouro */
  --verde-oferta:#16402F; /* o mesmo verde um degrau acima; o  */
                          /* bloco do checkout precisa saltar   */
  --claro:#F5F1E8;        /* texto sobre faixa escura           */
  --claro-70:rgba(245,241,232,.7);   /* o mesmo, como secundário */
  --dourado:#DFC98F;      /* champanhe: CTA de compra           */
  --dourado-2:#EBDAA9;    /* hover do botão champanhe           */
  --dourado-fio:rgba(223,201,143,.42); /* moldura sobre o verde  */
  --dourado-brilho:rgba(223,201,143,.85); /* halo do CTA        */
  --dourado-veu:rgba(223,201,143,.07);       /* véu da lista 09 */
  --dourado-veu-forte:rgba(223,201,143,.13); /* bloco escuro    */
  --fio-claro:rgba(245,241,232,.18);

  --raio:10px;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}

/* O modo escuro nasce da mesma paleta: o verde profundo do cliente
   desce mais um degrau e vira a superfície da página, o champanhe
   assume o lugar do ouro e a esmeralda clareia para continuar legível. */
[data-tema="escuro"]{
  color-scheme:dark;
  --papel:#0F211A;
  --papel-2:#162C23;
  --tinta:#F0EDE3;
  --tinta-70:#C3C6BC;
  --tinta-50:#9BA096;
  --tinta-35:rgba(240,237,227,.36);
  --fio:rgba(240,237,227,.15);
  --vidro:rgba(15,33,26,.88);
  --realce:rgba(240,237,227,.05);
  --erro:#F0A183;
  --ouro-veu:rgba(223,201,143,.075); --ouro-veu-forte:rgba(223,201,143,.14);
  --hachura:rgba(240,237,227,.05);
  --sombra:rgba(0,0,0,.72);
  --verde-tex:#7FD2A6;
  --latao:#DFC98F;
  --latao-tex:#DFC98F;
  --latao-fio:rgba(223,201,143,.45);
  --elo-fio:rgba(223,201,143,.55);  /* --elo acompanha --latao-tex */
  --orbita-1:rgba(223,201,143,.28);
  --orbita-2:rgba(223,201,143,.9);
  --escuro:#08160F; --verde-oferta:#0E2A20;
  --disco-1:#1D362B;
  --disco-2:#132720;
}

/* transição suave só no instante da troca de tema */
.trocando-tema,.trocando-tema *,.trocando-tema *::before,.trocando-tema *::after{
  transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease !important;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.js body[data-area-curso]{visibility:hidden}
.js.acesso-verificado body[data-area-curso]{visibility:visible}

/* ════════ TIPOGRAFIA ════════ */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.98}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,9.4vw,5.6rem);line-height:.94;letter-spacing:-.025em}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,6.2vw,3.6rem);line-height:1;letter-spacing:-.02em}
h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.06;letter-spacing:-.015em}
em{font-style:italic}
.dek{font-size:clamp(1.02rem,2.4vw,1.2rem);color:var(--tinta-70);max-width:34em}
.mini{font-size:.9rem;color:var(--tinta-50);line-height:1.55}
.marca{
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  color:var(--latao-tex);
}

/* ════════ GRADE ════════ */
.grade{max-width:1160px;margin:0 auto;padding:0 22px}
/* o cabecalho e fixo: sem isto o salto de ancora para atras dele */
section[id]{scroll-margin-top:88px}
.sec{padding:82px 0}
.sec-topo{display:flex;align-items:baseline;gap:16px;margin-bottom:38px}
.regra{height:1px;background:var(--fio);border:0}
.regra-latao{height:1px;background:var(--latao);opacity:.5;border:0}

/* ════════ BOTÕES ════════ */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes orbita{to{--ang:360deg}}

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border:0;border-radius:var(--raio);text-decoration:none;cursor:pointer;
  font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.02em;
  transition:background .3s ease-in-out,color .3s ease-in-out,box-shadow .3s ease-in-out,
              transform .3s cubic-bezier(.22,.8,.3,1);
}
.btn:active{transform:translateY(0) scale(.985)}
.btn-solido{background:var(--verde);color:var(--claro)}
.btn-solido:hover{background:var(--verde-2);transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--orbita-2)}
/* fio de latão percorrendo a borda: único elemento com brilho na página */
.btn-solido::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),
    transparent 0 64%,var(--orbita-1) 76%,var(--orbita-2) 85%,var(--orbita-1) 93%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:orbita 6s linear infinite;
}
.btn-linha{background:none;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--fio)}
.btn-linha:hover{box-shadow:inset 0 0 0 1px var(--tinta);transform:translateY(-2px)}
.btn-seta{transition:transform .25s ease}
.btn:hover .btn-seta{transform:translateX(4px)}
.btn-bloco{display:flex;width:100%}

/* CTA de acao (meio e fim da pagina): caixa alta, um pouco mais de corpo */
.btn-acao{letter-spacing:.07em;font-size:.86rem;padding:18px 30px}
.btn-peq.btn-acao{font-size:.76rem;padding:11px 18px}
/* o CTA de compra é o maior botão da página, de propósito. Compõe com
   .btn-acao pelo mesmo motivo que o .btn-peq: assim o tamanho não
   depende da ordem das seções do arquivo. O padding lateral é curto
   porque o botão é de bloco e, com 30px, a frase quebrava em duas
   linhas no celular.                                              */
.btn-comprar.btn-acao{font-size:.95rem;padding:21px 16px}
.btn-comprar{box-shadow:0 18px 40px -20px var(--dourado-brilho)}
.btn-comprar:hover{box-shadow:0 22px 46px -18px var(--dourado)}

/* botao champanhe: o de comprar, sobre o bloco verde escuro */
.btn-champanhe{background:var(--dourado);color:var(--escuro)}
.btn-champanhe:hover{background:var(--dourado-2);transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(0,0,0,.5)}
.btn-champanhe::before{background:linear-gradient(100deg,transparent,rgba(16,45,36,.16),transparent)}

/* contornado sobre fundo escuro: hierarquia contra o champanhe sólido */
.btn-contorno-claro{background:none;color:var(--dourado);box-shadow:inset 0 0 0 1px var(--fio-claro)}
.btn-contorno-claro:hover{box-shadow:inset 0 0 0 1px var(--dourado);transform:translateY(-2px)}
.btn-contorno-claro::before{background:linear-gradient(100deg,transparent,var(--orbita-1),transparent)}

/* ── HREF ──
   As três famílias de link do site (corpo das páginas internas,
   rodapé e assinatura) têm o mesmo desenho: cor de --elo e um fio
   de ouro na linha de base, que vira verde no hover. Estava escrito
   três vezes; aqui é uma vez só e cada uma guarda só a diferença.  */
.texto a,.link-fino,.assinatura a{
  color:var(--elo);text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--elo-fio);
  transition:color .3s ease,box-shadow .3s ease;
}
.texto a:hover,.link-fino:hover,.assinatura a:hover{color:var(--verde-tex)}
.texto a,.link-fino{font-weight:600}
.link-fino{font-size:.92rem}
.texto a:hover,.link-fino:hover{box-shadow:inset 0 -2px 0 var(--verde-tex)}

:focus-visible{outline:2px solid var(--latao-tex);outline-offset:3px}

/* ════════ CABEÇALHO ════════ */
.topo{
  position:sticky;top:0;z-index:70;
  background:var(--vidro);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--fio);
}
/* fio de latão que aparece só quando o topo descola do início da página */
.topo::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--latao),transparent);
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.topo.encostado::after{opacity:.5}

.topo-int{
  max-width:1160px;margin:0 auto;padding:13px 22px;
  display:flex;align-items:center;gap:18px;
  transition:padding .35s cubic-bezier(.22,.8,.3,1);
}
.topo.encostado .topo-int{padding-top:9px;padding-bottom:9px}

/* lockup do nome */
.topo-marca{
  display:flex;align-items:center;gap:13px;flex-shrink:0;
  text-decoration:none;color:inherit;
}
.topo-marca .fio-v{
  width:1px;height:26px;background:var(--latao);opacity:.5;flex-shrink:0;
  transform:scaleY(.4);transform-origin:center;
  transition:transform .5s cubic-bezier(.22,.8,.3,1),opacity .4s ease;
}
.topo-marca:hover .fio-v{transform:scaleY(1);opacity:.9}
.topo .nome{
  font-family:var(--serif);font-size:1.12rem;letter-spacing:-.01em;display:block;
  transition:color .3s ease;
}
.topo-marca:hover .nome{color:var(--verde-tex)}
.topo .crn{
  font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-35);display:block;margin-top:2px;
}

/* navegação */
.topo-nav{display:none}
.topo-nav a{
  position:relative;padding:5px 0;text-decoration:none;
  font-size:.82rem;font-weight:500;color:var(--tinta-50);
  transition:color .3s ease;
}
.topo-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--latao);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
}
.topo-nav a:hover{color:var(--tinta)}
.topo-nav a:hover::after,.topo-nav a.ativo::after{transform:scaleX(1)}
.topo-nav a.ativo{color:var(--tinta)}

/* ações à direita */
.topo-acoes{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}

/* botão de tema */
.tema{
  position:relative;width:38px;height:38px;flex-shrink:0;
  display:grid;place-items:center;overflow:hidden;
  border:0;border-radius:50%;background:none;cursor:pointer;color:var(--tinta-50);
  box-shadow:inset 0 0 0 1px var(--fio);
  transition:box-shadow .3s ease,color .3s ease,transform .5s cubic-bezier(.22,.8,.3,1);
}
.tema:hover{box-shadow:inset 0 0 0 1px var(--latao);color:var(--latao-tex);transform:rotate(-22deg)}
.tema svg{
  position:absolute;width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,.8,.3,1);
}
.tema .lua{opacity:0;transform:translateY(130%) rotate(-45deg)}
[data-tema="escuro"] .tema .sol{opacity:0;transform:translateY(-130%) rotate(45deg)}
[data-tema="escuro"] .tema .lua{opacity:1;transform:none}

/* botão compacto do topo */
.btn-peq{padding:11px 20px;font-size:.8rem;gap:8px}

@media(max-width:559px){
  .topo-acoes .btn-peq{display:none}
  .topo .crn{display:none}
}
@media(min-width:960px){
  .topo-nav{display:flex;gap:28px;margin:0 auto}
}

/* ════════ CABEÇALHO QUE SOME AO DESCER ════════ */
.topo{transition:transform .45s cubic-bezier(.22,.8,.3,1),box-shadow .3s ease}
.topo.oculto{transform:translateY(-102%)}
.topo.encostado{box-shadow:0 12px 34px -26px var(--sombra)}

/* ════════ HERO ════════ */
.hero{padding:54px 0 0}
.hero-grade{display:grid;gap:56px}
.hero h1{margin-top:22px}
.hero h1 em{color:var(--verde-tex)}
.hero .dek{margin-top:26px}
.hero-acao{margin-top:34px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-fig{position:relative;margin-top:8px}
.hero-fig .bloco{position:absolute;background:var(--verde);inset:auto -14px -18px 40px;height:62%;z-index:0}
.hero-ph{position:relative;z-index:1;aspect-ratio:4/5}
.hero-legenda{margin-top:12px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-35)}

/* ════════ FAIXA ════════ */
.faixa{border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);padding:13px 0;overflow:hidden;margin-top:64px}
.faixa-int{display:flex;width:max-content;gap:44px;white-space:nowrap;animation:correr 42s linear infinite;
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--tinta-35)}
.faixa-int>span{display:flex;gap:44px}
.faixa:hover .faixa-int{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}

/* ════════ LISTA NUMERADA (problema) ════════ */
.itens{border-top:1px solid var(--fio)}
.item{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--fio);
  transition:padding-left .35s cubic-bezier(.22,.8,.3,1)}
.item:hover{padding-left:26px}
.item p{font-size:clamp(1.1rem,3.2vw,1.35rem);font-family:var(--serif);letter-spacing:-.01em;line-height:1.15}

/* ════════ ÍCONES DAS LISTAS ════════
   As seções 02, 03 e 05 são todas listas e estavam iguais entre si.
   Cada uma ganhou um sinal próprio: anel vazado no problema, círculo
   cheio no "é para você" e placa quadrada no conteúdo. O <svg> é
   sempre de traço e herda a cor por currentColor.                    */
.icone{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
/* o .seguro entra aqui junto: é o mesmo desenho de traço, só que
   solto dentro do cartão do checkout, sem a caixa do .icone.     */
.icone svg,.seguro svg{fill:none;stroke:currentColor;stroke-width:var(--traco,1.7);
  stroke-linecap:round;stroke-linejoin:round}
/* os três reagem igual; o que muda é a cor de chegada */
/* 09: sem moldura. O bloco da oferta já é uma superfície cheia, e um
   quarto quadradinho ali dentro pesaria. Só o traço, em champanhe. */
.icone-solto{width:19px;height:19px;color:var(--dourado);--traco:1.6}
.icone-solto svg{width:19px;height:19px}

.icone-anel,.icone-bloco,.icone-check,.icone-solto{
  transition:color .35s ease,background .35s ease,box-shadow .35s ease,
             transform .35s cubic-bezier(.22,.8,.3,1);
}
.item:hover .icone-anel,.linha:hover .icone-bloco{transform:translateY(-2px)}

/* 02: anel vazado, no lugar exato que o número ocupava */
.icone-anel{
  width:38px;height:38px;border-radius:50%;color:var(--latao-tex);
  box-shadow:inset 0 0 0 1px var(--latao-fio);
}
.icone-anel svg{width:19px;height:19px}
.item:hover .icone-anel{color:var(--verde-tex);box-shadow:inset 0 0 0 1px var(--verde-tex)}

/* 05: placa de canto arredondado, que se preenche no hover */
.icone-bloco{
  width:44px;height:44px;border-radius:12px;color:var(--verde-tex);
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
}
.icone-bloco svg{width:21px;height:21px}
.linha:hover .icone-bloco{color:var(--claro);background:var(--verde);box-shadow:inset 0 0 0 1px var(--verde)}

/* ════════ FAIXA DAS LISTAS ════════
   Véu quente no fundo e fio de ouro que cresce na borda esquerda.
   Nasceu na seção 05 e hoje vale para as quatro listas da página.

   · O véu é contido de propósito: o ouro é o realce dos 10% na regra
     60-30-10. Passar disso faz dele superfície e rouba o destaque do
     bloco do checkout.
   · O fio que cresce entra com a seção, não no hover. É o realce que
     sobrevive em tela de toque, onde o :hover nunca dispara.
   · A sangria de 16px deixa o véu passar da coluna sem desalinhar o
     texto. O contêiner de cada lista leva a mesma margem negativa,
     senão o fio de cima não bate com os debaixo.
   · A 09 é o caso à parte: mora no bloco do checkout, escuro nos dois
     temas, então usa o champanhe do grupo fixo e não o --ouro-veu,
     que inverte.                                                     */
.itens,.marcadores,.linhas,.selos{margin-left:-16px;margin-right:-16px}
.item,.marcadores li,.linha,.selo-l{position:relative;padding-left:16px;padding-right:16px}
.item,.marcadores li,.linha{background:var(--ouro-veu)}
.item:hover,.marcadores li:hover,.linha:hover{background:var(--ouro-veu-forte)}
.selo-l{background:var(--dourado-veu)}
.selo-l:hover{background:var(--dourado-veu-forte)}

.item::before,.marcadores li::before,.linha::before,.selo-l::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;
  background:var(--latao);transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.22,.8,.3,1),background .3s ease;
}
.selo-l::before{background:var(--dourado)}
.reveal.visivel .item::before,.reveal.visivel .marcadores li::before,
.reveal.visivel .linha::before,.reveal.visivel .selo-l::before{transform:scaleY(1)}
.item:hover::before,.marcadores li:hover::before,.linha:hover::before{background:var(--verde-tex)}
.selo-l:hover::before{background:var(--dourado-2)}

/* ════════ DUAS COLUNAS ASSIMÉTRICAS ════════ */
.duas{display:grid;gap:34px}
.marcadores{display:grid;gap:0}
.marcadores li{list-style:none;display:flex;align-items:flex-start;gap:14px;
  padding-top:15px;padding-bottom:15px;border-bottom:1px solid var(--fio)}
.marcadores li:first-child{border-top:1px solid var(--fio)}
/* 03: círculo cheio. Aqui a lista é de confirmação, não de problema.
   Mora com os outros dois lá em ÍCONES DAS LISTAS.                 */
.icone-check{
  width:24px;height:24px;border-radius:50%;margin-top:3px;--traco:2.6;
  background:var(--verde);color:var(--claro);
}
.icone-check svg{width:13px;height:13px}

/* ════════ PAINEL VERDE ════════ */
.painel{background:var(--verde);color:var(--claro);padding:64px 0;margin:0}
.painel h2{color:var(--claro)}
.painel .dek{color:rgba(244,241,233,.72)}
.painel .marca{color:var(--dourado)}
.especs{margin-top:34px;border-top:1px solid var(--fio-claro)}
.espec{display:grid;grid-template-columns:1fr auto;gap:18px;padding:16px 0;border-bottom:1px solid var(--fio-claro);align-items:baseline}
.espec .k{font-size:.95rem;color:rgba(244,241,233,.72)}
.espec .v{font-family:var(--serif);font-size:1.25rem;color:var(--dourado)}

/* ════════ APRENDIZADO (linhas editoriais) ════════ */
/* o véu e o fio da borda estão em FAIXA DAS LISTAS */
.linhas{border-top:1px solid var(--fio)}
.linha{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding-top:26px;padding-bottom:26px;border-bottom:1px solid var(--fio)}
.linha h3{font-size:clamp(1.25rem,3.4vw,1.6rem)}
.linha p{margin-top:6px;color:var(--tinta-70);font-size:.97rem;max-width:44em}

/* ════════ CITAÇÕES ════════ */
.citacao-grande{font-family:var(--serif);font-size:clamp(1.7rem,5vw,2.7rem);line-height:1.12;letter-spacing:-.02em}
.assina{margin-top:18px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-35)}
.citacao-peq{border-top:1px solid var(--fio);padding-top:20px}
.citacao-peq p{font-size:1.02rem;line-height:1.5}

/* ════════ BÔNUS (linhas alternadas) ════════ */
.bonus{display:grid;gap:34px;padding:38px 0;border-bottom:1px solid var(--fio);align-items:center}
.bonus:first-of-type{border-top:1px solid var(--fio)}
.bonus .cap{width:min(190px,58vw);aspect-ratio:2/3;transition:transform .5s cubic-bezier(.22,.8,.3,1),box-shadow .4s ease}
.bonus .cap.foto-recorte{width:min(220px,66vw);aspect-ratio:4/5}
.bonus:hover .cap{transform:translateY(-6px) rotate(-1deg)}
.bonus .valor{margin-top:14px;font-size:.8rem;color:var(--tinta-35)}
.bonus .valor s{margin-right:10px}

/* ════════ OFERTA ════════ */
.oferta{background:var(--verde-oferta);color:var(--claro);padding:70px 0}
.oferta h2{color:var(--claro)}
.oferta .marca{color:var(--dourado)}
.de{font-size:.9rem;color:var(--claro-70)}
.de s{text-decoration-thickness:1px}
.selos{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--fio-claro)}
.selo-l{display:flex;align-items:center;gap:14px;padding-top:13px;padding-bottom:13px;
  border-bottom:1px solid var(--fio-claro);font-size:.88rem}
/* .k e .v seguem a mesma convenção do painel verde (.espec) */
.selo-l .k{color:var(--claro-70);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}
.selo-l .v{margin-left:auto;text-align:right}

/* ════════ CARTÃO DO CHECKOUT ════════
   O preço e o botão de comprar viviam soltos sobre o verde. Agora têm
   moldura própria: fundo um degrau acima do bloco, fio de latão e o
   champanhe só aqui dentro. É a única caixa da página com selo.
   O verde da seção também subiu um degrau (--verde-oferta); por isso
   os secundários sobre ele foram de .6 para .7 de opacidade.         */
.cartao-preco{
  margin-top:28px;padding:24px 22px 20px;border-radius:14px;
  background:rgba(245,241,232,.07);
  box-shadow:inset 0 0 0 1px var(--dourado-fio),0 26px 60px -34px rgba(0,0,0,.65);
  text-align:center;transition:box-shadow .45s ease;
}
.cartao-preco:hover{box-shadow:inset 0 0 0 1px var(--dourado),0 30px 66px -32px rgba(0,0,0,.7)}
.selo-desconto{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  padding:7px 14px;border-radius:999px;background:var(--dourado);color:var(--escuro);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.selo-desconto .ponto{
  width:6px;height:6px;border-radius:50%;background:var(--escuro);flex-shrink:0;
  animation:pisca-ponto 2.4s ease-in-out infinite;
}
@keyframes pisca-ponto{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.chamada-preco{
  margin-top:22px;color:var(--claro);font-size:.82rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.parcela-destaque{
  margin-top:8px;color:var(--claro);font-size:clamp(2.5rem,8.5vw,4rem);
  font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap;
}
.parcela-destaque small{font-size:.42em;font-weight:500;letter-spacing:0}
.preco-avista{margin-top:12px;color:var(--claro-70);font-size:1rem}
.preco-avista strong{color:var(--claro);font-weight:600}
.custo-diario{
  margin:18px auto 0;padding-top:16px;border-top:1px solid var(--fio-claro);
  color:var(--dourado-2);font-size:.86rem;font-weight:600;line-height:1.45;
}
/* O total e os juros precisam continuar explícitos para cumprir o CDC,
   mas ficam visualmente subordinados à parcela e ao preço à vista. */
.total-parcelado{margin-top:8px;color:var(--claro-70);font-size:.72rem;line-height:1.5}
/* o tamanho e o brilho do botão moram em BOTÕES; aqui só o respiro */
.btn-comprar{margin-top:22px}
.seguro{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;font-size:.78rem;color:var(--claro-70);
  text-align:center;  /* no celular a frase quebra em duas linhas */
}
.seguro svg{width:13px;height:13px;flex-shrink:0;--traco:1.9}

/* ════════ ADICIONAL (order bump) ════════
   Vive dentro do bloco da oferta, mas é comprado à parte: por isso fica
   fora da lista do que vem incluído e usa botão contornado, não sólido.
   Os materiais extras da seção 08 são de graça. Este não é, e a
   moldura existe justamente para não confundir os dois.               */
.adicional{
  display:grid;gap:26px;margin-top:56px;padding:24px;
  border-radius:var(--raio);
  background:rgba(244,241,233,.05);
  box-shadow:inset 0 0 0 1px var(--fio-claro);
  transition:box-shadow .4s ease;
}
.adicional+.adicional{margin-top:22px}
.adicional:hover{box-shadow:inset 0 0 0 1px var(--orbita-2)}
.adicional .foto{max-width:220px}
.adicional h3{color:var(--claro);margin-top:12px}
.adicional-texto>p{margin-top:12px}
.adicional-desc{font-size:.97rem;color:rgba(244,241,233,.72);max-width:42em}
.adicional-nota{font-size:.78rem;color:var(--claro-70)}
.adicional-acao{display:grid;gap:8px;align-content:start;text-align:center}
.adicional-chamada{
  color:var(--claro-70);font-size:.7rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
}
.adicional-parcela{
  color:var(--dourado);font-size:clamp(2rem,6vw,2.7rem);font-weight:600;
  letter-spacing:-.045em;line-height:1;white-space:nowrap;
}
.adicional-parcela small{font-size:.44em;font-weight:500;letter-spacing:0}
.adicional-avista{color:var(--claro-70);font-size:.88rem}
.adicional-avista strong{color:var(--claro);font-weight:600}
.adicional-diario{margin-top:6px;color:var(--dourado-2);font-size:.74rem;font-weight:600;line-height:1.4}
.adicional-total{color:var(--claro-70);font-size:.68rem;line-height:1.45}
.adicional-acao .btn{margin-top:8px;padding-left:12px;padding-right:12px;font-size:.72rem}

/* ════════ RODAPÉ ════════ */
footer{border-top:1px solid var(--fio);padding:52px 0 104px}
.legal{margin-top:22px;font-size:.78rem;line-height:1.7;color:var(--tinta-50);max-width:52em}
.rodape-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:26px;font-size:.82rem}
/* crédito do desenvolvedor: discreto, mas ainda legível; o tom mais
   fraco (--tinta-35) não passa em contraste neste corpo de letra.   */
.assinatura{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;
  margin-top:16px;font-size:.74rem;color:var(--tinta-50);
}
.assinatura .coracao{width:11px;height:11px;flex-shrink:0;fill:var(--latao);
  transition:transform .4s cubic-bezier(.22,.8,.3,1)}
.assinatura a:hover{box-shadow:inset 0 -1px 0 var(--latao)}
.assinatura:hover .coracao{transform:scale(1.25)}

/* ════════ CTA FIXO (celular) ════════
   Grudado no rodapé da tela durante toda a leitura. Entra assim que a
   pessoa passa do primeiro botão e sai de cena só quando o bloco da
   oferta aparece; senão ele cobriria o próprio botão de comprar.
   Some por inteiro no desktop, onde o CTA já está sempre à vista.     */
.fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--vidro);border-top:1px solid var(--fio);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  transform:translateY(130%);
  transition:transform .4s cubic-bezier(.22,.8,.3,1),opacity .3s ease-in-out;
}
.fixo.on{transform:none}
/* recolhido enquanto o bloco da oferta está na tela */
.fixo.recolhido{transform:translateY(130%)}

/* ════════ ANIMAÇÕES ════════ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,.8,.3,1),transform .8s cubic-bezier(.22,.8,.3,1)}
.reveal.visivel{opacity:1;transform:none}
@keyframes palavra{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}
.palavra{display:inline-block;opacity:0}
.palavra.on{animation:palavra .7s cubic-bezier(.22,.8,.3,1) both}
.stag>*{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
/* o .stag pode estar dentro do .reveal ou ser o próprio elemento revelado */
.reveal.visivel .stag>*,.reveal.visivel.stag>*{opacity:1;transform:none}
.progresso{position:fixed;top:0;left:0;height:1px;width:0;background:var(--latao);z-index:90;transition:width .1s linear}

/* ════════ GRADES: BASE MOBILE ════════
   Uma coluna por padrao, com respiro entre foto e texto. Sem estas
   regras os blocos abaixo so viravam grade no desktop e, no celular,
   a foto encostava no texto seguinte.                                */
.painel-grade{display:grid;gap:40px}
.autora-grade{display:grid;gap:36px}
.oferta-grade{display:grid;gap:44px}
.citacoes{display:grid;gap:40px}
.citacoes .menores{display:grid;gap:30px}
.linhas-grade{display:grid;gap:0}
.cap-col{display:flex;align-items:flex-start}

/* ════════ DESKTOP ════════ */
@media(min-width:860px){
  .sec{padding:120px 0}
  .hero{padding:80px 0 0}
  .hero-grade{grid-template-columns:1.32fr .84fr;gap:92px;align-items:end}
  .hero-fig{margin-top:0;transform:translateY(28px)}
  .duas{grid-template-columns:.72fr 1.28fr;gap:70px}
  .duas .colada{position:sticky;top:96px}
  .painel{padding:110px 0}
  .painel-grade{display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:center}
  .item{gap:26px}  /* a coluna segue o ícone, não um número solto */
  .linhas-grade{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
  .citacoes{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
  .citacoes .menores{margin-top:64px;display:grid;gap:32px}
  .bonus{grid-template-columns:240px 1fr;gap:64px;padding:52px 0}
  .bonus:nth-child(odd){grid-template-columns:1fr 240px}
  .bonus .cap{width:240px}
  .bonus .cap.foto-recorte{width:240px}
  .oferta-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:88px;align-items:center}
  .adicional{grid-template-columns:190px 1fr 250px;gap:40px;align-items:center;padding:30px}
  .adicional .foto{max-width:none}
  .garantia{grid-template-columns:260px 1fr;gap:64px}
  .autora-grade{display:grid;grid-template-columns:.58fr 1.42fr;gap:88px;align-items:center}
  .inclui-grade{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
  footer{padding-bottom:52px}
  .fixo{display:none}
}


/* ════════ GARANTIA: SELO ════════ */
.garantia{display:grid;gap:38px;align-items:center}

.selo{
  position:relative;width:min(240px,64vw);aspect-ratio:1;
  display:grid;place-items:center;margin:0 auto;
  transition:transform .6s cubic-bezier(.22,.8,.3,1);
}
.selo:hover{transform:scale(1.04)}

/* anel de texto girando devagar */
.selo-anel{position:absolute;inset:0;width:100%;height:100%;animation:girar 30s linear infinite}
.selo:hover .selo-anel{animation-duration:14s}
.selo-anel text{
  font-family:var(--sans);font-size:8.4px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;fill:var(--latao-tex);
}
@keyframes girar{to{transform:rotate(360deg)}}

/* disco central */
.selo-disco{
  position:absolute;inset:13%;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,var(--disco-1) 0%,var(--disco-2) 74%);
  box-shadow:inset 0 0 0 1px var(--fio),0 18px 40px -22px var(--sombra);
}
.selo-borda{position:absolute;inset:13%;border-radius:50%;border:1px solid var(--latao);opacity:.6}
.selo-borda-int{position:absolute;inset:18%;border-radius:50%;border:1px dashed var(--latao-fio)}

/* pulsos que saem do selo */
.selo-pulso{position:absolute;inset:13%;border-radius:50%;border:1px solid var(--latao);opacity:0;pointer-events:none}
.reveal.visivel .selo-pulso{animation:pulsar 3.4s cubic-bezier(.22,.8,.3,1) infinite}
.reveal.visivel .selo-pulso.atrasado{animation-delay:1.7s}
@keyframes pulsar{
  0%{transform:scale(1);opacity:.5}
  70%{opacity:0}
  100%{transform:scale(1.4);opacity:0}
}

/* numeral e legenda */
.selo-int{position:relative;z-index:2;text-align:center;line-height:1}
.selo-num{
  display:block;font-family:var(--serif);font-size:clamp(4.2rem,15vw,5.6rem);
  line-height:.82;letter-spacing:-.04em;color:var(--verde-tex);
}
.reveal.visivel .selo-num{animation:selo-entra 1s cubic-bezier(.22,.8,.3,1) both .15s}
@keyframes selo-entra{from{opacity:0;transform:scale(.55) rotate(-10deg)}to{opacity:1;transform:none}}
.selo-dias{
  display:block;margin-top:6px;font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.34em;color:var(--latao-tex);
}
.selo-linha{
  display:block;width:34px;height:1px;margin:12px auto 0;background:var(--latao);
  opacity:.55;transform:scaleX(0);transform-origin:center;
  transition:transform .8s cubic-bezier(.22,.8,.3,1) .55s;
}
.reveal.visivel .selo-linha{transform:scaleX(1)}

/* ════════ TÍTULOS COM FIO QUE CRESCE ════════ */
.sec-topo{position:relative}
.sec-topo::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:1px;
  background:var(--latao);opacity:.45;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.22,.8,.3,1) .1s;
}
.reveal.visivel .sec-topo::after{transform:scaleX(1)}

/* ════════ REVELAÇÕES DIRECIONAIS ════════ */
.reveal-esq{opacity:0;transform:translateX(-26px);transition:opacity .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1)}
.reveal-dir{opacity:0;transform:translateX(26px);transition:opacity .9s cubic-bezier(.22,.8,.3,1),transform .9s cubic-bezier(.22,.8,.3,1)}
.reveal.visivel .reveal-esq,.reveal.visivel .reveal-dir{opacity:1;transform:none}
.reveal-zoom{opacity:0;transform:scale(.96);transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.3,1)}
.reveal.visivel .reveal-zoom{opacity:1;transform:none}

/* ════════ BOTÃO COM BRILHO QUE ATRAVESSA ════════ */
.btn{overflow:hidden}
.btn::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-160%) skewX(-18deg);
  transition:transform .75s cubic-bezier(.22,.8,.3,1);
}
.btn:hover::before{transform:translateX(420%) skewX(-18deg)}
.btn-linha::before{background:linear-gradient(100deg,transparent,var(--orbita-1),transparent)}

/* ════════ MARCADORES ════════ */
.marcadores li{transition:padding-left .35s cubic-bezier(.22,.8,.3,1),background .35s ease}
.marcadores li:hover{padding-left:26px}
.marcadores li:hover .icone-check{transform:translateX(3px) scale(1.1);background:var(--verde-2)}

/* ════════ ESPECIFICAÇÕES DO PAINEL ════════ */
.espec{transition:padding-left .35s cubic-bezier(.22,.8,.3,1)}
.espec:hover{padding-left:8px}
.espec .v{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.espec:hover .v{transform:translateX(-4px)}

/* ════════ LINHAS DA OFERTA ════════ */
.selo-l{transition:padding-left .35s cubic-bezier(.22,.8,.3,1),background .35s ease}
.selo-l:hover{padding-left:24px}
.selo-l:hover .icone-solto{color:var(--dourado-2);transform:translateX(3px) scale(1.08)}

/* ════════ PARCELA QUE ENTRA ════════ */
.parcela-destaque{display:inline-block}
.reveal.visivel .parcela-destaque{animation:preco-entra 1s cubic-bezier(.22,.8,.3,1) both .2s}
@keyframes preco-entra{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}

/* ════════ BÔNUS ════════ */
.bonus{transition:background .4s ease}
.bonus:hover{background:var(--realce)}
.bonus h3{transition:transform .45s cubic-bezier(.22,.8,.3,1)}
.bonus:hover h3{transform:translateX(6px)}
.bonus .cap{box-shadow:0 0 0 1px var(--fio)}
.bonus:hover .cap{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 22px 44px -26px var(--sombra)}
.bonus .cap.foto-recorte,
.bonus:hover .cap.foto-recorte{box-shadow:none}

/* ════════ CITAÇÕES ════════ */
.citacao-peq{transition:padding-left .4s cubic-bezier(.22,.8,.3,1),border-color .4s ease}
.citacao-peq:hover{padding-left:12px;border-top-color:var(--latao)}

/* ════════ FAIXA ════════ */
.faixa-int>span>span{transition:color .3s ease}
.faixa-int>span>span:hover{color:var(--verde-tex)}

/* ════════ RODAPÉ ════════ */
.rodape-links a{transition:color .3s ease}
.rodape-links a:hover{color:var(--verde-tex)}

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

/* ════════ ESCALONAMENTO: preserva as transições de hover ════════ */
.stag>.item{transition:opacity .6s ease,transform .6s ease,padding-left .35s cubic-bezier(.22,.8,.3,1),background .3s ease}
.stag>.linha{transition:opacity .6s ease,transform .6s ease,background .3s ease}
.stag>.espec,.stag>.selo-l{transition:opacity .6s ease,transform .6s ease,padding-left .35s cubic-bezier(.22,.8,.3,1),background .35s ease}
.stag>.marcadores li,.marcadores.stag>li{transition:opacity .6s ease,transform .6s ease,padding-left .35s cubic-bezier(.22,.8,.3,1),background .35s ease}


/* ════════ FOTOS ════════
   Um quadro com proporção fixa. Enquanto não houver arquivo, aparece a
   trama e a medida sugerida; assim que o src apontar para uma imagem
   real, ela cobre tudo. Para trocar a foto basta mudar o src no HTML;
   nada mais precisa ser mexido.                                        */
.foto{
  position:relative;overflow:hidden;margin:0;
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
  transition:box-shadow .4s ease;
}
/* trama diagonal do espaço reservado */
.foto::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(-45deg,var(--hachura) 0 1px,transparent 1px 9px);
}
/* medida sugerida, escrita no data-medidas */
.foto::after{
  content:attr(data-medidas);position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.9;
  color:var(--tinta-35);white-space:pre-line;
}
.foto img{
  position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;
}
/* sem arquivo ainda: some a imagem e fica só o espaço reservado */
.foto.sem-foto img{display:none}
/* com o arquivo no lugar, a trama e a medida saem de cena. Uma foto
   com fundo transparente deixava as duas aparecerem por baixo. */
.foto.com-foto::before,.foto.com-foto::after{display:none}

/* entrada suave quando a foto carrega (só com JS ligado) */
.js .foto img{opacity:0;transition:opacity .9s ease,transform 1.2s cubic-bezier(.22,.8,.3,1);transform:scale(1.04)}
.js .foto img.carregada{opacity:1;transform:none}

/* luz que atravessa no hover, igual à dos espaços reservados */
.foto .brilho{
  content:"";position:absolute;z-index:2;top:-60%;bottom:-60%;left:0;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(244,241,233,.42),transparent);
  transform:translateX(-200%) rotate(8deg);
  transition:transform 1s cubic-bezier(.22,.8,.3,1);
}
.foto:hover .brilho{transform:translateX(520%) rotate(8deg)}
.foto:hover{box-shadow:inset 0 0 0 1px var(--tinta-35)}

/* variante sobre fundo escuro (painel verde e bloco da oferta) */
.foto-escura{background:rgba(244,241,233,.06);box-shadow:inset 0 0 0 1px var(--fio-claro)}
.foto-escura::before{background:repeating-linear-gradient(-45deg,rgba(244,241,233,.05) 0 1px,transparent 1px 9px)}
.foto-escura::after{color:rgba(244,241,233,.4)}
.foto-escura:hover{box-shadow:inset 0 0 0 1px rgba(244,241,233,.4)}

/* recorte: PNG com fundo transparente. Sem fundo e sem moldura, senão
   sobra um retângulo em volta de nada; 'contain' porque 'cover' cortaria
   as bordas do recorte; e sem o brilho, que atravessaria o vazio.
   Seletor composto de propósito: assim não depende de vir depois do
   .foto-escura, que tem o mesmo peso.                                */
.foto-recorte,.foto-escura.foto-recorte,
.foto-recorte:hover,.foto-escura.foto-recorte:hover{background:none;box-shadow:none}
.foto-recorte::before,.foto-recorte::after{display:none}
.foto-recorte img{object-fit:contain}
.foto-recorte .brilho{display:none}

/* O arquivo do retrato tem uma faixa escura na base. O quadro mais
   vertical e a altura extra preservam o rosto e deixam essa faixa fora
   do recorte, sem precisar alterar a fotografia original. */
.retrato-autora{aspect-ratio:4/5;max-width:420px}
.retrato-autora img{height:112%;object-position:center top}

/* ════════ REDES SOCIAIS ════════ */
/* Cada botão carrega a cor da sua rede em duas variáveis: --cor pinta o
   ícone em repouso e --fundo preenche o círculo no hover. Assim eles já
   nascem com cor. No celular, onde hover não existe, continuam vivos. */
.sociais{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.social{
  --cor:var(--verde-tex);
  --fundo:var(--verde);
  position:relative;width:36px;height:36px;display:grid;place-items:center;
  border-radius:50%;text-decoration:none;color:var(--cor);
  box-shadow:inset 0 0 0 1px var(--fio);
  transition:color .3s ease,box-shadow .3s ease,transform .4s cubic-bezier(.22,.8,.3,1),background .35s ease;
}
.social svg{width:15px;height:15px;fill:currentColor;transition:transform .4s cubic-bezier(.22,.8,.3,1)}
/* O símbolo do Instagram é geométrico: moldura, lente e flash. Preenchido,
   o vão entre a moldura e a lente fecha a 15px e vira borrão; em traço ele
   se mantém limpo. Os outros três continuam preenchidos, como as marcas.  */
.social .glifo-traco{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.social .glifo-traco .ponto{fill:currentColor;stroke:none}

.social-instagram{--cor:#D6336C;--fundo:linear-gradient(45deg,#F09433,#DC2743 55%,#BC1888)}
.social-tiktok   {--cor:#F0416B;--fundo:#FE2C55}
.social-youtube  {--cor:#E3352B;--fundo:#E62117}
.social-whatsapp {--cor:#1FA855;--fundo:#25D366}

.social:hover,.social:focus-visible{
  color:#FFF;background:var(--fundo);
  box-shadow:inset 0 0 0 1px transparent;transform:translateY(-3px);
}
.social:hover svg,.social:focus-visible svg{transform:scale(1.12)}
.social .rotulo{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  padding:4px 9px;border-radius:4px;white-space:nowrap;pointer-events:none;
  background:var(--tinta);color:var(--papel);
  font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  opacity:0;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.8,.3,1);
}
.social:hover .rotulo,.social:focus-visible .rotulo{opacity:1;transform:translate(-50%,0)}


/* ════════ PÁGINAS INTERNAS (termos, privacidade, suporte) ════════ */
.pagina{padding:52px 0 96px}
.pagina-cabeca{padding-bottom:30px;border-bottom:1px solid var(--fio);margin-bottom:14px}
.pagina h1{font-size:clamp(2.1rem,6.4vw,3.4rem);margin-top:16px}
.pagina .atualizado{
  margin-top:18px;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinta-35);
}

.voltar{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--tinta-50);
  transition:color .3s ease;
}
.voltar .seta{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.voltar:hover{color:var(--verde-tex)}
.voltar:hover .seta{transform:translateX(-4px)}

.texto{max-width:46em}
.texto h2{
  font-size:clamp(1.3rem,3.6vw,1.75rem);margin-top:52px;padding-top:22px;
  border-top:1px solid var(--fio);display:flex;gap:16px;align-items:baseline;
}
.texto h2 .num{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  color:var(--latao-tex);flex-shrink:0;
}
.texto h3{font-size:1.1rem;margin-top:28px;font-family:var(--sans);font-weight:600;letter-spacing:0}
.texto p{margin-top:14px;color:var(--tinta-70)}
.texto ul{margin-top:14px;list-style:none;padding:0}
.texto li{display:flex;gap:13px;padding:7px 0;color:var(--tinta-70)}
.texto li::before{content:"•";color:var(--latao-tex);flex-shrink:0}
.texto strong{font-weight:600;color:var(--tinta)}

/* caixa de destaque dentro do texto */
.caixa{
  margin-top:26px;padding:24px 26px;border-radius:var(--raio);
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
}
.caixa p{margin-top:0;color:var(--tinta-70)}
.caixa p + p{margin-top:12px}
.caixa .titulo{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--latao-tex);margin-bottom:10px;
}

/* cartões de contato da página de suporte */
.canais{display:grid;gap:16px;margin-top:34px}
.canal{
  display:block;padding:26px;border-radius:var(--raio);text-decoration:none;color:inherit;
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
  transition:transform .4s cubic-bezier(.22,.8,.3,1),box-shadow .4s ease;
}
.canal:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--latao),0 18px 40px -28px var(--sombra)}
.canal .marca{display:block}
.canal h3{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.canal p{margin-top:8px;font-size:.92rem;color:var(--tinta-70)}
.canal .destino{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.85rem;font-weight:600;color:var(--verde-tex);
}
.canal .destino .seta{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.canal:hover .destino .seta{transform:translateX(4px)}

/* perguntas frequentes */
.faq{margin-top:8px;border-top:1px solid var(--fio)}
.faq details{border-bottom:1px solid var(--fio)}
.faq summary{
  display:flex;align-items:baseline;gap:16px;padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:clamp(1.1rem,3vw,1.3rem);letter-spacing:-.01em;
  transition:padding-left .35s cubic-bezier(.22,.8,.3,1),color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;font-family:var(--sans);font-size:1.1rem;color:var(--latao-tex);
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{padding-left:8px;color:var(--verde-tex)}
.faq .resposta{padding:0 0 24px;max-width:44em}
.faq .resposta p{margin-top:0;color:var(--tinta-70)}
.faq .resposta p + p{margin-top:12px}
.faq details[open] .resposta{animation:abrir .5s cubic-bezier(.22,.8,.3,1) both}
@keyframes abrir{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media(min-width:860px){
  .pagina{padding:76px 0 120px}
  .canais{grid-template-columns:1fr 1fr;gap:20px}
}

/* ════════ ÁREA DO ALUNO ════════
   As duas ferramentas do curso (a calculadora e o guia de colaterais)
   moram em curso/ e usam esta mesma folha por caminho relativo. Só o
   que está daqui para baixo é exclusivo delas: a tranca de acesso, o
   formulário e os cartões de resultado. Nada disso aparece nas páginas
   públicas, então não custa nada a elas.                             */

/* ── a tranca ──
   Deterrente, não segurança: numa página estática o código viaja junto
   com o arquivo. A proteção de verdade é o .htaccess ao lado, ou hospedar
   a pasta dentro da área de membros. Está tudo escrito em curso/LEIA-ME.txt. */
.tranca{
  max-width:32em;margin:0 auto;padding:34px 26px 30px;border-radius:var(--raio);
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
}
.tranca h1{font-size:clamp(1.6rem,5vw,2.2rem);margin-top:14px}
.tranca .dek{margin-top:16px;font-size:1rem}
.tranca .campos{margin-top:24px}

/* ── formulário ──
   Não havia nenhum campo de digitar no site até aqui, então o desenho
   nasce agora: canto do --raio, fio de 1px no repouso e o verde assumindo
   a moldura no foco. O :focus-visible geral da folha continua valendo
   para quem navega por teclado.                                      */
.campos{display:grid;gap:20px}
.campo{display:grid;gap:9px}
.campo > label{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-50);
}
.campo input,.campo select{
  width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:1.05rem;font-weight:500;color:var(--tinta);
  padding:15px 16px;border:0;border-radius:var(--raio);
  background:var(--papel);box-shadow:inset 0 0 0 1px var(--fio);
  transition:box-shadow .3s ease-in-out,background .3s ease-in-out;
}
.campo input::placeholder{color:var(--tinta-35)}
.campo input:hover,.campo select:hover{box-shadow:inset 0 0 0 1px var(--tinta-50)}
.campo input:focus,.campo select:focus{
  outline:none;box-shadow:inset 0 0 0 2px var(--verde-tex);background:var(--papel);
}
.campo .ajuda{font-size:.8rem;color:var(--tinta-50);line-height:1.5}
.campo .erro{font-size:.82rem;font-weight:600;color:var(--erro);display:none}
.campo[data-erro] input,.campo[data-erro] select{box-shadow:inset 0 0 0 2px var(--erro)}
.campo[data-erro] .erro{display:block}
.formulario .btn{margin-top:26px}

/* ── abertura visual das ferramentas ── */
.ferramenta-hero{display:grid;gap:30px;align-items:center;position:relative}
.visual-curso{
  width:min(82vw,360px);margin:0 auto;position:relative;isolation:isolate;
  animation:flutuar-curso 6s ease-in-out infinite;
}
.visual-curso img{
  display:block;width:100%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 24px 22px rgba(16,45,36,.2));
}
[data-tema="escuro"] .visual-curso img{filter:drop-shadow(0 28px 24px rgba(0,0,0,.42))}
.visual-curso .orbita{
  position:absolute;z-index:1;border:1px solid var(--latao-fio);border-radius:50%;
  animation:girar-orbita 16s linear infinite;
}
.visual-curso .orbita::after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--latao);top:12%;left:12%;box-shadow:0 0 0 5px var(--ouro-veu-forte);
}
.visual-curso .orbita-a{inset:8% -4% 10% 1%;transform:rotate(12deg)}
.visual-curso .orbita-b{inset:19% 7% 1% -7%;animation-duration:22s;animation-direction:reverse}
.passos-calculo{
  display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:26px;padding:16px 0;
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);
}
.passos-calculo span{
  display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-70);
}
.passos-calculo svg{width:20px;height:20px;fill:none;stroke:var(--latao-tex);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes flutuar-curso{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-10px) rotate(.7deg)}}
@keyframes girar-orbita{to{transform:rotate(372deg)}}

/* ── cartões de resultado ── */
.metricas{display:grid;gap:18px;margin-top:34px}
.metrica{
  padding:26px 24px;border-radius:var(--raio);
  background:var(--ouro-veu);box-shadow:inset 2px 0 0 var(--latao),inset 0 0 0 1px var(--fio);
}
.metrica .rotulo{
  display:flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--latao-tex);
}
.metrica .valor{
  font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.1rem,8vw,2.9rem);margin-top:12px;color:var(--tinta);
}
.metrica .valor small{font-family:var(--sans);font-size:.3em;letter-spacing:.02em;font-weight:500}
.metrica p{margin-top:14px;color:var(--tinta-70);font-size:.95rem;line-height:1.55}
.metrica .dica{margin-top:12px;font-size:.87rem;color:var(--tinta-50);line-height:1.55}
.metrica .faixa{font-weight:600;color:var(--tinta)}
#resultado:not([hidden]) .metrica{animation:entrar-metrica .65s cubic-bezier(.22,.8,.3,1) both}
#resultado:not([hidden]) .metrica:nth-child(2){animation-delay:.08s}
#resultado:not([hidden]) .metrica:nth-child(3){animation-delay:.16s}
#resultado:not([hidden]) .metrica:nth-child(4){animation-delay:.24s}
@keyframes entrar-metrica{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}

/* a memória de cálculo: quem quiser conferir a conta, confere */
.memoria{margin-top:22px}
.memoria summary{
  cursor:pointer;list-style:none;font-size:.82rem;font-weight:600;
  color:var(--elo);box-shadow:inset 0 -1px 0 var(--elo-fio);display:inline-block;
  transition:color .3s ease,box-shadow .3s ease;
}
.memoria summary::-webkit-details-marker{display:none}
.memoria summary:hover{color:var(--verde-tex);box-shadow:inset 0 -2px 0 var(--verde-tex)}
.memoria .conta{
  margin-top:14px;display:grid;gap:0;
  border-top:1px solid var(--fio);font-size:.88rem;
}
.memoria .conta div{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--fio);
}
.memoria .conta dt{color:var(--tinta-50)}
.memoria .conta dd{margin:0;font-weight:600;text-align:right}

/* ── avisos ──
   O .aviso é informativo; o .aviso-medico é o que manda procurar médico
   e por isso ganha o único vermelho da paleta.                        */
.aviso{
  margin-top:26px;padding:20px 22px;border-radius:var(--raio);
  background:var(--papel-2);box-shadow:inset 2px 0 0 var(--latao);
  font-size:.92rem;color:var(--tinta-70);line-height:1.6;
}
.aviso strong{color:var(--tinta)}
.aviso-reservado{margin-top:28px}
.aviso-pirataria{
  display:flex;align-items:flex-start;gap:10px;max-width:42em;margin-top:22px;
  padding:14px 16px;border-left:2px solid var(--latao);background:var(--ouro-veu);
  color:var(--tinta-70);font-size:.78rem;line-height:1.55;
}
.aviso-pirataria > span{color:var(--latao-tex);font-size:1rem;line-height:1.2}
.aviso-pirataria strong{color:var(--tinta)}
.aviso-medico{
  box-shadow:inset 2px 0 0 var(--erro);
  background:var(--realce);
}
.aviso-medico .rotulo{
  display:block;margin-bottom:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--erro);
}

/* ── seletor de sintoma (guia de colaterais) ── */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{
  font-family:var(--sans);font-size:.84rem;font-weight:500;color:var(--tinta);
  padding:10px 16px;border-radius:999px;border:0;cursor:pointer;background:none;
  box-shadow:inset 0 0 0 1px var(--fio);
  transition:background .3s ease-in-out,color .3s ease-in-out,
             box-shadow .3s ease-in-out,transform .3s cubic-bezier(.22,.8,.3,1);
}
.chip:hover{box-shadow:inset 0 0 0 1px var(--latao);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--verde);color:var(--claro);box-shadow:none}

/* ── os blocos de sintoma ──
   Reaproveitam o desenho do FAQ (.faq details) e acrescentam só as duas
   listas internas: o que ajuda e o que evitar.                        */
.sintoma .titulo-lista{
  margin-top:20px;font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-50);
}
.sintoma ul{margin-top:10px;list-style:none;padding:0}
.sintoma li{display:flex;gap:12px;padding:7px 0;color:var(--tinta-70);line-height:1.55}
.sintoma li::before{content:"•";color:var(--latao-tex);flex-shrink:0}
.sintoma .evitar li::before{content:"×";color:var(--erro);font-weight:600}
.faq details[open] .sintoma{animation:abrir .5s cubic-bezier(.22,.8,.3,1) both}
.paineis-sintoma{margin-top:30px}
.painel-sintoma{
  scroll-margin-top:100px;padding:28px 24px;border-radius:var(--raio);
  background:var(--papel-2);box-shadow:inset 2px 0 0 var(--latao),inset 0 0 0 1px var(--fio);
}
.painel-sintoma:focus{outline:none}
.painel-sintoma h2{margin-top:9px;font-size:clamp(1.7rem,6vw,2.5rem)}

@media(min-width:860px){
  .ferramenta-hero{grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);gap:54px;min-height:470px}
  .ferramenta-hero-guia{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr)}
  .visual-curso{width:min(32vw,410px)}
  .metricas{grid-template-columns:1fr 1fr}
  .metricas > .metrica:nth-child(3){grid-column:1 / -1}
  .metrica-larga{grid-column:1 / -1}
  .campos-duplo{grid-template-columns:1fr 1fr;gap:20px 24px}
  .campos-triplo{grid-template-columns:1fr 1fr 1fr;gap:20px 24px}
  .tranca{padding:44px 40px 38px}
}

@media(min-width:1080px){
  .metricas{grid-template-columns:repeat(3,1fr)}
  .metricas > .metrica:nth-child(3){grid-column:auto}
}

/* ════════ PLANOS DE TREINO ════════
   Mesma lógica da calculadora: a pessoa escolhe o perfil e a página
   monta o conteúdo. Aqui o resultado é a lista de exercícios.

   O quadro do exercício reaproveita o .foto do site: enquanto o gif
   não existir em curso/gifs/, aparece o espaço reservado com a medida;
   quando existir, o script.js marca 'com-foto' e a trama sai de cena.
   Não precisa mexer em nada aqui para trocar as mídias.             */
.abas{display:flex;gap:10px;margin-top:26px}
.abas .chip{flex:1;text-align:center}

.treino-cabeca{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:30px;padding-bottom:14px;border-bottom:1px solid var(--fio);
}
.treino-cabeca h2{font-size:clamp(1.5rem,4.4vw,2rem)}
.treino-cabeca .contagem{font-size:.8rem;color:var(--tinta-50)}
.ajuda-exercicios{margin:10px 0 2px;font-size:.78rem;color:var(--tinta-50)}

/* Cada exercício é um cartão de canto arredondado, e não mais uma faixa
   corrida: em vez do fio que separava um do outro, quem dá o ritmo é o
   respiro entre os cartões. O overflow:hidden é o mesmo truque do
   .combinado — faz o fio de latão da esquerda acompanhar a curva em vez
   de espetar fora do canto.                                          */
.exercicios{display:grid;gap:10px;margin-top:10px}
.exercicio{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;
  padding:16px;border-radius:14px;background:var(--ouro-veu);
  cursor:pointer;transition:background .3s ease;
}
.exercicio:hover{background:var(--ouro-veu-forte)}
.exercicio:focus-visible{outline:2px solid var(--latao-tex);outline-offset:-3px}
.exercicio.aberto{background:var(--ouro-veu-forte)}
.exercicio::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--latao);transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.reveal.visivel .exercicio::before{transform:scaleY(1)}
.exercicio h3{font-size:1.05rem;font-family:var(--sans);font-weight:600;letter-spacing:0;line-height:1.3}
.exercicio .serie{margin-top:6px;font-size:.9rem;color:var(--tinta-70)}
.exercicio .serie strong{color:var(--tinta);font-weight:600}
.exercicio .sem-dado{color:var(--erro);font-weight:600}
.exercicio .foto{border-radius:8px;background:#fff}
.exercicio .foto picture{display:block;width:100%;height:100%}
.exercicio .foto img{object-fit:contain}
.abrir-execucao{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  color:var(--latao-tex);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.seta-execucao{
  display:inline-block;width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s ease;
}
.exercicio.aberto .seta-execucao{transform:translateY(4px) rotate(225deg)}
.execucao{
  grid-column:1 / -1;margin-top:2px;padding:16px 0 2px;
  border-top:1px solid var(--fio);font-size:.9rem;line-height:1.75;color:var(--tinta-70);
  animation:abrir-execucao .3s ease both;
}
.execucao[hidden]{display:none}
.rotulo-execucao{
  margin-bottom:6px;color:var(--verde-tex);font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.cuidado-execucao{margin-top:9px;padding-left:12px;border-left:2px solid var(--latao)}
.cuidado-execucao::before{content:"Atenção: ";color:var(--tinta);font-weight:600}
@keyframes abrir-execucao{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* bloco de exercícios que se alternam, como vem no PDF */
/* O combinado sai da régua da lista e vira cartão: margem para respirar,
   canto arredondado e um fio de latão em volta. O overflow:hidden faz o
   fio da esquerda acompanhar a curva em vez de espetar fora do canto. */
.combinado{
  position:relative;overflow:hidden;
  margin:16px 0;padding:16px 16px 6px;border-bottom:0;
  border-radius:14px;
  background:var(--ouro-veu-forte);
  box-shadow:inset 0 0 0 1px var(--latao-fio);
}
.combinado > .rotulo{
  display:flex;align-items:center;gap:10px;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--latao-tex);
}
.combinado > .rotulo svg{width:17px;height:17px;flex-shrink:0;--traco:1.6}
/* rede contra CSS que chega atrasado ou não chega: um <svg> só com
   viewBox assume 100% da largura e engole a página.               */
.responsavel svg,.combinado svg,.passos-calculo svg{max-width:100%;max-height:48px}
.combinado > .dica{margin:4px 0 10px 27px;font-size:.82rem;color:var(--tinta-70)}
/* O fio corre por exercício. Dentro do combinado os exercícios perdem o
   seu, senão apareceriam dois traços colados; quem assume é o bloco, com
   um fio só cobrindo os dois de ponta a ponta. Sem isto a linha quebrava
   justamente nos exercícios que se alternam.                          */
.combinado::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;
  background:var(--latao);transform:scaleY(0);transform-origin:top;
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.reveal.visivel .combinado::before{transform:scaleY(1)}
/* Um treino pode ter dois blocos combinados seguidos (é o caso do treino 1
   masculino avançado). Dois cabeçalhos iguais colados leem como texto
   repetido, então blocos vizinhos ganham respiro e um fio que os separa. */
.combinado + .combinado{margin-top:16px}
.combinado .exercicio{background:none;padding-left:11px;border-radius:10px}
.combinado .exercicio + .exercicio{margin-top:6px}
.combinado .exercicio::before{display:none}
.combinado .exercicio:hover{background:var(--realce)}

/* assinatura do responsável técnico pelo treino */
.responsavel{
  display:flex;align-items:center;gap:14px;margin-top:30px;
  padding:18px 20px;border-radius:var(--raio);
  background:var(--papel-2);box-shadow:inset 0 0 0 1px var(--fio);
}
.responsavel .selo-cref{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--verde);color:var(--claro);--traco:1.7;
}
.responsavel .selo-cref svg{width:21px;height:21px}
.responsavel .nome{display:block;font-weight:600;font-size:1rem}
.responsavel .registro{display:block;margin-top:2px;font-size:.82rem;color:var(--tinta-70)}

@media(min-width:860px){
  .exercicio{grid-template-columns:132px 1fr;gap:24px;padding:20px 18px}
}

/* ── escolha de gênero e faixa de intensidade ──
   O gênero são dois botões (radiogroup de verdade, navegável por seta).
   A intensidade é um <input type=range> nativo: ele já vem com teclado,
   leitor de tela e arraste. Só a pintura é nossa; o preenchimento da
   trilha vem do --preenchido, que o planos.js atualiza.            */
.campo > .rotulo-campo{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-50);
}
.escolha{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.escolha .chip{padding:14px 16px;font-size:.9rem}
.campo[data-erro] .escolha .chip{box-shadow:inset 0 0 0 1px var(--erro)}

.faixa-nivel{padding:2px 0}
.faixa-nivel input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;margin:0;background:none;cursor:pointer;
}
.faixa-nivel input[type=range]:focus{outline:none}
.faixa-nivel input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(to right,var(--verde) var(--preenchido,0%),
                                      var(--fio)   var(--preenchido,0%));
}
.faixa-nivel input[type=range]::-moz-range-track{
  height:6px;border-radius:999px;background:var(--fio);
}
.faixa-nivel input[type=range]::-moz-range-progress{
  height:6px;border-radius:999px;background:var(--verde);
}
.faixa-nivel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-10px;border-radius:50%;border:0;
  background:var(--verde);
  box-shadow:0 0 0 4px var(--papel),0 3px 10px -3px var(--sombra);
  transition:transform .25s cubic-bezier(.22,.8,.3,1),background .25s ease;
}
.faixa-nivel input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;border:0;
  background:var(--verde);
  box-shadow:0 0 0 4px var(--papel),0 3px 10px -3px var(--sombra);
  transition:transform .25s cubic-bezier(.22,.8,.3,1),background .25s ease;
}
.faixa-nivel input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
.faixa-nivel input[type=range]:hover::-moz-range-thumb{transform:scale(1.1)}
.faixa-nivel input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px var(--papel),0 0 0 6px var(--latao-tex);
}
.faixa-nivel input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px var(--papel),0 0 0 6px var(--latao-tex);
}

.faixa-nivel .marcas{
  display:flex;justify-content:space-between;gap:14px;margin-top:14px;
  font-size:.82rem;color:var(--tinta-50);
}
/* 'Intermediário/avançado' não tem ponto de quebra natural e vazava a
   caixa no celular. O <wbr> depois da barra dá o lugar certo de quebrar;
   o break-word fica só de rede, para não partir no meio da palavra.  */
.faixa-nivel .marcas span{transition:color .3s ease;max-width:10em;
  overflow-wrap:break-word;line-height:1.35}
.faixa-nivel .marcas span:last-child{text-align:right}
.faixa-nivel .marcas span[data-ativo]{color:var(--tinta);font-weight:600}

/* ════════ MOVIMENTO REDUZIDO ════════ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.stag>*,.reveal-esq,.reveal-dir,.reveal-zoom{opacity:1;transform:none;transition:none}
  .palavra,.palavra.on{opacity:1;animation:none}
  .faixa-int,.btn-solido::after,.selo-anel{animation:none}
  .reveal.visivel .selo-num,.reveal.visivel .parcela-destaque{animation:none;opacity:1;transform:none}
  .selo-pulso,.reveal.visivel .selo-pulso{display:none;animation:none}
  .selo-linha,.reveal.visivel .selo-linha{transform:scaleX(1);transition:none}
  .sec-topo::after,.reveal.visivel .sec-topo::after{transform:scaleX(1);transition:none}
  .btn:hover,.bonus:hover .cap,.selo:hover,.tema:hover,.social:hover{transform:none}
  /* o padding lateral das faixas é base, não movimento: fica */
  .item:hover,.marcadores li:hover{padding-left:16px}
  .selo-l:hover{padding-left:16px}
  .js .foto img,.js .foto img.carregada{opacity:1;transform:none;transition:none}
  .topo-marca .fio-v,.topo-marca:hover .fio-v{transform:scaleY(1);transition:none}
  .trocando-tema,.trocando-tema *,.trocando-tema *::before,.trocando-tema *::after{transition:none !important}
  .btn::before,.foto .brilho{display:none}
  .faq details[open] .resposta{animation:none}
  .canal:hover,.voltar:hover .seta{transform:none}
  .topo.oculto{transform:none}
  .progresso{display:none}
  .fixo{transition:none}
  .btn:active{transform:none}
  .assinatura:hover .coracao{transform:none}
  .selo-desconto .ponto{animation:none}
  .item:hover .icone-anel,.linha:hover .icone-bloco,
  .marcadores li:hover .icone-check{transform:none}
  .chip:hover{transform:none}
  .faixa-nivel input[type=range]:hover::-webkit-slider-thumb{transform:none}
  .faixa-nivel input[type=range]:hover::-moz-range-thumb{transform:none}
  .exercicio::before,.reveal.visivel .exercicio::before{transform:scaleY(1);transition:none}
  .execucao{animation:none}
  .seta-execucao{transition:none}
  .visual-curso,.visual-curso .orbita,#resultado:not([hidden]) .metrica{animation:none}
  .faq details[open] .sintoma{animation:none}
  .selo-l:hover .icone-solto{transform:none}
  .item::before,.marcadores li::before,.linha::before,.selo-l::before,
  .reveal.visivel .item::before,.reveal.visivel .marcadores li::before,
  .reveal.visivel .linha::before,.reveal.visivel .selo-l::before{transform:scaleY(1);transition:none}
}