/* ============================================================================
   Bakko Restaurante · landing.css — base + navegación + hero
   Estructura narrativa estilo Bee, ejecutada con tokens-bk2 (Urbanist, rojo Bakko).
   Movimiento sobrio por scroll con IntersectionObserver (sin CDN/GSAP) — ver landing.js.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* overflow-x:clip (no 'hidden'): evita scroll horizontal SIN convertir html/body en
   contenedor de scroll — 'hidden' fuerza overflow-y:auto y eso rompe el position:sticky
   de los .lockpin (la foto no se quedaba fija). 'clip' mantiene overflow-y:visible. */
html, body { overflow-x: clip; max-width: 100%; }

/* Override de escala tipográfica fluida (−30% aprox.) para que a zoom 100% el contenido
   entre "de una pasada" por slide. NO se toca tokens-bk2.css: estos valores pisan los
   tokens en cascada solo dentro de esta landing. --bk2-fs-h3 se deja SIN tocar aquí:
   lo usa la slide 5 (el ciclo), que está exceptuada de la reducción global y define su
   propio tamaño local (ver .cycle-card__phrases p) para no depender de este token. */
:root {
  --bk2-fs-hero: clamp(1.9rem, 5vw, 3.7rem);
  --bk2-fs-h2:   clamp(1.4rem, 3vw, 2.3rem);
  --bk2-fs-lead: clamp(0.95rem, 1.2vw, 1.05rem);
  --bk2-pad:     clamp(16px, 4vw, 48px);
}
body {
  margin: 0;
  font-family: var(--bk2-font);
  font-size: var(--bk2-fs-body);
  line-height: 1.55;
  color: var(--bk2-ink);
  background: var(--bk2-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Sin cursor de inserción parpadeante sobre texto de lectura (aparece con la "navegación
   con cursor" del navegador, F7 en Chrome/Edge). El texto SIGUE siendo seleccionable
   (accesibilidad, copiar); solo se oculta el caret. Los campos editables lo recuperan. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable] { caret-color: auto; }
h1, h2, h3 { margin: 0; line-height: 1.04; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { width: 100%; max-width: var(--bk2-maxw); margin-inline: auto; padding-inline: var(--bk2-pad); }

/* ── Botones (pills, estilo Bee/Revolut) ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: inherit; font-weight: 700; letter-spacing: -0.01em;
  padding: .7em 1.3em; border-radius: var(--bk2-r-pill);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--bk2-ease), background .18s, color .18s, border-color .18s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--bk2-accent); color: var(--bk2-accent-ink); }
.btn-primary:hover { background: var(--bk2-accent-deep); }
.btn-lg { padding: .85em 1.6em; font-size: .95rem; }
/* botón ghost con efecto cristal (blur + fondo translúcido) en vez de solo borde */
.btn-ghost {
  background: rgba(255,255,255,.35); color: var(--bk2-ink); border-color: var(--bk2-line);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.btn-ghost:hover { border-color: var(--bk2-ink); background: rgba(255,255,255,.5); }
/* sobre fondo oscuro: cristal claro translúcido */
.on-dark .btn-ghost {
  color: var(--bk2-on-dark); border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.on-dark .btn-ghost:hover { border-color: var(--bk2-on-dark); background: rgba(255,255,255,.2); }

/* ── Header GLASS flotante (estilo Bee) ────────────────────────────────── */
/* píldora flotante centrada con blur; al abrir el menú, scrim + panel con secciones. */
.navc { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; justify-content: center;
  padding: 16px var(--bk2-pad); pointer-events: none;
  transition: opacity .35s var(--bk2-ease), visibility .35s var(--bk2-ease); }
/* ocultación SOLO durante la slide 5 (el ciclo), controlada por IntersectionObserver en landing.js */
.navc--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .navc { transition: none; } }
.navc__scrim {
  position: fixed; inset: 0; z-index: -1; background: rgba(10,8,7,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--bk2-ease), visibility .35s;
  backdrop-filter: blur(2px); pointer-events: auto;
}
.navc.open .navc__scrim { opacity: 1; visibility: visible; }

.nav {
  pointer-events: auto;
  /* Ancho FIJO e igual en cerrado y abierto: así la barra superior (logo, Inicio,
     Suscribirse, ✕) NO se mueve al desplegar; solo crece el panel hacia abajo.
     La barra reparte logo↔acciones (space-between), como Bee. */
  width: min(420px, calc(100vw - 2 * var(--bk2-pad)));
  display: flex; flex-direction: column;
  background: rgba(28,22,20,.42); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  /* radio FIJO (no se anima): evita el "rebote de balón". */
  border-radius: 26px; box-shadow: 0 10px 40px rgba(0,0,0,.28);
  color: var(--bk2-on-dark);
  transition: background .35s var(--bk2-ease);
  overflow: hidden;
}
/* cuando la nav flota sobre fondo CLARO (al scrollear fuera del hero), píldora clara.
   Opacidad baja a propósito (antes .72) para dejar pasar más la luz del fondo; mismo
   nivel .42 que la píldora oscura por defecto, solo cambia el canal de color. */
.navc.on-light .nav { background: rgba(255,255,255,.42); border-color: var(--bk2-line); color: var(--bk2-ink); }
.navc.on-light .nav .btn-ghost { color: var(--bk2-ink); border-color: var(--bk2-line); }

/* barra: logo a la izquierda, acciones a la derecha (space-between) — ancho fijo de la tarjeta */
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px 8px 20px; }
.nav__logo-link { display: inline-flex; flex: 0 0 auto; }
.nav__logo { height: 20px; width: auto; }
.navc:not(.on-light) .nav__logo-dark { display: none; }
.navc.on-light .nav__logo-light { display: none; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
/* botones homogéneos: Inicio y Suscribirse con el MISMO ancho */
.nav__actions .btn { padding: .55em 1em; font-size: .9rem; min-width: 112px; }
.navc:not(.on-light) .btn-ghost { color: var(--bk2-on-dark); border-color: rgba(255,255,255,.28); }

/* botón hamburguesa / cerrar */
.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent;
  background: transparent; color: inherit; cursor: pointer; flex: 0 0 auto;
  transition: background .2s;
}
.nav__burger:hover { background: rgba(127,127,127,.14); }
.nav__burger svg { width: 19px; height: 19px; }
.nav__burger .ic-close { display: none; }
.navc.open .nav__burger .ic-open { display: none; }
.navc.open .nav__burger .ic-close { display: inline; }

/* panel de secciones (se despliega bajo la barra al abrir) */
.nav__panel {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s var(--bk2-ease), opacity .3s;
  padding-inline: 10px;
}
.navc.open .nav__panel { max-height: 420px; opacity: 1; padding-bottom: 12px; }
.nav__links { display: flex; flex-direction: column; padding: 6px; }
.nav__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: var(--bk2-r-m); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.02em; transition: background .2s, color .2s;
}
.nav__links a:hover { background: rgba(127,127,127,.12); color: var(--bk2-accent); }
.navc:not(.on-light) .nav__links a:hover { color: #e8a39d; }
.nav__links .nav__tag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: var(--bk2-r-pill);
  background: var(--bk2-accent); color: var(--bk2-accent-ink);
}

/* texto del botón de login: largo en desktop, corto ("Inicio") en móvil */
#nav-login .t-short { display: none; }

@media (max-width: 560px) {
  .navc { padding: 10px 14px; }
  .nav__bar { padding: 7px 8px 7px 16px; gap: 10px; }
  /* el botón de login se queda en el header pero como "Inicio" (ocupa menos) */
  #nav-login .t-full { display: none; }
  #nav-login .t-short { display: inline; }
  .nav__actions .btn { padding: .5em .7em; font-size: .85rem; min-width: 92px; }
  .nav__actions { gap: 6px; }
  .nav__burger { width: 34px; height: 34px; }
  .nav__burger svg { width: 18px; height: 18px; }
  .nav__logo { height: 18px; }
}
@media (max-width: 400px) {
  .navc { padding: 8px 10px; }
  .nav__bar { gap: 8px; padding: 6px 6px 6px 12px; }
  .nav__actions .btn { padding: .46em .5em; font-size: .8rem; min-width: 78px; }
  .nav__burger { width: 32px; height: 32px; }
  .nav__logo { height: 16px; }
}

/* ── HERO (foto a sangre + scrim, texto centrado estilo eslogan Bee) ───── */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  color: var(--bk2-on-dark);
  background-color: var(--bk2-dark);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0; height: 100%;
  background-image: url('../assets/pictures/copas-fondo-high-res.png');
  background-size: cover; background-position: center 35%;
}
/* scrim uniforme (más oscuro abajo) para que el titular centrado lea bien
   sobre cualquier zona de la foto */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bk2-dark) 45%, transparent) 0%,
    color-mix(in srgb, var(--bk2-dark) 30%, transparent) 50%,
    color-mix(in srgb, var(--bk2-dark) 55%, transparent) 100%);
}
.hero__inner {
  position: relative; z-index: 2; text-align: center; padding-block: 120px 90px;
  display: flex; flex-direction: column; align-items: center;
}
/* desktop: bloque centrado (texto incluido), subido un pelín, estilo eslogan Bee */
@media (min-width: 761px) {
  .hero__inner { transform: translateY(-4vh); }
  .hero__title { margin-inline: auto; }
}
/* móvil: anclar el bloque entre el 1er y 2o tercio vertical (más arriba que el centro) */
@media (max-width: 760px) {
  .hero { align-items: flex-start; }
  .hero__inner { padding-block: 0; justify-content: flex-start; padding-top: 24vh; min-height: 100%; }
  /* usar la parte DERECHA de la foto (copa de tinto + botella): anclamos el borde
     derecho de la imagen al borde derecho del dispositivo y recortamos por la izquierda */
  .hero__bg { background-position: right center; }
}
.hero__eyebrow {
  display: inline-block; font-weight: 600; font-size: var(--bk2-fs-small);
  letter-spacing: .06em; text-transform: uppercase; color: var(--bk2-on-dark-soft);
  margin-bottom: 24px;
}
.hero__title {
  font-size: var(--bk2-fs-hero); max-width: 15ch; margin-bottom: 40px;
  text-wrap: balance;
}
.hero__title .accent { color: #e8a39d; } /* rojo aclarado, legible sobre oscuro */

/* ── Indicador de scroll (hero) ──────────────────────────────────────────
   Banda inferior con desenfoque progresivo (backdrop-filter + máscara en degradado:
   nítido arriba, más difuminado abajo) y una línea fina por la que baja un trazo.
   Sobrio: entra con retardo tras el titular y se va al primer scroll. */
.scroll-hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: clamp(110px, 16vh, 160px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  color: var(--bk2-on-dark-soft); text-decoration: none;
  /* OJO: NO animar opacity en este contenedor. Un ancestro con opacity < 1 crea un
     "backdrop root" y el backdrop-filter del ::before no difumina nada hasta llegar a 1:
     el texto aparecía gradualmente y el degradado saltaba de golpe al final. Por eso
     cada capa anima por separado: primero el desenfoque, luego texto + línea. */
}
.scroll-hint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 85%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 85%);
  transition: backdrop-filter .35s var(--bk2-ease), -webkit-backdrop-filter .35s var(--bk2-ease);
}
.scroll-hint__label, .scroll-hint__line {
  opacity: 0; transition: opacity .3s var(--bk2-ease), transform .3s var(--bk2-ease);
}
/* entrada (JS añade .is-on al cargar): desenfoque a 1.4s, texto + línea 150ms después */
.scroll-hint.is-on::before {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition-duration: .8s; transition-delay: 1.4s;
}
.scroll-hint.is-on .scroll-hint__label,
.scroll-hint.is-on .scroll-hint__line { opacity: 1; transition-duration: .7s; transition-delay: 1.55s; }
.scroll-hint__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.scroll-hint__line {
  position: relative; width: 1px; height: 34px; overflow: hidden;
  background: rgba(255,255,255,.22);
}
.scroll-hint__line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--bk2-on-dark);
  animation: hint-drop 1.8s var(--bk2-ease) infinite;
}
.scroll-hint:hover, .scroll-hint:focus-visible { color: var(--bk2-on-dark); }
.scroll-hint:focus-visible { outline: 2px solid var(--bk2-on-dark); outline-offset: -6px; border-radius: 8px; }
/* salida: texto + línea se van primero y el desenfoque se deshace a la vez, sin saltos */
.scroll-hint.is-gone { pointer-events: none; }
.scroll-hint.is-gone .scroll-hint__label,
.scroll-hint.is-gone .scroll-hint__line { opacity: 0; transform: translateY(8px); transition-duration: .3s; transition-delay: 0s; }
.scroll-hint.is-gone::before { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition-duration: .35s; transition-delay: 0s; }
@keyframes hint-drop { 0% { top: -40%; } 70%, 100% { top: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint.is-on::before { transition: none; }
  .scroll-hint.is-on .scroll-hint__label, .scroll-hint.is-on .scroll-hint__line { transition: none; }
  .scroll-hint__line::after { animation: none; top: 30%; }
}
.hero__buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* botones ghost sobre fondo oscuro (hero y secciones oscuras): cristal claro translúcido.
   El cierre (.section--closing) NO va aquí: sus botones se sientan sobre fondo claro
   (--bk2-bg), así que usan el estilo por defecto (cristal oscuro sobre claro). */
.hero .btn-ghost,
.section--dark .btn-ghost {
  color: var(--bk2-on-dark); border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.hero .btn-ghost:hover,
.section--dark .btn-ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.2);
}

/* ── Animación de entrada por scroll (JS añade .in) ────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--bk2-ease), transform .7s var(--bk2-ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Scroll-snap suave entre diapositivas (fallo 6) ───────────────────────
   Solo 'proximity' (nunca 'mandatory') para no pelear con el scroll-lock
   sticky de los .lockpin. Se aplica únicamente a las secciones pantalla
   completa que NO son lockpin: hero, slide 2 y cierre. Respeta reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  .hero, .section--light-feature, .section--closing { scroll-snap-align: start; }
}

/* ════════════════════ SECCIONES ════════════════════ */
.section { padding-block: clamp(48px, 7vw, 96px); position: relative; }
.section--dark { background: var(--bk2-dark); color: var(--bk2-on-dark); }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: var(--bk2-fs-small);
  letter-spacing: .06em; text-transform: uppercase; color: var(--bk2-accent); margin-bottom: 16px;
}
.section--dark .eyebrow { color: #e8a39d; }
/* eyebrow-pregunta de precios: misma tipografía del titular de sección, en rojo */
.eyebrow--q {
  display: block; font-family: var(--bk2-font); font-weight: 800; letter-spacing: -0.01em;
  text-transform: none; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--bk2-accent);
  margin-bottom: 10px;
}
.section__head { max-width: 40ch; margin-bottom: clamp(36px, 5vw, 64px); }
#precios .section__head.center { max-width: 56ch; }
.section__head.center { margin-inline: auto; text-align: center; }
.h2 { font-size: var(--bk2-fs-h2); text-wrap: balance; }
.lead { font-size: var(--bk2-fs-lead); font-weight: 500; color: var(--bk2-ink-soft); margin-top: 18px; }
.section--dark .lead { color: var(--bk2-on-dark-soft); }

/* ── SLIDE 2 · Presentamos Bakko AI (scroll-lock de frases centradas, fondo claro) ──
   Mismo motor que los lockpin: contenedor "tall" + hijo sticky 100vh. 7 pasos → altura
   calibrada (100vh del sticky + 1 tramo de scroll por paso). Fondo claro, sin foto. */
/* 8 momentos de scroll (intro, f2, pregunta, gancho, 3 colas del pivote, cierre) → altura calibrada */
/* 45vh por momento (antes 85vh): frases cortas que se leen en un segundo; con 85vh el
   recorrido total rondaba 7 pantallas y se hacía pesado (feedback de usuario 2026-10-22). */
#que-es.lockpin { height: calc(100vh + 8 * 45vh); background: var(--bk2-bg); }
.lockpin--light-feature .lockpin__sticky { background: var(--bk2-bg); justify-content: center; }
.inline-logo { height: 0.95em; width: auto; vertical-align: -0.06em; display: inline-block; }

/* SIN caja estrecha: las frases se centran y usan el ancho disponible (tope amplio para
   no pegarse a los bordes en pantallas muy anchas). Los saltos de línea los manda el
   diseño (<br> por las comas), no un max-width que estrangule el texto en vertical. */
.feature-steps {
  position: relative; width: 100%; max-width: min(90vw, 1000px); margin-inline: auto;
  padding-inline: var(--bk2-pad);
  min-height: 60vh;
  text-align: center;
}
/* cada paso se ancla al centro vertical (top 50% + translateY -50%); todos comparten el
   mismo anclaje. Tamaño de titular de sección; el intro va al tamaño del hero. */
.feature-step {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0;
  font-size: var(--bk2-fs-h2); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.18; text-wrap: balance; color: var(--bk2-ink);
  opacity: 0; transform: translateY(calc(-50% + 18px));
  transition: opacity .3s var(--bk2-ease), transform .3s var(--bk2-ease);
}
.feature-step.is-active { opacity: 1; transform: translateY(-50%); }
/* paso 1 "Presentamos...": rompedor, el grande de verdad (tamaño del hero), una línea */
.feature-step--intro { font-size: var(--bk2-fs-hero); line-height: 1.04; white-space: nowrap; }
/* logo inline un poco más grande y bajado para que case con la altura de la tipografía */
.feature-step--intro .inline-logo { height: 0.92em; vertical-align: -0.14em; }
/* pregunta puente "¿Y por qué debería importarte?": grande como el intro, negra con
   "por qué" en rojo (vía .hot) en vez de toda la frase roja. */
.feature-step--q { font-size: var(--bk2-fs-hero); line-height: 1.04; }
/* frase partida por comas: cada tramo es un bloque y el aire va ENTRE tramos, no en el
   interlineado (si un tramo ocupa 2 líneas, sus líneas siguen juntas). */
.feature-step--clauses > span { display: block; }
.feature-step--clauses > span + span { margin-top: .5em; }
/* remates en rojo del cierre */
.feature-step .hot { color: var(--bk2-accent); }

/* ── Pivote: "Pero no es por el vino," FIJO e INMUTABLE + colas rojas que rotan ──
   Es UN solo paso. La parte fija NO hace fade cuando el paso está activo: se queda
   quieta en su sitio. Solo las colas (apiladas en la misma posición) aparecen/
   desaparecen entre sí. */
.feature-pivot { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.feature-pivot .pivot-fixed { display: block; color: var(--bk2-ink); }
/* reserva el alto de ~1 línea: las colas son absolutas y si no el contenedor colapsa */
.feature-pivot .pivot-tails { position: relative; display: block; width: 100%; min-height: 1.3em; }
.feature-pivot .pivot-tail {
  display: block; position: absolute; left: 0; right: 0; top: 0; color: var(--bk2-accent);
  opacity: 0; transition: opacity .3s var(--bk2-ease);
}
.feature-pivot .pivot-tail.is-active { opacity: 1; }

/* Fallback: reduced-motion o móvil estrecho → sin lock, frases apiladas y visibles.
   El pivote se muestra con todas sus colas una debajo de otra. */
@media (prefers-reduced-motion: reduce), (max-width: 560px) {
  #que-es.lockpin { height: auto; }
  #que-es .lockpin__sticky { position: relative; height: auto; min-height: 0; padding-block: clamp(64px, 12vh, 120px); }
  #que-es .feature-steps { position: static; display: block; min-height: 0; max-width: 24ch; }
  #que-es .feature-step {
    position: static; opacity: 1; transform: none; margin-bottom: clamp(28px, 6vh, 56px);
    font-size: var(--bk2-fs-h2);
  }
  #que-es .feature-step--intro { font-size: calc(var(--bk2-fs-h2) * 1.15); white-space: normal; }
  #que-es .feature-pivot .pivot-tails { position: static; }
  #que-es .feature-pivot .pivot-tail { position: static; opacity: 1; margin-top: .2em; }
}

/* ── SLIDE 3 · Demo secuencial del ecosistema (scroll-lock, 4 pasos) ───── */
.lockpin { position: relative; }
/* 1 tramo de blur + 4 pasos → altura calibrada (un pelín más por paso, llevan imagen) */
/* 70vh por paso (antes 95vh): llevan imagen + texto, conviene algo de pausa, pero sin
   que parezca que no avanza. */
#como-funciona.lockpin { height: calc(100vh + 4 * 70vh); }
.lockpin__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
/* El blur sampleaba el blanco de fuera del contenedor y dejaba un AURA en los bordes.
   Lo evitamos agrandando el fondo más allá del sticky (inset negativo): el desenfoque
   coge siempre foto, nunca el borde. El overflow:hidden del sticky recorta el sobrante. */
.lockpin__bg {
  position: absolute; inset: -48px; background-size: cover; background-position: center;
  filter: blur(0px) brightness(1); transition: filter .1s linear;
}
.lockpin__scrim {
  position: absolute; inset: 0; background: var(--bk2-dark); opacity: 0;
  transition: opacity .1s linear;
}
.lockpin__content {
  position: relative; z-index: 2; color: var(--bk2-on-dark); width: 100%;
}

/* cada paso de la demo ocupa el mismo sitio (apilado) y aparece/desaparece con el scroll */
.demo-step {
  position: absolute; left: 0; right: 0; top: 50%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(20px, 3vw, 32px);
  opacity: 0; transform: translateY(calc(-50% + 20px)); pointer-events: none;
  transition: opacity .35s var(--bk2-ease), transform .35s var(--bk2-ease);
}
.demo-step.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
/* pregunta (grande, estilo titular) y subtítulo (grande, como la pregunta puente de slide 2) */
.demo-q { font-size: var(--bk2-fs-h2); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.demo-sub {
  font-size: var(--bk2-fs-lead); font-weight: 600; color: var(--bk2-on-dark-soft);
  max-width: 60ch; margin: 0 auto; text-wrap: balance;
}

/* tarjetas copa/botella: split horizontal 50/50 (texto izq · imagen der pegada al fondo),
   más pequeñas, sin línea divisoria. */
.duo-serve { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 900px; }
@media (max-width: 760px) { .duo-serve { grid-template-columns: 1fr; } }
.serve-card {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-radius: var(--bk2-r-l); background: var(--bk2-bg-elev); color: var(--bk2-ink);
  box-shadow: var(--bk2-shadow-lg); overflow: hidden; min-height: 160px; text-align: left;
}
.serve-card__text { padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.serve-card__text h3 { font-size: 1.35rem; margin: 0 0 6px; color: var(--bk2-ink); }
.serve-card__text p { color: var(--bk2-ink-soft); font-size: var(--bk2-fs-small); line-height: 1.4; }
/* imagen pegada al borde inferior de la tarjeta: integra el reflejo-espejo de la foto */
.serve-card__media { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.serve-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }

/* capturas del admin: sin recuadro, solo sombra (minimalista). */
.demo-shots { display: flex; gap: 20px; justify-content: center; align-items: center; width: 100%; }
.demo-shot {
  max-width: 100%; max-height: 52vh; width: auto; height: auto;
  border-radius: var(--bk2-r-m); box-shadow: var(--bk2-shadow-lg);
}
/* las dos imágenes en paralelo (horizontal) en web; en móvil → carrusel con swipe */
.demo-shots--stats .demo-shot { max-height: 46vh; }
.demo-shot--wide { max-height: 44vh; }
.demo-shot--tall { max-height: 60vh; }

@media (max-width: 760px) {
  /* carrusel con swipe: imágenes grandes (≈50% de alto de pantalla) que pueden
     salirse por los lados; el scroll-snap permite llegar a ver cada extremo
     entero (scroll-padding compensa el padding lateral del track). */
  .demo-shots--carousel {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 16px; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 16px;
    justify-content: flex-start; align-items: center;
    -webkit-overflow-scrolling: touch;
  }
  .demo-shots--carousel .demo-shot {
    flex: 0 0 auto; scroll-snap-align: start; scroll-snap-stop: always;
    max-height: 50vh; height: 50vh; width: auto; max-width: none;
  }
  /* último item: margen derecho igual al padding para que el snap final deje
     exactamente el mismo aire que el primero, en vez de cortarlo contra el borde */
  .demo-shots--carousel .demo-shot:last-child { margin-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .static-stack.lockpin, #como-funciona.static-stack.lockpin { height: auto; }
  .static-stack .lockpin__sticky { position: relative; height: auto; min-height: 100vh; }
  .static-stack .lockpin__bg { filter: none; }
  .static-stack .lockpin__scrim { opacity: .55; }
  .static-stack .lockpin__content { opacity: 1; transform: none; position: relative; padding-block: 60px; }
  /* los pasos de la demo en flujo, uno debajo de otro, todos visibles */
  .static-stack .demo-step {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    margin-bottom: clamp(48px, 10vh, 96px);
  }
}
@media (max-width: 560px) {
  .lockpin:not(.lockpin--light), #como-funciona.lockpin { height: auto; }
  .lockpin:not(.lockpin--light) .lockpin__sticky { position: relative; height: auto; min-height: 100vh; padding-block: 60px; }
  .lockpin:not(.lockpin--light) .lockpin__bg { filter: none !important; }
  .lockpin:not(.lockpin--light) .lockpin__scrim { opacity: .55 !important; }
  .lockpin:not(.lockpin--light) .lockpin__content { opacity: 1 !important; transform: none !important; position: relative; }
  /* demo slide 3: pasos apilados en flujo (no absolutos uno sobre otro) */
  #como-funciona .demo-step {
    position: static !important; opacity: 1 !important; transform: none !important;
    pointer-events: auto; margin-bottom: clamp(48px, 10vh, 80px);
  }
}

/* ── SLIDE 5 · El ciclo (foto fija encapsulada + frases secuenciales) ───
   EXCEPCIÓN a la reducción global de escala (cambio 1): esta slide y sus frases
   NO se encogen, se mantienen protagonistas a propósito. */
/* 50vh por frase (antes 70vh): frases cortas sobre la foto. */
.lockpin--light.lockpin { height: calc(100vh + 7 * 50vh); }
.lockpin--light .lockpin__sticky {
  background: var(--bk2-bg); justify-content: center;
  /* El margen a los bordes vive AQUÍ, en el contenedor fijo, no en la tarjeta: así la
     tarjeta simplemente "llena lo que queda" y escala con cualquier forma de ventana.
     Antes la tarjeta tenía ancho fijo + aspect-ratio 16/9, lo que la dejaba encapsulada
     con bandas en pantallas pequeñas/bajas y sobrecentrada en pantallas grandes. */
  padding: clamp(24px, 4vh, 56px) clamp(24px, 4vw, 72px);
}
.cycle-card {
  /* adaptativa de verdad: ocupa todo el espacio disponible del sticky (ya recortado por
     su padding) sin imponer proporción. La foto es object-fit:cover, así que la tarjeta
     puede tomar cualquier forma sin deformar la imagen. max-width/height como tope de
     comodidad en monitores enormes para que no se vuelva una pared de foto. */
  position: relative; width: 100%; height: 100%;
  max-width: 1600px; max-height: 860px; margin: auto;
  border-radius: var(--bk2-r-l); overflow: hidden; box-shadow: var(--bk2-shadow-lg);
}
.cycle-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cycle-card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bk2-dark) 65%, transparent) 100%);
}
.cycle-card__phrases {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 10%; text-align: center;
}
.cycle-card__phrases p {
  position: absolute; color: var(--bk2-on-dark); font-weight: 700;
  /* Tamaño LOCAL, independiente de --bk2-fs-h3: así esta slide no se encoge aunque el
     token se vea reducido (o se vuelva a tocar) en otra parte del CSS. */
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  opacity: 0; transform: translateY(16px);
  /* Solo transiciona la ENTRADA (fade-in): si también se animara la salida, la frase
     saliente y la entrante coexistirían semitransparentes encima la una de la otra
     durante los .25s, produciendo un solape fantasma legible en pantalla. Al salir,
     opacity cae a 0 sin transición (instantáneo) para que nunca haya dos frases a la vez. */
  transition: opacity .25s linear, transform .25s linear;
}
.cycle-card__phrases p.is-active { opacity: 1; transform: none; transition-delay: 0s; }
.cycle-card__phrases p:not(.is-active) { transition: none; }
.cycle-card__phrases p small { display: block; margin-top: 8px; font-size: .7em; font-weight: 500; opacity: .85; }
/* "¿Y cómo empezamos?" entra más fuerte (como el intro de la slide 2): primera frase
   a mayor tamaño que el resto, que se queda igual. */
.cycle-card__phrases p.cycle-card__phrases-q { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; }

/* fallback estático: SOLO reduced-motion (ya no se liga a max-width, ver móvil abajo) */
@media (prefers-reduced-motion: reduce) {
  .lockpin--light.lockpin { height: auto; }
  .lockpin--light .lockpin__sticky { position: relative; height: auto; min-height: 0; padding-block: 60px; }
  .cycle-card { width: 100%; height: auto; max-height: none; box-shadow: none; }
  .cycle-card__phrases { position: static; display: block; padding: 24px 16px; }
  .cycle-card__phrases p { position: static; opacity: 1; transform: none; margin-bottom: 18px; }
}
/* móvil: el scroll-lock SIGUE activo, pero en formato vertical/retrato — recorte de
   los 2/3 izquierdos de sumiller-grupo.png vía object-position, foto fija hasta
   recorrer las 7 frases. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .lockpin--light.lockpin { height: calc(100vh + 7 * 45vh); }
  .lockpin--light .lockpin__sticky { height: 100vh; min-height: 100vh; padding: 16px; }
  /* misma filosofía en móvil: la tarjeta llena el viewport retrato menos un margen,
     sin aspect-ratio fijo que la deje baja y centrada con aire. */
  .cycle-card { width: 100%; height: 100%; max-width: none; max-height: none; }
  .cycle-card__img { object-position: left center; }
}

/* ── SECCIÓN 6 · Pricing ─────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin-inline: auto; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--bk2-bg-elev); border: 1px solid var(--bk2-line); border-radius: var(--bk2-r-l);
  padding: 24px; box-shadow: var(--bk2-shadow); display: flex; flex-direction: column; }
.plan.featured { border-color: var(--bk2-accent); box-shadow: 0 0 0 2px var(--bk2-accent-soft), var(--bk2-shadow-lg); position: relative; }
.plan__badge { position: absolute; top: -13px; left: 24px; background: var(--bk2-accent); color: #fff;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--bk2-r-pill); }
.plan__name { font-weight: 700; color: var(--bk2-ink-soft); }
.plan__price { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 2px; }
.plan__price small { font-size: .9rem; font-weight: 600; color: var(--bk2-ink-faint); }
.plan__save { color: var(--bk2-ok); font-weight: 700; font-size: var(--bk2-fs-small); }
.plan__feats { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan__feats li { display: flex; gap: 10px; color: var(--bk2-ink-soft); }
.plan__feats li::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px;
  background: var(--bk2-accent-soft); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan__feats li.on::before { background: var(--bk2-accent); }
/* feature NO incluida: misma pastilla, icono de X (en vez de check) y en tono apagado
   para que lea como "ausente" sin gritar. */
.plan__feats li.off { color: var(--bk2-ink-faint); }
.plan__feats li.off::before {
  background: var(--bk2-ink-faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3L16.9 4.3z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3L16.9 4.3z'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* notas al pie de los precios (* y **): letra ligera y tenue, formato de nota legal. */
.plans__notes { max-width: 760px; margin: 18px auto 0; }
.plans__notes p { color: var(--bk2-ink-faint); font-size: var(--bk2-fs-small); font-weight: 400; line-height: 1.45; margin: 4px 0 0; }

/* ── Precios + cierre fusionados en una única slide (#precios) ─────────── */
/* Ya no hay asset de fondo que empalmar (bakko-final-background.png se retira):
   toda la slide usa el mismo --bk2-bg, sin escalón de color entre precios y cierre. */
#precios { background: var(--bk2-bg); }
.section--closing {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100vh; min-height: 100svh; padding-block: clamp(48px, 7vw, 96px) 0;
}
/* espacios doblados a propósito para aislar la frase de cierre + los botones del resto:
   arriba (separa de las tarjetas de precio) y abajo (separa del footer negro). */
.closing__slogan { text-align: center; padding-block: clamp(48px, 8vw, 88px); }
.closing__cta {
  color: var(--bk2-ink); font-size: var(--bk2-fs-h2); font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 20px; text-wrap: balance; max-width: 32ch; margin-inline: auto;
}
/* tercio inferior: rectángulo negro plano de lado a lado, sin ola ni degradado */
.closing__footer {
  background: var(--bk2-dark); color: var(--bk2-on-dark);
  /* altura reducida a la mitad: antes padding clamp(28,5vw,44) + min-height 26vh */
  padding-block: clamp(14px, 2.5vw, 22px); min-height: 13vh;
  display: flex; align-items: center;
}
.closing__footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.closing__logo { height: 24px; margin: 0 auto 16px; }
.closing__legal { color: var(--bk2-on-dark-soft); font-size: var(--bk2-fs-small); }
.closing__legal a { text-decoration: underline; }

/* CTA band reutilizable */
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ════════════ MODAL DE AUTH (registro / login) sobre la landing ════════════ */
/* No es una página: se proyecta sobre la landing con el fondo difuminado. */
.auth-ov {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(14,10,9,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--bk2-ease), visibility .3s;
}
.auth-ov.open { opacity: 1; visibility: visible; }
.auth-modal {
  width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--bk2-bg-elev); border: 1px solid var(--bk2-line); border-radius: var(--bk2-r-l);
  box-shadow: var(--bk2-shadow-lg); padding: clamp(26px, 5vw, 40px); position: relative;
  transform: translateY(16px) scale(.98); transition: transform .32s var(--bk2-ease);
}
.auth-ov.open .auth-modal { transform: none; }
.auth-modal__close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; z-index: 1;
  border: 1px solid var(--bk2-line); background: var(--bk2-bg); color: var(--bk2-ink-soft);
  cursor: pointer; font-size: 1rem; display: grid; place-items: center;
}
.auth-modal__close:hover { color: var(--bk2-ink); border-color: var(--bk2-ink); }
.auth-modal h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; padding-right: 44px; }
.auth-modal .sub { color: var(--bk2-ink-soft); margin: 0 0 24px; font-size: .95rem; }

.auth-modal .field { margin-bottom: 15px; }
.auth-modal .field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 7px; color: var(--bk2-ink-soft); }
.auth-modal .field input {
  width: 100%; font: inherit; padding: 12px 14px; border-radius: var(--bk2-r-s);
  border: 1.5px solid var(--bk2-line); background: var(--bk2-bg-sunken); color: var(--bk2-ink); outline: none;
  transition: border-color .18s, background .18s;
}
.auth-modal .field input:focus { border-color: var(--bk2-accent); background: var(--bk2-bg-elev); }
.auth-modal .btn-block { width: 100%; margin-top: 4px; }

/* foco visible en botones/enlaces del modal (los inputs ya marcan foco con el borde) */
.auth-modal :focus-visible { outline: 2px solid var(--bk2-accent); outline-offset: 2px; }
.auth-modal h1:focus { outline: none; }
.auth-eyebrow { display: inline-block; margin-bottom: 10px; padding: 4px 11px; border-radius: var(--bk2-r-pill);
  background: var(--bk2-accent-soft); color: var(--bk2-accent-deep);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

/* bullets del modal de demo: mismo lenguaje que las tarjetas de precio (pastilla con check) */
.auth-modal .auth-feats { margin: -6px 0 22px; gap: 7px; }
.auth-modal .auth-feats li { font-size: .95rem; }

/* error inline junto al campo */
.auth-modal .field__err { margin: 6px 0 0; color: var(--bk2-danger); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.auth-modal .field.is-invalid input,
.auth-modal .field.is-invalid .tel__prefix { border-color: var(--bk2-danger); }

/* teléfono con prefijo +34 fijo (no editable) pegado al input */
.tel { display: flex; align-items: stretch; }
.tel__prefix { display: flex; align-items: center; padding: 0 12px; flex: 0 0 auto;
  border: 1.5px solid var(--bk2-line); border-right: 0; border-radius: var(--bk2-r-s) 0 0 var(--bk2-r-s);
  background: var(--bk2-bg); color: var(--bk2-ink-soft); font-weight: 700; transition: border-color .18s; }
.auth-modal .tel input { min-width: 0; border-radius: 0 var(--bk2-r-s) var(--bk2-r-s) 0; }
.tel:focus-within .tel__prefix { border-color: var(--bk2-accent); }

/* ── Suscripción paso 1 · tarjetas de plan seleccionables (radio-cards) ──
   El radio va oculto pero enfocable; su label tiene un ::after que cubre toda la tarjeta,
   así cualquier clic en ella selecciona el plan. Estado y foco se pintan sobre ese ::after. */
.plan-pick { display: flex; flex-direction: column; gap: 12px; }
.plan-opt { position: relative; padding: 16px 18px; border-radius: var(--bk2-r-m);
  background: var(--bk2-bg-elev); border: 1px solid var(--bk2-line); }
.plan-opt__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.plan-opt__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; cursor: pointer; }
.plan-opt__head::after { content: ""; position: absolute; inset: -1px; border-radius: var(--bk2-r-m);
  border: 1.5px solid transparent; transition: border-color .18s, box-shadow .18s; }
.plan-opt__radio:checked ~ .plan-opt__head::after { border-color: var(--bk2-accent); box-shadow: 0 0 0 3px var(--bk2-accent-soft); }
.plan-opt__radio:focus-visible ~ .plan-opt__head::after { outline: 2px solid var(--bk2-accent); outline-offset: 3px; }
.plan-opt__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--bk2-ink-faint);
  display: grid; place-items: center; transition: border-color .18s; }
.plan-opt__dot::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bk2-accent);
  transform: scale(0); transition: transform .18s var(--bk2-ease); }
.plan-opt__radio:checked ~ .plan-opt__head .plan-opt__dot { border-color: var(--bk2-accent); }
.plan-opt__radio:checked ~ .plan-opt__head .plan-opt__dot::before { transform: scale(1); }
.plan-opt__name { font-weight: 800; color: var(--bk2-ink); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.plan-opt__price { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.plan-opt__price small { font-size: .78rem; font-weight: 600; color: var(--bk2-ink-faint); }
.plan-opt .save { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: var(--bk2-accent); color: #fff; padding: 3px 8px; border-radius: var(--bk2-r-pill); }
.auth-modal .plan-opt__feats { margin: 12px 0 0 30px; gap: 5px; }
.auth-modal .plan-opt__feats li { font-size: .88rem; line-height: 1.4; }
.auth-modal .plan-opt__feats li::before { margin-top: 1px; }
.auth-modal .plan-opt__feats li.plan-opt__save { color: var(--bk2-ok); font-weight: 700; }
.auth-modal .plan-opt__feats li.plan-opt__save::before { background: var(--bk2-ok); }
/* ink-soft (no ink-faint): es la letra pequeña de la condición comercial (199€), necesita AA */
.plan-pick__note { margin: 12px 0 18px; color: var(--bk2-ink-soft); font-size: .8rem; line-height: 1.45; }

/* ── Suscripción paso 2 · resumen del plan elegido ── */
.plan-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -8px 0 20px; padding: 10px 8px 10px 16px; border-radius: var(--bk2-r-m);
  background: var(--bk2-bg-sunken); border: 1px solid var(--bk2-line); }
.plan-sum__info { display: flex; flex-direction: column; min-width: 0; }
.plan-sum__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--bk2-ink-faint); }
.plan-sum__name { font-weight: 800; }
.plan-sum__name small { margin-left: 4px; font-size: .8rem; font-weight: 600; color: var(--bk2-ink-faint); }
.link-btn { flex: 0 0 auto; min-height: 44px; padding: 0 10px; border: 0; background: none; font: inherit;
  font-size: .9rem; font-weight: 700; color: var(--bk2-accent); cursor: pointer; border-radius: var(--bk2-r-s); }
.link-btn:hover { color: var(--bk2-accent-deep); text-decoration: underline; }

/* ── Demo · confirmación ── */
.auth-done { text-align: center; }
.auth-done h1 { padding-right: 0; }
.auth-done__mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 8px auto 16px;
  border-radius: 50%; background: var(--bk2-accent-soft); }
.auth-done__mark::before { content: ""; width: 26px; height: 26px; background: var(--bk2-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.auth-done .sub strong { color: var(--bk2-ink); overflow-wrap: anywhere; }

.auth-modal .demo-hint { margin-top: 14px; padding: 11px 14px; border-radius: var(--bk2-r-m);
  background: var(--bk2-accent-soft); color: var(--bk2-accent-deep); font-size: .84rem; font-weight: 600; text-align: center; }
.auth-modal .alt { margin-top: 10px; text-align: center; color: var(--bk2-ink-soft); font-size: .9rem; }
/* enlaces del pie con área táctil de 44px */
.auth-modal .alt a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--bk2-accent); font-weight: 700; cursor: pointer; border-radius: var(--bk2-r-s); }

/* vistas y pasos: solo se ve el activo; entrada suave al cambiar */
.auth-pane, .auth-step { display: none; }
.auth-pane.on, .auth-step.on { display: block; }
.auth-pane.on { animation: auth-fade .24s var(--bk2-ease) both; }
.auth-step.on { animation: auth-step-in .3s var(--bk2-ease) both; }
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-pane.on, .auth-step.on { animation: none; }
  .auth-ov, .auth-modal, .plan-opt__head::after, .plan-opt__dot::before { transition: none; }
}

/* ── Captación (lista de espera / solicitud de demo) ── */
.auth-modal .check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; line-height: 1.4; color: var(--bk2-ink-soft); cursor: pointer; }
.auth-modal .check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--bk2-accent); cursor: pointer; }
.auth-modal .field--check { margin-top: 4px; }
.auth-modal .field.is-invalid .check { color: var(--bk2-danger); }
.auth-modal .opt { font-weight: 500; color: var(--bk2-ink-faint, #8a8480); }
/* campo trampa para bots: fuera de pantalla, nunca visible ni enfocable */
.auth-modal .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-modal .form-err { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--bk2-r-m); background: #fdecea; color: #8b1d16;
  font-size: .86rem; font-weight: 600; line-height: 1.4; }
.auth-modal .btn[disabled] { opacity: .6; cursor: progress; }
.auth-modal .wl-note { margin: 12px 0 0; padding: 11px 14px; border-radius: var(--bk2-r-m); background: var(--bk2-accent-soft);
  color: var(--bk2-accent-deep); font-size: .86rem; line-height: 1.45; }
.auth-modal .wl-note strong { font-weight: 800; }
.wl-landing { margin: 16px auto 0; max-width: 560px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28); font-size: .95rem; line-height: 1.45; }
.wl-landing strong { font-weight: 800; }
.auth-modal .auth-done .btn { text-decoration: none; }