/* ===========================================================================
   letras.css — acompaña a letras.js (27-sep-2026). Un solo estilo de entrada de títulos en todas las pestañas.
   El <head> pone la clase letras-js en <html> ANTES del primer pintado; con eso el título ya llega en su
   estado inicial y nunca se ve completo para después borrarse (el "parpadeo" que reclamó Carlitos).
   Si letras.js no carga, el <head> quita la clase a los 4,5 s y todo queda visible.
   =========================================================================== */

/* Estado inicial antes de que letras.js parta el texto: igual al primer cuadro de cada efecto */
html.letras-js main h2:not(.lt-listo):not(#hero-section *):not(.ens-motion-hero *):not([data-letras="no"]):not(nav *):not(footer *):not(form *) { opacity: 1; }
html.letras-js main h1:not(.lt-listo):not(#hero-section *):not(.ens-motion-hero *):not([data-letras="no"]):not(nav *):not(footer *):not(form *) { opacity: 0; }

/* Ya partido: el título se ve, y cada pieza lleva su propio estado */
html.letras-js .lt-listo:not(.lt-aparecer) { opacity: 1 !important; }
.lt-w, .lt-p { display: inline-block; will-change: transform; }
/* Cada palabra partida es del mismo tamaño y color que su título: reglas como `.tarjeta span { font-size: 12px }`
   la alcanzaban al envolverla (la guía mostraba su título de 34 px en 12 px celeste) */
[data-split="letras"] :is(.lt-w, .lt-p, .lt-l) { font-size: inherit !important; color: inherit !important; letter-spacing: inherit !important; }
.lt-l { display: inline; }
.lt-hecho .lt-w, .lt-hecho .lt-p { will-change: auto; }

/* Cursor de la escritura: rojo Ensutex, del alto de la letra, se apaga al final */
.lt-p { position: relative; }
.lt-cursor {
  /* flota junto a la última letra: no ocupa espacio, no cambia el alto ni el corte de líneas */
  position: absolute;
  left: 100%;
  bottom: .1em;
  width: .08em;
  height: .78em;
  margin-left: .05em;
  background: #E20613;
  border-radius: 1px;
  pointer-events: none;
}
.mf .lt-cursor, .rx .lt-cursor { background: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html.letras-js main h1, html.letras-js main h2 { opacity: 1 !important; }
  .lt-w, .lt-p, .lt-l, .lt-u { opacity: 1 !important; transform: none !important; }
  .lt-cursor { display: none; }
}

/* Héroe del inicio (27-sep): lo que pide data-letras llega oculto desde el primer pintado; el título se escribe
   y después aparecen la bajada y los botones (sello: «el copy principal se escribe primero y luego aparece lo demás») */
html.letras-js #hero-section [data-letras]:not([data-letras="no"]):not(.lt-listo) { opacity: 0; }
/* Asu espera a que aparezcan los botones del héroe: antes se ubicaba junto a un botón todavía invisible */
html.letras-js body:has(#hero-section .ens-motion-actions[data-letras]:not(.lt-hecho)) .floating-widgets { opacity: 0 !important; visibility: hidden !important; }