/* =========================================================
   DAN SEGUROS — Landing
   3 palettes × 3 typography systems, switchable via Tweaks.
   ========================================================= */

/* --- Fonts: cargadas vía <link> en index.html (no @import — evita un
       round-trip serial extra antes de pintar texto) --- */

/* =========================================================
   PALETTES
   ========================================================= */
:root,
[data-palette="bosque"] {
  /* Bosque + Dorado (default, from repo) */
  --bg:           oklch(97% 0.008 80);
  --bg-soft:      oklch(94% 0.008 80);
  --surface:      #ffffff;
  --surface-soft: oklch(98% 0.005 80);
  --ink:          oklch(16% 0.035 165);
  --ink-2:        oklch(24% 0.040 165);
  --ink-3:        oklch(40% 0.030 165);
  --muted:        oklch(55% 0.012 80);
  --line:         oklch(90% 0.008 80);
  --accent:       oklch(64% 0.200 62);   /* amber/gold */
  --accent-2:     oklch(72% 0.160 72);
  --accent-text:  oklch(47% 0.150 62);   /* ámbar oscurecido: AA como texto sobre bg claro */
  --accent-soft:  oklch(93% 0.040 75);
  --accent-ink:   #ffffff;
  --positive:     oklch(52% 0.150 155);
  --positive-soft:oklch(93% 0.055 155);
  --whatsapp:     #25d366;

  /* hero gradients */
  --hero-dark-1: oklch(16% 0.035 165);
  --hero-dark-2: oklch(21% 0.038 165);
  --hero-glow-1: oklch(64% 0.200 62 / 0.18);
  --hero-glow-2: oklch(48% 0.090 195 / 0.32);

  --grain-opacity: 0.025;
}

[data-palette="mercury"] {
  /* Black & Tan — bone claro + off-black cálido, acento caramelo.
     Rompe el beige-on-beige: los neutros oscuros dejan de estar
     bañados en caramelo; el caramelo queda solo como acento. */
  --bg:           #faf8f3;       /* bone — más limpio que la crema previa */
  --bg-soft:      #f1ede3;
  --surface:      #ffffff;
  --surface-soft: #fbf9f4;
  --ink:          #14110d;       /* off-black cálido (era azul-frío #0c1418) */
  --ink-2:        #2a241d;
  --ink-3:        #46403a;
  --muted:        #5c554c;        /* WCAG AA: ≥4.5:1 sobre bone */
  --line:         #e6e0d3;
  --accent:       #c8895d;       /* caramelo cálido — color de marca, conservado */
  --accent-2:     #8a4f2c;
  --accent-text:  #8a4f2c;       /* acento como TEXTO pequeño sobre fondos claros:
                                    5.55:1 sobre clay, 6.12:1 sobre bone (AA).
                                    El caramelo #c8895d queda para fondos/decoración
                                    y para texto sobre el hero off-black (8.1:1). */
  --accent-soft:  #f0e2d2;
  --accent-ink:   #14110d;       /* ink sobre caramelo: 6.45:1 (AA). Blanco fallaba a 2.92:1 */
  --positive:     #2f7d52;
  --positive-soft:#dcefdf;
  --whatsapp:     #25d366;

  --hero-dark-1: #14110d;
  --hero-dark-2: #1d1812;
  --hero-glow-1: rgba(200, 137, 93, 0.16);
  --hero-glow-2: rgba(200, 137, 93, 0.06);

  /* Section-rhythm tokens — bloques de color claro/oscuro deliberados */
  --section-clay:       #f1ede3;
  --section-bone:       #f4f0e7;
  --section-espresso:   #14110d;       /* off-black cálido, no marrón */
  --section-terracotta: #c8895d;
  --on-espresso:        #faf8f3;
  --on-espresso-muted:  #b8ac9c;
  --on-terracotta:      #14110d;

  --grain-opacity: 0.03;
}

[data-palette="robinhood"] {
  /* Robinhood — casi-negro + verde eléctrico */
  --bg:           #0a0b0a;
  --bg-soft:      #131513;
  --surface:      #161816;
  --surface-soft: #1e211e;
  --ink:          #f4f1ea;
  --ink-2:        #d8d4ca;
  --ink-3:        #a8a59c;
  --muted:        #8a877f;
  --line:         #2a2c2a;
  --accent:       #c8ff2e;       /* electric lime */
  --accent-2:     #9eea18;
  --accent-text:  #c8ff2e;       /* tema oscuro: el lime ya contrasta sobre casi-negro */
  --accent-soft:  rgba(200, 255, 46, 0.16);
  --accent-ink:   #0a0b0a;
  --positive:     #2bd887;
  --positive-soft:rgba(43, 216, 135, 0.16);
  --whatsapp:     #25d366;

  --hero-dark-1: #0a0b0a;
  --hero-dark-2: #1a1d1a;
  --hero-glow-1: rgba(200, 255, 46, 0.18);
  --hero-glow-2: rgba(45, 95, 35, 0.30);

  --grain-opacity: 0.04;
}

/* =========================================================
   TYPOGRAPHY SYSTEMS
   ========================================================= */
:root,
[data-type="geist"] {
  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;
  --display-italic: normal;
}

[data-type="editorial"] {
  /* Instrument Serif ahora sí se importa en index.html (antes la variante caía a Times) */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
  --font-body:    'Onest', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --display-weight: 400;
  --display-tracking: -0.015em;
  --display-italic: italic;
}

[data-type="mono"] {
  --font-display: 'Geist Mono', ui-monospace, monospace;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;
  --display-weight: 500;
  --display-tracking: -0.04em;
  --display-italic: normal;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Declarar el esquema evita que Chrome Android aplique Auto Dark Theme y
     reescriba la paleta del sitio. */
  color-scheme: light;
}
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  transition: background 0.4s ease, color 0.4s ease;
}
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  font-style: var(--display-italic);
  line-height: 1.02;
}
h2, h3, h4 { text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }

button { font: inherit; cursor: pointer; border: 0; background: transparent; }
a { color: inherit; text-decoration: none; }

/* Utility: tag/eyebrow */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Grain texture */
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* =========================================================
   LAYOUT PRIMITIVES
   ========================================================= */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 720px) {
  .shell { padding: 0 20px; }
}

.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: var(--ink-2); }

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 20px -8px var(--accent);
}
.btn--accent:hover { box-shadow: 0 10px 28px -8px var(--accent); }

.btn--wa {
  background: var(--whatsapp);
  color: #fff;
  box-shadow: 0 6px 24px -10px rgba(37, 211, 102, 0.6);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--surface); }

.btn--lg { height: 56px; padding: 0 28px; font-size: 15px; }
.btn--xl { height: 64px; padding: 0 36px; font-size: 16px; border-radius: 999px; }

/* CTA en piloto privado: visible pero no-clickeable, con tooltip honesto.
   Mantiene el elemento focusable (aria-disabled, no [disabled]) para que el
   tooltip aparezca también con teclado. */
.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.is-soon:hover,
.is-soon:focus-visible { transform: none !important; }
.is-soon::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  background: oklch(20% 0.012 60);
  color: oklch(95% 0.012 75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 6px 11px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}
.is-soon:hover::after,
.is-soon:focus-visible::after,
.is-soon:active::after {
  /* :active cubre touch, donde no existe hover */
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* CTA dentro de la big-quote card: mismo estado piloto que los CTAs del hero.
   overflow visible para que el tooltip no quede recortado; el hover deja de
   prometer una acción que no existe. */
.big-quote__cta.is-soon { overflow: visible; }
.big-quote__cta.is-soon:hover {
  background: var(--ink);
  box-shadow: none;
}
.big-quote__cta.is-soon:hover svg { transform: none; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  transition: background 0.3s;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.nav__wm {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}
.nav__wm em {
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.02em;
  opacity: 0.55;
}
.nav__mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.nav__mark svg { display: block; }
.nav__links {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .nav__links { display: none; }
}

/* =========================================================
   HERO – shared
   ========================================================= */
.hero { padding: 128px 0 80px; position: relative; overflow: hidden; }
.hero__title {
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: var(--display-tracking);
}
.hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 520px;
  margin-top: 24px;
}
.hero__ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: 20px; margin-top: 48px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.hero__trust .logos { display: flex; gap: 24px; align-items: center; opacity: 0.65; }
.hero__trust .logos img { height: 18px; filter: grayscale(1) contrast(0.7); }

/* underline accent on word */
.underline-accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underline-accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.08em;
  height: 0.32em;
  background: var(--accent);
  opacity: 0.45;
  z-index: -1;
  border-radius: 2px;
  transform-origin: left;
  animation: ua-grow 0.7s 0.4s cubic-bezier(0.23,1,0.32,1) backwards;
}
@keyframes ua-grow { from { transform: scaleX(0); } }

/* =========================================================
   HERO V1 — Mercury (typographic, no phone mockup)
   ========================================================= */
.hero--mercury {
  background: oklch(16% 0.012 60);   /* off-black cálido — Black & Tan */
  padding: 160px 0 100px;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero--mercury .hero__inner {
  max-width: 900px;
}
.hero--mercury .hero__title {
  font-size: clamp(52px, 8.5vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: oklch(95% 0.018 70);
  margin-bottom: 32px;
}
.hero--mercury .hero__title span {
  color: oklch(74% 0.135 58);   /* caramel highlight on "90 segundos" — brighter on off-black */
}
.hero--mercury .hero__sub {
  color: oklch(78% 0.015 70);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 540px;
  margin-top: 0;
  margin-bottom: 44px;
}
.hero--mercury .btn--primary-hero {
  background: oklch(95% 0.012 75);
  color: oklch(16% 0.012 60);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.18s cubic-bezier(0.16,1,0.3,1), transform 0.18s cubic-bezier(0.16,1,0.3,1);
}
.hero--mercury .btn--primary-hero:hover {
  background: #fff;
  transform: translateY(-1px);
}
.hero--mercury .btn--ghost-hero {
  color: oklch(78% 0.015 70);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  transition: color 0.18s;
}
.hero--mercury .btn--ghost-hero:hover { color: oklch(95% 0.018 70); }
.hero--mercury .hero__ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero--mercury .hero__trust {
  margin-top: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: oklch(68% 0.018 70);   /* WCAG AA: 6.7:1 sobre off-black (era 55% = 4.0) */
}
.hero--mercury .hero__trust .logos {
  display: flex;
  gap: 28px;
  align-items: center;
}
.hero--mercury .hero__trust .logos img {
  height: 16px;
  filter: brightness(0) invert(1);   /* siluetas claras sobre off-black */
  opacity: 0.62;
  transition: opacity 0.2s ease;
}
.hero--mercury .hero__trust .logos img:hover { opacity: 0.9; }
@media (max-width: 720px) {
  .hero--mercury { padding: 120px 0 80px; min-height: auto; }
  .hero--mercury .hero__title { font-size: clamp(44px, 12vw, 72px); }
}

/* =========================================================
   HERO V2 — Robinhood (dark, bold)
   ========================================================= */
.hero--robinhood {
  background:
    radial-gradient(ellipse 70% 55% at 15% 80%, var(--hero-glow-2) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 10%, var(--hero-glow-1) 0%, transparent 55%),
    linear-gradient(160deg, var(--hero-dark-1) 0%, var(--hero-dark-2) 100%);
  color: #fff;
  padding-top: 128px;
  padding-bottom: 120px;
}
.hero--robinhood h1,
.hero--robinhood .hero__sub { color: #fff; }
.hero--robinhood .hero__sub { color: rgba(255,255,255,0.6); }
.hero--robinhood .hero__title {
  font-size: clamp(48px, 9vw, 132px);
  font-weight: 700;
  letter-spacing: -0.04em;
}
[data-type="editorial"] .hero--robinhood .hero__title { font-weight: 400; }

.hero--robinhood .hero__ticker {
  display: flex;
  gap: 48px;
  padding: 28px 0;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}
.hero--robinhood .ticker-item {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 140px;
}
.hero--robinhood .ticker-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hero--robinhood .ticker-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.hero--robinhood .hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 860px) {
  .hero--robinhood .hero__grid { grid-template-columns: 1fr; }
}
.hero--robinhood .hero__visual { display: grid; place-items: center; min-height: 520px; }

/* =========================================================
   HERO V3 — Commure (editorial)
   ========================================================= */
.hero--commure {
  background: var(--hero-dark-1);
  color: #fff;
  padding: 0;
  min-height: 92vh;
  display: flex;
  align-items: stretch;
}
.hero--commure .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero--commure .hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, var(--hero-dark-1) 95%),
    linear-gradient(90deg, var(--hero-dark-1) 0%, transparent 40%, transparent 60%, var(--hero-dark-1) 100%);
  z-index: 2;
}
.hero--commure .hero__bg-image {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, var(--hero-glow-1) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.04) 0%, transparent 30%),
    linear-gradient(135deg, var(--hero-dark-1) 0%, var(--hero-dark-2) 100%);
}
.hero--commure .hero__content {
  position: relative;
  z-index: 5;
  align-self: end;
  width: 100%;
  padding: 128px 0 80px;
}
.hero--commure .hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
@media (max-width: 860px) { .hero--commure .hero__grid { grid-template-columns: 1fr; gap: 32px; } }

.hero--commure .hero__chapter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero--commure .hero__chapter::before {
  content: '';
  width: 48px; height: 1px;
  background: rgba(255,255,255,0.4);
}
.hero--commure .hero__title { color: #fff; font-size: clamp(48px, 7.5vw, 108px); }
.hero--commure .hero__sub { color: rgba(255,255,255,0.7); max-width: none; }

.hero--commure .hero__side {
  display: flex; flex-direction: column; gap: 24px;
}
.hero--commure .hero__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.32;
  color: rgba(255,255,255,0.85);
  border-left: 1px solid var(--accent);
  padding-left: 24px;
}
.hero--commure .hero__quote-by {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-top: 12px;
}

/* Big edge label */
.hero--commure .edge-label {
  position: absolute;
  left: 32px;
  bottom: 32px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero--commure .edge-label--right { left: auto; right: 32px; text-align: right; }

/* =========================================================
   PHONE / CHAT MOCKUP
   ========================================================= */
.phone-frame {
  position: relative;
  width: 320px;
  height: 660px;
  /* iPhone 16 Pro titanium chassis: lateral dark -> face highlight -> lateral dark */
  background:
    linear-gradient(135deg,
      #161618 0%,
      #2a2a2e 7%,
      #3c3c40 14%,
      #232327 28%,
      #1a1a1c 50%,
      #232327 72%,
      #3c3c40 86%,
      #2a2a2e 93%,
      #161618 100%);
  border-radius: 56px;
  padding: 4px;
  /* multi-layer shadow: inner rim, polished edge highlight, ambient lift, deep cast */
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 -1px 2px rgba(255,255,255,0.05),
    0 0 0 1px rgba(0,0,0,0.5),
    0 30px 60px -20px rgba(0,0,0,0.5),
    0 80px 160px -40px rgba(0,0,0,0.35);
  isolation: isolate;
}
/* Side buttons rendered with pseudo-elements on the frame (no extra DOM).
   Left ::before doubles as Action button (short pill, near top).
   Left additional stack (volume up/down) drawn via the frame's secondary
   layered shadow trick is omitted to avoid artifacts; one prominent pill
   per side reads as "modern iPhone" without visual noise.            */
.phone-frame::before {
  /* Left side: volume bar (single elongated pill, reads as vol up + down) */
  content: '';
  position: absolute;
  left: -2px;
  top: 168px;
  width: 3px;
  height: 110px;
  background: linear-gradient(90deg, #0a0a0c 0%, #2c2c30 55%, #0a0a0c 100%);
  border-radius: 2px 0 0 2px;
  z-index: 4;
}
.phone-frame::after {
  /* Right side: power / side button */
  content: '';
  position: absolute;
  right: -2px;
  top: 200px;
  width: 3px;
  height: 96px;
  background: linear-gradient(90deg, #0a0a0c 0%, #2c2c30 55%, #0a0a0c 100%);
  border-radius: 0 2px 2px 0;
  z-index: 4;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ECE5DD;
  border-radius: 52px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 4px #000,
    inset 0 0 0 5px rgba(255,255,255,0.04);
}

/* iOS status bar (sits beneath the Dynamic Island band) */
.phone-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 0 28px;
  color: #0c1418;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  z-index: 6;
  pointer-events: none;
}
.phone-statusbar__time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  padding-left: 4px;
}
.phone-statusbar__icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0c1418;
}

/* Dynamic Island — pill, centered, sits inside the screen */
.phone-island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 34px;
  background: #000;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.6);
  z-index: 7;
  pointer-events: none;
}

/* WA header now needs extra top padding to clear status bar + island */
.wa-header {
  padding-top: 58px !important;
}

/* Home indicator — slim pill at the bottom of the screen */
.phone-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: rgba(0,0,0,0.85);
  border-radius: 3px;
  z-index: 8;
  pointer-events: none;
}

/* Pausa accesible del chat demo — WCAG 2.2.2: contenido auto-actualizado que
   dura más de 5s necesita un mecanismo de pausa operable por el usuario. */
.wa-pause {
  position: absolute;
  right: 14px;
  bottom: 84px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 13, 0.55);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: background 0.2s ease;
}
.wa-pause:hover { background: rgba(20, 17, 13, 0.75); }
.wa-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Glass glare overlay — diagonal sheen across the screen */
.phone-screen__glare {
  position: absolute;
  inset: 0;
  border-radius: 52px;
  background:
    linear-gradient(145deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.04) 18%,
      rgba(255,255,255,0) 38%,
      rgba(255,255,255,0) 70%,
      rgba(255,255,255,0.05) 92%,
      rgba(255,255,255,0.10) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 9;
}

.wa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075e54;
  color: #fff;
  padding: 38px 14px 12px 14px;
  flex-shrink: 0;
}
.wa-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #0c1418;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: #f6f3ec;
  line-height: 1;
  padding-bottom: 2px;
}
.wa-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.wa-status { font-size: 11px; opacity: 0.7; display: flex; align-items: center; gap: 5px; }
.wa-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 0 #25d366;
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, 0); }
}

.wa-body {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  background-color: #ECE5DD;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 8%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 7%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.3) 0%, transparent 6%);
  scrollbar-width: none;
}
.wa-body::-webkit-scrollbar { display: none; }

.wa-input {
  position: relative;
  margin: 0 8px 22px 8px;
  height: 40px;
  background: #fff;
  border-radius: 22px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
  color: #999;
  gap: 10px;
  flex-shrink: 0;
  z-index: 5;
  box-shadow: 0 -8px 16px -6px rgba(236, 229, 221, 0.9);
}
.wa-input .send {
  margin-left: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #128c7e;
  display: grid; place-items: center;
}

.bubble {
  max-width: 78%;
  padding: 8px 12px 10px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.32;
  color: #111;
  position: relative;
  word-wrap: break-word;
  font-family: var(--font-body);
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  animation: bubble-in 0.4s cubic-bezier(0.16,1,0.3,1) backwards;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
}
.bubble--user {
  align-self: flex-end;
  background: #DCF8C6;
  border-bottom-right-radius: 3px;
}
.bubble--bot {
  align-self: flex-start;
  background: #fff;
  border-bottom-left-radius: 3px;
}
.bubble__time {
  font-size: 10px;
  color: #999;
  float: right;
  margin: 4px 0 -2px 8px;
  line-height: 1;
}

.bubble--typing {
  align-self: flex-start;
  background: #fff;
  padding: 14px;
  display: flex;
  gap: 4px;
  border-bottom-left-radius: 3px;
}
.bubble--typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #999;
  animation: typing-dot 1.4s ease-in-out infinite;
}
.bubble--typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* === Quote card (chat bubble preview) — simple, clean === */
.bubble--quote {
  align-self: flex-start;
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  max-width: 88%;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  animation: bubble-in 0.5s cubic-bezier(0.16,1,0.3,1) backwards;
  flex-shrink: 0;
}
.qc-eyebrow {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #9aa0a3;
  text-transform: uppercase;
}
.qc-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.02em;
  color: #111;
  line-height: 1.15;
  margin-top: 3px;
}
.qc-sub { font-size: 11px; color: #888; margin-bottom: 2px; }
.qc-rows {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.qc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-size: 11px;
  border-top: 1px solid #f1f1f1;
}
.qc-row:first-child { border-top: 0; }
.qc-row span { color: #999; flex-shrink: 0; }
.qc-row strong { color: #222; font-weight: 600; text-align: right; }
.qc-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 0 2px;
  border-top: 1px solid #f1f1f1;
  margin-top: 4px;
}
.qc-price__num {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: #111;
  font-variant-numeric: tabular-nums;
}
.qc-price__unit { font-size: 11px; color: #888; font-weight: 500; }
.qc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #25d366;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  margin-top: 6px;
  transition: filter 0.2s;
}
.qc-cta:hover { filter: brightness(1.05); }

/* Hide legacy rqb-* styles cleanly — no longer used */
.bubble--rich, .rqb-head, .rqb-foot { display: none; }

/* =========================================================
   SECTION HEADER
   ========================================================= */
.section-header { margin-bottom: 64px; max-width: 800px; }
.section-header__tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.section-header__tag::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}
.section-header h2 {
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: 24px;
}
.section-header p {
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 560px;
}

/* =========================================================
   HOW IT WORKS — variants
   ========================================================= */
.how--chat { background: var(--section-clay, var(--bg-soft)); }
.how--chat .how__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 860px) {
  .how--chat .how__grid { grid-template-columns: 1fr; gap: 48px; }
}
.how__steps { display: flex; flex-direction: column; gap: 24px; }
.how__step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: opacity 0.3s;
  /* es un <button>: resetear UA y conservar el layout */
  text-align: left;
  width: 100%;
  color: inherit;
}
.how__step:last-child { border-bottom: 1px solid var(--line); }
.how__step.is-dim { opacity: 0.35; }
.how__step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text, var(--accent));
  letter-spacing: -0.02em;
}
.how__step h3 {
  font-size: 28px;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
  line-height: 1.15;
  font-weight: 600;
}
.how__step p { font-size: 15px; color: var(--ink-3); line-height: 1.5; }
.how__step-bar {
  grid-column: 2;
  margin-top: 8px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.how__step.is-active .how__step-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: step-progress var(--step-duration, 4s) linear forwards;
}
@keyframes step-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.how--chat .phone-frame { transform: scale(0.95); }

/* HOW V2 — timeline */
.how--timeline { background: var(--bg); }
.how--timeline .timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.how--timeline .timeline::before {
  content: '';
  position: absolute;
  top: 28px; left: 5%; right: 5%;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
@media (max-width: 900px) { .how--timeline .timeline { grid-template-columns: 1fr 1fr; } .how--timeline .timeline::before { display: none; } }
@media (max-width: 540px) { .how--timeline .timeline { grid-template-columns: 1fr; } }

.tl-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 16px;
}
.tl-step__node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  color: var(--ink);
  position: relative;
}
.tl-step__node::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.tl-step:hover .tl-step__node::after { opacity: 1; }
.tl-step__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.tl-step h3 { font-size: 22px; line-height: 1.15; }
.tl-step p { font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* HOW V3 — split */
.how--split { background: var(--ink); color: var(--bg); padding: 120px 0; }
.how--split .section-header h2 { color: var(--bg); }
.how--split .section-header p { color: rgba(255,255,255,0.65); }
.how--split .section-header__tag { color: rgba(255,255,255,0.5); }
.how--split .split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 48px;
}
@media (max-width: 860px) { .how--split .split-grid { grid-template-columns: 1fr; } }
.how--split .split-side {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 540px;
}
.how--split .split-arrow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--accent-ink);
  font-size: 22px;
  box-shadow: 0 16px 40px -10px var(--accent);
}
@media (max-width: 860px) { .how--split .split-arrow { display: none; } }

/* =========================================================
   QUOTE CARD STANDALONE (for split view)
   ========================================================= */
.quote-card {
  background: #fff;
  color: #111;
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.5), 0 30px 60px -30px rgba(0,0,0,0.3);
}
.quote-card__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: #888; text-transform: uppercase; }
.quote-card__title { font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: 22px; color: #111; letter-spacing: -0.02em; line-height: 1.1; }
.quote-card__price { font-family: var(--font-display); font-style: normal; font-weight: 700; font-size: 44px; letter-spacing: -0.03em; color: #111; line-height: 1; }
.quote-card__price small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: #888; letter-spacing: 0; }
.quote-card__row { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #f0f0f0; font-size: 13px; color: #555; }
.quote-card__row:first-of-type { border-top: 0; }
.quote-card__row strong { color: #111; font-weight: 600; }
.quote-card__cta {
  margin-top: 8px;
  background: #25d366; color: #fff; font-weight: 600; font-size: 14px;
  height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
}

/* =========================================================
   TIPOS DE SEGUROS — hover-driven rail + preview
   ========================================================= */
.types-section { background: var(--bg-soft); }   /* modula el ritmo: bone medio entre How y Policy (bone claro) */
.types-stage {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: stretch;
}
/* Mobile carousel replaces the rail+card stage below 980px (no hover on touch,
   and a single column would hide the card-swap below the fold). */
.types-carousel { display: none; }
@media (max-width: 980px) {
  .types-stage { display: none; }
  .types-carousel { display: block; }
}
.types-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
}
.types-pills::-webkit-scrollbar { display: none; }
.types-pill {
  flex: 0 0 auto;
  scroll-snap-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.types-pill.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--ink);
}
.types-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: 7.5%;
  padding-bottom: 8px;
}
.types-track::-webkit-scrollbar { display: none; }
.types-track__card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* center the first/last card too */
.types-track::before,
.types-track::after {
  content: '';
  flex: 0 0 0.5%;
}

.types-rail {
  display: flex;
  flex-direction: column;
}
.types-rail__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 16px;
  border-top: 1px solid var(--line);
  text-align: left;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.25s, background 0.25s cubic-bezier(0.16,1,0.3,1);
}
.types-rail__item:last-child { border-bottom: 1px solid var(--line); }
.types-rail__item.is-active {
  color: var(--ink);
  background: var(--accent-soft);
}

.types-rail__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 500;
}
.types-rail__item.is-active .types-rail__num { color: var(--accent-text, var(--accent)); }

.types-rail__name {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.types-rail__from {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .types-rail__from { display: none; }
}

.types-rail__chev {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: transparent;
  display: grid; place-items: center;
  color: var(--muted);
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.types-rail__item.is-active .types-rail__chev {
  background: var(--ink);
  color: var(--bg);
  transform: translateX(2px);
}

/* === preview side === */
.types-preview {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  grid-template-rows: auto auto;
  gap: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px;
  min-height: 540px;
}
@media (max-width: 980px) {
  .types-preview { position: static; }
}

.types-preview__chat {
  display: flex;
  justify-content: center;
}
.tpp-frame {
  width: 100%;
  max-width: 380px;
  background: #ECE5DD;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 8%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 7%);
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.tpp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #075e54;
  color: #fff;
  padding: 12px 14px;
}
.tpp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #0c1418;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: #f6f3ec;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 2px;
}
.tpp-name { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.tpp-status { font-size: 10.5px; opacity: 0.75; display: flex; align-items: center; gap: 5px; }
.tpp-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
}
.tpp-msg { font-size: 13.5px; max-width: 88%; }

/* === meta (rows + button) === */
.types-preview__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: tpm-in 0.5s cubic-bezier(0.16,1,0.3,1);
}
@keyframes tpm-in {
  from { opacity: 0; transform: translateY(8px); }
}
.tpm-rows { display: flex; flex-direction: column; }
.tpm-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  gap: 16px;
}
.tpm-row span { color: var(--muted); flex-shrink: 0; }
.tpm-row strong { color: var(--ink); font-weight: 600; text-align: right; }
.tpm-row--price strong {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.025em;
}
.tpm-row--price strong small { font-size: 12px; font-weight: 500; color: var(--muted); }

/* =========================================================
   INSURERS — variants
   ========================================================= */
/* V1 — strip (logos rail) */
.insurers--strip {
  padding: 64px 0;
  background: var(--section-espresso, var(--bg-soft));
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.insurers--strip .strip-label { color: var(--on-espresso-muted, var(--ink-3)); }
.insurers--strip .strip-logos img {
  filter: grayscale(1) brightness(2.2) invert(0.92);
  opacity: 0.85;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.insurers--strip .strip-logos img:hover { filter: none; opacity: 1; }
.insurers--strip .strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-espresso-muted);
  text-align: center;
  margin-bottom: 32px;
}
.insurers--strip .strip-logos {
  display: flex; justify-content: center; align-items: center; gap: 64px; flex-wrap: wrap;
}
.insurers--strip .strip-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-espresso-muted, var(--muted));
  text-align: center;
  margin-top: 28px;
  opacity: 0.75;
}
.insurers--strip .strip-logos img {
  height: 32px;
  filter: brightness(0) invert(1);   /* siluetas claras sobre off-black */
  opacity: 0.6;
  transition: opacity 0.3s, transform 0.3s;
}
[data-palette="robinhood"] .insurers--strip .strip-logos img { filter: grayscale(1) brightness(2) invert(0.9); }
.insurers--strip .strip-logos img:hover { opacity: 0.95; transform: scale(1.05); }

/* V2 — bento (2 celdas: Aurora + próximamente) */
.insurers--bento .bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 880px;
}
@media (max-width: 700px) { .insurers--bento .bento { grid-template-columns: 1fr; } }
.bento-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  transition: transform 0.3s, border-color 0.3s;
}
.bento-card:hover { border-color: color-mix(in oklab, var(--ink) 15%, var(--line)); }
.bento-card__logo {
  height: 36px;
  display: flex; align-items: center;
}
.bento-card__logo img { height: 28px; max-width: 110px; object-fit: contain; object-position: left center; }
.bento-card__soon {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--muted);
}
[data-palette="robinhood"] .bento-card__logo img { filter: invert(0.92) brightness(1.05); }
.bento-card__pitch { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; flex: 1; }
.bento-card__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

/* V3 — editorial */
.insurers--editorial .ed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 700px) { .insurers--editorial .ed-grid { grid-template-columns: 1fr; } }
.ed-cell {
  background: var(--surface);
  padding: 40px;
  min-height: 200px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
}
.ed-cell__num {
  position: absolute;
  top: 16px; right: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.ed-cell h3 { font-size: 28px; line-height: 1.05; margin-bottom: 8px; }
.ed-cell p { font-size: 14px; color: var(--ink-3); line-height: 1.5; max-width: 380px; }
.ed-cell__logo { max-height: 40px; max-width: 120px; opacity: 0.8; }
[data-palette="robinhood"] .ed-cell__logo { filter: invert(0.92); }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final {
  position: relative;
  background: oklch(16% 0.012 60);   /* off-black cálido — Black & Tan */
  color: oklch(95% 0.018 70);
  padding: 140px 0;
  overflow: hidden;
}
/* Subtle grain on the drenched section */
.cta-final::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.cta-final h2 {
  font-size: clamp(48px, 7vw, 104px);
  color: oklch(95% 0.018 70);
  line-height: 0.96;
}
.cta-final h2 em {
  font-style: italic;
  font-weight: 400;
  color: oklch(74% 0.135 58);
}
.cta-final p {
  color: oklch(75% 0.025 70);
  font-size: 18px;
  max-width: 540px;
  margin: 24px auto 0;
  line-height: 1.5;
}
.cta-final__ctas { display: flex; gap: 12px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
/* CTA Final primary button — cream on caramel */
.cta-final .btn--wa {
  background: oklch(95% 0.012 75);
  color: oklch(16% 0.012 60);
  box-shadow: none;
}
.cta-final .btn--wa:hover {
  background: #fff;
  box-shadow: 0 8px 32px -8px oklch(16% 0.012 60 / 0.45);
}
.cta-final__small {
  display: flex; justify-content: center; gap: 24px; margin-top: 36px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: oklch(68% 0.022 70); text-transform: uppercase;   /* WCAG AA: 6.7:1 sobre off-black (era 55% = 3.99) */
  flex-wrap: wrap;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer { background: var(--bg); padding: 64px 0 32px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 32px; } }
.foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; font-weight: 500; font-style: normal; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.foot-col a:hover { color: var(--ink); }
.foot-tag { font-size: 13px; color: var(--ink-3); margin-top: 12px; max-width: 280px; line-height: 1.5; }
.foot-base { display: flex; justify-content: space-between; align-items: center; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 12px; }

/* =========================================================
   DEVICE PREVIEW (mobile/desktop frame for "Ambos")
   ========================================================= */
.device-toggle {
  position: fixed;
  top: 76px; right: 16px;
  z-index: 99;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
}
.device-toggle button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.device-toggle button.active { background: var(--ink); color: var(--bg); }

/* When mobile preview active, scale shell down */
body[data-device="mobile"] { background: var(--bg-soft); }
body[data-device="mobile"] .device-frame {
  max-width: 420px;
  margin: 16px auto;
  border: 12px solid #0a0a0a;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.4);
  background: var(--bg);
  position: relative;
}
body[data-device="mobile"] .nav { position: absolute; }
body[data-device="mobile"] .device-frame .shell { padding: 0 16px; max-width: 100%; }
body[data-device="mobile"] .device-frame .nav__links { display: none; }
body[data-device="mobile"] .hero { padding: 96px 0 48px; }
body[data-device="mobile"] .hero__title { font-size: 40px !important; }
body[data-device="mobile"] .hero__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
body[data-device="mobile"] .section { padding: 56px 0; }
body[data-device="mobile"] .section-header h2 { font-size: 32px !important; }
body[data-device="mobile"] .how--timeline .timeline { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .how--timeline .timeline::before { display: none; }
body[data-device="mobile"] .insurers--bento .bento { grid-template-columns: 1fr 1fr !important; }
body[data-device="mobile"] .insurers--editorial .ed-grid { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .foot-grid { grid-template-columns: 1fr 1fr !important; }
body[data-device="mobile"] .phone-frame { transform: scale(0.78); transform-origin: top center; }
body[data-device="mobile"] .hero--commure .hero__grid { grid-template-columns: 1fr !important; }
body[data-device="mobile"] .how--chat .how__grid { grid-template-columns: 1fr !important; }

/* Split mode - desktop + mobile side by side */
body[data-device="split"] { background: var(--bg-soft); padding: 0; }
body[data-device="split"] .split-stage { display: grid; grid-template-columns: 1fr 460px; gap: 20px; padding: 20px; align-items: start; min-height: 100vh; }
body[data-device="split"] .split-stage > .split-stage__desktop { background: var(--bg); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.25); }
body[data-device="split"] .split-stage > .split-stage__mobile { position: sticky; top: 20px; }
@media (max-width: 1100px) { body[data-device="split"] .split-stage { grid-template-columns: 1fr; } }

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 101;
  transition: transform 0.05s linear;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 60%, transparent);
}

/* ============================================================
   HERO STAT — single-number focal section (replaces stats-banner)
   ============================================================ */
.hero-stat {
  background: oklch(0.20 0.012 60);
  color: rgb(250, 248, 243);
  padding: clamp(96px, 14vw, 200px) 0 clamp(88px, 12vw, 176px);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.hero-stat .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3.5vw, 44px);
}
.hero-stat__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklab, rgb(246, 243, 236) 60%, transparent);
}
.hero-stat__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(200, 137, 93);
  box-shadow: 0 0 0 4px color-mix(in oklab, rgb(200, 137, 93) 18%, transparent);
}
.hero-stat__num-wrap { width: 100%; }
.hero-stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(120px, 22vw, 280px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: rgb(246, 243, 236);
  /* Tabular + lining figures: every digit takes the same advance width,
     so the number doesn't reflow mid-count. Disable ligatures so adjacent
     glyphs don't recompose. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-ligatures: none;
  display: inline-block;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 48px rgba(200, 137, 93, 0.08);
  transition: filter 0.4s ease;
}
.hero-stat__num.is-counting { filter: blur(0.5px); }
.hero-stat__num.is-settled { filter: blur(0); }
.hero-stat__line {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.25;
  max-width: 22ch;
  color: color-mix(in oklab, rgb(246, 243, 236) 88%, transparent);
  margin: 0;
}
.hero-stat__plus {
  font-style: italic;
  color: rgb(200, 137, 93);
}
.hero-stat__note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  max-width: 52ch;
  color: color-mix(in oklab, rgb(246, 243, 236) 60%, transparent); /* WCAG AA: ≥4.5:1 on dark hero (was 42% = 3.5:1) */
  padding-top: 8px;
  border-top: 1px solid color-mix(in oklab, rgb(246, 243, 236) 10%, transparent);
}
@media (max-width: 640px) {
  .hero-stat { padding: 80px 0 72px; }
  .hero-stat__num { font-size: clamp(96px, 32vw, 180px); letter-spacing: -0.045em; }
  .hero-stat__line { font-size: 20px; max-width: 18ch; }
  .hero-stat__note { font-size: 10.5px; padding: 8px 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stat__dot { box-shadow: none; }
}

/* ============================================================
   BIG QUOTE CARD — jeton-style product card (replaces types-preview)
   ============================================================ */
.types-preview--big {
  display: grid;
  place-items: center;
  padding: 48px 32px;
  position: relative;
  min-height: 620px;
  min-width: 0; /* let the grid track shrink below the card's min-content */
}
@keyframes big-quote-swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes big-quote-swap-inner {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Main card ===== */
.big-quote {
  background: #fff;
  width: 100%;
  max-width: 460px;
  min-width: 0;
  border-radius: 22px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 2px rgba(12, 20, 24, 0.04),
    0 8px 24px -10px rgba(12, 20, 24, 0.10),
    0 40px 100px -30px rgba(12, 20, 24, 0.22),
    0 80px 160px -40px rgba(12, 20, 24, 0.18);
  font-variant-numeric: tabular-nums;
  animation: big-quote-swap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Sin hover-lift: la card es un display de demo, no un control. Solo se
   levanta lo que se puede presionar (el CTA interno tiene su propio hover). */
/* Stagger the inner content slightly on each remount */
.big-quote > * { animation: big-quote-swap-inner 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.big-quote > *:nth-child(1) { animation-delay: 0.04s; }
.big-quote > *:nth-child(2) { animation-delay: 0.08s; }
.big-quote > *:nth-child(3) { animation-delay: 0.12s; }
.big-quote > *:nth-child(4) { animation-delay: 0.16s; }
.big-quote > *:nth-child(5) { animation-delay: 0.20s; }
.big-quote > *:nth-child(6) { animation-delay: 0.24s; }
.big-quote > *:nth-child(7) { animation-delay: 0.28s; }
.big-quote > *:nth-child(8) { animation-delay: 0.32s; }
.big-quote > *:nth-child(9) { animation-delay: 0.36s; }

.big-quote__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.big-quote__head-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.big-quote__chips {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.big-quote__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
}
.big-quote__chip--primary { color: var(--muted); font-weight: 500; }
.big-quote__chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.big-quote__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.big-quote__head-right-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.big-quote__head-right-meta svg { color: var(--positive); flex-shrink: 0; }
.big-quote__logo { height: 22px; opacity: 0.9; }
.big-quote__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ece6d8 20%, #ece6d8 80%, transparent);
  margin: 2px 0;
}
.big-quote__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin-top: 2px;
}
.big-quote__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.big-quote__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px solid #f0eee8;
  padding-top: 18px;
  margin-top: 4px;
  gap: 6px;
}
.big-quote__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.big-quote__currency {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1;
  align-self: flex-start;
  margin-top: 14px;
}
.big-quote__num {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(46px, 11vw, 72px); /* scales down on narrow viewports / Safari serif metrics */
  letter-spacing: -0.045em;
  color: var(--ink);
  line-height: 0.95;
}
.big-quote__unit {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-left: 6px;
  align-self: flex-end;
  margin-bottom: 14px;
}
.big-quote__rows {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
  border-top: 1px solid #f0eee8;
}
.big-quote__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  font-size: 13px;
  border-bottom: 1px solid #f5f3ec;
  transition: background 0.2s ease;
}
.big-quote__row:last-child { border-bottom: 0; }
.big-quote__row span {
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.big-quote__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  color: var(--ink-3);
  opacity: 0.62;
  flex-shrink: 0;
}
.big-quote__row strong { color: var(--ink); font-weight: 600; font-size: 13.5px; }

.big-quote__cta-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.big-quote__cta {
  flex: 1;
  background: var(--ink);
  color: #fff;
  height: 54px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.big-quote__cta svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.big-quote__cta:hover {
  background: var(--accent-2, #8a4f2c);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px color-mix(in oklab, var(--accent-2, #8a4f2c) 45%, transparent);
}
.big-quote__cta:hover svg { transform: translateX(3px); }
.big-quote__cta:active { transform: translateY(0); }
.big-quote__trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #f3efe5;
}
.big-quote__trust-line {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
}
.big-quote__trust-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--positive) 22%, transparent);
  flex-shrink: 0;
  animation: trust-pulse 2s ease-in-out infinite;
}
@keyframes trust-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--positive) 22%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--positive) 10%, transparent); }
}

@media (max-width: 720px) {
  .types-preview--big { min-height: auto; padding: 8px 0 0; }
  .big-quote { padding: 26px 22px 22px; box-sizing: border-box; }
  .big-quote__chips { gap: 8px; flex-wrap: wrap; }
  /* Tight viewports: let the strike/discount drop below the big number
     instead of overflowing the card edge. */
  .big-quote__price-block { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .big-quote, .big-quote > *, .big-quote__trust-dot { animation: none; }
}

/* ============================================================
   POLICY DELIVERY — "Tu póliza queda en el chat" section
   ============================================================ */
.policy-section {
  background: var(--bg);
  padding: clamp(80px, 10vw, 140px) 0;
}
.policy-section__shell {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}
/* Invertir la composición: mockup a la izquierda, copy a la derecha — rompe
   la cadena de 3 splits con visual-a-la-derecha (How → Types → Policy). */
.policy-section__copy { max-width: 540px; order: 2; }
.policy-section__art { order: 1; }
.policy-section__bullets {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}
.policy-section__bullets li {
  padding-left: 18px;
  position: relative;
}
.policy-section__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.policy-section__bullets strong { color: var(--ink); font-weight: 600; }
.policy-section__art {
  display: grid;
  place-items: center;
}
@media (max-width: 900px) {
  .policy-section__shell { grid-template-columns: 1fr; gap: 48px; }
  .policy-section__copy { max-width: 100%; order: 1; }
  .policy-section__art { order: 2; }
}

/* ===== Policy scene wrapper (main mockup + satellite mini-cards) ===== */
.policy-scene {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.policy-scene::before {
  content: '';
  position: absolute;
  inset: -10% -18%;
  background:
    radial-gradient(ellipse 60% 50% at 28% 24%, color-mix(in oklab, var(--accent) 3.5%, transparent), transparent 60%),
    radial-gradient(ellipse 55% 60% at 82% 82%, color-mix(in oklab, var(--bg-soft) 30%, transparent), transparent 65%),
    radial-gradient(circle, rgba(12, 20, 24, 0.05) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 720px) {
  .policy-scene::before { display: none; }
}

.policy-deliver {
  width: 100%;
  max-width: 460px;
  background:
    radial-gradient(ellipse at 22% 24%, rgba(255,255,255,0.45) 0%, transparent 26%),
    radial-gradient(ellipse at 78% 80%, rgba(255,255,255,0.38) 0%, transparent 24%),
    linear-gradient(160deg, #ece5dd 0%, #d9d0c2 100%);
  border-radius: 22px;
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 24px -10px rgba(12, 20, 24, 0.10),
    0 40px 100px -30px rgba(12, 20, 24, 0.22),
    0 80px 160px -40px rgba(12, 20, 24, 0.18);
  position: relative;
  overflow: hidden;
}
/* WhatsApp-style wallpaper: faint beige dot pattern */
.policy-deliver::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(168, 152, 122, 0.18) 1px, transparent 1px),
    radial-gradient(rgba(168, 152, 122, 0.12) 1px, transparent 1px);
  background-size: 18px 18px, 36px 36px;
  background-position: 0 0, 9px 9px;
}
.policy-deliver > * { position: relative; z-index: 1; }

/* WhatsApp-style chat header (avatar + name + status) */
.policy-deliver__chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f6efe2 0%, #efe7d6 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  min-height: 44px;
}
.policy-deliver__chat-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8895d 0%, #8a4f2c 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.policy-deliver__chat-meta { display: flex; flex-direction: column; gap: 0; line-height: 1.1; min-width: 0; }
.policy-deliver__chat-name {
  font-size: 13px;
  font-weight: 600;
  color: #1c1a16;
  letter-spacing: -0.01em;
}
.policy-deliver__chat-status {
  font-size: 10.5px;
  color: #2f7d52;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
.policy-deliver__chat-status-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2f7d52;
  box-shadow: 0 0 0 2px rgba(47,125,82,0.18);
}

@keyframes policy-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.policy-deliver__msg {
  align-self: flex-start;
  background: #dcf8c6;
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 11px 14px 8px;
  max-width: 88%;
  margin: 6px 14px 0;
  font-size: 14px;
  line-height: 1.42;
  color: #111;
  box-shadow:
    0 1px 0.5px rgba(0,0,0,0.13),
    0 6px 14px -8px rgba(0,0,0,0.08);
  animation: policy-bubble-in 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  position: relative;
}
/* WhatsApp tail — points up-left to avatar/sender */
.policy-deliver__msg::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  width: 10px;
  height: 12px;
  background: #dcf8c6;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.policy-deliver__msg-text { margin-bottom: 4px; display: block; }
.policy-deliver__time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #99a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: right;
  margin-top: 2px;
  margin-left: 8px;
  letter-spacing: 0.02em;
}
.policy-deliver__doc {
  align-self: stretch;
  background: #dcf8c6;
  border-radius: 14px;
  border-top-left-radius: 4px;
  padding: 14px;
  margin: 0 14px;
  display: flex;
  gap: 14px;
  box-shadow:
    0 1px 0.5px rgba(0,0,0,0.13),
    0 8px 18px -10px rgba(0,0,0,0.10);
  animation: policy-bubble-in 0.55s 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  position: relative;
  /* Sin cursor:pointer ni hover-lift: es un mockup ilustrativo, no un control —
     prometer un click que no existe lee como sitio roto. */
}
.policy-deliver__doc-icon {
  flex-shrink: 0;
  width: 44px;
  height: 56px;
  padding: 2px;
  background: linear-gradient(145deg, #ffffff 0%, #f4eedf 100%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.policy-deliver__doc-icon svg { display: block; }
.policy-deliver__doc-meta { flex: 1; min-width: 0; }
.policy-deliver__doc-title {
  font-weight: 600;
  font-size: 14px;
  color: #111;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.policy-deliver__doc-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #888;
  letter-spacing: 0.06em;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
  text-transform: uppercase;
}
.policy-deliver__sep { opacity: 0.4; }
.policy-deliver__doc-rows {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0,0,0,0.07);
  padding-top: 2px;
}
.policy-deliver__doc-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12.5px;
}
.policy-deliver__doc-rows > div:last-child { border-bottom: 0; }
.policy-deliver__doc-rows span {
  color: #6b7569;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.policy-deliver__doc-rows strong {
  color: #111;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}
/* Status row: divider-separated, heavier weight */
.policy-deliver__doc-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.09);
}
.policy-deliver__doc-status-row > span {
  color: #6b7569;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.policy-deliver__active {
  color: #2f7d52 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans, inherit);
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  font-size: 12.5px !important;
}
.policy-deliver__active::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2f7d52;
  box-shadow: 0 0 0 3px rgba(47,125,82,0.18);
  animation: trust-pulse 2s ease-in-out infinite;
}
.policy-deliver__active svg { color: #2f7d52; }
.policy-deliver__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(12, 20, 24, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 10px;
  padding: 0 14px;
  text-align: center;
  text-transform: uppercase;
  animation: policy-bubble-in 0.4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.policy-deliver__hint svg { color: #2f7d52; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .policy-deliver__msg,
  .policy-deliver__doc,
  .policy-deliver__hint,
  .policy-deliver__active::before { animation: none; }
}

/* ============================================================
   APP HANDOFF — Dan-in-your-pocket lockscreen notifications mockup
   ============================================================ */
.cta-final__shell {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.cta-final__copy { text-align: left; }
.cta-final__art { display: grid; place-items: center; }
@media (max-width: 900px) {
  .cta-final__shell { grid-template-columns: 1fr; gap: 56px; }
  .cta-final__copy { text-align: center; }
}

/* ===== Handoff scene wrapper (iPhone + satellite mini-cards floating) ===== */
.handoff-scene {
  position: relative;
  width: 100%;
  max-width: 540px;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 24px 0;
}
.handoff-scene::before {
  content: '';
  position: absolute;
  inset: -14% -22%;
  background:
    radial-gradient(ellipse 55% 45% at 28% 28%, rgba(255, 255, 255, 0.03), transparent 62%),
    radial-gradient(ellipse 50% 55% at 82% 78%, rgba(212, 155, 111, 0.04), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(180, 200, 230, 0.025), transparent 70%),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: auto, auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 980px) {
  .handoff-scene { max-width: 460px; }
}

/* Pixel 10 chasis — más cuadrado que iPhone (38px vs 56px), frame metálico
   oscuro Pixel-ish, sin Dynamic Island (usa punch-hole). Wallpaper Material You
   "expressive" linear con un highlight radial sutil top-right. */
.handoff {
  width: 100%;
  max-width: 360px;
  background:
    radial-gradient(ellipse 70% 50% at 88% 6%, rgba(214, 146, 106, 0.22) 0%, transparent 65%),
    linear-gradient(155deg, #2a1d18 0%, #3a2820 35%, #4d3528 65%, #1f1410 100%);
  border-radius: 38px;
  padding: 44px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.04),
    0 0 0 1px rgba(20,18,16,0.6),
    0 0 0 3px #1a1714,
    0 60px 140px -40px rgba(0,0,0,0.55),
    0 24px 60px -30px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
}
/* Camera punch-hole (Pixel) — pequeño círculo centrado arriba, NO pill */
.handoff__punchhole {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #050505;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(40,40,44,0.9),
    inset 0 0 4px rgba(80,80,90,0.4),
    0 0 0 1px rgba(0,0,0,0.6);
  z-index: 3;
}
/* Status bar — Pixel: hora a la IZQUIERDA, iconos derecha. Padding ~16px. */
.handoff__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 14px;
  margin-top: -30px;
  margin-bottom: 4px;
  font-family: 'Google Sans', 'Product Sans', Roboto, system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0;
  position: relative;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}
.handoff__statusbar-clock { display: inline-block; }
.handoff__statusbar-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  opacity: 0.95;
}
.handoff__statusbar-icons svg { fill: #fff; }

/* Hora + fecha — Pixel: alineadas a la IZQUIERDA, Google Sans look,
   weight 300 (más grueso que iOS 200), tamaño 76px. */
.handoff__time {
  text-align: left;
  color: #fff;
  margin: 14px 4px 2px;
  padding: 0 6px;
  position: relative;
  z-index: 1;
}
.handoff__hour {
  font-family: 'Google Sans', 'Product Sans', system-ui, -apple-system, Roboto, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 76px;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
.handoff__date {
  font-family: 'Google Sans', 'Product Sans', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  margin-top: 4px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22);
}

/* At a Glance widget — chip Material You debajo del reloj, alineado izquierda */
.handoff__glance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 6px 10px 4px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: rgba(255,255,255,0.92);
  font-family: 'Google Sans', 'Product Sans', system-ui, -apple-system, Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  max-width: calc(100% - 20px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.handoff__glance-icon { color: rgba(255,255,255,0.85); flex-shrink: 0; }
.handoff__glance span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes handoff-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}
.handoff__notif-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}
/* Material You notif — más opaco, menos blur, border-radius 24px, sin stack */
.handoff__notif {
  background: rgba(40, 40, 44, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.18);
  animation: handoff-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.handoff__notif:hover {
  transform: translateY(-1px);
  background: rgba(50, 50, 56, 0.72);
}

/* App icon: círculo Material You de 40px (no squircle), gradient warm */
.handoff__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(155deg, #d6926a 0%, #b06f47 60%, #8a4f2c 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 2px rgba(0,0,0,0.30);
  position: relative;
}
.handoff__avatar span {
  font-family: 'Google Sans', 'Product Sans', system-ui, -apple-system, Roboto, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: rgba(255,255,255,0.98);
  letter-spacing: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.handoff__body { flex: 1; min-width: 0; }
.handoff__top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.handoff__app {
  font-family: 'Google Sans', 'Product Sans', Roboto, system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.68);
  text-transform: uppercase;
}
.handoff__time-ago {
  font-family: 'Google Sans', 'Product Sans', Roboto, system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: none;
}
.handoff__notif-title {
  font-family: 'Google Sans', 'Product Sans', Roboto, system-ui, -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 2px;
}
.handoff__msg {
  font-family: 'Google Sans', 'Product Sans', Roboto, system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.34;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0;
}

/* Bottom area: flashlight (izq) + lock icon (centro) + camera (der). */
.handoff__shortcuts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 18px 4px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.handoff__shortcut {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 1px 3px rgba(0,0,0,0.22);
  transition: background 0.25s cubic-bezier(0.2,0.8,0.2,1);
}
.handoff__shortcut:hover { background: rgba(255,255,255,0.18); }
.handoff__lock {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.60);
}

/* Pixel system bar — trazo blanco delgado centrado en vez del home indicator iOS */
.handoff__foot {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.handoff__bar {
  width: 110px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
@media (prefers-reduced-motion: reduce) {
  .handoff__notif { animation: none; }
  .handoff__notif:hover { transform: none; }
  .handoff__shortcut { transition: none; }
}
@media (max-width: 720px) {
  .handoff { max-width: 320px; padding: 40px 14px 14px; }
  .handoff__hour { font-size: 64px; }
}

/* ============================================================
   BRAND CLOSE — massive wordmark between CTAFinal and Footer
   ============================================================ */
.brand-close {
  position: relative;
  background: oklch(95.5% 0.007 75);   /* bone soft — Black & Tan */
  color: oklch(16% 0.012 60);
  padding: clamp(80px, 12vw, 160px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  isolation: isolate;
}
.brand-close::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.brand-close__shell {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
}
.brand-close__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: oklch(40% 0.012 60 / 0.85);
  font-weight: 500;
}
.brand-close__rule {
  display: inline-block;
  width: clamp(28px, 6vw, 64px);
  height: 1px;
  background: oklch(40% 0.012 60 / 0.3);
}
.brand-close__wm {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(140px, 32vw, 360px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: oklch(16% 0.012 60);
  margin: 0;
  transform: translateX(-0.02em);
  user-select: none;
}
.brand-close__dot {
  font-style: normal;
  color: rgb(200, 137, 93);
  margin-left: 0.02em;
}
.brand-close__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(40% 0.012 60 / 0.75);
}
.brand-close__meta span[aria-hidden="true"] { opacity: 0.5; }
@media (max-width: 640px) {
  .brand-close { padding: 72px 0 56px; }
  .brand-close__eyebrow { font-size: 10px; gap: 10px; }
  .brand-close__rule { width: 22px; }
  .brand-close__wm { font-size: clamp(120px, 44vw, 220px); }
  .brand-close__meta { font-size: 10px; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================
   PARALLAX / SCROLL UTILITIES
   ========================================================= */
.fade-in {
  opacity: 0.001;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.fade-in.is-visible { opacity: 1; transform: none; }

.fade-up {
  opacity: 0.001;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.16,1,0.3,1);
}
.fade-up.is-visible { opacity: 1; transform: none; }

.fade-scale {
  opacity: 0.001;
  transform: scale(0.95) translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.fade-scale.is-visible { opacity: 1; transform: none; }

.fade-blur {
  opacity: 0.001;
  filter: blur(8px);
  transform: translateY(20px);
  transition: opacity 0.55s, filter 0.55s, transform 0.65s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, opacity, transform;
}
.fade-blur.is-visible { opacity: 1; filter: blur(0); transform: none; }

/* Blur reveal — even stronger, for hero / big headlines */
.blur-reveal {
  opacity: 0.001;
  filter: blur(12px);
  transform: translateY(14px);
  transition: opacity 0.6s, filter 0.6s, transform 0.7s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, opacity, transform;
}
.blur-reveal.is-visible { opacity: 1; filter: blur(0); transform: none; }

/* Blur reveal for paragraph/sub copy — softer, faster */
.blur-soft {
  opacity: 0.001;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 0.5s, filter 0.5s, transform 0.55s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.blur-soft.is-visible { opacity: 1; filter: blur(0); transform: none; }

/* Static-capture + reduced-motion fallback: ensure all reveal content
   is visible to crawlers, OG previews, and motion-sensitive users.
   Note: opacity is 0.001 (not 0) on initial state so the rendering
   engine still composites the layer — keeps Chrome/Safari headless
   from skipping the paint entirely. */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-up, .fade-scale, .fade-blur, .blur-reveal, .blur-soft {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Above-the-fold initial reveal is handled in app.jsx, not here:
   on mount, JS adds .is-visible to elements whose top is within
   the initial viewport. That keeps the scroll-blur reveal intact
   for elements further down. */

/* Stagger delays (apply via inline style or by index) */
.stagger > * { transition-delay: calc(var(--stagger-base, 0.1s) * var(--i, 0)); }

/* Big number reveal */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.reveal-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.reveal-word.is-visible > span { transform: none; }

/* Section divider line that draws in */
.draw-line {
  position: relative;
}
.draw-line::before {
  content: '';
  position: absolute;
  left: 0; top: -32px;
  width: 64px; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}
.draw-line.is-visible::before { transform: scaleX(1); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  gap: 48px;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
}
.marquee:hover { animation-play-state: paused; }

/* counter animation */
.count {
  font-variant-numeric: tabular-nums;
}

/* Tweaks panel z-index */
om-tweaks { z-index: 999 !important; }

/* ============================================================
   SCROLL JOURNEY — CSS Scroll-Driven Animations
   Each visual hero (mockups, big numbers, section headers) is
   animated as a function of its position in the viewport, not
   as a once-only IO trigger. Creates the jeton/nebula.med
   "everything moves as you scroll" feel.
   Progressive enhancement: only fires where animation-timeline
   is supported (Chrome 115+, Safari 26+). IO fallback keeps
   the page working everywhere else.
   ============================================================ */
@supports (animation-timeline: view()) {
  /* Section headers — rise + soften blur on entry */
  .section-header {
    animation: journey-header-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes journey-header-rise {
    from { transform: translateY(48px); opacity: 0; filter: blur(4px); }
    to   { transform: translateY(0);    opacity: 1; filter: blur(0); }
  }

  /* Visual heroes (mockups) — lift + scale-in as they enter */
  .types-preview--big,
  .policy-section__art,
  .cta-final__art {
    animation: journey-mockup-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  @keyframes journey-mockup-lift {
    from {
      transform: translateY(88px) scale(0.9);
      opacity: 0.4;
      filter: blur(6px);
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  /* HeroStat number — dramatic zoom-in tied to scroll position
     so the giant figure literally grows into focus as you scroll. */
  .hero-stat__num-wrap {
    animation: journey-stat-zoom linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes journey-stat-zoom {
    from {
      transform: scale(0.82);
      opacity: 0.2;
      filter: blur(10px);
    }
    to {
      transform: scale(1);
      opacity: 1;
      filter: blur(0);
    }
  }

  /* Hero parallax — the first hero text drifts up slightly while
     the hero itself stays put, so the second section feels like
     it's pulling the viewport forward. */
  .hero__inner {
    animation: journey-hero-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% exit 100%;
  }
  @keyframes journey-hero-drift {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(-40px); opacity: 0.6; }
  }

  /* BrandClose wordmark — scales in for the closer.
     Sin blur y con range corto: la sección está al final del documento y el
     scroll se acaba antes de "cover 60%", dejando la animación incompleta —
     el wordmark quedaba permanentemente borroso (blur ~1.4px) y a scale 0.986.
     El blur de entrada lo aporta el reveal por IntersectionObserver, que sí
     completa siempre. */
  .brand-close__wm {
    animation: journey-brand-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  @keyframes journey-brand-rise {
    from { transform: translateY(80px) scale(0.92); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
  }

  /* Bullets / lists in copy columns — staggered rise */
  .policy-section__bullets li {
    animation: journey-bullet-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  @keyframes journey-bullet-rise {
    from { transform: translateX(-16px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .section-header,
    .types-preview--big,
    .policy-section__art,
    .cta-final__art,
    .hero-stat__num-wrap,
    .hero__inner,
    .brand-close__wm,
    .policy-section__bullets li {
      animation: none;
    }
  }
}

/* Red de seguridad global para animaciones decorativas que los bloques
   scoped de arriba no cubren (marquee, dots del chat, subrayado del hero).
   El !important vence también al animationDuration inline del ticker. */
@media (prefers-reduced-motion: reduce) {
  .marquee,
  .bubble,
  .bubble--typing span,
  .wa-online-dot,
  .types-preview__meta,
  .underline-accent::after {
    animation: none !important;
  }
}

/* ── Logos de aseguradoras: nunca deformados ───────────────────────────────
   Son SVG servidos por <img> dentro de contenedores flex. Las reglas de arriba
   solo fijan `height`, así que si el SVG pierde su tamaño intrínseco el flex item
   se estira al ancho disponible y el height fijo lo achata (el de Aurora salía
   274x16 en el hero cuando por ratio son 90x16). `width:auto` + `flex:none` deja
   que el ancho lo mande el aspect ratio, no el espacio libre. */
.hero__trust .logos img,
.insurers--strip .strip-logos img {
  width: auto;
  flex: none;
  object-fit: contain;
}