/* =========================================================
   Black Friday MOEC 2026
   Página de venda em lpmoec.com.br.

   A regra da página inteira: o ouro só toca o que importa.
   Nas iluminuras, a folha de ouro marcava só o essencial. Aqui ela
   aparece em cinco lugares e em nenhum outro:
     1. a linha iluminada da capa
     2. os botões
     3. os preços
     4. os nós da trilha do combo
     5. o traço do contorno de entonação
   Todo o resto é creme e cinza sobre o preto.

   Para trocar a aparência, mexa só no bloco :root.
   Documentação completa em docs/black-2026.md.
   ========================================================= */

/* ---------- Fontes, hospedadas no próprio domínio ---------- */
@font-face{
  font-family:"Prata"; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/prata-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF;
}
/* Gentium Book Plus: a fonte da SIL, feita para transcrição fonética.
   Só entra nos símbolos do IPA. O arquivo latin-ext cobre o bloco IPA
   inteiro (U+0250 a U+02AF), então trocar a palavra não quebra nada. */
@font-face{
  font-family:"Gentium Book Plus"; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/gentium-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F;
}
@font-face{
  font-family:"Gentium Book Plus"; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/gentium-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF;
}
/* Reservas com a métrica aproximada, para o texto não pular quando a
   fonte de verdade chegar. */
@font-face{ font-family:"Prata Reserva"; src:local("Georgia"); size-adjust:108%; }
@font-face{ font-family:"Manrope Reserva"; src:local("Arial"); size-adjust:104%; }

:root{
  /* --- Cores --- */
  --tinta:      #05070C;  /* o preto da página, com um fio de azul */
  --tinta-2:    #0B0F17;  /* fichas e superfícies */
  --navy:       #011F45;  /* só no decaimento da luz e em fundos profundos */
  --ouro:       #CEA248;
  --ouro-claro: #E8C878;
  --ouro-fundo: #9B8756;
  --nucleo:     #FFF6E6;  /* o centro quase branco da luz */
  --creme:      #EDE6D8;
  --creme-80:   rgba(237,230,216,.80);
  --creme-64:   rgba(237,230,216,.64); /* ≈ 6,5:1 sobre a tinta */
  --linha:      rgba(237,230,216,.10);

  /* Folha de ouro: clareia, escurece e volta a clarear, como luz em
     folha de verdade. O mesmo gradiente do site institucional. */
  --folha: linear-gradient(135deg,#E8C878 0%,#CEA248 35%,#9B8756 68%,#CEA248 100%);

  /* --- Tipografia --- */
  --display: "Prata","Prata Reserva",Georgia,serif;
  --corpo:   "Manrope","Manrope Reserva","Helvetica Neue",Arial,sans-serif;
  --fonetica:"Gentium Book Plus","Charis SIL","Doulos SIL",Georgia,serif;

  /* --- Ritmo --- */
  --wrap: 1180px;
  --margem: clamp(1rem, 4vw, 2.5rem);
  --secao: clamp(5rem, 11vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;
  background:var(--tinta);
}

body{
  margin:0;
  background:var(--tinta);
  color:var(--creme);
  font-family:var(--corpo);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  font-synthesis:none;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
p{ margin:0 0 1em; }
a{ color:var(--creme); }

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

:focus-visible{
  /* Exceção consciente ao orçamento de ouro: o foco do teclado precisa
     do maior contraste da página. */
  outline:2px solid var(--ouro-claro);
  outline-offset:3px;
  border-radius:2px;
}

.pular{
  position:absolute; left:1rem; top:-4rem; z-index:100;
  padding:.7rem 1rem; background:var(--creme); color:var(--tinta);
  font-weight:600; text-decoration:none; border-radius:4px;
}
.pular:focus{ top:1rem; }

.so-leitor{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.ico{
  width:1.1em; height:1.1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Etiqueta de seção. Em creme, nunca em ouro: ela organiza, não chama. */
.rubrica{
  margin:0 0 1.1rem;
  font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--creme-64);
}

.titulo{
  margin:0 0 1.4rem;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  line-height:1.08; letter-spacing:-.012em;
  text-wrap:balance;
  max-width:18ch;
}

/* ---------------------------------------------------------
   Botões
   Folha de ouro com um reflexo que atravessa no hover. O reflexo é
   o único movimento decorativo fora da capa, e vive só nos botões,
   que são a rubrica da página.
   --------------------------------------------------------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  min-height:3rem; padding:0 1.5em;
  border:0; border-radius:6px;
  font-family:var(--corpo); font-size:.95rem; font-weight:700;
  letter-spacing:.01em; line-height:1.15; text-align:center;
  text-decoration:none; cursor:pointer;
  touch-action:manipulation;
  transition:transform .2s var(--ease), box-shadow .3s var(--ease), color .2s, background-color .2s;
}
.btn-p{ min-height:2.6rem; padding:0 1.15em; font-size:.85rem; }
.btn-g{ min-height:3.5rem; padding:0 1.9em; font-size:1rem; }
.btn-bloco{ width:100%; }

.btn-ouro{
  background:var(--folha);
  color:#0B0905;
  box-shadow:
    inset 0 1px 0 rgba(255,246,230,.55),
    inset 0 0 0 1px rgba(232,200,120,.35),
    0 .7rem 2.2rem -.8rem rgba(206,162,72,.6);
}
.btn-ouro::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,250,235,.6) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease);
}
.btn-ouro:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,246,230,.6),
    inset 0 0 0 1px rgba(232,200,120,.45),
    0 1rem 2.6rem -.8rem rgba(206,162,72,.75);
}
.btn-ouro:hover::after{ transform:translateX(120%); }
.btn:active{ transform:scale(.98); }

.btn-contorno{
  background:transparent;
  color:var(--creme);
  box-shadow:inset 0 0 0 1px rgba(237,230,216,.3);
}
.btn-contorno:hover{
  background:rgba(237,230,216,.05);
  box-shadow:inset 0 0 0 1px rgba(237,230,216,.3);
}

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:max(.85rem, env(safe-area-inset-top)) var(--margem) .85rem;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.topo.is-fixo{
  background:rgba(5,7,12,.92);
  box-shadow:0 1px 0 rgba(237,230,216,.14);
}
.topo-marca img{ height:2.7rem; width:auto; }
.topo-acao{ transition:opacity .25s var(--ease), transform .2s var(--ease); }
.barra-ligada .topo-acao{ opacity:0; pointer-events:none; }

/* ---------------------------------------------------------
   Capa iluminada
   Porte do componente IlluminatedHero. O corpo da seção é medido em
   --size, a menor entre a altura da tela (até 1000 px) e a largura.
   Tudo que é medido em em, inclusive as pílulas de luz, escala junto.
   --------------------------------------------------------- */
.luz{
  --factor:min(1000px,100vh);
  --size:min(var(--factor),100vw);
  position:relative; overflow:hidden;
  display:grid; grid-template-rows:1fr auto 1fr; justify-items:center;
  min-height:100vh;
  padding:5.5rem var(--margem) 2.5rem;
  background:var(--tinta);
  font-size:calc(var(--size) * .022);
}
@supports (height:100svh){
  .luz{ --factor:min(1000px,100svh); min-height:100svh; }
}

.luz-palco{
  position:absolute; inset:0; margin:auto;
  width:100%; max-width:44em; height:100%;
  pointer-events:none;
}

/* As duas pílulas de luz. A de cima tem a luz na borda de baixo, a de
   baixo na borda de cima: entre elas fica uma fenda iluminada, onde o
   título mora. Ouro no halo, núcleo claro no fio, decaimento para o
   navy e depois para o preto. Só transform e opacity animam. */
.shadow-bgt,
.shadow-bgb{
  position:absolute; inset:0;
  border-radius:100em;
  scale:1.2;
  opacity:.6;
}
.shadow-bgt{
  translate:0 -70%;
  animation:onloadbgt 1s ease-in-out forwards;
  background:radial-gradient(70% 34% at 50% 100%, rgba(232,200,120,.16), rgba(206,162,72,.10) 32%, rgba(1,31,69,.30) 62%, transparent 82%);
  box-shadow:
    inset 0 -1px 0 0 rgba(255,246,230,.6),
    inset 0 -.5em 1.4em -.3em rgba(232,200,120,.5),
    inset 0 -3em 6em -2em rgba(206,162,72,.3),
    0 .6em 4.5em -.8em rgba(206,162,72,.2);
}
.shadow-bgb{
  translate:0 70%;
  animation:onloadbgb 1s ease-in-out forwards;
  background:radial-gradient(70% 34% at 50% 0%, rgba(232,200,120,.14), rgba(206,162,72,.08) 32%, rgba(1,31,69,.30) 62%, transparent 82%);
  box-shadow:
    inset 0 1px 0 0 rgba(255,246,230,.5),
    inset 0 .5em 1.4em -.3em rgba(232,200,120,.42),
    inset 0 3em 6em -2em rgba(206,162,72,.24),
    0 -.6em 4.5em -.8em rgba(206,162,72,.16);
}

@keyframes onloadbgt{
  0%  { translate:0 -70%; opacity:.3; }
  100%{ translate:0 -64%; opacity:.8; }
}
@keyframes onloadbgb{
  0%  { translate:0 70%; opacity:.3; }
  100%{ translate:0 64%; opacity:.8; }
}
@keyframes onloadopacity{
  24% { opacity:0; }
  100%{ opacity:1; }
}

/* Grão estático a 3,5%: sem ele, o degradê escuro aparece em faixas
   nas telas OLED. */
.luz-ruido{
  position:absolute; inset:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.luz-miolo{ display:contents; }

.luz-titulo{
  grid-row:2;
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  margin:0;
  text-align:center;
  font-family:var(--corpo); font-weight:600;
  line-height:1.08;
  color:var(--creme);
}
.luz-l1,
.luz-l3{
  position:relative; z-index:1; /* acima das sombras longas do filtro da linha 2 */
  text-shadow:0 0 .6em rgba(5,7,12,.85); /* separa a linha do fio de luz das pílulas */
  font-size:clamp(1.05rem, calc(var(--size) * .042), 2.55rem);
  letter-spacing:-.022em;
}
.luz-l2{
  position:relative; display:inline-block;
  margin:.12em 0 .16em;
  font-family:var(--display); font-weight:400;
  /* Medido para "Black November" (14 letras): ocupa uns 80% da largura num
     celular de 360 px e deixa o brilho respirar até a borda. Se a palavra
     da linha mudar, confira de novo em 360 px. */
  font-size:clamp(2.3rem, calc(var(--size) * .104), 7.6rem);
  line-height:1.02; letter-spacing:-.012em;
  white-space:nowrap;
}

/* Brilho base, para todo navegador: oito sombras em ouro que imitam o
   filtro. É o que o iPhone mostra, porque lá o filtro SVG em texto é
   redesenhado a cada quadro e pesa. */
.luz-brilho{
  color:var(--nucleo);
  text-shadow:
    0 0 .035em rgba(255,246,230,.85),
    0 .02em .16em rgba(232,200,120,.65),
    0 .02em .33em rgba(206,162,72,.8),
    0 .02em .52em rgba(219,173,84,.55),
    0 .14em .52em rgba(115,87,33,.6),
    0 .5em .55em rgba(1,31,69,.55);
}

/* Véu de luz por cima, que acende depois que a capa abre. É um span à
   parte, com aria-hidden, para o leitor de tela não ler o título duas
   vezes. */
.luz-veu{
  position:absolute; inset:0;
  background:linear-gradient(0deg,#E6D2A4 0%,#FFFAF2 50%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  opacity:0;
  animation:onloadopacity 1s ease-out forwards;
  pointer-events:none;
}

/* Realce com o filtro SVG original, só em tela grande com mouse, onde a
   GPU aguenta. Nada animado neste nó: o véu é irmão, não filho. */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  /* A classe brilho-svg vem do black.js e nunca é posta no Safari. */
  .brilho-svg .luz-brilho{
    text-shadow:none;
    filter:url(#glow-4);
  }
}

.filtro-def{ position:absolute; width:0; height:0; overflow:hidden; }

.luz-pe{
  grid-row:3; align-self:start;
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.4rem, 3.4vh, 2.25rem);
  max-width:34rem;
  margin-top:clamp(1.25rem, 4vh, 2.75rem);
  text-align:center;
}

/* Parágrafo em cinza com degradê vertical, como no componente. É o
   único texto em degradê da página fora da linha iluminada. */
.luz-texto{
  margin:0;
  font-size:clamp(1rem, calc(var(--size) * .02), 1.2rem);
  font-weight:500; line-height:1.55;
  background:linear-gradient(to top,#8E8B85,#CBC6BC);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-wrap:pretty;
}
.luz-destaque{
  font-weight:700;
  color:var(--creme); -webkit-text-fill-color:var(--creme);
}

/* No celular a fenda de luz sobe para perto de um terço da tela. Assim o
   título, o texto e o botão cabem na primeira dobra, acima do polegar. */
@media (max-width:640px){
  .luz{ grid-template-rows:minmax(0,.42fr) auto 1fr; padding-top:5rem; }
  .luz-palco{ height:74%; margin:0 auto; }
  .luz-pe{ gap:1.25rem; margin-top:1.15rem; }
  .luz-texto{ font-size:1rem; line-height:1.5; }
}

.luz-acoes{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.luz-condicao{
  margin:0;
  font-size:.82rem; letter-spacing:.02em;
  color:var(--creme-64);
}

/* ---------------------------------------------------------
   O professor
   A foto sangra pela borda esquerda e se dissolve no preto à direita.
   --------------------------------------------------------- */
.prof{
  display:grid; grid-template-columns:1fr;
  padding-block:var(--secao) 0;
}
.prof-foto{
  position:relative; margin:0;
}
.prof-foto img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:58% 40%;
  filter:saturate(.86) brightness(.9) contrast(1.03);
}
.prof-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--tinta) 0%, transparent 16%, transparent 62%, var(--tinta) 100%);
}
.prof-texto{
  position:relative; z-index:1;
  margin-top:-1.25rem;
  padding:0 var(--margem) calc(var(--secao) * .7);
}

.referencia{
  max-width:34rem;
  margin:0 0 2rem;
  padding-left:1.1rem;
  border-left:1px solid var(--linha);
  font-size:1.02rem; line-height:1.72;
  color:var(--creme-80);
}
.referencia-autor{ color:var(--creme); font-weight:600; }
.prof-paragrafo{
  max-width:34rem; margin:-.6rem 0 2rem;
  font-size:1.02rem; line-height:1.72;
  color:var(--creme-80);
}

.ficha-tecnica{ max-width:34rem; margin:0; }
.ficha-tecnica div{
  display:grid; grid-template-columns:minmax(8rem,10rem) 1fr; gap:1rem;
  padding:.95rem 0;
  border-top:1px solid var(--linha);
}
.ficha-tecnica div:last-child{ border-bottom:1px solid var(--linha); }
.ficha-tecnica dt{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--creme-64);
  padding-top:.2rem;
}
.ficha-tecnica dd{ margin:0; font-weight:500; color:var(--creme); }

@media (min-width:960px){
  .prof{
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    align-items:center;
    padding-block:var(--secao) calc(var(--secao) * .5);
  }
  .prof-foto img{ aspect-ratio:5/4; }
  .prof-foto::after{
    background:
      linear-gradient(90deg, transparent 52%, var(--tinta) 99%),
      linear-gradient(180deg, var(--tinta) 0%, transparent 14%, transparent 84%, var(--tinta) 100%);
  }
  .prof-texto{
    margin:0;
    padding:0 max(var(--margem), calc((100vw - var(--wrap)) / 2)) 0 clamp(1rem,3vw,3rem);
  }
}

/* ---------------------------------------------------------
   A oferta: o combo como trilha
   Uma coluna por curso. A linha atravessa todas e cada curso tem o seu
   nó em ouro. No celular a mesma linha vira vertical.
   --------------------------------------------------------- */
.oferta{
  max-width:calc(var(--wrap) + 2 * var(--margem));
  margin:0 auto;
  padding:var(--secao) var(--margem);
  border-top:1px solid var(--linha);
}
.oferta-cabeca{ max-width:46rem; margin-bottom:clamp(3rem,6vw,4.75rem); }
.oferta-lede{ max-width:38rem; color:var(--creme-80); margin:0; }

.contagem{ margin-top:2rem; }
.contagem-rotulo{
  margin:0 0 .5rem;
  font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--creme-64);
}
.contagem-numeros{ display:flex; gap:1.5rem; }
.contagem-numeros span{
  display:flex; flex-direction:column;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--creme-64);
}
.contagem-numeros b{
  /* Manrope e não Prata: na Prata o "1" se lê como "l", e "11" vira "ll". */
  font-family:var(--body); font-weight:300; font-size:2.2rem; line-height:1.1;
  letter-spacing:-.02em; text-transform:none; color:var(--creme);
  font-variant-numeric:tabular-nums;
}
.contagem-fim{ margin-top:1.5rem; color:var(--creme-80); }

/* O combo: trilha à esquerda, preço à direita. */
.combo{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
@media (min-width:960px){
  .combo{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  /* O preço fica parado enquanto a trilha passa ao lado. */
  .combo-preco{ position:sticky; top:6.5rem; }
}

/* A linha do meridiano, agora vertical, costura os quatro cursos. */
.combo-trilha{
  position:relative;
  display:grid; gap:2.4rem;
  margin:0; padding:0 0 0 2.4rem; list-style:none;
}
.combo-trilha::before{
  content:""; position:absolute; left:.45rem; top:.5rem; bottom:.5rem; width:1px;
  background:linear-gradient(180deg, rgba(237,230,216,.28), rgba(237,230,216,.22) 85%, transparent);
}
.combo-item{ position:relative; }
.combo-no{
  position:absolute; left:-2.4rem; top:.28rem;
  width:.9rem; height:.9rem; border-radius:50%;
  display:grid; place-items:center;
}
.combo-no::after{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ouro);
  box-shadow:0 0 0 5px var(--tinta), 0 0 1rem rgba(206,162,72,.5);
}
.combo-item--principal .combo-no::after{
  width:.95rem; height:.95rem;
  background:radial-gradient(circle at 40% 35%, var(--nucleo), var(--ouro-claro) 45%, var(--ouro) 80%);
  box-shadow:0 0 0 5px var(--tinta), 0 0 0 6px rgba(206,162,72,.5), 0 0 1.6rem rgba(206,162,72,.7);
}
.combo-rotulo{
  margin:0 0 .55rem;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creme-64);
}
.combo-nome{
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);
  line-height:1.15; letter-spacing:-.01em;
  color:var(--creme);
  text-wrap:balance;
}
/* Algarismo dentro de título em Prata: na Prata o "1" se lê como "l"
   ("12" vira "l2"). A Manrope fina conversa com o traço da Prata. */
.algarismo{
  font-family:var(--body); font-weight:300;
  font-size:.9em; letter-spacing:-.02em;
  font-variant-numeric:lining-nums;
}
.combo-item--principal .combo-nome{
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.1rem);
  margin-bottom:1rem;
}
.combo-texto{
  max-width:34rem; margin:0 0 1.2rem;
  font-size:1rem; line-height:1.65; color:var(--creme-80);
}
/* Os dez temas do English Foundations: duas colunas a partir de 560 px,
   para a trilha não ficar comprida demais ao lado do card do preço. */
@media (min-width:560px){
  .combo-temas{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:1.5rem; }
}
.combo-item--principal{
  padding-bottom:2.4rem;
  border-bottom:1px solid var(--linha);
}

/* O card do preço. */
.combo-preco{
  display:flex; flex-direction:column;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--tinta-2);
  border:1px solid rgba(237,230,216,.2);
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(237,230,216,.24);
}
.combo-preco .ficha-selo{ position:static; padding:0; background:none; margin:0 0 1.1rem; color:var(--creme-64); }
.combo-preco .preco{ margin:0; padding:0; border:0; }
.combo-preco .preco-num{ font-size:clamp(3.6rem,2.6rem + 3vw,5rem); }
.combo-preco .preco-pre{ font-size:1.25rem; }
.combo-preco .contagem{ margin:1.6rem 0 0; padding-top:1.4rem; border-top:1px solid var(--linha); }
.combo-preco .contagem-numeros b{ font-size:1.9rem; }
.combo-preco .contagem-fim{ margin:1.4rem 0 0; }
.combo-preco .combo-resumo{ margin:1.6rem 0; padding-top:1.4rem; border-top:1px solid var(--linha); }
.combo-preco .garantia{ justify-content:center; margin-top:1rem; }

.ficha-selo{
  margin:0;
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.3; color:var(--creme);
}
.ficha-lista{
  display:grid; gap:.55rem;
  margin:0; padding:0; list-style:none;
}
.ficha-lista li{
  position:relative; padding-left:1.15rem;
  font-size:.95rem; line-height:1.5; color:var(--creme-80);
}
.ficha-lista li::before{
  content:""; position:absolute; left:.1rem; top:.62em;
  width:.32rem; height:.32rem; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--creme-64);
}

.preco-de{ margin:0; font-size:.9rem; color:var(--creme-64); }
.preco-por{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem;
  margin:.2rem 0 0;
  color:var(--ouro);
  font-variant-numeric:lining-nums tabular-nums;
}
.preco-pre{ font-size:1rem; font-weight:700; }
.preco-num{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,2rem + 2vw,3.4rem); line-height:1; letter-spacing:-.01em;
}
.preco-nota{ margin:.5rem 0 0; font-size:.88rem; color:var(--creme-80); }
.garantia{
  display:flex; align-items:center; gap:.45rem;
  margin:.9rem 0 0;
  font-size:.85rem; color:var(--creme-80);
}

/* ---------------------------------------------------------
   Dúvidas
   --------------------------------------------------------- */
.duvidas{
  max-width:calc(52rem + 2 * var(--margem));
  margin:0 auto;
  padding:calc(var(--secao) * .4) var(--margem) calc(var(--secao) * .7);
}
.faq details{ border-bottom:1px solid var(--linha); }
.faq details:first-child{ border-top:1px solid var(--linha); }
.faq summary{
  position:relative;
  padding:1.35rem 3rem 1.35rem 0;
  list-style:none; cursor:pointer;
  font-size:1.05rem; font-weight:600; line-height:1.4;
  color:var(--creme);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before,
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:.85rem; height:1.5px; background:var(--creme-64);
  transition:transform .3s var(--ease);
}
.faq summary::after{ transform:rotate(90deg); }
.faq details[open] summary::after{ transform:rotate(0deg); }
.faq summary:hover{ color:var(--nucleo); }
.faq-corpo{ padding:0 3rem 1.4rem 0; }
/* No celular o texto da resposta usa a largura toda; a margem só existia
   para não passar por baixo do sinal de abrir, que fica na linha da pergunta. */
@media (max-width:640px){ .faq-corpo{ padding-right:0; } }
.faq-corpo p{ margin:0; color:var(--creme-80); }
/* Lista de temas: o nome do tema em creme cheio, a explicação em creme 80. */
.faq-temas{ display:grid; gap:.7rem; margin:0; padding:0; list-style:none; }
.faq-temas li{
  position:relative; padding-left:1.15rem;
  line-height:1.6; color:var(--creme-80);
}
.faq-temas li::before{
  content:""; position:absolute; left:.1rem; top:.7em;
  width:.32rem; height:.32rem; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--creme-64);
}
.faq-temas b{ font-weight:600; color:var(--creme); }

/* ---------------------------------------------------------
   Chamada final
   Porte do componente animated-hero: pílula, título com a palavra que
   gira, parágrafo e dois botões. A palavra gira com a mola do
   framer-motion (rigidez 50, amortecimento 10), traduzida em linear().
   --------------------------------------------------------- */
.convite{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
  padding:clamp(6rem,12vw,10rem) var(--margem);
  text-align:center;
  border-top:1px solid var(--linha);
  background:radial-gradient(60% 55% at 50% 100%, rgba(1,31,69,.6), transparent 72%);
}

.pilula{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:2.4rem; padding:0 1rem;
  border-radius:6px;
  background:var(--tinta-2);
  box-shadow:inset 0 0 0 1px rgba(237,230,216,.14);
  font-size:.82rem; font-weight:600; text-decoration:none;
  color:var(--creme);
  transition:box-shadow .25s var(--ease);
}
.pilula:hover{ box-shadow:inset 0 0 0 1px rgba(237,230,216,.3); }

.convite-titulo{
  display:flex; flex-direction:column; align-items:center;
  margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.5rem,1.5rem + 4.6vw,5.4rem);
  line-height:1; letter-spacing:-.025em;
  color:var(--creme);
}

.giro{
  position:relative;
  display:grid; justify-items:center;
  overflow:hidden;
  padding:0 .3em .1em;
  /* Respiro acima do contorno: sem ele, o traço dourado encosta na linha
     de cima e parece sublinhar a palavra errada. */
  margin-top:.22em;
}
/* Todas as palavras ocupam a mesma célula. A célula fica do tamanho
   da maior, então trocar a palavra nunca empurra o resto. */
.fonetica{
  grid-area:1 / 1;
  display:grid; justify-items:center;
  opacity:0;
  transform:translateY(115%);
  transition:
    transform 1.2s cubic-bezier(.2,1.3,.4,1),
    opacity .5s var(--ease);
}
@supports (transition-timing-function:linear(0, 1)){
  .fonetica{
    transition:
      transform 1.2s linear(0, .0349, .1216, .2372, .3646, .4917, .6101, .7151, .8041, .8766, .9333, .9756, 1.0056, 1.0254, 1.0369, 1.0423, 1.0431, 1.0408, 1.0366, 1.0314, 1.0258, 1.0204, 1.0155, 1.0111, 1.0075, 1.0045, 1.0023, 1.0006, .9995, .9987, 1),
      opacity .5s var(--ease);
  }
}
/* O contorno fica por cima da palavra sem entrar na conta da largura:
   quem dita a largura é a palavra. */
.fonetica{ position:relative; padding-top:.46em; }
.fonetica-contorno{
  position:absolute; top:.02em; left:0;
  width:100%; height:.38em;
  overflow:visible;
}
.fonetica-contorno path{
  fill:none; stroke:var(--ouro); stroke-width:1.1; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1s .3s var(--ease);
}
/* O ponto marca a sílaba tônica. */
.fonetica-contorno circle{
  fill:var(--ouro-claro);
  opacity:0; transition:opacity .4s .5s var(--ease);
}
.fonetica-palavra{ padding:0 .05em; }
.fonetica-ipa{
  margin-top:.4em;
  font-family:var(--fonetica);
  font-size:max(.95rem, .25em); letter-spacing:.03em; line-height:1.2;
  color:var(--creme-64);
}

/* Sem JavaScript, ou com movimento reduzido: a palavra-chave, parada. */
.fonetica:last-child{ opacity:1; transform:none; }
.fonetica:last-child .fonetica-contorno path{ stroke-dashoffset:0; }
.fonetica:last-child .fonetica-contorno circle{ opacity:1; }

/* Com o script no comando, quem decide é a classe. */
.giro--vivo .fonetica:last-child{ opacity:0; transform:translateY(115%); }
.giro--vivo .fonetica path{ stroke-dashoffset:1; }
.giro--vivo .fonetica circle{ opacity:0; }
.giro--vivo .fonetica.is-passada{ opacity:0; transform:translateY(-115%); }
.giro--vivo .fonetica.is-ativa{ opacity:1; transform:none; }
.giro--vivo .fonetica.is-ativa path{ stroke-dashoffset:0; }
.giro--vivo .fonetica.is-ativa circle{ opacity:1; }

.convite-texto{
  max-width:36rem; margin:0;
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem); line-height:1.6;
  color:var(--creme-80);
}
.convite-acoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.rodape{
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  padding:4rem var(--margem) calc(3rem + var(--barra-altura, 0px));
  border-top:1px solid var(--linha);
  text-align:center;
}
.rodape-logo{ width:9.5rem; height:auto; opacity:.92; }
.rodape-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem; }
.rodape-links a{
  display:inline-block; padding:.35rem 0;
  font-size:.88rem; text-decoration:none; color:var(--creme-80);
}
.rodape-links a:hover{ color:var(--creme); text-decoration:underline; text-underline-offset:4px; }
.rodape-colofao{ margin:0; font-size:.78rem; color:var(--creme-64); }

/* ---------------------------------------------------------
   Barra fixa do celular
   --------------------------------------------------------- */
.barra{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem var(--margem) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(5,7,12,.96);
  box-shadow:0 -1px 0 rgba(237,230,216,.16);
  transform:translateY(110%);
  transition:transform .4s var(--ease), visibility 0s;
}
/* Escondida também para o teclado e o leitor de tela, não só para os olhos. */
.barra:not(.is-visivel){
  visibility:hidden;
  transition:transform .4s var(--ease), visibility 0s .4s;
}
.barra[hidden]{ display:none; }
.barra.is-visivel{ transform:none; }
.barra-preco{ margin:0; font-size:.8rem; line-height:1.3; color:var(--creme-80); }
.barra-preco b{
  display:block;
  font-family:var(--display); font-weight:400; font-size:1.1rem; color:var(--ouro);
}
@media (max-width:760px){
  .barra{ display:flex; }
}

/* ---------------------------------------------------------
   Janela antes do checkout
   --------------------------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  padding:1rem;
  background:rgba(2,3,6,.78);
}
.modal[hidden]{ display:none; }
.modal-caixa{
  position:relative;
  width:min(100%,27rem); max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow:auto;
  padding:2.25rem clamp(1.25rem,4vw,2.25rem) 2rem;
  background:var(--tinta-2);
  border:1px solid rgba(237,230,216,.18); border-radius:8px;
  box-shadow:0 2rem 5rem -1rem rgba(0,0,0,.7);
}
.modal-fechar{
  position:absolute; top:.6rem; right:.6rem;
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem;
  border:0; border-radius:6px; background:transparent;
  color:var(--creme-80); cursor:pointer; font-size:1.1rem;
}
.modal-fechar:hover{ color:var(--creme); background:rgba(237,230,216,.06); }
.modal-titulo{
  margin:0 0 .5rem;
  font-family:var(--display); font-weight:400; font-size:2rem; line-height:1.1;
}
.modal-texto{ margin:0 0 1.5rem; font-size:.95rem; color:var(--creme-80); }
.campo{ margin-bottom:1rem; }
.campo label{
  display:block; margin-bottom:.4rem;
  font-size:.85rem; font-weight:600; color:var(--creme);
}
.campo input{
  width:100%; min-height:3rem; padding:0 1rem;
  background:var(--tinta); color:var(--creme);
  border:1px solid rgba(237,230,216,.22); border-radius:6px;
  font:400 1rem/1.2 var(--corpo);
  transition:border-color .2s;
}
.campo input::placeholder{ color:rgba(237,230,216,.55); }
.campo input:focus{ border-color:rgba(237,230,216,.6); outline:none; box-shadow:0 0 0 3px rgba(237,230,216,.18); }
.formDados-validando .campo input:invalid{ border-color:#E58B74; }
#formDados .btn{ margin-top:.5rem; }
.modal-aviso{ margin:1rem 0 0; font-size:.78rem; line-height:1.5; color:var(--creme-64); }
.modal-aviso a{ color:var(--creme-80); }

/* ---------------------------------------------------------
   Aviso de cookies
   --------------------------------------------------------- */
.consent{
  position:fixed; z-index:50;
  left:1rem; right:1rem; bottom:calc(1rem + var(--barra-altura, 0px));
  max-width:30rem;
  padding:1.1rem 1.25rem;
  background:var(--tinta-2);
  border:1px solid var(--linha); border-radius:8px;
  box-shadow:0 1rem 3rem -1rem rgba(0,0,0,.7);
  font-size:.85rem; color:var(--creme-80);
}
.consent[hidden]{ display:none; }
.consent p{ margin:0 0 .9rem; }
.consent-acoes{ display:flex; gap:.6rem; }
@media (max-width:640px){
  .consent{ left:.6rem; right:.6rem; bottom:calc(.6rem + var(--barra-altura, 0px)); padding:.85rem 1rem; font-size:.78rem; line-height:1.45; }
  .consent p{ margin-bottom:.6rem; }
}

/* ---------------------------------------------------------
   Revelação ao rolar
   Só esconde se houver JavaScript para revelar (classe js na raiz).
   --------------------------------------------------------- */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--rd, 0) * 90ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   Movimento reduzido: tudo chega no estado final, parado.
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}