/**
 * go/css/go.css — a cara do EEMC GO.
 *
 * O dono pediu, com prints na mão: "esteticamente, quero que seja idêntica à
 * Netflix + Prime Video". Então as escolhas aqui não são de gosto, são de
 * cópia deliberada do que aqueles dois fazem, com a identidade da EEMC entrando
 * só onde não atrapalha o reconhecimento:
 *
 *   • fundo quase preto com veio azul (#0a0e14) — o #001e3e da marca puxado
 *     até o preto da Netflix, para a capa colorida ser a única cor da tela;
 *   • cabeçalho transparente que endurece ao rolar, como nos dois;
 *   • herói de sangria total com véu na diagonal, e o carrossel de bolinhas
 *     embaixo, como no Prime Video;
 *   • botão primário BRANCO com texto escuro, como o botão principal da Netflix —
 *     e não a cor da marca, porque cor viva em cima de capa colorida
 *     desaparece;
 *   • fileiras de capas em pé que crescem no passar do mouse, com fita no
 *     canto ("MAIS CURTIDO", "NOVO"), como o Prime Video;
 *   • o ciano do logo (#00caff, o "GO") fica no botão de compra, no
 *     "Entrar" e no foco do teclado, onde ele identifica sem competir.
 *     Até 16/09/2026 era o amarelo da EEMC; mudou quando o dono entregou o
 *     logo do GO, porque amarelo ao lado do "GO" ciano brigava com a marca.
 *
 * A capa é a protagonista. Todo o resto é moldura escura.
 */

:root {
  --fundo: #0a0e14;
  --fundo-2: #10161f;
  --nav: #070a10;
  --texto: #ffffff;
  --texto-2: #b3bcc9;
  --texto-3: #7d8899;
  --marca: #00caff;       /* o ciano do "GO" no logo oficial */
  --cta: #ffffff;
  --cta-texto: #0a0e14;
  --aviso: #4fd07a;       /* o verde do "Nº 5 em filmes" do Prime */
  --borda: #ffffff26;
  --raio: 8px;
  --sombra: 0 14px 40px #000a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--texto);
  font: 400 16px/1.5 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* O foco do teclado usa a cor da marca: quem navega de teclado precisa de um
   contorno que não se confunda com decoração. */
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 4px; }

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(16px, 4vw, 56px);
  /* Transparente com um véu por baixo: é o que a Netflix e o Prime fazem para
     o título do herói não brigar com o menu enquanto a página está no topo. */
  background: linear-gradient(180deg, #000000cc 0%, #0000 100%);
  transition: background .25s ease;
}
.nav.solido { background: var(--nav); box-shadow: 0 1px 0 #ffffff14; }

.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 14px;
  font: 800 21px/1 'Inter', system-ui, sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marca img { width: 30px; height: 30px; object-fit: contain; }
/* O logo enviado pelo Hub: altura fixa e largura livre, porque logo de
   streaming costuma ser deitado ("NETFLIX", "prime video"). Um quadrado de 30px
   o reduziria a um borrão. */
.marca img.logo-go { width: auto; height: 34px; max-width: 190px; }
@media (max-width: 820px) { .marca img.logo-go { height: 28px; max-width: 140px; } }
.marca b { font-weight: 800; }
.marca i { font-style: normal; color: var(--marca); }

.nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.nav-links a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: #fff; }
/* A aba atual é uma pílula clara — o "Início" da Netflix e o "Página inicial"
   do Prime são exatamente isso. */
.nav-links a.aqui { background: #ffffff1f; color: #fff; }

.nav-dir { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icone-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 0; border-radius: 50%;
  background: transparent; color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.icone-btn:hover { background: #ffffff1f; }

.avatar {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 5px;
  border: 0; border-radius: 999px;
  background: #ffffff14; color: #fff;
  cursor: pointer; font-size: 14px; font-weight: 600;
}
.avatar:hover { background: #ffffff2b; }
.avatar span {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px;
  background: linear-gradient(140deg, #1e5aa8, #0a2a52);
  font: 800 13px/1 'Inter', sans-serif;
}
.avatar small { color: var(--texto-2); font-weight: 600; }

.btn-entrar {
  /* 11px de folga dá 42px de altura: 38 ficava abaixo do mínimo confortável
     para o polegar, e é o botão que a compradora mais procura no celular. */
  padding: 11px 18px;
  border: 0; border-radius: 6px;
  background: var(--marca); color: #001e3e;
  font-weight: 800; font-size: 14.5px; cursor: pointer;
}
.btn-entrar:hover { filter: brightness(1.08); }

/* O menu da conta, ancorado no avatar. */
.menu-conta {
  position: absolute;
  top: 58px; right: clamp(16px, 4vw, 56px);
  width: 250px;
  padding: 8px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: #0c1118f2;
  backdrop-filter: blur(14px);
  box-shadow: var(--sombra);
}
.menu-conta p { margin: 8px 10px 10px; color: var(--texto-3); font-size: 13px; }
.menu-conta p b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 2px; }
.menu-conta hr { border: 0; border-top: 1px solid #ffffff14; margin: 6px 0; }
.menu-conta a, .menu-conta button {
  display: block; width: 100%;
  padding: 9px 10px;
  border: 0; border-radius: 7px;
  background: none; color: var(--texto-2);
  text-align: left; font-size: 14px; font-weight: 600; cursor: pointer;
}
.menu-conta a:hover, .menu-conta button:hover { background: #ffffff14; color: #fff; }

/* ── Herói ───────────────────────────────────────────────────────────────── */

.heroi {
  position: relative;
  min-height: min(84vh, 760px);
  display: flex;
  align-items: flex-end;
  padding: 120px clamp(16px, 4vw, 56px) 54px;
  overflow: hidden;
}
.heroi-fundo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 22%;
  /* A imagem entra devagar quando o carrossel troca: corte seco em tela cheia
     parece defeito de carregamento. */
  opacity: 0; transition: opacity .7s ease;
}
.heroi-fundo.vendo { opacity: 1; }
/*
 * Dois véus, e os dois são necessários.
 *
 * O de baixo para cima costura a capa ao fundo da página, senão a fileira de
 * capas começa numa linha reta que denuncia a montagem. O da esquerda para a
 * direita é o que deixa o texto legível em cima de QUALQUER capa — e capa de
 * curso infantil é clara e cheia de detalhe, onde texto branco sem véu
 * simplesmente desaparece.
 */
.heroi::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, var(--fundo) 0%, #0a0e14cc 18%, #0000 58%),
    linear-gradient(90deg, #060a10f2 0%, #060a10b8 34%, #0000 72%);
}
.heroi-conteudo { position: relative; z-index: 2; max-width: 620px; }

/*
 * O TÍTULO QUE SÓ O LEITOR DE TELA LÊ.
 *
 * As capas largas dos cursos já trazem a arte do nome desenhada (é assim que o
 * Prime Video faz: o logo do filme está na própria imagem). Escrever o título
 * em texto por cima dela mostrava "Guardiões do Tesouro" duas vezes, uma em
 * cima da outra. O <h1> continua no HTML, porque quem navega por leitor de
 * tela não vê arte nenhuma e precisa saber de que curso é este bloco.
 */
.so-leitor {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.heroi-selo {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  color: var(--aviso); font-size: 14.5px; font-weight: 800;
}
.heroi h1 {
  margin: 0 0 14px;
  font: 800 clamp(34px, 5.6vw, 66px)/1.02 'Inter', system-ui, sans-serif;
  letter-spacing: -.035em;
  text-shadow: 0 3px 24px #000c;
}
.heroi-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 14px;
  color: var(--texto-2); font-size: 14.5px; font-weight: 600;
}
.heroi-meta .ponto { width: 4px; height: 4px; border-radius: 50%; background: var(--texto-3); }
.etiqueta-idade {
  padding: 1px 7px; border-radius: 3px;
  background: #1e6fd9; color: #fff;
  font: 800 12.5px/1.5 'Inter', sans-serif;
}
.heroi p.sinopse {
  margin: 0 0 26px;
  max-width: 540px;
  color: #e4e9f0; font-size: 16.5px; line-height: 1.55;
  text-shadow: 0 2px 12px #000a;
}

.heroi-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* O ponto de todas as bolinhas do carrossel do Prime Video. */
.heroi-pontos {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 20px;
  display: flex; justify-content: center; gap: 9px;
}
.heroi-pontos button {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: #ffffff4d; cursor: pointer;
  transition: background .2s, transform .2s;
}
.heroi-pontos button.aqui { background: #fff; transform: scale(1.25); }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 27px;
  border: 0; border-radius: var(--raio);
  font-size: 16px; font-weight: 800; cursor: pointer;
  transition: transform .12s, filter .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--cta); color: var(--cta-texto); }
.btn-primario:hover { background: #e8edf5; }
.btn-fantasma { background: #ffffff2b; color: #fff; backdrop-filter: blur(6px); }
.btn-fantasma:hover { background: #ffffff42; }
.btn-marca { background: var(--marca); color: #001e3e; }
.btn-marca:hover { filter: brightness(1.08); }
.btn-redondo { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.btn-grande { padding: 16px 34px; font-size: 17px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Fileiras de capas ───────────────────────────────────────────────────── */

main { position: relative; z-index: 3; padding-bottom: 80px; }

.fileira { margin-top: 38px; }
.fileira-topo {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 clamp(16px, 4vw, 56px) 14px;
}
.fileira-topo h2 {
  margin: 0;
  font: 800 21px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: -.02em;
}
.fileira-topo a { color: var(--texto-2); font-size: 14px; font-weight: 700; }
.fileira-topo a:hover { color: #fff; }

.trilho { position: relative; }
.capas {
  display: flex; gap: 14px;
  /* Topo com topo. Sem isto cada capa esticava até a mais alta da fileira e o
     botão centralizava o conteúdo na vertical: a capa com o texto de UMA linha
     embaixo descia, e a de duas linhas subia (visto no ar pelo dono em
     17/09/2026, "cada imagem fica em uma altura diferente"). */
  align-items: flex-start;
  padding: 6px clamp(16px, 4vw, 56px) 30px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.capas::-webkit-scrollbar { display: none; }

/* As setas do Prime Video: só aparecem quando o mouse está na fileira, e nunca
   no toque — no celular a pessoa arrasta, e uma seta ali só cobre capa. */
.seta {
  position: absolute; top: 0; bottom: 30px;
  z-index: 5;
  width: 52px; padding: 0;
  border: 0; background: #060a10cc; color: #fff;
  font-size: 26px; cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
.trilho:hover .seta { opacity: 1; }
.seta:hover { background: #060a10ee; }
.seta.esq { left: 0; }
.seta.dir { right: 0; }
@media (hover: none) { .seta { display: none; } }

.capa {
  position: relative;
  /* A largura da capa em pé mora numa variável porque a capa ALARGADA (o
     efeito do Prime Video, mais abaixo) é calculada a partir dela. */
  --w: clamp(146px, 19vw, 208px);
  flex: 0 0 var(--w);
  scroll-snap-align: start;
  border: 0; padding: 0;
  background: none; color: #fff;
  text-align: left; cursor: pointer;
}
.capa figure {
  position: relative;
  margin: 0 0 10px;
  border-radius: var(--raio);
  overflow: hidden;
  /* Altura fixa, e não aspect-ratio: quando a capa alarga, a largura cresce e
     a altura tem de ficar parada. Com aspect-ratio a capa cresceria para baixo
     também e empurraria a fileira inteira. 2528/1696 é a proporção das capas. */
  height: calc(var(--w) * 2528 / 1696);
  background: linear-gradient(160deg, #143c55, #0a2548);
  box-shadow: var(--sombra);
  transition: transform .22s ease, box-shadow .22s ease;
}
.capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capa:hover figure, .capa:focus-visible figure {
  transform: scale(1.055);
  box-shadow: 0 20px 48px #000c;
}
.capa b { display: block; font: 700 15px/1.3 'Inter', sans-serif; }
.capa small { color: var(--texto-3); font-size: 13px; font-weight: 600; }

/* A fita no canto do Prime Video ("MAIS CURTIDO", "NOVO FILME"). */
.fita {
  position: absolute; top: 0; right: 0;
  padding: 5px 9px;
  border-bottom-left-radius: 6px;
  background: #e8edf5; color: #0a0e14;
  font: 800 10.5px/1 'Inter', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
}
.fita.gratis { background: var(--aviso); color: #062d15; }
.fita.breve  { background: #e8eef6; color: #123e6f; }

/*
 * CURSO TRANCADO.
 *
 * Um véu escuro e um cadeado, e a capa continua colorida por baixo: a pessoa
 * tem de VER o que está comprando. Capa em cinza não vende, e capa sem véu não
 * avisa que está fechada — as duas coisas erradas ao mesmo tempo.
 */
.capa.trancado figure::after {
  content: ''; position: absolute; inset: 0; background: #060a1073;
}
.capa.trancado img { filter: saturate(.92); }
.cadeado {
  position: absolute; z-index: 2;
  bottom: 10px; left: 10px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #060a10cc;
  backdrop-filter: blur(4px);
}
.cadeado svg { width: 16px; height: 16px; }

/* ── Ofertas ─────────────────────────────────────────────────────────────── */

.ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  padding: 6px clamp(16px, 4vw, 56px) 20px;
}
.oferta {
  display: flex; flex-direction: column;
  padding: 22px;
  border: 1px solid var(--borda); border-radius: 12px;
  background: linear-gradient(165deg, #131b26, #0c1118);
}
.oferta h3 { margin: 0 0 6px; font: 800 19px/1.25 'Inter', sans-serif; letter-spacing: -.02em; }
.oferta .chamada { margin: 0 0 16px; color: var(--texto-2); font-size: 14.5px; }
.oferta ul { margin: 0 0 18px; padding: 0; list-style: none; }
.oferta li {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0;
  color: #dbe3ec; font-size: 14.5px; font-weight: 600;
}
.oferta li svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--aviso); }
.oferta .preco { margin-top: auto; margin-bottom: 16px; }
.oferta .preco s { display: block; color: var(--texto-3); font-size: 14px; }
.oferta .preco b { font: 800 30px/1 'Inter', sans-serif; letter-spacing: -.03em; }
.oferta .preco i { font-style: normal; color: var(--texto-3); font-size: 14px; font-weight: 600; }

/* ── Páginas internas (login, oferta, obrigado) ──────────────────────────── */

.centro {
  display: grid; place-items: center;
  min-height: 100vh;
  padding: 92px clamp(16px, 5vw, 24px) 48px;
}
.cartao {
  width: 100%; max-width: 440px;
  padding: clamp(22px, 5vw, 38px);
  border: 1px solid var(--borda); border-radius: 14px;
  background: #0c1118e6;
  backdrop-filter: blur(16px);
  box-shadow: var(--sombra);
}
.cartao.largo { max-width: 760px; }
/* Item de grade não encolhe abaixo do próprio conteúdo sem isto: foi o que fez
   a página de oferta rolar de lado em 320px, mesmo com largura 100%. */
.centro > * { min-width: 0; }
@media (max-width: 400px) {
  .cartao { padding: 20px 16px; }
  .oferta { padding: 18px 16px; }
  /* No aparelho mais estreito, botão de texto comprido quebra linha em vez de
     empurrar a página para o lado. */
  .btn { white-space: normal; text-align: center; }
}
.cartao h1 { margin: 0 0 8px; font: 800 27px/1.15 'Inter', sans-serif; letter-spacing: -.03em; }
.cartao > p { margin: 0 0 24px; color: var(--texto-2); font-size: 15px; }

.campo { margin-bottom: 15px; }
.campo label {
  display: block; margin-bottom: 6px;
  color: var(--texto-2); font-size: 13.5px; font-weight: 700;
}
.campo input, .campo select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #ffffff2b; border-radius: 7px;
  background: #ffffff0f; color: #fff;
  font-size: 16px;
}
.campo input:focus, .campo select:focus { border-color: var(--marca); background: #ffffff17; }
.campo input::placeholder { color: var(--texto-3); }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.aviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14.5px; font-weight: 600;
}
.aviso.erro { background: #4a1116; color: #ffc9ce; }
.aviso.ok   { background: #10331f; color: #b9f0cd; }

.abas { display: flex; gap: 6px; margin-bottom: 22px; padding: 4px; border-radius: 999px; background: #ffffff0f; }
.abas button {
  flex: 1;
  padding: 10px;
  border: 0; border-radius: 999px;
  background: none; color: var(--texto-2);
  font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.abas button.aqui { background: #ffffff1f; color: #fff; }

.rodape-nota { margin: 20px 0 0; color: var(--texto-3); font-size: 13px; line-height: 1.6; }
.rodape-nota a { color: var(--texto-2); text-decoration: underline; }

/* A lista de filhos do checkout: nome e nascimento, e nada mais. */
.filho { display: grid; grid-template-columns: 1fr 150px 44px; gap: 10px; margin-bottom: 10px; }
/*
 * Os campos da criança não moram dentro de um `.campo`, e por isso saíam com a
 * cara padrão do navegador: brancos, com 21px de altura — pequenos demais para
 * o dedo e destoando do resto do checkout. Medido em 375px, 16/09/2026.
 */
.filho input {
  width: 100%; min-width: 0;
  padding: 12px 12px;
  border: 1px solid #ffffff2b; border-radius: 7px;
  background: #ffffff0f; color: #fff;
  font: inherit; font-size: 16px;   /* 16px: abaixo disso o iPhone dá zoom ao tocar */
  color-scheme: dark;
}
.filho input:focus { border-color: var(--marca); background: #ffffff17; }
.filho input::placeholder { color: var(--texto-3); }
.filho button {
  border: 0; border-radius: 7px;
  background: #ffffff0f; color: var(--texto-2);
  cursor: pointer; font-size: 18px;
}
.filho button:hover { background: #4a1116; color: #ffc9ce; }
@media (max-width: 560px) {
  .filho { grid-template-columns: 1fr 44px; }
  .filho input[type="date"] { grid-column: 1; }
}

.qr { display: grid; place-items: center; gap: 14px; text-align: center; }
.qr img { width: 230px; height: 230px; border-radius: 10px; background: #fff; padding: 8px; }
.qr code {
  display: block; width: 100%;
  padding: 11px; border-radius: 7px;
  background: #ffffff0f;
  font: 12px/1.5 ui-monospace, monospace;
  color: var(--texto-2);
  word-break: break-all; text-align: left;
}

/* ── Vazio e carregando ──────────────────────────────────────────────────── */

.esqueleto {
  border-radius: var(--raio);
  background: linear-gradient(100deg, #131b26 30%, #1c2734 50%, #131b26 70%);
  background-size: 220% 100%;
  animation: brilho 1.3s linear infinite;
}
@keyframes brilho { to { background-position: -120% 0; } }

.vazio { padding: 60px clamp(16px, 4vw, 56px); color: var(--texto-3); text-align: center; }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */

.rodape {
  padding: 40px clamp(16px, 4vw, 56px) 60px;
  border-top: 1px solid #ffffff14;
  color: var(--texto-3); font-size: 13.5px; line-height: 1.7;
}
.rodape a { color: var(--texto-2); }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape .fontes { max-width: 860px; margin-top: 18px; }
.rodape .fontes b { color: var(--texto-2); }

/* ── Celular ─────────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  /* No estreito o menu do meio sai: a marca, a busca e a conta bastam, e é o
     que a Netflix e o Prime fazem no celular. */
  .nav-links { display: none; }

  /*
   * O HERÓI NO CELULAR: a capa em pé inteira em cima, o texto num degrau
   * escuro embaixo.
   *
   * No computador o véu é diagonal, porque o texto fica ao lado da arte. Aqui
   * não há "ao lado": a tela é uma coluna. Então o véu vira de baixo para cima,
   * forte, e o texto se apoia nele. Sem isso a sinopse cai em cima do desenho
   * e não se lê nada — visto em 375×812, com a capa do Guardiões.
   */
  .heroi {
    min-height: min(88vh, 700px);
    padding: 92px 16px 46px;
  }
  .heroi-fundo { background-position: center top; background-size: cover; }
  .heroi::after {
    background:
      linear-gradient(0deg, var(--fundo) 0%, #080c12f7 31%, #080c12de 48%, #0000 78%),
      linear-gradient(180deg, #060a10c9 0%, #0000 22%);
  }
  .heroi h1 { font-size: clamp(28px, 8vw, 38px); }
  .heroi p.sinopse { font-size: 15px; margin-bottom: 20px; }
  .heroi-meta { gap: 8px; font-size: 13.5px; }

  /* Os dois botões dividem a linha, como no aplicativo da Netflix. Empilhados
     eles empurravam o carrossel de bolinhas para fora da primeira tela. */
  .heroi-acoes { gap: 10px; }
  .heroi-acoes .btn { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 15px; }

  .btn { padding: 12px 20px; font-size: 15px; }
  .dupla { grid-template-columns: 1fr; }
  .fileira { margin-top: 26px; }
  .fileira-topo h2 { font-size: 18px; }
}


/* ── A capa que alarga (o efeito do Prime Video) ─────────────────────────────
 *
 * Pedido do dono (16/09/2026), com vídeo do Prime na mão: o mouse para em cima
 * da capa em pé, ela ALARGA ali mesmo para a versão deitada, empurrando as
 * vizinhas, e uns dois segundos depois começa o vídeo de abertura deitado.
 *
 * A altura não muda; só a largura, de "em pé" para 16:9. Por isso a conta:
 * altura = w × 2528/1696, e a largura deitada = altura × 16/9 = w × 2,65.
 *
 * Só em aparelho com mouse. No toque não existe "parar em cima", e um toque
 * que alargasse em vez de abrir seria um clique a mais para a mãe no celular.
 */
@media (hover: hover) and (pointer: fine) {
  .capas .capa { transition: flex-basis .42s cubic-bezier(.2, .7, .2, 1); }
  .capas .capa:hover figure { transform: none; }
  /* min(): numa janela estreita com mouse a capa deitada passaria da largura da
     tela. Aí ela fica do tamanho que cabe, e a arte se ajusta cortando as bordas. */
  .capas .capa.expandido { flex-basis: min(calc(var(--w) * 2528 / 1696 * 16 / 9), calc(100vw - 48px)); }
  .capas .capa.expandido figure { box-shadow: 0 22px 50px #000d; }
  /* O encaixe da fileira desfazia a rolagem que mostra a capa alargada inteira:
     ela rolava e voltava para a capa mais próxima (medido em 16/09/2026).
     Enquanto há uma capa alargada, a fileira não encaixa. */
  .capas:has(.capa.expandido) { scroll-snap-type: none; }
}

.pv-larga, .pv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.capa.expandido .pv-larga { opacity: 1; }
.capa.tocando .pv-video { opacity: 1; }
.capa.expandido .cadeado { opacity: 0; }

/* O véu que deixa o texto legível em cima da arte ou do vídeo. */
.pv-veu {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #05080dee 0%, #05080d99 34%, #0000 64%),
              linear-gradient(90deg, #05080dcc 0%, #0000 55%);
  opacity: 0; transition: opacity .35s ease;
}
.capa.expandido .pv-veu { opacity: 1; }

.pv-info {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease .15s, transform .3s ease .15s;
  pointer-events: none;
}
.capa.expandido .pv-info { opacity: 1; transform: none; pointer-events: auto; }
.pv-info .pv-selo { display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  color: var(--aviso); font-size: 12.5px; font-weight: 800; }
.pv-info .pv-selo.fechado { color: var(--texto-2); }
.pv-info .pv-nome {
  font: 800 clamp(17px, 1.5vw, 22px)/1.1 'Inter', sans-serif;
  letter-spacing: -.02em; margin-bottom: 10px;
  text-shadow: 0 2px 12px #000c;
}
/* A capa deitada já traz a arte do nome; o nome em texto só aparece quando o
   vídeo entra no lugar dela. */
.capa.titulo-na-arte:not(.tocando) .pv-nome { display: none; }
.pv-acoes { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pv-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 7px;
  background: #fff; color: #0a0e14;
  font-size: 14px; font-weight: 800; white-space: nowrap;
}
.pv-btn:hover { background: #e8edf5; }
.pv-redondo {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffffff33; color: #fff;
}
.pv-redondo:hover { background: #ffffff55; }
.pv-meta { color: var(--texto-2); font-size: 12.5px; font-weight: 600; }

.pv-som {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #05080daa; color: #fff;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.capa.tocando .pv-som { opacity: 1; pointer-events: auto; }
.pv-som:hover { background: #05080dee; }

@media (prefers-reduced-motion: reduce) {
  .capas .capa, .pv-larga, .pv-video, .pv-veu, .pv-info { transition: none !important; }
}


/* ── O modal de detalhe do curso (o jeito da Netflix) ────────────────────────
 *
 * Pedido do dono (16/09/2026), com os prints da Netflix: "Mais informações"
 * abria a caixinha de alerta do navegador. As medidas saem dos prints:
 *
 *   • o fundo escurece a vitrine e o modal desce por cima, com 850px de largura
 *     máxima, cantos arredondados e rolagem própria;
 *   • o topo é a arte deitada em 16:9, com um véu que a costura ao corpo do
 *     modal e o botão branco em cima;
 *   • o corpo tem duas colunas (resumo à esquerda, ficha à direita), depois a
 *     lista numerada de aulas, a grade de "Outros cursos" e o "Sobre".
 *
 * O fundo do modal é um pouco mais claro que o da página (#141a22), como o
 * #181818 da Netflix sobre o #141414: é o que faz o modal se destacar sem borda.
 */

body.det-trava { overflow: hidden; }

.det-fundo {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 32px 16px 48px;
  background: #000000b8;
  animation: det-entra-fundo .2s ease;
}
.det {
  position: relative;
  max-width: 850px; margin: 0 auto;
  border-radius: 10px; overflow: hidden;
  background: #141a22;
  box-shadow: 0 30px 80px #000;
  animation: det-entra .28s cubic-bezier(.2, .7, .2, 1);
}
@keyframes det-entra-fundo { from { opacity: 0; } }
@keyframes det-entra { from { opacity: 0; transform: translateY(24px) scale(.98); } }

.det-fechar {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: #141a22; color: #fff; font-size: 17px; cursor: pointer;
}
.det-fechar:hover { background: #2a313b; }

/* Topo */
.det-topo { position: relative; aspect-ratio: 16 / 9; background: #0a0e14; }
.det-arte, .det-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.det-video { opacity: 0; transition: opacity .6s ease; }
.det-topo.tocando .det-video { opacity: 1; }
.det-veu {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #141a22 0%, #141a22cc 12%, #0000 48%),
              linear-gradient(90deg, #0a0e14aa 0%, #0000 50%);
}
.det-topo-conteudo { position: absolute; left: 48px; right: 110px; bottom: 44px; }
.det-nome {
  margin: 0 0 18px;
  font: 800 clamp(26px, 4vw, 44px)/1.05 'Inter', system-ui, sans-serif;
  letter-spacing: -.03em; text-shadow: 0 3px 20px #000c;
}
/* A arte deitada já traz o nome; o texto só entra quando o vídeo cobre a arte. */
.det-topo.titulo-na-arte:not(.tocando) .det-nome { visibility: hidden; }
.det-botoes { display: flex; gap: 10px; }
.det-botoes .btn { padding: 11px 26px; font-size: 16px; }
.det-som {
  position: absolute; right: 48px; bottom: 50px;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #ffffff80; background: #0a0e1466; color: #fff; cursor: pointer;
}
.det-som:hover { border-color: #fff; background: #0a0e14aa; }

/* Corpo */
.det-corpo { padding: 4px 48px 40px; }
.det-resumo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
.det-selo { display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  color: var(--aviso); font-size: 14.5px; font-weight: 800; }
.det-selo.fechado { color: var(--texto-2); }
.det-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  margin-bottom: 14px; color: var(--texto-2); font-size: 15px; font-weight: 600; }
.det-sinopse { margin: 0; color: #e8edf3; font-size: 16px; line-height: 1.55; }
.det-dir p, .det-sobre p { margin: 0 0 10px; color: #e8edf3; font-size: 14px; line-height: 1.5; }
.det-dir span:first-child, .det-sobre p > span:first-child { color: var(--texto-3); }
.det-nota { color: var(--texto-3) !important; font-style: italic; }

.det-secao { margin-top: 40px; }
.det-secao h3 { margin: 0 0 16px; font: 800 24px/1.2 'Inter', sans-serif; letter-spacing: -.02em; }
.det-secao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.det-secao-topo h3 { margin: 0; }
.det-bloco {
  padding: 10px 14px; border-radius: 4px;
  border: 1px solid #ffffff66; background: #242a33; color: #fff;
  font: 700 15px 'Inter', sans-serif; cursor: pointer;
}
.det-bloco:focus-visible { outline: 3px solid var(--marca); }

.det-bloco-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin: 18px 0 10px; color: var(--texto-2); font-size: 14px;
}
.det-bloco-titulo b { color: #fff; font-size: 15px; }

.det-lista { list-style: none; margin: 0; padding: 0; }
.det-aula {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center;
  gap: 16px; padding: 20px 22px;
  border-bottom: 1px solid #ffffff1a; border-radius: 6px;
  cursor: pointer;
}
.det-aula:first-child { background: #262d37; }
.det-aula:hover, .det-aula:focus-visible { background: #2c343f; outline: none; }
.det-num { color: #d2d8e0; font: 400 26px/1 'Inter', sans-serif; text-align: center; }
.det-aula-topo { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.det-aula-topo b { font-size: 15.5px; }
.det-min { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  color: #e8edf3; font-size: 14px; font-weight: 600; }
.det-aula p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.45; }

/* A setinha de "ver todas", sobre a linha, como na Netflix. */
.det-mais { position: relative; height: 40px; margin-top: 6px; border-bottom: 2px solid #ffffff33; }
.det-mais button {
  position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid #ffffff80; background: #141a22; color: #fff; cursor: pointer;
}
.det-mais button:hover { border-color: #fff; }

.det-carregando { padding: 28px 0; color: var(--texto-3); }

/* Outros cursos */
.det-outros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.det-outro {
  overflow: hidden; border-radius: 6px; background: #262d37;
  cursor: pointer; transition: background .15s;
}
.det-outro:hover, .det-outro:focus-visible { background: #2f3742; outline: none; }
.det-outro-img { position: relative; aspect-ratio: 16 / 9; }
.det-outro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.det-outro-fita {
  position: absolute; top: 8px; right: 10px;
  color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 6px #000;
}
.det-outro-corpo { padding: 14px 16px 18px; }
.det-outro-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
  color: var(--texto-2); font-size: 14px; font-weight: 600; }
.det-outro-mais {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #ffffff99; color: #fff; font-size: 20px; line-height: 1;
}
.det-outro b { display: block; margin-bottom: 6px; font-size: 15px; }
.det-outro p {
  margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

.det-sobre h3 { font-weight: 400; }
.det-sobre h3 b { font-weight: 800; }

/* Celular: o modal vira a tela inteira, como no aplicativo da Netflix. */
@media (max-width: 700px) {
  .det-fundo { padding: 0; }
  .det { border-radius: 0; min-height: 100%; }
  .det-topo-conteudo { left: 18px; right: 70px; bottom: 22px; }
  .det-som { right: 18px; bottom: 24px; }
  .det-corpo { padding: 4px 18px 32px; }
  .det-resumo { grid-template-columns: 1fr; gap: 18px; }
  .det-aula { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 12px; }
  .det-num { font-size: 20px; }
  .det-aula-topo { flex-direction: column; gap: 2px; }
  .det-secao-topo { flex-wrap: wrap; }
  .det-bloco { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .det-fundo, .det { animation: none; }
}


/* ── Minha lista e avaliação (o "+" e o polegar da Netflix) ──────────────────
 *
 * Pedido do dono (16/09/2026). O "+" guarda na Minha lista; o polegar abre, em
 * pílula por cima dele, as três avaliações da Netflix: "Não é para mim",
 * "Gostei" e "Amei!". O nome de cada botão aparece num balão claro em cima,
 * como no print que ele mandou.
 */
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg-botao, .lg-opcao {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: #fff; cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.lg-botao { border: 2px solid #ffffffb3; background: #2a2f37cc; }
.lg-botao:hover, .lg-botao:focus-visible { border-color: #fff; background: #3a414c; outline: none; }
.lg-botao.ativo { border-color: #fff; }
.lg.pequeno .lg-botao, .lg.pequeno .lg-opcao { width: 36px; height: 36px; }

.lg-nota { position: relative; display: inline-grid; }
.lg-opcoes {
  position: absolute; z-index: 6; top: 50%; left: 50%;
  display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; background: #2a2f37;
  box-shadow: 0 8px 24px #000a;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.lg-opcao:hover, .lg-opcao:focus-visible { background: #ffffff26; outline: none; transform: scale(1.08); }
.lg-opcao.ativo { background: #ffffff33; }
@media (hover: hover) {
  .lg-nota:hover .lg-opcoes, .lg-nota:focus-within .lg-opcoes {
    opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  }
}
.lg-nota.aberta .lg-opcoes { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

/* O balão com o nome do botão. */
.lg [data-dica]:hover::after, .lg [data-dica]:focus-visible::after {
  content: attr(data-dica);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  padding: 6px 11px; border-radius: 4px;
  background: #e8edf5; color: #0a0e14;
  font: 700 13px/1.2 'Inter', sans-serif; white-space: nowrap;
  box-shadow: 0 4px 14px #0008; pointer-events: none;
}


/* ── Premium: quem assina o Educando em Casa ─────────────────────────────────
 *
 * Pedido do dono (17/09/2026): a família assinante, dentro do GO, é tratada
 * como premium. A coroa é a MESMA do brasão (recortada dele, em
 * assets/marca/go/coroa.png), e entra como máscara para a cor ser do CSS.
 */
.coroa {
  display: inline-block; flex: none;
  width: 24px; height: 12px;
  background: #fff;
  -webkit-mask: url(/assets/marca/go/coroa.png) center / contain no-repeat;
          mask: url(/assets/marca/go/coroa.png) center / contain no-repeat;
}

.avatar span { position: relative; }
.avatar.premium { padding-right: 12px; }
.avatar.premium span { box-shadow: 0 0 0 2px #fff, 0 0 14px #00caff55; }
/* A coroa pousada em cima da foto, como no brasão ela pousa em cima do escudo. */
.avatar.premium span .coroa {
  position: absolute; left: 50%; top: -13px;
  width: 22px; height: 11px;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 2px #000c);
}
.avatar small { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.avatar small em {
  font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--marca);
}
@media (max-width: 560px) {
  /* No celular o cabeçalho é apertado: fica a coroa na foto, sai o texto. */
  .avatar small em { display: none; }
}

.menu-conta .menu-premium {
  display: flex; align-items: center; gap: 10px;
  margin: 0 4px 6px; padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(120deg, #0b2d57, #0a1a30);
  border: 1px solid #00caff40;
  color: var(--texto-2); font-size: 12.5px; line-height: 1.35;
}
.menu-conta .menu-premium .coroa { width: 28px; height: 14px; }
.menu-conta .menu-premium b { display: block; color: #fff; font-size: 13.5px; }

/* ── A plataforma no topo e na fileira ───────────────────────────────────── */

.heroi-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity .9s ease;
  pointer-events: none;
}
.heroi.tocando .heroi-video { opacity: 1; }

.heroi-selo .coroa { width: 26px; height: 13px; }
.heroi-selo.selo-premium { color: #fff; }
.heroi-selo.selo-plat { color: var(--texto-2); letter-spacing: .02em; }

.heroi.heroi-plat .heroi-conteudo { max-width: 860px; }
.heroi.heroi-plat p.sinopse { max-width: 560px; }
.heroi-marca {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px);
  margin: 2px 0 18px;
  transform-origin: left bottom;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.heroi-brasao {
  width: clamp(76px, 7.4vw, 116px); height: auto;
  filter: drop-shadow(0 6px 24px #000b);
}
.heroi h1.heroi-serif {
  margin: 0;
  font: 700 clamp(44px, 6vw, 88px)/.9 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-shadow: 0 4px 30px #000d;
}
/* Quando o vídeo já tomou a tela, a sinopse recolhe e a marca encolhe um
   pouco, como o título de um trailer na Netflix.
   O recolher usa grid-template-rows (1fr → 0fr), e não altura nem margem:
   animar altura faz o navegador refazer a página a cada quadro, com o vídeo
   tocando atrás. */
.heroi-recolhe {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .8s ease, opacity .6s ease;
}
.heroi-recolhe > div { min-height: 0; overflow: hidden; }
.heroi.assentado .heroi-recolhe { grid-template-rows: 0fr; opacity: 0; }
.heroi.assentado .heroi-marca { transform: scale(.8); }

.heroi-som {
  position: absolute; z-index: 3;
  /* No alto, à direita, como no Prime Video: embaixo à direita fica o brasão
     que o próprio vídeo institucional traz gravado, e no meio da altura ficam
     as setas do carrossel. */
  right: clamp(60px, 5vw, 72px); top: 104px;
  display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1.5px solid #ffffffb3; border-radius: 50%;
  background: #05080d66; color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, background .15s;
}
.heroi-som:hover { background: #ffffff2b; }
.heroi.tocando .heroi-som { opacity: 1; pointer-events: auto; }
/* O navegador recusou o som: o botão chama, em vez de esperar ser achado. */
.heroi-som.pedir::after {
  content: 'Ativar som';
  position: absolute; right: 58px; top: 50%; transform: translateY(-50%);
  padding: 7px 13px; border-radius: 999px;
  background: #05080dcc; color: #fff;
  font: 700 13.5px/1 'Inter', sans-serif; white-space: nowrap;
  animation: pedir-som 1.8s ease-in-out 3;
}
@keyframes pedir-som { 50% { transform: translateY(-50%) translateX(-4px); } }

@media (max-width: 820px) {
  /* No celular o fundo é a capa em pé, que traz o brasão e o nome desenhados
     embaixo. O texto do slide cai justamente ali, e a marca da arte aparecia
     apagada atrás da sinopse (visto em 390×844). Então a capa ocupa só a
     largura, o véu fica sólido da metade para baixo e esconde a marca da
     arte, e a marca escrita assume. As cenas ficam na metade de cima. */
  .heroi.heroi-plat .heroi-fundo { background-size: 100% auto; background-position: center top; }
  /* O véu se mede pela LARGURA (vw), porque a capa ocupa a largura: a marca
     desenhada começa a 77% da largura, abaixo das cenas (que acabam em 59%). */
  .heroi.heroi-plat::after {
    background:
      linear-gradient(180deg, #0000 0, #0000 54vw, #0a0e14e6 68vw, var(--fundo) 74vw, var(--fundo) 100%),
      linear-gradient(0deg, var(--fundo) 0%, #080c12d9 40%, #0000 70%),
      linear-gradient(180deg, #060a10c9 0%, #0000 22%);
  }
  .heroi-marca { gap: 12px; margin-bottom: 14px; }
  .heroi-brasao { width: 54px; }
  .heroi h1.heroi-serif { font-size: clamp(30px, 8.6vw, 44px); white-space: normal; }
  .heroi-som { display: none; }
}

/* A capa deitada da plataforma: brasão e nome escritos, porque o vídeo cobre a arte. */
.pv-info .pv-selo.premium { color: #fff; }
.pv-info .pv-selo .coroa { width: 20px; height: 10px; }
.pv-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pv-marca img { width: 38px; height: auto; filter: drop-shadow(0 2px 8px #000c); }
.pv-marca span {
  font: 700 clamp(22px, 2vw, 28px)/1 'Cormorant Garamond', Georgia, serif;
  text-shadow: 0 2px 12px #000c;
}

/* "Liberado para você · Você assina a plataforma Educando em Casa": a bolinha
   no meio, e a segunda frase quebra inteira para a linha de baixo quando não
   cabe (celular), em vez de partir no meio. */
.heroi-selo, .pv-info .pv-selo, .det-selo { flex-wrap: wrap; row-gap: 3px; }
.selo-ponto {
  display: inline-block; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .85;
}

/* O modal da plataforma: brasão e nome em serifa no topo, e o que vem na
   assinatura no lugar da lista de capítulos. */
.det-nome.det-nome-plat { display: flex; align-items: center; gap: 14px; }
.det-nome-plat img { width: clamp(44px, 5vw, 64px); height: auto; filter: drop-shadow(0 3px 12px #000c); }
.det-nome-plat span { font: 700 clamp(34px, 4.4vw, 56px)/.95 'Cormorant Garamond', Georgia, serif; letter-spacing: -.01em; }
.det-selo.det-selo-premium { color: #fff; }
.det-selo .coroa { width: 26px; height: 13px; }
.det-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.det-recurso {
  padding: 16px 18px; border-radius: 8px;
  background: #ffffff0a; border: 1px solid #ffffff14;
}
.det-recurso b { display: block; margin-bottom: 6px; color: #fff; font-size: 15px; }
.det-recurso p { margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.45; }
.det-nota a { color: var(--marca); }
/* O vídeo institucional traz o brasão gravado embaixo à direita, exatamente
   onde fica o botão de som do modal; na plataforma ele sobe para o meio. */
.det-plataforma .det-som { bottom: auto; top: 46%; }

/* O modal da plataforma, versão forte (dono, 17/09/2026): os números, as três
   línguas, a intensidade etapa por etapa e o método. */
.det-numeros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 26px 0 6px;
}
.det-numeros div {
  padding: 16px 14px; border-radius: 8px; text-align: center;
  background: linear-gradient(160deg, #0b2d57, #0a1a30); border: 1px solid #00caff2e;
}
/* Inter, e não a serifada: os algarismos da Cormorant descem da linha e o 15
   parecia "I5". */
.det-numeros b { display: block; font: 800 clamp(26px, 2.8vw, 36px)/1 'Inter', sans-serif; letter-spacing: -.03em; color: #fff; }
.det-numeros span { display: block; margin-top: 6px; color: var(--texto-2); font-size: 13px; font-weight: 600; }

.det-linguas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.det-lingua {
  padding: 18px; border-radius: 8px;
  background: #ffffff0a; border: 1px solid #ffffff14;
}
/* O traço ciano em cima do nome, e não uma borda grossa no topo do cartão:
   borda de 3px num cartão arredondado entortava nos cantos. */
.det-lingua::before {
  content: ''; display: block;
  width: 28px; height: 3px; margin-bottom: 12px;
  border-radius: 2px; background: var(--marca);
}
.det-lingua b { display: block; color: #fff; font: 700 26px/1.1 'Cormorant Garamond', Georgia, serif; }
.det-lingua em { display: block; margin: 4px 0 10px; font-style: normal; color: var(--marca); font-size: 13px; font-weight: 800; }
.det-lingua p { margin: 0; color: var(--texto-2); font-size: 13.5px; line-height: 1.5; }

.det-etapas { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ffffff14; }
.det-etapa {
  display: grid; grid-template-columns: 170px 190px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 4px; border-bottom: 1px solid #ffffff14;
}
.det-etapa-nome b { display: block; color: #fff; font-size: 15.5px; }
.det-etapa-nome span { color: var(--texto-3); font-size: 13px; font-weight: 600; }
.det-etapa-ritmo { color: var(--marca); font-size: 14.5px; font-weight: 800; }
.det-etapa p { margin: 0; color: var(--texto-2); font-size: 14px; line-height: 1.5; }

.det-recursos-miudos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.det-recursos-miudos .det-recurso { padding: 13px 15px; }

@media (max-width: 700px) {
  .det-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .det-linguas { grid-template-columns: 1fr; }
  .det-etapa { grid-template-columns: 1fr; gap: 4px; }
}

/* ── O topo no jeito do Prime Video: marca da casa, logo fixo e setas ──────── */

/* O brasão e o logo do curso formam um bloco só, com o brasão CENTRALIZADO
   em cima do logo, qualquer que seja a largura do logo. */
.heroi-assinatura {
  /* flex de bloco com a largura do conteúdo: inline-flex deixava o selo
     subir para o lado do logo, na mesma linha. */
  display: flex; flex-direction: column; align-items: center;
  width: fit-content;
  max-width: min(480px, 88%);
  margin: 0 0 18px;
}
.heroi-casa {
  display: block;
  width: 44px; height: auto;
  margin: 0 0 12px;
  filter: drop-shadow(0 2px 8px #000c);
}
.heroi-assinatura .heroi-logo { max-width: 100%; margin: 0; object-position: center bottom; }

.heroi-logo {
  display: block;
  width: auto; height: auto;
  max-width: min(480px, 88%);
  max-height: clamp(110px, 19vh, 180px);
  margin: 0 0 18px;
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 4px 18px #000b);
}
@media (min-width: 821px) {
  .heroi.com-logo h1.heroi-nome-texto { display: none; }
}
@media (max-width: 820px) {
  /* No celular o fundo é a capa em pé, que já traz o nome desenhado. */
  .heroi-logo { display: none; }
}

.heroi-seta {
  position: absolute; z-index: 4; top: 50%;
  display: grid; place-items: center;
  width: 56px; height: 110px; padding: 0;
  border: 0; background: transparent; color: #fff;
  cursor: pointer; transform: translateY(-50%);
  filter: drop-shadow(0 2px 6px #000c);
  transition: opacity .2s ease, background .2s ease;
}
.heroi-seta.ant { left: 0; }
.heroi-seta.prox { right: 0; }
.heroi-seta.ant:hover { background: linear-gradient(90deg, #0000008c, #0000); }
.heroi-seta.prox:hover { background: linear-gradient(270deg, #0000008c, #0000); }
.heroi-seta:focus-visible { outline: 2px solid var(--marca); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) {
  /* No computador aparecem com o mouse em cima do topo, como no Prime. */
  .heroi-seta { opacity: 0; }
  .heroi:hover .heroi-seta, .heroi-seta:focus-visible { opacity: 1; }
}
@media (max-width: 820px) {
  .heroi-seta { top: 30%; width: 44px; height: 88px; }
  .heroi-seta svg { width: 28px; height: 28px; }
}