/* ─────────────────────────────────────────────────────────────
   AgenteBnb · La portada (/ y /landing; antes /landing2) · «La oficina»
   Móvil primero (360–414 px).

   Detrás de la página vive una oficina en 3D, fija. Las secciones
   «ventana» (.l2-win: portada, los cuatro trabajadores y el cierre) son
   transparentes y la dejan ver; el resto la tapa con su fondo. Sin
   WebGL se ven los mismos dibujos en plano (.l2-plano).

   Paleta = la del logotipo y la app (favicon.svg, logo-social.svg,
   landing-redesigned.css, services/agents_catalog.py). No hay naranja:
   tinta + papel, y el terracota solo como el punto del logo (acentos).
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  /* Marca: tinta y papel (fondo del logo #0a0a0a, letra #fff) */
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --ink-3: #525252;
  --ink-4: #6f6f6f;
  --paper: #ffffff;
  /* Papel crema cálido (estilo libro ilustrado): sigue siendo «blanco»,
     pero con la luz de una lámpara, no de un fluorescente. */
  --paper-2: #fbf8f2;
  --paper-3: #f5efe5;
  --cream: #fffaf1;
  --line: #ece5d9;
  --line-2: #dcd3c4;
  /* El punto del logotipo: acento, nunca superficie grande */
  --accent: #d24a1f;
  --accent-h: #b53e18;
  --accent-soft: #fde8df;
  --good: #1f7a4d;
  --crit: #b3261e;
  /* Los cuatro trabajadores (agents_catalog.AGENT_COLORS) */
  --ag-coordinador: #3b82f6;
  --ag-recepcionista: #d24a1f;
  --ag-asistente: #7c3aed;
  --ag-anfitrion: #1f7a4d;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 16px;
  /* Ronda 9 (iPhone en horizontal): con viewport-fit=cover la página llega
     hasta la muesca; el margen lateral nunca es menor que la zona segura. */
  --gutter: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --nav-h: 60px;
  --shadow-card: 0 1px 0 rgba(10,10,10,.04), 0 18px 50px -24px rgba(10,10,10,.28);
  /* Grano de papel: ruido procedural en SVG (sin descargas), motas pardas
     muy suaves. Una sola capa fija encima de todo, como la hoja. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .17 .5 0 0 0 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Ronda 12 · letra de reserva con las MISMAS medidas que Geist e Instrument
   Serif (anchura y altura medidas en Chrome con su texto real). Si la letra
   tarda o no llega, los titulares parten las líneas igual y la página no
   salta al llegar. local(): no se descarga nada. */
@font-face { font-family: 'Geist Fallback'; font-weight: 100 449; src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 101.4%; ascent-override: 99.1%; descent-override: 29.1%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Fallback'; font-weight: 450 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  size-adjust: 98.3%; ascent-override: 102.2%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: 'Instrument Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic');
  size-adjust: 88.65%; ascent-override: 111.7%; descent-override: 35%; line-gap-override: 0%; }

html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* 1rem = 16 px de siempre, pero respeta la letra grande del navegador */
  font-size: 1rem; line-height: 1.55; color: var(--ink);
  background: var(--paper-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
em { font-family: 'Instrument Serif', 'Instrument Fallback', 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--accent); }

.l2-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.l2-wrap--narrow { max-width: 760px; }

.l2-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--paper); padding: .5rem .8rem; border-radius: 8px; }
.l2-skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ── La oficina (capa fija detrás de todo) ── */
.l2-oficina {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 80% at 62% 38%, var(--cream) 0%, var(--paper-2) 50%, #f1e8da 100%);
}
/* La hoja: grano de papel por encima de todo (texto, tarjetas y oficina),
   sin capturar el dedo. Una capa fija = la GPU la compone, no la repinta. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 45; pointer-events: none;
  background-image: var(--grano); background-size: 180px 180px;
}
/* Alto FIJO al alto grande de la pantalla (lvh): cuando la barra del
   navegador del móvil aparece o se esconde al hacer scroll, la capa no cambia
   de tamaño, el lienzo no se re-mide y la escena no pega un brinco. */
@supports (height: 100lvh) { .l2-oficina { bottom: auto; height: 100lvh; } }
.l2-oficina.is-off { visibility: hidden; }
/* Canto de acuarela: la ilustración no acaba en un corte recto, se deshace
   en el papel con un borde irregular (máscara SVG con turbulencia, hecha una
   vez; el lienzo no paga nada por fotograma salvo la composición). */
.l2-oficina__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease-out);
  --canto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3Crect x='3' y='1' width='94' height='98' rx='4' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--canto); mask-image: var(--canto);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.is-3d .l2-oficina__canvas { opacity: 1; }
/* En escritorio la maqueta se funde con el papel por los bordes (viñeta):
   lo que queda cortado en el marco no se ve «recortado», se desvanece. */
@media (min-width: 960px) {
  .l2-oficina__canvas {
    -webkit-mask-image: var(--canto), radial-gradient(ellipse 54% 66% at 67% 54%, #000 64%, rgba(0,0,0,0) 100%);
            mask-image: var(--canto), radial-gradient(ellipse 54% 66% at 67% 54%, #000 64%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
main, .l2-foot { position: relative; z-index: 1; }
.l2-nav { z-index: 50; }

/* Etiqueta que sale al tocar a un trabajador */
.l2-tip {
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  display: flex; flex-direction: column; gap: .1rem; max-width: 240px;
  padding: .55rem .8rem .6rem; border-radius: 14px;
  background: rgba(255,251,243,.95); box-shadow: 0 10px 30px -12px rgba(10,10,10,.35), 0 0 0 1px rgba(120,90,50,.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .82rem; line-height: 1.3; color: var(--ink-3);
  opacity: 0; scale: .9; transform: translate(-50%, -100%); transform-origin: 0 0;
  transition: opacity .18s ease, scale .45s cubic-bezier(.34,1.56,.64,1); will-change: transform;
}
.l2-tip b { color: var(--ag, var(--ink)); font-size: .9rem; }
.l2-tip.is-on { opacity: 1; scale: 1; }

/* ── Botones: tinta como el logotipo ── */
.l2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 48px; padding: 0 1.3rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color .2s ease, transform .2s var(--ease-out), border-color .2s ease;
  user-select: none; -webkit-user-select: none;
}
.l2-btn:active { transform: scale(.97); transition-duration: .08s; }
.l2-btn > span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .l2-btn:hover > span[aria-hidden] { transform: translateX(3px); }
  .l2-plan, .l2-card { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
  .l2-plan:hover, .l2-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(10,10,10,.35); border-color: var(--line-2); }
  .l2-plan--star:hover { border-color: var(--ink); }
  .l2-faq summary:hover::after { color: var(--ink); }
}
@media (hover: hover) { .l2-btn:hover { background: #2a2a2a; } }
.l2-btn--sm { min-height: 40px; padding: 0 1rem; font-size: .9rem; }
.l2-btn--lg { min-height: 52px; }
.l2-btn--ghost, .l2-btn--ghost-dark { background: rgba(255,255,255,.7); color: var(--ink); border-color: var(--line-2); }
@media (hover: hover) { .l2-btn--ghost:hover, .l2-btn--ghost-dark:hover { background: var(--paper); border-color: #bfb9ae; } }

/* ── Cabecera ── */
.l2-nav {
  position: fixed; inset: 0 0 auto 0;
  /* el alto INCLUYE la zona segura de arriba (app en la pantalla de inicio):
     con box-sizing border-box, si no, la barra se comía el relleno y los
     botones se salían por debajo de su fondo */
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.l2-nav.is-solid, .l2-nav {
  background: rgba(251,248,242,.72);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
}
/* .95: si el desenfoque no se pinta (iPhone con «Reducir transparencia»,
   capturas de WebKit), el texto que pasa por debajo no se lee a través. */
.l2-nav.is-solid { background: rgba(251,248,242,.95); box-shadow: 0 1px 0 rgba(10,10,10,.06); }
.l2-nav__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.l2-logo { display: inline-flex; align-items: center; text-decoration: none; }
.l2-logo img { height: 30px; width: auto; }
.l2-nav__links { display: none; gap: 1.6rem; font-size: .92rem; }
.l2-nav__links a { text-decoration: none; color: var(--ink-3); }
.l2-nav__links a:hover { color: var(--ink); }
.l2-nav__cta { display: flex; align-items: center; gap: .9rem; }
.l2-nav__login { font-size: .92rem; text-decoration: none; color: var(--ink-3); }
@media (min-width: 55em) { .l2-nav__links { display: flex; } }


/* ── Etiquetas y títulos ── */
.l2-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.l2-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
/* Ronda 12: los anchos de texto iban en «ch» (el ancho del «0» de la letra).
   El «0» de Geist es un 20 % más ancho que el de la letra de reserva, así que
   mientras llegaba la letra los titulares se partían en más líneas y la página
   saltaba. Mismos anchos, en «em» (22ch = 15,026em en Geist 600; 1ch = ,663em a 400). */
.l2-h2 { font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.032em; font-weight: 550; margin: 0 0 1rem; max-width: 15.026em; text-wrap: balance; }
/* Sin viudas: ninguna línea final con una palabra sola */
p, h3, li, summary { text-wrap: pretty; }
.l2-h2 em { font-size: 1.06em; }
.l2-sub { color: var(--ink-3); margin: 0 0 1.8rem; max-width: 37.128em; }

/* ── Portada ── */
.l2-hero { position: relative; padding-top: calc(var(--nav-h) + env(safe-area-inset-top)); }
.l2-hero__stage { position: relative; height: clamp(300px, 50svh, 470px); overflow: hidden; }
.l2-hero__copy {
  position: relative; z-index: 1; padding-top: 1.6rem; padding-bottom: 3.2rem;
  background: linear-gradient(to bottom, rgba(251,248,242,0), var(--paper-2) 1.4rem);
}
.l2-hero__title {
  font-size: clamp(2.2rem, 9.6vw, 4.4rem); line-height: 1.04; letter-spacing: -.035em;
  font-weight: 600; margin: 0 0 1rem; max-width: 10.245em; text-wrap: balance;
}
.l2-hero__title em { font-size: 1.08em; }
.l2-hero__lead { color: var(--ink-3); font-size: 1.06rem; margin: 0 0 1.6rem; max-width: 29.172em; }
.l2-hero__lead strong { color: var(--ink); font-weight: 600; }
.l2-hero__ctas { display: flex; flex-direction: column; gap: .7rem; }
.l2-hero__micro { margin: 1rem 0 0; font-size: .84rem; color: var(--ink-4); }

@media (min-width: 560px) {
  .l2-hero__ctas { flex-direction: row; flex-wrap: wrap; }
}
/* Entrada de la portada, en cascada corta (Apple: 60–80 ms por escalón).
   El titular solo se desliza — nunca empieza invisible, porque es lo
   primero que se pinta (LCP) y no queremos retrasarlo. */
@keyframes l2-sube { from { transform: translateY(14px); } to { transform: none; } }
@keyframes l2-aparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .l2-hero__title { animation: l2-sube .9s var(--ease-out) both; }
.js .l2-hero__copy .l2-eyebrow { animation: l2-aparece .7s var(--ease-out) both; }
.js .l2-hero__lead { animation: l2-aparece .8s var(--ease-out) .08s both; }
.js .l2-hero__ctas { animation: l2-aparece .8s var(--ease-out) .16s both; }
.js .l2-hero__micro { animation: l2-aparece .8s var(--ease-out) .24s both; }
@media (min-width: 960px) {
  .l2-hero {
    min-height: min(100svh, 900px); display: grid; align-items: center;
    /* velo de papel a la izquierda: el texto se lee y la oficina respira */
    background: linear-gradient(90deg, var(--paper-2) 0, rgba(251,248,242,.92) 30%, rgba(251,248,242,0) 50%);
  }
  .l2-hero__stage { position: absolute; inset: var(--nav-h) 0 0 44%; height: auto; }
  .l2-hero__copy { background: none; padding-top: 2rem; padding-bottom: 4rem; }
  .l2-hero__copy > * { max-width: 520px; }
}

/* ── Versión plana (sin 3D): los mismos dibujos con su tarea ── */
.l2-plano { position: absolute; inset: 6% 0 14%; display: flex; align-items: flex-end; justify-content: center; gap: 2%; padding: 0 var(--gutter); }
.l2-plano__suelo { position: absolute; left: 6%; right: 6%; bottom: -4%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10,10,10,.08), rgba(10,10,10,0)); }
.l2-plano__ag { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; height: 44%; flex: 0 1 auto; }
.l2-plano__ag--tall { height: 60%; }
@media (min-width: 560px) { .l2-plano__ag { height: 64%; } .l2-plano__ag--tall { height: 88%; } }
/* Escritorio sin 3D: que quepan los cuatro enteros (antes salían cortados) */
@media (min-width: 960px) {
  .l2-hero__fallback { inset: 14% 4% 18%; gap: 3%; }
  .l2-hero__fallback .l2-plano__ag { height: 52%; }
  .l2-hero__fallback .l2-plano__ag--tall { height: 74%; }
}
.l2-plano__ag img { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px rgba(10,10,10,.12)); }
.l2-plano__ag::before { /* alfombra con el color del trabajador */
  content: ""; position: absolute; left: -12%; right: -12%; bottom: -5%; height: 16%; border-radius: 50%; background: var(--ag-soft); z-index: -1;
  /* el pastel vivo de la oficina 3D: el color del trabajador sobre crema */
  background: color-mix(in oklab, var(--ag) 34%, #fffaf1);
}
.l2-plano__task {
  position: absolute; bottom: 102%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: .7rem; font-weight: 600; color: #fff; background: var(--ag); padding: .2rem .55rem; border-radius: 99px;
  box-shadow: 0 6px 14px -8px rgba(10,10,10,.5);
}
.js .l2-plano__ag { animation: l2-respira 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.js .l2-plano__ag:nth-child(3) { animation-delay: -.9s; }
.js .l2-plano__ag:nth-child(4) { animation-delay: -1.8s; }
.js .l2-plano__ag:nth-child(5) { animation-delay: -2.7s; }
@keyframes l2-respira { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.015); } }
.is-3d .l2-plano, .is-3d .l2-ch__plano, .is-3d .l2-final__plano { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
@media (max-width: 420px) { .l2-plano__task { font-size: .62rem; } }

/* ── Caso real: banda de tinta (como el fondo del logotipo) ── */
.l2-proof { background: var(--ink); color: #f4f3f0; padding: 2.6rem 0 2.8rem; }
.l2-proof__kicker { margin: 0 0 1.4rem; font-size: .88rem; color: #b8b4ad; }
.l2-proof__grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.l2-stat { display: flex; align-items: baseline; gap: .9rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1rem; }
.l2-stat__n { font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 600; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; min-width: 4.2ch; line-height: 1; }
.l2-stat__l { font-size: .95rem; color: #b8b4ad; }
.l2-proof__foot { margin: 1.4rem 0 0; font-size: .8rem; color: #8f8a83; }
@media (min-width: 760px) {
  .l2-proof__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .l2-stat { flex-direction: column; gap: .5rem; }
}

/* ── Secciones opacas ── */
.l2-sec { padding: 4.5rem 0; background: var(--paper-2); }
.l2-sec--soft { background: var(--paper-3); }
@media (min-width: 960px) { .l2-sec { padding: 7rem 0; } }

.l2-pain { display: grid; gap: 1rem; margin-top: 2rem; }
.l2-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.3rem; }
.l2-card__n { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .78rem; color: var(--accent); }
.l2-card h3 { font-size: 1.12rem; line-height: 1.3; margin: .5rem 0 .5rem; letter-spacing: -.01em; }
.l2-card p { margin: 0; color: var(--ink-3); font-size: .96rem; }
@media (min-width: 860px) { .l2-pain { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }

.l2-tag { display: inline-block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: rgba(255,255,255,.5); border: 1px solid var(--line-2); border-radius: 99px; padding: .16rem .7rem; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }

/* ── El equipo: paseo por la oficina ── */
.l2-team-intro { padding-bottom: 2.5rem; position: relative; }
/* Bordes blandos entre papel y oficina: la sección opaca se deshace en un
   degradado en vez de cortar la maqueta con una línea recta. */
.l2-team-intro::after, .l2-tour + .l2-sec::before, #faq::after {
  content: ""; position: absolute; left: 0; right: 0; height: 96px; pointer-events: none;
}
.l2-team-intro::after { top: 100%; background: linear-gradient(var(--paper-2), rgba(251,248,242,0)); }
.l2-tour + .l2-sec { position: relative; }
.l2-tour + .l2-sec::before { bottom: 100%; background: linear-gradient(rgba(251,248,242,0), var(--paper-2)); }
#faq { position: relative; }
#faq::after { top: 100%; background: linear-gradient(var(--paper-2), rgba(251,248,242,0)); }
.l2-team-intro__hint { margin-bottom: 0; }
@media (min-width: 960px) { .l2-team-intro { padding-bottom: 3rem; } }

/* Abajo deja sitio al botón fijo del móvil: la ficha nunca queda debajo. */
.l2-ch { position: relative; min-height: 104svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(2svh + 88px + env(safe-area-inset-bottom)); }
.l2-ch__scene { position: absolute; inset: 0 0 auto 0; height: 58svh; overflow: hidden; }
.l2-ch__plano { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 8%; height: 50%; }
.l2-ch__plano.l2-plano__ag--tall { height: 68%; }
.l2-ch__plano img { height: 100%; }
.l2-ch__wrap { position: relative; }
.l2-ch__card {
  /* Ficha de papel crema translúcido sobre la ilustración (como en las
     referencias): luz cálida arriba, un velo del color del trabajador
     abajo y canto fino de lápiz. El grano lo pone la hoja (body::after). */
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    /* (medido contra las referencias: crema algo más claro, #faf2e5) */
    linear-gradient(180deg, rgba(255,252,245,.94), color-mix(in oklab, var(--ag-soft) 16%, rgba(253,247,236,.95)));
  border-radius: 26px; padding: 1.45rem 1.35rem 1.3rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 4px rgba(90,64,40,.05), 0 24px 56px -28px rgba(70,48,30,.38);
  border: 1px solid rgba(120,90,50,.13);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.l2-ch__top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .65rem; margin-bottom: .7rem; }
.l2-ch__top::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 99px; background: var(--ag); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ag) 18%, transparent); }
.l2-ch__top h3 { margin: 0; font-size: 1.42rem; letter-spacing: -.022em; font-weight: 650; }
.l2-ch__line { font-size: 1.14rem; line-height: 1.35; font-weight: 600; letter-spacing: -.008em; margin: 0 0 .45rem; color: var(--ink); }
.l2-ch__line em { color: var(--ag); font-size: 1.12em; }
.l2-ch__card p { margin: 0; color: var(--ink-3); font-size: 1rem; line-height: 1.58; }
.l2-ch__card p.l2-ch__line { color: var(--ink); }
.l2-ch__card p.l2-ch__now {
  margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(120,90,50,.14);
  display: flex; gap: .6rem; align-items: baseline; font-size: .92rem; line-height: 1.45; color: var(--ink-2);
}
.l2-ch__now span { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--ag); transform: translateY(-1px); }
.js .l2-ch__now span { animation: l2-latido 2.4s ease-in-out infinite; }
@keyframes l2-latido { 0%, 100% { box-shadow: 0 0 0 0 var(--ag-soft); } 50% { box-shadow: 0 0 0 5px var(--ag-soft); } }

@media (min-width: 960px) {
  .l2-ch { min-height: 100svh; justify-content: center; padding-bottom: 0; }
  .l2-ch__scene { inset: 0 0 0 44%; height: auto; }
  .l2-ch__plano { bottom: 18%; height: 52%; }
  .l2-ch__plano.l2-plano__ag--tall { height: 68%; }
  .l2-ch__card { max-width: 452px; padding: 1.8rem 1.7rem 1.6rem; }
}

/* ── Cómo funciona ── */
.l2-how { display: grid; gap: 2.4rem; }
.l2-steps { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.4rem; }
.l2-steps li { display: flex; gap: 1rem; }
.l2-steps li > span { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--paper-3); border: 1px solid var(--line); color: var(--ink); font-family: 'Geist Mono', ui-monospace, monospace; font-size: .85rem; display: grid; place-items: center; }
.l2-steps h3 { margin: .35rem 0 .3rem; font-size: 1.08rem; }
.l2-steps p { margin: 0; color: var(--ink-3); font-size: .96rem; }
@media (min-width: 960px) { .l2-how { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; } }

.l2-chat { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1rem; box-shadow: var(--shadow-card); }
.l2-chat__bar { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--ink-3); padding: .2rem .3rem .8rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; }
.l2-live { display: inline-flex; align-items: center; gap: .4rem; color: var(--good); font-weight: 500; }
.l2-live span { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.l2-msg { font-size: .93rem; line-height: 1.45; padding: .75rem .9rem; border-radius: 14px; margin-bottom: .7rem; max-width: 92%; }
.l2-msg small { display: block; font-size: .72rem; color: var(--ink-4); margin-bottom: .25rem; }
.l2-msg--in { background: var(--paper-2); border: 1px solid var(--line); }
.l2-msg--out { background: var(--ink); margin-left: auto; color: #fff; }
.l2-msg--out small { color: #b8b4ad; }
.l2-chat__tag { margin: .3rem 0 0; font-size: .78rem; color: var(--good); text-align: right; }

/* ── Precios ── */
.l2-plans { display: grid; gap: 1rem; }
.l2-plan { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 1.3rem; display: flex; flex-direction: column; }
.l2-plan h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.l2-plan__price { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.l2-plan__price b { font-size: 2.4rem; letter-spacing: -.03em; font-weight: 600; }
.l2-plan__price span { color: var(--ink-3); font-size: .9rem; }
.l2-plan__for { margin: .3rem 0 1rem; font-size: .9rem; color: var(--ink-3); }
.l2-plan ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; font-size: .95rem; flex: 1; }
.l2-plan li { padding-left: 1.5rem; position: relative; }
.l2-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.l2-plan .l2-btn { width: 100%; }
.l2-plan--star { border: 2px solid var(--ink); box-shadow: 0 30px 60px -36px rgba(10,10,10,.45); }
.l2-plan__badge { position: absolute; top: -12px; left: 1.3rem; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 600; padding: .25rem .7rem; border-radius: 99px; }
.l2-plan__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); margin-right: .4rem; transform: translateY(-1px); }
.l2-plans__note { margin: 1.4rem 0 0; font-size: .9rem; color: var(--ink-3); }
.l2-plans__note a { color: var(--ink); }
@media (min-width: 900px) { .l2-plans { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; } }

/* ── Preguntas ── */
.l2-faq { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.l2-faq details { border-bottom: 1px solid var(--line); }
.l2-faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-weight: 550; font-size: 1.02rem; min-height: 48px;
}
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; color: var(--ink-4); transition: transform .2s ease; }
.l2-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.l2-faq details p { margin: 0 0 1.2rem; color: var(--ink-3); font-size: .97rem; }
.l2-faq a { color: var(--ink); }

/* ── Cierre: el dueño duerme al lado de la oficina ── */
.l2-final { position: relative; min-height: 104svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 7svh; }
.l2-final__scene { position: absolute; inset: 0 0 auto 0; height: 58svh; overflow: hidden; }
.l2-final__plano { position: absolute; inset: 0; display: grid; place-items: center; }
.l2-final__plano { align-content: center; justify-items: center; gap: 1.2rem; }
/* Sin 3D: una luna creciente y las zetas que suben, en vez de solo texto */
.l2-final__luna {
  width: 84px; height: 84px; border-radius: 50%;
  box-shadow: inset -18px 10px 0 0 #e8d9b5; transform: rotate(-18deg);
}
.l2-final__zzz { font: 600 3rem/1 'Geist', 'Geist Fallback', system-ui, sans-serif; color: var(--ink-4); letter-spacing: .1em; }
.l2-final__zzz i, .l2-final__zzz b { display: inline-block; }
.js .l2-final__zzz > * , .js .l2-final__zzz { animation: l2-zeta 3.2s ease-in-out infinite; }
.js .l2-final__zzz i { animation-delay: -.6s; }
.js .l2-final__zzz b { animation-delay: -1.2s; }
@keyframes l2-zeta { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-8px); opacity: 1; } }
.l2-final__zzz i { font-style: normal; font-size: .7em; }
.l2-final__zzz b { font-size: .5em; }
.l2-final__card { background: rgba(255,251,243,.92); border-radius: 26px; padding: 1.6rem 1.3rem 1.4rem; box-shadow: var(--shadow-card); border: 1px solid rgba(10,10,10,.05); }
.l2-final__title { font-size: clamp(min(2.5rem, 12.5vw), 11vw, min(5rem, 80px)); line-height: 1; letter-spacing: -.04em; font-weight: 600; margin: 0 0 1.1rem; }
.l2-final__card p { color: var(--ink-3); max-width: 30.498em; margin: 0 0 1.6rem; }
@media (min-width: 960px) {
  .l2-final { min-height: 100svh; justify-content: center; padding-bottom: 0; }
  .l2-final__scene { inset: 0 0 0 44%; height: auto; }
  .l2-final__card { max-width: 520px; padding: 2.2rem 2rem 2rem; }
}

/* ── Pie ── */
.l2-foot { background: var(--paper-3); color: var(--ink-3); padding: 2.4rem 0 calc(6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .88rem; }
.l2-foot .l2-logo { margin-bottom: 1rem; }
.l2-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: 1.2rem; }
.l2-foot nav a { text-decoration: none; padding: .35rem 0; }
.l2-foot nav a:hover { color: var(--ink); }
.l2-foot p { margin: 0; font-size: .8rem; color: var(--ink-4); }
@media (min-width: 760px) { .l2-foot { padding-bottom: 2.4rem; } }

/* ── Botón fijo abajo (solo móvil, cuando ya pasaste la portada) ── */
.l2-sticky {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: 0 14px 30px -10px rgba(10,10,10,.5);
  transform: translateY(140%); transition: transform .35s var(--ease-out);
}
.l2-sticky.is-on { transform: none; }
@media (min-width: 760px) { .l2-sticky { display: none; } }

/* ── Aparición al bajar (solo con JS y sin «reducir movimiento») ── */
.js .rv { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .8s var(--ease-out); }
.js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .l2-plano__ag, .js .l2-ch__now span, .js .l2-final__zzz, .js .l2-final__zzz > *, .js .l2-hero__title, .js .l2-hero__copy .l2-eyebrow,
  .js .l2-hero__lead, .js .l2-hero__ctas, .js .l2-hero__micro { animation: none; }
  .l2-plan, .l2-card, .l2-btn > span[aria-hidden] { transition: none; }
  .l2-oficina__canvas, .l2-sticky, .l2-wa, .l2-tip { transition: none; }
  .l2-btn:active { transform: none; }
}

/* Los huecos transparentes dejan pasar el dedo/ratón a la oficina (para tocar
   a un trabajador); el texto y los botones siguen siendo clicables. */
.l2-ch__wrap, .l2-final__wrap { pointer-events: none; }
.l2-ch__card, .l2-final__card { pointer-events: auto; }
@media (min-width: 960px) {
  .l2-hero__copy { pointer-events: none; }
  .l2-hero__copy > * { pointer-events: auto; }
}

/* ═════════ v3 · ronda 1 ═════════ */

/* «Ejemplo»: todo lo simulado lo dice, siempre en la mono */
.l2-ej {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: #7a4a12;
  background: #fbeed3; border: 1px solid #efd7aa; border-radius: 99px; padding: .12rem .5rem;
}
.l2-ej::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: currentColor; opacity: .7; }

.l2-tag--soon { margin-left: .1rem; color: #7a4a12; background: #fbeed3; border-color: #efd7aa; }

/* «Un mes real» sobre tinta */
.l2-proof { padding: 4rem 0 4.2rem; }
.l2-eyebrow--dark { color: #b8b4ad; }
.l2-h2--dark { color: #fff; }
.l2-h2--dark em { color: #f08a63; }
@media (min-width: 760px) { .l2-proof__grid { grid-template-columns: repeat(4, 1fr); } }
.l2-proof__foot { max-width: 46.410em; line-height: 1.5; }
@media (min-width: 960px) { .l2-proof { padding: 6rem 0; } }

/* ═════════ v3 · ronda 2 · «Una noche cualquiera» ═════════
   La demo del producto donde trabaja de verdad (WhatsApp del huésped, tu
   panel, tu móvil, tu tablero). HTML y CSS: no depende de la oficina 3D.
   Sin JS se ve todo; con JS, cada hora entra con «escribiendo…» al verla.
   Nada secuestra el scroll: el raíl es «sticky» y se ilumina por intersección. */
.l2-noche { position: relative; background: var(--paper-2); padding: 4.5rem 0 3rem; }
.l2-noche__head { max-width: 640px; }
.l2-noche__head .l2-sub { margin-bottom: 1rem; }
.l2-noche__body { position: relative; }

/* Raíl horario: móvil = tira pegada bajo la cabecera; escritorio = columna */
.l2-rail { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top)); z-index: 20; margin: 0 calc(-1 * var(--gutter)); padding: .55rem var(--gutter);
  background: rgba(251,248,242,.9); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--line); }
.l2-rail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; }
.l2-rail a { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .35rem .2rem; border-radius: 12px; text-decoration: none; color: var(--ink-4);
  transition: color .2s ease, background-color .25s ease; }
.l2-rail b { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: .95rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.l2-rail span { display: none; }
.l2-rail a[aria-current] { color: var(--ink); background: var(--paper); box-shadow: 0 1px 0 rgba(10,10,10,.04), 0 4px 14px -8px rgba(60,40,20,.35); }
.l2-rail li:nth-child(3) a[aria-current] b { color: var(--crit); }

.l2-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding: 2.6rem 0 1rem; scroll-margin-top: calc(var(--nav-h) + 70px); }
.l2-step + .l2-step { border-top: 1px solid var(--line); }
.l2-step__time { margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .7rem; }
.l2-step__time b { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.l2-step--urg .l2-step__time b { color: var(--crit); }
.l2-step__time span { font-size: .82rem; color: var(--ink-3); font-family: 'Geist Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.l2-step h3 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); line-height: 1.14; letter-spacing: -.025em; font-weight: 600; margin: 0 0 .7rem; text-wrap: balance; }
.l2-step__copy p { margin: 0; color: var(--ink-3); font-size: 1.06rem; line-height: 1.58; max-width: 34.476em; }
.l2-step__copy p.l2-step__more { margin-top: .8rem; font-size: .96rem; padding-left: .8rem; border-left: 2px solid var(--line-2); }

/* El móvil: marco de tinta, pantalla de papel */
.l2-phone { margin: 0 auto; width: 100%; max-width: 340px; }
.l2-phone__screen { position: relative; display: flex; flex-direction: column; min-height: 470px; border-radius: 34px; overflow: hidden;
  background: #f2ece2; border: 9px solid #141414; box-shadow: 0 0 0 1px #2c2c2c, 0 30px 60px -30px rgba(40,25,10,.55), 0 10px 20px -12px rgba(40,25,10,.25); }
.l2-phone__bar { display: flex; align-items: center; gap: .6rem; padding: .85rem .8rem .7rem; background: #fffdf8; border-bottom: 1px solid #e8e0d2; }
.l2-phone__av { flex: none; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center; font-weight: 600; font-size: .9rem; color: #fff; background: var(--av, var(--ink)); }
.l2-phone__av--logo { background: var(--ink); }
.l2-phone__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.l2-phone__who b { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2-phone__who small { font-size: .72rem; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l2-phone__chat { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: .9rem .75rem 1rem; }
.l2-phone__foot { padding: .6rem .75rem .8rem; border-top: 1px solid #e8e0d2; background: #fffdf8; display: flex; justify-content: center; }
.l2-phone__cap { margin-top: .6rem; text-align: center; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }

/* Burbujas */
.l2-b { position: relative; max-width: 86%; padding: .55rem .7rem 1.15rem; border-radius: 16px; font-size: .9rem; line-height: 1.42; color: var(--ink);
  background: #fff; box-shadow: 0 1px 0 rgba(60,40,20,.08); }
.l2-b p { margin: 0; }
.l2-b p + p { margin-top: .35rem; }
.l2-b time { position: absolute; right: .6rem; bottom: .3rem; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.l2-b small { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9a4a2a; margin-bottom: .2rem; }
.l2-b--l { align-self: flex-start; border-bottom-left-radius: 5px; }
.l2-b--r { align-self: flex-end; border-bottom-right-radius: 5px; background: #fde9dd; }
.l2-b--guest { background: #e8efe6; }
.l2-b--me { background: #e8efe6; }
.l2-b__ai { font-size: .84rem; color: var(--ink-3); padding-bottom: .35rem; border-bottom: 1px dashed rgba(120,90,50,.25); }
/* RGPD bloque 5: el renglón 🔒 que va debajo del aviso de IA (enlace largo: se parte donde haga falta) */
.l2-b__priv { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.l2-b__priv a { color: #1d6fa5; text-decoration: underline; text-underline-offset: 2px; }
.l2-b__quote { font-size: .78rem; color: var(--ink-3); padding: .3rem .5rem; border-left: 3px solid var(--crit); background: rgba(255,255,255,.55); border-radius: 6px; }
.l2-alert { border: 1px solid rgba(179,38,30,.28); box-shadow: 0 0 0 0 rgba(179,38,30,0); }
.l2-alert p:first-child b { color: var(--crit); }
.l2-mini { margin: 0; align-self: center; max-width: 94%; text-align: center; font-size: .76rem; line-height: 1.4; color: var(--ink-3); background: rgba(255,255,255,.6); border-radius: 10px; padding: .4rem .6rem; }
.l2-mini q { font-style: italic; }
.l2-note { margin: auto 0 0; font-size: .74rem; color: var(--ink-4); text-align: center; padding-top: .4rem; }

/* «De dónde sale»: el sello, como en el panel */
.l2-src { align-self: flex-end; max-width: 86%; text-align: right; }
.l2-src__btn { font: 500 .74rem/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .02em; color: #1f5f3d; background: #eaf4ee; border: 1px solid #cfe5d8; border-radius: 99px; padding: .4rem .65rem; cursor: pointer; min-height: 30px; }
.l2-src__btn span { display: inline-block; transition: transform .2s var(--ease-out); }
.l2-src__btn[aria-expanded="true"] span { transform: rotate(90deg); }
.l2-src__det { margin: .35rem 0 0; font-size: .78rem; color: var(--ink-3); background: #fffdf8; border: 1px solid #e8e0d2; border-radius: 10px; padding: .45rem .6rem; text-align: left; }
.l2-tr { font: 600 .82rem/1 'Geist', 'Geist Fallback', system-ui, sans-serif; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 99px; padding: .55rem .95rem; min-height: 36px; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.l2-tr[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (hover: hover) { .l2-tr:hover { border-color: #bfb9ae; } .l2-src__btn:hover { border-color: #a9d2bb; } }

/* Tablero de las 08:00 */
.l2-phone__screen--board { background: #eef0f3; }
.l2-board { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem .6rem .2rem; }
.l2-board__col { background: #e2e5ea; border-radius: 12px; padding: .5rem .45rem .55rem; display: flex; flex-direction: column; gap: .4rem; }
.l2-board__h { margin: 0 0 .1rem .15rem; font-size: .74rem; font-weight: 600; color: #3d4350; }
.l2-card2 { background: #fff; border-radius: 8px; padding: .45rem .5rem; box-shadow: 0 1px 0 rgba(9,30,66,.2); display: flex; flex-direction: column; gap: .1rem; }
.l2-card2 b { font-size: .8rem; }
.l2-card2 span { font-size: .7rem; color: #5b6170; line-height: 1.3; }
.l2-phone__chat--sum { flex: 1; justify-content: flex-end; padding-top: .3rem; }
.l2-phone__chat--sum .l2-b { max-width: 96%; font-size: .82rem; }

/* «Escribiendo…»: ocupa el sitio de la respuesta (cero saltos) */
.l2-slot { position: relative; display: flex; flex-direction: column; }
.l2-slot > .l2-b--r { align-self: flex-end; }
.l2-typing { position: absolute; top: .2rem; display: inline-flex; gap: 4px; padding: .6rem .7rem; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(60,40,20,.08); opacity: 0; pointer-events: none; }
.l2-slot:has(> .l2-b--r) .l2-typing { right: 0; background: #fde9dd; }
.l2-slot:has(> .l2-b--me) .l2-typing { background: #e8efe6; }
.l2-typing i { width: 6px; height: 6px; border-radius: 99px; background: #a59a8b; }

/* Con JS (y sin «reducir movimiento»): la respuesta espera a que veas la hora */
@media (prefers-reduced-motion: no-preference) {
  .js .l2-step .l2-slot > .l2-b { opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 100% 100%; }
  .js .l2-step .l2-slot > .l2-b--l { transform-origin: 0 100%; }
  .js .l2-step .l2-src, .js .l2-step .l2-note { opacity: 0; }
  .js .l2-step.is-typing .l2-typing { opacity: 1; transition: opacity .15s ease; }
  .js .l2-step.is-typing .l2-typing i { animation: l2-tecla 1s ease-in-out infinite; }
  .js .l2-step.is-typing .l2-typing i:nth-child(2) { animation-delay: .15s; }
  .js .l2-step.is-typing .l2-typing i:nth-child(3) { animation-delay: .3s; }
  .js .l2-step.is-said .l2-typing { opacity: 0; transition: opacity .12s ease; }
  .js .l2-step.is-said .l2-slot > .l2-b { opacity: 1; transform: none; transition: opacity .2s ease, transform .5s cubic-bezier(.34,1.4,.64,1); }
  .js .l2-step.is-said .l2-src, .js .l2-step.is-said .l2-note { opacity: 1; transition: opacity .3s ease .25s; }
  .js .l2-step.is-said .l2-alert { animation: l2-pulso 1.1s ease-out .1s 1; }
  .l2-b p[data-es], .l2-b p[data-orig] { animation: l2-cambia .22s ease; }
}
@keyframes l2-tecla { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes l2-pulso { 0% { box-shadow: 0 0 0 0 rgba(179,38,30,.45); } 100% { box-shadow: 0 0 0 14px rgba(179,38,30,0); } }
@keyframes l2-cambia { from { opacity: 0; } to { opacity: 1; } }
.l2-b p[hidden] { display: none; }

@media (min-width: 1024px) {
  .l2-noche { padding: 7rem 0 4rem; }
  .l2-noche__body { display: grid; grid-template-columns: 180px 1fr; gap: 3rem; margin-top: 2.5rem; }
  .l2-rail { top: calc(var(--nav-h) + 22vh); align-self: start; margin: 0; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .l2-rail ol { grid-template-columns: 1fr; gap: .2rem; position: relative; padding-left: 18px; }
  .l2-rail ol::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 2px; background: var(--line); border-radius: 2px; }
  .l2-rail a { align-items: flex-start; padding: .55rem .7rem; position: relative; }
  .l2-rail a::before { content: ""; position: absolute; left: -18px; top: 1.05rem; width: 10px; height: 10px; border-radius: 99px; background: var(--paper-2); border: 2px solid var(--line-2); transition: background-color .2s ease, border-color .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
  .l2-rail a[aria-current]::before { background: var(--ink); border-color: var(--ink); transform: scale(1.15); }
  .l2-rail li:nth-child(3) a[aria-current]::before { background: var(--crit); border-color: var(--crit); }
  .l2-rail a[aria-current] { background: none; box-shadow: none; }
  .l2-rail b { font-size: 1.15rem; }
  .l2-rail span { display: block; font-size: .8rem; }
  .l2-step { grid-template-columns: minmax(0, 1fr) 340px; align-items: center; gap: 3.5rem; min-height: 86vh; padding: 3rem 0; }
  .l2-step + .l2-step { border-top: 0; }
  .l2-phone { margin: 0; }
  .l2-phone__screen { min-height: 540px; }
}
@media (prefers-reduced-motion: reduce) { .l2-rail a, .l2-rail a::before, .l2-tr, .l2-src__btn span { transition: none; } }
/* El móvil sobre un escenario pintado con el color de quien trabaja */
.l2-phone { max-width: 400px; padding: 26px 22px 14px; border-radius: 30px;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in oklab, var(--ag, #d24a1f) 20%, #fbf3e8), color-mix(in oklab, var(--ag, #d24a1f) 7%, #f7f0e5) 75%);
  box-shadow: inset 0 0 0 1px rgba(120,90,50,.08); }
.l2-phone__screen { min-height: 0; }
@media (min-width: 1024px) {
  .l2-step { grid-template-columns: minmax(0, 1fr) 420px; }
  .l2-phone { padding: 40px 34px 18px; max-width: 420px; }
  .l2-phone__screen { min-height: 500px; }
}

/* ═════════ v3 · ronda 3 · la diferencia y «Tú mandas» ═════════ */
.l2-vs__table { margin-top: 2rem; border-top: 1px solid var(--line-2); }
.l2-vs__row { display: grid; grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.l2-vs__row--head { display: none; }
.l2-vs__what { font-weight: 600; font-size: 1.06rem; letter-spacing: -.01em; color: var(--ink); }
.l2-vs__row > span[role="cell"] { position: relative; font-size: .97rem; line-height: 1.5; color: var(--ink-4); }
.l2-vs__row > span.l2-vs__us { color: var(--ink-2); }
.l2-vs__row > span[role="cell"]::before { content: "Un chat de IA general"; display: block; font: 500 10px/1.7 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #a39885; }
.l2-vs__row:not(.l2-vs__row--head) > span.l2-vs__us::before { content: "✓ AgenteBnb"; color: var(--good); }
@media (min-width: 860px) {
  .l2-vs__row { grid-template-columns: 1.05fr 1fr 1.25fr; gap: 2rem; align-items: baseline; padding: 1.25rem 0; }
  .l2-vs__row--head { display: grid; padding: .9rem 0; }
  .l2-vs__row--head span { font: 500 11px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
  .l2-vs__row--head span.l2-vs__us { color: var(--ink); }
  .l2-vs__row:not(.l2-vs__row--head) > span[role="cell"] { padding-left: 1.5rem; }
  .l2-vs__row:not(.l2-vs__row--head) > span[role="cell"]::before { content: "—"; position: absolute; left: 0; top: 0; font: 400 .97rem/1.5 'Geist', 'Geist Fallback', system-ui, sans-serif; letter-spacing: 0; color: #b5ab9b; }
  .l2-vs__row:not(.l2-vs__row--head) > span.l2-vs__us { background: var(--paper); border-radius: 12px; padding: .7rem .9rem .7rem 2.4rem; margin: -.7rem 0; box-shadow: 0 1px 0 rgba(10,10,10,.03); border: 1px solid var(--line); }
  .l2-vs__row:not(.l2-vs__row--head) > span.l2-vs__us::before { content: "✓"; left: .95rem; top: .7rem; color: var(--good); font-weight: 700; }
  .l2-vs__row.l2-vs__row--head > span::before { content: none; }
}

.l2-ctl { display: grid; gap: .9rem; margin-top: 1.6rem; }
.l2-ctl__i { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem 1.2rem 1.3rem; }
.l2-ctl__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--paper-3); border: 1px solid var(--line); font: 600 1rem/1 'Geist', 'Geist Fallback', system-ui, sans-serif; color: var(--ink); margin-bottom: .8rem; }
.l2-ctl__ic--urg { color: var(--crit); background: #fbe9e6; border-color: #f3cfc9; }
.l2-ctl__i h3 { margin: 0 0 .35rem; font-size: 1.1rem; letter-spacing: -.012em; }
.l2-ctl__i p { margin: 0; color: var(--ink-3); font-size: .98rem; line-height: 1.55; }
@media (min-width: 700px) { .l2-ctl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .l2-ctl { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

/* Móvil: tarjetas de control compactas (icono a la izquierda del título) */
@media (max-width: 699px) {
  .l2-ctl { gap: .6rem; }
  .l2-ctl__i { display: grid; grid-template-columns: 36px 1fr; column-gap: .8rem; padding: 1rem 1rem 1.05rem; border-radius: 16px; }
  .l2-ctl__ic { margin: 0; grid-row: span 2; }
  .l2-ctl__i h3 { align-self: center; margin: 0 0 .2rem; font-size: 1.04rem; }
  .l2-ctl__i p { font-size: .95rem; }
}

/* ═════════ v3 · ronda 4 · integraciones y seguridad ═════════ */
.l2-int { display: grid; gap: 2.4rem; }
.l2-int__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); align-self: center; }
.l2-int__list li { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.l2-int__list b { font-weight: 600; font-size: 1rem; }
.l2-int__list span { color: var(--ink-3); font-size: .97rem; line-height: 1.5; }
@media (min-width: 960px) { .l2-int { grid-template-columns: 1.1fr .9fr; gap: 4.5rem; } }

.l2-seg { display: grid; gap: .8rem; margin-top: 1.6rem; }
.l2-seg__i { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem 1.2rem 1.3rem; }
.l2-seg__k { font-family: 'Geist Mono', ui-monospace, monospace; font-size: .76rem; color: var(--good); letter-spacing: .04em; }
.l2-seg__i h3 { margin: .45rem 0 .35rem; font-size: 1.1rem; letter-spacing: -.012em; }
.l2-seg__i p { margin: 0; color: var(--ink-3); font-size: .98rem; line-height: 1.55; }
.l2-seg__i a { color: var(--ink); text-underline-offset: 3px; }
@media (min-width: 700px) { .l2-seg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .l2-seg { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .l2-seg__i { padding: 1.5rem 1.4rem; } }
@media (max-width: 699px) {
  .l2-seg { gap: .6rem; }
  .l2-seg__i { padding: 1rem 1rem 1.05rem; border-radius: 16px; }
  .l2-seg__i h3 { font-size: 1.04rem; margin-top: .3rem; }
  .l2-seg__i p { font-size: .95rem; }
}

/* ═════════ v3 · ronda 5 · calculadora de precios ═════════ */
.l2-calc { display: grid; gap: 1.1rem; margin: 0 0 1.6rem; padding: 1.1rem 1.1rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
.l2-calc[hidden] { display: none; }
.l2-period { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--paper-3); border: 1px solid var(--line); border-radius: 99px; justify-self: start; }
.l2-period button { font: 600 .9rem/1 'Geist', 'Geist Fallback', system-ui, sans-serif; color: var(--ink-3); background: transparent; border: 0; border-radius: 99px; padding: .6rem 1rem; min-height: 40px; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.l2-period button span { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: .76rem; color: var(--good); margin-left: .2rem; }
.l2-period button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(10,10,10,.04), 0 4px 12px -6px rgba(60,40,20,.35); }
.l2-calc__n { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .6rem 1rem; }
.l2-calc__n label { font-weight: 600; }
.l2-calc__n output { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.l2-calc__n input { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 15%; }
.l2-calc__n input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--p), var(--line-2) var(--p)); }
.l2-calc__n input::-moz-range-track { height: 6px; border-radius: 99px; background: var(--line-2); }
.l2-calc__n input::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ink); }
.l2-calc__n input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 4px 10px -4px rgba(10,10,10,.4); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.l2-calc__n input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); }
.l2-calc__n input:active::-webkit-slider-thumb { transform: scale(1.12); }
.l2-calc__nota { margin: -.3rem 0 0; font-size: .8rem; color: var(--ink-4); }
.l2-plan__for { font-variant-numeric: tabular-nums; min-height: 2.7em; }
.l2-plan.is-fit { border-color: var(--ink); box-shadow: 0 30px 60px -36px rgba(10,10,10,.45); }
.js .l2-plan--star:not(.is-fit) { border-width: 1px; border-color: var(--line); box-shadow: none; }
@media (min-width: 900px) {
  .l2-calc { grid-template-columns: auto 1fr; align-items: center; gap: 1rem 2.4rem; padding: 1.2rem 1.4rem; }
  .l2-calc__nota { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .l2-period button, .l2-calc__n input::-webkit-slider-thumb { transition: none; } }
.l2-plan__price b span[data-unit] { font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; }

/* ═════════ v3 · ronda 6 · sistema tipográfico y de movimiento ═════════
   Titular 40→84 px fluido · H2 28→48 · cuerpo 17 px · una sola palabra en
   cursiva por titular · horas y cifras en la mono, con números tabulares. */
.l2-hero__title { font-size: clamp(2.5rem, 0.9rem + 3.9vw, 5.25rem); line-height: 1.02; letter-spacing: -.035em; max-width: 9.562em; }
.l2-h2 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); letter-spacing: -.03em; line-height: 1.08; font-weight: 600; }
.l2-sub, .l2-hero__lead { font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 960px) { .l2-hero__lead { font-size: 1.2rem; } .l2-sub { font-size: 1.125rem; } .l2-hero__copy > * { max-width: 560px; } }
.l2-faq details p, .l2-plan ul, .l2-int__list span, .l2-ctl__i p, .l2-seg__i p, .l2-vs__row > span[role="cell"] { font-size: 1.0625rem; }
.l2-stat__n { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; letter-spacing: -.04em; }
.l2-seg__k { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-3); }
.l2-seg__k svg { color: var(--good); }
/* contraste AA de las etiquetas pequeñas de la tabla */
.l2-vs__row > span[role="cell"]::before { color: #75684f; }
.l2-vs__row > span[role="cell"] { color: var(--ink-3); }

/* Revelado: opacidad + 12 px, 240 ms, escalón de 40 ms (lo pone el JS) */
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity .24s ease-out, transform .24s cubic-bezier(.2,.7,.2,1); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }
/* Escritorio: el texto de la portada nunca se mete bajo la oficina (ni la
   3D ni la versión plana sin WebGL, cuyos dibujos son más anchos) */
@media (min-width: 960px) {
  .l2-hero__copy > * { max-width: 540px; }
  .l2-hero__lead { max-width: min(30rem, 540px); }
  .l2-hero__fallback { inset: 16% 2% 20% 12%; }
}
/* Accesibilidad: zona de toque de «Entrar» ≥ 44 px y horas de las burbujas a AA */
.l2-nav__login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .3rem; }
/* Ronda 12: va DESPUÉS de la regla de los 44 px (antes, esa regla lo volvía
   a enseñar y a 320 px el botón «Empieza gratis» se salía de la pantalla).
   En em: 22,4 em = 358 px con la letra normal, y con la letra al 200 % se
   esconde ya en un móvil normal en vez de empujar el botón fuera. */
@media (max-width: 22.4em) { .l2-nav__login { display: none; } }
.l2-b time { color: #5f5a52; }
@media (min-width: 960px) { .l2-hero__copy > .l2-hero__title { max-width: 600px; } }

/* ═════════ ronda 8 · 1 · la portada enseña el PRODUCTO ═════════
   Móvil: titular, botones y, debajo, la oficina con el WhatsApp de un
   huésped al lado. Escritorio: texto a la izquierda, oficina en el centro
   y el móvil a la derecha. La «mira» (#l2Aim) dice a la cámara 3D dónde
   encuadrar la oficina para que el móvil no tape a los trabajadores. */
.l2-hero { display: flex; flex-direction: column; }
.l2-hero__copy { padding-top: 1.1rem; padding-bottom: 1.1rem; background: var(--paper-2); position: relative; }
.l2-hero__copy::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none;
  background: linear-gradient(var(--paper-2), rgba(251,248,242,0)); z-index: 1; }
.l2-hero__title { margin-bottom: .8rem; }
.l2-hero__lead { margin-bottom: 1.2rem; }
.l2-hero__ctas { flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.l2-hero__ctas .l2-btn--lg { min-height: 50px; padding: 0 1.15rem; }
.l2-hero__micro { margin-top: .8rem; }
.l2-solo-ancho { display: none; }
@media (min-width: 560px) { .l2-solo-ancho { display: inline; } }
.l2-hero__stage { position: relative; height: clamp(420px, 56svh, 520px); overflow: visible; }
.l2-hero__aim { position: absolute; top: 0; bottom: 0; left: 0; right: 40%; pointer-events: none; }
.l2-hero__fallback { right: 38%; }

/* El móvil de la portada */
.l2-hp { position: absolute; z-index: 2; right: var(--gutter); top: 14px; width: min(56vw, 236px); margin: 0; }
.l2-hp__screen { position: relative; display: flex; flex-direction: column; height: clamp(330px, 44svh, 400px); border-radius: 30px; overflow: hidden;
  background: #efe7dc; border: 7px solid #141414;
  box-shadow: 0 0 0 1px #2c2c2c, 0 30px 60px -28px rgba(40,25,10,.6), 0 10px 22px -12px rgba(40,25,10,.3); }
.l2-hp__screen::before { content: ""; position: absolute; top: 6px; left: 50%; width: 54px; height: 14px; margin-left: -27px; border-radius: 99px; background: #141414; z-index: 3; }
.l2-hp__bar { display: flex; align-items: center; gap: .5rem; padding: 1.55rem .6rem .55rem; background: #fffdf8; border-bottom: 1px solid #e8e0d2; }
.l2-hp__bar .l2-phone__av { width: 28px; height: 28px; font-size: .8rem; }
.l2-hp__bar .l2-phone__who b { font-size: .8rem; }
.l2-hp__bar .l2-phone__who small { font-size: .66rem; }
.l2-hp__chat { flex: 1; display: grid; padding: .7rem .55rem; }
.l2-hs { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .45rem; align-self: start; }
.l2-hs:not(.is-on) { visibility: hidden; }
.l2-hp .l2-b { font-size: .76rem; line-height: 1.38; padding: .45rem .55rem 1rem; max-width: 92%; }
.l2-hp .l2-b time { font-size: 9px; bottom: .22rem; }
.l2-hp .l2-b__ai { font-size: .7rem; }
.l2-hp .l2-slot .l2-typing { top: 0; left: 0; right: auto; background: #fff; }
.l2-hp__cap { margin-top: .55rem; display: grid; gap: .35rem; }
.l2-hp__res { display: grid; }
.l2-hp__res > span { grid-area: 1 / 1; display: flex; gap: .4rem; align-items: baseline; font-size: .76rem; line-height: 1.35; color: var(--ink-2);
  background: rgba(255,252,245,.92); border: 1px solid rgba(120,90,50,.14); border-radius: 12px; padding: .4rem .55rem;
  box-shadow: 0 8px 20px -14px rgba(60,40,20,.45); }
.l2-hp__res > span:not(.is-on) { visibility: hidden; }
.l2-hp__dot { flex: none; width: 7px; height: 7px; border-radius: 99px; background: var(--good); transform: translateY(-1px); }
.l2-hp__dot--urg { background: var(--crit); box-shadow: 0 0 0 3px rgba(179,38,30,.16); }
.l2-hp__ctl { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.l2-hp__dots { display: inline-flex; }
.l2-hp__dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.l2-hp__dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #c9bfae; transition: width .3s var(--ease-out), background-color .2s ease; }
.l2-hp__dots button[aria-pressed="true"]::before { width: 18px; background: var(--ink); }
.l2-hp__play { font: 500 10px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  background: rgba(255,255,255,.7); border: 1px solid var(--line-2); border-radius: 99px; padding: 0 .55rem; min-height: 24px; cursor: pointer; }
.l2-hp__ej { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: #5f5a52; }

/* Con JS: las escenas se turnan (solo opacidad y transformación) */
.js .l2-hp.is-live .l2-hs, .js .l2-hp.is-live .l2-hp__res > span { visibility: visible; opacity: 0; transition: opacity .22s ease; }
.js .l2-hp.is-live .l2-hs.is-on, .js .l2-hp.is-live .l2-hp__res > span.is-on { opacity: 1; }
.js .l2-hp.is-live .l2-hs:not(.is-on) { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .l2-hp.is-live .l2-hs.is-on > .l2-b--guest { animation: l2-pop .42s cubic-bezier(.34,1.45,.64,1) both; transform-origin: 100% 100%; }
  .js .l2-hp.is-live .l2-hs .l2-slot > .l2-b { opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 0 100%; }
  .js .l2-hp.is-live .l2-hs.is-typing .l2-typing { opacity: 1; transition: opacity .15s ease .25s; }
  .js .l2-hp.is-live .l2-hs.is-typing .l2-typing i { animation: l2-tecla 1s ease-in-out infinite; }
  .js .l2-hp.is-live .l2-hs.is-typing .l2-typing i:nth-child(2) { animation-delay: .15s; }
  .js .l2-hp.is-live .l2-hs.is-typing .l2-typing i:nth-child(3) { animation-delay: .3s; }
  .js .l2-hp.is-live .l2-hs.is-said .l2-slot > .l2-b { opacity: 1; transform: none; transition: opacity .2s ease, transform .5s cubic-bezier(.34,1.4,.64,1); }
}
@keyframes l2-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .l2-hp__dots button::before, .js .l2-hp.is-live .l2-hs, .js .l2-hp.is-live .l2-hp__res > span { transition: none; } }
.js .l2-hp { animation: l2-aparece .8s var(--ease-out) .3s both; }
@media (prefers-reduced-motion: reduce) { .js .l2-hp { animation: none; } }

@media (min-width: 960px) {
  .l2-hero { display: grid; }
  .l2-hero__copy { background: none; padding-top: 2rem; padding-bottom: 4rem; }
  .l2-hero__copy::after { content: none; }
  .l2-hero { background: linear-gradient(90deg, var(--paper-2) 0, rgba(251,248,242,.94) 38%, rgba(251,248,242,0) 52%); }
  .l2-hero__stage { position: absolute; inset: var(--nav-h) 0 0 max(49%, calc(50% - 580px + 580px)); height: auto; }
  .l2-hero__aim { right: 190px; }
  .l2-hero__fallback { right: 230px; }
  .l2-hp { right: clamp(24px, 3.6vw, 64px); top: 52%; width: 292px; transform: translateY(-50%); }
  .js .l2-hp { animation-name: l2-aparece-d; }
  .l2-hp__screen { height: min(470px, calc(100svh - var(--nav-h) - 170px)); min-height: 380px; }
  .l2-hp .l2-b { font-size: .84rem; }
  .l2-hp .l2-b__ai { font-size: .76rem; }
  .l2-hp__bar .l2-phone__who b { font-size: .86rem; }
  .l2-hp__res > span { font-size: .8rem; }
  .l2-oficina__canvas {
    -webkit-mask-image: var(--canto), radial-gradient(ellipse 50% 66% at 57% 54%, #000 64%, rgba(0,0,0,0) 100%);
            mask-image: var(--canto), radial-gradient(ellipse 50% 66% at 57% 54%, #000 64%, rgba(0,0,0,0) 100%);
  }
}
@keyframes l2-aparece-d { from { opacity: 0; transform: translateY(calc(-50% + 14px)); } to { opacity: 1; transform: translateY(-50%); } }
.l2-hp__in { display: flex; align-items: center; gap: .4rem; padding: .45rem .5rem .6rem; }
.l2-hp__in span { flex: 1; font-size: .72rem; color: #9a9184; background: #fffdf8; border-radius: 99px; padding: .4rem .7rem; }
.l2-hp__in i { width: 28px; height: 28px; border-radius: 99px; background: #1f7a4d; flex: none; }
@media (min-width: 960px) { .l2-hp__screen { height: min(440px, calc(100svh - var(--nav-h) - 190px)); } }
@media (max-width: 959px) {
  .l2-hp__bar { gap: .4rem; padding-left: .5rem; padding-right: .5rem; }
  .l2-hp__bar .l2-phone__av { width: 24px; height: 24px; font-size: .72rem; }
  .l2-hp__bar .l2-phone__who b { font-size: .74rem; letter-spacing: -.01em; }
}

/* ═════════ ronda 8 · 2 · ritmo: una idea por pantalla, menos aire muerto ═════════ */
/* «Una noche cualquiera» en móvil/tableta: carrusel horizontal con
   imán (una hora por pantalla; la siguiente asoma a la derecha). La página
   no se desplaza en horizontal: solo la tira. */
@media (max-width: 1023px) {
  .l2-noche { padding: 3.25rem 0 2.5rem; }
  .l2-noche__head .l2-sub { margin-bottom: .9rem; }
  .l2-rail { position: relative; top: auto; margin: 0 calc(-1 * var(--gutter)) .4rem; border-bottom: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .l2-noche__steps {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin: 0 calc(-1 * var(--gutter)); padding: .3rem var(--gutter) 1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .l2-noche__steps::-webkit-scrollbar { display: none; }
  .l2-step { flex: 0 0 min(86%, 420px); scroll-snap-align: start; scroll-snap-stop: always; padding: 0; gap: 1rem; align-content: start; }
  .l2-step + .l2-step { border-top: 0; }
  .l2-step__time { margin-bottom: .3rem; }
  .l2-step__time b { font-size: 1.3rem; }
  .l2-step h3 { font-size: 1.3rem; margin-bottom: .45rem; }
  .l2-step__copy p { font-size: .98rem; line-height: 1.5; }
  .l2-step__copy p.l2-step__more { font-size: .9rem; margin-top: .55rem; }
  .l2-phone { padding: 16px 14px 10px; border-radius: 24px; }
  .l2-phone__screen { border-width: 7px; border-radius: 28px; }
}
.l2-noche__hint { display: none; align-items: center; gap: .4rem; margin: 0; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5f5a52; }
@media (max-width: 1023px) { .l2-noche__hint { display: flex; } }
@media (min-width: 1024px) { .l2-step { min-height: 74vh; } }

/* Secciones: menos relleno en móvil (7 secciones × 2 × 16 px menos) */
@media (max-width: 959px) { .l2-sec { padding: 3.5rem 0; } .l2-sub { margin-bottom: 1.3rem; } }

/* La diferencia en móvil: una leyenda arriba en vez de una etiqueta en cada celda */
.l2-vs__legend { display: none; }
@media (max-width: 859px) {
  .l2-vs__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 0; font: 500 10.5px/1.6 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #5f5a52; }
  .l2-vs__legend b { color: var(--good); font-weight: 600; }
  .l2-vs__table { margin-top: .6rem; }
  .l2-vs__row { padding: .85rem 0; gap: .3rem; }
  .l2-vs__what { font-size: 1rem; }
  .l2-vs__row > span[role="cell"] { padding-left: 1.3rem; font-size: .95rem; line-height: 1.45; }
  .l2-vs__row > span[role="cell"]::before { content: "—"; position: absolute; left: 0; top: 0; font: 400 .95rem/1.45 'Geist', 'Geist Fallback', system-ui, sans-serif; letter-spacing: 0; color: #9c907c; text-transform: none; }
  .l2-vs__row:not(.l2-vs__row--head) > span.l2-vs__us::before { content: "✓"; color: var(--good); font-weight: 700; }
  .l2-vs__row > span[role="cell"]:not(.l2-vs__us) { color: var(--ink-4); }
}

/* Tú mandas y Seguridad en móvil: filas con raya, no tarjetas (lista, no mosaico) */
@media (max-width: 699px) {
  .l2-ctl, .l2-seg { gap: 0; margin-top: 1rem; border-top: 1px solid var(--line-2); }
  .l2-ctl__i, .l2-seg__i { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .85rem 0; }
  .l2-ctl__i p, .l2-seg__i p { font-size: .95rem; line-height: 1.48; }
  .l2-ctl__ic { width: 30px; height: 30px; border-radius: 9px; font-size: .9rem; }
  .l2-ctl__i { grid-template-columns: 30px 1fr; }
  .l2-seg__i { display: grid; grid-template-columns: 30px 1fr; column-gap: .8rem; }
  .l2-seg__k { grid-row: span 2; font-size: 0; gap: 0; align-self: start; padding-top: .1rem; }
  .l2-seg__k svg { width: 22px; height: 22px; }
  .l2-seg__i h3 { margin: 0 0 .2rem; }
}

/* Integraciones en móvil: más juntas */
@media (max-width: 959px) {
  .l2-int { gap: 1.6rem; }
  .l2-steps { gap: 1rem; margin-top: 1.1rem; }
  .l2-steps li > span { width: 34px; height: 34px; border-radius: 10px; }
  .l2-steps h3 { margin-top: .2rem; font-size: 1.02rem; }
  .l2-steps p { font-size: .95rem; }
  .l2-int__list li { grid-template-columns: 82px 1fr; padding: .75rem 0; gap: .8rem; }
  .l2-int__list span { font-size: .95rem; }
}

/* Precios en móvil: tarjetas más prietas */
@media (max-width: 899px) {
  .l2-calc { padding: .95rem .95rem .85rem; gap: .9rem; margin-bottom: 1.2rem; }
  .l2-plans { gap: .8rem; }
  .l2-plan { padding: 1.2rem 1.1rem; }
  .l2-plan ul { gap: .4rem; margin-bottom: 1.1rem; font-size: .97rem; }
  .l2-plan__price b { font-size: 2.1rem; }
  .l2-plan__for { margin-bottom: .75rem; }
}

/* Las paradas de la oficina en móvil: más cortas (la escena sigue entera) */
@media (max-width: 959px) {
  .l2-ch { min-height: 88svh; padding-bottom: calc(1svh + 80px + env(safe-area-inset-bottom)); }
  .l2-ch__scene { height: 52svh; }
  .l2-ch__card { padding: 1.15rem 1.15rem 1.05rem; border-radius: 22px; }
  .l2-ch__top h3 { font-size: 1.28rem; }
  .l2-ch__line { font-size: 1.05rem; }
  .l2-ch__card p { font-size: .95rem; line-height: 1.5; }
  .l2-ch__card p.l2-ch__now { margin-top: .7rem; padding-top: .6rem; font-size: .86rem; }
  .l2-final { min-height: 88svh; }
}

/* ═════════ ronda 8 · 3 · prueba con datos y microinteracciones ═════════ */
/* La barra de cómo salieron las respuestas (crece una vez al verla) */
.l2-mix { margin: 1.6rem 0 2rem; }
.l2-mix__cap { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #b8b4ad; margin-bottom: .7rem; }
.l2-mix__bar { display: flex; gap: 3px; height: 18px; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.06); }
.l2-mix__s { flex: 0 0 var(--w); transform-origin: 0 50%; }
.l2-mix__s--solo { background: #f08a63; }
.l2-mix__s--dict { background: #e9d9c4; }
.l2-mix__s--cons { background: #8f8a83; }
.l2-mix__key { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .95rem; color: #d9d5ce; }
.l2-mix__key li { display: flex; gap: .55rem; align-items: baseline; }
.l2-mix__key b { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; min-width: 3ch; }
.l2-mix__k { flex: none; width: 10px; height: 10px; border-radius: 3px; transform: translateY(1px); }
.l2-mix__k--solo { background: #f08a63; } .l2-mix__k--dict { background: #e9d9c4; } .l2-mix__k--cons { background: #8f8a83; }
@media (min-width: 760px) { .l2-mix__key { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .l2-mix__bar { height: 22px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .l2-mix__s { transform: scaleX(0); }
  .js .l2-mix.is-in .l2-mix__s { transform: none; transition: transform .9s cubic-bezier(.22,1,.36,1); }
  .js .l2-mix.is-in .l2-mix__s--dict { transition-delay: .18s; }
  .js .l2-mix.is-in .l2-mix__s--cons { transition-delay: .3s; }
}
@media (max-width: 759px) { .l2-proof { padding: 3.25rem 0 3.4rem; } .l2-stat { padding-top: .8rem; } .l2-proof__grid { gap: .9rem; } }

/* Hilo de progreso bajo la cabecera (sin JS: animación ligada al scroll) */
.l2-nav { position: fixed; }
.l2-nav__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .l2-nav__prog { opacity: .85; animation: l2-prog linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes l2-prog { to { transform: scaleX(1); } }

/* Mensual / Anual: la pastilla se desliza (muelle corto) */
.l2-period { position: relative; isolation: isolate; }
.l2-period::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: var(--paper);
  box-shadow: 0 1px 0 rgba(10,10,10,.04), 0 4px 12px -6px rgba(60,40,20,.35); transition: transform .42s cubic-bezier(.34,1.3,.64,1); }
.l2-period[data-on="a"]::before { transform: translateX(100%); }
.js .l2-period button[aria-pressed="true"] { background: transparent; box-shadow: none; }
/* La cifra que cambia hace un «tic» (no salta de golpe) */
@keyframes l2-tic { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.l2-tic { display: inline-block; animation: l2-tic .28s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .l2-period::before { transition: none; } .l2-tic { animation: none; } }

/* Tarjetas: se levantan un pelo al pasar el ratón, ceden al tocar */
@media (hover: hover) and (min-width: 700px) {
  .l2-ctl__i, .l2-seg__i { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
  .l2-ctl__i:hover, .l2-seg__i:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(10,10,10,.35); border-color: var(--line-2); }
}
.l2-plan:active, .l2-ctl__i:active, .l2-seg__i:active { transition-duration: .1s; }
.l2-faq summary { transition: color .2s ease; }
.l2-faq details[open] summary { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .l2-faq details[open] > p { animation: l2-aparece .3s var(--ease-out); }
}
/* Botón fijo del móvil: se aparta mientras ves los precios (ya tienen los suyos) */
.l2-sticky { transition: transform .35s var(--ease-out), opacity .25s ease; }
.l2-sticky.is-on.is-away { transform: translateY(140%); opacity: 0; }

/* ═════════ ronda 8 · 4 · acabado ═════════ */
@media (min-width: 1280px) {
  .l2-hp { width: 316px; }
  .l2-hp .l2-b { font-size: .88rem; }
  .l2-hp__screen { height: min(480px, calc(100svh - var(--nav-h) - 180px)); }
  .l2-hero__aim { right: 210px; }
}
.l2-noche__steps:focus-visible { outline-offset: -2px; }
/* Ritmo 4/8: el antetítulo y el titular de cada sección, siempre a la misma distancia */
.l2-eyebrow { margin-bottom: .75rem; }
.l2-h2 { margin-bottom: .75rem; }
/* Cifras: números tabulares en todo lo que cuenta o cambia */
.l2-plan__price b, .l2-calc__n output, .l2-mix__key b, .l2-step__time b, .l2-rail b { font-variant-numeric: tabular-nums; }
.l2-sticky { box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 14px 30px -10px rgba(10,10,10,.5); }

/* ═════════ ronda 8 · 5 · sellos de hechos y paradas más cortas ═════════ */
.l2-sellos { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.l2-sellos a { display: inline-flex; align-items: center; gap: .35rem; min-height: 28px; padding: 0 .6rem; border-radius: 99px; text-decoration: none;
  font-size: .76rem; color: var(--ink-3); background: rgba(255,255,255,.6); border: 1px solid var(--line); transition: border-color .2s ease, color .2s ease; }
.l2-sellos a::before { content: "✓"; color: var(--good); font-weight: 700; font-size: .72rem; }
@media (hover: hover) { .l2-sellos a:hover { color: var(--ink); border-color: var(--line-2); } }
.js .l2-sellos { animation: l2-aparece .8s var(--ease-out) .3s both; }
@media (prefers-reduced-motion: reduce) { .js .l2-sellos { animation: none; } }
@media (max-width: 959px) {
  .l2-ch { min-height: 82svh; }
  .l2-ch__scene { height: 50svh; }
  .l2-final { min-height: 82svh; }
}
@media (max-width: 599px) { .l2-sellos { display: none; } }

/* ═════════ ronda 9 · longitud en móvil ═════════
   «Tú mandas» y «Seguridad» (6 + 6 tarjetas parecidas): en móvil, tira
   horizontal con imán como «Una noche» (la siguiente asoma; el scroll
   vertical no se toca). ≈ −800 px. Desde 700 px, la rejilla de siempre. */
.l2-tira__hint { display: none; }
@media (max-width: 699px) {
  .l2-tira__hint { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font: 500 10.5px/1.6 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #5f5a52; }
  .l2-sub + .l2-tira__hint { margin-top: -.5rem; }
  .l2-ctl.l2-tira, .l2-seg.l2-tira {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    margin: 0 calc(-1 * var(--gutter)); padding: .2rem var(--gutter) .6rem; border-top: 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .l2-tira::-webkit-scrollbar { display: none; }
  .l2-tira:focus-visible { outline-offset: -2px; }
  .l2-tira > .l2-ctl__i, .l2-tira > .l2-seg__i {
    flex: 0 0 min(80%, 320px); scroll-snap-align: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: .95rem 1rem 1rem;
    display: block;
  }
  .l2-tira .l2-ctl__ic { margin: 0 0 .6rem; }
  .l2-tira .l2-seg__k { display: block; margin-bottom: .45rem; }
  .l2-tira .l2-ctl__i h3, .l2-tira .l2-seg__i h3 { margin: 0 0 .3rem; }
  /* dentro de la tira se ven todas ya (la entrada «rv» espera al scroll vertical) */
  .js .l2-tira > .rv { opacity: 1; transform: none; }
}
/* Paradas de la oficina y cierre: 82 → 74 svh (la escena, 50 → 45 svh); la
   ficha sigue sin tapar al trabajador (medido en 390×844 y 360×640). */
@media (max-width: 959px) {
  .l2-ch, .l2-final { min-height: 74svh; }
  .l2-ch__scene, .l2-final__scene { height: 45svh; }
  .l2-sec { padding: 3rem 0; }
}
/* La diferencia en móvil: lo de «un chat general» en letra menor (es el contraste, no el mensaje) */
@media (max-width: 859px) {
  .l2-vs__row { padding: .7rem 0; gap: .2rem; }
  .l2-vs__row > span[role="cell"]:not(.l2-vs__us) { font-size: .88rem; line-height: 1.4; }
  .l2-vs__row > span[role="cell"]:not(.l2-vs__us)::before { font-size: .88rem; line-height: 1.4; }
}
/* 360 px (muchos Android): «Empieza gratis» de la cabecera se partía en dos líneas */
.l2-nav .l2-btn { white-space: nowrap; }
@media (max-width: 379px) { .l2-nav__cta { gap: .35rem; } .l2-nav .l2-btn--sm { padding-left: .85rem; padding-right: .85rem; } }
/* Precios en móvil: nombre del plan y precio en la misma línea */
@media (max-width: 899px) {
  .l2-plan { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; align-items: baseline; padding: 1.05rem 1.05rem 1.1rem; }
  .l2-plan > * { grid-column: 1 / -1; }
  .l2-plan > h3 { grid-column: 1; margin: 0; }
  .l2-plan > .l2-plan__price { grid-column: 2; grid-row: 1; justify-self: end; }
  .l2-plan > .l2-plan__badge { grid-column: auto; }
  .l2-plan__price b { font-size: 1.9rem; }
  .l2-plan__for { margin: .2rem 0 .6rem; }
  .l2-plan ul { gap: .3rem; margin-bottom: .9rem; font-size: .94rem; }
}

/* «Qué dicen los datos»: cómo se cuenta (método en una línea) y el hueco de la cita con permiso */
.l2-proof__how { margin: .7rem 0 0; max-width: 46.410em; font-size: .8rem; line-height: 1.5; color: #a29d95; }
.l2-proof__how b { color: #cfcac2; font-weight: 600; }
.l2-proof__how a { color: #f0ebe3; text-underline-offset: 3px; }
.l2-cita { margin: 1.6rem 0 0; padding: 1.1rem 1.2rem; border-left: 2px solid var(--accent); background: rgba(255,255,255,.04); border-radius: 0 14px 14px 0; }
.l2-cita blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; color: #f3efe8; }
.l2-cita blockquote p { margin: 0; }
.l2-cita figcaption { margin-top: .6rem; font-size: .82rem; color: #b8b4ad; }
/* Móvil de la portada: el chat nunca empuja la barra de escribir fuera de la
   pantalla (con el renglón 🔒 la escena 1 no cabía en 330-370 px). Como en
   WhatsApp, los mensajes se apoyan abajo y, si no caben, se corta lo de arriba. */
.l2-hp__chat { min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.l2-hs { align-self: end; }
@media (max-width: 959px) { .l2-hp .l2-b__ai { font-size: .68rem; line-height: 1.3; } .l2-hp .l2-b__priv { margin-top: .15rem; } .l2-hp__chat { padding-top: .45rem; padding-bottom: .45rem; } .l2-hp .l2-hs { gap: .35rem; } }
@media (max-width: 959px) { .l2-hp__screen { height: clamp(330px, 46.5svh, 410px); } }

/* ═════════ ronda 10 · marca: la oficina es la protagonista de la portada ═════════
   Móvil: los cuatro trabajadores a todo lo ancho (la «mira» es una banda
   arriba) y el móvil de ejemplo apoyado en el suelo de la oficina, abajo a la
   derecha; lo que cuenta la escena, a su izquierda. El chat se lee de arriba
   abajo (lo que asoma en la primera pantalla es la pregunta y la respuesta). */
@media (max-width: 959px) {
  .l2-hero { --hp-top: 168px; --hp-w: min(204px, 55vw); --hp-h: clamp(330px, 47.5svh, 400px); }
  .l2-hero__stage { height: calc(var(--hp-top) + var(--hp-h) + 18px); }
  .l2-hero__aim { top: 14px; bottom: auto; right: 0; height: 176px; }
  .l2-hp { top: var(--hp-top); width: var(--hp-w); }
  .l2-hp__screen { height: var(--hp-h); }
  /* de arriba abajo si la escena cabe (lo marca landing2.js); si no cabe
     (pantallas bajas), como WhatsApp: apoyada abajo y se corta lo de arriba */
  .js .l2-hs.is-fit { align-self: start; }
  .l2-hp__cap { position: absolute; top: 58px; right: calc(100% + 12px); width: calc(100vw - 2 * var(--gutter) - var(--hp-w) - 12px); max-width: 220px; margin: 0; }
  .l2-hp__res > span { font-size: .78rem; }
  .l2-hp__ctl { padding-left: .15rem; }
}
/* El sobre que la Recepcionista lleva al móvil (lo mueve landing2.js) */
.l2-sobre { position: fixed; left: 0; top: 0; z-index: 40; width: 22px; height: 15px; border-radius: 3px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255,250,242,.9) 50%, transparent calc(50% + 1.4px)) 0 0 / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(255,250,242,.9) 50%, transparent calc(50% + 1.4px)) 100% 0 / 50% 100% no-repeat,
    #d24a1f;
  box-shadow: 0 0 0 1.5px #fffaf1, 0 8px 14px -6px rgba(70,30,10,.55); }
/* Sin 3D, en la banda del móvil: los cuatro, sin sus etiquetas de tarea (a
   lo ancho de un móvil no caben sin pisarse; lo cuenta el móvil de al lado) */
@media (max-width: 959px) {
  .l2-hero__fallback { inset: 8px 0 auto; height: 156px; gap: 5%; }
  .l2-hero__fallback .l2-plano__task { display: none; }
}
/* La oficina, pegada a la página mientras se ve la portada en el móvil (ver
   setLayerAbs en landing2-oficina.js): la mueve el scroll del navegador. */
.l2-oficina.is-page { position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: 100vh; }
@supports (height: 100lvh) { .l2-oficina.is-page { height: 100lvh; } }

/* ═════════ ronda 10 · marca en las secciones: la cara de cada trabajador ═════════ */
.l2-av { position: relative; flex: none; display: inline-block; width: var(--av-s, 36px); height: var(--av-s, 36px); border-radius: 50%; overflow: hidden;
  background: color-mix(in oklab, var(--ag) 30%, #fffaf1); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in oklab, var(--ag) 70%, #fff); }
.l2-av img { position: absolute; max-width: none; height: auto; }
/* «Una noche»: quién lo hizo */
.l2-step__time { align-items: center; }
.l2-who { display: inline-flex; align-items: center; gap: .5rem; }
/* El equipo: reparto de cuatro antes del paseo */
.l2-cast { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.l2-cast li { display: grid; justify-items: center; align-content: start; text-align: center; gap: .15rem; }
.l2-cast .l2-av { margin-bottom: .45rem; }
.l2-cast b { font-size: .86rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.l2-cast span { font-size: .74rem; line-height: 1.25; color: var(--ink-4); }
@media (min-width: 760px) { .l2-cast { max-width: 640px; gap: 1rem; } .l2-cast b { font-size: .95rem; } .l2-cast span { font-size: .82rem; } }
@media (max-width: 379px) { .l2-cast b { font-size: .78rem; } .l2-cast span { font-size: .7rem; } }
/* Cierre: «Ellos», con cara */
.l2-final__team { display: flex; align-items: center; gap: .8rem; margin: -.2rem 0 1.1rem; font-size: .9rem; line-height: 1.35; color: var(--ink-3); }
.l2-final__card p.l2-final__team { margin: -.2rem 0 1.1rem; }
.l2-avs { display: inline-flex; flex: none; padding-left: 6px; }
.l2-avs .l2-av { margin-left: -8px; }
/* «Qué dicen los datos»: la banda de tinta acaba en un canto de pincel
   (arriba y abajo), como el borde de la acuarela de la oficina. Dos trazos
   fijos en SVG (sin filtros: no cuesta nada por fotograma). */
.l2-proof { --pincel-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24L0 13L23 13L46 9L69 5L92 5L115 6L138 8L162 7L185 5L208 7L231 11L254 13L277 13L300 12L323 10L346 8L369 9L392 10L415 6L438 5L462 4L485 7L508 10L531 12L554 12L577 9L600 11L600 24Z'/%3E%3C/svg%3E");
  --pincel-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0 17L23 20L46 21L69 18L92 15L115 13L138 13L162 14L185 14L208 11L231 11L254 14L277 17L300 20L323 18L346 16L369 16L392 15L415 17L438 15L462 11L485 10L508 11L531 15L554 16L577 16L600 15L600 0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--pincel-a) top / 100% 22px no-repeat, linear-gradient(#000, #000) 0 21px / 100% calc(100% - 42px) no-repeat, var(--pincel-b) bottom / 100% 22px no-repeat;
          mask: var(--pincel-a) top / 100% 22px no-repeat, linear-gradient(#000, #000) 0 21px / 100% calc(100% - 42px) no-repeat, var(--pincel-b) bottom / 100% 22px no-repeat; }

/* ═════════ ronda 10 · prueba social honesta ═════════ */
/* Un dato real justo debajo de la portada (donde otros ponen logos) */
.l2-dato { position: relative; background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.l2-dato__in { display: grid; gap: .35rem; padding-top: 1.15rem; padding-bottom: 1.2rem; }
.l2-dato__k { margin: 0; display: flex; align-items: center; gap: .5rem; font: 500 10.5px/1.5 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #5f5a52; }
.l2-dato__t { margin: 0; font-size: 1.12rem; line-height: 1.35; letter-spacing: -.01em; color: var(--ink-2); max-width: 26.520em; text-wrap: balance; }
.l2-dato__t b { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; font-size: 1.5em; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: .1rem; }
.l2-dato__s { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ink-4); }
.l2-dato__s a { color: var(--ink-2); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 960px) {
  .l2-dato__in { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 2rem; padding-top: 1.3rem; padding-bottom: 1.3rem; }
  .l2-dato__t { max-width: none; }
  .l2-dato__s { max-width: 22.542em; }
}
/* «Qué dicen los datos»: ficha del dato (quién, cuándo, qué, cómo, revisado) */
.l2-ficha { margin: 1.6rem 0 0; display: grid; border-top: 1px solid rgba(255,255,255,.12); }
.l2-ficha > div { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.l2-ficha dt { font: 500 10.5px/1.6 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: #a29d95; }
.l2-ficha dd { margin: 0; font-size: .86rem; line-height: 1.5; color: #d9d5ce; max-width: 46.410em; }
.l2-ficha a { color: #f0ebe3; text-underline-offset: 3px; }
@media (min-width: 760px) { .l2-ficha > div { grid-template-columns: 9.5rem 1fr; gap: 1.2rem; align-items: baseline; } }
.l2-proof__foot { margin-top: .9rem; }
.l2-dato__t b small { font-family: 'Geist', 'Geist Fallback', system-ui, sans-serif; font-size: .62em; font-weight: 600; margin-left: .06em; }
/* Móvil: la ficha con la etiqueta a la izquierda (menos alto) y las cuatro cifras en 2 × 2 */
@media (max-width: 759px) {
  .l2-ficha > div { grid-template-columns: 5.4rem 1fr; gap: .7rem; align-items: baseline; padding: .6rem 0; }
  .l2-ficha dt { font-size: 9.5px; letter-spacing: .06em; }
  .l2-ficha dd { font-size: .84rem; line-height: 1.45; }
  .l2-proof__grid { grid-template-columns: 1fr 1fr; gap: 1.1rem .9rem; }
  .l2-proof__grid .l2-stat { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .l2-proof__grid .l2-stat__n { font-size: 2.3rem; min-width: 0; }
  .l2-proof__grid .l2-stat__l { font-size: .84rem; line-height: 1.35; }
}
@media (max-width: 379px) { .l2-hp__res > span { font-size: .72rem; padding: .35rem .45rem; } .l2-hp__ej { font-size: 8.5px; } }
/* la portada se deshace en el papel antes del dato (sin corte recto sobre la oficina) */
.l2-dato::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px; pointer-events: none; background: linear-gradient(rgba(251,248,242,0), var(--paper-2)); }
@media (max-width: 959px) {
  .l2-dato__in { padding-top: .9rem; padding-bottom: .95rem; gap: .25rem; }
  .l2-dato__t { font-size: 1.05rem; }
  .l2-cast { margin-top: 1.1rem; }
  .l2-cast .l2-av { margin-bottom: .3rem; }
  .l2-team-intro { padding-bottom: 2rem; }
}
/* El texto de la escena mide lo que deja el escenario (no la ventana: con
   barra de desplazamiento visible, 100vw se pasaba y salía por la izquierda) */
@media (max-width: 959px) {
  .l2-hero__stage { container-type: inline-size; }
  @supports (width: 1cqw) { .l2-hp__cap { width: calc(100cqw - 2 * var(--gutter) - var(--hp-w) - 12px); } }
}

/* ═════════ ronda 11 · ritmo y narrativa ═════════ */
/* Tiras (Tú mandas, Seguridad) en móvil: puntos que dicen cuántas hay y en
   cuál estás; cada punto lleva a su tarjeta. Diana de 44 px de alto. */
.l2-tira__dots { display: none; }
@media (max-width: 699px) {
  .l2-tira__dots { display: flex; align-items: center; margin: -.5rem 0 -.15rem; min-height: 44px; }
  .l2-sub + .l2-tira__dots { margin-top: -.9rem; }
  .l2-tira__dots .l2-tira__hint { margin: 0 auto 0 0; }
  .l2-tira__dots button:last-of-type { margin-right: -9px; }
  .l2-tira__dots button { position: relative; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .l2-tira__dots button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #c9bfae; transition: width .3s var(--ease-out), background-color .2s ease; }
  .l2-tira__dots button[aria-current="true"]::before { width: 20px; background: var(--ink); }
  .l2-tira__dots button:focus-visible { outline-offset: -6px; }
}
@media (prefers-reduced-motion: reduce) { .l2-tira__dots button::before { transition: none; } }
/* Integraciones en móvil: los cuatro en 2 × 2 (lo que no dicen los pasos) */
@media (max-width: 699px) {
  .l2-int__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .l2-int__list li { display: block; padding: .7rem 0 .75rem; }
  .l2-int__list b { display: block; margin-bottom: .1rem; }
  .l2-int__list span { font-size: .88rem; line-height: 1.42; display: block; }
}
/* Escritorio: cada hora de la noche mide lo que su móvil, no media pantalla más */
@media (min-width: 1024px) { .l2-step { min-height: 0; padding: 2.4rem 0; } }
/* Móvil: un pelo menos de relleno entre secciones (3 → 2,75 rem: −8 px × 2 × 7) */
@media (max-width: 959px) { .l2-sec { padding: 2.75rem 0; } }
/* El cierre contesta a la portada: una línea que vuelve a «las once» */
.l2-final__card p.l2-final__kick { margin: 0 0 .7rem; font: 500 11px/1.5 'Geist Mono', ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: #6b5f50; max-width: 34ch; }
/* Acuarela fuera de la oficina: la palabra en cursiva de cada titular lleva
   debajo una aguada del mismo pincel (un trazo en SVG, sin descargas). */
.l2-hero__title em, .l2-h2 em, .l2-final__title em {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M3 10C15 6 31 8 49 6S85 4 98 8C100 12 96 16 83 16S52 17 34 17 7 18 3 15C1 13 1 12 3 10Z' fill='%23f3b79c' fill-opacity='.5'/%3E%3Cpath d='M6 13C25 11 52 12 95 10' stroke='%23e9906c' stroke-opacity='.35' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") 0 94% / 100% .38em no-repeat;
  padding: 0 .05em; margin: 0 -.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.l2-h2--dark em { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M3 10C15 6 31 8 49 6S85 4 98 8C100 12 96 16 83 16S52 17 34 17 7 18 3 15C1 13 1 12 3 10Z' fill='%23f08a63' fill-opacity='.22'/%3E%3C/svg%3E"); }
/* Escritorio: el titular de cada hora, más grande (una idea por pantalla) */
@media (min-width: 1024px) { .l2-step h3 { font-size: clamp(2rem, 1.2rem + 1.1vw, 2.45rem); } .l2-step__copy p { font-size: 1.12rem; } }
/* Accesibilidad · dianas de 44 px (WCAG 2.5.5): un área invisible alrededor
   de los controles pequeños, sin mover nada de sitio; y alto de 44 px en los
   que pueden crecer sin cambiar el diseño. */
.l2-hp__dots button, .l2-hp__play, .l2-src__btn, .l2-tr, .l2-rail a, .l2-logo { position: relative; }
.l2-hp__dots button::after, .l2-hp__play::after, .l2-src__btn::after, .l2-tr::after, .l2-rail a::after, .l2-logo::after { content: ""; position: absolute; }
.l2-hp__dots button::after { inset: -10px -2px; }
.l2-hp__play::after { inset: -10px -4px; }
.l2-src__btn::after { inset: -7px -2px; }
.l2-tr::after { inset: -4px -2px; }
.l2-rail a::after { inset: -5px 0; }
.l2-logo::after { inset: -7px -4px; }
.l2-nav .l2-btn--sm, .l2-period button, .l2-skip { min-height: 44px; }
.l2-skip { display: inline-flex; align-items: center; }
.l2-calc__n input { height: 44px; }
.l2-foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.l2-foot nav { row-gap: 0; }
/* Entre secciones de papel: un trazo de pincel corto (el mismo de la
   acuarela), en vez de un corte en seco. Sin descargas: SVG en línea. */
.l2-noche + .l2-sec, .l2-sec + .l2-sec { position: relative; }
.l2-noche + .l2-sec::before, .l2-sec + .l2-sec::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(168px, 44%); height: 12px; transform: translate(-50%, -50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7C10 4 22 5 34 5S58 3 72 4 98 4 110 5 119 6 118 7 106 9 92 8 66 9 48 9 20 10 8 9 1 8 2 7Z' fill='%23c9a98e' fill-opacity='.42'/%3E%3Cpath d='M14 7C40 6 70 6 104 6' stroke='%23b98d6e' stroke-opacity='.3' stroke-width='.8' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* Sin WebGL (versión plana), en móvil la luna y las «z» del cierre se
   pintaban ENCIMA de la ficha (la escena va en absoluto y la ficha no): la
   ficha, siempre delante. */
.l2-final__wrap { position: relative; z-index: 1; }

/* ═════════ Ronda 12 · robustez ═════════ */
/* JS que no llega (bloqueado, red muy lenta, navegador sin módulos): a los
   4 s el seguro de la cabecera pone «l2-tarde» y todo se ve, quieto. */
.l2-tarde .rv, .l2-tarde .rv.is-in { opacity: 1; transform: none; transition: none; }
.l2-tarde .l2-step .l2-slot > .l2-b, .l2-tarde .l2-step .l2-src, .l2-tarde .l2-step .l2-note { opacity: 1; transform: none; }
.l2-tarde .l2-step .l2-typing, .l2-tarde .l2-step.is-typing .l2-typing { opacity: 0; }
.l2-tarde .l2-mix__s { transform: none; }
/* Letra muy grande o pantallas estrechas: una palabra larga de un titular
   («duermes.») se parte antes que salirse de la pantalla. Con la letra
   normal no cambia nada (solo actúa si la palabra no cabe sola). */
h1, h2, h3 { overflow-wrap: break-word; }
/* Pantalla muy baja (zoom al 400 %, móvil tumbado con teclado): el botón
   fijo de abajo taparía media pantalla; el de la cabecera sigue ahí. */
@media (max-height: 340px) { .l2-sticky { display: none; } }
/* Colores forzados (alto contraste de Windows): el logo es un dibujo negro
   que desaparecía sobre el fondo negro; y la barra del deslizador. */
@media (forced-colors: active) {
  .l2-logo img { forced-color-adjust: none; background: #fff; border-radius: 6px; padding: 2px 4px; }
  .l2-calc__n input { forced-color-adjust: auto; -webkit-appearance: auto; appearance: auto; }
  .l2-calc__n input::-webkit-slider-runnable-track { background: CanvasText; }
}
/* Letra al 200 % (WCAG 1.4.4): nada se sale por la derecha. Con la letra
   normal estas reglas no mueven nada (solo actúan si algo no cabe). */
@media (max-width: 18em) {
  /* 18 em = 288 px con la letra normal (ningún móvil): solo con la letra
     muy grande la cabecera enseña el símbolo del logo y deja sitio al botón */
  .l2-nav .l2-logo { flex: none; width: 30px; overflow: hidden; }
  .l2-nav .l2-logo img { max-width: none; }
}
.l2-plan > *, .l2-proof__grid > *, .l2-stat > * { min-width: 0; }
.l2-plan__price, .l2-stat { flex-wrap: wrap; }
/* «Conoce a tu equipo» a 320-379 px: «Recepcionista» y «Coordinador» eran
   más anchos que su cuarto de fila y se montaban sobre el vecino. Cada
   columna, del ancho de su nombre; con la letra muy grande, dos por fila. */
@media (max-width: 379px) { .l2-cast { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: .3rem; } }
/* (385 px y 24 em a la vez solo se cumple con la letra agrandada) */
@media (max-width: 18em), (min-width: 385px) and (max-width: 24em) {
  .l2-cast { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; row-gap: 1rem; }
  .l2-cast b, .l2-cast span { overflow-wrap: anywhere; }
}
/* Las cuatro horas de «Una noche» con la letra muy grande: dos por fila */
@media (max-width: 18em) { .l2-rail ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Con la letra grande, las etiquetas de los dibujos planos (escondidos
   detrás de la oficina 3D) y la leyenda de «Un mes real» ensanchaban la
   página. Nada de la portada puede salirse de lado. */
.l2-hero { overflow-x: clip; }
@media (min-width: 760px) { .l2-mix__key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* «Letra grande» = poco ancho medido en em. Con la letra normal (16 px)
   estas consultas solo se cumplen por debajo del punto en que ya se usa
   una columna, así que no cambian nada; con la letra al 200 % ponen en una
   columna lo que no cabe en tres. */
@media (max-width: 40em) { .l2-mix__key { grid-template-columns: 1fr; } }
@media (max-width: 45em) { .l2-plans { grid-template-columns: 1fr; } }
@media (max-width: 18em) {
  .l2-cast b, .l2-ch__top h3, .l2-ficha dd, .l2-ficha dt { overflow-wrap: anywhere; }
  .l2-ficha, .l2-ficha > div, .l2-ficha > div > * { min-width: 0; }
}
/* JS que llega tarde (red lenta): lo que el JS va a poner ya ocupa su sitio
   desde el primer pintado, para que al llegar no se mueva nada (antes, con el
   JS a los 7 s, la página saltaba: CLS 0,29). «js» lo pone la cabecera. */
html:not(.js) .l2-conjs, .js .l2-sinjs { display: none; }
.js .l2-calc[hidden] { display: grid; }
@media (max-width: 699px) {
  .js .l2-tira__hint { min-height: 44px; margin: -.5rem 0 -.15rem; }
  .js .l2-sub + .l2-tira__hint { margin-top: -.9rem; }
  .js .l2-tira__dots .l2-tira__hint { margin: 0 auto 0 0; }
}
/* Ronda 12 · repaso: letra al 200 % en un móvil (≈ 12 em de ancho). Con la
   letra normal estas consultas no se cumplen en ninguna pantalla (14 em =
   224 px; 18 em = 288 px). «Recepcionista» y «Gratis» ya no se parten a
   trozos, y el botón fijo de abajo (que ocupaba dos líneas y tapaba texto)
   se va: el «Empieza gratis» de la cabecera sigue a mano. */
@media (max-width: 14em) {
  .l2-cast { grid-template-columns: minmax(0, 1fr); }
  .l2-cast b, .l2-cast span { overflow-wrap: normal; }
}
@media (max-width: 18em) {
  .l2-plan > h3, .l2-plan > .l2-plan__price { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .l2-sticky { display: none; }
  /* Mensual / Anual, uno encima del otro (lado a lado empujaban la
     calculadora fuera de la tarjeta); la píldora baja en vez de ir a la derecha */
  .l2-period { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; justify-self: stretch; border-radius: 22px; }
  .l2-period::before { right: 4px; width: auto; bottom: auto; height: calc(50% - 4px); border-radius: 18px; }
  .l2-period[data-on="a"]::before { transform: translateY(100%); }
  .l2-period button { border-radius: 18px; }
  .l2-calc__n { grid-template-columns: minmax(0, 1fr); }
  .l2-final__team { flex-wrap: wrap; }
}

/* ═════════ ronda 14 · acabado en el móvil ═════════ */
/* 1 · «Ejemplo», pegatina en el canto de cada móvil (antes, dentro de la barra
   del chat: le comía el sitio al nombre y a 320 px se leía «Pisos d…»,
   «Lukas…», «Tu tab…»; y en la portada medía 8,5 px). Mismo texto, 11 px. */
.l2-phone { position: relative; }
.l2-ej--tab { position: absolute; z-index: 4; top: 0; right: 30px; font-size: 11px; padding: .2rem .55rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -8px rgba(90,60,20,.55); }
.l2-hp > .l2-ej--tab { top: -17px; right: 14px; }
@media (min-width: 1024px) { .l2-phone > .l2-ej--tab { top: 24px; right: 52px; } }
/* 2 · Letras de servicio («Pausar», «Ejemplo · datos inventados», la ficha del
   dato, «desliza»): nada por debajo de 11 px (había de 9,5 y 10 px). */
.l2-hp__play, .l2-hp__ej, .l2-phone__cap, .l2-dato__k, .l2-noche__hint, .l2-ficha dt, .l2-vs__legend { font-size: 11px; }
.l2-hp__play { letter-spacing: .03em; padding: 0 .5rem; }
.l2-hp__ej { letter-spacing: .05em; }
/* 3 · Los dos botones, del mismo ancho cuando bajan de línea (a 320 px y en el
   cierre quedaban uno largo y otro corto); en una fila, llegan al margen. */
@media (max-width: 759px) { .l2-hero__ctas > .l2-btn { flex: 1 1 auto; } }
/* 4 · Respuesta al dedo, inmediata, en todo lo que se toca (antes, solo los
   botones grandes y las tarjetas: 9 de 62). «scale» suelto no pisa los
   «transform» que ya llevan (el botón fijo sube y baja con transform). */
.l2-rail a { transition: color .2s ease, background-color .25s ease, scale .3s var(--ease-out); }
.l2-period button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, scale .3s var(--ease-out); }
.l2-tr { transition: background-color .2s ease, border-color .2s ease, scale .3s var(--ease-out); }
.l2-sellos a { transition: border-color .2s ease, color .2s ease, scale .3s var(--ease-out); }
.l2-src__btn, .l2-hp__play, .l2-nav__login, .l2-logo { transition: scale .3s var(--ease-out); }
.l2-sticky { transition: transform .35s var(--ease-out), opacity .25s ease, scale .3s var(--ease-out); }
.l2-hp__dots button::before, .l2-tira__dots button::before { transition: width .3s var(--ease-out), background-color .2s ease, scale .25s var(--ease-out); }
.l2-rail a:active, .l2-period button:active, .l2-tr:active, .l2-src__btn:active, .l2-hp__play:active, .l2-sellos a:active,
.l2-nav__login:active, .l2-logo:active { scale: .95; transition-duration: .06s; }
.l2-sticky:active { scale: .97; transition-duration: .06s; }
.l2-hp__dots button:active::before, .l2-tira__dots button:active::before { scale: 1.5; transition-duration: .06s; }
.l2-faq summary { transition: color .2s ease, background-color .25s ease, box-shadow .25s ease; }
.l2-faq summary:active { --t: rgba(120,90,50,.07); background-color: var(--t); box-shadow: calc(-1 * var(--gutter)) 0 0 var(--t), var(--gutter) 0 0 var(--t); transition-duration: .06s; }
.l2-foot a, .l2-plans__note a, .l2-seg__i a, .l2-dato__s a, .l2-ficha a, .l2-b__priv a { transition: opacity .2s ease; }
.l2-foot a:active, .l2-plans__note a:active, .l2-seg__i a:active, .l2-dato__s a:active, .l2-ficha a:active, .l2-b__priv a:active { opacity: .55; transition-duration: .06s; }
@media (prefers-reduced-motion: reduce) { .l2-rail a, .l2-period button, .l2-tr, .l2-sellos a, .l2-src__btn, .l2-hp__play, .l2-nav__login, .l2-logo, .l2-faq summary { transition: none; } }
/* 5 · Foco visible también sobre tinta: en «Un mes real» el anillo era negro
   sobre negro; el botón fijo pasa por papel y por tinta → anillo de dos tonos. */
.l2-proof :focus-visible { outline-color: #fff; }
.l2-sticky:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 14px 30px -10px rgba(10,10,10,.5); }
/* 6 · Ritmo de 4 px en el móvil: los rellenos y márgenes que más se repiten
   (tarjetas, filas, fichas, preguntas) caen en la rejilla de 4/8 px; antes,
   1 de cada 4 (0,3 · 0,45 · 0,7 · 1,1 rem = 4,8 · 7,2 · 11,2 · 17,6 px). */
@media (max-width: 959px) {
  .l2-btn { gap: .5rem; }
  .l2-hero__ctas { gap: .75rem; }
  .l2-sub { margin-bottom: 1.25rem; }
  .l2-noche__head .l2-sub { margin-bottom: 1rem; }
  .l2-step__time { gap: .75rem; }
  .l2-step h3 { margin-bottom: .5rem; }
  .l2-vs__row { padding: .75rem 0; gap: .25rem; }
  .l2-ch__card { padding: 1.25rem 1.25rem 1rem; }
  .l2-ch__top { margin-bottom: .75rem; gap: .5rem .75rem; }
  .l2-ch__card p.l2-ch__now { margin-top: .75rem; padding-top: .5rem; gap: .5rem; }
  .l2-proof__grid .l2-stat { padding-top: .75rem; gap: .25rem; }
  .l2-ficha > div { padding: .5rem 0; gap: .75rem; }
  .l2-int__list li { padding: .75rem 0; }
  .l2-tira > .l2-ctl__i, .l2-tira > .l2-seg__i { padding: 1rem; }
  .l2-tira .l2-ctl__i h3, .l2-tira .l2-seg__i h3 { margin-bottom: .25rem; }
  .l2-tira .l2-seg__k { margin-bottom: .5rem; }
  .l2-plan { padding: 1rem; }
  .l2-plan__for { margin: .25rem 0 .5rem; }
  .l2-plan ul { gap: .25rem; margin-bottom: 1rem; }
  .l2-faq summary { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .l2-faq details p { margin-bottom: 1.25rem; }
}

/* ═════════ ronda 15 · portada del móvil sin saturar + «Pregunta como un huésped» ═════════ */
.l2-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* «escribiendo…» en la barra, como en WhatsApp, mientras el equipo contesta */
.l2-hp__esc { display: none; color: #1f7a4d; }
.l2-hp.is-esc .l2-hp__bar .l2-phone__who small:not(.l2-hp__esc) { display: none; }
.l2-hp.is-esc .l2-hp__esc { display: block; }
/* Los cuatro botones: preguntas típicas con su respuesta FIJA (sin IA, sin red) */
.l2-hp__ask { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.l2-hp__askt { grid-column: 1 / -1; font: 500 11px/1.4 'Geist Mono', ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; color: #5f5a52; }
.l2-hp__q { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 44px; padding: .375rem .5rem .375rem .75rem;
  font: 500 .8125rem/1.25 'Geist', 'Geist Fallback', system-ui, sans-serif; letter-spacing: -.005em; text-align: left; color: var(--ink);
  background: #fffdf8; border: 1px solid #e3d9c8; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, scale .3s var(--ease-out); }
.l2-hp__lang { flex: none; font: 500 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .04em; padding: .25rem .375rem; border-radius: 6px; background: #f1ebe0; color: #5f5a52; }
.l2-hp__q[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fffdf8; }
.l2-hp__q[aria-pressed="true"] .l2-hp__lang { background: rgba(255,255,255,.16); color: #fffdf8; }
@media (hover: hover) and (pointer: fine) { .l2-hp__q:hover:not([aria-pressed="true"]) { border-color: #c9bfae; background: #fff; } }
.l2-hp__q:active { scale: .96; transition-duration: .06s; }
.l2-hp__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.l2-hp__honest { font-size: .75rem; line-height: 1.45; color: var(--ink-4); }
html:not(.js) .l2-hp__ask { display: none; }
/* tras tocar una pregunta, la conversación se apoya abajo (junto a los botones) */
.js .l2-hp.is-tocado .l2-hs.is-fit { align-self: end; }
@media (prefers-reduced-motion: reduce) { .l2-hp__q { transition: none; } }
/* Sin JS: las cuatro conversaciones, seguidas; se deslizan dentro del móvil */
html:not(.js) .l2-hp__chat { display: flex; flex-direction: column; gap: .75rem; overflow-y: auto; }
html:not(.js) .l2-hs { visibility: visible; }

/* Móvil: primero la oficina ENTERA (nada encima de los cuatro) y debajo, en
   papel, el móvil de ejemplo con sus preguntas. Antes el móvil se apoyaba en
   el suelo de la oficina y, con el texto de al lado, tapaba media escena. La
   «mira» mantiene el alto de siempre (más alta, la cámara se acerca y se
   salen dos trabajadores por los lados). El canto del móvil asoma al pie de
   la primera pantalla: invita a bajar. */
@media (max-width: 959px) {
  .l2-hero { --aim-h: 196px; --hp-top: calc(14px + var(--aim-h) + 44px); --hp-w: min(236px, 66vw); }
  .l2-hero__aim { height: var(--aim-h); }
  .l2-hero__fallback { height: calc(var(--aim-h) - 20px); }
  .l2-hero__stage { height: auto; padding: var(--hp-top) var(--gutter) 1.5rem; }
  .l2-hp { position: relative; top: auto; right: auto; width: auto; max-width: 26rem; margin: 0 auto; }
  .l2-hp > .l2-ej--tab { right: calc(50% - var(--hp-w) / 2 + 14px); }
  .l2-hp__screen { width: var(--hp-w); margin: 0 auto; }
  .l2-hp__cap { position: static; width: auto; max-width: none; margin: .75rem 0 0; gap: .75rem; }
  .l2-hp__res > span { justify-content: center; text-align: center; font-size: .8125rem; padding: 0 .5rem; }
  .l2-hp__ctl { justify-content: center; padding: 0; gap: .5rem; }
  .l2-hp__honest { text-align: center; margin-top: -.5rem; padding: 0 .5rem; }
  /* el móvil y sus preguntas, sobre papel: la oficina se deshace en él (al
     bajar, la oficina ya no se ve por detrás de los botones) */
  .l2-hero__stage::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--hp-top) - 56px); bottom: 0; pointer-events: none;
    background: linear-gradient(rgba(251,248,242,0), var(--paper-2) 56px); }
  .l2-hp { z-index: 2; }
}
@media (max-width: 959px) and (max-width: 18em) { .l2-hp__ask { grid-template-columns: 1fr; } }
/* Escritorio: las preguntas, debajo del móvil (el móvil encoge para que todo
   quepa en la primera pantalla también en portátiles de 720 px de alto) */
@media (min-width: 960px) {
  /* bandeja de papel bajo el móvil: los botones no se leen sobre el dibujo */
  .l2-hp__cap { gap: .625rem; margin-top: .75rem; padding: .75rem; border-radius: 18px; background: rgba(251,248,242,.94); box-shadow: 0 0 0 1px rgba(120,90,50,.08), 0 14px 30px -18px rgba(70,40,10,.35); }
  .l2-hp__screen { height: clamp(300px, calc(100svh - var(--nav-h) - 380px), 440px); min-height: 0; }
  /* cada pregunta en UNA línea (antes tres de cuatro partían en dos y la
     bandeja se leía apretada): letra de 12 px y el idioma sin cajita */
  .l2-hp__q { font-size: .75rem; white-space: nowrap; gap: .375rem; padding: .375rem .5rem .375rem .625rem; }
  .l2-hp__lang { padding: 0; background: none; }
  .l2-hp__q[aria-pressed="true"] .l2-hp__lang { background: none; color: rgba(255,253,248,.7); }
}

/* Ronda 13 · el aviso de cookies con la letra al 200 % o con el zoom al
   400 %. El aviso es común a toda la web (partials/cookie_banner.html, con su
   propio <style>) y NO se toca; esta hoja solo la carga la portada, así que
   estas reglas solo valen aquí («body .abnb-…» gana a «.abnb-…» aunque el
   <style> del aviso venga después). Las consultas están en em, que miran la
   letra del navegador: con la letra normal solo se cumplen en pantallas bajas
   (≤ 480 px de alto, p. ej. un móvil apaisado) y ahí el aviso, si cabe, queda
   igual salvo el margen del borde del iPhone y los botones de 44 px.
   Lo que se arregla:
   · antes «Aceptar» se salía por la derecha (dos botones de ~190 px en 252 px
     de sitio) y el aviso crecía hasta por encima de la pantalla;
   · ahora el texto tiene su propio scroll y los botones se quedan siempre
     abajo, a la vista y pulsables. */
@media (max-width: 18em), (max-height: 30em) {
  body .abnb-cookie-banner {
    left: var(--gutter); right: var(--gutter);
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 32px);
    max-height: min(70dvh, calc(100dvh - 32px - env(safe-area-inset-bottom, 0px)));
    overflow-y: auto; overscroll-behavior: contain;
    scroll-padding-bottom: 6.5rem;
  }
  /* Los botones se quedan pegados abajo mientras el texto se desliza por
     detrás (Chrome mide «bottom» desde el borde de dentro del relleno del
     aviso); su sombra del mismo color tapa ese relleno de debajo, para que el
     texto no asome por ahí. */
  body .abnb-cookie-btns {
    position: sticky; bottom: 0; z-index: 1;
    background: #1c1917; box-shadow: 0 1rem 0 #1c1917;
  }
  body .abnb-cookie-btn { min-height: 44px; }
  body .abnb-cookie-btn:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
  body .abnb-cookie-txt a:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; border-radius: 3px; }
}
/* Letra muy grande: el texto ocupa todo el ancho y los botones, uno encima
   del otro (lado a lado no cabían) */
@media (max-width: 18em) {
  body .abnb-cookie-banner { padding: .75rem 1rem; }
  body .abnb-cookie-inner { gap: 1rem; }
  body .abnb-cookie-txt { min-width: 0; flex-basis: 100%; }
  body .abnb-cookie-btns { flex-direction: column; width: 100%; gap: .5rem; }
  body .abnb-cookie-btn { flex: none; width: 100%; padding: .4rem .9rem; }
}