/*
  Hazon Markets — sitio público (hazonmarkets.com)
  Hoja de estilos sin dependencias ni fuentes externas. Paleta del panel
  (Tailwind slate-950/900/800 + emerald-500). Mobile-first: las reglas base
  son para ~390 px y los @media (min-width) amplían para escritorio.

  Índice:
    1. Variables y base
    2. Cabecera y menú (todas las páginas)
    3. Pie (todas las páginas)
    4. Páginas de contenido (legales, soporte, 404)
    5. Inicio: secciones
    6. Inicio: teléfono y pantallas provisionales
    7. Movimiento (aparición al hacer scroll)
    8. Fecha de entrada en vigor
*/

/* 1. Variables y base ===================================================== */

:root {
  --bg: #020617;          /* slate-950 */
  --bg-2: #050b1f;
  --surface: #0f172a;     /* slate-900 */
  --surface-2: #131c33;
  --border: #1e293b;      /* slate-800 */
  --border-2: #2a3a55;
  --text: #e2e8f0;        /* slate-200 */
  --muted: #94a3b8;       /* slate-400 */
  --accent: #10b981;      /* emerald-500 */
  --accent-hover: #34d399;/* emerald-400 */
  --accent-soft: rgba(16, 185, 129, 0.12);
  --warn-bg: rgba(245, 158, 11, 0.12);
  --warn-text: #fbbf24;   /* amber-400 */
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --max: 46rem;           /* texto legal: líneas cómodas de leer */
  --max-wide: 72rem;      /* inicio, cabecera y pie */
  --header-h: 4rem;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; }
svg.icon { width: 1.25rem; height: 1.25rem; flex: none; }

a { color: var(--accent-hover); text-underline-offset: 3px; }
a:hover { color: #6ee7b7; }

:focus-visible {
  outline: 3px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  z-index: 100;
}
.skip-link:focus { top: 1rem; color: #000; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.wrap-wide {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 48rem) {
  .wrap-wide { padding: 0 2rem; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  text-decoration: none;
  padding: 0.8rem 1.35rem;
  border-radius: 0.9rem;
  min-height: 48px;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px -12px rgba(16, 185, 129, 0.7);
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--accent-hover); color: #000; transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border-color: var(--border-2);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.btn-play { background: #fff; color: #020617; box-shadow: none; }
.btn-play:hover { background: #e2e8f0; color: #020617; }
.btn-play[aria-disabled="true"] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  border: 1px dashed var(--border-2);
  cursor: not-allowed;
  transform: none;
}
.btn-sm { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 0.75rem; }

/* 2. Cabecera y menú ====================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.82);
  border-bottom: 1px solid rgba(30, 41, 59, 0.8);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  margin-right: auto;
}
.brand:hover { color: #fff; }
.brand img { width: 28px; height: 36px; object-fit: contain; }
.brand b { color: var(--accent); font-weight: 900; }

.nav-desktop, .header-cta { display: none; }
.nav-desktop ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
}
.nav-desktop a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
}
.nav-desktop a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-desktop a[aria-current="page"] { color: var(--accent-hover); }

/* Menú móvil: <details> funciona sin JavaScript; site.js solo lo cierra al elegir un enlace. */
.nav-mobile { position: static; }
.nav-mobile > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  border: 1px solid var(--border-2);
  color: #fff;
  cursor: pointer;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary .icon-close { display: none; }
.nav-mobile[open] > summary .icon-open { display: none; }
.nav-mobile[open] > summary .icon-close { display: block; }
.nav-mobile-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(2, 6, 23, 0.97);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1.25rem 1.25rem;
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.8);
}
.nav-mobile-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile-panel li + li { margin-top: 0; border-top: 1px solid var(--border); }
.nav-mobile-panel li a {
  display: block;
  padding: 0.85rem 0.25rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.nav-mobile-panel .btn { width: 100%; margin-top: 1rem; }

@media (min-width: 60rem) {
  .nav-desktop, .header-cta { display: flex; }
  .nav-mobile { display: none; }
}

/* 3. Pie ================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  font-size: 0.92rem;
  color: var(--muted);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin: 0.5rem 0 0; max-width: 22rem; }
.site-footer h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 0.75rem;
  padding: 0;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: 0.45rem; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent-hover); text-decoration: underline; }
.site-footer .brand, .site-footer .brand:hover { color: #fff; text-decoration: none; }
.site-footer p { color: var(--muted); }
.footer-contact { grid-column: 1 / -1; }
.footer-contact p { margin: 0 0 0.45rem; }
.support-hours-list { list-style: none; padding: 0; margin: 0.5rem 0 0.4rem; }
.support-hours-list li { display: flex; justify-content: space-between; gap: 1rem; max-width: 20rem; margin: 0; }
.support-hours-list li + li { margin-top: 0.25rem; }
.page .support-hours-list { padding: 0; }
.page .support-hours-list li + li { margin-top: 0.25rem; }
.support-hours-list li span:first-child { font-weight: 600; }
.support-hours-tz { font-size: 0.85rem; }
.footer-bottom { padding-bottom: 1.5rem; font-size: 0.85rem; }
.footer-bottom p { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.footer-bottom p.powered { border-top: 0; padding-top: 0.4rem; font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .footer-brand, .footer-contact { grid-column: auto; }
}

/* 4. Páginas de contenido ================================================= */

main { flex: 1; }
.page { padding: 2.5rem 0 3.5rem; }

h1, h2, h3 { color: #fff; line-height: 1.2; }
.page h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: 900; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.page h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; padding-top: 0.25rem; }
.page h3 { font-size: 1.05rem; margin: 1.5rem 0 0.25rem; }
.page p, .page li { color: var(--text); }
.page ul, .page ol { padding-left: 1.25rem; }
.page li + li { margin-top: 0.3rem; }

.lead { font-size: 1.1rem; color: var(--muted); margin-top: 0; }
.meta { color: var(--muted); font-size: 0.9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow-card);
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.toc ol { margin: 0; }

/* Marcadores de texto pendiente de confirmar */
.pending {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px dashed rgba(251, 191, 36, 0.5);
  border-radius: 0.35rem;
  padding: 0 0.3rem;
  font-weight: 600;
}

/* 5. Inicio: secciones ==================================================== */

.home { overflow-x: clip; }

.section { padding: 4.5rem 0; position: relative; }
.section-alt { background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.6) 30%, rgba(15, 23, 42, 0.6) 70%, transparent); }
.section-cta { padding-top: 0 !important; }
.section-head { max-width: 40rem; margin: 0 auto 2.75rem; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin: 0 0 0.75rem;
}
.section-title {
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  margin: 0 0 0.85rem;
}
.section-sub { color: var(--muted); font-size: 1.08rem; margin: 0; }

/* Hero */
.hero {
  position: relative;
  padding: 3rem 0 4rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(16, 185, 129, 0.22), transparent 60%),
    radial-gradient(40rem 26rem at -10% 30%, rgba(56, 189, 248, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero::before {
  /* Retícula muy sutil */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background: var(--accent-soft);
  color: #a7f3d0;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.badge .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-hover); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2); }
.hero h1 {
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 0 0 1.25rem;
}
.hero h1 .grad {
  white-space: nowrap;
  background: linear-gradient(100deg, #6ee7b7 0%, #10b981 55%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: 1.15rem; color: #cbd5e1; margin: 0 0 2rem; max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-actions .btn { flex: 1 1 12rem; }
.hero-store { margin-top: 0.75rem; }
.hero-store .btn { width: 100%; }
@media (min-width: 40rem) { .hero-store .btn { width: auto; } }
.hero-note { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; margin: 1.25rem 0 0; }
.hero-note .icon { color: var(--accent-hover); width: 1.1rem; height: 1.1rem; }

.hero-visual { position: relative; display: flex; justify-content: center; padding: 0 0.5rem; }
.hero-visual::before {
  content: "";
  position: absolute;
  width: 80%;
  aspect-ratio: 1;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 65%);
  filter: blur(20px);
}

.phone-stage { position: relative; }

/* Tarjetas flotantes del hero */
.float-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 13.5rem;
  padding: 0.65rem 0.85rem 0.65rem 0.65rem;
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.86);
  border: 1px solid var(--border-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.9);
  font-size: 0.82rem;
  line-height: 1.3;
}
.float-card p { margin: 0; }
.float-card strong { display: block; color: #fff; font-size: 0.9rem; }
.float-card span { color: var(--muted); }
.float-card .ic {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: var(--accent-soft);
  color: var(--accent-hover);
  flex: none;
}
.float-card.fc-1 { top: 12%; left: -0.25rem; }
.float-card.fc-2 { top: 46%; right: -0.25rem; }
.float-card.fc-3 { bottom: 9%; left: 0; }

/* Franja */
.strip {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02) 60%, rgba(16, 185, 129, 0.1));
}
.strip-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.strip p { margin: 0; }
.strip-title { color: #fff; font-weight: 800; font-size: 1.1rem; }
.strip-sub { color: #cbd5e1; }

/* Funciones: bloques alternados */
.features { display: grid; gap: 5rem; }
.feature { display: grid; gap: 2.5rem; align-items: center; }
.feature-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.06));
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: var(--accent-hover);
  margin-bottom: 1rem;
}
.feature-icon .icon { width: 1.5rem; height: 1.5rem; }
.plan-tag {
  display: inline-block;
  margin: 0 0 0.6rem !important;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.4);
  background: var(--accent-soft);
  color: #a7f3d0 !important;
  font-size: 0.8rem !important;
  font-weight: 700;
}
.feature h3 { font-size: clamp(1.5rem, 5.5vw, 2.1rem); font-weight: 900; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.feature p { color: #cbd5e1; font-size: 1.05rem; margin: 0 0 1.25rem; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.checks li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text); margin: 0; }
.checks .icon { color: var(--accent-hover); width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; }
.feature-visual { position: relative; display: flex; justify-content: center; }
.feature-visual { flex-direction: column; align-items: center; }
.visual-note { position: relative; margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); }
.mock-btn.mock-btn-inline { margin-top: 0; }
.feature-visual::before {
  content: "";
  position: absolute;
  inset: 8% 12%;
  border-radius: 2.5rem;
  background: radial-gradient(circle at 50% 40%, rgba(16, 185, 129, 0.22), transparent 70%);
  filter: blur(10px);
}

/* Cómo funciona */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.step {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-weight: 900;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.2rem; margin: 0 0 0.4rem; }
.step p { color: var(--muted); margin: 0; }

/* Dos formas de usar Hazon */
.modes { display: grid; gap: 1rem; }
.mode {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.mode-featured {
  border-color: rgba(16, 185, 129, 0.45);
  background:
    radial-gradient(30rem 14rem at 100% 0%, rgba(16, 185, 129, 0.16), transparent 70%),
    var(--surface);
}
.mode h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.3rem; margin: 0 0 0.5rem; }
.mode h3 .icon { color: var(--accent-hover); width: 1.5rem; height: 1.5rem; }
.mode > p { color: var(--muted); margin: 0 0 1.25rem; }
.mode > p.mode-note { margin: 1.25rem 0 0; font-size: 0.9rem; }

/* Para quién */
.audience { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.audience li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.audience .icon { color: var(--accent-hover); }

/* Preguntas frecuentes */
.faq { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.faq details[open] { border-color: var(--border-2); }
.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;
  color: #fff;
  border-radius: var(--radius);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-size: 1.2rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq .answer { padding: 0 1.25rem 1.2rem; color: #cbd5e1; }
.faq .answer p { margin: 0 0 0.6rem; }
.faq .answer p:last-child { margin: 0; }

/* Llamado final */
.final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 2rem;
  padding: 3rem 1.5rem;
  border: 1px solid rgba(16, 185, 129, 0.35);
  background:
    radial-gradient(40rem 20rem at 50% 0%, rgba(16, 185, 129, 0.28), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.final-cta h2 { font-size: clamp(1.8rem, 7vw, 2.8rem); font-weight: 900; letter-spacing: -0.03em; margin: 0 0 0.75rem; }
.final-cta p { color: #cbd5e1; font-size: 1.08rem; margin: 0 auto 1.75rem; max-width: 32rem; }
.final-cta .hero-actions { justify-content: center; }
.final-cta .hero-actions .btn { flex: 0 1 auto; }

@media (min-width: 40rem) {
  .strip-row { flex-direction: row; align-items: center; justify-content: space-between; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .modes { grid-template-columns: 1fr 1fr; }
  .audience { display: flex; flex-wrap: wrap; justify-content: center; }
  .audience li { flex: 0 1 12rem; }
  .hero-actions .btn { flex: 0 1 auto; }
}
@media (min-width: 60rem) {
  .section { padding: 6.5rem 0; }
  .hero { padding: 5rem 0 6rem; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .float-card.fc-1 { left: -2.5rem; }
  .float-card.fc-2 { right: -2rem; }
  .float-card.fc-3 { left: -1.5rem; }
  .features { gap: 7rem; }
  .feature { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .feature:nth-child(even) .feature-visual { order: -1; }
  .feature-text { max-width: 30rem; }
  .final-cta { padding: 4.5rem 3rem; }
}

/* 6. Inicio: teléfono y pantallas provisionales =========================== */

/*
  Maqueta de teléfono en HTML/CSS. Dentro va la captura real
  (/assets/screens/*.png, 576×1156, sin barra de estado ni de navegación).
  La pantalla tiene EXACTAMENTE la proporción de la captura (576 / 1156), así
  que la imagen nunca se estira, aplasta ni recorta. La cámara va en el bisel
  superior para no tapar la captura. Debajo de la imagen hay una pantalla
  provisional dibujada en CSS (.mock): solo se ve si la captura falta.
*/
.phone {
  --w: min(16.5rem, 72vw);
  position: relative;
  z-index: 1;
  width: var(--w);
  padding: 1.5rem 0.55rem 1.15rem;
  border-radius: 2.4rem;
  background:
    radial-gradient(circle at 50% 0.75rem, #000 0 0.28rem, #1f2937 0.29rem 0.4rem, transparent 0.41rem),
    linear-gradient(150deg, #334155 0%, #0f172a 35%, #0b1220 70%, #1e293b 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 0 2px #020617,
    0 40px 80px -30px rgba(16, 185, 129, 0.45),
    0 30px 60px -20px rgba(0, 0, 0, 0.85);
  margin: 0;
}
.phone-lg { --w: min(18rem, 76vw); }
@media (min-width: 60rem) { .phone-lg { --w: 19.5rem; } }
.phone::before, .phone::after {
  /* Botones laterales */
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: #334155;
}
.phone::before { right: -3px; top: 22%; height: 12%; }
.phone::after { left: -3px; top: 18%; height: 7%; box-shadow: 0 3.2rem 0 #334155; }
.phone-screen {
  position: relative;
  aspect-ratio: 576 / 1156; /* proporción real de las capturas: no cambiar sin cambiar las imágenes */
  border-radius: 0.9rem;
  overflow: hidden;
  background: #0b1220;
  isolation: isolate;
}
.phone-screen > img {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* el contenedor ya tiene la proporción exacta: no recorta */
  color: transparent; /* si la captura falta, no se ve el texto alternativo encima */
}
.phone-screen > img::after {
  /* Solo se pinta si la imagen no cargó (Chrome/Firefox): tapa el icono de imagen rota. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--mock-bg);
}

/* Pantalla provisional (sin cifras: solo formas y etiquetas) */
.mock {
  --mock-bg: #0b1220;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 0.9rem 0.9rem; /* deja libre la esquina que tapa img::after */
  background:
    radial-gradient(14rem 10rem at 100% 0%, rgba(16, 185, 129, 0.18), transparent 70%),
    var(--mock-bg);
  font-size: 0.72rem;
  line-height: 1.25;
  color: #cbd5e1;
}
.phone-screen { --mock-bg: #0b1220; }
.mock-top { display: flex; align-items: center; justify-content: space-between; }
.mock-title { font-weight: 900; font-size: 1.05rem; color: #fff; letter-spacing: -0.01em; }
.mock-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: linear-gradient(135deg, #10b981, #065f46); }
.mock-sub { color: var(--muted); font-size: 0.68rem; margin-top: -0.35rem; }
.mock-label { margin-top: 0.2rem; font-weight: 700; }
.mock-hero {
  border-radius: 0.9rem;
  padding: 0.8rem;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #022c22;
  font-weight: 800;
}
.mock-hero i { display: block; height: 0.55rem; border-radius: 1rem; background: rgba(2, 44, 34, 0.35); margin-top: 0.45rem; }
.mock-hero i + i { width: 55%; }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.mock-tile {
  border-radius: 0.75rem;
  padding: 0.6rem;
  background: #131c33;
  border: 1px solid #1e293b;
  font-weight: 700;
  color: #e2e8f0;
}
.mock-tile::after { content: ""; display: block; height: 0.45rem; width: 70%; border-radius: 1rem; background: #22304d; margin-top: 0.45rem; }
.mock-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem;
  border-radius: 0.7rem;
  background: #131c33;
  border: 1px solid #1e293b;
}
.mock-row::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 0.5rem; background: #1f2b45; flex: none; }
.mock-row i { flex: 1; height: 0.5rem; border-radius: 1rem; background: #22304d; }
.mock-row b { width: 2.2rem; height: 0.5rem; border-radius: 1rem; background: rgba(52, 211, 153, 0.55); }
.mock-row b.warn { background: rgba(251, 191, 36, 0.6); }
.mock-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mock-chip { padding: 0.25rem 0.55rem; border-radius: 999px; background: #131c33; border: 1px solid #1e293b; font-weight: 700; font-size: 0.64rem; }
.mock-chip.on { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.5); color: #a7f3d0; }
.mock-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.mock-split > div { border-radius: 0.75rem; padding: 0.6rem; font-weight: 800; }
.mock-split .paid { background: rgba(16, 185, 129, 0.16); color: #a7f3d0; border: 1px solid rgba(16, 185, 129, 0.4); }
.mock-split .owed { background: rgba(251, 191, 36, 0.12); color: #fde68a; border: 1px solid rgba(251, 191, 36, 0.35); }
.mock-split > div::after { content: ""; display: block; height: 0.5rem; width: 75%; border-radius: 1rem; background: currentColor; opacity: 0.35; margin-top: 0.45rem; }
.mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 5.5rem;
  padding: 0.6rem;
  border-radius: 0.75rem;
  background: #131c33;
  border: 1px solid #1e293b;
}
.mock-bars i { flex: 1; border-radius: 0.3rem 0.3rem 0.15rem 0.15rem; background: linear-gradient(180deg, #34d399, #047857); }
.mock-bars i:nth-child(1) { height: 40%; } .mock-bars i:nth-child(2) { height: 65%; }
.mock-bars i:nth-child(3) { height: 50%; } .mock-bars i:nth-child(4) { height: 85%; }
.mock-bars i:nth-child(5) { height: 60%; } .mock-bars i:nth-child(6) { height: 75%; }
.mock-offer {
  border-radius: 0.9rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.08));
  border: 1px dashed rgba(52, 211, 153, 0.6);
  font-weight: 800;
  color: #fff;
}
.mock-offer::after { content: ""; display: block; height: 0.5rem; width: 60%; border-radius: 1rem; background: rgba(255, 255, 255, 0.25); margin-top: 0.45rem; }
.mock-btn {
  margin-top: auto;
  text-align: center;
  padding: 0.65rem;
  border-radius: 0.8rem;
  background: #10b981;
  color: #022c22;
  font-weight: 900;
}
.mock-nav { margin-top: auto; display: flex; justify-content: space-around; padding-top: 0.5rem; border-top: 1px solid #1e293b; }
.mock-nav i { width: 1rem; height: 1rem; border-radius: 0.35rem; background: #22304d; }
.mock-nav i:first-child { background: #10b981; }

/* 7. Movimiento =========================================================== */

/*
  Aparición al hacer scroll solo con CSS (animation-timeline: view()).
  Si el navegador no lo soporta o la persona pidió menos movimiento,
  todo se muestra directamente, sin animación.
*/
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(2.5rem); }
  to { opacity: 1; transform: none; }
}
@keyframes reveal-phone {
  from { opacity: 0; transform: translateY(3rem) scale(0.94) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .reveal-phone {
      animation: reveal-phone linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
  .float-card { animation: float 6s ease-in-out infinite; }
  .float-card.fc-2 { animation-delay: -2s; }
  .float-card.fc-3 { animation-delay: -4s; }
}

/* 8. Fecha de entrada en vigor ============================================ */

/*
  FECHA DE ENTRADA EN VIGOR de la política de privacidad y de los términos.
  Es el ÚNICO lugar donde se cambia (las páginas usan <span class="effective-date">).
  Para cambiarla, reemplaza el texto entre comillas y publica.
*/
:root { --effective-date: "12 de noviembre de 2026"; }
.effective-date::before { content: var(--effective-date); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}