/* ==========================================================
   Hora H sem cobrança — página de vendas  (/hora-h)
   ==========================================================
   Folha independente do site e da /mvp. Identidade central:
   Identidade da empresa/guias/GUIA-DA-MARCA.md (cinco cores,
   Bricolage + IBM Plex, ícones Phosphor regular).

   Versão enxuta de 29/10/2026: 7 seções (topo, isso soa
   familiar, holofote, aulas, oferta, autor + perguntas,
   fechamento). A página de obrigado (/hora-h/obrigado) usa
   esta mesma folha.
   ========================================================== */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("../fonts/bricolage-700.ttf") format("truetype"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../fonts/bricolage-800.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/plex-sans-400.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../fonts/plex-sans-700.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("../fonts/plex-mono-600.ttf") format("truetype"); }

:root {
  /* As cinco cores-base. O resto é opacidade delas. */
  --verde: #20A47A;        --verde-rgb: 32, 164, 122;    /* acento e botão */
  --verde-fundo: #104E3B;  --verde-fundo-rgb: 16, 78, 59; /* texto verde no claro */
  --cafe: #37312D;         --cafe-rgb: 55, 49, 45;        /* superfície escura */
  --papel: #FAF9F6;        --papel-rgb: 250, 249, 246;
  --grafite: #1E252B;      --grafite-rgb: 30, 37, 43;
  --papel-alt: #EDF4EF;    /* alternância de seções (decisão de 16/10/2026) */

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --largura: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
  --raio-card: 12px;
  --raio-botao: 4px;
  --sombra: 0 1px 2px rgba(var(--grafite-rgb), .06), 0 8px 24px rgba(var(--grafite-rgb), .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }
em { font-style: normal; color: var(--verde); }   /* sem itálico no sistema: ênfase é cor */
.icone { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.coluna { max-width: 44rem; }
.faixa { padding: clamp(64px, 9vw, 112px) 0; }
.faixa--alt { background: var(--papel-alt); }
.faixa--escura { background: var(--cafe); color: var(--papel); }
.rotulo {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--verde-fundo); margin-bottom: 1rem;
}
.rotulo::before { content: ""; width: 18px; height: 2px; background: var(--verde); }
.faixa--escura .rotulo { color: rgba(var(--papel-rgb), .78); }
.lead { font-size: clamp(1.05rem, 2vw, 1.2rem); }
.fino { font-size: .875rem; line-height: 1.5; }

.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--papel); color: var(--grafite); padding: .6em 1em; border-radius: var(--raio-botao); }
.pular:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

.sem-js { background: var(--verde); color: var(--grafite); padding: .75rem var(--gutter); text-align: center; font-weight: 700; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .15rem; text-decoration: none; cursor: pointer; border: 0;
  border-radius: var(--raio-botao); font: 700 1.05rem/1.2 var(--sans);
  padding: .95rem 1.6rem; min-height: 52px; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--compra { background: var(--verde); color: var(--grafite); box-shadow: 0 6px 18px rgba(var(--verde-rgb), .32); }
.btn--compra:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--verde-rgb), .4); }
.btn--compra:active { transform: translateY(0); }
.btn-linha { display: inline-flex; align-items: center; gap: .5rem; }
.btn-preco { font: 600 .78rem/1 var(--mono); letter-spacing: .04em; opacity: .85; }
.btn--largo { width: 100%; }
.btn--contorno { background: transparent; color: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(var(--papel-rgb), .45); padding: .6rem 1rem; min-height: 40px; font-size: .9rem; }
.btn--contorno:hover { box-shadow: inset 0 0 0 1.5px var(--verde); }

/* ---------- Topo ---------- */
.topo { background: var(--cafe); color: var(--papel); border-bottom: 1px solid rgba(var(--papel-rgb), .1); }
.topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.marca { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.marca-nome { font: 800 1.15rem/1 var(--display); }
.marca-nome i { font-style: normal; color: var(--verde); }   /* o ponto verde da assinatura */
.marca-papel { font: 600 .68rem/1.3 var(--mono); letter-spacing: .06em; opacity: .75; margin-top: .25rem; }

/* ---------- Hero ---------- */
.hero { background: var(--cafe); color: var(--papel); padding: clamp(40px, 6vw, 80px) 0 0; position: relative; overflow: hidden; }
.hero-grade { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; position: relative; }
@media (min-width: 920px) { .hero-grade { grid-template-columns: 1.05fr .95fr; } }
.selo-produto {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(var(--papel-rgb), .08); border: 1px solid rgba(var(--papel-rgb), .16);
  padding: .55rem .8rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.selo-produto b { color: var(--verde); font-weight: 600; }
.pensamento { font: 700 clamp(1rem, 2vw, 1.15rem)/1.3 var(--sans); color: rgba(var(--papel-rgb), .7); margin-bottom: .6rem; }
.hero h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); margin-bottom: .45em; }
.hero-lead { color: rgba(var(--papel-rgb), .88); max-width: 36rem; margin-bottom: 1.8rem; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-bottom: 1.4rem; }
.link-ancora { font-weight: 700; text-underline-offset: .25em; text-decoration-thickness: 1.5px; text-decoration-color: rgba(var(--verde-rgb), .8); }
.hero-garantias { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .45rem; }
.hero-garantias li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(var(--papel-rgb), .82); }
.hero-garantias .icone { color: var(--verde); }
.credencial { font: 600 .74rem/1.5 var(--mono); letter-spacing: .04em; color: rgba(var(--papel-rgb), .62); margin: 0; }

/* Quadro da aula: uma cena real da Aula 2 */
.tela {
  position: relative; border-radius: var(--raio-card); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(var(--papel-rgb), .12);
  background: #000; aspect-ratio: 16 / 9;
}
.tela img { width: 100%; height: 100%; object-fit: cover; }
.tela-barra {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 2.2rem 1rem .8rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff; font-size: .82rem; line-height: 1.3;
}
.tela-barra strong { font-family: var(--display); font-size: .95rem; display: block; }
.tela-tempo { font: 600 .72rem/1 var(--mono); background: rgba(0, 0, 0, .55); padding: .35rem .5rem; border-radius: 4px; white-space: nowrap; }
.hero-legenda { margin-top: .9rem; font-size: .82rem; color: rgba(var(--papel-rgb), .6); text-align: center; }
.hero { padding-bottom: clamp(48px, 7vw, 88px); }

/* Autoridade colada ao primeiro botão: foto + credencial. */
.autoridade { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: .86rem; line-height: 1.45; color: rgba(var(--papel-rgb), .78); }
.autoridade img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; border: 2px solid rgba(var(--verde-rgb), .7); }
.autoridade strong { color: var(--papel); }

/* Vídeo de apresentação: o quadro inteiro vira botão (só com
   CONFIG.video preenchido). Círculo de play + rótulo, sobre um
   véu escuro leve para o botão ler bem em cima dos materiais. */
.tela-play {
  position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: rgba(30, 22, 18, .28); color: var(--papel); font: inherit;
  transition: background-color .2s ease;
}
.tela-play:hover { background: rgba(30, 22, 18, .12); }
.tela-play-icone {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde); color: var(--grafite); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
.tela-play:hover .tela-play-icone { transform: scale(1.07); }
.tela-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.tela-play-rotulo { font: 700 .95rem/1 var(--sans); background: rgba(30, 37, 43, .78); padding: .5rem .85rem; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .tela-play-icone { animation: pulso 2.4s ease-in-out infinite; }
}
@keyframes pulso { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 0 rgba(var(--verde-rgb), .5); } 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 0 14px rgba(var(--verde-rgb), 0); } }
.tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Janela do vídeo vertical (<dialog>): vídeo em pé, o maior que
   couber na tela, fundo Marrom grafite escurecido. */
.video-janela { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.video-janela::backdrop { background: rgba(20, 14, 11, .88); }
.video-janela video {
  display: block; width: auto; height: min(86vh, 86svh, calc(92vw * 16 / 9)); aspect-ratio: 9 / 16;
  border-radius: 14px; background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.video-fechar {
  position: absolute; top: -14px; right: -14px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--papel); color: var(--grafite);
  font: 700 1.6rem/1 var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
@media (max-width: 560px) { .video-fechar { top: 8px; right: 8px; } }

/* ---------- Você se reconhece ---------- */
.reconhece { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .8rem; }
@media (min-width: 820px) { .reconhece { grid-template-columns: repeat(2, 1fr); } }
.reconhece li {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid rgba(var(--grafite-rgb), .08); border-radius: var(--raio-card);
  padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(var(--grafite-rgb), .04);
}
.reconhece .icone { color: var(--verde-fundo); margin-top: .2em; }
.remate { font-size: 1.1rem; max-width: 44rem; border-left: 3px solid var(--verde); padding-left: 1.2rem; margin: 0; }

/* Botão de compra no meio da página */
.cta-meio { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.cta-meio .btn { min-width: min(100%, 340px); }
.cta-nota { margin: 0; font-size: .86rem; color: rgba(var(--grafite-rgb), .66); }

/* ---------- O holofote (elemento-assinatura) ----------
   O hora-h.js escreve --r (raio da luz, px) e --p (0 a 1) na
   seção. Sem JS, --r enorme: tudo aceso, os dois textos à vista. */
.holofote { --r: 4000px; --p: 1; background: var(--cafe); color: var(--papel); position: relative; }
.holofote-palco {
  display: grid; gap: 2rem; align-items: center;
  max-width: var(--largura); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--gutter);
}
@media (min-width: 880px) { .holofote-palco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.holofote-texto { position: relative; z-index: 2; }
.holofote-texto .rotulo { color: rgba(var(--papel-rgb), .7); }
.holofote-texto h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.holofote-texto p { color: rgba(var(--papel-rgb), .85); max-width: 30rem; }
.holofote-estado--2 { margin-top: 2rem; }
.frase-marca {
  font: 800 clamp(1.2rem, 2.4vw, 1.45rem)/1.25 var(--display); color: var(--papel) !important;
  margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(var(--papel-rgb), .16);
}
.holofote-campo {
  position: relative; aspect-ratio: 7 / 6; border-radius: var(--raio-card); overflow: hidden;
  background: rgba(0, 0, 0, .12);
}
.palavra {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  font: 700 calc(var(--t, 1) * clamp(.95rem, 1.9vw, 1.3rem))/1 var(--display);
  color: rgba(var(--papel-rgb), .9); white-space: nowrap;
}
.palavra--centro {
  font-weight: 800; color: var(--papel); z-index: 1;
  font-size: calc(clamp(1.6rem, 4.4vw, 3rem) - var(--p) * clamp(.4rem, 1.6vw, 1.5rem));
}
/* A luz: um círculo transparente no meio de uma sombra Marrom grafite. */
.holofote-luz {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle calc(var(--r) * 1.35) at 50% 53%,
    rgba(var(--papel-rgb), .15) 0,
    rgba(var(--papel-rgb), .06) calc(var(--r) * .72),
    rgba(var(--cafe-rgb), .96) var(--r));
}

/* Com JS e movimento liberado: a seção vira um palco preso na
   tela enquanto a rolagem abre a luz e troca o texto. */
@media (prefers-reduced-motion: no-preference) {
  .js .holofote.rolando { height: 190vh; }
  .js .holofote.rolando .holofote-palco { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; padding-top: 32px; padding-bottom: 32px; }
  .js .holofote.rolando .holofote-texto { display: grid; }
  .js .holofote.rolando .holofote-estado { grid-area: 2 / 1; transition: opacity .5s ease, transform .5s ease; }
  .js .holofote.rolando .rotulo { grid-area: 1 / 1; justify-self: start; }
  .js .holofote.rolando .holofote-estado--2 { margin-top: 0; opacity: 0; transform: translateY(12px); }
  .js .holofote.rolando.aberto .holofote-estado--1 { opacity: 0; transform: translateY(-12px); }
  .js .holofote.rolando.aberto .holofote-estado--2 { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 879px) {
  .js .holofote.rolando .holofote-palco { grid-template-rows: auto 1fr; gap: 1.2rem; align-content: center; }
  .js .holofote.rolando .holofote-campo { aspect-ratio: auto; height: 46svh; order: -1; }
  .js .holofote.rolando .holofote-texto h2 { font-size: 1.6rem; }
  .js .holofote.rolando .holofote-texto p { font-size: .95rem; margin-bottom: .6rem; }
}

/* ---------- As aulas ---------- */
.aulas { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
.aula {
  display: grid; background: #fff; border: 1px solid rgba(var(--grafite-rgb), .09);
  border-radius: var(--raio-card); overflow: hidden; box-shadow: var(--sombra);
}
.aula { grid-template-columns: minmax(0, 1fr); }   /* sem isso, nomes longos de PDF alargam a coluna no celular */
@media (min-width: 820px) { .aula { grid-template-columns: 340px minmax(0, 1fr); } }
.aula-imagem { position: relative; background: #000; aspect-ratio: 16 / 9; }
@media (min-width: 820px) { .aula-imagem { aspect-ratio: auto; } }
.aula-imagem img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.aula-corpo { padding: clamp(1.3rem, 3vw, 2rem); }
.aula-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--verde-fundo); margin-bottom: .7rem; }
.aula-meta .momento { background: rgba(var(--verde-rgb), .14); color: var(--verde-fundo); padding: .35rem .55rem; border-radius: 4px; }
.aula h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; }
.aula-itens { margin: 0 0 1.1rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.aula-itens li { position: relative; padding-left: 1.3rem; }
.aula-itens li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.leva { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; padding-top: 1rem; border-top: 1px dashed rgba(var(--grafite-rgb), .16); font-size: .88rem; }
.leva-rot { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--grafite-rgb), .6); margin-right: .2rem; }
.pdf { max-width: 100%; display: inline-flex; align-items: center; gap: .35rem; background: var(--papel-alt); border: 1px solid rgba(var(--verde-fundo-rgb), .16); padding: .3rem .6rem; border-radius: 6px; font-weight: 700; color: var(--verde-fundo); }
.pdf .icone { width: 1em; height: 1em; }

/* ---------- Oferta ---------- */
.oferta-grade { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
.oferta-grade { margin-top: 1.6rem; }
.oferta-grade .caixa { order: -1; }   /* celular: preço primeiro */
@media (min-width: 920px) {
  .oferta-grade { grid-template-columns: 1fr 440px; }
  .oferta-grade .caixa { order: 0; }
}
.oferta-nome { font-size: clamp(2rem, 5vw, 3rem); }
.inclui { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; }
.inclui li { display: flex; gap: .7rem; align-items: flex-start; }
.inclui .icone { color: var(--verde); margin-top: .18em; }
.inclui small { display: block; font-size: .85rem; opacity: .72; }
.inclui-bonus { padding: .8rem .9rem; margin: 0 -.9rem; border-radius: 10px; background: rgba(var(--verde-rgb), .12); border: 1px dashed rgba(var(--verde-rgb), .5); }
.bonus-selo { display: inline-block; font: 600 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--verde); color: var(--grafite); padding: .3rem .45rem; border-radius: 4px; margin-right: .35rem; vertical-align: .15em; }
.caixa {
  background: var(--papel); color: var(--grafite); border-radius: var(--raio-card);
  padding: clamp(1.5rem, 4vw, 2.2rem); box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
  position: relative;
}
.caixa-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.caixa-nome { font: 800 1.1rem/1.2 var(--display); }
.caixa-selo { font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(var(--verde-rgb), .16); color: var(--verde-fundo); padding: .4rem .55rem; border-radius: 4px; white-space: nowrap; }
.preco { font: 800 clamp(3rem, 9vw, 4rem)/1 var(--display); letter-spacing: -.03em; margin: .4rem 0 .4rem; }
.preco-nota { font-size: .9rem; color: rgba(var(--grafite-rgb), .7); margin-bottom: .5rem; }
.preco-ancora { font-size: .92rem; font-weight: 700; color: var(--verde-fundo); margin-bottom: 1.4rem; }
.selos { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .84rem; color: rgba(var(--grafite-rgb), .74); }
.selos li { display: flex; gap: .5rem; align-items: center; }
.selos .icone { color: var(--verde-fundo); }
.garantia {
  display: flex; gap: 1rem; align-items: center; margin-top: 2rem;
  padding: 1.2rem; border: 1px solid rgba(var(--papel-rgb), .18); border-radius: var(--raio-card);
  background: rgba(var(--papel-rgb), .05);
}
.garantia-medalha {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  border: 2px solid var(--verde); font: 800 1.8rem/1 var(--display); color: var(--papel);
}
.garantia-medalha span { display: block; font: 600 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-top: .15rem; }
.garantia p { margin: 0; font-size: .93rem; color: rgba(var(--papel-rgb), .85); }
.garantia strong { color: var(--papel); display: block; margin-bottom: .2rem; font-size: 1rem; }

/* ---------- Autor ---------- */
.autor-grade { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 820px) { .autor-grade { grid-template-columns: 360px 1fr; } }
.autor-foto { border-radius: var(--raio-card); box-shadow: var(--sombra); width: 100%; max-width: 360px; aspect-ratio: 11 / 14; object-fit: cover; }
.autor-cred { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .5rem; }
.autor-cred li { display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.autor-cred .icone { color: var(--verde-fundo); }

.assinatura-crp { font: 600 .74rem/1.5 var(--mono); letter-spacing: .04em; color: rgba(var(--grafite-rgb), .6); margin: 1rem 0 0; }

/* ---------- Perguntas (dentro da seção do autor) ---------- */
.faq-bloco { margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(40px, 6vw, 64px); border-top: 1px solid rgba(var(--grafite-rgb), .1); }
.faq { margin-top: 2.2rem; max-width: 50rem; display: grid; gap: .7rem; }
.faq details { background: #fff; border: 1px solid rgba(var(--grafite-rgb), .1); border-radius: var(--raio-card); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; font-weight: 700; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--verde-fundo); border-bottom: 2px solid var(--verde-fundo);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details[open] { border-color: rgba(var(--verde-fundo-rgb), .35); }
.faq-resposta { padding: 0 1.25rem 1.2rem; color: rgba(var(--grafite-rgb), .85); }
.faq-resposta p:last-child { margin-bottom: 0; }

/* ---------- Fecho ---------- */
.fecho { text-align: center; }
.fecho .coluna { margin: 0 auto; }
.fecho h2 { font-size: clamp(1.9rem, 5vw, 3rem); }
.fecho p { color: rgba(var(--papel-rgb), .85); margin-bottom: 1.8rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--grafite); color: rgba(var(--papel-rgb), .7); padding: 2.6rem 0 6.5rem; font-size: .88rem; }
@media (min-width: 820px) { .rodape { padding-bottom: 2.6rem; } }
.rodape-grade { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; }
.rodape strong { color: var(--papel); }
.rodape-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.rodape-links a { text-underline-offset: .2em; }
.aviso { font-size: .8rem; line-height: 1.6; max-width: 62rem; margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(var(--papel-rgb), .12); }

/* ---------- Barra de compra do celular ---------- */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background: var(--cafe); color: var(--papel);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  transform: translateY(110%); transition: transform .25s ease;
}
.barra-fixa.ativa { transform: translateY(0); }
.barra-fixa .btn { min-height: 46px; padding: .7rem 1.1rem; font-size: .95rem; }
.barra-preco { font: 800 1.4rem/1 var(--display); }
.barra-nota { display: block; font-size: .72rem; opacity: .75; margin-top: .2rem; }
@media (min-width: 820px) { .barra-fixa { display: none; } }

/* ---------- Entrada suave (só com JS; ver a trava no <head>) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .barra-fixa { transition: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .topo .btn--contorno { display: none; }
  .selo-produto { border-radius: 8px; }
  .hero-acoes .btn { width: 100%; }
  .hero-acoes { justify-content: center; }
  .tela-barra { font-size: .74rem; padding: 1.6rem .75rem .6rem; }
  .tela-barra strong { font-size: .85rem; }
}

/* ---------- Página de obrigado (/hora-h/obrigado) ---------- */
.obrigado-topo { padding-bottom: clamp(48px, 7vw, 80px); }
.obrigado-topo h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.passos-compra { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: passo; }
@media (min-width: 820px) { .passos-compra { grid-template-columns: repeat(2, 1fr); } }
.passos-compra li {
  position: relative; padding: 1.3rem 1.3rem 1.2rem 4.2rem; background: #fff;
  border: 1px solid rgba(var(--grafite-rgb), .09); border-radius: var(--raio-card); box-shadow: var(--sombra);
}
.passos-compra li::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 1.2rem; top: 1.2rem; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde-fundo); color: var(--papel); font: 800 1rem/1 var(--display);
}
.passos-compra h3 { margin-bottom: .35rem; }
.passos-compra p { margin: 0; font-size: .95rem; color: rgba(var(--grafite-rgb), .78); }
.convite-grade { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 820px) { .convite-grade { grid-template-columns: 300px 1fr; } }
@media (max-width: 819px) { .convite-foto { max-width: 150px !important; } }
.convite-foto { width: 100%; max-width: 300px; aspect-ratio: 11 / 14; object-fit: cover; border-radius: var(--raio-card); }
.convite-grade p { color: rgba(var(--papel-rgb), .86); max-width: 40rem; }
.convite-grade .btn { margin-top: .6rem; }
.convite-nota { font-size: .85rem; margin: .8rem 0 0; color: rgba(var(--papel-rgb), .65) !important; }
.rodape--simples { padding-bottom: 2.6rem; }

/* ---------- Topo: os materiais do curso (29/10/2026) ----------
   Folha do resumo atrás, dois PDFs no celular na frente. Tudo
   medido pelo próprio quadro (cqw), para manter a composição em
   qualquer largura. Com CONFIG.video, o play fica por cima. */
.tela--kit { container-type: inline-size; background: radial-gradient(120% 100% at 70% 20%, #5d4336, #3d2a21); box-shadow: 0 24px 60px rgba(0, 0, 0, .3), 0 0 0 1px rgba(var(--papel-rgb), .1); }
.tela--kit img { height: auto; object-fit: initial; }
.kit-folha { position: absolute; width: 40cqw !important; left: 7cqw; top: 7cqw; transform: rotate(-6deg); border-radius: .6cqw; box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, .45); }
.kit-celular { position: absolute; width: 25cqw; border: 1.3cqw solid #11161a; border-radius: 4cqw; overflow: hidden; background: #fff; box-shadow: 0 3.5cqw 8cqw rgba(0, 0, 0, .5); }
.kit-celular img { width: 100% !important; display: block; }
.kit-celular--1 { left: 44cqw; top: 6cqw; transform: rotate(3deg); }
.kit-celular--2 { left: 68cqw; top: 14cqw; transform: rotate(8deg); }

/* ---------- Aulas: cartões refeitos em código (29/10/2026) ----------
   Mesmo desenho dos cartões dos vídeos: papel, borda verde, passos
   numerados. Medidos pelo quadro (cqw). */
.aula-imagem--cartao {
  container-type: inline-size; display: grid; place-items: center; padding: 6cqw 0;
  background: linear-gradient(135deg, var(--papel-alt), #dfe9e2);
}
.cartao-aula {
  width: 76cqw; background: #fff; color: var(--grafite);
  border: max(2px, .6cqw) solid var(--verde); border-radius: 3.2cqw;
  padding: 5cqw 5.5cqw; box-shadow: 0 3cqw 8cqw rgba(var(--grafite-rgb), .16);
}
.cartao-aula-rot { font: 600 2.8cqw/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--verde-fundo); margin: 0 0 2cqw; }
.cartao-aula-titulo { font: 800 5.6cqw/1.12 var(--display); margin: 0 0 3.6cqw; }
.cartao-aula-passos, .cartao-aula-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; counter-reset: passo; }
.cartao-aula-passos li, .cartao-aula-itens li { display: flex; align-items: center; gap: 2.6cqw; font-size: 3.8cqw; line-height: 1.25; font-weight: 700; padding: 1cqw 1.8cqw; border-radius: 1.8cqw; }
.cartao-aula-passos li::before {
  counter-increment: passo; content: counter(passo); flex: none;
  width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-fundo); color: var(--papel); font: 700 3.2cqw/1 var(--sans);
}
.cartao-aula-itens li::before { content: ""; flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--verde); }
.cartao-aula-passos li.destaque, .cartao-aula-itens li.destaque { background: rgba(var(--verde-rgb), .14); }
.cartao-aula-passos li.destaque::before { background: var(--verde); color: var(--grafite); }
.cartao-aula-pe { font-size: 3.4cqw; font-weight: 700; color: var(--verde-fundo); margin: 3cqw 0 0; }