/* ============================================================
   AgenteBnb · KEYNOTE SYSTEM — Fase 1 · Foundations
   ------------------------------------------------------------
   Capa nueva sobre landing-redesigned.css + landing-berriup-extras.css.
   No reemplaza nada anterior; ELEVA con primitivas de motion
   verificadas en apple.com (Vision Pro, M4, iPhone 17 Pro, WWDC).

   Restricciones técnicas:
   - 0 librerías. Vanilla CSS only.
   - 60fps obligatorio (solo transform + opacity en transiciones).
   - prefers-reduced-motion siempre respetado vía duraciones → 1ms.

   Convención de prefijos:
   - .kn-*    → utility classes de este sistema
   - --dur-*  → duraciones discretas (no improvises)
   - --ease-* → easings verificados Apple/keynote stack
   - --rise-* → distancias de translateY para fade+rise
   ============================================================ */

:root {
  /* ============== EASINGS · curvas Apple verificadas ============== */
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);     /* state changes, hover */
  --ease-decelerate:   cubic-bezier(0, 0, 0.2, 1);       /* entrada (fade-in) */
  --ease-accelerate:   cubic-bezier(0.4, 0, 1, 1);       /* salida (fade-out) */
  --ease-apple-spring: cubic-bezier(0.32, 0.72, 0, 1);   /* iOS sheets, gallery transitions */
  --ease-soft-enter:   cubic-bezier(0.16, 1, 0.3, 1);    /* keynote reveals on scroll */
  --ease-dramatic:     cubic-bezier(0.19, 1, 0.22, 1);   /* hero entrance, "expo out" */

  /* ============== DURACIONES · escala discreta ============== */
  --dur-instant:  100ms;  /* hover state, focus */
  --dur-fast:     200ms;  /* micro-interactions, chevron rotate */
  --dur-medium:   400ms;  /* card hover lift, accordion */
  --dur-slow:     800ms;  /* section reveals on scroll */
  --dur-dramatic: 1200ms; /* hero entrance, product reveal */

  /* ============== DISTANCIAS de translate (fade+rise) ============== */
  --rise-sm: 12px;
  --rise-md: 24px;
  --rise-lg: 48px;

  /* ============== WHITESPACE vertical (escala mayor que la actual) ============== */
  --section-pad-y-mobile:  80px;
  --section-pad-y-tablet: 120px;
  --section-pad-y-desktop: 160px;

  /* ============== TIPOGRAFÍA display · escala Apple ============== */
  --type-display-1: clamp(56px, 9vw, 128px);   /* hero, cierre dramático */
  --type-display-2: clamp(44px, 6vw, 88px);    /* section opener (Act title) */
  --type-display-3: clamp(32px, 4.5vw, 56px);  /* sub-acts */
  --type-body-lg:   clamp(18px, 1.4vw, 22px);  /* subtítulo hero */
  --type-body:      17px;                       /* body Apple-style */
  --type-caption:   13px;                       /* eyebrows, captions */

  /* ============== COLOR storytelling per-act (overlays sutiles) ============== */
  --mood-warm:     #fdf8f3;
  --mood-cool:     #f6f8fb;
  --mood-dark:     #0a0a0a;
  --mood-deep:     #1a1410;   /* warm dark, "noche del host" */

  /* ============== Líneas y separadores Apple-style ============== */
  --hairline: 1px solid rgba(10, 10, 10, 0.06);
}

/* ============================================================
   Reduced-motion: toda animación a 1ms (no se quita, se acorta).
   Esto evita "saltos" y preserva estado final correcto.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-medium:  1ms;
    --dur-slow:    1ms;
    --dur-dramatic: 1ms;
    --rise-sm: 0;
    --rise-md: 0;
    --rise-lg: 0;
  }
}

/* ============================================================
   K4 · Patrón canónico de scroll-driven reveal (fade + rise)
   Uso: <element class="kn-reveal">…</element>
   JS añade .in cuando entra al viewport.
============================================================ */
.kn-reveal {
  opacity: 0;
  transform: translate3d(0, var(--rise-md), 0);
  transition:
    opacity   var(--dur-slow) var(--ease-soft-enter),
    transform var(--dur-slow) var(--ease-soft-enter);
  will-change: opacity, transform;
}
.kn-reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger nativo de hasta 5 hermanos consecutivos */
.kn-reveal.in + .kn-reveal.in                              { transition-delay: 80ms; }
.kn-reveal.in + .kn-reveal.in + .kn-reveal.in              { transition-delay: 160ms; }
.kn-reveal.in + .kn-reveal.in + .kn-reveal.in + .kn-reveal.in              { transition-delay: 240ms; }
.kn-reveal.in + .kn-reveal.in + .kn-reveal.in + .kn-reveal.in + .kn-reveal.in { transition-delay: 320ms; }

/* Variantes: rise-sm para hijos pequeños, rise-lg para bloques principales */
.kn-reveal.kn-rise-sm { transform: translate3d(0, var(--rise-sm), 0); }
.kn-reveal.kn-rise-sm.in { transform: translate3d(0, 0, 0); }
.kn-reveal.kn-rise-lg { transform: translate3d(0, var(--rise-lg), 0); }
.kn-reveal.kn-rise-lg.in { transform: translate3d(0, 0, 0); }

/* ============================================================
   K1 · Nav scroll-aware (backdrop blur Apple-style)
   El JS añade .is-scrolled cuando window.scrollY > 50.
============================================================ */
nav {
  transition:
    background       var(--dur-fast) var(--ease-standard),
    backdrop-filter  var(--dur-fast) var(--ease-standard),
    border-color     var(--dur-fast) var(--ease-standard);
  border-bottom: 1px solid transparent;
}
nav.is-scrolled {
  background: rgba(250, 250, 249, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(10, 10, 10, 0.06);
}

/* ============================================================
   Tipografía display utility — Apple "huge type" feel
   Uso: <h2 class="kn-display-1">…</h2>
============================================================ */
.kn-display-1 {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: var(--type-display-1);
  line-height: 0.95;            /* Apple usa <1 para huge type */
  letter-spacing: -0.03em;      /* -3% tracking, Apple-style */
  font-weight: 600;
  color: #0a0a0a;
}
.kn-display-2 {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: var(--type-display-2);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #0a0a0a;
}
.kn-display-3 {
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-size: var(--type-display-3);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #0a0a0a;
}
.kn-display-1 em,
.kn-display-1 .accent,
.kn-display-2 em,
.kn-display-2 .accent,
.kn-display-3 em,
.kn-display-3 .accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #d24a1f;
  letter-spacing: -0.015em;
}

/* ============================================================
   Helper · Stagger por data-attribute
   Uso:
     <div data-stagger>
       <child class="kn-reveal" /> <- delay 0
       <child class="kn-reveal" /> <- delay 80ms
       <child class="kn-reveal" /> <- delay 160ms
     </div>
   El JS setea --i en cada hijo; el CSS calcula el delay.
   Funciona para stagger > 5 (el selector adjacente solo cubre 5).
============================================================ */
[data-stagger] > .kn-reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ============================================================
   COLOR storytelling per-act (data-mood en sección)
   Aplica un background sutil; transición suave al entrar al
   siguiente "mood". El JS además cambia <meta name="theme-color">
   en Fase 3 (K9).

   Uso: <section data-mood="warm">…</section>
============================================================ */
section[data-mood] {
  transition: background var(--dur-slow) var(--ease-standard);
}
section[data-mood="warm"] { background: var(--mood-warm); }
section[data-mood="cool"] { background: var(--mood-cool); }
section[data-mood="dark"] {
  background: var(--mood-dark);
  color: #fafaf9;
}
section[data-mood="deep"] {
  background: var(--mood-deep);
  color: #fdf8f3;
}

/* En secciones dark/deep, los eyebrows y subtítulos suben luminosidad */
section[data-mood="dark"] .eyebrow,
section[data-mood="deep"] .eyebrow {
  color: #f6c9b3;
}
section[data-mood="dark"] .section-title,
section[data-mood="dark"] h2,
section[data-mood="deep"] .section-title,
section[data-mood="deep"] h2 {
  color: #fafaf9;
}
section[data-mood="dark"] p,
section[data-mood="deep"] p {
  color: rgba(250, 250, 249, 0.78);
}

/* ============================================================
   Utility classes adicionales (whitespace Apple, hairlines)
============================================================ */
.kn-section-pad {
  padding-top: var(--section-pad-y-mobile);
  padding-bottom: var(--section-pad-y-mobile);
}
@media (min-width: 760px) {
  .kn-section-pad {
    padding-top: var(--section-pad-y-tablet);
    padding-bottom: var(--section-pad-y-tablet);
  }
}
@media (min-width: 1120px) {
  .kn-section-pad {
    padding-top: var(--section-pad-y-desktop);
    padding-bottom: var(--section-pad-y-desktop);
  }
}

.kn-hairline-top    { border-top:    var(--hairline); }
.kn-hairline-bottom { border-bottom: var(--hairline); }

/* ============================================================
   K2 · Hero entrance cinemática (cascada)
   Cada elemento entra con fade+rise; el JS añade .in en page-load.
============================================================ */
.hero [data-kn-hero] {
  opacity: 0;
  transform: translate3d(0, var(--rise-md), 0);
  transition:
    opacity   var(--dur-slow) var(--ease-dramatic),
    transform var(--dur-slow) var(--ease-dramatic);
  will-change: opacity, transform;
}
.hero [data-kn-hero].kn-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Mockup tiene su propio timing (más lento + scale extra) */
.hero [data-kn-hero-mockup] {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.96);
  transition:
    opacity   var(--dur-dramatic) var(--ease-dramatic),
    transform var(--dur-dramatic) var(--ease-dramatic);
  will-change: opacity, transform;
}
.hero [data-kn-hero-mockup].kn-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ============================================================
   K3 · Live ticker · animación de entrada y salida de filas
============================================================ */
.inbox-row {
  transition:
    opacity   var(--dur-medium) var(--ease-standard),
    transform var(--dur-medium) var(--ease-standard),
    max-height var(--dur-medium) var(--ease-standard);
  overflow: hidden;
}
.inbox-row.kn-row-in {
  animation: knRowIn 500ms var(--ease-soft-enter);
}
.inbox-row.kn-row-out {
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}
@keyframes knRowIn {
  from { opacity: 0; transform: translateY(-16px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);     max-height: 120px; }
}

/* ============================================================
   K10 · CTAs magnetic-feel (hover scale + shadow)
   El JS añade translate sutil basado en mouse position (solo en
   pointer:fine). Aquí solo el estado hover básico.
============================================================ */
.btn-primary {
  transition:
    transform  var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.35);
  }
}

/* ============================================================
   K16 · Parallax sutil del mockup (desktop)
   Lo activa el JS solo en min-width 1024px + no-reduced-motion.
   El movimiento real lo aplica el JS via inline transform.
   Aquí solo dejamos preparado un will-change para GPU compositing.
============================================================ */
@media (min-width: 1024px) {
  .hero-mockup {
    will-change: transform;
  }
}

/* ============================================================
   K6 · WORKERS PIN-AND-SCRUB (keynote Apple-style)
   La sección tiene 2 capas:
   - .workers-keynote__head: head normal (con kn-reveal)
   - .workers-keynote__stage: 400vh de altura. Dentro,
     .workers-keynote__sticky es position:sticky top:0 100vh con
     grid 2-col (visual | text). Solo una figure + un article tienen
     .active a la vez; el JS los cambia según scroll progress.
   - Mobile (≤900px) y reduced-motion: fallback a stack vertical
     estático con las 4 piezas visibles (sin sticky).
============================================================ */

/* Reset del padding viejo de .workers-section para que no haga
   doble padding con el nuevo layout. */
section.workers-keynote {
  padding: 0;
  background: var(--mood-warm, #fdf8f3);
  border: 0;
  position: relative;
  overflow: clip;
}

.workers-keynote__head {
  padding: clamp(72px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
}

/* ---------- Stage 400vh (desktop) ---------- */
.workers-keynote__stage {
  height: 400vh; /* 4 trabajadores · 1 viewport cada uno */
  position: relative;
}

.workers-keynote__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 96px);
  padding: 0 clamp(24px, 5vw, 64px);
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- VISUAL · 4 figures, solo una activa ---------- */
.workers-keynote__visual {
  position: relative;
  height: clamp(420px, 70vh, 640px);
}

.workers-keynote__visual > figure {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity   600ms var(--ease-soft-enter),
    transform 600ms var(--ease-soft-enter);
  pointer-events: none;
}
.workers-keynote__visual > figure.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wk-figure-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.03),
    0 28px 60px -28px rgba(20,20,20,0.18);
  overflow: hidden;
}

/* Bordes acentuados según tier */
.wk-figure-coord  { border: 1px solid rgba(184, 154, 110, 0.32); }
.wk-figure-recep  { border: 1px solid rgba(210, 74, 31, 0.32);  background: linear-gradient(180deg, #fff8f4 0%, #fdeae0 100%); }
.wk-figure-asist  { border: 1px solid rgba(124, 58, 237, 0.28); background: linear-gradient(180deg, #fcfaff 0%, #f3eaff 100%); }
.wk-figure-anfit  { border: 1px solid rgba(26, 26, 26, 0.85);  background: linear-gradient(180deg, #14110d 0%, #1a1410 100%); color: #fdf8f3; }
.wk-figure-anfit .wk-step { color: rgba(253, 248, 243, 0.62); }
.wk-figure-anfit .wk-mock { background: rgba(253, 248, 243, 0.08); color: #fdf8f3; }
.wk-figure-anfit .wk-mock-head { color: rgba(253, 248, 243, 0.72); }

.wk-step {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.42);
  align-self: start;
}

.wk-agent {
  width: clamp(160px, 22vw, 240px);
  height: clamp(160px, 22vw, 240px);
  justify-self: center;
  align-self: center;
  display: block;
}

/* Mini-mockup dentro de cada figure */
.wk-mock {
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(10,10,10,0.06);
  font-size: 13px;
  line-height: 1.45;
  display: grid;
  gap: 10px;
}
.wk-mock-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(10,10,10,0.5);
}
.wk-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dae60; }
.wk-mock-title { letter-spacing: 0.04em; }

.wk-notif { display: grid; gap: 4px; }
.wk-notif-title { font-weight: 600; color: #1a1a1a; }
.wk-notif-body { color: #4a4a4a; font-size: 13px; }
.wk-warn { color: #b85d00; }

.wk-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 88%;
  display: grid;
  gap: 4px;
}
.wk-bubble-meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(10,10,10,0.42);
}
.wk-bubble-in {
  background: #f4f1ec;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
  justify-self: start;
}
.wk-bubble-out {
  background: #d24a1f;
  color: #fff;
  border-bottom-right-radius: 4px;
  justify-self: end;
}
.wk-bubble-out .wk-bubble-meta { color: rgba(255,255,255,0.78); }

.wk-cmd {
  padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
}
.wk-cmd-in  { background: #f4eefb; color: #4a2d7c; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }
.wk-cmd-out { background: #ecf6f1; color: #1f7a4d; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; }

.wk-payout {
  display: grid; gap: 8px;
  background: rgba(253,248,243,0.06);
  border: 1px solid rgba(253,248,243,0.14);
  border-radius: 12px;
  padding: 14px 18px;
}
.wk-payout-amount {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fdf8f3;
}
.wk-payout-meta { color: rgba(253,248,243,0.72); font-size: 13px; line-height: 1.5; }
.wk-payout-pill {
  display: inline-block; margin-top: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(253, 188, 137, 0.16); color: #fdbc89;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em;
}

/* ---------- TEXT · 4 articles, solo uno activo ---------- */
.workers-keynote__text {
  position: relative;
  align-self: center;
}
.workers-keynote__text > article {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   500ms var(--ease-soft-enter),
    transform 500ms var(--ease-soft-enter);
  pointer-events: none;
}
.workers-keynote__text > article.active {
  opacity: 1;
  transform: none;
  position: relative; /* sale del absolute para que ocupe el flujo */
  pointer-events: auto;
}

.wk-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #d24a1f;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wk-tier {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(210, 74, 31, 0.12);
  color: #d24a1f;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.tier-basic .wk-eyebrow,
.tier-basic .wk-tier { color: #7a6a55; background: rgba(184, 154, 110, 0.16); }
.tier-basic .wk-eyebrow { background: transparent; }
.tier-ultra .wk-eyebrow,
.tier-ultra .wk-tier { color: #fdf8f3; background: rgba(10, 10, 10, 0.92); }
.tier-ultra .wk-eyebrow { background: transparent; color: #1a1a1a; }
.tier-ultra .wk-tier { color: #fdf8f3; }

.wk-display {
  margin: 0 0 24px;
  max-width: 540px;
}
.wk-hook {
  font-size: 17px;
  line-height: 1.55;
  color: #4a4a4a;
  max-width: 520px;
  margin: 0 0 24px;
}
.wk-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}
.wk-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1a1a;
}
.wk-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 14px;
  height: 1px;
  background: #d24a1f;
}
.wk-price {
  font-size: 13px;
  color: rgba(10, 10, 10, 0.62);
  padding-top: 18px;
  border-top: 1px dashed rgba(10, 10, 10, 0.12);
  margin: 0;
}
.wk-price strong { color: #1a1a1a; }

/* Footer CTA después del pin */
.workers-keynote__footer {
  padding: clamp(56px, 6vw, 88px) 0 clamp(80px, 10vw, 120px);
  text-align: center;
}

/* ============================================================
   FALLBACK · Mobile (≤900px) y prefers-reduced-motion
   Stack vertical estático: las 4 figures + 4 articles visibles,
   sin sticky, sin scroll-driven swap. Más usable en touch.
============================================================ */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .workers-keynote__stage {
    height: auto;
  }
  .workers-keynote__sticky {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(48px, 8vw, 80px);
    padding: clamp(24px, 5vw, 48px);
  }
  .workers-keynote__visual,
  .workers-keynote__text {
    position: static;
    height: auto;
    display: grid;
    gap: 40px;
  }
  .workers-keynote__visual > figure,
  .workers-keynote__text > article {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .workers-keynote__visual > figure {
    height: clamp(360px, 68vw, 480px);
  }
  .wk-display { font-size: clamp(24px, 6vw, 32px); }
}

/* En mobile aún más compacto */
@media (max-width: 600px) {
  .workers-keynote__head { padding: 56px 24px 32px; }
  .wk-figure-card { padding: 24px 20px; border-radius: 20px; }
  .wk-agent { width: 140px; height: 140px; }
}

/* ============================================================
   K7 · CALC bars con drama
   Mejora la transición de las barras a 500ms con easing Apple,
   tabular-nums en TODOS los counts, y un glow sutil en la barra
   AgenteBnb (ours) cuando se actualiza para que destaque.
============================================================ */
.calc-berriup .bar-fill,
.calc-berriup .bar-row[data-kind="ours"] .bar-fill,
.calc-berriup .bar-row[data-kind="pms"]  .bar-fill,
.calc-berriup .bar-row[data-kind="human"] .bar-fill,
.calc-berriup .bar-row[data-kind="diy"]   .bar-fill {
  /* Override: easing Apple standard, 500ms (más dramático que 400ms).
     Necesita igualar la specificity de la regla de landing-berriup-extras.css
     que ya selecciona por [data-kind="ours"]. */
  transition:
    width      500ms var(--ease-standard),
    box-shadow 300ms var(--ease-standard);
}
.calc-berriup .bar-cost strong,
.calc-berriup .bar-cost .bar-unit,
.calc-berriup .calc-result-pill .num,
.calc-berriup .summary-cell .num {
  font-variant-numeric: tabular-nums;
}
/* Glow temporal en la barra ours al actualizarse */
.calc-berriup .bar-row[data-kind="ours"] .bar-fill.is-pulsing {
  box-shadow: 0 0 0 4px rgba(210, 74, 31, 0.18);
}
/* Equipo humano (siempre al 100%): sombra dramática "fuera de cuadro" */
.calc-berriup .bar-row[data-kind="human"] .bar-fill {
  box-shadow: 12px 0 24px -8px rgba(10, 10, 10, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .calc-berriup .bar-fill { transition: none !important; }
  .calc-berriup .bar-row[data-kind="ours"] .bar-fill.is-pulsing { box-shadow: none; }
}

/* ============================================================
   K8 · Playground · chips attention-pulse + bubbles entrance
============================================================ */
@keyframes knAttentionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 74, 31, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(210, 74, 31, 0); }
}
/* Pulse 3 veces, dispara cuando el viewport entra en la sección */
.equipo-playground-berriup.is-inview .pg-chip {
  animation: knAttentionPulse 1.6s var(--ease-standard) 3;
}
/* Cancela el pulse en cuanto el usuario clica cualquier chip
   (sin esperar las 3 iteraciones) */
.equipo-playground-berriup.is-engaged .pg-chip {
  animation: none;
}

/* Bubbles del chat: entrada con slide lateral */
.playground-berriup .pg-msg {
  /* La extra-animación se acumula a la que playground.js ya tiene (.in).
     Solo añadimos un slide lateral según side. */
}
.playground-berriup .pg-msg.in.out {  /* "in" del playground.js + .out = user */
  animation: knBubbleInRight 380ms var(--ease-soft-enter);
}
.playground-berriup .pg-msg.in.ai {
  animation: knBubbleInLeft 380ms var(--ease-soft-enter);
}
@keyframes knBubbleInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes knBubbleInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Checkmark verde al cerrar respuesta (scale-in con Apple-spring) */
.playground-berriup .pg-msg.ai::after {
  /* No usamos ::after porque el markup ya tiene meta interno; el JS
     puede añadir una clase .has-check al terminar el typing. Pero
     mantenemos hook por si se quiere extender en Fase 4. */
}

@media (prefers-reduced-motion: reduce) {
  .equipo-playground-berriup .pg-chip { animation: none !important; }
  .playground-berriup .pg-msg.in.out,
  .playground-berriup .pg-msg.in.ai { animation: none !important; }
}

/* ============================================================
   K15 · Cierre dramático · "Tú duermes. Ellos trabajan."
   Cada palabra entra con cascada poética: 0/200/500/700ms.
============================================================ */
.kn-closing-section {
  text-align: center;
  padding: clamp(96px, 12vw, 160px) clamp(24px, 5vw, 64px);
}
.kn-closing {
  margin: 1.5rem 0 1.5rem;
  color: #fdf8f3;
  text-align: center;
  letter-spacing: -0.03em;
}
.kn-closing .kn-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--rise-md));
  transition:
    opacity   var(--dur-slow) var(--ease-dramatic),
    transform var(--dur-slow) var(--ease-dramatic);
  margin-right: 0.2em;
}
.kn-closing .kn-word em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #f17a3c; /* terracota brighter sobre fondo dark */
  letter-spacing: -0.015em;
}
.kn-closing.in .kn-word:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.kn-closing.in .kn-word:nth-child(2) { opacity: 1; transform: none; transition-delay: 200ms; }
/* nth-child(3) es el <br> */
.kn-closing.in .kn-word:nth-child(4) { opacity: 1; transform: none; transition-delay: 500ms; }
.kn-closing.in .kn-word:nth-child(5) { opacity: 1; transform: none; transition-delay: 700ms; }

.kn-closing-sub {
  color: rgba(253, 248, 243, 0.72);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 600px;
  margin: 0 auto 2.5rem;
}

/* En mobile reduce el tamaño del huge type y elimina cascada
   (la animación sigue, pero menos dramática) */
@media (max-width: 720px) {
  .kn-closing {
    font-size: clamp(40px, 12vw, 72px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kn-closing .kn-word { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   K9 · Body background sigue el mood actual
   El JS actualiza --current-mood + meta theme-color cuando una
   sección con data-mood entra al viewport. El body transiciona
   suavemente entre fondos.
============================================================ */
body {
  background: var(--current-mood, #fafaf9);
  transition: background 600ms var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* ============================================================
   K11 · Pricing card · shimmer en featured (Pro)
   Gradient diagonal cruza la card cada 6s. Sutil pero presente.
============================================================ */
.price-card.featured {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* contains el ::after dentro del card */
}
.price-card.featured::after {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(210, 74, 31, 0.10) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: knShimmer 6s var(--ease-standard) infinite;
  pointer-events: none;
  z-index: 0;
}
.price-card.featured > * {
  position: relative;
  z-index: 1;
}
@keyframes knShimmer {
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .price-card.featured::after { animation: none; opacity: 0; }
}

/* ============================================================
   K13 · FAQ accordion premium
   Chevron rota + max-height/opacity con easings Apple.
   El JS existente (toggleFaq) añade/quita .open en el botón
   y en .faq-a (no usa aria-expanded). Selectores reflejan eso.
============================================================ */
.faq-q {
  transition:
    background var(--dur-fast) var(--ease-standard),
    color      var(--dur-fast) var(--ease-standard);
}
.faq-q .chev,
.faq-q::after {
  transition: transform var(--dur-fast) var(--ease-standard);
  display: inline-block;
}
.faq-q.open .chev,
.faq-q[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--dur-medium) var(--ease-standard),
    opacity    var(--dur-fast)   var(--ease-standard),
    padding    var(--dur-medium) var(--ease-standard);
}
.faq-a.open,
.faq-q.open + .faq-a,
.faq-q[aria-expanded="true"] + .faq-a {
  max-height: 800px;
  opacity: 1;
}

/* ============================================================
   K14 · How It Works loop · 3 pasos iluminándose
============================================================ */
.how-step,
#how .step,
#how .feature-card {
  transition:
    transform    var(--dur-medium) var(--ease-soft-enter),
    border-color var(--dur-medium) var(--ease-soft-enter),
    box-shadow   var(--dur-medium) var(--ease-soft-enter);
  border: 1px solid transparent;
}
.how-step.kn-glow,
#how .step.kn-glow,
#how .feature-card.kn-glow {
  border-color: #d24a1f;
  transform: scale(1.02);
  box-shadow: 0 12px 32px -16px rgba(210, 74, 31, 0.35);
}

/* ============================================================
   K17 · Sticky bottom-bar mobile · easing Apple-spring
   El bar ya existe del fix móvil. Aquí solo aseguramos el easing.
============================================================ */
.sticky-cta-mobile,
.sticky-cta-bottom,
.mobile-sticky-cta {
  transition: transform 450ms var(--ease-apple-spring);
}