/* ═══════════════════════════════════════════════════════════════
   lb-marca.css — LetsBoxIt · componentes .lb-* de web
   Lienzo Apple, color Dots: blanco / #F5F5F7, tinta, Inter, titulares
   enormes y apretados, mucho aire, botones en píldora y UN solo acento
   por página (el del nicho). Spec §3 y brand/DESIGN.md.

   Uso:
     <link rel="stylesheet" href="assets/lb-marca.css">   (ya importa lb-tokens.css)
     <html lang="es" data-nicho="grupo|students|mudanzas|obras">
     <body class="lb-lienzo"> ... componentes ... </body>
     <script src="assets/lb-marca.js" defer></script>     (reseñas en bucle y FAQ de respaldo; opcional)
     <script src="assets/lb-iconos.js" defer></script>    (iconos animados y estados de botón; opcional)
   Las rutas de las imágenes de Bruno las pone la página anfitriona:
     assets/bruno/<personaje>/cabeza-neutra.png

   Acento escaso (regla Apple, revisión de Gon 2-oct): en una página solo
   1 o 2 cosas llevan el color del nicho. En este fichero el acento solo
   sale en: el botón principal, .lb-destacado, .lb-insignia y el anillo de
   foco. Todo lo demás (etiquetas, números, precios, enlaces, iconos) va
   en tinta o gris.

   Reglas del kit que este fichero cumple (las vigila tests/smoke-marca.php):
   - Sin degradados de fondo (solo mask-image para el fundido de bordes del
     carrusel de reseñas). Sin sombras, salvo el anillo de :focus-visible.
   - Todo el color sale de los tokens (var(--lb-*)); sin hex de marca sueltos.
   - Tarjetas con radio var(--lb-r-tarjeta) (24 px); botones y campos en píldora.
   - Todo movimiento se anula con prefers-reduced-motion.
   - Funciona a 360 px sin scroll horizontal y sin JavaScript.
   ═══════════════════════════════════════════════════════════════ */

@import url("lb-tokens.css");

/* ── Variables de apoyo (no son de marca) ─────────────────────── */
:root {
  /* Error de formulario: color funcional, no es un segundo acento.
     #B3261E sobre blanco = 6,5:1 y sobre #F5F5F7 = 6,0:1 (AA). */
  --lb-error: #B3261E;
  /* Línea fina de separación (tinta al 14 %); sin color-mix, queda en gris claro */
  --lb-linea: var(--lb-gris-claro);
  --lb-maxw: 1120px;
  --lb-gutter: 24px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --lb-linea: color-mix(in srgb, var(--lb-tinta) 14%, transparent); }
}

/* ── Base ─────────────────────────────────────────────────────── */
/* .lb-lienzo va en <body>: tipografía, color de texto y fondo del kit */
.lb-lienzo {
  margin: 0;
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: var(--lb-t-cuerpo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.lb-cab, .lb-cab *, .lb-cab *::before, .lb-cab *::after,
.lb-pie, .lb-pie *, .lb-pie *::before, .lb-pie *::after,
.lb-btn, .lb-btn::before, .lb-btn::after,
.lb-hero, .lb-hero *, .lb-hero *::before, .lb-hero *::after,
.lb-seccion, .lb-seccion *, .lb-seccion *::before, .lb-seccion *::after,
.lb-resenas, .lb-resenas *, .lb-resenas *::before, .lb-resenas *::after,
.lb-cifras, .lb-cifras *, .lb-cifras *::before, .lb-cifras *::after,
.lb-campo, .lb-campo *,
.lb-legal, .lb-legal * {
  box-sizing: border-box;
}

/* ═══ Botones ═════════════════════════════════════════════════════
   <a class="lb-btn lb-btn--principal" href="#">Reservar</a>
   <button class="lb-btn lb-btn--secundario">Ver precios</button>
   <a class="lb-btn lb-btn--texto" href="#">Cómo funciona</a>
   Sobre students el texto del principal es tinta (blanco no pasa AA). */
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: var(--lb-r-pildora);
  background: transparent;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--lb-ease), background-color .3s var(--lb-ease),
              color .3s var(--lb-ease), border-color .3s var(--lb-ease);
}
.lb-btn:active { transform: scale(.97); }
.lb-btn:focus-visible {
  outline: 2px solid transparent; /* visible en modo alto contraste */
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-btn[disabled], .lb-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Principal: relleno del acento */
.lb-btn--principal {
  background: var(--lb-acento);
  color: var(--lb-blanco);
  --lb-btn-hover: var(--lb-acento);
}
@supports (color: color-mix(in srgb, red, blue)) {
  /* grupo y obras (acento oscuro): se aclara un poco al pasar el ratón */
  .lb-btn--principal { --lb-btn-hover: color-mix(in srgb, var(--lb-acento) 82%, var(--lb-blanco)); }
  /* students y mudanzas (acento vivo): se oscurece un poco */
  [data-nicho="students"] .lb-btn--principal,
  [data-nicho="mudanzas"] .lb-btn--principal { --lb-btn-hover: color-mix(in srgb, var(--lb-acento) 86%, var(--lb-tinta)); }
}
[data-nicho="students"] .lb-btn--principal { color: var(--lb-tinta); }
@media (hover: hover) {
  .lb-btn--principal:hover { background: var(--lb-btn-hover); }
}

/* Secundario: contorno de tinta; al pasar el ratón se rellena */
.lb-btn--secundario {
  border-color: var(--lb-tinta);
  background: transparent;
  color: var(--lb-tinta);
}
@media (hover: hover) {
  .lb-btn--secundario:hover { background: var(--lb-tinta); color: var(--lb-blanco); }
}

/* Texto (ALIAS ANTIGUO de .lb-enlace-flecha): usa .lb-enlace-flecha en piezas
   nuevas. Mismo aspecto: tinta, sin subrayado y un chevron dibujado con
   bordes que se desliza 4 px. */
.lb-btn--texto {
  min-height: 44px;
  padding: 0 4px;
  color: var(--lb-tinta);
}
.lb-btn--texto::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: -2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .35s var(--lb-ease);
}
@media (hover: hover) {
  .lb-btn--texto:hover::after { transform: translateX(4px) rotate(45deg); }
}

/* ═══ Enlace con flecha ═══════════════════════════════════════════
   La segunda llamada a la acción de cada portada (junto al botón principal).
   <a class="lb-enlace-flecha" href="#">Cómo funciona<svg class="lb-enlace-flecha__icono" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M6 3.5 10.5 8 6 12.5"/></svg></a>
   Texto en tinta y sin subrayado; el chevron se desliza 4 px al pasar el
   ratón o enfocar. Solo si es EL enlace destacado de la página: añade
   .lb-destacado (texto en el acento). Inspiración: "Interactive Animated
   Arrow Icon" de 21st.dev (id 2193), reescrito en CSS puro. */
.lb-enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s var(--lb-ease), opacity .3s var(--lb-ease);
}
.lb-enlace-flecha.lb-destacado { color: var(--lb-acento-texto); }
.lb-enlace-flecha__icono {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--lb-ease);
}
@media (hover: hover) {
  .lb-enlace-flecha:hover .lb-enlace-flecha__icono { transform: translateX(4px); }
}
.lb-enlace-flecha:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-enlace-flecha:focus-visible .lb-enlace-flecha__icono { transform: translateX(4px); }
.lb-enlace-flecha:active { opacity: .6; }

/* ═══ Destacado e insignia: lo ÚNICO que lleva color de acento ═════
   Regla Apple: 1 o 2 cosas de color por página (además del botón principal).
   <span class="lb-destacado">una palabra o frase del titular</span>
   <span class="lb-insignia">Reservas verano 2027 abiertas</span>   (el único aviso)
   La insignia lleva un punto que late, como el "Animated Badge" de 21st.dev
   (id 8575), reescrito en CSS puro; con movimiento reducido el punto queda fijo. */
.lb-destacado { color: var(--lb-acento-texto); }
.lb-insignia {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 18px 0 36px;
  border: 1px solid var(--lb-linea);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .3s var(--lb-ease);
}
.lb-insignia::before, .lb-insignia::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
}
.lb-insignia::before { background: var(--lb-acento); }
.lb-insignia::after {
  border: 1.5px solid var(--lb-acento);
  animation: lb-late 2.2s var(--lb-ease) infinite;
}
@keyframes lb-late {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(2.8); }
  100% { opacity: 0;  transform: scale(2.8); }
}
@media (hover: hover) {
  a.lb-insignia:hover { border-color: var(--lb-tinta); }
}
a.lb-insignia:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}

/* ═══ Estados de botón (con assets/lb-iconos.js) ══════════════════
   <button class="lb-btn lb-btn--principal" data-icono-reposo="enviar"
           data-texto-cargando="Enviando…" data-texto-hecho="Enviado">Enviar</button>
   LbIconos.estado(boton, 'cargando' | 'hecho' | null): spinner → check
   dibujado; "enviar" → "enviado". Sin JavaScript el botón es un botón normal. */
.lb-btn__estado { display: none; }
.lb-btn .lb-btn__estado { --lb-icono-tam: 20px; width: 20px; height: 20px; flex: none; color: inherit; line-height: 0; }
.lb-btn[data-estado] .lb-btn__estado, .lb-btn[data-icono-reposo] .lb-btn__estado { display: inline-block; }
.lb-btn .lb-btn__estado:empty { display: none; }
/* En estos dos estados el botón lleva aria-disabled="true" y lb-iconos.js descarta sus clics y pulsaciones;
   se queda enfocable (si no, el teclado pierde el sitio) y el cambio se anuncia en una región oculta. */
.lb-btn[data-estado="cargando"] { cursor: progress; }
.lb-btn[data-estado="hecho"] { cursor: default; }
/* Texto solo para lectores de pantalla (la región donde se anuncian los estados de botón) */
.lb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══ Cabecera ════════════════════════════════════════════════════
   <header class="lb-cab"><div class="lb-cab__in">
     <a class="lb-cab__logo" href="/">
       <img class="lb-cab__marca" src="assets/bruno/renders/students/mini-00-base.png" alt="" width="29" height="40">
       <span class="lb-cab__nombre">LetsBoxIt</span>
       <span class="lb-cab__apellido">Students</span>
     </a>
     <nav class="lb-cab__menu" aria-label="Principal"><a href="#">Cómo funciona</a>...</nav>
     <a class="lb-btn lb-btn--principal lb-cab__cta" href="#">Reservar</a>
   </div></header>
   La marca es el CUERPO ENTERO del oso del nicho (render mini-00-base.png, ~40 px
   de alto): el uniforme dice de un vistazo en qué nicho estás. Nunca solo la cabeza.
   En el grupo: sin .lb-cab__apellido y la marca son los tres cuerpos en fila, un
   poco solapados como familia:
     <span class="lb-cab__marca lb-cab__marca--trio"><img ...><img ...><img ...></span>
   Logo provisional hasta el subproyecto 8 (logo plano). */
.lb-cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--lb-blanco);
  border-bottom: 1px solid var(--lb-linea);
  font-family: var(--lb-fuente);
}
.lb-cab__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  max-width: var(--lb-maxw);
  margin: 0 auto;
  padding: 10px var(--lb-gutter);
}
.lb-cab__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lb-tinta);
  text-decoration: none;
  transition: opacity .3s var(--lb-ease);
}
.lb-cab__logo: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);
}
@media (hover: hover) {
  .lb-cab__logo:hover { opacity: .72; }
}
.lb-cab__marca { display: block; flex: none; height: 40px; width: auto; transition: transform .45s var(--lb-ease); }
/* Los tres cuerpos del grupo en fila, algo solapados como una familia (el último queda encima) */
.lb-cab__marca--trio { display: inline-flex; align-items: flex-end; }
.lb-cab__marca--trio img { display: block; height: 40px; width: auto; }
.lb-cab__marca--trio img + img { margin-left: -9px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lb-cab__logo:hover .lb-cab__marca { transform: translateY(-2px); }
}
.lb-cab__nombre {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
/* El apellido es el nicho: va en gris (el color lo pone el oso de la cabecera, no el texto) */
.lb-cab__apellido {
  margin-left: -3px;
  color: var(--lb-gris);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}
.lb-cab__menu {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
}
.lb-cab__menu a {
  padding: 8px 0;
  color: var(--lb-gris);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s var(--lb-ease);
}
.lb-cab__menu a:focus-visible {
  outline: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-cab__menu a:hover, .lb-cab__menu a[aria-current="page"] { color: var(--lb-tinta); }
.lb-cab__cta { min-height: 44px; padding: 0 22px; margin-left: auto; }
.lb-cab__menu + .lb-cab__cta { margin-left: 0; }

/* Móvil: logo y botón arriba, menú envuelto debajo (sin JS) */
@media (max-width: 720px) {
  .lb-cab { position: static; } /* con el menú envuelto sería demasiado alta para quedarse fija */
  .lb-cab__in { padding: 8px 16px; gap: 0 12px; }
  .lb-cab__marca, .lb-cab__marca--trio img { height: 34px; }
  .lb-cab__logo { gap: 6px; }
  .lb-cab__nombre, .lb-cab__apellido { font-size: 17px; }
  .lb-cab__cta, .lb-cab__menu + .lb-cab__cta { margin-left: auto; padding: 0 16px; }
  .lb-cab__menu { order: 3; flex-basis: 100%; justify-content: flex-start; gap: 0 18px; }
  .lb-cab__menu a { padding: 6px 0; font-size: 14px; }
}

/* ═══ Hero ════════════════════════════════════════════════════════
   <section class="lb-hero"><div class="lb-hero__in">
     <div class="lb-hero__texto">
       <h1 class="lb-hero__titulo">Un titular enorme y <span class="lb-destacado">apretado</span></h1>
       <p class="lb-hero__entradilla">Una sola frase que explica.</p>
       <div class="lb-hero__acciones"><a class="lb-btn lb-btn--principal" href="#">Reservar</a>
         <a class="lb-enlace-flecha" href="#">Cómo funciona<svg class="lb-enlace-flecha__icono" ...></svg></a></div>
     </div>
     <div class="lb-hero__bruno"><img src="assets/bruno/renders/students/04-senalando.png" alt="" ></div>   (opcional; o el componente Bruno guía)
     En el grupo: <div class="lb-hero__bruno lb-hero__bruno--trio"><img ...><img ...><img ...></div> (los tres, renders de grupo/)
     Bruno nunca va de adorno: junto a su render siempre un bocadillo útil (componente Bruno guía).
   </div></section>
   Reglas de composición (revisión de Gon): SIN antetítulo encima del titular;
   el titular ocupa más del 50 % del ancho (con Bruno, ~65 %; centrada, hasta
   ~78 %); SIEMPRE dos acciones: principal + enlace con flecha (o secundaria).
   Un solo .lb-destacado o .lb-insignia por portada.
   Modificador .lb-hero--centrado: texto centrado y Bruno debajo. */
.lb-hero {
  container-type: inline-size;   /* el titular se mide contra la portada, no contra la ventana */
  padding: clamp(48px, 8vw, 104px) var(--lb-gutter) clamp(56px, 9vw, 112px);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-hero__in {
  display: grid;
  align-items: center;
  gap: 40px 56px;
  max-width: var(--lb-maxw);
  margin: 0 auto;
}
.lb-hero__in:has(.lb-hero__bruno) { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }   /* el texto ocupa ~65 % */
.lb-hero__titulo {
  margin: 0 0 20px;
  font-size: var(--lb-t-hero);
  font-size: clamp(40px, 5.7cqi, 80px);   /* ~70 px a 1280: un titular típico cabe en 3 líneas y llena más de la mitad */
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
  text-wrap: pretty;   /* sin "balance": equilibrar las líneas estrecha el bloque por debajo del 50 % */
}
.lb-hero__entradilla {
  max-width: 600px;
  margin: 0 0 32px;
  color: var(--lb-gris);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.47;
  text-wrap: pretty;
}
.lb-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lb-hero__texto > .lb-insignia { margin-top: 32px; }
.lb-hero__bruno { width: 100%; max-width: 420px; margin-inline: auto; }
.lb-hero__bruno img { display: block; width: 100%; height: auto; }
.lb-hero__bruno--trio { display: flex; align-items: flex-end; max-width: 520px; }
.lb-hero__bruno--trio img { flex: 1 1 0; min-width: 0; }
.lb-hero__bruno--trio img + img { margin-left: -7%; }

.lb-hero--centrado .lb-hero__in { grid-template-columns: minmax(0, 1fr); text-align: center; }
.lb-hero--centrado .lb-hero__titulo { max-width: 78%; margin-inline: auto; }   /* titular ancho, no un bloque estrecho */
.lb-hero--centrado .lb-hero__entradilla { margin-inline: auto; }
.lb-hero--centrado .lb-hero__acciones { justify-content: center; }

/* Entrada suave al cargar (se anula con prefers-reduced-motion) */
@keyframes lb-subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.lb-hero__texto > * { animation: lb-subir .9s var(--lb-ease) both; }
.lb-hero__texto > :nth-child(2) { animation-delay: .08s; }
.lb-hero__texto > :nth-child(3) { animation-delay: .16s; }
.lb-hero__texto > :nth-child(4) { animation-delay: .24s; }

@media (max-width: 900px) {
  .lb-hero__in, .lb-hero__in:has(.lb-hero__bruno) { grid-template-columns: minmax(0, 1fr); }
  .lb-hero__bruno { max-width: 300px; }
}
@media (max-width: 720px) {
  .lb-hero__acciones .lb-btn:not(.lb-btn--texto) { flex: 1 1 100%; }
  .lb-hero__bruno { max-width: 220px; }
}

/* ═══ Sección ═════════════════════════════════════════════════════
   <section class="lb-seccion [lb-seccion--gris]"><div class="lb-seccion__in">
     <p class="lb-seccion__etiqueta">Cómo funciona</p>
     <h2 class="lb-seccion__titulo">Titular de la sección</h2>
     <p class="lb-seccion__sub">Una frase de apoyo.</p>
     ...componentes (pasos, precios, opiniones)...
   </div></section>
   En una sección gris, las tarjetas pasan a blanco para separarse del fondo. */
.lb-seccion {
  --lb-fondo-tarjeta: var(--lb-gris-claro);
  padding: clamp(64px, 9vw, 112px) var(--lb-gutter);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-seccion--gris {
  --lb-fondo-tarjeta: var(--lb-blanco);
  background: var(--lb-gris-claro);
}
.lb-seccion__in { max-width: var(--lb-maxw); margin: 0 auto; }
.lb-seccion__etiqueta {
  margin: 0 0 12px;
  color: var(--lb-gris);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
}
.lb-seccion__titulo {
  max-width: 820px;
  margin: 0 0 16px;
  font-size: var(--lb-t-h2);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.08;
  text-wrap: balance;
}
.lb-seccion__sub {
  max-width: 600px;
  margin: 0 0 48px;
  color: var(--lb-gris);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}
.lb-seccion__titulo:last-child, .lb-seccion__sub:last-child { margin-bottom: 0; }
/* Sin frase de apoyo, el titular iba pegado al contenido */
.lb-seccion__titulo + .lb-pasos, .lb-seccion__titulo + .lb-precios,
.lb-seccion__titulo + .lb-opiniones, .lb-seccion__titulo + .lb-faq,
.lb-seccion__etiqueta + .lb-opiniones { margin-top: 32px; }

/* ═══ Pasos ═══════════════════════════════════════════════════════
   <ol class="lb-pasos">
     <li class="lb-pasos__paso"><span class="lb-pasos__num">1</span>
       <h3 class="lb-pasos__titulo">Reservas</h3>
       <p class="lb-pasos__texto">Texto de ejemplo.</p></li> ...
   </ol>
   Variante con icono animado (assets/lb-iconos.js), en lugar del número:
     <li class="lb-pasos__paso"><span class="lb-pasos__icono" data-lb-icono="furgoneta"></span> ...
   Número e icono van en tinta: el color no es para decorar. */
.lb-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-pasos__paso {
  padding: 32px 28px;
  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-pasos__paso:hover { transform: translateY(-4px); }
}
.lb-pasos__icono { display: block; margin-bottom: 20px; --lb-icono-tam: 48px; }
.lb-pasos__num {
  display: block;
  margin-bottom: 20px;
  color: var(--lb-tinta);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}
.lb-pasos__titulo {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.lb-pasos__texto { margin: 0; color: var(--lb-gris); font-size: var(--lb-t-cuerpo); line-height: 1.5; }

/* ═══ Precio ══════════════════════════════════════════════════════
   <div class="lb-precios">   (rejilla opcional para varias tarjetas)
     <article class="lb-precio [lb-precio--destacado]">
       <p class="lb-precio__etiqueta">Plan de ejemplo</p>
       <p class="lb-precio__cifra">000 €<span class="lb-precio__unidad"> / verano</span></p>
       <p class="lb-precio__nota">Texto de ejemplo.</p>
       <ul class="lb-precio__lista"><li>Una ventaja</li>...</ul>
       <a class="lb-btn lb-btn--principal" href="#">Reservar</a>
     </article>
   </div>
   El destacado se marca con borde de tinta, no con sombra ni color. */
.lb-precios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  align-items: stretch;
}
.lb-precio {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 2px solid transparent;
  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), border-color .3s var(--lb-ease);
}
@media (hover: hover) {
  .lb-precio:hover { transform: translateY(-4px); }
}
.lb-precio--destacado {
  border-color: var(--lb-tinta);
  background: var(--lb-blanco);
}
.lb-precio__etiqueta {
  margin: 0 0 12px;
  color: var(--lb-gris);
  font-size: 15px;
  font-weight: 600;
}
.lb-precio__cifra {
  margin: 0 0 4px;
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.lb-precio__unidad {
  color: var(--lb-gris);
  font-size: var(--lb-t-cuerpo);
  font-weight: 500;
  letter-spacing: 0;
}
.lb-precio__nota { margin: 0 0 24px; color: var(--lb-gris); font-size: 15px; line-height: 1.47; }
.lb-precio__lista { flex: 1 1 auto; margin: 0 0 28px; padding: 0; list-style: none; }
.lb-precio__lista li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: var(--lb-t-cuerpo);
  line-height: 1.47;
}
/* Tic dibujado con bordes: sin imágenes ni sombras */
.lb-precio__lista li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(6px + .45em);
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--lb-tinta);
  border-bottom: 2px solid var(--lb-tinta);
  transform: rotate(45deg);
}
.lb-precio .lb-btn { margin-top: auto; }

/* ═══ FAQ ═════════════════════════════════════════════════════════
   <div class="lb-faq">
     <details><summary>Pregunta de ejemplo</summary><p>Respuesta de ejemplo.</p></details> ...
   </div>
   Sin JavaScript: <details> abre y cierra solo. Apertura suave en altura donde
   el navegador soporta ::details-content (Chrome/Edge 131+, Safari 18.4+);
   en el resto, assets/lb-marca.js anima la altura (y sin él abre de golpe).
   El "+" gira a "×". Inspiración: "Accordion" de 21st.dev (id 698), en CSS puro. */
.lb-faq {
  max-width: 760px;
  margin: 0;
  border-top: 1px solid var(--lb-linea);
  font-family: var(--lb-fuente);
  interpolate-size: allow-keywords;
}
.lb-faq details { border-bottom: 1px solid var(--lb-linea); }
.lb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  color: var(--lb-tinta);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.lb-faq summary::-webkit-details-marker { display: none; }
.lb-faq summary::after {
  content: "+";
  flex: none;
  color: var(--lb-gris);
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: transform .45s var(--lb-ease), color .3s var(--lb-ease);
}
.lb-faq details[open] summary::after { transform: rotate(45deg); }   /* + → × */
@media (hover: hover) {
  .lb-faq summary:hover::after { color: var(--lb-tinta); }
}
.lb-faq summary: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-faq details > :not(summary) {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--lb-gris);
  font-size: var(--lb-t-cuerpo);
  line-height: 1.55;
  animation: lb-subir .5s var(--lb-ease) both;   /* respaldo: aparece con un fundido */
}
@supports selector(::details-content) {
  .lb-faq details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size .5s var(--lb-ease), opacity .4s var(--lb-ease), content-visibility .5s allow-discrete;
  }
  .lb-faq details[open]::details-content { block-size: auto; opacity: 1; }
  .lb-faq details > :not(summary) { animation: none; }
}

/* ═══ Opinión ═════════════════════════════════════════════════════
   <div class="lb-opiniones">   (rejilla opcional)
     <figure class="lb-opinion">
       <blockquote class="lb-opinion__texto"><p>Texto de ejemplo.</p></blockquote>
       <figcaption class="lb-opinion__autor">Nombre de ejemplo, residencia</figcaption>
     </figure>
   </div>
   Cita grande de UNA opinión real (el carrusel de .lb-resenas es el formato habitual).
   Solo opiniones reales y verificadas. */
.lb-opiniones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.lb-opinion {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  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-opinion__texto { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.42; }
.lb-opinion__texto p { margin: 0; }
.lb-opinion__autor { color: var(--lb-gris); font-size: 15px; font-weight: 600; line-height: 1.4; }

/* ═══ Reseñas de Google ══════════════════════════════════════════
   Sustituye a la antigua franja de confianza. Reseñas COPIADAS A MANO de la
   ficha de Google (no se actualizan solas): nombre de pila + inicial, estrellas
   y texto literal (recortado solo con "…"). Obras no lleva reseñas de estudiantes.
   <section class="lb-resenas [lb-resenas--gris]" aria-label="Opiniones de Google">
     <div class="lb-resenas__cab">
       <p class="lb-resenas__nota"><span class="lb-resenas__cifra">5,0</span>
         <svg class="lb-resena__estrellas" viewBox="0 0 88 16" role="img" aria-label="5 de 5 estrellas">…</svg>
         <span class="lb-resenas__total">en Google</span></p>   (sin el número de opiniones: Gon, 3-oct)
       <a class="lb-enlace-flecha" href="…">Ver en Google<svg class="lb-enlace-flecha__icono" …/></a>
     </div>
     <div class="lb-resenas__pista" tabindex="0" role="region" aria-label="Reseñas de clientes">   (UN solo punto de tabulación por carrusel)
       <ul class="lb-resenas__fila">
         <li class="lb-resena"><svg class="lb-resena__estrellas" …/>
           <blockquote class="lb-resena__texto"><p>Texto literal.</p></blockquote>
           <div class="lb-resena__pie"><p class="lb-resena__autor">Selena F.</p><p class="lb-resena__origen">Reseña de Google</p></div></li> …
       </ul>
       <ul class="lb-resenas__fila lb-resenas__fila--b"> … </ul>   (segunda fila: opcional, sentido contrario; en móvil no se ve)
     </div>
   </section>
   Se escribe cada reseña UNA vez: assets/lb-marca.js duplica las tarjetas para el
   bucle infinito (las copias llevan aria-hidden="true") y añade un botón visible
   "Pausar reseñas" (WCAG 2.2.2: todo lo que se mueve más de 5 s se puede parar).
   Sin JavaScript, o con "reducir movimiento", la pista es un único carrusel que se
   desliza con el dedo o el teclado (scroll-snap; las dos filas, apiladas y alineadas).
   También se pausa al pasar el ratón. Los bordes se funden con una máscara
   (no con un degradado de color). Inspiración: "Testimonials Marquee" de
   21st.dev (ids 19852 y 24457), reescrito en CSS puro. */
.lb-resenas {
  --lb-fondo-tarjeta: var(--lb-gris-claro);
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-resenas--gris { --lb-fondo-tarjeta: var(--lb-blanco); background: var(--lb-gris-claro); }
.lb-resenas__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 32px;
  max-width: var(--lb-maxw);
  margin: 0 auto 40px;
  padding: 0 var(--lb-gutter);
}
.lb-resenas__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 auto 0 0; }
.lb-resenas__cifra { font-size: clamp(44px, 5vw, 56px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.lb-resenas__total { color: var(--lb-gris); font-size: var(--lb-t-cuerpo); line-height: 1.4; }
.lb-resena__estrellas { display: block; flex: none; width: 88px; height: 16px; color: var(--lb-tinta); fill: currentColor; }

/* Por defecto (sin JS o con "reducir movimiento") la PISTA es el único elemento que se desplaza y
   el único enfocable. Las dos filas van apiladas y alineadas a la izquierda. */
.lb-resenas__pista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
  padding: 0 var(--lb-gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lb-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--lb-gutter), #000 calc(100% - var(--lb-gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--lb-gutter), #000 calc(100% - var(--lb-gutter)), transparent);
}
.lb-resenas__pista::-webkit-scrollbar { display: none; }
.lb-resenas__pista:focus-visible { outline: 2px solid var(--lb-tinta); outline-offset: -3px; }
.lb-resenas__fila {
  display: flex;
  align-items: stretch;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lb-resena {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 16px;
  width: min(340px, 82vw);
  margin: 0 16px 0 0;
  padding: 28px;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  color: var(--lb-tinta);
  scroll-snap-align: start;
}
.lb-resena__texto { margin: 0; font-size: 16px; letter-spacing: -.01em; line-height: 1.5; }
.lb-resena__texto p { margin: 0; }
.lb-resena__pie { margin-top: auto; padding-top: 4px; }
.lb-resena__autor { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
.lb-resena__origen { margin: 0; color: var(--lb-gris); font-size: 13px; line-height: 1.4; }

/* Bucle infinito: solo con JS (marca .lb-resenas--bucle) y sin "reducir movimiento" */
@media (prefers-reduced-motion: no-preference) {
  .lb-resenas--bucle .lb-resenas__pista {
    display: grid;
    gap: 16px;
    padding: 0;
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .lb-resenas--bucle .lb-resenas__fila {
    width: max-content;
    animation: lb-resenas-bucle var(--lb-bucle-dur, 70s) linear infinite;
  }
  .lb-resenas--bucle .lb-resenas__fila--b { animation-direction: reverse; }
  .lb-resenas--bucle.lb-resenas--pausa .lb-resenas__fila,
  .lb-resenas__pista:active .lb-resenas__fila { animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .lb-resenas:hover .lb-resenas__fila { animation-play-state: paused; }
}
@keyframes lb-resenas-bucle {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--lb-bucle, -50%)); }
}
/* Botón "Pausar reseñas": solo existe mientras el carrusel se mueve (lo crea lb-marca.js) */
.lb-resenas__pausa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--lb-gris);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color .3s var(--lb-ease);
}
.lb-resenas__pausa svg { display: block; width: 14px; height: 14px; fill: currentColor; }
.lb-resenas__pausa:hover { color: var(--lb-tinta); }
.lb-resenas__pausa:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-resenas--gris .lb-resenas__pausa:focus-visible { box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto); }
@media (max-width: 720px) {
  .lb-resenas__cab { margin-bottom: 28px; }
  .lb-resenas__fila--b { display: none; }   /* en móvil, una sola fila */
  .lb-resena { padding: 24px; }
}

/* ═══ Franja de cifras ════════════════════════════════════════════
   Cambio de Gon del 3-oct-2026: la prueba social son las reseñas de Google
   (.lb-resenas) MÁS esta franja de cifras. Convive con el carrusel, no lo
   sustituye. Máximo 4 cifras.
   <section class="lb-cifras [lb-cifras--gris]" aria-label="La prueba, en cifras">
     <ul class="lb-cifras__lista">
       <li class="lb-cifra">
         <p class="lb-cifra__valor">0</p>
         <p class="lb-cifra__texto">cosas rotas en tres veranos</p>
         <p class="lb-cifra__fuente">Opcional: letra pequeña gris.</p>
       </li> …
     </ul>
   </section>
   Solo proporciones, ceros y la nota de Google; nunca recuentos pequeños («más de
   100 estudiantes») ni el número de opiniones. Cada cifra debe figurar como
   Público en brand/GRUPO.md. Valor en tinta (nunca en acento), sin sombras ni
   degradados, sin animación. En escritorio van en fila; en tableta, de dos en
   dos; en móvil, apiladas (sin scroll horizontal a 360 px). */
.lb-cifras {
  --lb-fondo-tarjeta: var(--lb-gris-claro);
  padding: clamp(40px, 6vw, 72px) var(--lb-gutter);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-cifras--gris { --lb-fondo-tarjeta: var(--lb-blanco); background: var(--lb-gris-claro); }
.lb-cifras__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--lb-maxw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.lb-cifra {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-fondo-tarjeta, var(--lb-gris-claro));
  color: var(--lb-tinta);
}
.lb-cifra__valor {
  margin: 0;
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.lb-cifra__texto { margin: 0; font-size: var(--lb-t-cuerpo); line-height: 1.45; text-wrap: pretty; }
.lb-cifra__fuente { margin: auto 0 0; padding-top: 8px; color: var(--lb-gris); font-size: 13px; line-height: 1.4; }
@media (min-width: 521px) {
  .lb-cifra { flex-basis: calc(50% - 8px); }
}
@media (min-width: 901px) {
  .lb-cifra { flex: 1 1 0; }
}

/* ═══ Campo de formulario ═════════════════════════════════════════
   <div class="lb-campo">
     <label class="lb-campo__etiqueta" for="email">Correo</label>
     <input class="lb-campo__control" id="email" type="email" aria-describedby="email-e" aria-invalid="true">
     <p class="lb-campo__ayuda">Texto de ayuda opcional.</p>
     <p class="lb-campo__error" id="email-e">Escribe un correo válido.</p>
   </div>
   Vale también con <input>/<select>/<textarea> sueltos dentro de .lb-campo.
   Error: aria-invalid="true" en el control (el color nunca es la única pista:
   el mensaje de .lb-campo__error lleva un aviso en texto). */
.lb-campo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; font-family: var(--lb-fuente); }
.lb-campo__etiqueta { color: var(--lb-tinta); font-size: 15px; font-weight: 600; line-height: 1.3; }
.lb-campo__control, .lb-campo input, .lb-campo select, .lb-campo textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 22px;
  border: 1.5px solid var(--lb-gris);
  border-radius: var(--lb-r-pildora);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: var(--lb-t-cuerpo);
  line-height: 1.4;
  transition: border-color .3s var(--lb-ease), background-color .3s var(--lb-ease);
  -webkit-appearance: none;
  appearance: none;
}
/* El desplegable conserva la flecha nativa (sin ella no se ve que es un desplegable) */
.lb-campo select { padding-right: 44px; -webkit-appearance: auto; appearance: auto; }
.lb-campo textarea {
  min-height: 120px;
  padding: 16px 22px;
  border-radius: 22px;
  resize: vertical;
}
.lb-campo ::placeholder { color: var(--lb-gris); opacity: 1; }
@media (hover: hover) {
  .lb-campo__control:hover, .lb-campo input:hover, .lb-campo select:hover, .lb-campo textarea:hover {
    border-color: var(--lb-tinta);
  }
}
.lb-campo__control:focus-visible, .lb-campo input:focus-visible,
.lb-campo select:focus-visible, .lb-campo textarea:focus-visible {
  border-color: var(--lb-tinta);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}
.lb-campo__ayuda { margin: 0; color: var(--lb-gris); font-size: 14px; line-height: 1.4; }
.lb-campo__error { margin: 0; color: var(--lb-error); font-size: 14px; font-weight: 600; line-height: 1.4; }
.lb-campo__error:empty { display: none; }
.lb-campo [aria-invalid="true"], .lb-campo__control[aria-invalid="true"] {
  border-color: var(--lb-error);
  border-width: 2px;
}
.lb-campo [aria-invalid="true"]:focus-visible {
  border-color: var(--lb-error);
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-error);
}

/* ═══ Pie ═════════════════════════════════════════════════════════
   <footer class="lb-pie"><div class="lb-pie__in">
     <p class="lb-pie__titulo">La familia LetsBoxIt</p>
     <ul class="lb-pie__familia">
       <li><a href="..."><img class="lb-pie__avatar" src="assets/bruno/renders/students/mini-00-base.png" alt="" width="41" height="56">Students</a></li>
       <li><a href="..."><img class="lb-pie__avatar" ...>Mudanzas</a></li>
       <li><a href="..." aria-current="page"><img class="lb-pie__avatar" ...>Obras</a></li>
     </ul>
     <nav class="lb-pie__legal" aria-label="Legal"><a href="#">Aviso legal</a>...</nav>
     <p class="lb-pie__copy">© LetsBoxIt</p>
   </div></footer>
   Cada enlace lleva el CUERPO ENTERO del oso de su uniforme (mini-00-base.png, ~56 px de alto),
   nunca solo la cabeza; al pasar el ratón el oso da un saltito (sin "reducir movimiento": quieto). */
.lb-pie {
  padding: 56px var(--lb-gutter) 40px;
  background: var(--lb-gris-claro);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
}
.lb-pie__in { max-width: var(--lb-maxw); margin: 0 auto; }
.lb-pie__titulo { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--lb-gris); }
.lb-pie__familia {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.lb-pie__familia a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 6px 18px;
  border: 1.5px solid transparent;
  border-radius: var(--lb-r-tarjeta);
  background: var(--lb-blanco);
  color: var(--lb-tinta);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .35s var(--lb-ease), background-color .3s var(--lb-ease), color .3s var(--lb-ease);
}
.lb-pie__familia a[aria-current="page"] { border-color: var(--lb-tinta); }
@media (hover: hover) {
  .lb-pie__familia a:hover { background: var(--lb-tinta); color: var(--lb-blanco); }
}
.lb-pie__familia a:active { transform: scale(.97); }
.lb-pie__familia 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-pie__avatar { display: block; flex: none; width: auto; height: 56px; object-fit: contain; transform-origin: 50% 100%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lb-pie__familia a:hover .lb-pie__avatar { animation: lb-pie-salto .55s var(--lb-ease); }
}
@keyframes lb-pie-salto {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px) scale(1.03); }
  70% { transform: translateY(0) scale(.99, 1.01); }
}
.lb-pie__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 16px; }
.lb-pie__legal a { padding: 6px 0; color: var(--lb-gris); font-size: 14px; text-decoration: none; }
@media (hover: hover) {
  .lb-pie__legal a:hover { color: var(--lb-tinta); text-decoration: underline; text-underline-offset: 3px; }
}
.lb-pie__legal a:focus-visible {
  outline: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 0 0 3px var(--lb-gris-claro), 0 0 0 6px var(--lb-acento-texto);
}
.lb-pie__copy { margin: 0; color: var(--lb-gris); font-size: 14px; line-height: 1.5; }

/* ═══ Legal ═══════════════════════════════════════════════════════
   <main class="lb-legal"><h1>Aviso legal</h1><h2>1. Titular</h2><p>...</p></main>
   Páginas legales: lectura sobria, sin Bruno. */
.lb-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--lb-gutter);
  color: var(--lb-tinta);
  font-family: var(--lb-fuente);
  font-size: var(--lb-t-cuerpo);
  line-height: 1.6;
}
.lb-legal h1 {
  margin: 0 0 32px;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
}
.lb-legal h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.lb-legal h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.lb-legal p, .lb-legal ul, .lb-legal ol { margin: 0 0 16px; }
.lb-legal ul, .lb-legal ol { padding-left: 24px; }
.lb-legal li { margin-bottom: 6px; }
.lb-legal a { color: var(--lb-tinta); text-decoration: underline; text-underline-offset: 3px; }
.lb-legal a:focus-visible {
  outline: 2px solid transparent;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--lb-blanco), 0 0 0 6px var(--lb-acento-texto);
}

/* ═══ Iconos animados ═════════════════════════════════════════════
   <span data-lb-icono="furgoneta"></span>   (assets/lb-iconos.js lo convierte en SVG)
   Ocho iconos de trazo fino: caja, furgoneta, calendario, escudo, reloj, check,
   chat (WhatsApp genérico, sin logo) y llave. Se dibujan solos al entrar en
   pantalla y tienen una micro-animación al pasar el ratón por el icono o por su
   tarjeta / enlace / botón (o cualquier contenedor con .lb-icono-gancho).
   Color: tinta; acento solo en EL icono destacado
   (<span data-lb-icono="escudo" class="lb-destacado">). Tamaño: --lb-icono-tam.
   Inspiración: "Animated State Icons" (id 10058) y sets de iconos animados de
   21st.dev; los trazos son propios. */
.lb-icono, [data-lb-icono] {
  display: inline-block;
  flex: none;
  width: var(--lb-icono-tam, 44px);
  height: var(--lb-icono-tam, 44px);
  color: var(--lb-tinta);
  line-height: 0;
  vertical-align: middle;
}
.lb-icono.lb-destacado, [data-lb-icono].lb-destacado { color: var(--lb-acento-texto); }
.lb-icono svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Dibujado: pathLength=1 en cada trazo, así que el dash mide 1 en todos */
.lb-i-trazo, .lb-i-extra {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.lb-i-trazo {
  transition: stroke-dashoffset .9s var(--lb-ease) calc(var(--i, 0) * .09s),
              opacity 0s linear calc(var(--i, 0) * .09s);
}
.lb-icono.es-visto .lb-i-trazo { stroke-dashoffset: 0; opacity: 1; }
.lb-i-punto { stroke-width: 3.6; }

/* Micro-animaciones al pasar el ratón */
.lb-i-tapa { transform: translateY(-4px); transition: transform .5s var(--lb-ease); }
.lb-i-van { transition: transform .6s var(--lb-ease); }
.lb-i-llave { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--lb-ease); }
.lb-i-min { transform-box: fill-box; transform-origin: 0 0; }
.lb-i-avion { transition: transform .45s var(--lb-ease); }
.lb-i-extra { transition: stroke-dashoffset .6s var(--lb-ease), opacity .2s linear; }
@keyframes lb-i-retrazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lb-i-vuelta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lb-i-bota { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes lb-i-giro { to { transform: rotate(360deg); } }
@media (hover: hover) {
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-tapa { transform: none; }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-van { transform: translateX(4px); }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-llave { transform: rotate(-22deg); }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-min { animation: lb-i-vuelta 1s var(--lb-ease); }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-tick { animation: lb-i-retrazar .7s var(--lb-ease); }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-extra { stroke-dashoffset: 0; opacity: 1; }
  :is(.lb-icono:hover, :is(.lb-pasos__paso, .lb-precio, .lb-icono-gancho, .lb-btn, a, button):hover .lb-icono) .lb-i-bota { animation: lb-i-bota .6s var(--lb-ease) calc(var(--k, 0) * .09s); }
  .lb-btn:hover .lb-i-avion { transform: translate(2px, -2px); }
}
/* Impresión: los iconos salen dibujados aunque no hayan llegado a verse en pantalla */
@media print {
  .lb-i-trazo { transition: none; stroke-dashoffset: 0; opacity: 1; }
  .lb-i-tapa, .lb-i-van, .lb-i-llave { transform: none; }
}
/* Estados de botón: el spinner gira; el check se dibuja al llegar */
.lb-i-giro { transform-box: view-box; transform-origin: 50% 50%; animation: lb-i-giro .8s linear infinite; }
.lb-i-anillo { opacity: .25; }
.lb-btn .lb-btn__estado svg { stroke-width: 4.4; }
.lb-btn__estado .lb-i-trazo { transition-duration: .55s; }

/* ═══ Movimiento reducido ═════════════════════════════════════════
   Con "reducir movimiento" se anulan transiciones, animaciones y el hundimiento
   del botón. Los estados (hover, foco, abierto) siguen siendo visibles. Los
   iconos se ven dibujados de golpe, sin micro-animación; el carrusel de reseñas
   deja de moverse y se desplaza con el dedo o el teclado (scroll-snap). */
@media (prefers-reduced-motion: reduce) {
  .lb-btn, .lb-btn::after,
  .lb-enlace-flecha, .lb-enlace-flecha__icono, .lb-insignia,
  .lb-cab__logo, .lb-cab__marca, .lb-cab__menu a, .lb-resenas__pausa,
  .lb-hero__texto > *,
  .lb-pasos__paso,
  .lb-precio,
  .lb-faq summary::after, .lb-faq details > :not(summary),
  .lb-campo__control, .lb-campo input, .lb-campo select, .lb-campo textarea,
  .lb-pie__familia a {
    transition: none;
    animation: none;
  }
  .lb-btn:active, .lb-pie__familia a:active { transform: none; }
  .lb-btn--texto:hover::after,
  .lb-enlace-flecha:hover .lb-enlace-flecha__icono, .lb-enlace-flecha:focus-visible .lb-enlace-flecha__icono,
  .lb-pasos__paso:hover,
  .lb-precio:hover { transform: none; }
  .lb-insignia::after { display: none; }   /* el punto queda fijo */
  /* Reseñas: sin bucle; las copias para el bucle se esconden y la fila se desliza a mano */
  .lb-resenas__fila { animation: none; transform: none; }
  .lb-resenas__fila > [aria-hidden="true"] { display: none; }
  .lb-resenas__pausa { display: none; }
  .lb-pie__avatar { animation: none !important; }
  /* Iconos: dibujados de golpe y sin micro-animación */
  .lb-i-trazo { transition: none; stroke-dashoffset: 0; opacity: 1; }
  .lb-i-tapa, .lb-i-van, .lb-i-llave, .lb-i-avion, .lb-i-extra { transition: none; }
  .lb-i-tapa { transform: none; }
  .lb-i-giro, .lb-i-min, .lb-i-tick, .lb-i-bota { animation: none !important; }
  .lb-i-van, .lb-i-llave { transform: none !important; }
}
@supports selector(::details-content) {
  @media (prefers-reduced-motion: reduce) {
    .lb-faq details::details-content { transition: none; }
  }
}