/* ═══════════════════════════════════════════════════════════════
   lb-students.css — LetsBoxIt Students · piezas compuestas del nicho
   Maquetación que las páginas de Students necesitan además de lo que ya
   trae assets/lb-marca.css. NO es estética nueva: solo tokens var(--lb-*),
   las variables de apoyo de lb-marca.css (--lb-maxw, --lb-gutter, --lb-linea,
   --lb-r-tarjeta, --lb-ease...) y las mismas reglas del kit.

   Uso (siempre DESPUÉS de lb-marca.css):
     <link rel="stylesheet" href="/assets/lb-marca.css">
     <link rel="stylesheet" href="/assets/lb-students.css">
     <body class="lb-lienzo" data-nicho="students">
     <script src="/assets/lb-students.js" defer></script>   (cabecera, pie y barra móvil)

   Reglas del kit que este fichero cumple (las vigila tests/smoke-marca.php):
   - Sin sombras (solo el anillo de :focus-visible, igual que lb-marca.css),
     sin fondos degradados y sin hex de marca sueltos: todo el color sale de
     los tokens.
   - Tarjetas con radio var(--lb-r-tarjeta) (24 px); botones y selectores en píldora.
   - Acento solo en .lb-destacado (lo pone la página) y en el anillo de foco.
     Todo lo de este fichero va en tinta o gris.
   - Todo movimiento se anula con prefers-reduced-motion.
   - Sin scroll horizontal a 360 px.

   Índice de piezas:
     .lb-st-dos        dos columnas texto + media (--invertido)
     .lb-st-foto       foto real con pie; .lb-st-fotos rejilla de 3
     .lb-st-lista      lista con tic fino (--grande)
     .lb-st-tabla      tabla sobria (+ .lb-st-tabla-envoltorio)
     .lb-st-ejemplo    tarjeta de desglose (el ejemplo de 273 €: 7 cajas × 39 €)
     .lb-st-nota       nota pequeña en gris (y la regla de los enlaces dentro de frases)
     .lb-st-cierre     sección final centrada
     .lb-st-tarjetas   rejilla de tarjetas de texto
     .lb-st-equipo     las dos personas, con foto
     .lb-st-idioma     selector ES · EN · FR de la cabecera
     .lb-st-contador   − número + de la calculadora
     .lb-st-bruno      sitio de Bruno dentro de una sección
     .lb-st-migas      miga de pan
     .lb-st-barra      barra fija de reserva (solo móvil)
     .lb-st-saltar     enlace «Saltar al contenido»
     .lb-st-pie-*      contacto y botones del pie (los pinta lb-students.js)
     .lb-st-centro, .lb-st-mt   utilidades

   Piezas nuevas de la web v2 (contrato: docs/superpowers/specs/2026-10-03-web-students-v2-piezas.md;
   se montan con assets/lb-students-piezas.js, y sin JavaScript se leen igual):
     [data-lb-aparece] aparición suave al hacer scroll (§1)
     .lb-st-caja       la Caja LetsBoxIt dibujada, con su lista (§2)
     .lb-st-kit        el kit: cajas, cinta, precinto y papel burbuja (§3)
     .lb-st-video      vídeo con póster y pasos (§4)
     .lb-st-verano     línea de tiempo «Tu verano con LetsBoxIt»: escritorio con el momento fijo, móvil con tarjetas (§5)
     .lb-st-modos      pestañas «Puerta a puerta» / «Residencia partner» (§6)
     .lb-st-niveles    tabla de los dos niveles (§7)
     .lb-st-calc       calculadora «¿Cuánto te cuesta tu última semana?» (§8)
     .lb-st-antes      antes y después con deslizador (§9)
     .lb-st-hueco      hueco de foto o de logo que se rellena solo (§10)
     .lb-st-padres     botón «Envíaselo a tus padres» (§11)
     .lb-st-xior       franja de la residencia partner (§13); --pantalla: sección entera con el dibujo de la habitación
     .lb-asoma         Bruno que se asoma en el móvil (≤ 720 px) con un consejo por sección (§18)
     .lb-st-pagos      los tres pasos de pago (§14)
     .lb-st-tareas     «Tu lista de junio»: la lista que se tacha y se encoge con el scroll de la página (§19)
     .lb-st-mapa       «Vuestro verano, en coche»: mapa de la península con los cuatro viajes (§20)
     .lb-st-semana     «Tu última semana, en tu calendario»: dos semanas, la de siempre y la de LetsBoxIt (§21)
     .lb-st-esc        pista alta y sticky común a esas tres escenas (las crea el JS)
     .lb-st-frase      frase grande de una sola idea (§15)
     portada en móvil: Bruno pequeño debajo de las acciones (§16)
   ═══════════════════════════════════════════════════════════════ */

/* Caja de las piezas nuevas (lb-marca.css solo lo hace para las suyas) */
.lb-st-dos, .lb-st-dos *, .lb-st-foto, .lb-st-foto *, .lb-st-fotos, .lb-st-fotos *,
.lb-st-lista, .lb-st-lista *, .lb-st-tabla-envoltorio, .lb-st-tabla-envoltorio *,
.lb-st-ejemplo, .lb-st-ejemplo *, .lb-st-nota, .lb-st-tarjetas, .lb-st-tarjetas *,
.lb-st-equipo, .lb-st-equipo *, .lb-st-idioma, .lb-st-idioma *,
.lb-st-contador, .lb-st-contador *, .lb-st-migas, .lb-st-migas *,
.lb-st-barra, .lb-st-barra *, .lb-st-pie-contacto, .lb-st-pie-contacto *,
.lb-st-pie-boton, .lb-st-saltar {
  box-sizing: border-box;
}

/* ═══ Dos columnas ════════════════════════════════════════════════
   <div class="lb-st-dos [lb-st-dos--invertido]">
     <div class="lb-st-dos__texto"> titular, frase y .lb-st-lista </div>
     <div class="lb-st-dos__media"> <figure class="lb-st-foto">…</figure> </div>
   </div>
   Texto a un lado y media (foto, Bruno, ejemplo) al otro, con mucho aire.
   Por debajo de 900 px se apilan en una columna y el texto va siempre primero.
   --invertido pone la media a la izquierda en escritorio. */
.lb-st-dos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(40px, 6vw, 96px);
}
.lb-st-dos--invertido > :first-child { order: 2; }
.lb-st-dos__texto, .lb-st-dos__media { min-width: 0; }
.lb-st-dos .lb-seccion__sub { margin-bottom: 28px; }
.lb-st-dos__texto > :last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .lb-st-dos { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lb-st-dos--invertido > :first-child { order: 0; }
}

/* ═══ Foto real ═══════════════════════════════════════════════════
   <figure class="lb-st-foto">
     <img src="/assets/img/real/almacen-general.jpg" alt="Descripción real de la foto" width="800" height="600" loading="lazy">
     <figcaption>Pie de foto en gris.</figcaption>
   </figure>
   <div class="lb-st-fotos"> <figure class="lb-st-foto">…</figure> ×3 </div>
   Imagen con radio de tarjeta y proporción 4:3 (recortada con object-fit).
   Pon siempre width y height reales para que la página no salte al cargar.
   Solo fotos reales: nada de ilustraciones de archivo. */
.lb-st-foto { margin: 0; }
.lb-st-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
}
.lb-st-foto figcaption {
  margin-top: 12px;
  color: var(--lb-gris);
  font-size: 15px;
  line-height: 1.4;
}
.lb-st-fotos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) {
  .lb-st-fotos { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ═══ Lista con tic ═══════════════════════════════════════════════
   <ul class="lb-st-lista [lb-st-lista--grande]">
     <li>Una ventaja en una frase</li> …
   </ul>
   Tic fino dibujado con bordes (igual que .lb-precio__lista): en tinta, sin
   imágenes. --grande: texto de 20 px para listas que son el centro de la sección. */
.lb-st-lista { margin: 0; padding: 0; list-style: none; font-family: var(--lb-fuente); }
.lb-st-lista li {
  position: relative;
  padding: 8px 0 8px 34px;
  color: var(--lb-tinta);
  font-size: 17px;
  line-height: 1.5;
}
.lb-st-lista li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(8px + .45em);
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--lb-tinta);
  border-bottom: 2px solid var(--lb-tinta);
  transform: rotate(45deg);
}
.lb-st-lista--grande li { padding: 10px 0 10px 42px; font-size: 20px; line-height: 1.45; }
.lb-st-lista--grande li::before {
  left: 10px;
  top: calc(10px + .45em);
  width: 7px;
  height: 13px;
}

/* ═══ Tabla sobria ════════════════════════════════════════════════
   <div class="lb-st-tabla-envoltorio" tabindex="0" role="region" aria-label="Precio de los bultos sueltos">
     <table class="lb-st-tabla">
       <caption>Precios con IVA incluido.</caption>
       <thead><tr><th scope="col">Bulto</th><th scope="col" class="lb-st-tabla__num">Precio</th></tr></thead>
       <tbody><tr><th scope="row">Silla</th><td class="lb-st-tabla__num">22 €</td></tr></tbody>
     </table>
   </div>
   Líneas finas, cabecera en gris y cifras alineadas a la derecha con números
   tabulares (.lb-st-tabla__num en th y td). El envoltorio hace scroll lateral
   SOLO si la tabla no cabe (y es enfocable con teclado); así la página nunca
   desborda. --ancha (en la tabla) fuerza un mínimo de ancho para comparativas
   de 3 o más columnas. */
.lb-st-tabla-envoltorio {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lb-st-tabla-envoltorio:focus-visible {
  outline: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-seccion--gris .lb-st-tabla-envoltorio:focus-visible {
  box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-tabla {
  width: 100%;
  border-collapse: collapse;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.lb-st-tabla--ancha { min-width: 560px; }
.lb-st-tabla caption {
  padding-top: 16px;
  color: var(--lb-gris);
  font-size: 15px;
  text-align: left;
  caption-side: bottom;
}
.lb-st-tabla th, .lb-st-tabla td {
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--lb-linea);
  font-weight: 500;
  text-align: left;
  vertical-align: baseline;
}
.lb-st-tabla thead th {
  color: var(--lb-gris);
  font-size: 15px;
  font-weight: 600;
}
.lb-st-tabla tbody th { color: var(--lb-tinta); }
.lb-st-tabla th:last-child, .lb-st-tabla td:last-child { padding-right: 0; }
.lb-st-tabla .lb-st-tabla__num { text-align: right; white-space: nowrap; }
.lb-st-tabla tbody td.lb-st-tabla__num { font-weight: 600; }

/* ═══ Ejemplo con desglose ════════════════════════════════════════
   <article class="lb-st-ejemplo">
     <p class="lb-st-ejemplo__titulo">Un ejemplo real</p>
     <dl class="lb-st-ejemplo__filas">
       <div class="lb-st-ejemplo__fila"><dt>7 cajas × 39 €</dt><dd>273 €</dd></div>
       <div class="lb-st-ejemplo__fila"><dt>Pagado al reservar</dt><dd>20 €</dd></div>
       <div class="lb-st-ejemplo__fila lb-st-ejemplo__total"><dt>El día de la recogida</dt><dd>253 €</dd></div>
     </dl>
   </article>
   Tarjeta con el desglose «concepto … importe»; la última fila (total) va en
   negrita y con una línea fina de tinta encima. */
.lb-st-ejemplo {
  max-width: 560px;
  padding: 32px;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-st-ejemplo__titulo { margin: 0 0 16px; color: var(--lb-gris); font-size: 15px; font-weight: 600; }
.lb-st-ejemplo__filas { margin: 0; }
.lb-st-ejemplo__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 10px 0;
  font-size: var(--lb-t-cuerpo);
  line-height: 1.4;
}
.lb-st-ejemplo__fila dt { min-width: 0; }
.lb-st-ejemplo__fila dd {
  flex: none;
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.lb-st-ejemplo__total {
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1.5px solid var(--lb-tinta);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.lb-st-ejemplo__total dd { font-weight: 700; }
.lb-st-ejemplo > :last-child { margin-bottom: 0; }

/* ═══ Nota ════════════════════════════════════════════════════════
   <p class="lb-st-nota">Estimación de LetsBoxIt, septiembre de 2026.</p>
   Letra pequeña en gris (15 px) y máximo 640 px de ancho. */
.lb-st-nota {
  max-width: 640px;
  margin: 24px 0 0;
  color: var(--lb-gris);
  font-family: var(--lb-fuente);
  font-size: 15px;
  line-height: 1.5;
}

/* ═══ Enlaces dentro de una frase ═════════════════════════════════
   Un enlace metido en un párrafo (o en una lista de frases) lleva un subrayado fino:
   excepción documentada por accesibilidad (WCAG 1.4.1: un enlace dentro de una frase
   debe distinguirse sin depender del color). Subrayado de 1 px en gris, texto en tinta;
   al pasar el ratón el subrayado se oscurece. Solo enlaces sin clase: los botones, los
   enlaces con flecha y las tarjetas no se tocan. Las páginas no repiten esta regla. */
.lb-lienzo main p a:not([class]),
.lb-lienzo main .lb-st-lista li a:not([class]) {
  color: var(--lb-tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lb-gris);
  text-underline-offset: .2em;
}
.lb-lienzo main p a:not([class]):hover,
.lb-lienzo main .lb-st-lista li a:not([class]):hover {
  text-decoration-color: var(--lb-tinta);
}

/* ═══ Cifras y reseñas, un solo bloque ════════════════════════════
   La franja .lb-cifras va justo encima del carrusel de reseñas y se lee con él como una
   sola prueba social: sin titular de sección en medio (solo, si hace falta, una línea
   pequeña .lb-st-nota «Estas son sus reseñas en Google, tal cual.» al principio de la
   sección del carrusel) y con poco aire entre las dos piezas. */
.lb-cifras:has(+ .lb-resenas),
.lb-cifras:has(+ .lb-seccion .lb-resenas) { padding-bottom: 24px; }
.lb-cifras + .lb-resenas { padding-top: 8px; }
.lb-cifras + .lb-seccion:has(.lb-resenas) { padding-top: 0; }
.lb-cifras + .lb-seccion:has(.lb-resenas) .lb-resenas { padding-top: 24px; }
.lb-cifras + .lb-seccion:has(.lb-resenas) .lb-seccion__in > .lb-st-nota:first-child { margin: 0; }

/* ═══ Cierre ══════════════════════════════════════════════════════
   <section class="lb-seccion lb-st-cierre"><div class="lb-seccion__in">
     <h2 class="lb-seccion__titulo">¿Te vas este verano? Resérvalo con 20 €.</h2>
     <p class="lb-seccion__sub">Una frase en gris.</p>
     <div class="lb-hero__acciones">
       <a class="lb-btn lb-btn--principal" href="/reserva">Reservar con 20 €</a>
       <a class="lb-enlace-flecha" href="https://wa.me/34664530600">Escríbenos por WhatsApp<svg …/></a>
     </div>
   </div></section>
   Última sección de la página: todo centrado. Reutiliza .lb-seccion (titular de
   tamaño --lb-t-h2, frase gris) y .lb-hero__acciones. Siempre dos acciones. */
.lb-st-cierre { text-align: center; }
.lb-st-cierre .lb-seccion__in { max-width: 820px; }
.lb-st-cierre .lb-seccion__titulo { margin-inline: auto; }
.lb-st-cierre .lb-seccion__sub { margin: 0 auto 32px; }
.lb-st-cierre .lb-hero__acciones { justify-content: center; }

/* ═══ Tarjetas de texto ═══════════════════════════════════════════
   <ul class="lb-st-tarjetas">
     <li class="lb-st-tarjeta">
       <span data-lb-icono="escudo"></span>                 (opcional)
       <h3>Titular corto</h3>
       <p>Una o dos frases en gris.</p>
     </li> …
   </ul>
   Dos o tres tarjetas de texto genéricas (alternativas, garantías, motivos).
   Sube 4 px al pasar el ratón, igual que .lb-pasos__paso. Iconos en tinta. */
.lb-st-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-st-tarjeta {
  padding: 32px 28px;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  transition: transform .5s var(--lb-ease);
}
@media (hover: hover) {
  .lb-st-tarjeta:hover { transform: translateY(-4px); }
}
.lb-st-tarjeta > [data-lb-icono] { display: block; margin-bottom: 20px; --lb-icono-tam: 48px; }
.lb-st-tarjeta h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.lb-st-tarjeta p { margin: 0; color: var(--lb-gris); font-size: var(--lb-t-cuerpo); line-height: 1.5; }

/* ═══ Equipo ══════════════════════════════════════════════════════
   <ul class="lb-st-equipo">
     <li class="lb-st-equipo__persona">
       <img class="lb-st-equipo__foto" src="/assets/img/gonzalo.jpg" alt="Gon" width="140" height="140" loading="lazy">
       <div><p class="lb-st-equipo__nombre">Gon</p><p class="lb-st-equipo__rol">Cofundador</p></div>
     </li> …
   </ul>
   Dos personas con nombre y cara (a los padres les importa quién toca sus
   cosas). Foto redonda de 140 px (112 px en móvil); nombre en tinta, rol en gris. */
.lb-st-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--lb-fuente);
}
.lb-st-equipo__persona { display: flex; align-items: center; gap: 20px; min-width: 0; }
.lb-st-equipo__foto {
  display: block;
  flex: none;
  width: 140px;
  height: 140px;
  border-radius: var(--lb-r-pildora);
  object-fit: cover;
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
}
.lb-st-equipo__nombre { margin: 0; color: var(--lb-tinta); font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.lb-st-equipo__rol { margin: 4px 0 0; color: var(--lb-gris); font-size: var(--lb-t-cuerpo); line-height: 1.4; }
@media (max-width: 720px) {
  .lb-st-equipo { gap: 24px; }
  .lb-st-equipo__foto { width: 112px; height: 112px; }
}

/* ═══ Selector de idioma ══════════════════════════════════════════
   <div class="lb-st-idioma" role="group" aria-label="Idioma">
     <a href="/students/" hreflang="es" lang="es" aria-current="true">ES</a><span class="lb-st-idioma__sep" aria-hidden="true">·</span>
     <a href="/en/" hreflang="en" lang="en">EN</a><span class="lb-st-idioma__sep" aria-hidden="true">·</span>
     <a href="/fr/" hreflang="fr" lang="fr">FR</a>
   </div>
   Lo pinta lb-students.js dentro de .lb-cab__in, entre el menú y el botón.
   Enlaces en gris de 14 px; el actual, en tinta y con aria-current.
   Escritorio: en la misma fila. Tablet y móvil ancho: junto al botón, en la fila
   del logo. Móvil estrecho (< 520 px): fila propia bajo el menú. */
.lb-st-idioma {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--lb-fuente);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
}
.lb-st-idioma a {
  padding: 4px 5px;
  border-radius: 6px;
  color: var(--lb-gris);
  line-height: 20px;
  text-decoration: none;
  transition: color .3s var(--lb-ease);
}
.lb-st-idioma a:hover { color: var(--lb-tinta); }
.lb-st-idioma a[aria-current] { color: var(--lb-tinta); font-weight: 600; }
.lb-st-idioma a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-idioma__sep { color: var(--lb-gris); line-height: 20px; }
.lb-cab__panel + .lb-cab__cta { margin-left: 0; }

/* ═══ Cabecera compartida (la pinta lb-students.js en [data-lb-cab]) ═══
   <div data-lb-cab></div>
   El contenedor reserva el alto real de .lb-cab para que la página no salte al
   pintarse (min-height; en cuanto la cabecera está pintada, lb-students.js marca
   data-lb-listo y la reserva se libera). Estructura que pinta el JS:
     .lb-cab__in > .lb-cab__logo + .lb-cab__panel (nav .lb-cab__menu + .lb-st-idioma)
                   + .lb-cab__cta + button.lb-cab__burger
   Las alturas son las de la cabecera con el menú de Students (5 enlaces) y el idioma:
     > 960 px: una fila (65 px) · 721-960 px: dos filas (111 px)
     ≤ 720 px: UNA fila de 57 px (logo, «Reservar» y botón «Menú»); el menú y el idioma viven
     en un panel a pantalla completa bajo la cabecera.
   El contenedor es el que se queda fijo arriba (sticky) en escritorio: si lo
   fuera la propia .lb-cab, como su padre mide lo mismo, no se pegaría.
   En escritorio y tablet el panel NO es una caja (display: contents): menú e idioma
   se colocan como hijos directos de la fila, igual que antes. */
[data-lb-cab] {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 65px;
}
[data-lb-cab] > .lb-cab { position: static; }
[data-lb-cab][data-lb-listo] { min-height: 0; }
.lb-cab__menu a[aria-current="true"] { color: var(--lb-tinta); }   /* sección actual (p. ej. una landing de residencia) */
.lb-cab__panel { display: contents; }
.lb-cab__burger { display: none; }

/* Con 5 enlaces + selector, el escritorio necesita huecos algo menores que los del kit */
@media (min-width: 961px) {
  .lb-cab__in { gap: 8px 16px; }
  .lb-cab__in .lb-cab__menu { gap: 4px 20px; }
}
/* Entre 961 y 1139 px los cinco enlaces, el selector y el botón apenas caben en una fila: huecos y letra algo menores */
@media (min-width: 961px) and (max-width: 1139px) {
  .lb-cab__in { gap: 8px 12px; }
  .lb-cab__in .lb-cab__menu { gap: 4px 14px; }
  .lb-cab__in .lb-cab__menu a { font-size: 14px; }
  .lb-cab__in .lb-st-idioma a { padding: 4px 3px; }
  .lb-cab__in > .lb-cab__cta { padding: 0 18px; }
}
/* Tablet y móvil ancho: logo, selector y botón arriba; menú debajo (como el kit en móvil) */
@media (max-width: 960px) {
  [data-lb-cab] { min-height: 111px; }
  .lb-cab__in .lb-cab__menu { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 0 22px; }
  .lb-cab__in .lb-st-idioma { margin-left: auto; }
}

/* Móvil (≤ 720 px): una sola fila de 57 px y el menú en un panel a pantalla completa */
@media (max-width: 720px) {
  [data-lb-cab] { position: static; min-height: 57px; }   /* como el kit: en móvil la cabecera no se queda fija (salvo con el menú abierto) */
  [data-lb-cab] > .lb-cab { position: relative; }
  .lb-cab__in { flex-wrap: nowrap; align-items: center; gap: 0 10px; padding: 6px 16px; }
  .lb-cab__logo { min-width: 0; }
  .lb-cab__nombre, .lb-cab__apellido { white-space: nowrap; }
  .lb-cab__in > .lb-cab__cta, .lb-cab__panel + .lb-cab__cta { flex: none; min-height: 40px; margin-left: auto; padding: 0 14px; font-size: 15px; }

  /* Botón «Menú»: dos líneas finas que se convierten en × */
  .lb-cab__burger {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 -10px 0 -2px;
    padding: 0;
    border: 0;
    border-radius: var(--lb-r-pildora);
    background: none;
    color: var(--lb-tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lb-cab__burger:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
  }
  .lb-cab__burger-lineas { position: relative; display: block; width: 20px; height: 12px; }
  .lb-cab__burger-lineas::before, .lb-cab__burger-lineas::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: top .4s var(--lb-ease), transform .4s var(--lb-ease);
  }
  .lb-cab__burger-lineas::before { top: 2.5px; }
  .lb-cab__burger-lineas::after { top: 8px; }
  .lb-cab__burger[aria-expanded="true"] .lb-cab__burger-lineas::before { top: 5.25px; transform: rotate(45deg); }
  .lb-cab__burger[aria-expanded="true"] .lb-cab__burger-lineas::after { top: 5.25px; transform: rotate(-45deg); }

  /* Panel: a pantalla completa bajo la cabecera, fondo blanco */
  .lb-cab__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    display: flex;
    flex-direction: column;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lb-blanco);
    opacity: 0;
    visibility: hidden;   /* cerrado: fuera también para el teclado y los lectores de pantalla */
    pointer-events: none;
    transition: opacity .3s var(--lb-ease), visibility 0s linear .3s;
  }
  .lb-cab-abierto .lb-cab__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .3s var(--lb-ease), visibility 0s;
  }
  .lb-cab__panel .lb-cab__menu { flex: none; flex-basis: auto; flex-direction: column; align-items: flex-start; gap: 0; order: 0; }
  .lb-cab__panel .lb-cab__menu a {
    padding: 12px 0;
    color: var(--lb-tinta);
    font-size: clamp(24px, 7vw, 28px);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .35s var(--lb-ease), transform .55s var(--lb-ease), color .3s var(--lb-ease);
  }
  .lb-cab-abierto .lb-cab__panel .lb-cab__menu a {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 70ms + 60ms);
  }
  .lb-cab__panel .lb-cab__menu a:nth-child(2) { --i: 1; }
  .lb-cab__panel .lb-cab__menu a:nth-child(3) { --i: 2; }
  .lb-cab__panel .lb-cab__menu a:nth-child(4) { --i: 3; }
  .lb-cab__panel .lb-cab__menu a:nth-child(5) { --i: 4; }
  /* El selector ES · EN · FR, abajo del panel */
  .lb-cab__panel .lb-st-idioma {
    align-self: flex-start;
    margin: auto 0 0 -10px;
    padding-top: 24px;
    font-size: 16px;
    opacity: 0;
    transition: opacity .35s var(--lb-ease);
  }
  .lb-cab-abierto .lb-cab__panel .lb-st-idioma { opacity: 1; transition-delay: 380ms; }
  .lb-cab__panel .lb-st-idioma a { padding: 10px; }
  /* Abierto: la cabecera se fija arriba (el hueco lo guarda min-height, que pone el JS) y la página no se desplaza */
  [data-lb-cab].lb-cab-abierto > .lb-cab { position: fixed; top: 0; left: 0; right: 0; z-index: 80; }
  html.lb-menu-abierto, html.lb-menu-abierto body { overflow: hidden; }
}
/* Móvil muy estrecho: sin el apellido, para que el logo, «Reservar» y «Menú» quepan en una fila */
@media (max-width: 349px) {
  .lb-cab__apellido { display: none; }
}

/* ═══ Contador − n + ══════════════════════════════════════════════
   <div class="lb-st-contador" role="group" aria-label="Cajas">
     <button type="button" class="lb-st-contador__btn lb-st-contador__btn--menos" aria-label="Quitar una caja"></button>
     <output class="lb-st-contador__num" aria-live="polite">7</output>
     <button type="button" class="lb-st-contador__btn lb-st-contador__btn--mas" aria-label="Añadir una caja"></button>
   </div>
   Dos botones circulares de 40 px con borde fino de tinta (como
   .lb-btn--secundario) y el número tabular en medio. El − y el + se dibujan
   con barras (sin texto): los botones necesitan siempre aria-label.
   Deshabilitado: <button disabled> baja la opacidad y no responde. */
.lb-st-contador {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--lb-fuente);
}
.lb-st-contador__btn {
  position: relative;
  display: inline-block;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--lb-tinta);
  border-radius: var(--lb-r-pildora);
  background: transparent;
  color: var(--lb-tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--lb-ease), background-color .3s var(--lb-ease), color .3s var(--lb-ease);
}
.lb-st-contador__btn::before, .lb-st-contador__btn--mas::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
}
.lb-st-contador__btn::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.lb-st-contador__btn--mas::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
@media (hover: hover) {
  .lb-st-contador__btn:hover { background: var(--lb-tinta); color: var(--lb-blanco); }
}
.lb-st-contador__btn:active { transform: scale(.94); }
.lb-st-contador__btn:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-contador__btn:disabled, .lb-st-contador__btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.lb-st-contador__num {
  display: inline-block;
  min-width: 2.2ch;
  color: var(--lb-tinta);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  text-align: center;
}

/* ═══ Sitio de Bruno en una sección ═══════════════════════════════
   <div class="lb-hero__bruno"><div class="lb-bruno-sitio lb-st-bruno" data-lb-bruno="students"
        data-lb-poses="reposo,saludar,senalar" data-lb-guion="guion-portada"></div></div>
   Ancho máximo 300 px en escritorio y 200 px en móvil, centrado en su columna.
   El hueco (proporción 7:10 y min-height de respaldo) lo reserva bruno.css con
   .lb-bruno-sitio: aquí no se repite. El selector doble gana a bruno.css aunque
   éste se cargue después (lo inyecta bruno-carga.js). */
.lb-st-bruno, .lb-bruno-sitio.lb-st-bruno {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
@media (max-width: 720px) {
  .lb-st-bruno, .lb-bruno-sitio.lb-st-bruno { max-width: 200px; }
}

/* ═══ Miga de pan ═════════════════════════════════════════════════
   <nav class="lb-st-migas" aria-label="Migas de pan"><ol>
     <li><a href="/residencias/">Residencias</a></li>
     <li aria-current="page">Nombre de la residencia</li>
   </ol></nav>
   Opcional, encima de la portada de las landings de residencia. 14 px en gris;
   la página actual en tinta. El separador es un chevron dibujado con bordes. */
.lb-st-migas {
  max-width: var(--lb-maxw);
  margin: 0 auto;
  padding: 20px var(--lb-gutter) 0;
  font-family: var(--lb-fuente);
  font-size: 14px;
  line-height: 1.4;
}
.lb-st-migas ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.lb-st-migas li { display: flex; align-items: center; color: var(--lb-gris); }
.lb-st-migas li + li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 12px 0 8px;
  border-top: 1.5px solid var(--lb-gris);
  border-right: 1.5px solid var(--lb-gris);
  transform: rotate(45deg);
}
.lb-st-migas a {
  padding: 6px 0;
  border-radius: 6px;
  color: var(--lb-gris);
  text-decoration: none;
  transition: color .3s var(--lb-ease);
}
@media (hover: hover) {
  .lb-st-migas a:hover { color: var(--lb-tinta); text-decoration: underline; text-underline-offset: 3px; }
}
.lb-st-migas a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-migas [aria-current="page"] { color: var(--lb-tinta); font-weight: 500; }

/* ═══ Barra fija de reserva (solo móvil) ══════════════════════════
   <div data-lb-barra></div>     (al final del body; lb-students.js pinta dentro:)
   <nav class="lb-st-barra" aria-label="Reservar">
     <a class="lb-btn lb-btn--principal lb-st-barra__reservar" href="/reserva">Reservar con 20 €</a>
     <a class="lb-st-barra__wa" href="https://wa.me/34664530600" target="_blank" rel="noopener"><span data-lb-icono="chat"></span>WhatsApp</a>
   </nav>
   Solo en ≤ 720 px: abajo del todo, fondo blanco y línea fina arriba (sin
   sombra). Aparece (clase es-visible) cuando el .lb-hero sale de la pantalla y
   se esconde cuando entra un .lb-st-cierre o el pie (sus botones ya están a la
   vista). Mientras está visible, lb-students.js añade al body un padding-bottom
   igual a su alto para no tapar el final de la página. z-index 60: por encima
   del contenido y la cabecera, POR DEBAJO del aviso de cookies (9990). Respeta
   la zona segura de los móviles con muesca (env(safe-area-inset-bottom)). */
.lb-st-barra { display: none; }
@media (max-width: 720px) {
  .lb-st-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--lb-linea);
    background: var(--lb-blanco);
    font-family: var(--lb-fuente);
    transform: translateY(100%);
    visibility: hidden;   /* oculta también para el teclado y los lectores de pantalla */
    transition: transform .45s var(--lb-ease), visibility 0s linear .45s;
  }
  .lb-st-barra.es-visible {
    transform: none;
    visibility: visible;
    transition: transform .45s var(--lb-ease), visibility 0s;
  }
}
.lb-st-barra__reservar { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }   /* «Reservar con 20 €» siempre en una línea */
.lb-st-barra__wa {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 8px;
  white-space: nowrap;
  border-radius: var(--lb-r-pildora);
  color: var(--lb-tinta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s var(--lb-ease);
}
.lb-st-barra__wa [data-lb-icono] { --lb-icono-tam: 22px; }
.lb-st-barra__wa [data-lb-icono]:empty { display: none; }
.lb-st-barra__wa:active { opacity: .6; }
.lb-st-barra__wa:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}

/* ═══ Saltar al contenido ═════════════════════════════════════════
   <a class="lb-st-saltar" href="#contenido">Saltar al contenido</a>   (primer hijo del body)
   Invisible hasta que recibe el foco con el teclado; entonces baja arriba a la
   izquierda en una píldora de tinta. (.lb-sr de lb-marca.css solo esconde.) */
.lb-st-saltar {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 22px;
  border-radius: var(--lb-r-pildora);
  background: var(--lb-tinta);
  color: var(--lb-blanco);
  font-family: var(--lb-fuente);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top .3s var(--lb-ease);
}
.lb-st-saltar:focus {
  top: 12px;
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}

/* ═══ Pie compartido: contacto y botones (los pinta lb-students.js) ══
   <div class="lb-st-pie-contacto">
     <p class="lb-pie__titulo">Contacto</p>
     <ul class="lb-st-pie-contacto__lista"><li><a href="…">WhatsApp</a></li> …</ul>
   </div>
   <button type="button" class="lb-st-pie-boton">Configurar cookies</button>
   El contacto va entre «La familia LetsBoxIt» y los legales. El botón imita a
   los enlaces legales (gris de 14 px) pero es un <button>. */
/* «La familia LetsBoxIt»: solo Students lleva oso (los ositos son solo de Students). La portada del
   grupo y Mudanzas son pastillas de texto: en la misma fila se estiran al alto de la de Students
   (li en flex), y solas en una fila nunca bajan de 72 px, para que la fila no baile. */
.lb-pie__familia > li { display: flex; }
.lb-pie__familia a.lb-st-familia-texto { min-height: 72px; padding: 10px 24px; }
/* Enlaces principales del pie (los mismos que la cabecera): un punto por encima de los legales */
.lb-st-pie-menu { margin-bottom: 28px; }
.lb-st-pie-menu a { color: var(--lb-tinta); font-size: 15px; font-weight: 500; }
.lb-st-pie-contacto { margin: 0 0 32px; }
.lb-st-pie-contacto .lb-pie__titulo { margin-bottom: 8px; }
.lb-st-pie-contacto__lista { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.lb-st-pie-contacto__lista a {
  display: inline-block;
  padding: 8px 0;
  border-radius: 6px;
  color: var(--lb-tinta);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) {
  .lb-st-pie-contacto__lista a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
.lb-st-pie-contacto__lista a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-pie-boton {
  padding: 6px 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--lb-gris);
  font-family: var(--lb-fuente);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .lb-st-pie-boton:hover { color: var(--lb-tinta); text-decoration: underline; text-underline-offset: 3px; }
}
.lb-st-pie-boton:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto);
}
.lb-st-pie-extra { margin: 0 0 16px; }

/* ═══ Utilidades ══════════════════════════════════════════════════ */
.lb-st-centro { text-align: center; }
.lb-st-mt { margin-top: 32px; }

/* ═══ Movimiento reducido ═════════════════════════════════════════
   Se anulan las transiciones de las piezas de este fichero. Los estados
   (hover, foco, visible) siguen viéndose; la barra aparece sin deslizarse. */
@media (prefers-reduced-motion: reduce) {
  .lb-st-tarjeta, .lb-st-idioma a, .lb-st-contador__btn, .lb-st-migas a,
  .lb-st-barra, .lb-st-barra.es-visible, .lb-st-barra__wa, .lb-st-saltar {
    transition: none;
  }
  .lb-st-tarjeta:hover { transform: none; }
  .lb-st-contador__btn:active { transform: none; }
  /* Menú móvil: se abre y se cierra sin fundido, los enlaces entran sin desplazarse ni escalonarse y la × no gira */
  .lb-cab__panel, .lb-cab__panel .lb-cab__menu a, .lb-cab__panel .lb-st-idioma,
  .lb-cab__burger-lineas::before, .lb-cab__burger-lineas::after {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .lb-cab__panel .lb-cab__menu a { transform: none; }
}

/* Si el visitante ocultó a Bruno, la portada pasa a una columna (sin hueco vacío a la derecha) */
.lb-hero__in:has(.lb-bruno-sitio[hidden]) { grid-template-columns: minmax(0, 1fr); }
.lb-hero__bruno:has(.lb-bruno-sitio[hidden]) { display: none; }

/* Foto suelta dentro de una sección (fuera de .lb-st-dos o .lb-st-fotos): no ocupa todo el ancho */
.lb-seccion__in > .lb-st-foto { max-width: 640px; }


/* ═══════════════════════════════════════════════════════════════════
   PIEZAS NUEVAS · WEB STUDENTS v2
   Contrato: docs/superpowers/specs/2026-10-03-web-students-v2-piezas.md
   Las monta assets/lb-students-piezas.js (window.LbPiezas). Sin JavaScript
   cada pieza se lee igual: lo que depende de JS cuelga de la clase lb-js
   que el script pone en <html> (o de la clase es-activo de cada pieza).
   Mismas reglas del kit: solo tokens, sin degradados, sin sombras salvo el
   anillo de foco, acento solo en el único punto de la calculadora.
   ═══════════════════════════════════════════════════════════════════ */

.lb-st-caja, .lb-st-caja *, .lb-st-kit, .lb-st-kit *, .lb-st-video-fila, .lb-st-video-fila *,
.lb-st-video, .lb-st-video *, .lb-st-verano, .lb-st-verano *, .lb-st-modos, .lb-st-modos *,
.lb-st-niveles, .lb-st-niveles *, .lb-st-calc, .lb-st-calc *, .lb-st-antes, .lb-st-antes *,
.lb-st-hueco, .lb-st-hueco *, .lb-st-xior, .lb-st-xior *, .lb-st-pagos, .lb-st-pagos *,
.lb-st-frase, .lb-st-frase * {
  box-sizing: border-box;
}

/* En una sección gris el anillo de foco y los fondos de apoyo se ajustan solos */
.lb-seccion--gris { --lb-st-anillo: var(--lb-gris-claro); --lb-st-fondo: var(--lb-gris-claro); --lb-st-carril: var(--lb-blanco); }

/* Anillo de foco: el mismo de lb-marca.css (único sitio de esta parte con sombra) */
.lb-st-caja__item:focus-visible,
.lb-st-modos__tab:focus-visible,
.lb-st-calc__ciudad input:focus-visible + span,
.lb-st-video__play:focus-visible,
.lb-st-antes__rango:focus-visible ~ .lb-st-antes__asa .lb-st-antes__boton {
  outline: 2px solid transparent;   /* visible en modo alto contraste */
  box-shadow: 0 0 0 3px var(--lb-st-anillo, var(--lb-blanco)), 0 0 0 6px var(--lb-acento-texto);
}

/* ═══ Aparición suave: [data-lb-aparece] ══════════════════════════
   <div data-lb-aparece> … </div>             entra con 16 px de subida y fundido (600 ms)
   <ul data-lb-aparece="escalonado"> … </ul>  sus hijos entran uno tras otro (70 ms, máx. 8)
   Usa animación (no transición) para no estorbar a los hover de los hijos.
   Sin JS (sin la clase lb-js) todo es visible. */
@keyframes lb-st-sube {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
html.lb-js [data-lb-aparece]:not([data-lb-aparece="escalonado"]):not(.lb-visto),
html.lb-js [data-lb-aparece="escalonado"]:not(.lb-visto) > * { opacity: 0; }
html.lb-js [data-lb-aparece].lb-visto:not(.lb-ya):not([data-lb-aparece="escalonado"]) {
  animation: lb-st-sube .6s var(--lb-ease) backwards;
}
html.lb-js [data-lb-aparece="escalonado"].lb-visto:not(.lb-ya) > * {
  animation: lb-st-sube .6s var(--lb-ease) backwards;
  animation-delay: calc(var(--lb-n, 0) * 70ms);
}

/* ═══ La Caja LetsBoxIt ═══════════════════════════════════════════
   <div class="lb-st-caja">
     <figure class="lb-st-caja__dibujo"><svg class="lb-st-caja__svg" viewBox="0 0 390 400" role="img" aria-label="…"> … </svg></figure>
     <div class="lb-st-caja__datos">
       <div class="lb-st-caja__cab" data-parte="medida">
         <p class="lb-st-caja__cifra"><span>96</span><span class="lb-st-caja__unidad">litros</span></p>
         <p class="lb-st-caja__medida">60 × 40 × 40 cm</p></div>
       <dl class="lb-st-caja__lista"><div class="lb-st-caja__item" data-parte="qr"><dt>…</dt><dd>…</dd></div> …</dl>
     </div>
   </div>
   El dibujo (isométrico, 4 px por cm) se dibuja solo al entrar en pantalla:
   aristas, caras, marca, QR y precinto. Al pasar el ratón (o enfocar) un
   elemento de la lista se resalta su parte del dibujo y el resto baja al
   40 %. Ponla en una sección BLANCA: la tapa es gris claro. */
.lb-st-caja {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(32px, 6vw, 96px);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-st-caja__dibujo { min-width: 0; margin: 0; }
.lb-st-caja__datos { min-width: 0; }
.lb-st-caja__svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
  color: var(--lb-tinta);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.lb-caja-cara { fill: var(--lb-blanco); stroke: none; }
.lb-caja-cara--tapa { fill: var(--lb-gris-claro); }
.lb-caja-precinto { fill: none; }
@supports (color: color-mix(in srgb, red, blue)) {
  .lb-caja-precinto { fill: color-mix(in srgb, var(--lb-tinta) 8%, transparent); }
}
.lb-caja-hilo { stroke-width: 1; stroke-dasharray: 3 3; }
.lb-caja-etiqueta { fill: var(--lb-blanco); }
.lb-caja-texto {
  fill: currentColor;
  stroke: none;
  font-family: var(--lb-fuente);
  font-weight: 700;
  letter-spacing: -.04em;
}
.lb-caja-qr { fill: currentColor; stroke: none; }
.lb-caja-qr .lb-caja-hueco { fill: var(--lb-blanco); }
/* Dibujado: aristas con dash (pathLength=1); caras y detalles con fundido */
.lb-st-caja .lb-trazo {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s var(--lb-ease) calc(var(--d, 0) * 1ms);
}
.lb-caja-rev { transition: opacity .3s var(--lb-ease) calc(var(--d, 0) * 1ms); }
html.lb-js .lb-st-caja:not(.es-visto) .lb-trazo { stroke-dashoffset: 1; }
html.lb-js .lb-st-caja:not(.es-visto) .lb-caja-rev { opacity: 0; }
/* Resaltado al pasar el ratón por la lista */
.lb-caja-p { transition: opacity .35s var(--lb-ease), stroke-width .35s var(--lb-ease); }
.lb-st-caja[data-resalta] .lb-caja-p { opacity: .4; }
.lb-st-caja[data-resalta="qr"] .lb-caja-p[data-parte="qr"],
.lb-st-caja[data-resalta="precinto"] .lb-caja-p[data-parte="precinto"],
.lb-st-caja[data-resalta="medida"] .lb-caja-p[data-parte="medida"],
.lb-st-caja[data-resalta="carton"] .lb-caja-p[data-parte="carton"] { opacity: 1; stroke-width: 2.5; }

.lb-st-caja__cab { border-radius: 12px; }
.lb-st-caja__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .16em;
  margin: 0;
  font-size: clamp(56px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
}
.lb-st-caja__unidad { font-size: .34em; font-weight: 600; letter-spacing: -.03em; }
.lb-st-caja__medida {
  margin: 14px 0 32px;
  color: var(--lb-gris);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.lb-st-caja__lista { margin: 0; border-top: 1px solid var(--lb-linea); }
.lb-st-caja__item {
  position: relative;
  margin: 0;
  padding: 18px 0 18px 26px;
  border-bottom: 1px solid var(--lb-linea);
  border-radius: 6px;
}
.lb-st-caja__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 28px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lb-tinta);
  transform: scale(0);
  transition: transform .4s var(--lb-ease);
}
.lb-st-caja__item dt { margin: 0 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.lb-st-caja__item dd { margin: 0; color: var(--lb-gris); font-size: 17px; line-height: 1.5; }
@media (hover: hover) {
  .lb-st-caja__item:hover::before { transform: scale(1); }
}
.lb-st-caja__item:focus-visible::before { transform: scale(1); }
@media (max-width: 900px) {
  .lb-st-caja { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lb-st-caja__svg { max-width: 420px; }
}

/* ═══ El kit ══════════════════════════════════════════════════════
   <div class="lb-st-kit">
     <ul class="lb-st-kit__lista" data-lb-aparece="escalonado">
       <li class="lb-st-kit__pieza lb-icono-gancho"><span class="lb-st-kit__icono" data-lb-kit-icono="cinta"></span>
         <div class="lb-st-kit__cuerpo"><h3 class="lb-st-kit__titulo">Cinta</h3><p class="lb-st-kit__texto">…</p></div></li> …
     </ul>
     <p class="lb-st-kit__extra">+ 2 o 3 cajas de más. Las que no uses, no se cobran.</p>
   </div>
   Cuatro tarjetas (2×2 en tableta, lista en móvil). Iconos de línea (cinta,
   precinto, burbujas con data-lb-kit-icono; la caja con data-lb-icono="caja"
   de lb-iconos.js): se dibujan al aparecer y se animan al pasar el ratón. */
.lb-st-kit { font-family: var(--lb-fuente); color: var(--lb-tinta); }
.lb-st-kit__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-st-kit__pieza {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px 24px 30px;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  transition: transform .5s var(--lb-ease);
}
@media (hover: hover) {
  .lb-st-kit__pieza:hover { transform: translateY(-4px); }
}
.lb-st-kit__icono, .lb-st-kit__pieza > [data-lb-icono] { display: block; width: var(--lb-icono-tam); height: var(--lb-icono-tam); margin-bottom: 22px; --lb-icono-tam: 48px; }
.lb-st-kit__cuerpo { min-width: 0; }
.lb-st-kit__titulo { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lb-st-kit__texto { margin: 0; color: var(--lb-gris); font-size: 15px; line-height: 1.5; }
.lb-st-kit__extra {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin: 28px 0 0;
  padding: 10px 24px;
  border: 1.5px solid var(--lb-tinta);
  border-radius: var(--lb-r-pildora);
  color: var(--lb-tinta);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
}
/* Micro-animaciones propias (la caja usa la de lb-iconos.js: cierra la tapa) */
.lb-k-rollo { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .7s var(--lb-ease); }
.lb-k-banda { transition: transform .5s var(--lb-ease); }
.lb-k-bub { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes lb-k-late { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } }
@media (hover: hover) {
  .lb-st-kit__pieza:hover .lb-k-rollo { transform: rotate(20deg); }
  .lb-st-kit__pieza:hover .lb-k-banda { transform: translateX(2px); }
  .lb-st-kit__pieza:hover .lb-k-bub { animation: lb-k-late .6s var(--lb-ease) calc(var(--k, 0) * 70ms); }
}
@media (max-width: 900px) {
  .lb-st-kit__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lb-st-kit__lista { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lb-st-kit__pieza { flex-direction: row; align-items: center; gap: 18px; padding: 20px; }
  .lb-st-kit__icono, .lb-st-kit__pieza > [data-lb-icono] { margin-bottom: 0; --lb-icono-tam: 40px; flex: none; }
  .lb-st-kit__extra { display: flex; width: 100%; justify-content: center; text-align: center; }
}

/* ═══ Vídeo con póster ════════════════════════════════════════════
   <div class="lb-st-video-fila">
     <figure class="lb-st-video" data-video-src="" data-video-poster="/ruta.jpg">
       <img class="lb-st-video__poster" src="/ruta.jpg" alt="" loading="lazy">
       <span class="lb-st-video__estado">Vídeo en preparación</span>      (se esconde si hay data-video-src)
       <figcaption class="lb-st-video__pie"><span class="lb-st-video__titulo">…</span><span class="lb-st-video__duracion">60 s</span></figcaption>
     </figure>
     <ol class="lb-st-video__pasos"><li><span class="lb-st-video__txt">…</span></li> …</ol>
   </div>
   Sin data-video-src: píldora «Vídeo en preparación» y sin botón de play.
   Con data-video-src: botón redondo de 72 px; al pulsarlo se monta <video controls>.
   Los pasos son siempre visibles: son el contenido real mientras no haya vídeo. */
.lb-st-video-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px clamp(32px, 5vw, 72px);
}
.lb-st-video {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  font-family: var(--lb-fuente);
}
.lb-st-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-st-video__poster--contener { object-fit: contain; object-position: 70% 100%; padding: 6% 0 0; }
.lb-st-video__estado {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  padding: 6px 14px;
  border: 1px solid var(--lb-gris);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-blanco);
  color: var(--lb-gris);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.lb-st-video.tiene-video .lb-st-video__estado { display: none; }
.lb-st-video__pie {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  transition: opacity .35s var(--lb-ease);
}
.lb-st-video__titulo { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lb-st-video__duracion { color: var(--lb-gris); font-size: 13px; line-height: 1.3; }
.lb-st-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lb-tinta);
  color: var(--lb-blanco);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--lb-ease);
}
.lb-st-video__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -14px 0 0 -8px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent currentColor;
}
@media (hover: hover) {
  .lb-st-video__play:hover { transform: scale(1.06); }
}
.lb-st-video__play:active { transform: scale(.97); }
.lb-st-video video { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; background: var(--lb-tinta); object-fit: contain; }
.lb-st-video.reproduciendo .lb-st-video__pie, .lb-st-video.reproduciendo .lb-st-video__poster { opacity: 0; pointer-events: none; }
.lb-st-video__pasos { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: paso; font-family: var(--lb-fuente); }
.lb-st-video__pasos li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  counter-increment: paso;
  color: var(--lb-tinta);
  font-size: 17px;
  line-height: 1.47;
}
.lb-st-video__pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 1px solid var(--lb-tinta);
  border-radius: 50%;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}
.lb-st-video__txt { min-width: 0; }
@media (max-width: 900px) {
  .lb-st-video-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .lb-st-video { border-radius: var(--lb-r-tarjeta); }
  .lb-st-video__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

/* ═══ Tu verano con LetsBoxIt ═════════════════════════════════════
   <div class="lb-st-verano">
     <ol class="lb-st-verano__hitos">
       <li class="lb-st-verano__hito"><span class="lb-st-verano__nodo" aria-hidden="true"></span>
         <h3 class="lb-st-verano__momento">Mayo</h3><p class="lb-st-verano__titulo">Reservas en un minuto</p>
         <p class="lb-st-verano__texto" data-xior="Texto de la variante Xior">Texto de puerta a puerta</p></li> …
     </ol>
   </div>
   El marcado no cambia; lb-students-piezas.js crea los envoltorios que hacen falta.
   Tres presentaciones de los mismos cinco hitos:
   · Sin JS: lista vertical con una línea fina a la izquierda (base de este bloque).
   · Con JS y ≥ 1000 px (.lb-v-escritorio), «Mes a mes, con scroll»: a la izquierda el
     momento enorme, FIJO (sticky) y centrado en la pantalla; a la derecha, los hitos uno
     debajo de otro. La caja fija mide lo mismo que cada hito (--lb-v-alto) y se ancla a la
     mitad de la pantalla, así que arranca alineada con el primer hito y acaba con el último,
     sin huecos. El momento cambia cuando el centro de un hito cruza el centro de la pantalla
     (IntersectionObserver); el hito activo a opacidad 1 y los demás al 35 %.
   · Con JS y < 1000 px (.lb-v-cartas), «Tarjetas»: tarjetas grandes con deslizamiento
     horizontal y scroll-snap, el momento enorme arriba de cada una, flechas y puntos.
     La siguiente asoma ~28 px por el borde. Con data-xior, el texto cambia de modo (JS).
   Movimiento reducido: sin fundidos ni desplazamientos animados. */
.lb-st-verano {
  --lb-v-gap: 36px;
  --lb-nodo-y: 9px;
  --lb-v-alto: clamp(380px, 60vh, 560px);
  font-family: var(--lb-fuente);
  color: var(--lb-tinta);
}
.lb-st-verano__hitos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lb-v-gap) 0;
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-st-verano__hito { position: relative; min-width: 0; padding: 0 0 0 38px; }
.lb-st-verano__nodo {
  position: absolute;
  left: 0;
  top: var(--lb-nodo-y);
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--lb-tinta);
  border-radius: 50%;
  background: var(--lb-tinta);
}
/* Tramo de línea entre este nodo y el siguiente */
.lb-st-verano__hito::before {
  content: "";
  position: absolute;
  left: 4.25px;
  top: calc(var(--lb-nodo-y) + 5px);
  width: 1.5px;
  height: calc(100% + var(--lb-v-gap));
  background: var(--lb-tinta);
}
.lb-st-verano__hito:last-child::before { display: none; }
.lb-st-verano__momento {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-wrap: balance;
}
.lb-st-verano__titulo { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lb-st-verano__texto { margin: 0; color: var(--lb-gris); font-size: 17px; line-height: 1.5; text-wrap: pretty; }

/* Lo que crea el JS: escondido hasta que hay presentación */
.lb-v-izq, .lb-v-controles { display: none; }
.lb-st-verano.lb-v-montado .lb-st-verano__nodo,
.lb-st-verano.lb-v-montado .lb-st-verano__hito::before { display: none; }
.lb-st-verano.lb-v-montado .lb-st-verano__hito { padding: 0; }
.lb-st-verano.lb-v-montado .lb-st-verano__hitos { max-width: none; }

/* Puntos finos (indicador de escritorio y puntos de página de las tarjetas) */
.lb-v-puntos { display: flex; align-items: center; gap: 0; }
.lb-v-punto {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}
.lb-v-punto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--lb-gris);
  border-radius: 50%;
  background: transparent;
  transition: background-color .35s var(--lb-ease), border-color .35s var(--lb-ease);
}
.lb-v-punto.es-activo::before { border-color: var(--lb-tinta); background: var(--lb-tinta); }

/* ── Escritorio (≥ 1000 px): el momento fijo y los hitos que pasan ── */
@media (min-width: 1000px) {
  .lb-st-verano.lb-v-escritorio {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: 0 clamp(32px, 6vw, 96px);
    align-items: start;
  }
  .lb-v-escritorio .lb-v-izq {
    position: sticky;
    top: calc(50vh - var(--lb-v-alto) / 2);
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    height: var(--lb-v-alto);
    align-self: start;
  }
  .lb-v-escritorio .lb-v-momentos { display: grid; grid-row: 2; align-items: center; }
  .lb-v-escritorio .lb-v-puntos { grid-row: 3; align-self: start; margin: 28px 0 0 -5px; }
  .lb-v-escritorio .lb-v-momento {
    grid-area: 1 / 1;
    margin: 0;
    font-size: clamp(56px, 7.6vw, 104px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .95;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s var(--lb-ease), transform .6s var(--lb-ease);
    pointer-events: none;
  }
  .lb-v-escritorio .lb-v-momento.es-activo { opacity: 1; transform: none; }
  .lb-v-escritorio .lb-v-pista { min-width: 0; }
  .lb-v-escritorio .lb-st-verano__hitos { display: block; }
  .lb-v-escritorio .lb-st-verano__hito {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--lb-v-alto);
    opacity: .35;
    transition: opacity .45s var(--lb-ease);
  }
  .lb-v-escritorio .lb-st-verano__hito.es-activo { opacity: 1; }
  /* El momento de cada hito se queda para los lectores de pantalla: a la vista está el enorme de la izquierda */
  .lb-v-escritorio .lb-st-verano__momento {
    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;
  }
  .lb-v-escritorio .lb-st-verano__titulo { margin: 0 0 12px; font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
  .lb-v-escritorio .lb-st-verano__texto { max-width: 440px; font-size: 19px; }
}

/* ── Móvil y tableta (< 1000 px): tarjetas deslizables ── */
@media (max-width: 999.98px) {
  .lb-v-cartas .lb-v-pista {
    container-type: inline-size;
    margin: 0 calc(var(--lb-gutter) * -1);
    padding: 4px var(--lb-gutter) 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--lb-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .lb-v-cartas .lb-v-pista::-webkit-scrollbar { display: none; }
  .lb-v-cartas .lb-v-pista:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: -2px; border-radius: 28px; }
  .lb-v-cartas .lb-st-verano__hitos {
    display: flex;
    gap: 14px;
    width: max-content;
    padding-right: var(--lb-gutter);
  }
  .lb-st-verano.lb-v-cartas .lb-st-verano__hito {
    display: flex;
    flex: 0 0 min(calc(100cqw + var(--lb-gutter) - 42px), 420px);
    flex-direction: column;
    min-height: 380px;
    padding: 28px 26px 30px;
    border-radius: 28px;
    background: var(--lb-st-carril, var(--lb-gris-claro));
    scroll-snap-align: start;
  }
  .lb-v-cartas .lb-st-verano__momento {
    margin: 0 0 auto;
    padding-bottom: 36px;
    font-size: clamp(44px, 13vw, 64px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .96;
    text-wrap: balance;
  }
  .lb-v-cartas .lb-st-verano__titulo { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
  .lb-v-cartas .lb-st-verano__texto { min-height: 6em; }
  .lb-v-cartas .lb-v-controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 22px 0 0;
  }
  .lb-v-cartas .lb-v-puntos { margin-left: -5px; }
  .lb-v-cartas .lb-v-punto { width: 24px; height: 24px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .lb-v-cartas .lb-v-punto:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: -2px; border-radius: 50%; }
}
.lb-v-flechas { display: flex; align-items: center; gap: 12px; }
.lb-v-flecha {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--lb-tinta);
  border-radius: 50%;
  background: transparent;
  color: var(--lb-tinta);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--lb-ease), color .3s var(--lb-ease), opacity .3s var(--lb-ease), transform .35s var(--lb-ease);
}
.lb-v-flecha svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .lb-v-flecha:not(:disabled):hover { background: var(--lb-tinta); color: var(--lb-blanco); } }
.lb-v-flecha:not(:disabled):active { transform: scale(.94); }
.lb-v-flecha:disabled { opacity: .35; cursor: default; }
.lb-v-flecha:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: 3px; }

/* ═══ Pestañas de modo ════════════════════════════════════════════
   <div class="lb-st-modos">
     <div class="lb-st-modos__barra" role="tablist" aria-label="…">
       <span class="lb-st-modos__pildora" aria-hidden="true"></span>
       <button type="button" role="tab" class="lb-st-modos__tab" id="modo-puerta-tab" data-modo="puerta" aria-selected="true" aria-controls="modo-puerta">Puerta a puerta</button>
       <button type="button" role="tab" … data-modo="residencia" aria-controls="modo-residencia">Residencia partner (Xior)</button>
     </div>
     <section class="lb-st-modos__panel" role="tabpanel" id="modo-puerta" aria-labelledby="modo-puerta-tab" tabindex="0"><h3 class="lb-st-modos__h3">…</h3> … </section>
     <section class="lb-st-modos__panel" role="tabpanel" id="modo-residencia" … > … </section>
   </div>
   Control segmentado: la píldora de tinta se desliza (350 ms) entre las opciones.
   ?modo=residencia (o #residencia) abre la de Xior; cambiar de pestaña actualiza
   la URL sin recargar. Sin JS: la barra se esconde y los dos paneles van seguidos,
   cada uno con su h3. El .lb-st-verano que se ponga dentro cambia de texto. */
.lb-st-modos { font-family: var(--lb-fuente); color: var(--lb-tinta); }
.lb-st-modos__barra {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--lb-r-pildora);
  background: var(--lb-st-carril, var(--lb-gris-claro));
  isolation: isolate;
}
html:not(.lb-js) .lb-st-modos__barra { display: none; }
.lb-st-modos__pildora {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--w, 0px);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-tinta);
  transform: translateX(var(--x, 4px));
}
.lb-st-modos__barra.es-listo .lb-st-modos__pildora {
  transition: transform .35s var(--lb-ease), width .35s var(--lb-ease);
}
.lb-st-modos__tab {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 6px 22px;
  border: 0;
  border-radius: var(--lb-r-pildora);
  background: none;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .35s var(--lb-ease);
}
.lb-st-modos__tab[aria-selected="true"] { color: var(--lb-blanco); }
.lb-st-modos__panel { margin-top: 40px; }
.lb-st-modos__panel + .lb-st-modos__panel { margin-top: 56px; }
html.lb-js .lb-st-modos__panel + .lb-st-modos__panel { margin-top: 40px; }
.lb-st-modos__panel[hidden] { display: none; }
.lb-st-modos__panel:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: 8px; border-radius: 8px; }
.lb-st-modos__h3 { margin: 0 0 20px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
/* Con JS el título del panel ya lo dice la pestaña: queda solo para lectores de pantalla */
html.lb-js .lb-st-modos__panel > .lb-st-modos__h3 {
  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;
}
@keyframes lb-st-fundido { from { opacity: 0; } to { opacity: 1; } }
.lb-st-modos__panel.es-entra { animation: lb-st-fundido .25s var(--lb-ease) both; }
.lb-st-modos > .lb-st-verano { margin-top: 72px; }
@media (max-width: 520px) {
  .lb-st-modos__barra { display: flex; }
  .lb-st-modos__tab { padding: 6px 12px; font-size: 15px; }
}

/* ═══ Dos niveles, comparados ═════════════════════════════════════
   <div class="lb-st-niveles"><table class="lb-st-niveles__tabla" role="table">
     <caption class="lb-sr">…</caption>
     <thead role="rowgroup"><tr role="row"><th scope="col" role="columnheader" class="lb-sr">Concepto</th>
       <th scope="col" role="columnheader">Puerta a puerta<span class="lb-st-niveles__sub">…</span></th><th …>Residencia partner<span …>…</span></th></tr></thead>
     <tbody role="rowgroup"><tr role="row"><th scope="row" role="rowheader">El kit</th><td role="cell">…</td><td role="cell">…</td></tr> …
       <tr class="lb-st-niveles__precio"><th scope="row">Precio</th><td colspan="2">Mismo precio: …</td></tr></tbody>
   </table></div>
   Tabla «a lo Apple» que nos compara con nosotros mismos. Es una <table> real;
   las filas son una rejilla de dos columnas con la etiqueta de la fila encima
   del par de celdas (también en móvil). Los roles ARIA explícitos mantienen la
   semántica de tabla aunque el CSS cambie el display. Separadores de 1 px. */
.lb-st-niveles { color: var(--lb-tinta); font-family: var(--lb-fuente); }
.lb-st-niveles__tabla, .lb-st-niveles__tabla thead, .lb-st-niveles__tabla tbody { display: block; width: 100%; }
.lb-st-niveles__tabla tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 4vw, 56px);
}
.lb-st-niveles__tabla th, .lb-st-niveles__tabla td { min-width: 0; margin: 0; padding: 0; text-align: left; overflow-wrap: break-word; }
.lb-st-niveles__tabla thead th {
  padding: 0 0 22px;
  border-bottom: 1.5px solid var(--lb-tinta);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.lb-st-niveles__sub { display: block; margin-top: 8px; color: var(--lb-gris); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.4; }
.lb-st-niveles__tabla tbody tr { border-bottom: 1px solid var(--lb-linea); }
.lb-st-niveles__tabla tbody th {
  grid-column: 1 / -1;
  padding: 26px 0 8px;
  color: var(--lb-gris);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
}
.lb-st-niveles__tabla tbody td { padding: 0 0 26px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }
.lb-st-niveles__tabla tbody td[colspan] { grid-column: 1 / -1; }
.lb-st-niveles__tabla .lb-st-niveles__precio td { font-size: clamp(20px, 2.6vw, 26px); font-weight: 650; letter-spacing: -.025em; line-height: 1.25; }
.lb-st-niveles__ok { --lb-icono-tam: 26px; display: inline-block; }
.lb-st-niveles__ok:empty::before {   /* sin JS: tic dibujado con bordes */
  content: "";
  display: block;
  width: 7px;
  height: 13px;
  margin: 4px 0 0 8px;
  border-right: 2px solid var(--lb-tinta);
  border-bottom: 2px solid var(--lb-tinta);
  transform: rotate(45deg);
}
@media (max-width: 560px) {
  .lb-st-niveles__tabla tr { column-gap: 16px; }
  .lb-st-niveles__tabla tbody td { font-size: 16px; }
  .lb-st-niveles__sub { font-size: 14px; }
}

/* ═══ Calculadora «¿Cuánto te cuesta tu última semana en Madrid?» ═
   <div class="lb-st-calc [lb-st-calc--corta]" data-cajas="7" [data-acento="no"]>
     <div class="lb-st-calc__interactivo">
       <div class="lb-st-calc__controles">
         <fieldset class="lb-st-calc__campo"><legend class="lb-st-calc__etiqueta">¿Desde dónde venís?</legend>
           <div class="lb-st-calc__ciudades"><label class="lb-st-calc__ciudad"><input type="radio" name="…" value="valencia" checked><span>Valencia</span></label> …</div></fieldset>
         <div class="lb-st-calc__campo lb-st-calc__campo--cajas"> … .lb-st-contador … </div>     (no va en la corta)
       </div>
       <div class="lb-st-calc__resultado"> cifra (data-calc="horas"/"dias") + puntos + «Con LetsBoxIt» </div>
       <div class="lb-st-calc__dinero"> coche (data-calc="coche") · LetsBoxIt (data-calc="lb") </div>
       <p class="lb-sr lb-st-calc__voz" aria-live="polite" aria-atomic="true"></p>
     </div>
     <div class="lb-st-calc__tabla"> .lb-st-tabla con las cinco ciudades (sin JS) </div>
   </div>
   Un punto = una hora de carretera (clamp(16px, 2.2vw, 28px)); al cambiar de ciudad los puntos que
   sobran se apagan y los nuevos se encienden en cascada. El ÚNICO punto en
   --lb-acento es el de «Con LetsBoxIt»; con data-acento="no" va en tinta (si la
   página ya usa sus dos acentos). El coste del coche nunca se esconde. */
.lb-st-calc { --lb-calc-cols: 12; color: var(--lb-tinta); font-family: var(--lb-fuente); }
html:not(.lb-js) .lb-st-calc__interactivo { display: none; }
html.lb-js .lb-st-calc__tabla { display: none; }
html.lb-js .lb-st-calc.lb-fallo .lb-st-calc__tabla { display: block; }
html.lb-js .lb-st-calc.lb-fallo .lb-st-calc__interactivo { display: none; }
.lb-st-calc__interactivo { display: grid; gap: clamp(32px, 5vw, 56px); }
.lb-st-calc__controles { display: grid; gap: 28px; }
.lb-st-calc--corta .lb-st-calc__campo--cajas { display: none; }
.lb-st-calc__campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.lb-st-calc__etiqueta { display: block; margin: 0 0 14px; padding: 0; color: var(--lb-tinta); font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.lb-st-calc__ciudades { display: flex; flex-wrap: wrap; gap: 10px; }
.lb-st-calc__ciudad { position: relative; display: inline-flex; }
.lb-st-calc__ciudad input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lb-st-calc__ciudad span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--lb-gris);
  border-radius: var(--lb-r-pildora);
  background: transparent;
  color: var(--lb-tinta);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  transition: background-color .3s var(--lb-ease), color .3s var(--lb-ease), border-color .3s var(--lb-ease), transform .35s var(--lb-ease);
}
@media (hover: hover) {
  .lb-st-calc__ciudad:hover span { border-color: var(--lb-tinta); }
}
.lb-st-calc__ciudad input:checked + span { border-color: var(--lb-tinta); background: var(--lb-tinta); color: var(--lb-blanco); }
.lb-st-calc__ciudad input:active + span { transform: scale(.97); }
/* El contador de cajas, con objetivo táctil de 44 px */
.lb-st-calc .lb-st-contador__btn { width: 44px; height: 44px; }

/* Orden de lectura, todo a ancho completo: (a) la cifra enorme, (b) la rejilla de puntos (la
   protagonista: 12 por fila en escritorio, 8 en móvil), (c) la fila «Con LetsBoxIt» con UN punto
   del mismo tamaño, (d) las dos tarjetas de dinero. 24 puntos frente a 1 es el mensaje. */
.lb-st-calc__resultado { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 56px); }
.lb-st-calc__lectura { min-width: 0; }
.lb-st-calc__horas {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .14em;
  margin: 0;
  font-size: clamp(64px, 10vw, 128px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.lb-st-calc__aprox { font-size: .5em; font-weight: 600; letter-spacing: -.03em; }
.lb-st-calc__horas-et { font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.lb-st-calc__dias { margin: 16px 0 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.lb-st-calc__dias [data-calc] { font-weight: 700; }
.lb-st-calc__grafico { --lb-punto: clamp(16px, 2.2vw, 28px); min-width: 0; }
.lb-st-calc__puntos {
  display: grid;
  grid-template-columns: repeat(var(--lb-calc-cols), var(--lb-punto));
  justify-content: start;
  gap: calc(var(--lb-punto) * .45);
  margin: 0 0 20px;
}
.lb-st-calc__punto {
  display: block;
  width: var(--lb-punto);
  height: var(--lb-punto);
  border-radius: 50%;
  background: var(--lb-tinta);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s var(--lb-ease), transform .4s var(--lb-ease);
  transition-delay: var(--lb-d, 0ms);
}
.lb-st-calc__punto.es-on { opacity: 1; transform: none; }
.lb-st-calc__leyenda { margin: 0; color: var(--lb-gris); font-size: 14px; line-height: 1.4; }
/* «Con LetsBoxIt»: un solo punto, del mismo tamaño que los de la rejilla y bajo su primera columna */
.lb-st-calc__con {
  display: grid;
  grid-template-columns: var(--lb-punto) minmax(0, 1fr);
  align-items: center;
  gap: 2px calc(var(--lb-punto) * .45 + 12px);
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-top: clamp(24px, 3.4vw, 32px);
  border-top: 1px solid var(--lb-linea);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.35;
}
.lb-st-calc__con-et { grid-column: 2; grid-row: 1; font-weight: 700; letter-spacing: -.02em; }
.lb-st-calc__con > span:last-child { grid-column: 2; grid-row: 2; color: var(--lb-tinta); }
.lb-st-calc__punto-lb { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: var(--lb-punto); height: var(--lb-punto); border-radius: 50%; background: var(--lb-acento); }
.lb-st-calc[data-acento="no"] .lb-st-calc__punto-lb { background: var(--lb-tinta); }

.lb-st-calc__dinero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.lb-st-calc__moneda { min-width: 0; padding: 28px; border-radius: var(--lb-r-tarjeta); background: var(--lb-fondo-tarjeta, var(--lb-gris-claro)); }
.lb-st-calc__moneda-et { margin: 0 0 10px; color: var(--lb-gris); font-size: 15px; font-weight: 600; line-height: 1.3; }
.lb-st-calc__moneda-valor {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.lb-st-calc__moneda-nota { margin: 12px 0 0; color: var(--lb-gris); font-size: 15px; line-height: 1.45; }
.lb-st-calc__aviso { max-width: 640px; margin: 0; color: var(--lb-tinta); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.lb-st-calc__interactivo > .lb-st-nota { margin: 0; }
.lb-st-calc__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lb-st-calc__tabla > .lb-st-nota { margin-top: 16px; }
/* Sin JS la tabla de ciudades es lo que se lee: que quepa entera, también a 360 px */
@media (max-width: 520px) {
  .lb-st-calc__tabla .lb-st-tabla { font-size: 15px; }
  .lb-st-calc__tabla .lb-st-tabla th, .lb-st-calc__tabla .lb-st-tabla td { padding: 12px 10px 12px 0; }
  .lb-st-calc__tabla .lb-st-tabla .lb-st-tabla__num { white-space: normal; }
}
@media (max-width: 640px) {
  .lb-st-calc { --lb-calc-cols: 8; }
  .lb-st-calc__grafico { --lb-punto: clamp(20px, 7vw, 30px); }   /* 8 por fila: en móvil los puntos crecen para llenar el ancho */
}
@media (max-width: 520px) {
  .lb-st-calc__moneda { padding: 20px 18px; }
  .lb-st-calc__moneda-valor { font-size: clamp(26px, 8.2vw, 34px); }
  .lb-st-calc__moneda-nota { font-size: 14px; }
}

/* ═══ Antes y después ═════════════════════════════════════════════
   <div class="lb-st-antes">
     <div class="lb-st-antes__comparador">
       <div class="lb-st-hueco lb-st-antes__foto lb-st-antes__foto--antes" data-lb-foto="/…-antes.jpg" data-alt="…" data-dibujo="habitacion" style="--proporcion: 4/3">
         <span class="lb-st-antes__etq">Antes</span><p class="lb-st-hueco__pie">…</p></div>
       <div class="lb-st-hueco lb-st-antes__foto lb-st-antes__foto--despues" …>…</div>
       <input type="range" class="lb-st-antes__rango" min="0" max="100" value="50" aria-label="Desliza para comparar antes y después">
       <span class="lb-st-antes__asa" aria-hidden="true"><span class="lb-st-antes__boton"><svg …/></span></span>
     </div>
     <figure class="lb-st-antes__resena"><blockquote><p>Reseña literal.</p></blockquote><figcaption>…</figcaption></figure>
   </div>
   Con JS la foto de «después» se recorta con clip-path y un <input type="range">
   real (accesible con teclado) mueve el asa. Sin JS, las dos fotos van lado a lado. */
.lb-st-antes {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(32px, 6vw, 88px);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-st-antes__comparador { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.lb-st-antes__etq {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 12px;
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.lb-st-antes__asa, .lb-st-antes__rango { display: none; }
.lb-st-antes.es-activo .lb-st-antes__comparador {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.lb-st-antes.es-activo .lb-st-antes__foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.lb-st-antes.es-activo .lb-st-antes__foto--despues { clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%)); }
.lb-st-antes.es-activo .lb-st-antes__foto .lb-st-antes__etq { display: none; }
.lb-st-antes__comparador > .lb-st-antes__etq--js { z-index: 3; }
/* Con el deslizador, los dos huecos se solapan: cada dibujo, pie y píldora se queda en su mitad */
.lb-st-antes.es-activo .lb-st-antes__foto .lb-st-hueco__dibujo { width: min(38%, 150px); }
.lb-st-antes.es-activo .lb-st-antes__foto--antes .lb-st-hueco__dibujo, .lb-st-antes.es-activo .lb-st-antes__foto--antes .lb-st-hueco__pie { transform: translateX(-60%); }
.lb-st-antes.es-activo .lb-st-antes__foto--despues .lb-st-hueco__dibujo, .lb-st-antes.es-activo .lb-st-antes__foto--despues .lb-st-hueco__pie { transform: translateX(60%); }
.lb-st-antes.es-activo .lb-st-antes__foto .lb-st-hueco__pie { max-width: 15ch; font-size: 13px; }
.lb-st-antes.es-activo .lb-st-antes__foto .lb-st-hueco__pildora { top: auto; bottom: 12px; }
.lb-st-antes.es-activo .lb-st-antes__foto--antes .lb-st-hueco__pildora { right: auto; left: 12px; }
.lb-st-antes.es-activo .lb-st-antes__foto--despues .lb-st-hueco__pildora { right: 12px; }
.lb-st-antes__comparador > .lb-st-antes__etq--despues { left: auto; right: 12px; }
.lb-st-antes.es-activo .lb-st-antes__rango {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: pan-y;
}
.lb-st-antes__rango::-webkit-slider-thumb { -webkit-appearance: none; width: 0; height: 0; border: 0; background: transparent; }
.lb-st-antes__rango::-moz-range-thumb { width: 0; height: 0; border: 0; background: transparent; }
.lb-st-antes.es-activo .lb-st-antes__asa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos, 50) * 1%);
  z-index: 4;
  display: block;
  width: 2px;
  margin-left: -1px;
  background: var(--lb-tinta);
  pointer-events: none;
}
.lb-st-antes__boton {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid var(--lb-tinta);
  border-radius: 50%;
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  transition: transform .35s var(--lb-ease);
}
.lb-st-antes__boton svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .lb-st-antes__rango:hover ~ .lb-st-antes__asa .lb-st-antes__boton { transform: scale(1.08); }
}
.lb-st-antes__rango:active ~ .lb-st-antes__asa .lb-st-antes__boton { transform: scale(.96); }
.lb-st-antes__resena { min-width: 0; margin: 0; }
.lb-st-antes__resena blockquote { margin: 0; }
.lb-st-antes__resena blockquote p {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
  text-wrap: pretty;
}
.lb-st-antes__resena figcaption { margin-top: 24px; }
.lb-st-antes__nombre { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.lb-st-antes__datos { margin: 2px 0 0; color: var(--lb-gris); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) {
  .lb-st-antes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {   /* sin JS y en móvil: las dos fotos, una debajo de la otra */
  .lb-st-antes:not(.es-activo) .lb-st-antes__comparador { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ Hueco de foto o de logo ═════════════════════════════════════
   <div class="lb-st-hueco" data-lb-foto="/ruta.jpg" data-alt="…" data-dibujo="habitacion|caja|persona|almacen" style="--proporcion: 4/3">
     <p class="lb-st-hueco__pie">Pie real de la foto.</p>
   </div>
   Mientras no exista el fichero: fondo gris claro, dibujo de línea, el pie en
   gris y una píldora «Foto pendiente» (solo en la web interna). Cuando Gon deje
   la foto en la ruta prevista, el JS la detecta y la pone con un fundido.
   Variante de logo (franja Xior): .lb-st-hueco--logo, sin dibujo ni píldora;
   muestra el nombre en texto hasta que exista el fichero (nunca un logo imitado). */
.lb-st-hueco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  aspect-ratio: var(--proporcion, 4 / 3);
  padding: 24px;
  overflow: hidden;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  color: var(--lb-gris);
  font-family: var(--lb-fuente);
  text-align: center;
}
.lb-st-hueco__dibujo { display: block; width: min(56%, 200px); height: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: opacity .4s var(--lb-ease); }
.lb-st-hueco__pie { max-width: 34ch; margin: 0; color: var(--lb-gris); font-size: 15px; line-height: 1.4; transition: opacity .4s var(--lb-ease); }
.lb-st-hueco__pildora {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 12px;
  border: 1px solid var(--lb-gris);
  border-radius: var(--lb-r-pildora);
  color: var(--lb-gris);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  transition: opacity .4s var(--lb-ease);
}
.lb-st-hueco__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--lb-ease); }
.lb-st-hueco.tiene-foto .lb-st-hueco__foto { opacity: 1; }
.lb-st-hueco.tiene-foto .lb-st-hueco__dibujo, .lb-st-hueco.tiene-foto .lb-st-hueco__pie, .lb-st-hueco.tiene-foto .lb-st-hueco__pildora { opacity: 0; }
.lb-st-hueco--logo {
  display: inline-flex;
  flex-direction: row;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  vertical-align: middle;
}
.lb-st-hueco--logo .lb-st-hueco__pie { max-width: none; color: var(--lb-tinta); font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.lb-st-hueco--logo .lb-st-hueco__foto { position: static; width: auto; height: 28px; }
.lb-st-hueco--logo.tiene-foto .lb-st-hueco__pie { display: none; }

/* ═══ Envíaselo a tus padres ══════════════════════════════════════
   <button type="button" class="lb-btn lb-btn--secundario lb-st-padres" data-lb-padres data-cajas="7" data-total="231"
           data-icono-reposo="enviar" data-texto-hecho="Listo">Envíaselo a tus padres</button>
   Botón secundario con avión de papel (lo pinta lb-iconos.js con data-icono-reposo).
   Al pasar el ratón el avión sale 3 px hacia arriba a la derecha. */
@media (hover: hover) {
  .lb-btn.lb-st-padres:hover .lb-i-avion { transform: translate(3px, -3px); }
}

/* ═══ Franja Xior ═════════════════════════════════════════════════
   <section class="lb-st-xior" aria-labelledby="…"><div class="lb-st-xior__in">
     <div class="lb-st-xior__tarjeta">
       <div class="lb-st-xior__texto">
         <div class="lb-st-xior__marca"><span class="lb-st-xior__lb">LetsBoxIt</span><span class="lb-st-xior__por" aria-hidden="true">×</span>
           <span class="lb-st-hueco lb-st-hueco--logo" data-lb-foto="/assets/img/xior/xior-logo.svg" data-alt="Xior"><span class="lb-st-hueco__pie">Xior</span></span></div>
         <p class="lb-st-xior__sello"><span data-lb-icono="check"></span>Partner oficial de Xior en Madrid</p>
         <h2 class="lb-st-xior__titulo">¿Vives en una residencia Xior? <span class="lb-st-xior__gris">Es aún más fácil.</span></h2>
         <p class="lb-st-xior__sub">…</p><a class="lb-enlace-flecha" …>…</a></div>
       <ol class="lb-st-xior__pasos"><li><span class="lb-st-xior__ico"><span data-lb-icono="caja"></span></span>Coges el kit en recepción</li> …</ol>
     </div>
     <p class="lb-st-xior__otra"><a class="lb-enlace-flecha" …>¿Otra residencia o piso? Vamos a tu puerta …</a></p>
   </div></section>
   Fondo gris claro, tarjeta blanca de 28 px, sello con borde fino de tinta (sin
   acento) y tres pasos con iconos de línea unidos por una línea que se dibuja. */
.lb-st-xior { padding: clamp(40px, 6vw, 72px) var(--lb-gutter); background: var(--lb-gris-claro); color: var(--lb-tinta); font-family: var(--lb-fuente); }
.lb-st-xior__in { max-width: var(--lb-maxw); margin: 0 auto; }
.lb-st-xior__tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(32px, 6vw, 80px);
  padding: clamp(28px, 4.5vw, 56px);
  border-radius: 28px;
  background: var(--lb-blanco);
}
.lb-st-xior__texto { min-width: 0; }
.lb-st-xior__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.lb-st-xior__lb { font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.lb-st-xior__por { color: var(--lb-gris); font-size: 24px; font-weight: 500; line-height: 1.1; }
.lb-st-xior__sello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0 0 28px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--lb-tinta);
  border-radius: var(--lb-r-pildora);
  color: var(--lb-tinta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
}
.lb-st-xior__sello [data-lb-icono] { --lb-icono-tam: 16px; }
.lb-st-xior__titulo { margin: 0 0 14px; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.lb-st-xior__gris { color: var(--lb-gris); }
.lb-st-xior__sub { max-width: 440px; margin: 0 0 12px; color: var(--lb-gris); font-size: clamp(17px, 1.8vw, 19px); line-height: 1.5; text-wrap: pretty; }
.lb-st-xior__pasos { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.lb-st-xior__pasos li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}
.lb-st-xior__ico {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lb-gris-claro);
}
.lb-st-xior__ico [data-lb-icono] { --lb-icono-tam: 28px; }
/* Línea entre los círculos: base fina + trazo que se dibuja al aparecer */
.lb-st-xior__pasos li:not(:last-child)::before, .lb-st-xior__pasos li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 27.25px;
  top: 56px;
  width: 1.5px;
  height: 28px;
}
.lb-st-xior__pasos li:not(:last-child)::before { background: var(--lb-linea); }
.lb-st-xior__pasos li:not(:last-child)::after {
  background: var(--lb-tinta);
  transform-origin: 50% 0;
  transition: transform .7s var(--lb-ease) calc(var(--i, 0) * .3s + .2s);
}
html.lb-js .lb-st-xior:not(.es-visto) .lb-st-xior__pasos li::after { transform: scaleY(0); }
.lb-st-xior__otra { margin: 20px 0 0; text-align: center; }
@media (max-width: 900px) {
  .lb-st-xior__tarjeta { grid-template-columns: minmax(0, 1fr); }
}

/* Franja Xior en «Pantalla propia» (.lb-st-xior--pantalla): sección entera con titular enorme y la
   habitación dibujada. La marca conjunta, el sello y los enlaces son los de arriba; cambia la maqueta.
   <section class="lb-st-xior lb-st-xior--pantalla" aria-labelledby="xior-titulo"><div class="lb-st-xior__in">
     <div class="lb-st-xior__cuerpo">
       <div class="lb-st-xior__texto"> marca · sello ·
         <h2 class="lb-st-xior__titulo" id="xior-titulo">¿Vives en Xior? <em>Ni siquiera tienes que esperarnos.</em></h2>
         <p class="lb-st-xior__sub">…</p><a class="lb-enlace-flecha" …>…</a>
         <p class="lb-st-xior__residencias">Tu residencia Xior en Madrid: <a>Retiro</a> · <a>Campus UEM</a></p></div>
       <svg class="lb-st-xior__hab" role="img" aria-label="…"> … </svg></div>
     <p class="lb-st-xior__otra"><a class="lb-enlace-flecha" …>¿Otra residencia o piso? Vamos a tu puerta …</a></p>
   </div></section>
   El titular lleva tinta + gris (sin .lb-destacado: la página ya tiene el suyo). El dibujo es una
   ilustración de línea fina (cama, ventana, escritorio y tres Cajas LetsBoxIt con su QR) que se
   dibuja al entrar en pantalla (lb-students-piezas.js pone es-visto). */
.lb-st-xior--pantalla { padding: clamp(56px, 8vw, 112px) var(--lb-gutter) clamp(44px, 6vw, 88px); }
.lb-st-xior__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 44px clamp(32px, 6vw, 88px);
}
.lb-st-xior--pantalla .lb-st-xior__marca { margin: 0 0 20px; }
.lb-st-xior--pantalla .lb-st-xior__sello { margin: 0 0 clamp(24px, 3.2vw, 36px); }
.lb-st-xior--pantalla .lb-st-xior__titulo {
  margin: 0 0 22px;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  text-wrap: balance;
}
.lb-st-xior--pantalla .lb-st-xior__titulo em { color: var(--lb-gris); font-style: normal; }
.lb-st-xior--pantalla .lb-st-xior__sub { max-width: 470px; margin: 0 0 22px; font-size: clamp(17px, 1.7vw, 21px); }
.lb-st-xior--pantalla .lb-st-xior__residencias { margin: 22px 0 0; color: var(--lb-gris); font-size: 15px; line-height: 1.5; text-align: left; }
.lb-st-xior--pantalla .lb-st-xior__otra { margin: clamp(32px, 5vw, 56px) 0 0; text-align: center; }
.lb-st-xior--pantalla .lb-st-xior__otra + .lb-st-xior__otra { margin-top: 12px; }   /* segundo enlace (directores de residencia), pegado al primero */
.lb-st-xior__hab {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--lb-tinta);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-st-xior__hab .lb-xh-r { fill: var(--lb-blanco); stroke: none; }
.lb-st-xior__hab .lb-xh-g { fill: var(--lb-gris-claro); stroke: none; }
.lb-st-xior__hab .lb-xh-p { fill: color-mix(in srgb, var(--lb-tinta) 8%, transparent); stroke: none; }
.lb-st-xior__hab .lb-xh-s { fill: currentColor; stroke: none; }
.lb-st-xior__hab .lb-xh-txt { fill: currentColor; stroke: none; font-family: var(--lb-fuente); font-weight: 700; letter-spacing: -.03em; }
.lb-st-xior__hab .lb-xh-t { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--lb-ease) calc(var(--d, 0) * 1ms); }
.lb-st-xior__hab .lb-xh-r, .lb-st-xior__hab .lb-xh-g, .lb-st-xior__hab .lb-xh-p,
.lb-st-xior__hab .lb-xh-det { transition: opacity .5s var(--lb-ease) calc(var(--d, 0) * 1ms); }
html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-t { stroke-dashoffset: 1; }
html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-r, html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-g,
html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-p, html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-det { opacity: 0; }
@media (max-width: 900px) {
  .lb-st-xior__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .lb-st-xior__hab { max-width: 540px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .lb-st-xior--pantalla { padding-top: 48px; padding-bottom: 40px; }
  .lb-st-xior--pantalla .lb-st-xior__otra { text-align: left; }
}

/* ═══ Pasos de pago ═══════════════════════════════════════════════
   <ol class="lb-st-pagos">
     <li class="lb-st-pagos__paso" style="--i:0"><span class="lb-st-pagos__nodo" aria-hidden="true"></span>
       <p class="lb-st-pagos__momento">Hoy</p><p class="lb-st-pagos__cifra">20 €</p><p class="lb-st-pagos__texto">Al reservar. Se descuentan del total.</p></li> …
   </ol>
   Tres cifras grandes en fila (columna en móvil) unidas por una línea fina que
   se dibuja al aparecer. Todo en tinta y gris. */
.lb-st-pagos {
  --lb-p-gap: clamp(24px, 4vw, 56px);
  --lb-p-oculto: scaleX(0);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--lb-p-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-st-pagos__paso { position: relative; min-width: 0; padding-top: 38px; }
.lb-st-pagos__nodo {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lb-tinta);
  transition: transform .45s var(--lb-ease) calc(var(--i, 0) * .45s);
}
.lb-st-pagos__paso::before, .lb-st-pagos__paso::after { content: ""; position: absolute; left: 5px; top: 4.5px; width: calc(100% + var(--lb-p-gap)); height: 1px; }
.lb-st-pagos__paso::before { background: var(--lb-linea); }
.lb-st-pagos__paso::after {
  top: 4.25px;
  height: 1.5px;
  background: var(--lb-tinta);
  transform-origin: 0 50%;
  transition: transform .9s var(--lb-ease) calc(var(--i, 0) * .45s + .15s);
}
.lb-st-pagos__paso:last-child::before, .lb-st-pagos__paso:last-child::after { display: none; }
html.lb-js .lb-st-pagos:not(.es-visto) .lb-st-pagos__paso::after { transform: var(--lb-p-oculto); }
html.lb-js .lb-st-pagos:not(.es-visto) .lb-st-pagos__nodo { transform: scale(0); }
.lb-st-pagos__momento { margin: 0 0 6px; color: var(--lb-gris); font-size: 15px; font-weight: 600; line-height: 1.3; }
.lb-st-pagos__cifra {
  margin: 0 0 10px;
  font-size: clamp(40px, 5.4vw, 56px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.lb-st-pagos__texto { max-width: 300px; margin: 0; color: var(--lb-gris); font-size: 17px; line-height: 1.47; text-wrap: pretty; }
@media (max-width: 720px) {
  .lb-st-pagos { --lb-p-gap: 44px; --lb-p-oculto: scaleY(0); grid-template-columns: minmax(0, 1fr); row-gap: var(--lb-p-gap); }
  .lb-st-pagos__paso { padding: 0 0 0 38px; }
  .lb-st-pagos__nodo { top: 6px; }
  .lb-st-pagos__paso::before, .lb-st-pagos__paso::after { left: 4.5px; top: 11px; width: 1px; height: calc(100% + var(--lb-p-gap)); }
  .lb-st-pagos__paso::after { left: 4.25px; width: 1.5px; transform-origin: 50% 0; }
}

/* ═══ Frase grande ════════════════════════════════════════════════
   <div class="lb-st-frase" data-lb-aparece>
     <p class="lb-st-frase__a">39 € por caja.</p><p class="lb-st-frase__b">Todo el verano.</p>
   </div>
   Una sola idea, centrada: titular enorme y apretado y una segunda línea en
   gris. Como mucho una por página. */
.lb-st-frase { padding: clamp(24px, 6vw, 72px) 0; color: var(--lb-tinta); font-family: var(--lb-fuente); text-align: center; }
.lb-st-frase__a, .lb-st-frase__b {
  max-width: 14em;
  margin: 0 auto;
  font-size: clamp(40px, 7.5vw, 104px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.lb-st-frase__b { color: var(--lb-gris); }
.lb-st-frase__b--menor { font-size: .6em; }

/* ═══ Portada en móvil (§16) ══════════════════════════════════════
   Por debajo de 720 px: titular, entradilla y acciones, y DESPUÉS Bruno,
   pequeño (~180 px de alto) y pegado a la derecha, con su bocadillo a la
   izquierda. bruno.js manda el bocadillo «arriba» en móvil: aquí se coloca
   al lado, con el mismo trazo que usa bruno.css para «izquierda». */
@media (max-width: 720px) {
  .lb-hero__in, .lb-hero__in:has(.lb-hero__bruno) { gap: 28px; }
  .lb-hero__bruno { display: flex; justify-content: flex-end; max-width: none; margin: 0; }
  .lb-hero__bruno > .lb-bruno-sitio, .lb-hero__bruno > .lb-st-bruno,
  .lb-hero__bruno > .lb-bruno-montado,
  .lb-hero__bruno .lb-bruno-sitio.lb-st-bruno { width: 128px; max-width: 128px; margin: 0; flex: none; }
  .lb-hero__bruno .lb-bruno-montado[data-lado] .lb-bruno__bocadillo {
    position: absolute;
    top: 4%;
    right: calc(100% - 6px);
    left: auto;
    bottom: auto;
    order: 0;
    width: min(240px, calc(100vw - 170px));
    max-width: none;
    margin: 0;
    padding: 12px 14px;
    translate: none;
    transform-origin: 100% 24px;
    font-size: 15px;
    line-height: 1.45;
  }
  .lb-hero__bruno .lb-bruno-montado[data-lado] .lb-bruno__bocadillo.escribiendo .lb-bruno__texto { left: 14px; right: 14px; top: 12px; }
  .lb-hero__bruno .lb-bruno-montado[data-lado] .lb-bruno__bocadillo::after {
    left: auto;
    right: -7px;
    bottom: auto;
    top: 20px;
    margin: 0;
    translate: none;
    border: 0;
    border-top: 1px solid var(--lb-linea);
    border-right: 1px solid var(--lb-linea);
  }
}

/* ═══ Bruno se asoma (solo móvil, ≤ 720 px) ═══════════════════════
   <section data-lb-asoma="Consejo corto (máx. ~90 caracteres)" data-lb-asoma-pose="pulgar"
            data-lb-asoma-enlace="/precios" data-lb-asoma-texto-enlace="Ver precios"> …
   lb-students-piezas.js crea UN solo elemento para toda la página (se pega al final del body):
   <div class="lb-asoma">
     <div class="lb-asoma__globo" id="lb-asoma-globo"><p class="lb-asoma__texto"></p>
       <a class="lb-enlace-flecha lb-asoma__enlace"></a><button class="lb-asoma__cerrar">×</button></div>
     <button class="lb-asoma__bruno" aria-label="Consejo de Bruno" aria-expanded="false"><img alt=""></button></div>
   Cuando una sección con data-lb-asoma cruza el centro de la pantalla, Bruno entra desde el borde
   derecho y se queda asomado (cabeza, un brazo y algo de cuerpo, ~90 px) JUSTO ENCIMA de la barra
   fija de reserva (--lb-asoma-b = alto de la barra, que ya incluye la zona segura). El bocadillo
   (fondo blanco, borde fino de tinta, sin sombra) sale a su izquierda y se recoge solo a los ~6 s.
   Con la pieza activa (html.lb-asoma-on) los Brunos guía de la página (portada o sección) se ocultan: uno solo a la vez.
   El foco usa outline (sin sombras). Movimiento reducido: aparece con fundido, sin deslizar. */
.lb-asoma, .lb-asoma * { box-sizing: border-box; }
.lb-asoma { display: none; }
@media (max-width: 720px) {
  html.lb-asoma-on .lb-hero__bruno, html.lb-asoma-on .lb-hero .lb-st-bruno,
  html.lb-asoma-on .lb-st-bruno, html.lb-asoma-on .lb-st-dos__media:has(> .lb-st-bruno) { display: none; }
  .lb-asoma {
    position: fixed;
    right: 0;
    bottom: var(--lb-asoma-b, env(safe-area-inset-bottom, 0px));
    z-index: 61;
    display: block;
    width: 96px;
    height: 92px;
    font-family: var(--lb-fuente);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(110%);
    transition: transform .6s var(--lb-ease), bottom .45s var(--lb-ease), visibility 0s linear .6s;
  }
  .lb-asoma.es-visible {
    visibility: visible;
    transform: none;
    transition: transform .6s var(--lb-ease), bottom .45s var(--lb-ease), visibility 0s;
  }
  .lb-asoma__bruno {
    position: relative;
    display: block;
    width: 96px;
    height: 92px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: transform .35s var(--lb-ease);
  }
  .lb-asoma__bruno:active { transform: scale(.95); transform-origin: 100% 100%; }
  .lb-asoma__bruno:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: -2px; border-radius: 20px 0 0 0; }
  .lb-asoma__bruno img {
    position: absolute;
    left: 4px;
    top: 3px;
    width: 88px;
    height: auto;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .lb-asoma__globo {
    position: absolute;
    right: calc(100% - 8px);
    bottom: 12px;
    width: min(244px, calc(100vw - 118px));
    padding: 13px 16px 14px;
    border: 1px solid var(--lb-tinta);
    border-radius: 20px;
    background: var(--lb-blanco);
    color: var(--lb-tinta);
    font-size: 15px;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
    transform: translateX(14px) scale(.94);
    transform-origin: 100% 100%;
    pointer-events: none;
    transition: opacity .3s var(--lb-ease), transform .45s var(--lb-ease), visibility 0s linear .45s;
  }
  .lb-asoma__globo::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: 38px;
    width: 12px;
    height: 12px;
    border-top: 1px solid var(--lb-tinta);
    border-right: 1px solid var(--lb-tinta);
    background: var(--lb-blanco);
    rotate: 45deg;
  }
  .lb-asoma.es-abierto .lb-asoma__globo {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity .3s var(--lb-ease), transform .45s var(--lb-ease), visibility 0s;
  }
  .lb-asoma__texto { margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: pretty; }
  .lb-asoma__enlace { margin-top: 8px; font-size: 15px; font-weight: 600; }
  .lb-asoma__enlace[hidden] { display: none; }
  .lb-asoma__cerrar {
    position: absolute;
    left: -9px;
    top: -9px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lb-tinta);
    border-radius: 50%;
    background: var(--lb-blanco);
    color: var(--lb-tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lb-asoma__cerrar::before { content: ""; position: absolute; inset: -9px; }   /* zona táctil de 44 px */
  .lb-asoma__cerrar svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .lb-asoma__cerrar:focus-visible, .lb-asoma__enlace:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: 2px; }
}

/* ═══ Escenas con el scroll de la página (§19 Tareas, §20 Mapa, §21 Semana) ══════════════
   Tres piezas comparten mecánica. lb-students-piezas.js envuelve la pieza en una pista alta
   (.lb-st-esc) y la deja fija (position: sticky) mientras la página se desplaza; el progreso
   0 → 1 sale del scroll REAL de la página (con una inercia corta para que la rueda del ratón
   no dé saltos) y cada paso tiene su tramo. El JS también «adopta» como cabecera fija el
   etiqueta/título/frase (.lb-seccion__etiqueta/titulo/sub) que precede a la pieza.
   <div class="lb-st-esc es-activa" style="--lb-esc-v: 3">          ← pista (alto = pantalla × (1 + v))
     <div class="lb-st-esc__fijo">                                  ← sticky, alto de la pantalla
       <div class="lb-st-esc__cab"> etiqueta, título, frase </div>
       <div class="lb-st-tareas es-anim" data-lb-tareas> … </div>
     </div></div>
   Sin JavaScript o con «reducir movimiento»: no hay pista ni sticky y cada pieza se ve en su
   estado final, completo y legible (la clase es-anim solo existe mientras anima).
   Una sola cosa de color en cada pieza, el acento: el check de lo que te queda (Tareas), el
   anillo de LetsBoxIt dentro de Madrid (Mapa) y el bloque de la recogida (Semana). */
:root { --lb-esc-top: 65px; --lb-esc-bot: 0px; }
@media (max-width: 720px) { :root { --lb-esc-top: 0px; --lb-esc-bot: 72px; } }   /* la barra de reserva tapa el borde de abajo */
.lb-st-esc, .lb-st-esc *, .lb-st-tareas, .lb-st-tareas *, .lb-st-mapa, .lb-st-mapa *, .lb-st-semana, .lb-st-semana * { box-sizing: border-box; }
.lb-st-esc { --lb-esc-alto: max(480px, calc(100vh - var(--lb-esc-top) - var(--lb-esc-bot))); position: relative; }
@supports (height: 100svh) { .lb-st-esc { --lb-esc-alto: max(480px, calc(100svh - var(--lb-esc-top) - var(--lb-esc-bot))); } }
.lb-st-esc.es-activa { height: calc(var(--lb-esc-alto) * (1 + var(--lb-esc-v, 3))); }
.lb-st-esc__fijo { display: flex; flex-direction: column; padding-top: clamp(16px, 3.4vh, 36px); }
.lb-st-esc.es-activa > .lb-st-esc__fijo { position: sticky; top: var(--lb-esc-top); height: var(--lb-esc-alto); }
.lb-st-esc__cab { flex: none; margin: 0 0 clamp(14px, 2.6vh, 28px); }
.lb-st-esc__cab > :last-child { margin-bottom: 0; }
.lb-st-esc__cab .lb-seccion__titulo { margin-bottom: 10px; }
.lb-seccion--escena { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); }

/* ── A · Tu lista de junio (.lb-st-tareas) ─────────────────────────────────────────────
   <div class="lb-st-tareas" data-lb-tareas>
     <ol class="lb-st-tareas__lista">
       <li class="lb-st-tareas__item" data-tachar><span class="lb-st-tareas__texto">…</span><span class="lb-st-tareas__porque">…</span></li>
       <li class="lb-st-tareas__item" data-queda>…</li>
       <li class="lb-st-tareas__item lb-st-tareas__item--nueva" data-queda><span class="lb-st-tareas__texto">…</span></li>
     </ol>
     <p class="lb-st-tareas__cierre">…</p>
   </div>
   Se tachan las [data-tachar] una a una (una raya que se dibuja sobre cada línea del texto, el texto
   pasa a gris y su porqué aparece al lado); después las filas se pliegan; las [data-queda] llevan al
   final un check en acento y aparecen la --nueva y el cierre en grande. */
.lb-st-tareas { flex: 1 1 auto; min-height: 0; color: var(--lb-tinta); font-family: var(--lb-fuente); }
.lb-st-tareas__lista { margin: 0; padding: 0; list-style: none; }
.lb-st-tareas__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 14px;
  min-height: 58px;
  overflow: hidden;
  border-bottom: 1px solid var(--lb-linea);
}
/* El aro y su check comparten celda; el check solo se ve en las que quedan */
.lb-st-tareas__item::before, .lb-st-tareas__item::after { content: ""; grid-area: 1 / 1; align-self: center; }
.lb-st-tareas__item::before { width: 24px; height: 24px; border: 1.5px solid var(--lb-gris); border-radius: 50%; transition: background-color .35s var(--lb-ease), border-color .35s var(--lb-ease); }
.lb-st-tareas__item::after { justify-self: center; width: 6px; height: 11px; border: solid var(--lb-tinta); border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; opacity: 0; transition: opacity .25s var(--lb-ease); }
.lb-st-tareas__texto {
  position: relative;
  grid-area: 1 / 2;
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.25;
  text-wrap: pretty;
  transition: color .3s var(--lb-ease);
}
.lb-st-tareas__porque { grid-area: 1 / 3; color: var(--lb-gris); font-size: clamp(16px, 1.7vw, 21px); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.lb-st-tareas__cierre {
  max-width: 12em;
  margin: clamp(20px, 3.4vh, 36px) 0 0;
  font-size: clamp(34px, 6.8vw, 92px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: balance;
  overflow: hidden;
}
/* Estado final (sin JS o con «reducir movimiento»): lo tachado, en gris con su porqué; lo que queda, con su check */
.lb-st-tareas:not(.es-anim) [data-tachar] .lb-st-tareas__texto { color: var(--lb-gris); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--lb-gris); }
.lb-st-tareas:not(.es-anim) [data-tachar]::before { border-color: var(--lb-linea); }
.lb-st-tareas:not(.es-anim) [data-queda]::before, .lb-st-tareas__item.es-ok::before { border-color: var(--lb-acento); background: var(--lb-acento); }
.lb-st-tareas:not(.es-anim) [data-queda]::after, .lb-st-tareas__item.es-ok::after { opacity: 1; }
.lb-st-tareas__raya { display: none; }
/* Mientras anima */
.lb-st-tareas.es-anim .lb-st-tareas__texto { text-decoration: none; }
.lb-st-tareas.es-anim .lb-st-tareas__item.es-hecho .lb-st-tareas__texto { color: var(--lb-gris); }
.lb-st-tareas.es-anim .lb-st-tareas__item.es-hecho::before { border-color: var(--lb-linea); }
.lb-st-tareas.es-anim .lb-st-tareas__raya { position: absolute; display: block; height: 2px; border-radius: 1px; background: var(--lb-tinta); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); pointer-events: none; }
.lb-st-tareas.es-anim .lb-st-tareas__porque { opacity: var(--r, 0); translate: calc((1 - var(--r, 0)) * -12px) 0; }
.lb-st-tareas.es-anim .lb-st-tareas__cierre { height: 0; margin-top: 0; opacity: 0; }
@media (max-width: 720px) {
  .lb-st-tareas__item { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "aro txt" ". porque"; gap: 0 10px; min-height: 48px; padding: 7px 0; align-items: start; }
  .lb-st-tareas__item::before, .lb-st-tareas__item::after { grid-area: aro; align-self: start; }
  .lb-st-tareas__item::before { width: 22px; height: 22px; margin-top: 0; }
  .lb-st-tareas__item::after { margin-top: 5px; }
  .lb-st-tareas__texto { grid-area: txt; font-size: 16.5px; line-height: 1.28; }
  .lb-st-tareas__porque { grid-area: porque; margin-top: 2px; font-size: 14px; }
  .lb-st-tareas__cierre { font-size: 34px; }
}

/* ── B · Vuestro verano, en coche (.lb-st-mapa) ────────────────────────────────────────
   <div class="lb-st-mapa" data-lb-mapa data-voz="Desde {ciudad}: …">
     <div class="lb-st-mapa__cuerpo">
       <p class="lb-st-mapa__total"><span class="lb-st-mapa__n" data-n>≈ 14 h</span><span class="lb-st-mapa__u">al volante <small>estimación</small></span></p>
       <p class="lb-st-mapa__lb"><strong>LetsBoxIt:</strong> …</p>
       <fieldset class="lb-st-mapa__ciudades"><legend class="lb-sr">…</legend>
         <label class="lb-st-mapa__ciudad"><input type="radio" name="…" value="valencia" data-nombre="Valencia" data-h="3.5" data-t="3 h 30" checked><span>Valencia <small>3 h 30</small></span></label> …</fieldset>
     </div>
     <div class="lb-st-mapa__mapa" data-junio="Junio" data-septiembre="Septiembre" data-madrid="Madrid" data-lb="LetsBoxIt">
       <svg class="lb-st-mapa__svg" viewBox="0 0 596 488" role="img" aria-label="…"><path class="lb-st-mapa__costa" d="…"/> …</svg>
       <div class="lb-st-mapa__etqs" aria-hidden="true"></div></div>
     <div class="lb-st-mapa__tabla"> tabla de ciudades (sin JS) </div>
     <p class="lb-sr" data-voz-vivo aria-live="polite"></p>
   </div>
   Los cuatro trayectos (junio ida y vuelta, septiembre ida y vuelta) son arcos que se dibujan con el
   scroll, cada uno con su duración; el contador suma las horas; al final, en acento, el trazo
   diminuto de LetsBoxIt dentro de Madrid y los viajes se atenúan. Sin JS: la tabla. */
.lb-st-mapa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px clamp(20px, 3vw, 48px); flex: 1 1 auto; min-height: 0; color: var(--lb-tinta); font-family: var(--lb-fuente); }
.lb-st-mapa__cuerpo { min-width: 0; }
.lb-st-mapa__total { margin: 0; line-height: 1; }
.lb-st-mapa__n { display: block; font-size: clamp(54px, 7vw, 96px); font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.lb-st-mapa__u { display: block; margin-top: 8px; color: var(--lb-gris); font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.01em; }
.lb-st-mapa__u small { font-size: .8em; font-weight: 500; }
.lb-st-mapa__u small::before { content: "("; }
.lb-st-mapa__u small::after { content: ")"; }
.lb-st-mapa__lb { max-width: 24em; min-height: 3.1em; margin: clamp(16px, 2.4vh, 26px) 0 0; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.lb-st-mapa__lb strong { font-weight: 700; }
.lb-st-mapa__ciudades { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: clamp(14px, 2.4vh, 24px) 0 0; padding: 0; border: 0; }
.lb-st-mapa__ciudad { position: relative; display: inline-flex; }
.lb-st-mapa__ciudad input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lb-st-mapa__ciudad span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--lb-linea);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  transition: background-color .3s var(--lb-ease), color .3s var(--lb-ease), border-color .3s var(--lb-ease), transform .35s var(--lb-ease);
}
.lb-st-mapa__ciudad small { color: var(--lb-gris); font-size: 13px; font-weight: 500; transition: color .3s var(--lb-ease); }
@media (hover: hover) { .lb-st-mapa__ciudad:hover span { border-color: var(--lb-tinta); } }
.lb-st-mapa__ciudad input:checked + span { border-color: var(--lb-tinta); background: var(--lb-tinta); color: var(--lb-blanco); }
.lb-st-mapa__ciudad input:checked + span small { color: var(--lb-blanco); }
.lb-st-mapa__ciudad input:active + span { transform: scale(.97); }
.lb-st-mapa__ciudad input:focus-visible + span { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--lb-st-anillo, var(--lb-blanco)), 0 0 0 6px var(--lb-acento-texto); }
.lb-st-mapa__mapa { position: relative; justify-self: end; width: min(100%, calc((var(--lb-esc-alto) - 220px) * 1.2213)); aspect-ratio: 596 / 488; }
.lb-st-mapa__svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: none; }
.lb-st-mapa__costa { fill: var(--lb-gris-claro); stroke: var(--lb-tinta); stroke-linejoin: round; fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--lb-ease), fill-opacity .9s var(--lb-ease) .5s; }
.lb-st-mapa.es-visto .lb-st-mapa__costa { stroke-dashoffset: 0; fill-opacity: 1; }
.lb-st-mapa__arco { stroke: var(--lb-tinta); stroke-linecap: round; }
.lb-st-mapa__anillo { stroke: var(--lb-acento); stroke-linecap: round; }
.lb-st-mapa__pt { fill: var(--lb-tinta); stroke: none; }
.lb-st-mapa__etqs { position: absolute; inset: 0; pointer-events: none; }
.lb-st-mapa__pill, .lb-st-mapa__ciu { position: absolute; translate: -50% -50%; white-space: nowrap; line-height: 1.2; }
.lb-st-mapa__pill { padding: 3px 9px; border: 1px solid var(--lb-tinta); border-radius: var(--lb-r-pildora); background: var(--lb-blanco); color: var(--lb-tinta); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-st-mapa__ciu { color: var(--lb-tinta); font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.lb-st-mapa__ciu--mes { color: var(--lb-gris); font-size: 12.5px; font-weight: 600; }
.lb-st-mapa__tabla { display: none; grid-column: 1 / -1; }
html:not(.lb-js) .lb-st-mapa__mapa, html:not(.lb-js) .lb-st-mapa__ciudades, html:not(.lb-js) .lb-st-mapa__total,
.lb-st-mapa.lb-fallo .lb-st-mapa__mapa, .lb-st-mapa.lb-fallo .lb-st-mapa__ciudades, .lb-st-mapa.lb-fallo .lb-st-mapa__total { display: none; }
html:not(.lb-js) .lb-st-mapa__tabla, .lb-st-mapa.lb-fallo .lb-st-mapa__tabla { display: block; }
html:not(.lb-js) .lb-st-mapa, .lb-st-mapa.lb-fallo { grid-template-columns: minmax(0, 1fr); }
/* Mientras anima, el texto de LetsBoxIt entra con el anillo */
.lb-st-mapa.es-anim .lb-st-mapa__lb { opacity: var(--l, 0); translate: 0 calc((1 - var(--l, 0)) * 10px); }
.lb-st-mapa__honesto { max-width: 28em; margin: clamp(28px, 4vw, 48px) auto 0; font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; text-align: center; text-wrap: balance; }
.lb-st-mapa__honesto + .lb-st-nota { margin-top: 14px; text-align: center; }
@media (max-width: 720px) {
  .lb-st-mapa { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 10px; }
  .lb-st-mapa__cuerpo { display: contents; }
  .lb-st-mapa__mapa { order: 1; justify-self: stretch; width: 100%; max-width: 420px; margin: 0 auto; }
  .lb-st-mapa__total { order: 2; display: flex; align-items: baseline; gap: 10px; }
  .lb-st-mapa__n { font-size: 52px; }
  .lb-st-mapa__u { margin-top: 0; font-size: 15px; }
  .lb-st-mapa__lb { order: 3; min-height: 4.2em; margin: 0; font-size: 16px; }
  .lb-st-mapa__ciudades { order: 4; margin: 0; }
  .lb-st-mapa__ciudad span { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .lb-st-mapa__pill { padding: 2px 7px; font-size: 11px; }
  .lb-st-mapa__ciu { font-size: 12px; }
  .lb-st-mapa__ciu--mes { font-size: 11px; }
}

/* ── C · Tu última semana, en tu calendario (.lb-st-semana) ────────────────────────────
   <div class="lb-st-semana" data-lb-semana>
     <p class="lb-st-semana__eti">Ilustrativo</p>
     <div class="lb-st-semana__sems">
       <section class="lb-st-semana__sem lb-st-semana__sem--antes" aria-labelledby="…">
         <h3 class="lb-st-semana__tit" id="…">A la forma de siempre</h3>
         <ol class="lb-st-semana__dias" role="list">
           <li class="lb-st-semana__dia"><span class="lb-st-semana__n">Lun</span>
             <div class="lb-st-semana__col"><p class="lb-st-semana__bloque">Buscar cajas</p> …</div></li> … ×7
       <section class="lb-st-semana__sem lb-st-semana__sem--despues"> … <p class="lb-st-semana__libre">libre</p> …
   Bloques: --coche (tinta), --poco (algo más de un tercio del alto), --lb (el de la recogida: ÚNICO
   acento). En escritorio, dos tarjetas con siete columnas; en móvil la comparación sigue lado a
   lado: dos columnas estrechas con los días como filas. Con el scroll aparecen los bloques de la
   izquierda, luego los de la derecha y al final los «libre». */
.lb-st-semana { --lb-sem-alto: clamp(250px, calc(var(--lb-esc-alto) - 355px), 420px); flex: 1 1 auto; min-height: 0; color: var(--lb-tinta); font-family: var(--lb-fuente); }
.lb-st-semana__eti { display: inline-block; margin: 0 0 clamp(10px, 2vh, 18px); padding: 4px 14px; border: 1px solid var(--lb-gris); border-radius: var(--lb-r-pildora); color: var(--lb-gris); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lb-st-semana__sems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lb-st-semana__sem { min-width: 0; padding: 16px 14px 14px; border: 1px solid var(--lb-linea); border-radius: var(--lb-r-tarjeta); }
.lb-st-semana__tit { margin: 0 0 12px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.lb-st-semana__dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.lb-st-semana__dia { min-width: 0; }
.lb-st-semana__n { display: block; margin: 0 0 6px; color: var(--lb-gris); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-align: center; }
.lb-st-semana__col { display: flex; flex-direction: column; gap: 5px; height: var(--lb-sem-alto); padding: 4px; border-radius: 12px; background: var(--lb-gris-claro); }
.lb-st-semana__bloque { flex: 1 1 0; min-height: 0; margin: 0; padding: 8px 5px; border: 1.5px solid var(--lb-tinta); border-radius: 8px; background: var(--lb-blanco); color: var(--lb-tinta); font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.lb-st-semana__bloque--coche { background: var(--lb-tinta); color: var(--lb-blanco); }
.lb-st-semana__bloque--poco { flex: 0 0 38%; }
.lb-st-semana__bloque--lb { flex: 0 0 34%; background: var(--lb-acento); color: var(--lb-tinta); }
.lb-st-semana__libre { margin: 0; padding-top: 6px; color: var(--lb-gris); font-size: 12.5px; font-weight: 500; text-align: center; }
.lb-st-semana.es-anim .lb-st-semana__bloque { opacity: var(--a, 0); translate: 0 calc((1 - var(--a, 0)) * 10px); scale: calc(.94 + .06 * var(--a, 0)); }
.lb-st-semana.es-anim .lb-st-semana__libre { opacity: var(--a, 0); }
/* Hasta 1099 px (tableta incluida) las siete columnas no caben con texto legible: mismas dos columnas con los días como filas */
@media (max-width: 1099px) {
  .lb-st-semana__eti { font-size: 12.5px; padding: 3px 12px; }
  .lb-st-semana__sems { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(7, auto); grid-auto-flow: column; gap: 0 10px; padding-left: 38px; }
  .lb-st-semana__sem, .lb-st-semana__dias { display: contents; }
  .lb-st-semana__tit { align-self: end; margin: 0 0 8px; font-size: 15px; }
  .lb-st-semana__dia { position: relative; padding: 6px 0; border-top: 1px solid var(--lb-linea); }
  .lb-st-semana__sem--antes .lb-st-semana__n { position: absolute; left: -38px; top: 9px; width: 32px; margin: 0; text-align: left; font-size: 12px; }
  .lb-st-semana__sem--despues .lb-st-semana__n { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lb-st-semana__col { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; height: auto; min-height: 28px; padding: 0; background: none; }
  .lb-st-semana__bloque, .lb-st-semana__bloque--poco, .lb-st-semana__bloque--lb { flex: 0 1 auto; padding: 3px 8px; border-radius: 8px; font-size: 12px; }
  .lb-st-semana__libre { padding: 0; font-size: 12px; text-align: left; }
}

/* Escenas: movimiento reducido (todo quieto, en su estado final) */
@media (prefers-reduced-motion: reduce) {
  .lb-st-tareas__item::before, .lb-st-tareas__item::after, .lb-st-tareas__texto,
  .lb-st-mapa__costa, .lb-st-mapa__ciudad span, .lb-st-mapa__ciudad small { transition: none; }
  .lb-st-mapa__ciudad input:active + span { transform: none; }
}

/* ═══ Movimiento reducido (piezas nuevas) ═════════════════════════
   Todo aparece ya dibujado y quieto: sin desplazamientos, sin retardos y sin
   trazos que se dibujan. Los estados (hover, foco, seleccionado) se ven igual. */
@media (prefers-reduced-motion: reduce) {
  html.lb-js [data-lb-aparece]:not([data-lb-aparece="escalonado"]):not(.lb-visto),
  html.lb-js [data-lb-aparece="escalonado"]:not(.lb-visto) > * { opacity: 1; }
  html.lb-js [data-lb-aparece].lb-visto:not(.lb-ya):not([data-lb-aparece="escalonado"]),
  html.lb-js [data-lb-aparece="escalonado"].lb-visto:not(.lb-ya) > * { animation: none; }
  .lb-st-caja .lb-trazo, .lb-caja-rev, .lb-caja-p, .lb-st-caja__item::before,
  .lb-st-kit__pieza, .lb-k-rollo, .lb-k-banda,
  .lb-st-video__pie, .lb-st-video__play,
  .lb-st-verano__nodo,
  .lb-st-modos__tab, .lb-st-modos__barra.es-listo .lb-st-modos__pildora,
  .lb-st-calc__ciudad span, .lb-st-calc__punto,
  .lb-st-antes__boton,
  .lb-st-hueco__dibujo, .lb-st-hueco__pie, .lb-st-hueco__pildora, .lb-st-hueco__foto,
  .lb-st-xior__pasos li::after, .lb-st-pagos__nodo, .lb-st-pagos__paso::after {
    transition: none;
  }
  html.lb-js .lb-st-caja:not(.es-visto) .lb-trazo { stroke-dashoffset: 0; }
  html.lb-js .lb-st-caja:not(.es-visto) .lb-caja-rev { opacity: 1; }
  .lb-st-modos__panel.es-entra { animation: none; }
  .lb-st-kit__pieza:hover, .lb-st-video__play:hover, .lb-st-video__play:active,
  .lb-st-antes__rango:hover ~ .lb-st-antes__asa .lb-st-antes__boton,
  .lb-st-antes__rango:active ~ .lb-st-antes__asa .lb-st-antes__boton,
  .lb-st-calc__ciudad input:active + span { transform: none; }
  .lb-st-kit__pieza:hover .lb-k-rollo, .lb-st-kit__pieza:hover .lb-k-banda { transform: none; }
  .lb-st-kit__pieza:hover .lb-k-bub { animation: none; }
  .lb-st-calc__punto { transform: none; transition-delay: 0ms; }
  html.lb-js .lb-st-xior:not(.es-visto) .lb-st-xior__pasos li::after,
  html.lb-js .lb-st-pagos:not(.es-visto) .lb-st-pagos__paso::after { transform: none; }
  html.lb-js .lb-st-pagos:not(.es-visto) .lb-st-pagos__nodo { transform: none; }
  .lb-btn.lb-st-padres:hover .lb-i-avion { transform: none; }
  /* Verano: el momento y los hitos cambian sin fundido ni desplazamiento; las tarjetas se desplazan sin animar */
  .lb-v-escritorio .lb-v-momento, .lb-v-escritorio .lb-st-verano__hito, .lb-v-punto::before, .lb-v-flecha { transition: none; }
  .lb-v-escritorio .lb-v-momento { transform: none; }
  .lb-v-flecha:not(:disabled):active { transform: none; }
  /* Xior «pantalla»: el dibujo aparece ya dibujado */
  .lb-st-xior__hab .lb-xh-t, .lb-st-xior__hab .lb-xh-r, .lb-st-xior__hab .lb-xh-g, .lb-st-xior__hab .lb-xh-p, .lb-st-xior__hab .lb-xh-det { transition: none; }
  html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-t { stroke-dashoffset: 0; }
  html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-r, html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-g,
  html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-p, html.lb-js .lb-st-xior__hab:not(.es-visto) .lb-xh-det { opacity: 1; }
  /* Bruno que se asoma: aparece con fundido, sin deslizar */
  .lb-asoma, .lb-asoma.es-visible { transform: none; opacity: 0; transition: opacity .3s linear, visibility 0s linear .3s; }
  .lb-asoma.es-visible { opacity: 1; transition: opacity .3s linear, visibility 0s; }
  .lb-asoma__globo, .lb-asoma.es-abierto .lb-asoma__globo { transform: none; transition: opacity .3s linear, visibility 0s; }
  .lb-asoma__bruno, .lb-asoma__bruno:active { transform: none; transition: none; }
}