/* ═══════════════════════════════════════════════════════════════════════════════
   lb-students-historia.css — Portada de Students: «Silencio» + animación del servicio
   Se carga SOLO en las tres portadas (/students/, /en/, /fr/), tras lb-students.css.
   Solo tokens var(--lb-*): sin hex sueltos, sin sombras, sin degradados.

   1. Portada «Silencio» (.lb-hero--silencio): titular enorme y centrado en dos tonos
      (tinta / gris), una línea de apoyo con el precio y dos acciones. El único naranja
      de la primera pantalla es el botón. En móvil la primera pantalla mide el alto
      completo y los botones se quedan abajo, en la zona del pulgar.
   2. Animación del servicio (.lb-st-historia): 8 escenas de línea fina con Bruno que
      aparecen y desaparecen en bucle, como una presentación de producto.
        <section class="lb-st-historia" data-lb-historia …>
          <ol class="lb-sr">…8 rótulos…</ol>                  ← lectores de pantalla
          <div class="lb-st-historia__vista" aria-hidden="true">
            <figure class="lb-hi__esc" data-escena="n"><div class="lb-hi__lienzo">
              <svg class="lb-hi__svg">…</svg><div class="lb-hi__bruno">…</div></div>
              <figcaption class="lb-hi__rotulo">…</figcaption></figure> ×8
          </div>
          <div class="lb-st-historia__mandos" hidden>…</div>     ← lo rellena el JS
      Sin JS o con «reducir movimiento»: las 8 escenas son viñetas estáticas (rejilla
      en escritorio, tira desplazable en móvil). Con JS y movimiento: lb-students-historia.js
      añade .lb-st-historia--anim y las escenas se apilan y rotan.
      Regla de oro del CSS: el estado BASE de cada elemento es el estado FINAL de la escena;
      las animaciones solo existen dentro de .lb-st-historia--anim .es-activa y parten de
      «from» con fill-mode backwards. Así la viñeta estática es la escena terminada.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · Portada «Silencio» ══════════════════════════════════════════════════ */
.lb-hero--silencio {
  display: flex;
  align-items: center;
  min-height: 560px;
  min-height: min(calc(100vh - 65px - 120px), 760px);
  min-height: min(calc(100svh - 65px - 120px), 760px);
  padding: clamp(40px, 5vw, 72px) var(--lb-gutter) clamp(36px, 4vw, 56px);
}
.lb-hero--silencio .lb-hero__in { width: 100%; }
.lb-hero--silencio .lb-hero__titulo {
  max-width: none;
  margin: 0;
  font-size: clamp(40px, 7.4cqi, 104px);
  letter-spacing: -.05em;
  line-height: 1.03;
}
.lb-hero--silencio .lb-hero__titulo--largo { font-size: clamp(40px, 5.9cqi, 84px); }
.lb-hero__linea { display: block; }
.lb-hero__linea--gris { color: var(--lb-gris); }
.lb-hero--silencio .lb-hero__entradilla {
  max-width: 44em;
  margin: clamp(16px, 1.8cqi, 24px) auto 0;
  color: var(--lb-tinta);
  font-size: clamp(18px, 1.65cqi, 22px);
}
.lb-hero--silencio .lb-hero__acciones { margin-top: clamp(24px, 2.4cqi, 32px); }
.lb-hero__segundo--movil { display: none; }

@media (max-width: 720px) {
  .lb-hero--silencio {
    align-items: stretch;
    min-height: 560px;
    min-height: calc(100vh - 57px);
    min-height: calc(100svh - 57px);
    padding: 26px 20px 24px;
  }
  .lb-hero--silencio .lb-hero__in { display: flex; flex-direction: column; gap: 0; text-align: left; }
  .lb-hero--silencio .lb-hero__texto { display: flex; flex: 1; flex-direction: column; }
  .lb-hero--silencio .lb-hero__titulo { font-size: clamp(38px, 14.8cqi, 60px); letter-spacing: -.055em; line-height: 1; }
  .lb-hero--silencio .lb-hero__titulo--largo { font-size: clamp(34px, 12.2cqi, 52px); }
  .lb-hero--silencio .lb-hero__entradilla { max-width: none; margin: 16px 0 0; font-size: 17px; }
  .lb-hero--silencio .lb-hero__acciones {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: auto;
    padding-top: 28px;
  }
  .lb-hero--silencio .lb-hero__acciones .lb-btn { flex: none; width: 100%; }
  .lb-hero__segundo--escritorio { display: none; }
  .lb-hero__segundo--movil { display: inline-flex; }
}

/* ═══ 2 · Animación del servicio ═══════════════════════════════════════════════ */
.lb-st-historia {
  padding: 0 var(--lb-gutter) clamp(56px, 7vw, 96px);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-st-historia, .lb-st-historia *, .lb-st-historia *::before, .lb-st-historia *::after { box-sizing: border-box; }
.lb-st-historia__in { max-width: var(--lb-maxw); margin: 0 auto; }
.lb-st-historia__marco {
  position: relative;
  padding: 16px;
  border-radius: 28px;
  background: var(--lb-gris-claro);
  overflow: hidden;
  overflow: clip;
}

/* La escena: lienzo de 560 × 225 unidades (viewBox desde y = 25; suelo en y = 205, el 80 %). Bruno se mide en esas unidades */
.lb-hi__esc { margin: 0; }
.lb-hi__lienzo {
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 225;
  container-type: inline-size;
}
.lb-hi__lienzo::before {   /* el suelo: una línea fina de lado a lado */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 80%;
  height: 1px;
  background: var(--lb-gris);
  opacity: .4;
}
.lb-hi__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lb-hi__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  --sw0: 3.5px;   /* el trazo se mide a la escala de cada modo (≈ 1,6 px en pantalla) */
  --sw: var(--sw0);
  fill: none;
  stroke: var(--lb-tinta);
  stroke-width: var(--sw);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lb-st-historia .hb { fill: var(--lb-blanco); }
.lb-st-historia .hg { fill: var(--lb-gris-claro); }
.lb-st-historia .hf { stroke-width: calc(var(--sw, 1.75px) * .62); }
.lb-st-historia .hdot { stroke-width: calc(var(--sw, 1.75px) * 1.9); }
.lb-st-historia .ht { fill: var(--lb-tinta); stroke: none; font-family: var(--lb-fuente); font-weight: 700; letter-spacing: -.03em; }
.lb-st-historia .hs { letter-spacing: .1em; }
.lb-st-historia .hv { stroke: var(--lb-gris); }
.lb-st-historia .hbm {
  fill: var(--lb-blanco);
  fill-opacity: .6;
  stroke: var(--lb-gris);
  stroke-width: calc(var(--sw, 1.75px) * .5);
  stroke-dasharray: 3 4;
}
.lb-st-historia .hab { opacity: 0; }   /* la caja abierta solo existe durante la animación */
.lb-st-historia .hp, .lb-st-historia .hcae, .lb-st-historia .hmue { transform-box: fill-box; transform-origin: 50% 100%; }
.lb-st-historia .hcae { transform-origin: 50% 50%; }

/* Bruno: HTML sobre el lienzo (la cuenta usa cqw del propio lienzo) */
.lb-hi__bruno {
  --u: calc(100cqw / 560);
  position: absolute;
  left: calc(var(--x) * var(--u));
  bottom: calc(41 * var(--u));
  z-index: 2;
  height: calc(100 * var(--u));
}
.lb-hi__bruno img, .lb-hi__bruno noscript img { display: block; width: auto; height: 100%; user-select: none; -webkit-user-drag: none; }
.lb-hi__bruno--giro img { scale: -1 1; }

.lb-hi__rotulo {
  margin: 8px 6px 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* ── Sin animación (sin JS o «reducir movimiento»): viñetas ─────────────────── */
.lb-st-historia__vista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lb-st-historia__vista .lb-hi__esc { padding: 12px 10px 14px; border-radius: 20px; background: var(--lb-blanco); }
.lb-st-historia__vista .lb-hi__esc .lb-hi__lienzo { overflow: hidden; overflow: clip; }
.lb-st-historia__vista .lb-hi__svg { --sw0: 3.7px; }
@media (max-width: 900px) {
  .lb-st-historia__vista {
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--lb-gris) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .lb-st-historia__vista .lb-hi__esc { flex: 0 0 min(80vw, 320px); scroll-snap-align: start; }
  .lb-st-historia__vista .lb-hi__svg { --sw0: 3.4px; }
}

/* ── Con animación: las escenas se apilan y rotan ───────────────────────────── */
.lb-st-historia--anim .lb-st-historia__marco { padding: 18px 16px 10px; }
.lb-st-historia--anim .lb-st-historia__vista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  overflow: clip;
  scroll-snap-type: none;
}
.lb-st-historia--anim .lb-hi__esc {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;   /* al salir se funde; al entrar aparece de golpe (el suelo no parpadea) */
}
.lb-st-historia--anim .lb-hi__esc.es-visible { opacity: 1; transition: none; }
.lb-st-historia--anim .lb-hi__lienzo { width: min(100%, 620px); }
.lb-st-historia--anim .lb-st-historia__vista .lb-hi__esc .lb-hi__lienzo { overflow: visible; }
.lb-st-historia--anim .lb-hi__lienzo::before { left: -120vw; right: -120vw; }
.lb-st-historia--anim .lb-hi__svg { --sw0: 1.75px; }
.lb-st-historia--anim .lb-hi__rotulo { min-height: 1.4em; margin-top: 10px; font-size: 18px; }

/* Mandos: puntos de escena (8, clicables) y «Pausar animación» (WCAG 2.2.2) */
.lb-st-historia__mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20px;
  padding-top: 4px;
}
.lb-st-historia__mandos[hidden] { display: none; }
.lb-st-historia__puntos { display: flex; align-items: center; }
.lb-st-historia__punto {
  display: grid;
  place-items: center;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lb-st-historia__punto > span {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border: 1px solid var(--lb-gris);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-gris);
  overflow: hidden;
  transition: width .45s var(--lb-ease), height .45s var(--lb-ease), background-color .3s var(--lb-ease), border-color .3s var(--lb-ease);
}
@media (hover: hover) {
  .lb-st-historia__punto:hover > span { border-color: var(--lb-tinta); background: var(--lb-tinta); }
}
.lb-st-historia__punto[aria-current="step"] > span { width: 24px; height: 8px; border-color: var(--lb-tinta); background: transparent; }
.lb-st-historia__punto[aria-current="step"] > span::after {   /* el relleno marca cuánto falta para la siguiente escena */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lb-tinta);
  transform-origin: 0 50%;
  animation: lb-hi-progreso var(--lb-hi-dur, 2.8s) linear both;
}
.lb-st-historia__punto:focus-visible, .lb-st-historia__pausa:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: 2px; }
.lb-st-historia__pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px 0 13px;
  border: 1.5px solid var(--lb-tinta);
  border-radius: var(--lb-r-pildora);
  background: transparent;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  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-historia__pausa:active { transform: scale(.97); }
@media (hover: hover) {
  .lb-st-historia__pausa:hover { background: var(--lb-tinta); color: var(--lb-blanco); }
}
.lb-st-historia__pausa svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lb-st-historia__pausa svg .rel { fill: currentColor; }

/* En móvil el lienzo se recorta por los lados (se ve el centro de la escena, más grande) */
@media (max-width: 720px) {
  .lb-st-historia { padding-bottom: 48px; }
  .lb-st-historia__marco { border-radius: 24px; padding: 12px; }
  .lb-st-historia--anim .lb-st-historia__marco { padding: 12px 12px 8px; }
  .lb-st-historia--anim .lb-hi__lienzo { width: 118%; max-width: none; }
  .lb-st-historia--anim .lb-hi__svg { --sw0: 2.35px; }
  .lb-st-historia--anim .lb-hi__rotulo { min-height: 2.7em; margin-top: 6px; font-size: 16px; }
  .lb-st-historia__punto { width: 20px; }
  .lb-st-historia__punto[aria-current="step"] > span { width: 20px; }
}

/* ── Animaciones (solo con .lb-st-historia--anim, en la escena activa) ───────── */
@keyframes lb-hi-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lb-hi-traza {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; opacity: 0; }
  3%   { opacity: 1; }
  50%  { fill-opacity: 0; }
  to   { stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
}
@keyframes lb-hi-pop { from { opacity: 0; translate: 0 10px; scale: .86; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes lb-hi-cae {
  from { translate: 0 calc(var(--h, 100) * -1px); rotate: 24deg; opacity: 0; }
  25%  { opacity: 1; }
  to   { translate: 0 0; rotate: 0deg; opacity: 1; }
}
@keyframes lb-hi-abre { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lb-hi-mueve { from { translate: calc(var(--dx) * 1px) 0; opacity: 0; } 14% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes lb-hi-paso { from { translate: 0 0; } to { translate: 0 calc(-3 * var(--u, 1px)); } }
@keyframes lb-hi-sale { 0% { translate: 0 0; } 14% { translate: -5px 0; } 100% { translate: 380px 0; } }
@keyframes lb-hi-barre { from { rotate: -20deg; } to { rotate: 20deg; } }
@keyframes lb-hi-fa { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-hi-entra { from { translate: calc(var(--dx0) * var(--u)) 0; opacity: 0; } 18% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
@keyframes lb-hi-salta { from { translate: 0 0; } to { translate: 0 calc(-9 * var(--u)); } }

.lb-st-historia--anim .es-activa .hd { animation: lb-hi-traza .75s cubic-bezier(.4, 0, .2, 1) calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .hp { animation: lb-hi-pop .55s var(--lb-ease) calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .hcae { animation: lb-hi-cae .5s cubic-bezier(.45, 0, .9, .6) calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .hab { animation: lb-hi-abre 1.55s linear calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .hmue { animation: lb-hi-mueve var(--tm, 1.2s) cubic-bezier(.3, .6, .3, 1) calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .hmue > use { animation: lb-hi-paso .3s ease-in-out calc(var(--d, 0) * 1ms) 6 alternate backwards; }
.lb-st-historia--anim .es-activa .hsal { animation: lb-hi-sale 1.15s cubic-bezier(.55, 0, .8, .45) calc(var(--d, 0) * 1ms) forwards; }
.lb-st-historia--anim .es-activa .hbar { transform-origin: 0 0; animation: lb-hi-barre 2.6s ease-in-out infinite alternate; }
.lb-st-historia--anim .es-activa .hfa { animation: lb-hi-fa .6s ease calc(var(--d, 0) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .lb-hi__bruno { animation: lb-hi-entra 1.3s var(--lb-ease) calc(var(--dl, 250) * 1ms) backwards; }
.lb-st-historia--anim .es-activa .lb-hi__bruno--anda img { animation: lb-hi-paso .32s ease-in-out calc(var(--dl, 250) * 1ms) 4 alternate backwards; }
.lb-st-historia--anim .es-activa .lb-hi__bruno--salta img { animation: lb-hi-salta .45s ease-out calc(var(--dl, 250) * 1ms + 700ms) 4 alternate backwards; }

/* Pausa del visitante, o fuera de pantalla / pestaña oculta: todo se congela donde está */
.lb-st-historia.es-pausada *, .lb-st-historia.es-pausada *::before, .lb-st-historia.es-pausada *::after,
.lb-st-historia.es-fuera *, .lb-st-historia.es-fuera *::before, .lb-st-historia.es-fuera *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .lb-st-historia *, .lb-st-historia *::before, .lb-st-historia *::after { animation: none !important; transition: none !important; }
}