/* ===================================================================
   Pagina de Vendas — extras
   Componentes adicionados na versão de copy v2:
   testimonials curtos, testimonials longos, suporte em camadas,
   CTA intermediário, recapitulação final.
   =================================================================== */

/* ---------- Prose 2-col (used inside dark Dor section) ---------- */
.prose-2col {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 720px;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}
.prose-2col p { color: oklch(82% 0.02 75); }
.prose-2col p em { font-family: var(--font-display); font-style: italic; color: var(--terra); font-size: 1.08em; }
.prose-2col p strong { font-weight: 500; color: var(--paper); border-bottom: 1px dashed var(--terra); padding-bottom: 1px; }

/* ---------- alt-grid four columns ---------- */
.alt-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .alt-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .alt-grid--four { grid-template-columns: 1fr; } }

/* ---------- bonuses four ---------- */
.bonuses--four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .bonuses--four { grid-template-columns: 1fr; } }

/* ===================================================================
   TESTIMONIALS — short cards (Bloco 04)
   =================================================================== */
.tests-mini {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
}
.test-mini {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--paper-deep);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.test-mini .qmark {
  position: absolute;
  top: -22px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--terra);
  font-style: italic;
}
.test-mini h4 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
}
.test-mini h4 em { font-style: italic; color: var(--terra); }
.test-mini p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
  font-style: italic;
}
.test-mini footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.test-mini .ph {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(74% 0.04 70), oklch(60% 0.05 65));
  flex: 0 0 36px;
}
.test-mini footer div { display: flex; flex-direction: column; line-height: 1.25; }
.test-mini footer strong { font-weight: 500; color: var(--ink); font-size: var(--fs-sm); font-family: var(--font-sans); }
.test-mini footer span { color: var(--ink-mute); font-size: var(--fs-xs); font-family: var(--font-sans); letter-spacing: 0.02em; }

/* dark variant */
.s--dark .tests-mini { border-top-color: oklch(28% 0.03 60); }
.s--dark .test-mini { background: oklch(20% 0.025 55); border-color: oklch(28% 0.03 60); }
.s--dark .test-mini h4 { color: var(--paper); }
.s--dark .test-mini p { color: oklch(82% 0.02 75); }
.s--dark .test-mini footer { border-top-color: oklch(28% 0.03 60); }
.s--dark .test-mini footer strong { color: var(--paper); }
.s--dark .test-mini footer span { color: oklch(70% 0.02 75); }

@media (max-width: 1100px) { .tests-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .tests-mini { grid-template-columns: 1fr; } }

/* ===================================================================
   CTA INTERMEDIÁRIO (Bloco 05)
   =================================================================== */
.cta-mid {
  background: var(--terra-soft);
  padding: var(--s-9) var(--s-6);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-mid .wrap { max-width: 880px; display: flex; flex-direction: column; gap: var(--s-5); align-items: center; }
.cta-mid-lede {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.18;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  font-weight: 400;
  text-wrap: balance;
}
.cta-mid-lede em { font-style: italic; color: var(--terra); }
.cta-mid-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===================================================================
   TESTIMONIALS — case cards (Bloco 11, dark) — compactos, 3 colunas
   =================================================================== */
.tests-cases {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  border-top: 1px solid oklch(28% 0.03 60);
  padding-top: var(--s-7);
}
.test-case {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: oklch(20% 0.025 55);
  border: 1px solid oklch(28% 0.03 60);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.test-case .qmark {
  position: absolute;
  top: -22px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 1;
  color: var(--terra);
  font-style: italic;
}
.test-case h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
  color: var(--paper);
  text-wrap: balance;
  margin-top: var(--s-3);
}
.test-case h4 em { font-style: italic; color: var(--terra); }
.test-case > p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: oklch(82% 0.02 75);
  font-style: italic;
  flex: 1;
}
.test-case > p em { color: var(--terra); font-style: normal; font-family: var(--font-serif); font-weight: 500; }
.test-case footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid oklch(28% 0.03 60);
}
.test-case .ph {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(60% 0.08 60), oklch(45% 0.10 50));
}
.test-case footer div { display: flex; flex-direction: column; line-height: 1.3; gap: 3px; }
.test-case footer strong { font-weight: 500; color: var(--paper); font-size: var(--fs-sm); font-family: var(--font-sans); }
.test-case footer span { color: oklch(70% 0.02 75); font-size: var(--fs-2xs); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 980px) { .tests-cases { grid-template-columns: 1fr; gap: var(--s-4); } }

/* ===================================================================
   SUPPORT LAYERS (Bloco 12)
   =================================================================== */
.support-layers {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.support-layer {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 320px;
}
.support-layer .num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--terra);
  border-top: 2px solid var(--terra);
  padding-top: var(--s-2);
  width: fit-content;
}
.support-layer h4 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin-top: var(--s-3);
}
.support-layer h4 em { font-style: italic; color: var(--terra); }
.support-layer .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.support-layer p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--ink-soft);
}
.support-layer .footnote {
  margin-top: auto;
  padding-top: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-mute);
  border-top: 1px dashed var(--line);
  font-style: italic;
}

@media (max-width: 1000px) { .support-layers { grid-template-columns: 1fr; } }

/* ===================================================================
   REPRISE (Final offer recap)
   =================================================================== */
.reprise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  margin: var(--s-8) 0 var(--s-7);
  padding: var(--s-6) 0;
  border-top: 1px solid oklch(40% 0.03 60);
  border-bottom: 1px solid oklch(40% 0.03 60);
}
.reprise-price {
  grid-column: 1 / -1;
  text-align: center;
  padding-top: var(--s-6);
  margin-top: var(--s-3);
  border-top: 1px solid oklch(40% 0.03 60);
}
.reprise-col { display: flex; flex-direction: column; gap: var(--s-3); }
.reprise-h {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--terra);
  border-top: 2px solid var(--terra);
  padding-top: var(--s-2);
  width: fit-content;
}
.reprise-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.reprise-col ul li {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--paper);
  display: flex;
  gap: var(--s-2);
}
.reprise-col ul li .sp { color: var(--terra); flex: 0 0 auto; }

.reprise-price .big {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.95;
  color: var(--paper);
  letter-spacing: var(--tr-display);
  display: block;
  margin-top: var(--s-2);
}
.reprise-price .big em { font-style: italic; color: var(--terra); }
.reprise-price .big-sub {
  display: block;
  font-size: var(--fs-lg);
  font-style: italic;
  color: oklch(75% 0.02 75);
  letter-spacing: var(--tr-tight);
}
.reprise-price .install {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: oklch(82% 0.02 75);
  margin-top: var(--s-2);
}
.reprise-price .install strong { color: var(--paper); font-weight: 500; }
.reprise-price .micro {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: oklch(70% 0.02 75);
}

@media (max-width: 980px) { .reprise { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ===================================================================
   FINAL signature
   =================================================================== */
.final-body .signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--paper);
  margin-top: var(--s-5);
  line-height: 1.3;
}
.final-body .sig-name {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--terra);
  font-size: var(--fs-3xl);
}

/* ===================================================================
   RITUAL DIAGRAM (Metodo / Coordenadas)
   Facilitacao visual do ciclo semanal Capture -> Cure -> Crie.
   Vive dentro de .s--dark, entao o background do svg ja contrasta.
   =================================================================== */
.ritual-diagram {
  margin: var(--s-7) 0 var(--s-6);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid oklch(72% 0.012 75 / 0.18);
  border-radius: var(--r-md);
  background: oklch(20% 0.025 60 / 0.35);
}
.ritual-diagram-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: oklch(82% 0.020 78);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: 8px;
}
.ritual-diagram-cap em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--terra-soft);
  text-transform: none;
  letter-spacing: -0.005em;
}
.ritual-diagram-cap .sp { color: var(--terra-soft); font-size: 1.2em; }
.ritual-diagram svg {
  width: 100%; height: auto; display: block;
  max-width: 880px;
}
@media (max-width: 720px) {
  .ritual-diagram { padding: var(--s-5) var(--s-4); }
  .ritual-diagram svg { min-height: 220px; }
}

/* ===================================================================
   HERO DEMO — animacao "instalacao -> uso" (substitui o video)
   4 cenas em loop de 24s (Instalacao, Captura, Ritual 3x3, Resultado).
   Pura CSS: sem dependencia de JS. Respeita prefers-reduced-motion.
   =================================================================== */
.hero-video--demo {
  /* o container .hero-video ja da borda, aspect-ratio 16/9 e bg ink via ::before */
  display: block;
}
.hero-video--demo .demo {
  position: absolute; inset: 0;
  z-index: 2;
}
.demo-badge {
  position: absolute; top: 14px; right: 16px; z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: oklch(78% 0.05 70);
  background: oklch(20% 0.02 60 / 0.55);
  border: 1px solid oklch(48% 0.155 35 / 0.45);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.hero-video--demo .vlabel { z-index: 4; }

.demo-scene {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 4vw, 44px);
  display: flex; flex-direction: column;
  opacity: 0;
  /* fundo opaco por cena: durante a transicao uma cobre a outra, sem texto fantasma */
  background:
    radial-gradient(circle at 30% 25%, oklch(26% 0.05 35 / 0.30), transparent 60%),
    radial-gradient(circle at 75% 80%, oklch(34% 0.06 60 / 0.20), transparent 55%),
    oklch(15% 0.022 56);
  animation: demoScene 24s linear infinite;
}
.demo-scene.scene-install { animation-delay: 0s; }
.demo-scene.scene-capture { animation-delay: 6s; }
.demo-scene.scene-ritual  { animation-delay: 12s; }
.demo-scene.scene-result  { animation-delay: 18s; }

@keyframes demoScene {
  0%      { opacity: 0; transform: translateY(10px); }
  2.5%    { opacity: 1; transform: translateY(0); }
  21%     { opacity: 1; transform: translateY(0); }
  24%     { opacity: 0; transform: translateY(-6px); }
  100%    { opacity: 0; transform: translateY(10px); }
}

/* ----- janela "terminal/app" das cenas 1-3 ----- */
.demo-chrome {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid oklch(82% 0.012 75 / 0.14);
}
.demo-chrome .d {
  width: 9px; height: 9px; border-radius: 50%;
  background: oklch(50% 0.02 60);
}
.demo-chrome .d:nth-child(1) { background: oklch(58% 0.14 35); }
.demo-chrome-label {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: var(--tr-wide); text-transform: lowercase;
  color: oklch(72% 0.02 75);
}
.demo-body { display: flex; flex-direction: column; gap: clamp(7px, 1.4vw, 12px); }

.demo-term .ln, .demo-inbox .chip {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.7vw, 15px);
  line-height: 1.3;
  color: oklch(86% 0.02 78);
  display: flex; align-items: center; gap: 9px;
  opacity: 0;
  animation: demoLine 24s linear infinite;
}
.demo-term .prmpt { color: var(--terra-soft); }
.demo-term .caret { color: var(--terra-soft); }
.demo-term .ok { color: oklch(72% 0.10 148); }
/* na cena do ritual o ✓ vai pra direita (status de cada skill concluida) */
.scene-ritual .demo-term .ln.skill { gap: 0; }
.scene-ritual .demo-term .ln.skill .caret { margin-right: 9px; }
.scene-ritual .demo-term .ok { margin-left: auto; }
.demo-term .cmd { color: var(--paper); }
.demo-inbox .plus { color: var(--terra-soft); font-weight: 600; }
.demo-inbox .chip {
  background: oklch(24% 0.02 60 / 0.6);
  border: 1px solid oklch(82% 0.012 75 / 0.1);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.ln.done {
  color: var(--terra-soft);
  margin-top: 4px;
  font-style: normal;
}
.ln.done .sp { color: var(--gold); }

/* reveal sequencial das linhas dentro da janela visivel da cena */
@keyframes demoLine {
  0%, 2%   { opacity: 0; transform: translateY(7px); }
  5%       { opacity: 1; transform: translateY(0); }
  21%      { opacity: 1; transform: translateY(0); }
  24%,100% { opacity: 0; transform: translateY(0); }
}
/* cena 1 (delay 0): linhas 0.0 -> 2.4s */
.scene-install .ln:nth-child(1) { animation-delay: 0.0s; }
.scene-install .ln:nth-child(2) { animation-delay: 0.5s; }
.scene-install .ln:nth-child(3) { animation-delay: 1.0s; }
.scene-install .ln:nth-child(4) { animation-delay: 1.5s; }
.scene-install .ln:nth-child(5) { animation-delay: 2.0s; }
.scene-install .ln:nth-child(6) { animation-delay: 2.6s; }
/* cena 2 (delay 6s): chips 6.0 -> 8.4s */
.scene-capture .chip:nth-child(1) { animation-delay: 6.0s; }
.scene-capture .chip:nth-child(2) { animation-delay: 6.5s; }
.scene-capture .chip:nth-child(3) { animation-delay: 7.0s; }
.scene-capture .chip:nth-child(4) { animation-delay: 7.5s; }
.scene-capture .ln:nth-child(5)   { animation-delay: 8.2s; }
/* cena 3 (delay 12s): skills 12.0 -> 14.4s */
.scene-ritual .ln:nth-child(1) { animation-delay: 12.0s; }
.scene-ritual .ln:nth-child(2) { animation-delay: 12.5s; }
.scene-ritual .ln:nth-child(3) { animation-delay: 13.0s; }
.scene-ritual .ln:nth-child(4) { animation-delay: 13.5s; }
.scene-ritual .ln:nth-child(5) { animation-delay: 14.2s; }

/* ----- cena 4: resultado ----- */
.scene-result { align-items: center; justify-content: center; text-align: center; }
.demo-result { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.demo-result-sp {
  font-family: var(--font-display);
  font-size: 30px; color: var(--gold);
  opacity: 0; animation: demoLine 24s linear infinite; animation-delay: 18.2s;
}
.demo-result-h {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05; letter-spacing: var(--tr-tight);
  color: var(--paper);
  opacity: 0; animation: demoLine 24s linear infinite; animation-delay: 18.5s;
}
.demo-result-sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: oklch(80% 0.05 70);
  opacity: 0; animation: demoLine 24s linear infinite; animation-delay: 19.0s;
}

/* acessibilidade: sem movimento, mostra a cena de resultado fixa */
@media (prefers-reduced-motion: reduce) {
  .demo-scene { animation: none; opacity: 0; transform: none; }
  .demo-scene.scene-result { opacity: 1; }
  .scene-result .demo-result-sp,
  .scene-result .demo-result-h,
  .scene-result .demo-result-sub { animation: none; opacity: 1; }
}