/* ==========================================================================
   Cofre do Nome: camada visual do projeto (carrega depois do style.css)
   Conceito: cofre dourado com acabamento tech, vidro, brilho violeta e grade de pontos.
   ========================================================================== */

:root {
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --pontos: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.3px);
  --vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  --vidro-borda: rgba(255, 255, 255, 0.09);
  --brilho-ac: color-mix(in srgb, var(--ac-500) 30%, transparent);
}

/* Destaques dos títulos: serifa itálica, ouro metálico */
.h-hero em, .h-section em, .h-mid em, .big-truth em, .compare__title em, .deliver-card__title em, .feature__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: 0;
  line-height: 1;
  padding-right: 0.04em;
}
.h-hero .text-gold { font-weight: 400; }
.h-hero, .h-section, .h-mid { letter-spacing: -0.025em; }
.h-section { font-size: clamp(32px, 4.6vw, 56px); }

/* Rótulos com cara de interface */
.dream-killer em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.12em; }
.eyebrow, .panel__kicker, .then-now__card small, .relato__rotulo, .vsl__label, .price-tag, .urgency {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
}

/* Grade de pontos nas seções escuras */
.hero::before, .different::after, .deliver::after, .final::before, .guarantee::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pontos);
  background-size: 22px 22px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
}
.different > .container, .deliver > .container, .guarantee > .container { position: relative; z-index: 1; }
.final::before { z-index: 1; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(55% 45% at 15% 0%, var(--brilho-ac), transparent 70%),
    radial-gradient(45% 40% at 90% 15%, color-mix(in srgb, var(--ac-500) 18%, transparent), transparent 70%),
    var(--esc-900);
}
.hero__grid-lines { display: none; }
.hero__tag { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; padding: 8px 16px; background: rgba(255, 255, 255, 0.04); }
.hero__sub { color: var(--texto-2); }

/* Disco de combinação do cofre atrás do vídeo */
.vsl__disco {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(118%, 980px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: disco 140s linear infinite;
}
/* Vídeo horizontal: o disco só aparece nas laterais do vídeo, nunca por cima do texto */
.hero--vsl-horizontal .vsl__disco {
  width: 150%;
  max-width: none;
  animation: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 29%, #000 36%, #000 64%, transparent 71%);
  mask-image: linear-gradient(180deg, transparent 29%, #000 36%, #000 64%, transparent 71%);
}
.hero--vsl-horizontal .disco__num { font-size: 11px; }.disco__aro { fill: none; stroke: color-mix(in srgb, var(--dst-400) 22%, transparent); stroke-width: 1; }
.disco__aro--fino { stroke: rgba(255, 255, 255, 0.07); }
.disco__traco { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.disco__traco--forte { stroke: var(--dst-400); stroke-width: 1.6; }
.disco__num { fill: color-mix(in srgb, var(--dst-300) 70%, transparent); font-family: var(--font-mono); font-size: 13px; text-anchor: middle; dominant-baseline: central; }
@keyframes disco { to { transform: translate(-50%, -50%) rotate(360deg); } }

.vsl__glow { background: radial-gradient(closest-side, color-mix(in srgb, var(--dst-500) 28%, transparent), color-mix(in srgb, var(--ac-500) 18%, transparent) 55%, transparent); }
.vsl__frame {
  padding: 8px;
  border-radius: 26px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--dst-300) 70%, transparent), rgba(255, 255, 255, 0.06) 35%, rgba(255, 255, 255, 0.03) 65%, color-mix(in srgb, var(--ac-500) 45%, transparent));
  box-shadow: var(--sombra-funda), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 80px -20px color-mix(in srgb, var(--ac-500) 50%, transparent);
}
.vsl__screen { border-radius: 19px; }
.vsl__label { background: color-mix(in srgb, var(--esc-900) 85%, transparent); backdrop-filter: blur(10px); font-size: 12px; }

/* Chips de vidro flutuando (como os ícones das referências) */
.vsl__chip {
  background: color-mix(in srgb, var(--esc-800) 55%, transparent);
  border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--texto-2);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.vsl__chip b { color: var(--branco); font-size: 18px; margin-bottom: 2px; }
.vsl__chip-icon { border-radius: 50%; }
.vsl__chip-icon svg { width: 18px; height: 18px; }
.hero--B .vsl__chip--1 { left: -70px; top: 14%; }
.hero--B .vsl__chip--2 { right: -70px; bottom: 12%; }

/* --------------------------------------------------------------------------
   Faixa e números
   -------------------------------------------------------------------------- */
.ribbon__item { font-family: var(--font-mono); letter-spacing: 0.1em; }
@media (min-width: 961px) { .stat__num { font-size: clamp(34px, 3.4vw, 50px); white-space: nowrap; } }
.stats__grid {
  background: var(--vidro);
  border-color: var(--vidro-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------------------
   Seções claras
   -------------------------------------------------------------------------- */
.section--light .text-gold { background-image: linear-gradient(120deg, var(--dst-600) 0%, var(--dst-700) 60%, color-mix(in srgb, var(--dst-700) 80%, black) 100%); }
.section--light .eyebrow { color: color-mix(in srgb, var(--ac-600) 85%, black); }
.section--light .eyebrow::before, .section--light .eyebrow--center::after { background: var(--ac-500); }
.testimonials, .movement, .how, .offer, .faq {
  background:
    radial-gradient(50% 40% at 100% 0%, color-mix(in srgb, var(--ac-500) 7%, transparent), transparent 70%),
    var(--claro);
}

/* Relatos (exemplos ilustrativos em texto) */
.relatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.relato {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 22px;
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--esc-900) 45%, transparent);
}
.relato__topo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.relato__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--esc-900); color: var(--dst-400); flex: none; }
.relato__icone svg { width: 20px; height: 20px; }
.relato__rotulo { font-size: 12px; text-transform: uppercase; color: var(--tinta); }
.relato__num { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--tinta-suave); }
.relato p { font-size: 15px; color: var(--tinta-suave); }
.relatos__fecho { max-width: 720px; margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; font-size: clamp(17px, 1.6vw, 19px); color: var(--tinta-suave); }

/* Passos da compra */
.how__nota {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 760px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--branco);
  border: 1px solid var(--linha);
  font-size: 15px;
  color: var(--tinta-suave);
}
.how__nota svg { width: 24px; height: 24px; flex: none; color: var(--ac-600); margin-top: 1px; }
.step__num { font-size: 36px; }

/* --------------------------------------------------------------------------
   Painéis escuros: vidro + brilho violeta
   -------------------------------------------------------------------------- */
.gluta {
  background:
    radial-gradient(60% 55% at 90% 0%, color-mix(in srgb, var(--ac-500) 32%, transparent), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, color-mix(in srgb, var(--dst-500) 12%, transparent), transparent 70%),
    var(--esc-900);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gluta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pontos);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%);
  mask-image: linear-gradient(200deg, #000, transparent 55%);
  pointer-events: none;
}
.panel, .deliver-card, .then-now__card--then, .confession__quote, .coke {
  background: var(--vidro);
  border-color: var(--vidro-borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.panel { position: relative; }
.section--light .coke { background: var(--esc-900); border-color: var(--esc-900); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--esc-900) 70%, transparent); }
.section--light .coke strong, .coke strong { color: var(--dst-300); }

/* Ritmo entre blocos (48 / 64 px) */
.big-truth { margin-top: 64px; }
.bloco-texto { margin-block: 48px; }
.bloco-texto + .compare, .bloco-texto + .gluta { margin-top: 48px; }
.panel__icon { border-radius: 50%; }
.coke__icon { border-radius: 50%; }

/* "A conta à vista": letras do nome viram números em dourado */
.conta { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 clamp(30px, 4vw, 44px); }
.conta__par {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 58px;
  padding: 12px 10px 10px;
  border-radius: 14px;
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
}
.conta__letra { font-family: var(--font-mono); font-size: 13px; color: var(--texto-3); }
.conta__num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-dst);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Comparativo, entregáveis, oferta, garantia
   -------------------------------------------------------------------------- */
.compare { border-color: var(--vidro-borda); box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--ac-500) 60%, transparent); }
.compare__col--us { background: linear-gradient(170deg, color-mix(in srgb, var(--dst-500) 14%, transparent), color-mix(in srgb, var(--ac-500) 10%, transparent)); }

.deliver {
  background:
    radial-gradient(50% 40% at 50% 0%, color-mix(in srgb, var(--ac-500) 20%, transparent), transparent 70%),
    var(--esc-900);
}
.deliver-card { display: flex; flex-direction: column; transition: transform 0.45s var(--ease), border-color 0.45s; }
.deliver-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dst-400) 40%, transparent); }
.deliver-card__num { font-family: var(--font-mono); font-size: 13px; font-weight: 500; -webkit-text-stroke: 0; color: var(--dst-400); margin-bottom: 26px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--dst-400) 35%, transparent); align-self: flex-start; }
.deliver-card__title { font-size: clamp(22px, 2.1vw, 26px); }
.deliver .section-head .lead { max-width: 660px; margin-inline: auto; }

.price-card {
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--ac-500) 28%, transparent), transparent 70%),
    var(--esc-900);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.price-card--solo { max-width: 620px; margin-inline: auto; text-align: center; }
.price-card--solo .price { justify-content: center; }
.price-card--solo .price-tag { align-self: center; }
.price-card--solo .price-alt { font-size: 16.5px; }
.price-card h3 { font-size: clamp(22px, 2.4vw, 28px); }
.pay-row > span { max-width: 460px; line-height: 1.55; }
.anchor__card { box-shadow: 0 24px 50px -40px color-mix(in srgb, var(--esc-900) 45%, transparent); }
.anchor__price { font-size: clamp(22px, 2.2vw, 30px); }
.why-cheap p { font-size: clamp(17px, 1.6vw, 19px); color: var(--tinta-suave); }
.everyday-foot { max-width: 760px; margin-inline: auto; font-size: 14px; color: var(--tinta-suave); }
@media (max-width: 600px) {
  .everyday-foot, .purpose__quote { text-align: left; }
  .everyday-foot { font-size: 15px; }
}

.guarantee__box { align-items: start; }
@media (min-width: 961px) { .guarantee .seal { position: sticky; top: 120px; } }
.guarantee__box { background: radial-gradient(60% 80% at 0% 50%, color-mix(in srgb, var(--dst-500) 14%, transparent), transparent 70%), var(--vidro); border-color: color-mix(in srgb, var(--dst-400) 25%, transparent); }
.seal__core { box-shadow: var(--sombra-dst), 0 0 0 10px color-mix(in srgb, var(--dst-500) 10%, transparent), 0 0 0 22px color-mix(in srgb, var(--dst-500) 5%, transparent); }

/* --------------------------------------------------------------------------
   Celular
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .relatos { grid-template-columns: 1fr; }
  .hero--B .vsl__chip { display: none; }
}
@media (max-width: 600px) {
  .vsl__disco { display: none; }
  .stat__num { font-size: 28px; }
  .hero--B .hero__sub, .pay-row > span { text-align: left; }
  .conta__par { min-width: 0; flex: 1; }
  .conta__num { font-size: 24px; }
  .price-card--solo { text-align: left; }
  .price-card--solo .price { justify-content: flex-start; }
  .price-card--solo .price-tag { align-self: flex-start; }
}