/* base.css — cimiento neutro de landing-bladesmith: reset, accesibilidad, revelado y estados de
   formularios. Sin estética propia: el estilo vive en tokens.css y en cada sección. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera, 0px) + 0.5rem); }
body {
  min-height: 100svh; background: var(--color-fondo); color: var(--color-tinta);
  font-family: var(--font-texto); font-size: var(--paso-0); line-height: var(--leading-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p, li, figcaption { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--peso-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); text-wrap: balance; overflow-wrap: break-word; }
::selection { background: var(--color-acento); color: var(--color-sobre-acento); }
:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 3px; }
[hidden] { display: none !important; }

.lb-saltar { position: absolute; left: var(--margen); top: -100px; z-index: 1000; padding: 0.75rem 1rem; background: var(--color-tinta); color: var(--color-fondo); }
.lb-saltar:focus { top: var(--margen); }
.lb-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Revelado al entrar en pantalla (base.js). Sin JS o con movimiento reducido, todo se ve. */
.js [data-lb-reveal] { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); }
.js [data-lb-reveal].lb-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--lb-i, 0) * var(--reveal-paso));
}
/* R&P: html.rp-quieto = movimiento reducido según config.js (RP.motion) y la preferencia del sistema. */
html.rp-quieto { scroll-behavior: auto; }
html.rp-quieto.js [data-lb-reveal] { opacity: 1; transform: none; }
html.rp-quieto.js [data-lb-reveal].lb-visible { transition: opacity var(--dur-2) linear; }

/* Líneas con máscara (base.js): <h1 data-lb-lineas><span class="lb-linea"><span>…</span></span>…</h1>
   La holgura evita que la máscara corte tildes y pinceladas. --lb-espera retrasa todo el grupo. */
[data-lb-lineas] .lb-linea {
  display: block; overflow: clip;
  padding-block: var(--mascara-holgura, 0.12em); margin-block: calc(-1 * var(--mascara-holgura, 0.12em));
  padding-inline: var(--mascara-holgura-x, 0.08em); margin-inline: calc(-1 * var(--mascara-holgura-x, 0.08em));
}
/* Entre dos líneas los márgenes negativos colapsan en uno: el segundo pide el doble para no sumar interlineado. */
[data-lb-lineas] .lb-linea + .lb-linea { margin-top: calc(-2 * var(--mascara-holgura, 0.12em)); }
[data-lb-lineas] .lb-linea > span { display: inline-block; }
.js [data-lb-lineas] .lb-linea > span { transform: translate3d(0, 115%, 0); }
.js [data-lb-lineas].lb-visible .lb-linea > span {
  transform: none;
  transition: transform var(--dur-lineas, 1000ms) var(--ease-lineas, cubic-bezier(0.19, 1, 0.22, 1));
  transition-delay: calc(var(--lb-espera, 0ms) + var(--lb-l, 0) * var(--paso-lineas, 120ms));
}
html.rp-quieto.js [data-lb-lineas] .lb-linea > span { transform: none; }

/* Red de seguridad: si base.js no ha corrido a los 2.5 s (CDN caído, error), todo lo que espera revelarse se muestra. */
@keyframes lb-seguro { to { opacity: 1; transform: none; } }
.js:not(.lb-base) [data-lb-reveal],
.js:not(.lb-base) [data-lb-lineas] .lb-linea > span { animation: lb-seguro 0.01s linear 2.5s forwards; }

/* Barra de progreso de lectura: <div data-lb-progreso aria-hidden="true"></div> */
[data-lb-progreso] { position: fixed; inset: 0 0 auto 0; height: 4px; background: var(--color-acento); transform-origin: 0 50%; transform: scaleX(0); z-index: 999; pointer-events: none; }

/* Lenis (scroll suave, solo si <html data-lb-lenis> y se cargó la librería) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Formularios conectados por datos.js */
.lb-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lb-error { color: var(--color-error); font-size: var(--paso--1); margin-top: 0.35rem; }
[aria-invalid="true"] { border-color: var(--color-error) !important; }
/* Vacío: oculto a la vista pero presente, para que el lector de pantalla anuncie el mensaje al llegar. */
[data-lb-estado]:empty { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
form[data-lb-estado-envio="ok"] [data-lb-estado] { color: var(--color-ok); }
form[data-lb-estado-envio="error"] [data-lb-estado] { color: var(--color-error); }
button[aria-busy="true"] { cursor: progress; opacity: 0.75; }
.lb-franjas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lb-franja { position: relative; }
.lb-franja input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lb-franja span { display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 44px; padding: 0.5rem 0.9rem; background: var(--color-superficie); border-radius: var(--radio-boton); }
.lb-franja input:checked + span { background: var(--color-acento); color: var(--color-sobre-acento); }
.lb-franja input:focus-visible + span { outline: 3px solid var(--color-foco); outline-offset: 2px; }