/* =========================================================================
   FOREX COPILOT — Landing Page
   -------------------------------------------------------------------------
   Fondo OLED unico, deliberadamente oscuro (no responde a prefers-color-
   scheme: es una decision de marca, no un tema) — el mismo #0a0a0c que usa
   el panel de la extension de Chrome, para que ambas superficies del
   ecosistema compartan literalmente el mismo negro.

   Paleta de dos acentos neon, cada uno con un rol fijo (igual que en la
   extension — ver popup.html):
     --accent (naranja #ff5500): marca, CTAs, elementos interactivos.
     --cyan   (#00f0ff):         datos "en vivo"/telemetria, nunca un CTA.
   El verde/rojo de P&L (--positive/--negative) es un tercer canal aparte:
   nunca se usan para marca ni para CTAs, solo para lecturas de ganancia/
   perdida — asi un numero en rojo siempre significa "perdida", nunca
   "elemento interactivo".
   ========================================================================= */

:root {
  --bg: #0a0a0c;
  --bg-elevated: #131316;
  --bg-bento: #101012;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --text: #f5f3ee;
  --text-muted: #9a9a95;
  --text-dim: #5c5c58;

  --accent: #ff5500;
  --accent-soft: rgba(255, 85, 0, 0.14);
  --accent-dim: rgba(255, 85, 0, 0.4);
  --on-accent: #1a0800;

  --cyan: #00f0ff;
  --cyan-soft: rgba(0, 240, 255, 0.14);

  --positive: #00d97e;
  --negative: #ff3b30;

  --font-display: "Bricolage Grotesque", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Curva "expo-out": desaceleracion pronunciada al final del movimiento —
     el mismo lenguaje de easing que usan Linear/Vercel para que el scroll y
     el hover se sientan organicos en vez de mecanicos. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);

  --nav-height: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  /* Compensa que el nav es position:fixed (fuera del flujo): sin este
     padding, el hero arrancaria en y=0 y sus primeros ~76px quedarian
     tapados por el nav. */
  padding-top: var(--nav-height);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* Fondo ambiental: nunca negro solido. Cuatro resplandores de marca (cian
     = datos, naranja = marca/riesgo — mismo reparto de roles documentado
     arriba) a muy baja opacidad en las esquinas, mas una cuadricula tenue
     tipo grafico de trading. background-attachment: fixed hace que ambos se
     sientan como iluminacion fija del "cuarto" mientras el contenido se
     desliza encima, en vez de un patron que se mueve junto con el scroll. */
  background-color: var(--bg);
  background-image:
    radial-gradient(620px circle at 6% 4%, rgba(0, 240, 255, 0.09), transparent 60%),
    radial-gradient(680px circle at 96% 18%, rgba(255, 85, 0, 0.08), transparent 60%),
    radial-gradient(640px circle at 10% 92%, rgba(255, 85, 0, 0.07), transparent 60%),
    radial-gradient(600px circle at 100% 100%, rgba(0, 240, 255, 0.08), transparent 60%),
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, 46px 46px, 46px 46px;
  background-attachment: fixed;
}

@media (max-width: 720px) {
  /* background-attachment: fixed repinta en cada frame de scroll en Safari
     mobile (entrecortado) — en pantallas chicas se cambia a scroll; la
     iluminacion ambiental se ve igual, solo deja de quedar "clavada". */
  body { background-attachment: scroll; }
}

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

#topSentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

/* Compensa el nav fixed al saltar a una seccion por ancla (clic en el
   menu, o scrollIntoView desde app.js): sin esto, el nav tapa el titulo de
   la seccion apenas se completa el scroll. */
#problema, #como-funciona, #manifiesto, #faq, #precio {
  scroll-margin-top: var(--nav-height);
}

/* ---------------------------------------------------------------------
   Navegacion — fixed y transparente sobre el hero; gana un fondo de
   cristal (.scrolled, ver app.js) apenas el usuario deja de ver el tope
   de la pagina. Al ser fixed (fuera del flujo), body reserva su alto con
   padding-top: var(--nav-height) mas arriba.
   --------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px clamp(20px, 5vw, 64px);
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
  transition: background var(--ease-snap), border-color var(--ease-snap), backdrop-filter var(--ease-snap);
}
.nav.scrolled {
  background: rgba(10, 10, 10, 0.55);
  border-bottom-color: var(--hairline);
  /* saturate() de mas es el truco clasico de glassmorphism (estilo macOS):
     sin el, un blur puro sobre un fondo oscuro se ve lavado/gris en vez de
     "cristal" con algo de color debajo. */
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-right: auto;
}
.nav-logo {
  width: 22px;
  height: 24px;
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(255, 85, 0, 0.5));
  transition: transform 0.4s var(--ease);
}
.nav-brand:hover .nav-logo { transform: rotate(-8deg) scale(1.08); }

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 14px;
  color: var(--text-muted);
}
.nav-links a { transition: color 0.2s var(--ease-snap); }
.nav-links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  transition: background 0.25s var(--ease-snap), border-color 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.3), 0 12px 36px rgba(255, 85, 0, 0.28);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.5), 0 16px 44px rgba(255, 85, 0, 0.4);
}
.btn-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: rgba(26, 8, 0, 0.16);
  padding: 3px 9px;
  border-radius: 999px;
}

.btn-ghost {
  border: 1px solid var(--hairline-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Contenedor de los dos CTA de acceso (login + compra), a la derecha del
   nav junto a los links de texto. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Version compacta del ghost button, solo para el nav (junto a los links
   de texto, un CTA del mismo alto que .btn-primary se veria sobredimensionado). */
.nav-cta {
  flex-shrink: 0;
  padding: 9px 18px;
}
/* En pantallas chicas se prioriza el CTA de compra (nav-cta-primary, ve
   mas abajo, siempre visible): "Iniciar Sesion" se esconde para no competir
   por espacio con el boton que de verdad convierte. */
@media (max-width: 520px) { .nav-cta { display: none; } }

/* Version compacta del boton solido, para que "Comenzar" quede del mismo
   alto que "Iniciar Sesion" en vez del tamaño mas grande de .btn-primary
   en el hero. A proposito SIN el media query de arriba: en mobile es el
   unico CTA de acceso que queda visible en el nav. */
.nav-cta-primary {
  flex-shrink: 0;
  padding: 9px 20px;
}

/* El wrapper es mas grande que el boton: el "campo magnetico" empieza a
   reaccionar un poco antes de que el cursor toque el boton en si. */
.magnetic-wrap {
  display: inline-flex;
  padding: 14px;
  margin: -14px;
}
.magnetic-wrap .btn-primary {
  transition: transform 0.25s var(--ease), background 0.25s var(--ease-snap), box-shadow 0.25s var(--ease-snap);
  will-change: transform;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 96px clamp(20px, 6vw, 64px) 88px;
  max-width: 980px;
  margin: 0 auto;
}

.hero-glow {
  position: absolute;
  inset: -160px -20% auto -20%;
  height: 620px;
  z-index: -1;
  background:
    radial-gradient(560px circle at 18% 20%, rgba(255, 85, 0, 0.16), transparent 60%),
    radial-gradient(420px circle at 82% 0%, rgba(0, 240, 255, 0.09), transparent 60%);
  pointer-events: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero-title .accent {
  color: var(--accent);
  font-style: italic;
}

.hero-sub {
  max-width: 62ch;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--text-muted);
  margin: 0 0 40px;
}
.hero-sub strong { color: var(--text); font-weight: 600; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Entrada del hero: automatica y rapida (no depende del IntersectionObserver
   ni de que el usuario haga scroll) — es lo primero que se ve, tiene que
   estar completo casi de inmediato. El reveal por scroll (mas abajo) queda
   reservado para lo que esta realmente fuera de pantalla al cargar. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-in {
  animation: hero-in 0.5s var(--ease) both;
  animation-delay: var(--hero-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; }
}

/* ---------------------------------------------------------------------
   Metricas en vivo — franja tipo "ticker de terminal" entre el hero y el
   bento: numeros grandes con la tipografia tecnica (mono), separados por
   hairlines verticales en vez de tarjetas propias, para que se lea como un
   panel de instrumentos y no como otro bloque de marketing.
   --------------------------------------------------------------------- */
.live-metrics {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  /* Cian, no naranja: esta franja es telemetria/datos en vivo, no un CTA —
     mismo reparto de roles que --cyan tiene en el panel de la extension. */
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.035), transparent);
}
.live-metrics-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px clamp(20px, 6vw, 64px);
}
.live-metrics-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 20px;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}

.live-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.live-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 24px;
  border-left: 1px solid var(--hairline);
}
.live-metric:first-child { border-left: none; padding-left: 0; }

.live-metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.live-metric-label {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 30ch;
}

@media (max-width: 860px) {
  .live-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .live-metric { border-left: none; padding-left: 0; }
  .live-metric:nth-child(odd) { padding-right: 20px; }
  .live-metric:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--hairline); }
}
@media (max-width: 520px) {
  .live-metrics-grid { grid-template-columns: 1fr; gap: 20px; }
  .live-metric:nth-child(even) { border-left: none; padding-left: 0; }
}

/* ---------------------------------------------------------------------
   Hero visual — marco tipo "chrome de navegador" alrededor del
   screenshot del dashboard. background-color en el <img> (no solo en el
   frame) es a proposito: si el archivo todavia no esta subido, el espacio
   se ve como un panel oscuro intencional en vez de un icono de imagen rota.
   --------------------------------------------------------------------- */
.hero-visual { margin-top: 56px; }
.hero-visual-frame {
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.08), 0 40px 100px rgba(0, 0, 0, 0.55), 0 20px 50px rgba(0, 240, 255, 0.06);
}
.hero-visual-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
}
.hero-visual-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hairline-strong);
}
.hero-visual-chrome span:nth-child(1) { background: var(--negative); opacity: 0.55; }
.hero-visual-chrome span:nth-child(2) { background: var(--text-dim); opacity: 0.55; }
.hero-visual-chrome span:nth-child(3) { background: var(--positive); opacity: 0.55; }
.hero-visual-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-bento);
}

@media (max-width: 720px) {
  .hero-visual { margin-top: 40px; }
}

/* ---------------------------------------------------------------------
   El Problema — reutiliza .feature-grid/.feature-card (antes "Anatomia")
   con la variante --accent: tres puntos de dolor, no tres piezas de
   producto. Mismo padding/max-width que tenia .anatomy.
   --------------------------------------------------------------------- */
.problem {
  padding: 20px clamp(20px, 6vw, 64px) 140px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Arsenal Analitico — reemplaza al timeline de "Como funciona": en vez
   de 3 pasos de onboarding, 3 modulos reales en zig-zag (texto + imagen,
   alternando de lado via .arsenal-row--reverse). Mismo espiritu que
   .hero-visual-frame para las imagenes (chrome + fallback de fondo).
   --------------------------------------------------------------------- */
.arsenal {
  padding: 20px clamp(20px, 6vw, 64px) 140px;
  max-width: 1180px;
  margin: 0 auto;
}

.arsenal-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

.arsenal-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
}
/* El zig-zag es solo visual (orden de columnas); en el DOM el texto va
   siempre primero, asi que mobile (una sola columna, ver el media query)
   nunca necesita reordenar nada aparte. */
.arsenal-row--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.arsenal-row--reverse .arsenal-text { grid-column: 2; grid-row: 1; }
.arsenal-row--reverse .arsenal-media { grid-column: 1; grid-row: 1; }

.arsenal-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
}
.arsenal-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.arsenal-text p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0;
}

.arsenal-media-frame {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s var(--ease-snap), transform 0.3s var(--ease);
}
.arsenal-media-frame:hover { border-color: var(--hairline-strong); transform: translateY(-3px); }
.arsenal-media-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-bento);
}

@media (max-width: 860px) {
  .arsenal-list { gap: 56px; }
  .arsenal-row,
  .arsenal-row--reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .arsenal-row--reverse .arsenal-text,
  .arsenal-row--reverse .arsenal-media {
    grid-column: 1;
    grid-row: auto;
  }
}


.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  position: relative;
  padding: 34px 26px;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s var(--ease-snap), transform 0.3s var(--ease), background 0.3s var(--ease-snap);
}
/* El borde en hover toma el color de marca de la tarjeta (cian o naranja
   segun --feature-accent, seteado por .feature-card--cyan/--accent mas
   abajo) en vez de un color fijo — asi cada tarjeta "responde" con su
   propio rol. */
.feature-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: var(--feature-accent, var(--hairline-strong));
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  margin-bottom: 22px;
  color: var(--feature-accent);
  background: var(--feature-accent-soft);
  box-shadow: 0 0 0 1px var(--feature-accent-soft);
}
.feature-icon svg { width: 22px; height: 22px; }

/* Dos variantes de color, en el CARD (no en el icono) para que tanto
   .feature-icon como el border-color de :hover mas arriba puedan leer la
   misma variable heredada — las custom properties no suben de hijo a
   padre, asi que tenian que vivir aca. Mismo reparto de roles que el resto
   del sitio: cian para piezas de datos/telemetria, naranja para lo que
   toca el riesgo o una decision del trader. */
.feature-card--cyan {
  --feature-accent: var(--cyan);
  --feature-accent-soft: var(--cyan-soft);
}
.feature-card--accent {
  --feature-accent: var(--accent);
  --feature-accent-soft: var(--accent-soft);
}

.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--text);
}
.feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------------------------------------------------------------------
   Escudo de Confianza — franja compacta de 3 insignias, deliberadamente
   mas chica que el resto de las secciones (padding-top casi nulo: vive
   pegada a "Anatomia", como una aclaracion de seguridad sobre lo que
   acaban de leer, no como una seccion nueva con peso propio). Un solo
   acento (cian) para las tres: es un mensaje unico de confianza, alternar
   colores aca competiria con la seriedad del contenido.
   --------------------------------------------------------------------- */
.trust {
  padding: 0 clamp(20px, 6vw, 64px) 120px;
  max-width: 1180px;
  margin: 0 auto;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.trust-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: linear-gradient(155deg, rgba(0, 240, 255, 0.05), rgba(255, 255, 255, 0.015));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.3s var(--ease-snap);
}
.trust-badge:hover { border-color: var(--cyan-soft); }

.trust-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--cyan);
  background: var(--cyan-soft);
  box-shadow: 0 0 0 1px var(--cyan-soft);
}
.trust-icon svg { width: 18px; height: 18px; }

.trust-badge h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--text);
}
.trust-badge p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------------------------------------------------------------------
   Llamado a la accion final — el ultimo golpe antes del footer legal:
   una sola frase + un CTA solido, sin distracciones (nada de bento, nada
   de grillas). Un resplandor propio y sutil detras del texto, eco del
   .hero-glow del comienzo, para que la pagina "cierre" visualmente donde
   "abrio".
   --------------------------------------------------------------------- */
.final-cta {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: 20px clamp(20px, 6vw, 64px) 130px;
  text-align: center;
}
.final-cta-glow {
  position: absolute;
  inset: -80px -10% auto -10%;
  height: 340px;
  z-index: -1;
  background: radial-gradient(480px circle at 50% 30%, rgba(255, 85, 0, 0.12), transparent 65%);
  pointer-events: none;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  text-wrap: balance;
}
.final-cta .magnetic-wrap { display: inline-flex; }

/* ---------------------------------------------------------------------
   Manifiesto — sin caja, sin grilla: la unica seccion del sitio que es
   pura tipografia sobre el fondo. El contraste con el Bento (denso, con
   datos) y la tarjeta de precio (una sola caja) es intencional.
   --------------------------------------------------------------------- */
.manifesto {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px clamp(20px, 6vw, 64px) 160px;
  text-align: center;
}
.manifesto-eyebrow {
  display: block;
  text-align: center;
}
.manifesto-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin: 0 0 28px;
  text-wrap: balance;
}
.manifesto-text strong {
  color: var(--text);
  font-weight: 700;
}
.manifesto-payoff {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.manifesto-payoff .accent {
  color: var(--accent);
}

/* ---------------------------------------------------------------------
   FAQ — acordeon con altura animada 100% CSS (grid-template-rows de 0fr a
   1fr sobre un wrapper, con overflow:hidden en el hijo directo). Evita el
   truco clasico de max-height (que necesita un valor arbitrario mas
   grande que el contenido y por eso nunca anima a la velocidad correcta
   segun cuanto texto tenga cada respuesta) y evita tambien medir alturas
   por JS: la transicion la resuelve el motor de grid solo, sin saltos.
   --------------------------------------------------------------------- */
.faq {
  padding: 20px clamp(20px, 6vw, 64px) 100px;
  max-width: 780px;
  margin: 0 auto;
}

.faq-list {
  border-top: 1px solid var(--hairline);
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: none;
  border: none;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease-snap);
}
.faq-question:hover { color: var(--text); }
.faq-item.is-open .faq-question { color: var(--text); }

/* "+" hecho con dos barras en pseudo-elementos, rotado 45deg -> "x". */
.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-snap);
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: background 0.2s var(--ease-snap);
}
.faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--accent); }

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}
/* El hijo directo del grid es el que necesita overflow:hidden: una fila
   de grid en 0fr colapsa a 0 de alto, pero su contenido igual se pintaria
   fuera de esa caja si no se recorta aca. */
.faq-answer-inner {
  overflow: hidden;
}
.faq-answer {
  margin: 0 4px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------
   Precio — la unica tarjeta "de verdad" (borde + resplandor propio) de
   toda la pagina: es el unico momento donde SI tiene sentido separar el
   contenido del fondo con una superficie propia, porque es el unico punto
   de conversion del sitio.
   --------------------------------------------------------------------- */
.pricing {
  padding: 0 clamp(20px, 6vw, 64px) 150px;
  display: flex;
  justify-content: center;
}
.pricing-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  text-align: center;
  background: linear-gradient(180deg, rgba(24, 24, 24, 0.6), rgba(10, 10, 10, 0.5));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--hairline-strong);
  border-radius: 24px;
  padding: 56px 44px;
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.06), 0 30px 80px rgba(255, 85, 0, 0.08), 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Trato "premium" del Lifetime Deal: borde con gradiente de marca (en vez
   del hairline generico) + glow mas intenso en ambos acentos a la vez —
   la unica tarjeta del sitio que usa cian Y naranja juntos a proposito,
   porque es la unica decision que combina "dato/analitica" (lo que
   compras) con "marca/CTA" (el pago en si). */
.pricing-card--premium {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(24, 24, 24, 0.75), rgba(10, 10, 10, 0.65)) padding-box,
    linear-gradient(135deg, var(--accent), var(--cyan)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(255, 85, 0, 0.1), 0 40px 100px rgba(255, 85, 0, 0.14), 0 40px 100px rgba(0, 240, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.55);
}

.pricing-ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), #ff8a3d);
  border-radius: 999px;
  padding: 7px 18px;
  box-shadow: 0 10px 28px rgba(255, 85, 0, 0.4);
  white-space: nowrap;
}

.pricing-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(255, 90, 31, 0.4);
  background: rgba(255, 90, 31, 0.08);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
}

.pricing-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.pricing-copy {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 44ch;
  margin: 0 auto 32px;
}
.pricing-copy strong { color: var(--text); font-weight: 600; }

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.price-currency {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-muted);
}
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.price-period {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--text-muted);
  text-align: left;
}

/* Checklist de lo que incluye el pago — refuerza "esto no es un boton
   vacio, es acceso a modulos concretos" antes de llegar al boton en si. */
.pricing-features {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}
.pricing-features li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cyan);
  font-weight: 700;
}

/* Checkout-First: el boton de PayPal reemplaza al link "Asegurar mi
   Lifetime Deal" de antes — no hay cuenta gratis, pagar ES el alta. */
.checkout-box { margin: 28px 0 0; min-height: 52px; }
#paypal-button-container { max-width: 320px; margin: 0 auto; }
.checkout-status {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
  margin: 10px 0 0;
}
.checkout-status.error { color: #fca5a5; font-weight: 600; }

.pricing-card .magnetic-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto -14px;
}
.pricing-card .btn-primary { width: 100%; justify-content: center; }

.pricing-fine {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 28px 0 0;
}

@media (max-width: 520px) {
  .pricing-card { padding: 40px 26px; }
  .price-amount { font-size: 52px; }
}

/* ---------------------------------------------------------------------
   Motor de revelado (IntersectionObserver, ver app.js): estado inicial
   discreto — nunca opacity:0 puro, un fade-up sutil de 18px, para que si
   algo fallara en observar el elemento, el contenido siga siendo legible.
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0.001;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Pie de pagina legal — requisito de las pasarelas de pago (PayPal/
   Stripe piden Terminos, Privacidad y un aviso de riesgo visibles antes
   de cobrar): copyright + 3 enlaces arriba, descargo de riesgo abajo en
   gris casi invisible (es letra chica real, no un CTA — por eso el color
   va mucho mas tenue que --text-dim, que el resto del sitio usa para
   texto que si se espera que se lea con comodidad).
   --------------------------------------------------------------------- */
.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px clamp(20px, 6vw, 64px) 40px;
  border-top: 1px solid var(--hairline);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

.footer-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--text-dim);
  transition: color 0.2s var(--ease-snap);
}
.footer-links a:hover { color: var(--text); }

.footer-disclaimer {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.22);
  max-width: 72ch;
}

@media (max-width: 520px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
}