/* ===================================================================
   CSS exclusivo da página "semente" (produto de entrada, tom impulso).
   Não mexe em style.css (página prime/Academy) — as duas convivem no
   mesmo site sem se afetar. Reaproveita as animações/utilitários de
   style.css (marquee, blob, glass-panel, cronograma, split-word etc.),
   só define aqui o que é EXCLUSIVO do tom novo: cor de acento (ember em
   vez de gold), tipografia sem serifa nos títulos, e os componentes que
   não existem na página atual (faixa de urgência, cards de dor "Eu sei",
   bloco "duas opções").
   =================================================================== */

:root {
  --ember: #F0E6D2;
  --ember-dark: #D8C7A3;
  /* 2ª cor de acento (31/08/2026) — vermelhão japonês (朱): laca/torii/carimbo.
     Creme = calma/superfície; vermelhão = calor pontual (CTA, urgência, 1 número
     de destaque por seção). */
  --zhu: #E23B2E;
  --zhu-dark: #C22E22;
  /* Níveis de superfície escura — antes era só #030303/#020202 (diferença
     invisível). Agora um único preto base + um degrau quente pro cronograma. */
  --surface-0: #0A0A0A;
  --surface-1: #141210;
  --cream: #F0E6D2;
  --cream-ink: #17120E;
  --r-sm: 8px;
  --r-md: 12px;
}

/* Título em Inter bold/extra-bold, sem serifa — de propósito, pra não
   repetir o gesto editorial da Playfair Display da página prime. */
.font-impact {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Glow sutil na linha de destaque do hero — reforça o contraste do
   creme sobre o vídeo de fundo (âmbar demais pra a cor "bater o olho"
   sozinha). */
.hero-emphasis {
  text-shadow: 0 0 28px rgba(240, 230, 210, 0.45), 0 0 8px rgba(240, 230, 210, 0.3);
}

/* Foco de teclado na cor nova */
.semente a:focus-visible,
.semente button:focus-visible,
.semente summary:focus-visible {
  outline: 2px solid rgba(240, 230, 210, 0.8);
  outline-offset: 3px;
}

/* Cards com borda sólida, sem glassmorphism/blur — mais "cru" e direto,
   no lugar do .glass-panel elegante da página prime. */
.hard-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===================================================================
   FAIXA DE URGÊNCIA — marquee fixo no topo, fundo sólido de acento.
   Referência de mecânica: imersaoiavideo.com.br (faixa rodando em loop).
   Cor própria (ember), não copiada da referência.
   =================================================================== */
.urgency-bar {
  position: relative;
  z-index: 60;
  background: var(--zhu);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.urgency-track {
  display: flex;
  width: max-content;
  gap: 3rem;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .urgency-track {
    animation: none;
  }
}

/* ===================================================================
   BLOCO "EU SEI..." — agitação de dor, frases literais em formato de
   balão/pill. Referência de mecânica: lutlab.com.br.
   =================================================================== */
.pain-pill {
  display: inline-flex;
  align-items: center;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--ember);
  border-radius: 0.5rem;
  padding: 0.9rem 1.25rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
}

/* ===================================================================
   BLOCO "DUAS OPÇÕES" — comparação direta, sem meio-termo.
   =================================================================== */
.option-card {
  border-radius: 1rem;
  padding: 1.75rem;
  height: 100%;
}
.option-card--stay {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.option-card--go {
  background: linear-gradient(180deg, rgba(240, 230, 210, 0.12), rgba(240, 230, 210, 0.02));
  border: 1px solid rgba(240, 230, 210, 0.4);
}

/* Botão sólido de acento (sem o anel cônico giratório da página prime —
   mais direto, "aperta e pronto"). */
.btn-ember {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--zhu);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px -10px rgba(226, 59, 46, 0.55);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-ember:hover {
  background: var(--zhu-dark);
  transform: scale(1.03);
  box-shadow: 0 10px 28px -8px rgba(226, 59, 46, 0.6);
}
.btn-ember:active {
  transform: scale(0.97);
}

/* Cronograma da página semente: mesmo componente de style.css, só troca
   a cor da linha/nó de gold pra ember. */
.semente .cronograma-line-fill {
  background: linear-gradient(180deg, var(--zhu), var(--zhu-dark));
}
.semente .cronograma-node {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  /* Silhueta de luminária de papel (chōchin) — mais alta que larga, cantos
     macios. Não mexe no tamanho da caixa (o JS mede o centro do nó). */
  border-radius: 42% / 34%;
}
.semente .cronograma-step[data-state="active"] .cronograma-node {
  background: rgba(226, 59, 46, 0.14);
  border-color: var(--zhu);
  color: var(--zhu);
  box-shadow: 0 0 0 6px var(--surface-1), 0 0 0 11px rgba(226, 59, 46, 0.22);
}
.semente .cronograma-step[data-state="done"] .cronograma-node {
  background: var(--zhu);
  border-color: var(--zhu);
  color: #fff;
}
.semente .cronograma-section:not(.is-ready) .cronograma-node {
  background: var(--zhu);
  border-color: var(--zhu);
  color: #fff;
}

/* FAQ desta página: borda de destaque em ember no item aberto */
.semente #faq details[open] {
  border-color: rgba(240, 230, 210, 0.4) !important;
}
.semente #faq details:not([open]):hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Prova social: moldura do vídeo (linguagem do card-destaque) + citação + realce */
.prova-frame {
  border: 1px solid rgba(240, 230, 210, 0.4);
  border-radius: 0.75rem;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(240, 230, 210, 0.12), rgba(240, 230, 210, 0.02));
  box-shadow: 0 0 50px rgba(240, 230, 210, 0.1);
  padding: 6px;
}
.prova-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a0a0a;
  border-radius: 0.5rem;
}
.prova-quote {
  max-width: 40rem;
  margin: 1.75rem auto 0;
  padding: 0.9rem 1.25rem;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--ember);
  border-radius: 0.5rem;
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.prova-quote::before {
  content: "\201C";
  margin-right: 0.1em;
  color: var(--ember);
  font-style: normal;
  font-weight: 700;
}
.prova-glow {
  text-shadow: 0 0 22px rgba(240, 230, 210, 0.45), 0 0 8px rgba(240, 230, 210, 0.3);
}

/* ===================================================================
   REFINO VISUAL (31/08/2026) — ritmo de seções, kicker mono + luminária,
   textura de grão. Objetivo: tirar a cara de "preto chapado feito por IA"
   sem ir pro tom editorial da página prime.
   =================================================================== */

/* --- Kicker: rótulo de seção em fonte mono (ficha técnica / método) --- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}
.kicker .lantern {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--zhu);
}
.kicker .kicker-num {
  color: var(--zhu);
  font-variant-numeric: tabular-nums;
}

/* --- Textura de grão: overlay único, fixo, estático, sobre a página toda.
   Dá "dente" às superfícies escuras; imperceptível sobre texto a 3,5%. --- */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.038;
  mix-blend-mode: overlay;
}
@media (max-width: 640px) {
  .grain-overlay { opacity: 0.026; }
}

/* --- Seções invertidas: fundo creme, texto e cards near-black.
   Aplicado em #bonus e #prova-social. Funcionam como pontuação clara. --- */
.section-cream {
  background: var(--cream);
  color: var(--cream-ink);
  position: relative;
  isolation: isolate;
}
.section-cream::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: multiply;
}
.section-cream .text-white,
.section-cream h1,
.section-cream h2,
.section-cream h3 { color: var(--cream-ink); }
.section-cream .text-neutral-300,
.section-cream .text-neutral-400 { color: rgba(23, 18, 14, 0.7); }
.section-cream .text-neutral-500,
.section-cream .text-neutral-600 { color: rgba(23, 18, 14, 0.52); }
.section-cream .text-\[\#F0E6D2\],
.section-cream .prova-glow {
  color: var(--zhu);
  text-shadow: none;
}
.section-cream .kicker { color: rgba(23, 18, 14, 0.62); }
.section-cream .hard-card {
  background: var(--cream-ink);
  border-color: rgba(23, 18, 14, 0.16);
  color: #F4ECDD;
}
.section-cream .hard-card .text-white,
.section-cream .hard-card h3 { color: #F4ECDD; }
.section-cream .hard-card .text-neutral-500 { color: rgba(244, 236, 221, 0.55); }
.section-cream .hard-card .border-white\/10 { border-color: rgba(244, 236, 221, 0.12); }
.section-cream .prova-frame {
  background: var(--cream-ink);
  border-color: rgba(23, 18, 14, 0.22);
  box-shadow: 0 24px 60px -24px rgba(23, 18, 14, 0.4);
}
.section-cream .prova-quote {
  background: var(--cream-ink);
  border-color: rgba(244, 236, 221, 0.14);
  border-left-color: var(--zhu);
  color: #F4ECDD;
}
.section-cream .prova-quote::before { color: var(--zhu); }
.bonus-shadow {
  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.5));
}
.section-cream .bonus-shadow {
  filter: drop-shadow(0 22px 40px rgba(23, 18, 14, 0.28));
}

/* ===================================================================
   BANNER DE CONSENTIMENTO DE COOKIES (LGPD) — 01/09/2026.
   Fixo no rodapé, discreto, não bloqueia o conteúdo. Superfície
   near-black da página, acento vermelhão só no "Aceitar". Montado por
   js/consent.js só na 1ª visita (a escolha fica no localStorage).
   =================================================================== */
.cookie-consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9997;
  margin: 0 auto;
  max-width: 40rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
}
.cookie-consent__txt {
  flex: 1 1 15rem;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
}
.cookie-consent__txt a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent__acoes {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cookie-consent__btn {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cookie-consent__btn--no {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
}
.cookie-consent__btn--no:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.cookie-consent__btn--yes {
  background: var(--zhu);
  border: 1px solid var(--zhu);
  color: #fff;
}
.cookie-consent__btn--yes:hover {
  background: var(--zhu-dark);
  transform: scale(1.03);
}
@media (max-width: 480px) {
  .cookie-consent__acoes {
    width: 100%;
  }
  .cookie-consent__btn {
    flex: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-consent__btn {
    transition: none;
  }
  .cookie-consent__btn--yes:hover {
    transform: none;
  }
}

/* ===================================================================
   AJUSTES /ui-ux (16/09/2026), medidos no ar contra o método do curso
   Intuitive Pixel. Cada bloco cita a aula. Sobrepõe utilitários do
   Tailwind sem rebuild (seletor com 2 níveis vence classe única).
   =================================================================== */

/* Botão de compra: 40 a 56 de altura, 48 ideal; 64 é "muito grande".
   Padding lateral = 2x vertical; fonte igual ao body. [04-04] [04-09] [11-03] */
a.btn-ember.btn-cta { min-height: 56px; padding: 16px 32px; font-size: 16px; white-space: nowrap; }
/* Sombra diluída: Y 12, blur 20, no máximo 20% de opacidade. [04-05] */
a.btn-ember { box-shadow: 0 12px 20px -8px rgba(226, 59, 46, 0.2); }
a.btn-ember:hover { box-shadow: 0 12px 24px -6px rgba(226, 59, 46, 0.25); }
/* Header: nunca abaixo de 40; no celular a área de toque é 44. [04-04] */
a.btn-ember.btn-mini { min-height: 40px; padding: 10px 20px; font-size: 12px; }
@media (max-width: 639px) {
  a.btn-ember.btn-cta { min-height: 52px; padding: 14px 28px; font-size: 15px; width: 100%; max-width: 360px; }
  a.btn-ember.btn-mini { min-height: 44px; padding: 12px 20px; font-size: 13px; }
}

/* Títulos: headline 105 a 130%, título 120 a 140%, nunca a mesma
   porcentagem do parágrafo; escala arredondada, sem fração. [02-03] [02-01] [15-03] */
html .hero2-h1 { line-height: 1.1; }
html .hero2-h1 .l1 { font-size: 56px; }
html .hero2-h1 .l2 { font-size: 48px; }
html .hero2-sub { font-size: 16px; line-height: 1.5; }
html .sec-h2 { line-height: 1.2; font-size: 36px; }
html .pq-grid .sec-h2, html #como-funciona .sec-h2, html #prova-social h2, html #garantia h2 { font-size: 32px; line-height: 1.2; }
html .cta-h2 { line-height: 1.15; font-size: 48px; }
@media (max-width: 1023px) {
  html .hero2-h1 .l1 { font-size: 40px; }
  html .hero2-h1 .l2 { font-size: 36px; }
  html .sec-h2, html .pq-grid .sec-h2, html #como-funciona .sec-h2, html #prova-social h2, html #garantia h2 { font-size: 28px; }
  html .cta-h2 { font-size: 36px; }
}
@media (max-width: 639px) {
  /* h2 em 2 ou 3 linhas no celular. [10-06] */
  /* 15/10: título em 2 linhas no celular; a letra encolhe nas telas estreitas (71px = bordas e recuo do bloco) */
  html .hero2-h1 .l1 { font-size: min(32px, calc((100vw - 71px) / 10.1)); white-space: nowrap; }
  html .hero2-h1 .l2 { font-size: min(28px, calc((100vw - 71px) / 11.7)); white-space: nowrap; }
  html .hero2-sub { font-size: 15px; }
  html .sec-h2, html .pq-grid .sec-h2, html #como-funciona .sec-h2, html #prova-social h2, html #garantia h2 { font-size: 24px; }
  html .cta-h2 { font-size: 32px; }
}

/* Nenhum texto abaixo de 12; pré-título 12 a 14; corpo 16. [10-10] [11-03] [10-06] */
html .kicker, html .meta { font-size: 12px; }
html .curr-item p, html .cf-steps span { font-size: 14px; }
html footer div[class] { font-size: 12px; }
/* Rodapé com contraste AA (era 2,5:1 e 4,2:1). [03-03] */
html footer div[class], html footer a[class] { color: rgba(240, 230, 210, 0.6); }
html footer a[class]:hover { color: #F0E6D2; }
html .curr-tag, html .cf-tag { font-size: 11px; }
html .mz-nums span { font-size: 12px; }
html .mz-quote em { font-size: inherit; }
html .prova-quote { font-size: 16px; }
html #cta-final p[class*="text-\[10px\]"] { font-size: 12px; color: rgba(240, 230, 210, 0.6); }
/* Botão preenchido: vermelho um tom abaixo do da marca só no fundo do
   botão, pra o branco passar de 4,29:1 pra 4,79:1 (AA). O vermelho da
   marca (#E23B2E) continua em texto e detalhes sobre preto, onde dá
   4,6:1; escurecer lá pioraria. [03-03] */
a.btn-ember, .cookie-consent__btn--yes { background: #D63428; }

/* --- Mobile (/ui-ux, 16/09/2026): margem única de 24, escala de fonte
   menor, cards na escala de 8, botão de card até o padding. --- */
@media (max-width: 1023px) {
  /* Uma margem só na página inteira: 24. [05-05] */
  html .hero2-inner { padding-left: 24px; padding-right: 24px; }
  /* Cards na escala de 8. [05-03] */
  html .pq-col { padding: 24px; }
  /* Respiro igual entre seções. [05-01] */
  html .sec, html #prova-social, html #garantia { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 639px) {
  /* Display menor no celular: preço 48, números 28, citação 22. [02-01] [10-06] */
  html .preco-big { font-size: 48px; }
  html .mz-nums b { font-size: 28px; }
  html .mz-quote { font-size: 22px; }
  /* Botão dentro de card vai até o padding. [05-03] */
  html .preco-card a.btn-ember.btn-cta { width: 100%; max-width: none; }
}
@media (max-width: 639px) {
  /* Um alinhamento por grupo no celular: cabeçalhos de seção à esquerda,
     como nas seções 01 a 04; centralizado só o card de preço e o CTA final. [05-07] */
  html #prova-social .max-w-xl.text-center, html #investimento .max-w-xl.text-center.mb-10, html #faq h2.text-center { text-align: left; }
  html #prova-social .kicker, html #investimento .kicker.justify-center { justify-content: flex-start; }
  /* Um primário por tela: a barra fixa de compra já está sempre visível,
     o botão do header vira redundância. [04-01] */
  html header a.btn-mini { display: none; }
}

/* --- Aviso de cookies, 14/10/2026 (item 2, guia de cookies da ANPD de 2022):
   "Recusar", "Gerenciar" e "Aceitar" com o mesmo formato e destaque (p. 22 e
   33). Nenhum botão em vermelho: o vermelho fica só pra compra. O "Gerenciar"
   abre as categorias (.is-gerenciar). --- */
.cookie-consent .cookie-consent__acoes { gap: 0.5rem; }
.cookie-consent .cookie-consent__btn {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  background: rgba(240, 230, 210, 0.06);
  border: 1px solid rgba(240, 230, 210, 0.38);
  color: #F0E6D2;
  font-size: 11px;
  transform: none;
}
.cookie-consent .cookie-consent__btn:hover {
  background: rgba(240, 230, 210, 0.14);
  border-color: rgba(240, 230, 210, 0.6);
  color: #fff;
  transform: none;
}
.cookie-consent .cookie-consent__txt b { color: #F0E6D2; font-weight: 700; }
.cookie-consent__cats { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0.4rem; }
.cookie-consent__cats li { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.cookie-consent__cats li > span { display: block; padding: 0.35rem 0 0.35rem 1.9rem; }
.cookie-consent__cats label { display: flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; padding: 0.35rem 0; cursor: pointer; }
.cookie-consent__cats input { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; flex-shrink: 0; accent-color: #D63428; }
.cookie-consent__cats b { color: #F0E6D2; font-weight: 700; }
@media (max-width: 480px) {
  .cookie-consent .cookie-consent__acoes { width: 100%; }
  .cookie-consent .cookie-consent__btn { flex: 1; padding: 0.5rem 0.4rem; }
}