/*
 * theme.css — La Fiesta Escenica
 *
 * Cargado por inc/enqueue.php como hoja de estilos principal del tema.
 * Los tokens (custom properties) van en critical.css (inline en <head>).
 * No duplicar tokens aqui.
 *
 * Estructura:
 *   1. Variables runtime overridables
 *   2. Container
 *   3. Section
 *   4. Heading utilities (eyebrow, display, kicker)
 *   5. Buttons
 *   6. Cards
 *   7. Pill (filtros)
 *   8. MediaFrame
 *   9. CTA group
 *  10. Divider
 *  11. Layout utilities (stack, cluster, grid)
 *  12. Text utilities
 *  13. Skeletons (loading state)
 *  14. Reveal animations (variantes fade/up/left/right/scale/curtain)
 *  15. Skip link + sr-only + Header
 *  15b. Marquee dorado
 *  15c. Parallax
 *  15d. Counter animado
 *  15e. Card scenic hover
 */

/* =========================================================================
   1. VARIABLES RUNTIME OVERRIDABLES
   =========================================================================
   Capa puente entre los tokens de critical.css y los componentes.
   Se puede sobreescribir a nivel de bloque sin tocar los tokens base.
   ========================================================================= */

:root {
  --lfe-frame-pad:        var(--lfe-space-8);
  --lfe-frame-pad-sm:     var(--lfe-space-6);
  --lfe-card-pad:         var(--lfe-space-6);
  --lfe-section-gap:      var(--lfe-space-12);
  --lfe-btn-pad-y:        0.875rem;
  --lfe-btn-pad-x:        1.5rem;
  --lfe-btn-min-h:        44px; /* WCAG 2.5.5 touch target */
}

/* =========================================================================
   2. CONTAINER
   =========================================================================
   Contenedor centrado con padding horizontal fluido.
   Variantes de ancho para diferentes contextos de layout.
   ========================================================================= */

.lfe-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--lfe-section-px);
}

.lfe-container--narrow {
  max-width: 920px;
}

.lfe-container--wide {
  max-width: 1440px;
}

/* =========================================================================
   3. SECTION
   =========================================================================
   Envuelve secciones de pagina con padding vertical fluido.
   Las variantes de color definen el mood de cada bloque editorial.
   ========================================================================= */

.lfe-section {
  padding-block: var(--lfe-section-py);
  padding-inline: 0;
}

/* Contraste: ivory #F5EFE3 sobre black #0B0A09 = 16.7:1 (AAA) */
.lfe-section--black {
  background-color: var(--lfe-black);
  color: var(--lfe-ivory);
}

/* Contraste: ivory #F5EFE3 sobre black-soft #15120F = 15.1:1 (AAA) */
.lfe-section--soft {
  background-color: var(--lfe-black-soft);
  color: var(--lfe-ivory);
}

/* Contraste: ivory #F5EFE3 sobre crimson-deep #4A0712 = 11.2:1 (AAA) */
.lfe-section--crimson {
  background-color: var(--lfe-crimson-deep);
  color: var(--lfe-ivory);
}

/* =========================================================================
   4. HEADING UTILITIES
   =========================================================================
   Clases utilitarias para tipografia editorial.
   No reemplazan los h1-h6 nativos; los complementan con semántica visual.
   ========================================================================= */

/* Eyebrow: etiqueta de categoria sobre el titulo principal.
   Ya definida en critical.css para uso en above-the-fold.
   Se reitera aqui para que el editor de bloques la recoja via add_editor_style. */
.lfe-eyebrow {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lfe-gold);
  line-height: var(--lfe-lh-micro);
  display: block;
}

/* Display: titular heroico con fuente Italiana */
.lfe-display {
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-display);
  font-weight: 400;
  line-height: var(--lfe-lh-display);
}

/* Variante itálica para citas o claims emocionales */
.lfe-display--italic {
  font-style: italic;
}

/* H2 display: para secciones de nivel 2 con presencia visual fuerte */
.lfe-h2 {
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-xl);
  font-weight: 400;
  line-height: 1.15;
}

/* Kicker: línea decorativa dorada antes del heading.
   Implementada con ::before para no requerir markup adicional. */
.lfe-kicker {
  display: block;
  padding-top: calc(var(--lfe-space-4) + 14px); /* espacio para la línea */
  position: relative;
}

.lfe-kicker::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 2px;
  background-color: var(--lfe-gold);
}

/* Version centrada del kicker para secciones con texto centrado */
.lfe-kicker--center::before {
  left: 50%;
  transform: translateX(-50%);
}

/* =========================================================================
   5. BUTTONS
   =========================================================================
   Sistema de botones con:
   - Base .lfe-btn (estructura, tamaño, focus)
   - Variantes de color semánticas
   - Focus canónico WCAG 2.2 AA

   Contraste focus ring: gold-bright #E6C988 sobre black #0B0A09 = 12.7:1
   Muy por encima del 3:1 requerido para componentes UI (WCAG 1.4.11).
   ========================================================================= */

.lfe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lfe-space-2);
  padding: var(--lfe-btn-pad-y) var(--lfe-btn-pad-x);
  min-height: var(--lfe-btn-min-h);
  border-radius: var(--lfe-radius-md);
  font-family: var(--lfe-font-body);
  font-size: var(--lfe-fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--lfe-dur-base) var(--lfe-ease-out),
    color            var(--lfe-dur-base) var(--lfe-ease-out),
    border-color     var(--lfe-dur-base) var(--lfe-ease-out),
    transform        var(--lfe-dur-base) var(--lfe-ease-out),
    box-shadow       var(--lfe-dur-base) var(--lfe-ease-out);
  white-space: nowrap;
  user-select: none;
}

/* Focus canónico — outline sobre fondo negro: 12.7:1 (WCAG 2.5.3 AAA) */
.lfe-btn:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

/* Botón primario: carmesí fondo, marfil texto.
   Contraste: ivory #F5EFE3 sobre crimson #7A0E1F = 8.6:1 (AAA)
   Hover sube 3px y proyecta glow dorado sutil. */
.lfe-btn--primary {
  background: var(--bg-sunset, linear-gradient(135deg, #F2B33D 0%, #F89B3A 50%, #B83A78 100%));
  color: var(--cosmos-deep);
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 16px rgba(184, 58, 120, 0.35), 0 0 32px rgba(242, 179, 61, 0.18);
}

.lfe-btn--primary:hover,
.lfe-btn--primary:focus-visible {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(184, 58, 120, 0.50), 0 0 60px rgba(242, 179, 61, 0.32);
}

.lfe-btn--primary:active {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

/* Botón dorado: acento decorativo de alta visibilidad.
   Contraste: black #0B0A09 sobre gold #C8A55B = 8.4:1 (AAA) */
.lfe-btn--gold {
  background-color: var(--lfe-gold);
  color: var(--lfe-black);
  border-color: var(--lfe-gold);
}

.lfe-btn--gold:hover,
.lfe-btn--gold:focus-visible {
  background-color: var(--lfe-gold-bright);
  border-color: var(--lfe-gold-bright);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(200, 165, 91, 0.45);
}

.lfe-btn--gold:active {
  transform: translateY(-1px);
}

/* Botón fantasma: sin fondo, solo borde dorado.
   Contraste borde/texto: gold #C8A55B sobre black #0B0A09 = 8.4:1 (AAA)
   Hover invierte a fondo dorado + texto negro. */
.lfe-btn--ghost {
  background-color: transparent;
  color: var(--lfe-gold);
  border-color: var(--lfe-gold);
}

.lfe-btn--ghost:hover,
.lfe-btn--ghost:focus-visible {
  background-color: var(--lfe-gold);
  color: var(--lfe-black);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(200, 165, 91, 0.30);
}

.lfe-btn--ghost:active {
  transform: translateY(-1px);
}

/* Botón enlace: texto dorado con underline animado de izquierda a derecha.
   El underline usa un gradiente lineal para controlar el ancho del trazo. */
.lfe-btn--link {
  background-color: transparent;
  color: var(--lfe-gold);
  border-color: transparent;
  padding-inline: 0;
  border-radius: 0;
  min-height: unset;
  position: relative;
  text-decoration: none;
}

.lfe-btn--link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--lfe-gold-bright);
  transition: width var(--lfe-dur-base) var(--lfe-ease-out);
}

.lfe-btn--link:hover::after,
.lfe-btn--link:focus-visible::after {
  width: 100%;
}

.lfe-btn--link:hover,
.lfe-btn--link:focus-visible {
  color: var(--lfe-gold-bright);
}

/* Respeta prefers-reduced-motion: elimina transforms y transitions largas */
@media (prefers-reduced-motion: reduce) {
  .lfe-btn {
    transition: background-color 0.01ms, color 0.01ms, border-color 0.01ms;
  }

  .lfe-btn:hover,
  .lfe-btn:focus-visible {
    transform: none;
    box-shadow: none;
  }

  .lfe-btn--link::after {
    transition: none;
  }
}

/* =========================================================================
   6. CARD
   =========================================================================
   Tarjeta de contenido para artistas, espectáculos, prensa.
   Hover sube 4px con sombra y refuerza el borde dorado.
   ========================================================================= */

.lfe-card {
  background-color: var(--lfe-black-soft);
  border: 1px solid rgba(142, 114, 51, 0.20); /* gold-deep 20% opacity */
  border-radius: var(--lfe-radius-md);
  padding: var(--lfe-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-4);
  transition:
    transform  var(--lfe-dur-base) var(--lfe-ease-out),
    box-shadow var(--lfe-dur-base) var(--lfe-ease-out),
    border-color var(--lfe-dur-base) var(--lfe-ease-out);
  overflow: hidden;
}

.lfe-card:hover {
  transform: translateY(-4px);
  border-color: var(--lfe-gold);
  box-shadow: var(--lfe-shadow-md), var(--lfe-shadow-glow);
}

/* Media: imagen/video de portada de la card */
.lfe-card__media {
  margin: calc(var(--lfe-card-pad) * -1);  /* sangra al borde de la card */
  margin-bottom: 0;
  overflow: hidden;
  border-radius: var(--lfe-radius-md) var(--lfe-radius-md) 0 0;
}

/* Aspecto 4:5 por defecto (retrato) — ideal para artistas */
.lfe-card__media--portrait {
  aspect-ratio: 4 / 5;
}

/* Aspecto 16:9 para espectáculos, noticias */
.lfe-card__media--landscape {
  aspect-ratio: 16 / 9;
}

.lfe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lfe-dur-slow) var(--lfe-ease-out);
}

.lfe-card:hover .lfe-card__media img {
  transform: scale(1.04);
}

.lfe-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-3);
}

/* Contraste: gold #C8A55B sobre black-soft #15120F = 7.3:1 (AAA) */
.lfe-card__eyebrow {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lfe-gold);
}

/* Contraste: ivory #F5EFE3 sobre black-soft #15120F = 15.1:1 (AAA) */
.lfe-card__title {
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-md);
  font-weight: 400;
  line-height: 1.2;
  color: var(--lfe-ivory);
}

/* Contraste: ivory-muted #C9C0AE sobre black-soft #15120F = 9.2:1 (AAA) */
.lfe-card__excerpt {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  line-height: var(--lfe-lh-body);
}

/* Imagen en card sin padding (modo media-first) */
.lfe-card--media-first {
  padding: 0;
  gap: 0;
}

.lfe-card--media-first .lfe-card__body {
  padding: var(--lfe-card-pad);
}

/* Reduce-motion: sin transform en card hover */
@media (prefers-reduced-motion: reduce) {
  .lfe-card,
  .lfe-card__media img {
    transition: border-color var(--lfe-dur-base) var(--lfe-ease-out);
  }

  .lfe-card:hover {
    transform: none;
  }

  .lfe-card:hover .lfe-card__media img {
    transform: none;
  }
}

/* =========================================================================
   7. PILL (filtros)
   =========================================================================
   Para filtros de categoria en listados de espectáculos/artistas.
   Estado activo con fondo dorado permanente.

   Contraste: gold #C8A55B borde/texto sobre black #0B0A09 = 8.4:1 (AAA)
   Contraste activo: black #0B0A09 texto sobre gold #C8A55B = 8.4:1 (AAA)
   ========================================================================= */

.lfe-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--lfe-space-2) var(--lfe-space-4);
  min-height: 44px; /* WCAG 2.5.5 touch target — MEDIO-4 */
  border-radius: var(--lfe-radius-pill);
  border: 1px solid var(--lfe-gold);
  font-size: var(--lfe-fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lfe-gold);
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--lfe-dur-fast) var(--lfe-ease-out),
    color            var(--lfe-dur-fast) var(--lfe-ease-out);
  user-select: none;
}

.lfe-pill:hover,
.lfe-pill:focus-visible {
  background-color: var(--lfe-gold);
  color: var(--lfe-black);
}

.lfe-pill:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

/* Estado activo: fondo dorado permanente */
.lfe-pill.is-active {
  background-color: var(--lfe-gold);
  color: var(--lfe-black);
}

/* =========================================================================
   8. MEDIAFRAME
   =========================================================================
   Contenedor de imagen/video con aspect-ratio variable.
   --ratio se puede sobreescribir inline para ratios custom.
   ========================================================================= */

.lfe-media {
  --ratio: 16 / 9;
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  border-radius: var(--lfe-radius-md);
}

.lfe-media img,
.lfe-media video,
.lfe-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variantes de aspecto predefinidas */
.lfe-media--square   { --ratio: 1 / 1;  }
.lfe-media--portrait { --ratio: 4 / 5;  }
.lfe-media--cinema   { --ratio: 21 / 9; }
.lfe-media--tall     { --ratio: 3 / 4;  }

/* Sin radius para hero full-bleed */
.lfe-media--flush {
  border-radius: 0;
}

/* =========================================================================
   9. CTA GROUP
   =========================================================================
   Grupo de botones/enlaces CTA con wrapping en mobile.
   ========================================================================= */

.lfe-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lfe-space-4);
}

/* Centrar en contextos de seccion con texto centrado */
.lfe-cta-group--center {
  justify-content: center;
}

/* =========================================================================
   10. DIVIDER DECORATIVO
   =========================================================================
   Linea dorada corta usada como separador editorial bajo eyebrows.
   Contraste: gold #C8A55B sobre black #0B0A09 = 8.4:1 (AAA)
   ========================================================================= */

.lfe-divider-gold {
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--lfe-gold);
  border: none;
  margin-block: var(--lfe-space-6);
}

/* Version centrada */
.lfe-divider-gold--center {
  margin-inline: auto;
}

/* =========================================================================
   11. LAYOUT UTILITIES
   ========================================================================= */

/* Stack: espaciado vertical uniforme entre hijos consecutivos */
.lfe-stack > * + * {
  margin-top: var(--lfe-stack-gap, var(--lfe-space-6));
}

.lfe-stack--sm > * + * { --lfe-stack-gap: var(--lfe-space-4); }
.lfe-stack--lg > * + * { --lfe-stack-gap: var(--lfe-space-12); }

/* Cluster: flex wrap con gap uniforme — para grupos de chips/tags/botones */
.lfe-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfe-cluster-gap, var(--lfe-space-3));
  align-items: center;
}

/* Grid auto-fit: columnas responsivas sin media queries */
.lfe-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--lfe-space-8);
}

/* =========================================================================
   12. TEXT UTILITIES
   ========================================================================= */

/* Mejora el balance de lineas en titulares cortos */
.lfe-text-balance {
  text-wrap: balance;
}

/* Textos grandes en secciones de enfoque editorial */
.lfe-lead {
  font-size: var(--lfe-fs-md);
  line-height: 1.7;
  color: var(--lfe-ivory-muted);
  max-width: 68ch;
}

/* =========================================================================
   13. SKELETONS (loading state)
   =========================================================================
   Placeholders para contenido que aún se está cargando.
   La animación shimmer se desactiva con prefers-reduced-motion.
   ========================================================================= */

@keyframes lfe-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

.lfe-skeleton {
  background-color: var(--lfe-black-soft);
  background-image: linear-gradient(
    90deg,
    var(--lfe-black-soft) 25%,
    rgba(200, 165, 91, 0.08) 50%,
    var(--lfe-black-soft) 75%
  );
  background-size: 200% 100%;
  animation: lfe-shimmer 1.8s ease-in-out infinite;
  border-radius: var(--lfe-radius-sm);
  display: block;
}

/* Sin animación para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .lfe-skeleton {
    animation: none;
    background-image: none;
  }
}

/* Variantes de forma */
.lfe-skeleton--text {
  height: 1em;
  width: 80%;
}

.lfe-skeleton--heading {
  height: 1.5em;
  width: 60%;
}

.lfe-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

/* =========================================================================
   14. REVEAL ANIMATIONS
   =========================================================================
   Sistema de reveal canónico activado por IntersectionObserver (animations.js).

   Variantes via data-reveal="<variante>":
     fade    — solo opacity (default sin data-reveal, compatible .lfe-reveal legacy)
     up      — translateY 24px → 0
     left    — translateX -32px → 0
     right   — translateX  32px → 0
     scale   — scale(0.96) → 1
     curtain — clip-path que evoca telon subiendo

   transition-property acotada a opacity, transform, clip-path (NO "all")
   para evitar que triggers no intencionales afecten a otras propiedades.

   Stagger: animation.js aplica transition-delay inline via JS.
   Reduced-motion: CSS hace visible todo sin animacion; JS omite el observer.
   ========================================================================= */

/* --- Estado inicial por variante ---------------------------------------- */

/* Compatibilidad con .lfe-reveal legacy (sin data-reveal) y variante fade */
.lfe-reveal,
[data-reveal] {
  opacity: 0;
  transition:
    opacity    var(--lfe-dur-slow) var(--lfe-ease-stage),
    transform  var(--lfe-dur-slow) var(--lfe-ease-stage),
    clip-path  var(--lfe-dur-slow) var(--lfe-ease-stage);
}

/* fade: solo opacity */
.lfe-reveal,
[data-reveal="fade"] {
  transform: none;
}

/* up: translateY */
[data-reveal="up"] {
  transform: translateY(24px);
}

/* left: desliza desde izquierda */
[data-reveal="left"] {
  transform: translateX(-32px);
}

/* right: desliza desde derecha */
[data-reveal="right"] {
  transform: translateX(32px);
}

/* scale: zoom ligero entrada */
[data-reveal="scale"] {
  transform: scale(0.96);
}

/*
 * curtain: clip-path inset que se abre desde arriba y abajo hacia el centro.
 * Evoca el telon de teatro subiéndose. El punto de inicio (40% 40%) deja
 * visible una franja central minima antes de abrirse completamente.
 * Requiere que el elemento tenga overflow: hidden o sea un bloque solido.
 */
[data-reveal="curtain"] {
  clip-path: inset(40% 0 40% 0);
  transform: none;
}

/* --- Estado visible (JS anade .is-visible) ------------------------------- */

.lfe-reveal.is-visible,
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0% 0 0% 0);
}

/* Prefers-reduced-motion: revelar inmediatamente sin animacion */
@media (prefers-reduced-motion: reduce) {
  .lfe-reveal,
  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* =========================================================================
   15b. MARQUEE DORADO (decorativo)
   =========================================================================
   Elemento de fila horizontal que se desplaza en bucle infinito.
   Tipico en secciones de logos de clientes o citas breves.

   Estructura HTML:
     <div class="lfe-marquee" aria-hidden="true">
       <div class="lfe-marquee__inner">
         <span>texto o icono</span> ... (duplicar al menos x2 para loop)
       </div>
     </div>

   WCAG 2.2.2: el movimiento puede pausarse con :hover/:focus-within
   y se detiene automaticamente con prefers-reduced-motion.
   No contiene informacion critica (aria-hidden="true" en el wrapper).
   ========================================================================= */

@keyframes lfe-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.lfe-marquee {
  overflow: hidden;
  /* Fade de bordes para que el scroll parezca infinito */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.lfe-marquee__inner {
  display: flex;
  width: max-content;
  animation: lfe-marquee-x 28s linear infinite;
  gap: var(--lfe-space-12);
}

/* Pausa en hover y cuando el contenedor tiene foco dentro (WCAG 2.2.2) */
.lfe-marquee:hover .lfe-marquee__inner,
.lfe-marquee:focus-within .lfe-marquee__inner {
  animation-play-state: paused;
}

/* Variante de velocidad */
.lfe-marquee--slow  .lfe-marquee__inner { animation-duration: 48s; }
.lfe-marquee--fast  .lfe-marquee__inner { animation-duration: 16s; }

/* Pausa si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lfe-marquee__inner {
    animation-play-state: paused;
  }
}

/* =========================================================================
   15c. PARALLAX (.lfe-parallax)
   =========================================================================
   El transform lo aplica animations.js via style inline.
   Solo declaramos will-change cuando el JS lo active y overflow: hidden
   en el contenedor padre para evitar CLS lateral.

   will-change: transform se aplica/quita dinamicamente desde JS
   (solo cuando el elemento esta en viewport) para no desperdiciar VRAM.
   ========================================================================= */

.lfe-parallax {
  /* El JS gestiona will-change dinamicamente */
  backface-visibility: hidden;
}

/* =========================================================================
   15d. COUNTER ANIMADO (.lfe-counter)
   =========================================================================
   font-variant-numeric: tabular-nums evita que el contenedor
   cambie de ancho mientras el numero aumenta (CLS cero en inline).
   ========================================================================= */

.lfe-counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 2ch; /* Evitar colapso antes del primer paint */
}

/* =========================================================================
   15e. CARD SCENIC HOVER (.lfe-card--scenic)
   =========================================================================
   Efecto de luz que cruza la imagen al hover.
   Implementado como pseudo-elemento ::after con gradient.
   El transform se hace con translate3d para mantenerse en GPU.

   Solo activo cuando no hay reduced-motion (la animacion es no esencial).
   La carta en si no pierde funcionalidad sin este efecto.
   ========================================================================= */

.lfe-card--scenic {
  position: relative;
  overflow: hidden;
}

.lfe-card--scenic .lfe-card__media {
  position: relative;
  overflow: hidden;
}

.lfe-card--scenic .lfe-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent  35%,
    rgba(200, 165, 91, 0.18) 50%,
    transparent  65%
  );
  transform: translateX(-100%);
  transition: transform var(--lfe-dur-slow) var(--lfe-ease-out);
  pointer-events: none;
}

.lfe-card--scenic:hover .lfe-card__media::after,
.lfe-card--scenic:focus-within .lfe-card__media::after {
  transform: translateX(100%);
}

/* Desactivar efecto de barrido si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lfe-card--scenic .lfe-card__media::after {
    display: none;
  }
}

/* =========================================================================
   15. SKIP LINK
   =========================================================================
   Oculto visualmente (no del DOM) hasta recibir focus.
   En focus aparece en la esquina superior izquierda con contraste AAA.

   Contraste: black #0B0A09 sobre gold #C8A55B = 8.4:1 (AAA)
   ========================================================================= */

.lfe-skip-link {
  position: fixed;
  top: var(--lfe-space-4);
  left: var(--lfe-space-4);
  z-index: var(--lfe-z-toast);
  padding: var(--lfe-space-3) var(--lfe-space-6);
  background-color: var(--lfe-gold);
  color: var(--lfe-black);
  font-family: var(--lfe-font-body);
  font-size: var(--lfe-fs-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--lfe-radius-md);
  border: 2px solid var(--lfe-gold-deep);
  box-shadow: var(--lfe-shadow-md);
  /* Ocultar sin usar display:none para que siga siendo focusable */
  transform: translateY(calc(-100% - var(--lfe-space-8)));
  transition: transform var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

/* Clase helper screen-reader-only para texto accesible invisible */
.lfe-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   16. HEADER
   =========================================================================
   Mobile-first. Desktop: sticky con backdrop-blur al hacer scroll.
   ========================================================================= */

.lfe-header {
  position: sticky;
  top: 0;
  z-index: var(--lfe-z-sticky);
  background-color: var(--lfe-black);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--lfe-dur-base) var(--lfe-ease-out),
    border-color     var(--lfe-dur-base) var(--lfe-ease-out),
    box-shadow       var(--lfe-dur-base) var(--lfe-ease-out);
}

/* Top bar: oculto en mobile, visible desde tablet si tiene contenido */
.lfe-header__topbar {
  display: none;
  background-color: var(--lfe-black-soft);
  border-bottom: 1px solid rgba(200, 165, 91, 0.15);
  padding-block: var(--lfe-space-2);
}

.lfe-header__topbar-text {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted);
  text-align: center;
  margin: 0;
}

/* Bar principal */
.lfe-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lfe-space-4);
  padding-block: var(--lfe-space-4);
}

/* Estado scrolled: fondo OPACO + borde dorado sutil. Safari iOS 26 solo tiñe
   la barra de estado con el color de una cabecera fija si es opaca; con el
   antiguo rgba(…, .92) + blur se veía el contenido por encima de la navbar. */
.lfe-header.is-scrolled {
  background-color: rgb(11, 10, 9);
  border-bottom-color: rgba(200, 165, 91, 0.20);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Acciones: CTA + hamburger */
.lfe-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-3);
}

/* CTA "Contratar" oculto en mobile, visible en desktop */
.lfe-header__cta {
  display: none;
}

/* Nav principal oculta en mobile */
.lfe-nav-primary {
  display: none;
}

/* =========================================================================
   17. LOGO LOCKUP
   ========================================================================= */

.lfe-logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}

.lfe-logo:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 4px;
  border-radius: var(--lfe-radius-sm);
}

/* Contraste: gold #C8A55B sobre black #0B0A09 = 8.4:1 (AAA) */
.lfe-logo__name {
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-lg);
  font-style: italic;
  font-weight: 400;
  color: var(--lfe-gold);
  line-height: 1;
}

/* Contraste: ivory-muted #C9C0AE sobre black #0B0A09 = 9.6:1 (AAA) */
.lfe-logo__eyebrow {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-ivory-muted);
  line-height: 1;
}

/* Variante raster: logo original del cliente retocado (≈ 3.32:1, apaisado).
   Por debajo de ~200px "Circus Shows" deja de leerse; no bajar de ahi. */
.lfe-logo--image {
  display: inline-block;
  line-height: 0;
}

.lfe-logo--image picture,
.lfe-logo--image img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.lfe-logo--image.lfe-logo--mobile img {
  width: 170px;
}

/* 1024-1199: nav + CTA ya visibles y no caben con el logo a 220 ni con el
   padding horizontal normal de los enlaces (CONTRATAR se salia del viewport). */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  /* Con barra de scroll clásica (Windows, macOS con barras visibles) quedan
     ~15px menos: el margen lateral del contenedor se estrecha en este tramo. */
  .lfe-header__inner {
    padding-inline: var(--lfe-space-6);
    gap: var(--lfe-space-3);
  }
  .lfe-header .lfe-logo--image picture,
  .lfe-header .lfe-logo--image img {
    width: 180px;
  }
  .lfe-nav-primary .lfe-nav-primary__list {
    gap: 0;
  }
  .lfe-nav-primary .lfe-nav-primary__list a {
    padding-inline: var(--lfe-space-2);
  }
  .lfe-nav-primary .lfe-nav-primary__list a::after {
    left: var(--lfe-space-2);
    right: var(--lfe-space-2);
  }
}

.lfe-logo--image.lfe-logo--footer,
.lfe-logo--image.lfe-logo--footer picture,
.lfe-logo--image.lfe-logo--footer img {
  width: 300px;
  max-width: 100%;
  opacity: 0.95;
}

/* =========================================================================
   18. NAV PRIMARY (desktop)
   ========================================================================= */

.lfe-nav-primary__list {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lfe-nav-primary__list li {
  position: relative;
}

/* Contraste: ivory #F5EFE3 sobre black #0B0A09 = 16.7:1 (AAA) */
.lfe-nav-primary__list a {
  display: inline-flex;
  padding: var(--lfe-space-2) var(--lfe-space-3);
  font-family: var(--lfe-font-body);
  font-size: var(--lfe-fs-sm);
  font-weight: 500;
  color: var(--lfe-ivory);
  text-decoration: none;
  border-radius: var(--lfe-radius-sm);
  position: relative;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

/* Underline animado izquierda-derecha */
.lfe-nav-primary__list a::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: var(--lfe-space-3);
  right: var(--lfe-space-3);
  height: 1px;
  background-color: var(--lfe-gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-nav-primary__list a:hover,
.lfe-nav-primary__list a:focus-visible {
  color: var(--lfe-gold-bright);
}

.lfe-nav-primary__list a:hover::after,
.lfe-nav-primary__list a:focus-visible::after {
  transform: scaleX(1);
}

.lfe-nav-primary__list a:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
}

/* Item activo */
.lfe-nav-primary__list .lfe-current > a {
  color: var(--lfe-gold);
}

.lfe-nav-primary__list .lfe-current > a::after {
  transform: scaleX(1);
  background-color: var(--lfe-gold);
}

/* Submenu premium (Producciones > Espectaculos / Ambientaciones).
   Panel "palco": cristal oscuro, filo de luz dorado arriba, items con
   miniatura + titulo display + descripcion, y enlace final al padre.
   El enlace del padre navega; el chevron despliega (main.js). En escritorio
   tambien abre con hover. Markup: Lfe_Walker_Nav_Primary (inc/nav.php). */
.lfe-nav-primary__list > .lfe-has-children {
  display: flex;
  align-items: center;
  --lfe-submenu-gap: 1.35rem;
}

.lfe-nav-primary__list .lfe-current-ancestor > a,
.lfe-nav-primary__list .lfe-current-parent > a {
  color: var(--lfe-gold);
}

.lfe-nav-primary__list .lfe-current-ancestor > a::after,
.lfe-nav-primary__list .lfe-current-parent > a::after {
  transform: scaleX(1);
  background-color: var(--lfe-gold);
}

.lfe-nav-primary__list .lfe-submenu-toggle {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 36px;
  margin-left: calc(var(--lfe-space-2) * -1);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--lfe-radius-sm);
  color: rgba(245, 239, 227, 0.72);
  cursor: pointer;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu-toggle svg {
  transition: transform 320ms var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-has-children:hover > .lfe-submenu-toggle,
.lfe-nav-primary__list .is-open > .lfe-submenu-toggle,
.lfe-nav-primary__list .lfe-submenu-toggle:focus-visible,
.lfe-nav-primary__list .lfe-current-ancestor > .lfe-submenu-toggle {
  color: var(--lfe-gold-bright);
}

.lfe-nav-primary__list .lfe-submenu-toggle:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
}

.lfe-nav-primary__list .lfe-has-children:hover > .lfe-submenu-toggle svg,
.lfe-nav-primary__list .is-open > .lfe-submenu-toggle svg {
  transform: rotate(180deg);
}

/* Contenedor posicionado + puente de hover hasta el panel */
.lfe-nav-primary__list .lfe-submenu {
  position: absolute;
  top: 100%;
  left: calc(var(--lfe-space-6) * -1);
  z-index: 30;
  padding-top: var(--lfe-submenu-gap);
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 260ms;
}

.lfe-nav-primary__list .lfe-has-children:hover > .lfe-submenu,
.lfe-nav-primary__list .is-open > .lfe-submenu {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}

.lfe-nav-primary__list .lfe-submenu__panel {
  position: relative;
  width: 28rem;
  padding: var(--lfe-space-4) var(--lfe-space-2) var(--lfe-space-2);
  border: 1px solid rgba(242, 179, 61, 0.24);
  border-radius: 12px;
  background:
    radial-gradient(90% 70% at 50% -12%, rgba(242, 179, 61, 0.16) 0%, rgba(242, 179, 61, 0.04) 45%, transparent 70%),
    linear-gradient(180deg, rgba(22, 27, 66, 0.97) 0%, rgba(9, 11, 32, 0.98) 100%);
  box-shadow:
    0 32px 70px -24px rgba(0, 0, 0, 0.85),
    0 0 50px -18px rgba(242, 179, 61, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transform-origin: 3.5rem 0;
  transition:
    opacity   220ms var(--lfe-ease-out),
    transform 320ms var(--lfe-ease-out);
}

/* Filo de luz de proscenio en el borde superior */
.lfe-nav-primary__list .lfe-submenu__panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 55%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--stage-gold-bright, #f6c768) 50%, transparent);
  pointer-events: none;
}

/* Muesca que apunta al item padre */
.lfe-nav-primary__list .lfe-submenu__panel::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 3.1rem;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: rgba(24, 29, 69, 1);
  border-top: 1px solid rgba(242, 179, 61, 0.34);
  border-left: 1px solid rgba(242, 179, 61, 0.34);
  border-top-left-radius: 2px;
}

.lfe-nav-primary__list .lfe-has-children:hover .lfe-submenu__panel,
.lfe-nav-primary__list .is-open .lfe-submenu__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lfe-nav-primary__list .lfe-submenu__eyebrow {
  margin: 0 0 var(--lfe-space-2);
  padding-inline: var(--lfe-space-3);
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-gold);
}

.lfe-nav-primary__list .lfe-submenu__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Entrada escalonada de los items */
.lfe-nav-primary__list .lfe-submenu__item {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   260ms var(--lfe-ease-out),
    transform 360ms var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-has-children:hover .lfe-submenu__item,
.lfe-nav-primary__list .is-open .lfe-submenu__item {
  opacity: 1;
  transform: translateY(0);
}

.lfe-nav-primary__list .lfe-has-children:hover .lfe-submenu__item:nth-child(1),
.lfe-nav-primary__list .is-open .lfe-submenu__item:nth-child(1) { transition-delay: 60ms; }
.lfe-nav-primary__list .lfe-has-children:hover .lfe-submenu__item:nth-child(2),
.lfe-nav-primary__list .is-open .lfe-submenu__item:nth-child(2) { transition-delay: 120ms; }
.lfe-nav-primary__list .lfe-has-children:hover .lfe-submenu__item:nth-child(3),
.lfe-nav-primary__list .is-open .lfe-submenu__item:nth-child(3) { transition-delay: 180ms; }

.lfe-nav-primary .lfe-nav-primary__list .lfe-submenu__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--lfe-space-4);
  width: 100%;
  min-height: 44px;
  padding: var(--lfe-space-2) var(--lfe-space-3) var(--lfe-space-2) var(--lfe-space-2);
  border-radius: 9px;
  color: var(--lfe-ivory);
  white-space: normal;
  isolation: isolate;
  transition: background-color var(--lfe-dur-fast) var(--lfe-ease-out);
}

/* Barrido de luz dorada al hover (sustituye al subrayado del nav) */
.lfe-nav-primary .lfe-nav-primary__list .lfe-submenu__link::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(242, 179, 61, 0.14) 0%, rgba(242, 179, 61, 0.04) 55%, transparent 100%);
  transform: scaleX(0.6);
  transform-origin: left center;
  opacity: 0;
  transition:
    opacity   var(--lfe-dur-base) var(--lfe-ease-out),
    transform 420ms var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu__link:hover::after,
.lfe-nav-primary__list .lfe-submenu__link:focus-visible::after,
.lfe-nav-primary__list .lfe-submenu__item.lfe-current > .lfe-submenu__link::after {
  opacity: 1;
  transform: scaleX(1);
}

.lfe-nav-primary__list .lfe-submenu__link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: -2px;
}

.lfe-nav-primary__list .lfe-submenu__thumb {
  position: relative;
  display: block;
  width: 60px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(242, 179, 61, 0.22), 0 6px 16px -6px rgba(0, 0, 0, 0.7);
}

.lfe-nav-primary__list .lfe-submenu__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.9);
  transition:
    transform 600ms var(--lfe-ease-out),
    filter    var(--lfe-dur-base) var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu__link:hover .lfe-submenu__thumb img,
.lfe-nav-primary__list .lfe-submenu__link:focus-visible .lfe-submenu__thumb img {
  transform: scale(1.1);
  filter: saturate(1.05) brightness(1.05);
}

.lfe-nav-primary__list .lfe-submenu__text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.lfe-nav-primary__list .lfe-submenu__title {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-2);
  font-family: var(--lfe-font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--lfe-ivory);
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu__link:hover .lfe-submenu__title,
.lfe-nav-primary__list .lfe-submenu__link:focus-visible .lfe-submenu__title,
.lfe-nav-primary__list .lfe-submenu__item.lfe-current .lfe-submenu__title {
  color: var(--lfe-gold-bright);
}

.lfe-nav-primary__list .lfe-submenu__badge {
  padding: 3px 7px 2px;
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lfe-gold);
  border: 1px solid rgba(242, 179, 61, 0.45);
  border-radius: 999px;
}

.lfe-nav-primary__list .lfe-submenu__desc {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(245, 239, 227, 0.62);
}

.lfe-nav-primary__list .lfe-submenu__arrow {
  color: var(--lfe-gold);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity   var(--lfe-dur-fast) var(--lfe-ease-out),
    transform 320ms var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu__link:hover .lfe-submenu__arrow,
.lfe-nav-primary__list .lfe-submenu__link:focus-visible .lfe-submenu__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Pie del panel: enlace a la pagina del padre */
.lfe-nav-primary .lfe-nav-primary__list .lfe-submenu__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-top: var(--lfe-space-2);
  padding: var(--lfe-space-2) var(--lfe-space-3);
  border-top: 1px solid rgba(242, 179, 61, 0.14);
  border-radius: 0 0 9px 9px;
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 227, 0.72);
}

.lfe-nav-primary__list .lfe-submenu__all::after {
  content: none;
}

.lfe-nav-primary__list .lfe-submenu__all:hover,
.lfe-nav-primary__list .lfe-submenu__all:focus-visible {
  color: var(--lfe-gold-bright);
}

.lfe-nav-primary__list .lfe-submenu__all:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: -2px;
}

.lfe-nav-primary__list .lfe-submenu__all-arrow {
  transition: transform 320ms var(--lfe-ease-out);
}

.lfe-nav-primary__list .lfe-submenu__all:hover .lfe-submenu__all-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-nav-primary__list a::after,
  .lfe-nav-primary__list .lfe-submenu,
  .lfe-nav-primary__list .lfe-submenu__panel,
  .lfe-nav-primary__list .lfe-submenu__item,
  .lfe-nav-primary__list .lfe-submenu__thumb img,
  .lfe-nav-primary__list .lfe-submenu__arrow,
  .lfe-nav-primary__list .lfe-submenu__all-arrow,
  .lfe-nav-primary__list .lfe-submenu-toggle svg {
    transition: none;
  }
  .lfe-nav-primary__list .lfe-submenu__panel,
  .lfe-nav-primary__list .lfe-submenu__item,
  .lfe-nav-primary__list .lfe-submenu__link:hover .lfe-submenu__thumb img {
    transform: none;
  }

  .lfe-header {
    transition: none;
  }
}

/* =========================================================================
   19. MOBILE TOGGLE (hamburger)
   ========================================================================= */

.lfe-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--lfe-space-2);
  background-color: transparent;
  border: 1px solid rgba(200, 165, 91, 0.35);
  border-radius: var(--lfe-radius-sm);
  color: var(--lfe-ivory);
  cursor: pointer;
  transition:
    background-color var(--lfe-dur-fast) var(--lfe-ease-out),
    border-color     var(--lfe-dur-fast) var(--lfe-ease-out),
    color            var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-mobile-toggle:hover {
  background-color: rgba(200, 165, 91, 0.12);
  border-color: var(--lfe-gold);
  color: var(--lfe-gold);
}

.lfe-mobile-toggle:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

/* =========================================================================
   20. MOBILE MENU PANEL
   ========================================================================= */

.lfe-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--lfe-z-overlay);
  /* Overlay oscuro de fondo */
  background-color: rgba(11, 10, 9, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lfe-mobile-menu[hidden] {
  display: none;
}

/* Panel deslizante desde la derecha */
.lfe-mobile-menu__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background-color: var(--lfe-black-soft);
  border-left: 1px solid rgba(200, 165, 91, 0.20);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lfe-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lfe-space-4) var(--lfe-space-6);
  border-bottom: 1px solid rgba(200, 165, 91, 0.15);
}

/* Boton cierre */
.lfe-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border: 1px solid rgba(200, 165, 91, 0.35);
  border-radius: var(--lfe-radius-sm);
  color: var(--lfe-ivory);
  cursor: pointer;
  transition:
    background-color var(--lfe-dur-fast) var(--lfe-ease-out),
    border-color     var(--lfe-dur-fast) var(--lfe-ease-out),
    color            var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-mobile-menu__close:hover {
  background-color: rgba(200, 165, 91, 0.12);
  border-color: var(--lfe-gold);
  color: var(--lfe-gold);
}

.lfe-mobile-menu__close:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

/* Lista de links */
.lfe-mobile-menu__nav {
  flex: 1;
  padding: var(--lfe-space-6);
}

.lfe-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Contraste: ivory #F5EFE3 sobre black-soft #15120F = 15.1:1 (AAA) */
.lfe-mobile-menu__list a {
  display: flex;
  align-items: center;
  padding: var(--lfe-space-4) 0;
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-md);
  font-weight: 400;
  color: var(--lfe-ivory);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 165, 91, 0.10);
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-mobile-menu__list a:hover,
.lfe-mobile-menu__list a:focus-visible {
  color: var(--lfe-gold);
}

.lfe-mobile-menu__list a:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
}

.lfe-mobile-menu__list .lfe-current > a {
  color: var(--lfe-gold);
}

/* Submenu en el panel movil: acordeon (enlace + chevron en la misma fila). */
.lfe-mobile-menu__list > .lfe-has-children {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.lfe-mobile-menu__list .lfe-current-ancestor > a {
  color: var(--lfe-gold);
}

.lfe-mobile-menu__list .lfe-submenu-toggle {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(200, 165, 91, 0.10);
  color: var(--lfe-ivory);
  cursor: pointer;
}

.lfe-mobile-menu__list .lfe-submenu-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-mobile-menu__list .is-open > .lfe-submenu-toggle {
  color: var(--lfe-gold);
}

.lfe-mobile-menu__list .is-open > .lfe-submenu-toggle svg {
  transform: rotate(180deg);
}

.lfe-mobile-menu__list .lfe-submenu-toggle:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: -2px;
}

.lfe-mobile-menu__list .sub-menu {
  display: none;
  grid-column: 1 / -1;
  list-style: none;
  margin: 0 0 var(--lfe-space-2);
  padding: 0 0 0 var(--lfe-space-4);
  border-left: 1px solid rgba(242, 179, 61, 0.35);
}

.lfe-mobile-menu__list .is-open > .sub-menu {
  display: block;
}

.lfe-mobile-menu__list .sub-menu a {
  font-family: var(--lfe-font-body);
  font-size: var(--lfe-fs-base);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-mobile-menu__list .lfe-submenu-toggle svg {
    transition: none;
  }
}

/* Footer del panel: redes + CTA */
.lfe-mobile-menu__footer {
  padding: var(--lfe-space-6);
  border-top: 1px solid rgba(200, 165, 91, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-4);
}

.lfe-mobile-menu__cta {
  width: 100%;
  justify-content: center;
}

/* Bloquear scroll del body cuando menu abierto */
body.is-menu-open {
  overflow: hidden;
}

/* =========================================================================
   21. ICONOS SOCIALES
   ========================================================================= */

.lfe-social-icons {
  gap: var(--lfe-space-4);
  margin-top: 1.25rem;
}

/* v9.8: iconos sociales SIN marco — solo el SVG. Cliente:
   'quítales el marco redondo a los iconos de las redes sociales'. */
.lfe-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--bone, #F0E8D6);
  text-decoration: none;
  transition:
    color 220ms ease-out,
    transform 220ms ease-out;
}

.lfe-social-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.lfe-social-icon:hover,
.lfe-social-icon:focus-visible {
  color: var(--stage-gold-bright, #FAD879);
  background: transparent;
  border: 0;
  transform: translateY(-2px);
}

.lfe-social-icon:focus-visible {
  outline: 2px solid var(--stage-gold-bright, #FAD879);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =========================================================================
   22. FOOTER
   ========================================================================= */

.lfe-footer {
  background-color: var(--lfe-black);
  color: var(--lfe-ivory);
}

.lfe-footer__upper {
  padding-block: var(--lfe-section-py);
}

/* Grid: 1 col mobile, 2 cols tablet, 4 cols desktop */
.lfe-footer__columns {
  display: grid;
  /* minmax(0, …): con 1fr el logo de 300px ensanchaba la columna a 320px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lfe-space-12);
}

.lfe-footer__col-title {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lfe-gold);
  margin-bottom: var(--lfe-space-4);
}

/* Contraste: ivory-muted #C9C0AE sobre black-soft #15120F = 9.2:1 (AAA) */
.lfe-footer__tagline {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  line-height: var(--lfe-lh-body);
  margin-top: var(--lfe-space-4);
  max-width: 30ch;
}

/* Nav de footer */
.lfe-nav-footer__list,
.lfe-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-2);
}

/* Contraste: ivory #F5EFE3 sobre black-soft #15120F = 15.1:1 (AAA) */
.lfe-nav-footer__list a {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  text-decoration: none;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-nav-footer__list a:hover,
.lfe-nav-footer__list a:focus-visible {
  color: var(--lfe-gold);
}

.lfe-nav-footer__list a:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.lfe-nav-footer__list .lfe-current > a {
  color: var(--lfe-gold);
}

/* Contacto */
.lfe-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--lfe-space-2);
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  text-decoration: none;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-footer__contact-link:hover,
.lfe-footer__contact-link:focus-visible {
  color: var(--lfe-gold);
}

.lfe-footer__contact-link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
}

.lfe-footer__location {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  margin-top: var(--lfe-space-2);
}

.lfe-social-icons {
  margin-top: var(--lfe-space-4);
}

/* Suscripcion */
.lfe-footer__subscribe-desc {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  line-height: var(--lfe-lh-body);
  margin-bottom: var(--lfe-space-4);
}

.lfe-footer__subscribe-form {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-3);
}

.lfe-footer__subscribe-input {
  width: 100%;
  padding: var(--lfe-space-3) var(--lfe-space-4);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 165, 91, 0.30);
  border-radius: var(--lfe-radius-sm);
  color: var(--lfe-ivory);
  font-size: var(--lfe-fs-sm);
  font-family: var(--lfe-font-body);
  opacity: 0.7;
  cursor: not-allowed;
}

.lfe-footer__subscribe-note {
  font-size: var(--lfe-fs-xs);
  /* Marfil al 0.75: el ivory-muted al 0.6 daba 2,78:1 sobre el azul del pie. */
  color: var(--lfe-ivory);
  opacity: 0.75;
}

/* Divider full-width */
.lfe-divider-gold--full {
  width: 100%;
  margin-block: 0;
  opacity: 0.35;
}

/* Block inferior */
.lfe-footer__lower {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-4);
  padding-block: var(--lfe-space-8);
  align-items: center;
  text-align: center;
}

.lfe-footer__copy {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted);
  margin: 0;
}

/* El banner de Subsana espera a que termine la pantalla de bienvenida (splash):
   en móvil ocupaba media pantalla encima del logo. Sin consentimiento no se
   instalan cookies opcionales, así que retrasarlo unos segundos no cambia nada. */
html.lfe-splash-active #subsana-cookies-banner,
html.lfe-splash-active #subsana-cookies-minimized {
  visibility: hidden !important;
}

/* Aviso de cookies del pie y botón «Cambiar mis preferencias» (abre Subsana).
   Venían de cookies.css, retirado con el banner nativo. */
.lfe-footer__cookie-notice {
  font-size: 0.8125rem;
}

.lfe-footer__cookie-prefs {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
}

.lfe-footer__cookie-prefs:hover {
  color: var(--lfe-gold);
  text-decoration: none;
}

.lfe-footer__cookie-prefs:focus-visible {
  outline: 2px solid var(--lfe-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Firma del studio */
.lfe-footer__studio {
  font-size: var(--lfe-fs-xs);
  /* Marfil al 0.7 (no ivory-muted): ≥5,29:1 también sobre el halo magenta del footer */
  color: var(--lfe-ivory);
  opacity: 0.7;
  text-align: center;
  margin: 0;
  padding-block-end: var(--lfe-space-6);
}

.lfe-footer__studio a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  padding-block: var(--lfe-space-2);
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-footer__studio a:hover,
.lfe-footer__studio a:focus-visible {
  color: var(--lfe-gold);
}

.lfe-footer__studio a:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Nav legal */
.lfe-nav-legal__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lfe-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lfe-nav-legal__list a {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted);
  text-decoration: none;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-nav-legal__list a:hover,
.lfe-nav-legal__list a:focus-visible {
  color: var(--lfe-gold);
}

.lfe-nav-legal__list a:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* =========================================================================
   23. BREADCRUMBS
   ========================================================================= */

.lfe-breadcrumbs {
  padding-block: var(--lfe-space-4);
  padding-inline: var(--lfe-section-px);
}

.lfe-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lfe-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.lfe-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-1);
}

/* Contraste: gold #C8A55B sobre black #0B0A09 = 8.4:1 (AAA) */
.lfe-breadcrumbs__link {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--lfe-gold);
  text-decoration: none;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-breadcrumbs__link:hover,
.lfe-breadcrumbs__link:focus-visible {
  color: var(--lfe-gold-bright);
}

.lfe-breadcrumbs__link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Contraste: ivory-muted #C9C0AE sobre black #0B0A09 = 9.6:1 (AAA) */
.lfe-breadcrumbs__current {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--lfe-ivory-muted);
}

/* Separador decorativo en gold */
.lfe-breadcrumbs__sep {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-gold);
  opacity: 0.6;
  line-height: 1;
}

/* =========================================================================
   24. MEDIA QUERIES — tablet (>= 768px)
   ========================================================================= */

@media ( min-width: 768px ) {

  /* Top bar visible en tablet+ */
  .lfe-header__topbar {
    display: block;
  }

  /* Footer: 2 columnas en tablet */
  .lfe-footer__columns {
    grid-template-columns: 1fr 1fr;
  }

  /* Brand ocupa todo el ancho en la primera fila */
  .lfe-footer__col--brand {
    grid-column: 1 / -1;
  }

  /* Footer lower: fila horizontal */
  .lfe-footer__lower {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

}

/* =========================================================================
   25. MEDIA QUERIES — desktop (>= 1024px)
   ========================================================================= */

@media ( min-width: 1024px ) {

  /* Mostrar nav principal */
  .lfe-nav-primary {
    display: block;
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  /* Mostrar CTA "Contratar" */
  .lfe-header__cta {
    display: inline-flex;
  }

  /* Ocultar hamburger */
  .lfe-mobile-toggle {
    display: none;
  }

  /* Footer: 4 columnas en desktop */
  .lfe-footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Brand: columna normal en desktop */
  .lfe-footer__col--brand {
    grid-column: auto;
  }

  /* Suscripcion: flex row en desktop */
  .lfe-footer__subscribe-form {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .lfe-footer__subscribe-input-wrap {
    flex: 1;
    min-width: 180px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .lfe-skip-link {
    transition: none;
  }

  .lfe-mobile-toggle,
  .lfe-mobile-menu__close,
  .lfe-social-icon,
  .lfe-footer__contact-link {
    transition: none;
  }
}

/* =========================================================================
   26. SINGLE ESPECTACULO — layout 2 columnas
   ========================================================================= */

.lfe-espectaculo-hero {
  position: relative;
  padding-block: 0;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
}

.lfe-espectaculo-hero__media {
  position: absolute;
  inset: 0;
}

.lfe-espectaculo-hero__media .lfe-media {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: unset;
}

.lfe-espectaculo-hero__media .lfe-media img {
  height: 100%;
}

.lfe-espectaculo-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 10, 9, 0.95) 0%,
    rgba(11, 10, 9, 0.60) 50%,
    rgba(11, 10, 9, 0.20) 100%
  );
}

.lfe-espectaculo-hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--lfe-space-16);
}

.lfe-espectaculo-hero__subtitle {
  max-width: 60ch;
  margin-block: var(--lfe-space-4) var(--lfe-space-8);
}

/* Layout body: stack en mobile, grid en desktop */
.lfe-espectaculo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lfe-space-12);
}

/* Ficha tecnica */
.lfe-espectaculo-ficha__title {
  margin-bottom: var(--lfe-space-4);
}

.lfe-espectaculo-ficha__list {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-3);
  margin-bottom: var(--lfe-space-6);
}

.lfe-espectaculo-ficha__row {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-1);
  padding-bottom: var(--lfe-space-3);
  border-bottom: 1px solid rgba(200, 165, 91, 0.12);
}

.lfe-espectaculo-ficha__row dt {
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--lfe-gold);
}

.lfe-espectaculo-ficha__row dd {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  margin-left: 0;
}

.lfe-espectaculo-sidebar__cta {
  margin-top: var(--lfe-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-3);
}

.lfe-espectaculo-video {
  margin-top: var(--lfe-space-8);
}

@media ( min-width: 1024px ) {
  .lfe-espectaculo-grid {
    grid-template-columns: 1fr 360px;
    align-items: start;
  }
}

/* =========================================================================
   27. SINGLE PRENSA — quote
   ========================================================================= */

.lfe-prensa__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfe-space-3);
  align-items: center;
  margin-block: var(--lfe-space-4);
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
}

.lfe-prensa__medio {
  color: var(--lfe-ivory-muted);
}

.lfe-prensa__fecha {
  color: var(--lfe-ivory-muted);
  opacity: 0.8;
}

.lfe-prensa__quote {
  border-left: 3px solid var(--lfe-gold);
  padding-left: var(--lfe-space-6);
  margin-block: var(--lfe-space-8);
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-md);
  font-style: italic;
  color: var(--lfe-ivory);
  line-height: 1.5;
}

.lfe-prensa__quote p {
  margin: 0;
}

.lfe-prensa__image {
  margin-block: var(--lfe-space-8);
}

/* Cuerpo de la nota: el reset deja los <p> sin margen y se pegaban. */
.lfe-prensa__body {
  max-width: 68ch;
  color: var(--lfe-ivory);
  line-height: 1.7;
}

.lfe-prensa__body > * + * {
  margin-top: var(--lfe-space-5, 1.25rem);
}

.lfe-prensa__external {
  margin-top: var(--lfe-space-8);
}

.lfe-prensa__back {
  margin-top: var(--lfe-space-8);
  padding-top: var(--lfe-space-6);
  border-top: 1px solid rgba(200, 165, 91, 0.15);
}

/* =========================================================================
   28. ARCHIVOS — lista prensa y resultados busqueda
   ========================================================================= */

.lfe-archive__header {
  max-width: 70ch;
  margin-bottom: var(--lfe-space-12);
}

.lfe-archive__header .lfe-eyebrow {
  margin-bottom: var(--lfe-space-3);
}

.lfe-archive__header .lfe-h2 {
  margin-bottom: var(--lfe-space-4);
}

/* Prensa: item con thumbnail a la derecha */
/* === Índice de prensa — grid de recortes papel (dirección de arte) ========
   Antes: filas full-width con medio panel vacío + título tipo link crudo.
   Ahora: rejilla de "recortes" en papel, planos (subordinados a las cards-cita
   de la home), título como titular con enlace estirado. */
.lfe-prensa-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lfe-prensa-list > li { margin: 0; }

/* Card grande horizontal full-width: imagen + contenido */
.lfe-prensa-item {
  position: relative;
  scroll-margin-top: calc(var(--lfe-header-h, 88px) + 1.5rem); /* ancla desde "Lo que dicen de nosotros" */
  display: grid;
  grid-template-columns: minmax(0, 34%) 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #f4ecdb;
  border: 1px solid rgba(200, 165, 91, 0.50);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(90, 15, 26, 0.04),
    0 12px 30px -18px rgba(10, 10, 10, 0.40);
  transition:
    transform 300ms var(--lfe-ease-out),
    border-color 300ms var(--lfe-ease-out),
    box-shadow 300ms var(--lfe-ease-out);
}
.lfe-prensa-item:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 165, 91, 0.85);
  box-shadow:
    0 2px 4px rgba(90, 15, 26, 0.05),
    0 22px 44px -20px rgba(10, 10, 10, 0.50);
}
@media (prefers-reduced-motion: reduce) {
  .lfe-prensa-item { transition: none; }
  .lfe-prensa-item:hover { transform: none; }
}

/* Imagen: banda lateral (fallback = logo sobre navy) */
.lfe-prensa-item__thumb {
  position: relative;
  overflow: hidden;
  min-height: 200px;
  background: #eadfca;
}
.lfe-prensa-item__thumb:not(.is-placeholder) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lfe-prensa-item__thumb.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(242, 179, 61, 0.08), transparent 60%),
    linear-gradient(160deg, #182253, #0a0f2e);
}
.lfe-prensa-item__logo {
  width: 72%;
  max-width: 220px;
  height: auto;
  opacity: 0.5;
}

.lfe-prensa-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

@media (max-width: 640px) {
  .lfe-prensa-item { grid-template-columns: 1fr; }
  .lfe-prensa-item__thumb { aspect-ratio: 16 / 9; min-height: 0; }
}

/* Masthead: medio + tipo + fecha con regla crimson (gesto "recorte") */
.lfe-prensa-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 26, 42, 0.18);
}
.lfe-prensa-item .lfe-card__eyebrow {
  color: #8b1a2a;
  font-family: var(--lfe-font-eyebrow, 'General Sans'), sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}
.lfe-prensa-item__fecha {
  font-family: var(--lfe-font-body, 'General Sans'), sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #6b5d4a;
  opacity: 1;
}
.lfe-prensa-item .lfe-pill {
  background: transparent;
  border: 1px solid rgba(139, 26, 42, 0.35);
  color: #8b1a2a;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

/* Título: titular Clash granate + enlace estirado (fuera el link oro crudo) */
.lfe-prensa-item .lfe-card__title {
  font-family: var(--lfe-font-display, 'Clash Display'), sans-serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #5a0f1a;
  margin: 0;
}
.lfe-prensa-item .lfe-card__title a {
  color: inherit;
  text-decoration: none;
}
.lfe-prensa-item .lfe-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lfe-prensa-item .lfe-card__excerpt {
  font-family: var(--lfe-font-body, 'General Sans'), sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #574a37;
  margin: 0;
}

/* Todas las cards miden lo mismo: título y extracto ocupan siempre N líneas
   (se reservan aunque el texto sea corto y se cortan con … si es largo).
   El texto completo sigue en el DOM para lectores de pantalla. */
.lfe-prensa-item {
  --lfe-prensa-title-lines: 2;
  --lfe-prensa-excerpt-lines: 2;
}
.lfe-prensa-item .lfe-card__title,
.lfe-prensa-item .lfe-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lfe-prensa-item .lfe-card__title {
  -webkit-line-clamp: var(--lfe-prensa-title-lines);
  line-clamp: var(--lfe-prensa-title-lines);
  min-height: calc(var(--lfe-prensa-title-lines) * 1.1em);
}
.lfe-prensa-item .lfe-card__excerpt {
  -webkit-line-clamp: var(--lfe-prensa-excerpt-lines);
  line-clamp: var(--lfe-prensa-excerpt-lines);
  min-height: calc(var(--lfe-prensa-excerpt-lines) * 1.55em);
}
/* El recorte del título taparía el foco del enlace: el anillo va en la card. */
.lfe-prensa-item:has(.lfe-card__title a:focus-visible) {
  outline: 2px solid var(--lfe-focus-color);
  outline-offset: 3px;
}
.lfe-prensa-item .lfe-prensa-item__meta .lfe-card__eyebrow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lfe-prensa-item__meta .lfe-pill,
.lfe-prensa-item__fecha {
  flex-shrink: 0;
  white-space: nowrap;
}
/* La etiqueta de tipo es un span informativo, no un control: sin mínimo táctil de 44px
   y la fila del masthead mide lo mismo con o sin etiqueta. */
.lfe-prensa-item .lfe-pill {
  min-height: 0;
  cursor: default;
  line-height: 1.2;
}
@media (min-width: 1024px) {
  .lfe-prensa-item__meta { flex-wrap: nowrap; }
}
.lfe-prensa-item__meta > * { min-height: 1.4rem; }
.lfe-prensa-item__meta .lfe-pill,
.lfe-prensa-item__fecha { display: inline-flex; align-items: center; }
.lfe-prensa-item .lfe-prensa-item__meta .lfe-card__eyebrow { display: block; line-height: 1.4rem; }
@media (max-width: 1023px) {
  .lfe-prensa-item {
    --lfe-prensa-title-lines: 3;
    --lfe-prensa-excerpt-lines: 3;
  }
}
/* < 1024px: filas fijas para que medio y fecha nunca se corten y la altura no
   dependa de su longitud: medio arriba; tipo + fecha debajo. */
@media (max-width: 1023px) {
  .lfe-prensa-item__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(1.4rem, auto));
    justify-items: start;
    align-items: center;
  }
  .lfe-prensa-item .lfe-prensa-item__meta .lfe-card__eyebrow { grid-row: 1; grid-column: 1 / -1; max-width: 100%; }
  .lfe-prensa-item__meta .lfe-pill { grid-row: 2; grid-column: 1; }
  .lfe-prensa-item__fecha { grid-row: 2; grid-column: 2; }
}
/* Móviles estrechos: tipo y fecha no caben juntos, van en filas separadas. */
@media (max-width: 374px) {
  .lfe-prensa-item__meta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(1.4rem, auto));
  }
  .lfe-prensa-item__fecha { grid-row: 3; grid-column: 1; }
}

/* CTAs: "Leer más" ancla abajo; "Ver original" externo por encima del overlay */
.lfe-prensa-item .lfe-cta-group {
  margin-top: auto;
  padding-top: 0.25rem;
  gap: 1rem;
}
.lfe-prensa-item .lfe-btn--link {
  color: #8b1a2a;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lfe-prensa-item .lfe-cta-group a[target="_blank"] {
  position: relative;
  z-index: 2;
}

/* === Prensa: carrusel de citas =========================================== */
.lfe-prensa-carousel { padding-block: clamp(2.5rem, 5vw, 4rem); }
.lfe-prensa-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.lfe-prensa-carousel__viewport::-webkit-scrollbar { display: none; }
/* Al arrastrar: cursor de agarre + scroll libre (sin snap que pelee el drag) */
.lfe-prensa-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.lfe-prensa-carousel__viewport.is-dragging .lfe-press-quotes__item { pointer-events: none; }
.lfe-prensa-carousel__track {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.25rem;
}
.lfe-prensa-carousel__track > .lfe-press-quotes__item {
  flex: 0 0 clamp(270px, 78vw, 360px);
  scroll-snap-align: start;
}
/* Puntitos de paginación — centrados, el activo se alarga a píldora oro */
.lfe-prensa-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
}
.lfe-prensa-carousel__dot {
  position: relative;
  width: 8px; height: 8px;
  padding: 0; border: 0; border-radius: 99px;
  background: rgba(240, 232, 214, 0.28);
  cursor: pointer;
  transition: background 300ms ease, width 300ms var(--lfe-ease-out, ease);
}
/* Área táctil ampliada a 24px (WCAG 2.2 target size) sin agrandar el punto */
.lfe-prensa-carousel__dot::before {
  content: ""; position: absolute; inset: -8px;
}
.lfe-prensa-carousel__dot:hover { background: rgba(242, 179, 61, 0.65); }
.lfe-prensa-carousel__dot.is-active {
  width: 24px;
  background: var(--lfe-gold, #F2B33D);
}
.lfe-prensa-carousel__dot:focus-visible {
  outline: 2px solid var(--lfe-gold, #F2B33D);
  outline-offset: 3px;
}

/* Busqueda */
.lfe-search__header {
  margin-bottom: var(--lfe-space-12);
}

.lfe-search__term {
  background-color: transparent;
  color: var(--lfe-gold);
}

.lfe-search__form {
  margin-top: var(--lfe-space-6);
  max-width: 480px;
}

.lfe-search-result {
  display: flex;
  gap: var(--lfe-space-6);
  align-items: flex-start;
  padding: var(--lfe-space-6);
  border-bottom: 1px solid rgba(200, 165, 91, 0.12);
}

.lfe-search-result__body {
  flex: 1;
  min-width: 0;
}

.lfe-search-result__thumb {
  flex-shrink: 0;
  width: 100px;
}

.lfe-search-result__thumb img {
  width: 100%;
  height: 75px;
  object-fit: cover;
  border-radius: var(--lfe-radius-sm);
}

.lfe-search__highlight {
  background-color: rgba(200, 165, 91, 0.25);
  color: var(--lfe-gold-bright);
  border-radius: 2px;
  padding-inline: 2px;
}

/* Formulario de busqueda */
.lfe-search-form__inner {
  display: flex;
  gap: var(--lfe-space-3);
  align-items: center;
}

.lfe-search-form__input {
  flex: 1;
  padding: var(--lfe-space-3) var(--lfe-space-4);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 165, 91, 0.30);
  border-radius: var(--lfe-radius-sm);
  color: var(--lfe-ivory);
  font-size: var(--lfe-fs-sm);
  font-family: var(--lfe-font-body);
  min-height: 44px;
  transition: border-color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-search-form__input:focus {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-color: var(--lfe-gold);
}

.lfe-search-form__input::placeholder {
  color: var(--lfe-ivory-muted);
  opacity: 0.6;
}

/* =========================================================================
   29. PAGINATION
   ========================================================================= */

.lfe-pagination {
  margin-top: var(--lfe-space-12);
}

.lfe-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfe-space-2);
  align-items: center;
  justify-content: center;
}

.lfe-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--lfe-space-2) var(--lfe-space-3);
  border: 1px solid rgba(200, 165, 91, 0.25);
  border-radius: var(--lfe-radius-sm);
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  text-decoration: none;
  transition:
    background-color var(--lfe-dur-fast) var(--lfe-ease-out),
    border-color     var(--lfe-dur-fast) var(--lfe-ease-out),
    color            var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-pagination .page-numbers:hover,
.lfe-pagination .page-numbers:focus-visible {
  background-color: rgba(200, 165, 91, 0.12);
  border-color: var(--lfe-gold);
  color: var(--lfe-gold);
}

.lfe-pagination .page-numbers:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

.lfe-pagination .page-numbers.current {
  background-color: var(--lfe-gold);
  border-color: var(--lfe-gold);
  color: var(--lfe-black);
  font-weight: 600;
}

.lfe-pagination .page-numbers.dots {
  border-color: transparent;
  cursor: default;
}

/* =========================================================================
   30. ARCHIVE FILTERS
   ========================================================================= */

.lfe-archive-filters {
  margin-bottom: var(--lfe-space-8);
}

/* =========================================================================
   31. 404
   ========================================================================= */

.lfe-404 {
  min-height: 70vh;
  min-height: 70svh;
  display: flex;
  align-items: center;
}

/* El padding de sección se suma al contenido: en portátiles bajos lo acota
   la altura para que el bloque no llegue a ocupar toda la pantalla. */
.lfe-404.lfe-section {
  padding-block: clamp(2.5rem, 7svh, 6rem);
}

.lfe-404 .lfe-display {
  margin-block: var(--lfe-space-4);
  font-size: clamp(2.5rem, min(2rem + 4vw, 10svh), 6rem);
}

.lfe-404__search {
  max-width: 480px;
  margin-inline: auto;
}

/* =========================================================================
   32. ARTICLE META
   ========================================================================= */

.lfe-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfe-space-4);
  margin-top: var(--lfe-space-4);
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
}

.lfe-article__date,
.lfe-article__author {
  color: var(--lfe-ivory-muted);
}

.lfe-article__featured-image {
  margin-block: var(--lfe-space-8);
}

.lfe-article__body .lfe-container,
.lfe-article__tags.lfe-container {
  padding-bottom: var(--lfe-space-12);
}

/* Posts relacionados */
.lfe-related .lfe-eyebrow {
  margin-bottom: var(--lfe-space-8);
}

/* =========================================================================
   33. SHOWS EMPTY STATE
   ========================================================================= */

.lfe-shows-empty {
  padding-block: var(--lfe-space-16);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.lfe-shows-empty .lfe-cta-group {
  justify-content: center;
  margin-top: var(--lfe-space-8);
}

/* =========================================================================
   34. SHOWS GRID (lfe/shows-grid)
   ========================================================================= */

.lfe-shows-grid {
  padding-block: var(--lfe-section-py, clamp(4rem, 8vw, 8rem));
  background-color: var(--lfe-black);
}

.lfe-shows-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfe-space-2);
  margin-bottom: var(--lfe-space-8);
  padding-inline: var(--lfe-section-px);
}

.lfe-shows-grid__grid {
  display: grid;
  grid-template-columns: repeat(var(--lfe-grid-cols, 3), 1fr);
  gap: var(--lfe-space-8);
  padding-inline: var(--lfe-section-px);
}

.lfe-shows-grid__empty {
  padding: var(--lfe-space-16) var(--lfe-section-px);
  color: var(--lfe-ivory-muted);
  font-size: var(--lfe-fs-md);
}

.lfe-show-card .lfe-card__link {
  color: inherit;
  text-decoration: none;
}

.lfe-show-card .lfe-card__link:hover,
.lfe-show-card .lfe-card__link:focus-visible {
  color: var(--lfe-gold);
}

@media ( max-width: 900px ) {
  .lfe-shows-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media ( max-width: 600px ) {
  .lfe-shows-grid__grid {
    grid-template-columns: 1fr;
  }
}

/* Show card v3 (wall of posters editorial). */

/* =========================================================================
   34. SHOWS CARD v13 — "Pared de archivo iluminada"
   (ticket vertical lateral + sello SVG oro outline + featured 2×2 + chincheta)
   ========================================================================= */

.lfe-show-card {
  --lfe-card-rot: 0deg;
  --lfe-card-base-y: 0px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: visible;
  background: transparent;
  color: var(--lfe-ivory);
  transform: rotate(var(--lfe-card-rot)) translateY(var(--lfe-card-base-y));
  transition: transform 560ms cubic-bezier(.2,.7,.2,1);
  isolation: isolate;
}

/* v13: lift escalonado para romper la retícula uniforme del grid. */
.lfe-shows-wall__grid .lfe-show-card:nth-child(3n) {
  --lfe-card-base-y: 28px;
}
.lfe-shows-wall__grid .lfe-show-card:nth-child(3n+2) {
  --lfe-card-base-y: 14px;
}

.lfe-show-card__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* permite que sello + ticket sobresalgan */
  isolation: isolate;
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.lfe-show-card__link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright, #E6C988);
  outline-offset: 8px;
  border-radius: 2px;
}

/* === MEDIA (el cartel) === */

.lfe-show-card__media {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.4),
    /* v16: marco oro fino + halo cálido en reposo — separa los carteles
       oscuros del fondo negro (antes solo destacaban en hover). */
    0 0 0 1px rgba(200, 165, 91, 0.38),
    0 0 36px -6px rgba(242, 179, 61, 0.28);
  transition: box-shadow 520ms cubic-bezier(.2,.7,.2,1);
  /* Doblez horizontal sutil (1/3 superior) — sensación de cartel real. */
  background-image:
    linear-gradient(180deg,
      rgba(240, 232, 214, 0) calc(33% - 1px),
      rgba(240, 232, 214, 0.08) 33%,
      rgba(240, 232, 214, 0) calc(33% + 1px));
  background-blend-mode: overlay;
}

.lfe-show-card__media picture,
.lfe-show-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 780ms cubic-bezier(.2,.7,.2,1),
              filter 540ms ease;
  filter: contrast(1.06) saturate(1.04);
}

/* v13: overlay magenta sutil reveal en hover (no mix-blend en mobile — perf). */
.lfe-show-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(184, 58, 120, 0.18) 0%,
    rgba(184, 58, 120, 0) 60%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
  z-index: 2;
  /* Vignette interior — sensación papel impreso */
  box-shadow: inset 0 -80px 120px -40px rgba(10, 18, 53, 0.55);
}

@media (hover: hover) and (pointer: fine) {
  .lfe-show-card__overlay {
    mix-blend-mode: color;
  }
}

/* === HOVER / FOCUS === */

.lfe-show-card:hover,
.lfe-show-card:focus-within {
  transform: rotate(0deg) translateY(calc(var(--lfe-card-base-y) - 12px));
  z-index: 10;
}

.lfe-show-card:hover .lfe-show-card__media,
.lfe-show-card:focus-within .lfe-show-card__media {
  box-shadow:
    0 50px 100px -32px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(242, 179, 61, 0.65),
    0 0 48px -4px rgba(242, 179, 61, 0.4);
}

.lfe-show-card:hover .lfe-show-card__media img,
.lfe-show-card:focus-within .lfe-show-card__media img {
  transform: scale(1.04);
  filter: contrast(1.1) saturate(1.12);
}

.lfe-show-card:hover .lfe-show-card__overlay,
.lfe-show-card:focus-within .lfe-show-card__overlay {
  opacity: 1;
}

/* === TICKET vertical (lomo del programa) === */

.lfe-show-card__ticket {
  position: absolute;
  top: 24px;
  left: -22px;
  z-index: 4;
  writing-mode: vertical-rl;
  transform: rotate(180deg) translateX(0);
  font-family: var(--lfe-font-sans, 'Inter'), system-ui, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--lfe-gold-bright, #E6C988);
  opacity: 0.72;
  white-space: nowrap;
  max-height: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1),
              opacity 320ms ease;
}

.lfe-show-card:hover .lfe-show-card__ticket,
.lfe-show-card:focus-within .lfe-show-card__ticket {
  transform: rotate(180deg) translateX(8px);
  opacity: 1;
  color: var(--lfe-gold, #F2B33D);
}

/* === SELLO SVG outline oro (top-right, rotado 18°) === */

.lfe-show-card__seal {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 5;
  width: 88px;
  height: 88px;
  color: var(--lfe-gold, #F2B33D);
  opacity: 0.62;
  transform: rotate(18deg);
  transition: transform 440ms cubic-bezier(.2,.7,.2,1),
              opacity 320ms ease;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.lfe-show-card:hover .lfe-show-card__seal,
.lfe-show-card:focus-within .lfe-show-card__seal {
  opacity: 0.92;
  transform: rotate(22deg);
}

/* === SELLO "EN GIRA" / "DISPONIBLE" (magenta) — solo en hover === */

.lfe-show-card__available {
  position: absolute;
  top: 76px;
  right: -12px;
  z-index: 6;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--lfe-magenta, #B83A78);
  border-radius: 50%;
  background: rgba(11, 10, 9, 0.78);
  backdrop-filter: blur(4px);
  color: var(--lfe-magenta, #B83A78);
  transform: rotate(-12deg) scale(0.85);
  opacity: 0;
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1),
              opacity 280ms ease;
  pointer-events: none;
  text-align: center;
}

.lfe-show-card__available--gold {
  border-color: var(--lfe-gold, #F2B33D);
  color: var(--lfe-gold, #F2B33D);
}

.lfe-show-card__available-text {
  font-family: var(--lfe-font-sans, 'Inter'), system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lfe-show-card:hover .lfe-show-card__available,
.lfe-show-card:focus-within .lfe-show-card__available {
  opacity: 1;
  transform: rotate(-12deg) scale(1);
}

/* === CHINCHETA SVG (solo en featured) === */

.lfe-show-card__pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 7;
  width: 22px;
  height: 22px;
  color: var(--lfe-gold-bright, #E6C988);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  transition: transform 600ms cubic-bezier(.34, 1.56, .64, 1);
}

.lfe-show-card--featured:hover .lfe-show-card__pin,
.lfe-show-card--featured:focus-within .lfe-show-card__pin {
  transform: translateX(-50%) rotate(2deg);
}

/* === BODY (título + desc + cta) — overlay inferior con gradiente === */

.lfe-show-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(2.5rem, 4vw, 3.5rem) 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 18, 53, 0) 0%,
    rgba(10, 18, 53, 0.85) 60%,
    rgba(10, 18, 53, 0.96) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease,
              transform 420ms cubic-bezier(.2,.7,.2,1);
}

/* Featured: body siempre visible (banda inferior permanente). */
.lfe-show-card--featured .lfe-show-card__body {
  opacity: 1;
  transform: translateY(0);
}

.lfe-show-card:hover .lfe-show-card__body,
.lfe-show-card:focus-within .lfe-show-card__body {
  opacity: 1;
  transform: translateY(0);
}

.lfe-show-card__title {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  color: var(--lfe-bone, #F0E8D6);
  letter-spacing: -0.005em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.lfe-show-card__desc {
  font-size: 0.8125rem;
  color: rgba(240, 232, 214, 0.78);
  margin: 0;
  line-height: 1.4;
  font-style: italic;
  letter-spacing: 0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lfe-show-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-family: var(--lfe-font-sans, 'Inter'), sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-gold-bright, #E6C988);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease,
              transform 320ms ease;
}

.lfe-show-card__cta-arrow {
  display: inline-block;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
}

.lfe-show-card:hover .lfe-show-card__cta,
.lfe-show-card:focus-within .lfe-show-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.lfe-show-card:hover .lfe-show-card__cta-arrow,
.lfe-show-card:focus-within .lfe-show-card__cta-arrow {
  transform: translateX(4px);
}

/* === SR-only (texto accesible adicional) === */

.lfe-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .lfe-show-card,
  .lfe-show-card__media,
  .lfe-show-card__media img,
  .lfe-show-card__ticket,
  .lfe-show-card__seal,
  .lfe-show-card__available,
  .lfe-show-card__pin,
  .lfe-show-card__body,
  .lfe-show-card__cta,
  .lfe-show-card__cta-arrow,
  .lfe-show-card__overlay {
    transition: opacity 200ms ease;
    transform: none;
  }
  .lfe-show-card:hover,
  .lfe-show-card:focus-within,
  .lfe-show-card:hover .lfe-show-card__ticket,
  .lfe-show-card:focus-within .lfe-show-card__ticket,
  .lfe-show-card:hover .lfe-show-card__seal,
  .lfe-show-card:focus-within .lfe-show-card__seal,
  .lfe-show-card:hover .lfe-show-card__available,
  .lfe-show-card:focus-within .lfe-show-card__available,
  .lfe-show-card:hover .lfe-show-card__pin,
  .lfe-show-card:focus-within .lfe-show-card__pin,
  .lfe-show-card--featured:hover .lfe-show-card__pin,
  .lfe-show-card--featured:focus-within .lfe-show-card__pin,
  .lfe-show-card:hover .lfe-show-card__media img,
  .lfe-show-card:focus-within .lfe-show-card__media img,
  .lfe-show-card:hover .lfe-show-card__cta-arrow,
  .lfe-show-card:focus-within .lfe-show-card__cta-arrow {
    transform: none;
  }
}

/* === MOBILE (≤640): ticket compacto, sello pequeño === */

@media (max-width: 640px) {
  .lfe-show-card__ticket {
    font-size: 9px;
    left: -16px;
  }
  .lfe-show-card__seal {
    width: 64px;
    height: 64px;
    top: -10px;
    right: -10px;
  }
  .lfe-show-card__available {
    width: 48px;
    height: 48px;
    top: 56px;
    right: -8px;
  }
  .lfe-show-card__available-text {
    font-size: 8px;
  }
  .lfe-show-card__body {
    /* Mobile siempre visible (sin hover) */
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   35. PRESS LIST (lfe/press-list)
   ========================================================================= */

.lfe-press-list {
  padding-block: var(--lfe-section-py, clamp(4rem, 8vw, 8rem));
  background-color: var(--lfe-black);
}

.lfe-press-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lfe-press-list__item {
  display: grid;
  grid-template-columns: 160px 1fr 48px;
  align-items: start;
  gap: var(--lfe-space-6);
  padding-block: var(--lfe-space-6);
  border-bottom: 1px solid rgba(142, 114, 51, 0.15);
}

.lfe-press-list__item:first-child {
  border-top: 1px solid rgba(142, 114, 51, 0.15);
}

.lfe-press-list__meta {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-2);
  padding-top: 0.15rem;
}

.lfe-press-list__medium {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-gold);
}

.lfe-press-list__date {
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted);
}

.lfe-press-list__title {
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-md);
  font-weight: 400;
  color: var(--lfe-ivory);
  margin: 0 0 var(--lfe-space-2);
  line-height: 1.2;
}

.lfe-press-list__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-press-list__link:hover,
.lfe-press-list__link:focus-visible {
  color: var(--lfe-gold);
}

.lfe-press-list__link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

.lfe-press-list__excerpt {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lfe-press-list__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lfe-gold);
  padding-top: 0.2rem;
  min-width: 44px;
  min-height: 44px;
  transition: transform var(--lfe-dur-fast) var(--lfe-ease-out),
              color var(--lfe-dur-fast) var(--lfe-ease-out);
  text-decoration: none;
}

.lfe-press-list__arrow:hover,
.lfe-press-list__arrow:focus-visible {
  color: var(--lfe-gold-bright);
  transform: translateX(4px);
}

.lfe-press-list__arrow:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

.lfe-press-list__empty {
  color: var(--lfe-ivory-muted);
  font-size: var(--lfe-fs-md);
  padding: var(--lfe-space-16) 0;
}

@media ( max-width: 680px ) {
  .lfe-press-list__item {
    grid-template-columns: 1fr 44px;
    grid-template-rows: auto auto;
  }

  .lfe-press-list__meta {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: var(--lfe-space-4);
    align-items: center;
  }

  .lfe-press-list__content {
    grid-column: 1;
  }

  .lfe-press-list__arrow {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
}

@media ( prefers-reduced-motion: reduce ) {
  .lfe-press-list__arrow {
    transition: color var(--lfe-dur-fast) var(--lfe-ease-out);
  }

  .lfe-press-list__arrow:hover {
    transform: none;
  }
}

/* =========================================================================
   36. CTA BANNER (lfe/cta-banner)
   ========================================================================= */

.lfe-cta-banner {
  padding-block: var(--lfe-section-py, clamp(4rem, 8vw, 8rem));
}

.lfe-cta-banner--crimson {
  background: linear-gradient(135deg, var(--lfe-crimson-deep) 0%, var(--lfe-crimson) 100%);
  color: var(--lfe-ivory);
}

.lfe-cta-banner--soft {
  background-color: var(--lfe-black-soft);
  color: var(--lfe-ivory);
  border-top: 1px solid rgba(142, 114, 51, 0.2);
  border-bottom: 1px solid rgba(142, 114, 51, 0.2);
}

.lfe-cta-banner--gold {
  background: linear-gradient(135deg, var(--lfe-gold-deep) 0%, var(--lfe-gold) 100%);
  color: var(--lfe-black);
}

.lfe-cta-banner--gold .lfe-eyebrow {
  color: var(--lfe-black);
  opacity: 0.7;
}

.lfe-cta-banner--gold .lfe-cta-banner__lead {
  color: rgba(11, 10, 9, 0.75);
}

.lfe-cta-banner__inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: var(--lfe-space-12);
}

.lfe-cta-banner__eyebrow {
  margin-bottom: var(--lfe-space-3);
}

.lfe-cta-banner__heading {
  margin: 0 0 var(--lfe-space-4);
}

.lfe-cta-banner__lead {
  font-size: var(--lfe-fs-md);
  color: var(--lfe-ivory-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 54ch;
}

.lfe-cta-banner__action {
  display: flex;
  justify-content: flex-end;
}

@media ( max-width: 768px ) {
  .lfe-cta-banner__inner {
    grid-template-columns: 1fr;
    gap: var(--lfe-space-8);
  }

  .lfe-cta-banner__action {
    justify-content: flex-start;
  }
}

/* =========================================================================
   37. CONTACT FORM WRAPPER (lfe/contact-form-wrapper)
   ========================================================================= */

.lfe-contact-form-wrapper {
  padding-block: var(--lfe-section-py, clamp(4rem, 8vw, 8rem));
  background-color: var(--lfe-black);
}

.lfe-contact-form-wrapper__title {
  margin-bottom: var(--lfe-space-4);
}

.lfe-contact-form-wrapper__lead {
  font-size: var(--lfe-fs-md);
  color: var(--lfe-ivory-muted);
  margin-bottom: var(--lfe-space-8);
  max-width: 54ch;
  line-height: 1.6;
}

.lfe-contact-form-wrapper__form {
  max-width: 640px;
}

.lfe-contact-form-wrapper__placeholder {
  border: 2px dashed rgba(200, 165, 91, 0.3);
  border-radius: var(--lfe-radius-md);
  padding: var(--lfe-space-8);
  color: var(--lfe-ivory-muted);
  font-size: var(--lfe-fs-sm);
  text-align: center;
}

/* =========================================================================
   38. SECTION RICH (lfe/section-rich) — padding variants
   ========================================================================= */

.lfe-section-rich--padding-default {
  padding-block: var(--lfe-section-py, clamp(4rem, 8vw, 8rem));
}

.lfe-section-rich--padding-large {
  padding-block: clamp(6rem, 12vw, 12rem);
}

.lfe-section-rich--padding-small {
  padding-block: clamp(2rem, 4vw, 4rem);
}

/* =========================================================================
   39. SHOW CARD RIBBON (lfe_categoria_show)
   ========================================================================= */

.lfe-card__media-wrapper {
  position: relative;
  overflow: hidden;
}

.lfe-card__ribbon {
  position: absolute;
  top: var(--lfe-space-3);
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  font-size: var(--lfe-fs-xs, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lfe-black, #0a0a0a);
  background-color: var(--lfe-gold, #c8a55b);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%);
  pointer-events: none;
  user-select: none;
}

.lfe-card__ribbon--navidad {
  background-color: var(--lfe-crimson, #8b1a1a);
  color: var(--lfe-ivory, #f5f0e8);
}

.lfe-card__ribbon--eventos {
  background-color: var(--lfe-ivory, #f5f0e8);
  color: var(--lfe-black, #0a0a0a);
}

/* =========================================================================
   40. FORMULARIO NATIVO DE CONTACTO
   ========================================================================= */

.lfe-form {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-5);
}

.lfe-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-2);
}

.lfe-form__label {
  font-size: var(--lfe-fs-sm);
  font-weight: 500;
  color: var(--lfe-ivory, #f5f0e8);
  letter-spacing: 0.02em;
}

.lfe-form__required {
  color: var(--lfe-gold, #c8a55b);
  margin-left: 0.25rem;
}

.lfe-form__input,
.lfe-form__select,
.lfe-form__textarea {
  appearance: none;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--lfe-fs-base);
  font-family: inherit;
  color: var(--lfe-ivory, #f5f0e8);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 165, 91, 0.3);
  border-radius: var(--lfe-radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.5;
}

.lfe-form__input::placeholder,
.lfe-form__textarea::placeholder {
  color: rgba(245, 240, 232, 0.4);
}

/* Eliminar outline en :focus sin teclado */
.lfe-form__input:focus:not(:focus-visible),
.lfe-form__select:focus:not(:focus-visible),
.lfe-form__textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Focus visible accesible WCAG 2.2 AA — ALTO-1 */
.lfe-form__input:focus-visible,
.lfe-form__select:focus-visible,
.lfe-form__textarea:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
  border-color: var(--lfe-gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 91, 0.25);
}

.lfe-form__select option {
  background-color: var(--lfe-black, #0a0a0a);
  color: var(--lfe-ivory, #f5f0e8);
}

.lfe-form__textarea {
  resize: vertical;
  min-height: 140px;
}

.lfe-form__row--checkbox {
  flex-direction: row;
  align-items: flex-start;
}

.lfe-form__checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--lfe-space-3);
}

.lfe-form__checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  accent-color: var(--lfe-gold, #c8a55b);
  cursor: pointer;
}

.lfe-form__checkbox-label {
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted, rgba(245, 240, 232, 0.7));
  cursor: pointer;
}

.lfe-form__checkbox-label a {
  color: var(--lfe-gold, #c8a55b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfe-form__row--submit {
  margin-top: var(--lfe-space-3);
}

.lfe-form__submit {
  cursor: pointer;
  border: none;
}

/* === Form wizard (pasos) ================================================= */
/* Cada paso es una columna de campos. Sin JS (sin .is-stepped) se ven todos
   apilados = formulario normal. Con JS solo el paso activo se muestra. */
.lfe-form__step {
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-5);
}
.lfe-form.is-stepped .lfe-form__step { display: none; }
.lfe-form.is-stepped .lfe-form__step.is-active {
  display: flex;
  animation: lfe-step-in 360ms var(--lfe-ease-out, ease);
}
@keyframes lfe-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lfe-form.is-stepped .lfe-form__step.is-active { animation: none; }
}

/* Barra de progreso */
.lfe-form__progress { display: flex; flex-direction: column; gap: 0.5rem; }
.lfe-form__progress[hidden] { display: none; }
.lfe-form__progress-label {
  font-family: var(--lfe-font-eyebrow, 'General Sans'), sans-serif;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--lfe-gold, #c8a55b);
}
.lfe-form__progress-track {
  display: block; height: 4px; border-radius: 99px;
  background: rgba(200, 165, 91, 0.18); overflow: hidden;
}
.lfe-form__progress-bar {
  display: block; height: 100%; width: 33%;
  background: linear-gradient(90deg, var(--lfe-gold, #c8a55b), var(--lfe-gold-bright, #E6C988));
  border-radius: 99px;
  transition: width 360ms var(--lfe-ease-out, ease);
}

/* Barra de navegación del wizard */
.lfe-form__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lfe-form__nav .lfe-form__prev { margin-right: auto; }
.lfe-form__nav .lfe-btn[hidden] { display: none; }
@media (max-width: 480px) {
  .lfe-form__nav { flex-wrap: wrap; }
  .lfe-form__nav .lfe-btn { flex: 1 1 auto; }
  .lfe-form__nav .lfe-form__prev { margin-right: 0; }
}

.lfe-form__rgpd-notice {
  margin-top: var(--lfe-space-4);
  padding-top: var(--lfe-space-4);
  border-top: 1px solid rgba(200, 165, 91, 0.15);
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted, rgba(245, 240, 232, 0.55));
  line-height: 1.6;
}

.lfe-form__rgpd-notice a {
  color: var(--lfe-ivory-muted, rgba(245, 240, 232, 0.7));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mensajes de estado del formulario */
.lfe-form-message {
  padding: var(--lfe-space-5);
  border-radius: var(--lfe-radius-md);
  margin-bottom: var(--lfe-space-6);
}

.lfe-form-message--success {
  background-color: rgba(74, 163, 84, 0.12);
  border: 1px solid rgba(74, 163, 84, 0.4);
  color: #a3e6aa;
}

.lfe-form-message--error {
  background-color: rgba(200, 50, 50, 0.1);
  border: 1px solid rgba(200, 50, 50, 0.35);
  color: #f5a0a0;
}

.lfe-form-message__text {
  margin: 0;
  font-size: var(--lfe-fs-sm);
  line-height: 1.6;
}

/* =========================================================================
   41. PAGINA DE CONTACTO — LAYOUT
   ========================================================================= */

.lfe-contacto-header {
  text-align: center;
}

.lfe-contacto-header__sub {
  max-width: 56ch;
  margin-inline: auto;
  margin-top: var(--lfe-space-4);
}

.lfe-contacto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lfe-space-10);
}

@media (min-width: 900px) {
  .lfe-contacto-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* En la página de contacto el form ya vive dentro de una section: anula el
   padding-block de section + el fondo negro del wrapper-bloque (creaba una caja
   negra con 96px vacíos arriba y el form pegado a los lados) y lo convierte en
   una card equilibrada, igual que el sidebar. */
.lfe-contacto-form-col .lfe-contact-form-wrapper {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 165, 91, 0.2);
  border-radius: 8px;
}

/* Sidebar de contacto */
.lfe-contacto-sidebar__inner {
  position: sticky;
  top: 2rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 165, 91, 0.2);
  border-radius: 8px;
  /* v13.2: padding explícito — var(--lfe-space-7) no estaba definida y daba 0px. */
  padding: 1.75rem 1.5rem;
}

.lfe-contacto-sidebar__title {
  margin: 0 0 1.5rem;
  color: var(--lfe-ivory, #f5f0e8);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.lfe-contacto-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lfe-contacto-sidebar__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lfe-space-3);
}

.lfe-contacto-sidebar__icon {
  flex-shrink: 0;
  color: var(--lfe-gold, #c8a55b);
  margin-top: 0.125rem;
}

.lfe-contacto-sidebar__label {
  display: block;
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lfe-gold, #c8a55b);
  margin-bottom: 0.2rem;
}

.lfe-contacto-sidebar__value {
  display: block;
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory, #f5f0e8);
  text-decoration: none;
  line-height: 1.5;
}

.lfe-contacto-sidebar__value--placeholder {
  color: var(--lfe-ivory-muted, rgba(245, 240, 232, 0.45));
  font-style: italic;
}

.lfe-contacto-sidebar__value--address {
  font-style: normal;
}

.lfe-contacto-sidebar__value:is(a):hover {
  color: var(--lfe-gold, #c8a55b);
  text-decoration: underline;
}

/* Redes sociales en sidebar de contacto */
.lfe-contacto-sidebar__social {
  border-top: 1px solid rgba(200, 165, 91, 0.15);
  padding-top: 1.25rem;
}

.lfe-contacto-sidebar__social-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lfe-gold, #c8a55b);
  margin-bottom: 0.75rem;
}

/* Iconos de RRSS en fila (antes apilaban en columna) */
.lfe-contacto-sidebar__social .lfe-social-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* =========================================================================
   42. VIDEO FACADE (trailer en ficha de espectaculo)
   ========================================================================= */

.lfe-video-facade {
  position: relative;
  cursor: pointer;
  border-radius: var(--lfe-radius-md);
  overflow: hidden;
  background-color: var(--lfe-black, #0a0a0a);
}

.lfe-video-facade__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.lfe-video-facade:hover .lfe-video-facade__thumbnail {
  transform: scale(1.03);
}

.lfe-video-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.lfe-video-facade__play:hover {
  transform: scale(1.08);
}

.lfe-video-facade__play:focus-visible {
  outline: 3px solid var(--lfe-gold, #c8a55b);
  outline-offset: 4px;
}

.lfe-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================================
   43. ESPECTACULO HERO — entradas note
   ========================================================================= */

.lfe-espectaculo-hero__entradas-note {
  margin-top: var(--lfe-space-2);
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted, rgba(245, 240, 232, 0.55));
  line-height: 1.5;
}

/* =========================================================================
   44. GALERIA DE ESPECTACULO
   ========================================================================= */

.lfe-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--lfe-space-3);
}

.lfe-gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--lfe-radius-sm);
  background-color: rgba(255, 255, 255, 0.04);
  aspect-ratio: 4 / 3;
}

.lfe-gallery-item__link {
  display: block;
  width: 100%;
  height: 100%;
}

.lfe-gallery-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  display: block;
}

.lfe-gallery-item__link:hover .lfe-gallery-item__img {
  transform: scale(1.06);
}

.lfe-gallery-item__link:focus-visible {
  outline: 3px solid var(--lfe-gold, #c8a55b);
  outline-offset: 2px;
}

/* =========================================================================
   45. ARCHIVE FILTERS — segunda fila (categorias)
   ========================================================================= */

.lfe-archive-filters--secondary {
  margin-top: var(--lfe-space-3);
}

.lfe-pill--sm {
  font-size: var(--lfe-fs-xs);
  padding: 0.3rem 0.85rem;
}

/* =========================================================================
   46. BTN FULL WIDTH
   ========================================================================= */

.lfe-btn--full {
  width: 100%;
  justify-content: center;
}

/* =========================================================================
   47. SIDEBAR CTA text size
   ========================================================================= */

.lfe-espectaculo-sidebar__cta-text {
  font-size: var(--lfe-fs-sm);
  margin-bottom: var(--lfe-space-3);
}

/* =========================================================================
   48. PAGINAS LEGALES
   ========================================================================= */

.lfe-main--legal {
  min-height: 70vh;
}

/* Container narrow para lectura (max 720px) */
.lfe-container--narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--lfe-space-4);
  padding-right: var(--lfe-space-4);
}

/* Header de pagina legal */
.lfe-legal-page__header {
  padding-top: var(--lfe-space-8, 4rem);
  padding-bottom: var(--lfe-space-6, 3rem);
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
  margin-bottom: var(--lfe-space-6, 3rem);
}

.lfe-legal-page__title {
  margin-top: var(--lfe-space-2, 0.5rem);
  margin-bottom: var(--lfe-space-3, 1rem);
}

.lfe-legal-page__intro {
  font-size: var(--lfe-fs-base, 1rem);
  line-height: 1.75;
  color: var(--lfe-gray-400, #b0aaa0);
  margin: 0;
}

/* Cuerpo de pagina legal: tipografia generosa */
.lfe-legal-page__body.lfe-prose {
  font-size: var(--lfe-fs-base, 1rem);
  line-height: 1.8;
  color: var(--lfe-gray-200, #d0ccc8);
}

.lfe-legal-page__body.lfe-prose h2 {
  font-size: var(--lfe-fs-xl, 1.25rem);
  font-weight: 600;
  color: var(--lfe-white, #ffffff);
  margin-top: var(--lfe-space-7, 3.5rem);
  margin-bottom: var(--lfe-space-3, 1rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.lfe-legal-page__body.lfe-prose h3 {
  font-size: var(--lfe-fs-lg, 1.125rem);
  font-weight: 600;
  color: var(--lfe-white, #ffffff);
  margin-top: var(--lfe-space-5, 2rem);
  margin-bottom: var(--lfe-space-2, 0.5rem);
}

.lfe-legal-page__body.lfe-prose p {
  margin-bottom: var(--lfe-space-4, 1.5rem);
}

.lfe-legal-page__body.lfe-prose ul,
.lfe-legal-page__body.lfe-prose ol {
  margin-bottom: var(--lfe-space-4, 1.5rem);
  padding-left: 1.5rem;
}

.lfe-legal-page__body.lfe-prose li {
  margin-bottom: var(--lfe-space-2, 0.5rem);
}

.lfe-legal-page__body.lfe-prose a {
  color: var(--lfe-gold, #c9a84c);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfe-legal-page__body.lfe-prose a:hover {
  text-decoration: none;
}

.lfe-legal-page__body.lfe-prose a:focus-visible {
  outline: 2px solid var(--lfe-gold, #c9a84c);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Placeholder [TODO] visible */
.lfe-legal-todo {
  color: #ff8c42;
  font-style: italic;
}

/* Aviso de bloque TODO */
.lfe-legal-todo-notice {
  background-color: rgba(255, 140, 66, 0.12);
  border-left: 4px solid #ff8c42;
  border-radius: 0 4px 4px 0;
  padding: var(--lfe-space-3, 1rem) var(--lfe-space-4, 1.5rem);
  margin: var(--lfe-space-4, 1.5rem) 0;
  color: #ffb380;
  font-size: 0.875rem;
  line-height: 1.6;
}

.lfe-legal-todo-notice p {
  margin: 0;
}

/* Footer de pagina legal */
.lfe-legal-page__footer {
  margin-top: var(--lfe-space-8, 4rem);
  padding-top: var(--lfe-space-4, 1.5rem);
  border-top: 1px solid rgba(201, 168, 76, 0.15);
}

.lfe-legal-page__updated {
  font-size: var(--lfe-fs-sm, 0.875rem);
  color: var(--lfe-gray-600, #808080);
  margin: 0;
}

/* Ocultar avisos TODO en produccion para los visitantes normales:
   Los WP admins los ven siempre, el resto solo en !production.
   Comentar la siguiente regla para que sean visibles a todos (recomendado antes del release). */
/* body:not(.logged-in) .lfe-legal-todo-notice { display: none; } */

/* =========================================================================
   PREMIUM MOTION LAYER (motion-premium.js)
   Cursor magnetico, scroll progress, curtain loader, B2B counters,
   hero gradient halo y refined buttons.
   ========================================================================= */

/* --- 1. Magnetic cursor ------------------------------------------------- */

@media ( hover: hover ) and ( pointer: fine ) {
  body {
    /* No ocultamos el cursor del sistema (a11y). El halo se superpone. */
  }
}

.lfe-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(200, 165, 91, 0.95) 0%,
    rgba(200, 165, 91, 0.4) 60%,
    rgba(200, 165, 91, 0) 100%
  );
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity 220ms ease;
  will-change: transform;
}

.lfe-cursor.is-hidden { opacity: 0; }
.lfe-cursor.is-snapped { background: radial-gradient(circle, rgba(245, 239, 225, 0.85) 0%, rgba(245, 239, 225, 0.25) 70%, transparent 100%); }

@media ( hover: none ),
       ( pointer: coarse ),
       ( prefers-reduced-motion: reduce ) {
  .lfe-cursor { display: none; }
}

/* --- 2. Scroll progress bar dorada ------------------------------------- */

.lfe-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--lfe-gold, #C8A55B) 0%,
    var(--lfe-gold-bright, #E6C988) 50%,
    var(--lfe-gold, #C8A55B) 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9996;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(200, 165, 91, 0.45);
}

@media ( prefers-reduced-motion: reduce ) {
  .lfe-scroll-progress { display: none; }
}

/* --- 3. Curtain loader (primera visita) -------------------------------- */

.lfe-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse at center,
      rgba(245, 239, 225, 1) 0%,
      rgba(232, 220, 196, 1) 70%,
      rgba(218, 203, 173, 1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lfe-font-display, 'Italiana'), serif;
}

.lfe-curtain__inner {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-style: italic;
  color: var(--lfe-black, #0a0a0a);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(20px);
}

.lfe-curtain__sep {
  color: var(--lfe-crimson, #7a0e1f);
  font-size: 0.65em;
  position: relative;
  top: -0.1em;
}

html.lfe-curtain-active { overflow: hidden; }

@media ( prefers-reduced-motion: reduce ) {
  .lfe-curtain { display: none; }
}

/* --- 4. Hero halo dorado (rompe el negro monolitico) ------------------- */

.lfe-hero,
.lfe-hero-cinematic,
.wp-block-cover.lfe-hero {
  position: relative;
  isolation: isolate;
}

.lfe-hero::before,
.lfe-hero-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 50% at 50% 35%,
      rgba(200, 165, 91, 0.18) 0%,
      rgba(200, 165, 91, 0.08) 35%,
      transparent 70%
    );
}

/* --- 5. Section ivory (respiro luminoso entre bloques) ------------------ */

.lfe-section--ivory {
  background-color: var(--lfe-ivory, #f5efe1);
  color: var(--lfe-black, #0a0a0a);
}

.lfe-section--ivory .lfe-eyebrow {
  color: var(--lfe-crimson-deep, #5a0f1a);
}

.lfe-section--ivory h2,
.lfe-section--ivory h3 {
  color: var(--lfe-black, #0a0a0a);
}

/* --- 6. Botones refinados (capas + idle pulse en primary) -------------- */

.lfe-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lfe-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center,
      rgba(200, 165, 91, 0.6) 0%,
      rgba(200, 165, 91, 0) 70%);
  opacity: 0;
  transition: opacity 600ms ease;
}

.lfe-btn--primary:hover::before,
.lfe-btn--primary:focus-visible::before { opacity: 1; }

@keyframes lfe-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 165, 91, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(200, 165, 91, 0.18); }
}

@media ( prefers-reduced-motion: no-preference ) {
  .lfe-hero-cinematic .lfe-btn--primary,
  .lfe-hero .lfe-btn--primary {
    animation: lfe-pulse-gold 3.6s ease-in-out infinite;
  }
  .lfe-hero-cinematic .lfe-btn--primary:hover,
  .lfe-hero .lfe-btn--primary:hover {
    animation: none;
  }
}

/* --- 7. B2B counters section ------------------------------------------- */

.lfe-cifras {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.lfe-cifras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 1100px;
  margin-inline: auto;
}

.lfe-cifras__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.lfe-cifras__number {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--lfe-gold, #C8A55B);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.lfe-cifras__label {
  font-size: var(--lfe-fs-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--lfe-ivory-muted, #c9c0ae);
}

.lfe-section--ivory .lfe-cifras__number { color: var(--lfe-crimson-deep, #5a0f1a); }
.lfe-section--ivory .lfe-cifras__label  { color: var(--lfe-black, #0a0a0a); }

/* =========================================================================
   PREMIUM v2 — HERO FULL-BLEED, GRAIN TEXTURE, 3D TILT, SVG ORNAMENTS
   ========================================================================= */

/* --- 1. Hero full-bleed cinematico ------------------------------------- */

.lfe-page-content__body--bleed {
  display: flex;
  flex-direction: column;
}

/* =========================================================================
   HERO v8 — Vídeo cinematográfico fullscreen
   Vídeo loop muted como backdrop con veil radial + bloom dorado superior.
   Mantiene el copy a la izquierda con buen contraste sobre el vídeo.
   ========================================================================= */

.lfe-hero--editorial,
.lfe-hero--cosmos {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--lfe-black, #0a0a0a);
  margin-top: calc(-1 * var(--lfe-header-h, 88px));
}

/* Hero v8 con video: altura fija al viewport, content centrado en el espacio
   disponible. NO usar min-height — si el contenido es muy alto, queda más
   compacto, no fuerza scroll del usuario. */
.lfe-hero--video {
  position: relative;
  width: 100%;
  height: 100svh; /* small viewport height — respeta toolbars móviles */
  max-height: 100vh;
  min-height: 540px; /* suelo absoluto para que en muy bajas resoluciones no se rompa */
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--lfe-black, #0a0a0a);
  margin-top: calc(-1 * var(--lfe-header-h, 88px));
}

.lfe-hero__video-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.lfe-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%; /* prioriza el tercio superior — actores en escena */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Póster de fondo; el vídeo solo se muestra si la persona pulsa ▶
     (main.js añade .is-user-playing). */
  .lfe-hero__video:not(.is-user-playing) { display: none; }
  .lfe-hero__video-stage {
    background-image: var(--hero-poster-fallback, none);
    background-size: cover;
    background-position: center 35%;
  }
}

/* Veil principal: oscurece izquierda + base para legibilidad del copy + CTAs. */
.lfe-hero__video-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Anclaje izquierdo: oscuro tras el copy. */
    linear-gradient(95deg,
      rgba(10, 18, 53, 0.85) 0%,
      rgba(10, 18, 53, 0.60) 35%,
      rgba(10, 18, 53, 0.15) 60%,
      rgba(10, 18, 53, 0.50) 100%),
    /* Viñeta vertical para suavizar bordes inferior y superior. */
    linear-gradient(180deg,
      rgba(10, 18, 53, 0.55) 0%,
      rgba(10, 18, 53, 0)    35%,
      rgba(10, 18, 53, 0)    70%,
      rgba(10, 18, 53, 0.65) 100%);
  pointer-events: none;
}

/* Bloom dorado superior + magenta inferior-izquierdo, mix-blend screen. */
.lfe-hero__video-bloom {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 1200px 480px at 50% -8%,
      rgba(242, 179, 61, 0.28) 0%, transparent 65%),
    radial-gradient(circle 700px at 12% 95%,
      rgba(184, 58, 120, 0.30) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.lfe-hero__inner--video {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra el H1 en el espacio del hero */
  width: 100%;
  max-width: var(--lfe-wide-width, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  padding-block: clamp(2rem, 5vh, 4rem);
}

/* Content simplificado: H1 + CTA en flujo natural, gap controlado, centrado
   vertical en el inner. El bloque entero se centra (no solo H1) para que
   el CTA no flote suelto ni colisione con el H1 cuando el rotador es largo. */
.lfe-hero--video .lfe-hero__content--simplified {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vh, 2.25rem);
  max-width: min(900px, 100%);
}

/* H1 más controlado: max 4rem para que el bloque sea manejable. El rotador
   va siempre en su propia línea (grid stack), así el ancho del título no
   depende de cuál palabra esté activa. */
.lfe-hero--video .lfe-hero__title {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
}

/* Línea propia del rotador — display:block fuerza salto de línea. */
.lfe-hero__title-line--rotator {
  display: block;
  /* «acontecimiento.» mide ~10,4em: en móvil se recortaba por la derecha
     (320-414px). Nunca más grande de lo que cabe en el ancho útil. */
  font-size: min(1em, calc((100vw - 2 * var(--lfe-section-px, 1.25rem)) / 10.6));
}

.lfe-hero--video .lfe-hero__ctas {
  margin: 0;
}

/* Scroll indicator — position:absolute centrado horizontal al fondo. */
.lfe-hero--video .lfe-hero__scroll {
  position: absolute;
  bottom: clamp(1rem, 2.5vh, 1.75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  align-self: auto;
  justify-self: auto;
}

/* Pin «IA» del vídeo (inc/aviso-ia.php + mu-plugin vibe-aviso-ia): esquina
   inferior IZQUIERDA (la derecha la ocupa el botón minimizado de Subsana
   Cookies), a la altura del indicador de scroll y por encima del copy. El
   cartel se abre hacia la derecha. */
.lfe-hero__aipin {
  display: contents;
}

.lfe-hero__aipin .vibe-aipin {
  right: auto;
  left: calc(var(--lfe-section-px, 1.25rem) + 30px); /* a la derecha del botón de pausa */
  bottom: clamp(1rem, 2.5vh, 1.75rem);
  z-index: 5;
}

/* Botón pausa/reproducir del vídeo (WCAG 2.2.2): mismo acabado que el pin «IA»
   (22px de cristal oscuro), área táctil de 44px con ::before. */
.lfe-hero__video-toggle {
  position: absolute;
  left: var(--lfe-section-px, 1.25rem);
  bottom: clamp(1rem, 2.5vh, 1.75rem);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(14, 16, 20, 0.44);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
}

.lfe-hero__video-toggle[hidden] {
  display: none;
}

.lfe-hero__video-toggle::before {
  content: "";
  position: absolute;
  inset: -11px;
}

.lfe-hero__video-toggle:hover {
  opacity: 1;
}

.lfe-hero__video-toggle:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
}

.lfe-hero__video-icon {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.lfe-hero__video-icon--play,
.lfe-hero__video-toggle.is-paused .lfe-hero__video-icon--pause {
  display: none;
}

.lfe-hero__video-toggle.is-paused .lfe-hero__video-icon--play {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .lfe-hero__video-toggle {
    transition: opacity 0.15s ease;
  }
}

.lfe-hero__aipin .vibe-aipin-pop {
  right: auto;
  left: -4px;
}

.lfe-hero__aipin .vibe-aipin-pop::after {
  right: auto;
  left: 11px;
}

.lfe-hero__inner--video .lfe-hero__content {
  max-width: min(680px, 65vw);
}

@media ( max-width: 720px ) {
  .lfe-hero__inner--video .lfe-hero__content {
    max-width: 100%;
  }
}

/* Móvil y tablet: la altura fija de 100svh recortaba el contenido en pantallas
   bajas (a 320×568 el CTA quedaba fuera) y «Continúa» se montaba sobre el CTA
   (360×640, 375×667). Ahora el hero mide como mínimo la pantalla y crece si no
   cabe; el copy reserva arriba la cabecera y abajo el indicador de scroll. */
@media ( max-width: 1023px ) {
  .lfe-hero--video {
    height: auto;
    max-height: none;
    min-height: max(540px, 100svh);
  }
  .lfe-hero__inner--video {
    padding-top: calc(var(--lfe-header-h, 88px) + 1.5rem);
    padding-bottom: 6.5rem;
  }
  /* El hero con vídeo heredaba el relleno del hero antiguo (en móvil,
     cabecera + 16rem «para el póster»), que empujaba título y CTA hacia abajo.
     Aquí el espacio ya lo reserva .lfe-hero__inner--video. */
  .lfe-hero--video .lfe-hero__content {
    padding: 0;
  }
  /* El vídeo vertical (hero-lfe-movil.mp4) empieza bajo la cabecera (107px en
     móvil): si no, la cabecera tapaba la parte alta del cuadro (cabezas de los
     osos, sombrero del payaso). */
  .lfe-hero__video-stage {
    top: 107px;
  }
  .lfe-hero--video .lfe-hero__scroll {
    gap: 0.5rem;
    padding-block: 0.75rem;
  }
  .lfe-hero--video .lfe-hero__scroll-line {
    height: 32px;
  }
}

.lfe-hero__title-line { display: block; }

.lfe-hero__title-dot {
  display: inline;
  color: var(--lfe-gold-bright, #F2B33D);
  text-shadow: 0 0 12px rgba(242, 179, 61, 0.6);
}

/* ============== LEGACY EDITORIAL (mantenido para compat con otros sitios) === */

.lfe-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lfe-hero__backdrop picture,
.lfe-hero__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
  filter: brightness(0.5) saturate(0.85);
}

.lfe-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(11, 10, 9, 0.92) 0%,
      rgba(11, 10, 9, 0.78) 30%,
      rgba(11, 10, 9, 0.35) 60%,
      rgba(11, 10, 9, 0.55) 100%),
    linear-gradient(180deg,
      rgba(11, 10, 9, 0.4) 0%,
      rgba(11, 10, 9, 0)   45%,
      rgba(11, 10, 9, 0.7) 100%);
  pointer-events: none;
}

/* Cartel HD del espectaculo (Galtuk) anclado a la derecha como afiche.
   Es la pieza protagonista visual de la portada. */

.lfe-hero__poster {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(2rem, 6vw, 6rem);
  transform: translateY(-50%) rotate(-1.5deg);
  width: clamp(220px, 28vw, 380px);
  aspect-ratio: 436 / 609;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(200, 165, 91, 0.35);
  border-radius: 2px;
  overflow: hidden;
  pointer-events: none;
}

.lfe-hero__poster picture,
.lfe-hero__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

@keyframes lfe-poster-sway {
  0%, 100% { transform: translateY(-50%) rotate(-1.5deg); }
  50%      { transform: translateY(calc(-50% - 4px)) rotate(-0.6deg); }
}

@media ( prefers-reduced-motion: no-preference ) and ( min-width: 768px ) {
  .lfe-hero__poster {
    animation: lfe-poster-sway 10s ease-in-out infinite;
  }
}

@media ( max-width: 720px ) {
  /* En mobile, el poster se centra arriba y el copy ocupa todo abajo. */
  .lfe-hero__poster {
    top: calc(var(--lfe-header-h, 88px) + 1rem);
    right: 50%;
    transform: translateX(50%) rotate(-1.5deg);
    width: 180px;
  }
}

.lfe-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lfe-space-5, 1.25rem);
  padding-block: clamp(8rem, 14vh, 12rem) clamp(6rem, 12vh, 10rem);
  padding-inline: clamp(1.25rem, 6vw, 6rem);
  max-width: min(680px, 65vw);
}

@media ( max-width: 720px ) {
  .lfe-hero__content {
    max-width: 100%;
    padding-top: calc(var(--lfe-header-h, 88px) + 16rem); /* deja sitio al poster en mobile */
  }
}

.lfe-hero__eyebrow {
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-hero__title {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--lfe-ivory, #F5EFE1);
  text-wrap: balance;
  margin: 0;
  /* Pasada 1: text-shadow eliminado. La italiana ya tiene presencia, el veil lateral
     basta para legibilidad. Si una foto rompe contraste, intensificar veil. */
}

.lfe-hero__lead {
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--lfe-ivory-muted, #C9C0AE);
  max-width: 540px;
  margin: 0;
}

.lfe-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.lfe-btn__arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 240ms var(--lfe-ease-out, ease-out);
}

.lfe-btn:hover .lfe-btn__arrow,
.lfe-btn:focus-visible .lfe-btn__arrow {
  transform: translateX(4px);
}

/* Scroll indicator en la base del hero */
.lfe-hero__scroll {
  position: relative;
  z-index: 3;
  align-self: end;
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1.5rem;
  color: var(--lfe-ivory-muted, #C9C0AE);
  text-decoration: none;
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
}

.lfe-hero__scroll:hover,
.lfe-hero__scroll:focus-visible {
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-hero__scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg,
    rgba(200, 165, 91, 0.7) 0%,
    rgba(200, 165, 91, 0) 100%);
  position: relative;
  overflow: hidden;
}

.lfe-hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: var(--lfe-gold-bright, #E6C988);
  border-radius: 2px;
}

@keyframes lfe-scroll-bob {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(330%); opacity: 0; }
}

@media ( prefers-reduced-motion: no-preference ) {
  .lfe-hero__scroll-line::after {
    animation: lfe-scroll-bob 2.4s ease-in-out infinite;
  }
}

/* --- 2. Grain texture overlay (paper feel premium) --------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay;
  /* Pasada 1: bajado de 0.12 a 0.06 (sobre ivory saturaba el grano). */
  opacity: 0.06;
}

@media ( prefers-reduced-motion: reduce ) {
  body::before { opacity: 0.03; }
}

/* --- 3. Card 3D tilt (gyro mouse follow via JS variables) -------------- */

.lfe-show-card {
  transition:
    transform 400ms var(--lfe-ease-out, ease-out),
    box-shadow 400ms var(--lfe-ease-out, ease-out);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.lfe-show-card.is-tilting {
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-6px);
  transition: transform 120ms ease-out, box-shadow 400ms ease-out;
}

.lfe-show-card__media {
  transform: translateZ(0);
}

/* Reflejo sutil de luz cuando se mueve el cursor por encima */
.lfe-show-card.is-tilting::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0) 35%
  );
  mix-blend-mode: overlay;
}

@media ( prefers-reduced-motion: reduce ),
       ( hover: none ),
       ( pointer: coarse ) {
  .lfe-show-card.is-tilting {
    transform: translateY(-4px);
  }
  .lfe-show-card.is-tilting::before { display: none; }
}

/* --- 4. SVG ornament separator (gold flourish) ------------------------- */

.lfe-ornament {
  display: block;
  margin: clamp(3rem, 7vw, 5rem) auto;
  width: clamp(140px, 30vw, 240px);
  height: auto;
  color: var(--lfe-gold, #C8A55B);
  opacity: 0.85;
}

.lfe-ornament path,
.lfe-ornament line,
.lfe-ornament circle {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s var(--lfe-ease-stage, cubic-bezier(0.16, 1, 0.3, 1));
}

.lfe-ornament.is-visible path,
.lfe-ornament.is-visible line,
.lfe-ornament.is-visible circle {
  stroke-dashoffset: 0;
}

.lfe-ornament__center {
  fill: var(--lfe-gold, #C8A55B);
  stroke: none;
  stroke-dasharray: 0;
}

/* --- 5. Press marquee dorado ------------------------------------------- */

.lfe-press-marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid rgba(200, 165, 91, 0.18);
  background: var(--lfe-black-soft, #14110d);
}

.lfe-press-marquee::before,
.lfe-press-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12vw;
  z-index: 2;
  pointer-events: none;
}

.lfe-press-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--lfe-black-soft, #14110d) 0%, transparent 100%);
}

.lfe-press-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--lfe-black-soft, #14110d) 0%, transparent 100%);
}

.lfe-press-marquee__track {
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
  width: max-content;
  animation: lfe-marquee-x 42s linear infinite;
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-style: italic;
  color: var(--lfe-gold, #C8A55B);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lfe-press-marquee__item {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  transition: color 240ms ease;
}

.lfe-press-marquee:hover .lfe-press-marquee__item:hover {
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-press-marquee__quote {
  font-style: italic;
}

.lfe-press-marquee__quote::before { content: "\201C"; opacity: 0.55; margin-right: 0.05em; }
.lfe-press-marquee__quote::after  { content: "\201D"; opacity: 0.55; margin-left: 0.05em; }

.lfe-press-marquee__source {
  font-family: var(--lfe-font-body, 'Inter'), sans-serif;
  font-style: normal;
  font-size: 0.42em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-ivory-muted, #C9C0AE);
  opacity: 0.8;
}

.lfe-press-marquee__item::after {
  content: "\2022";
  color: var(--lfe-gold-bright, #E6C988);
  opacity: 0.6;
  font-size: 0.7em;
  margin-left: 1.5rem;
  font-style: normal;
}

.lfe-press-marquee:hover .lfe-press-marquee__track,
.lfe-press-marquee:focus-within .lfe-press-marquee__track {
  animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
  .lfe-press-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* =========================================================================
   PREMIUM v3 — TRUST STRIP, FEATURED CARD, TEAM CREDITS, COLLABORATORS
   ========================================================================= */

/* --- Trust strip dorado bajo hero -------------------------------------- */

.lfe-trust-strip {
  background-color: var(--lfe-black-soft, #14110d);
  border-block: 1px solid rgba(200, 165, 91, 0.22);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  z-index: 5;
}

.lfe-trust-strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
}

@media ( max-width: 760px ) {
  .lfe-trust-strip__inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 2rem;
  }
}

.lfe-trust-strip__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
}

.lfe-trust-strip__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(0.5rem, 1.5vw, 1.5rem));
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(200, 165, 91, 0) 0%,
    rgba(200, 165, 91, 0.5) 50%,
    rgba(200, 165, 91, 0) 100%);
}

@media ( max-width: 760px ) {
  .lfe-trust-strip__item::after { display: none; }
}

.lfe-trust-strip__num {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1;
  color: var(--lfe-gold-bright, #E6C988);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lfe-trust-strip__num--small {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-style: italic;
}

.lfe-trust-strip__label {
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-ivory-muted, #C9C0AE);
}

/* --- Featured card 2x2 en show grid ------------------------------------ */

.lfe-shows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-flow: dense;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.lfe-show-card--featured {
  grid-column: span 2;
  grid-row: span 2;
}

.lfe-show-card--featured .lfe-show-card__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

.lfe-show-card--featured .lfe-show-card__desc {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

@media ( max-width: 720px ) {
  .lfe-show-card--featured {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* --- Team credits — programa de mano -------------------------------------- */

.lfe-team-credits-section {
  padding-block: clamp(4rem, 9vw, 8rem);
}

.lfe-team-credits__header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.lfe-team-credits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lfe-team-credits__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgba(200, 165, 91, 0.18);
}

.lfe-team-credits__row:first-child {
  border-top: 1px solid rgba(200, 165, 91, 0.18);
}

.lfe-team-credits__row:hover {
  background: linear-gradient(90deg,
    rgba(200, 165, 91, 0.05) 0%,
    transparent 100%);
}

.lfe-team-credits__name {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--lfe-ivory, #F5EFE1);
  font-style: italic;
}

.lfe-team-credits__role {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  color: var(--lfe-ivory-muted, #C9C0AE);
  letter-spacing: 0.02em;
  text-align: right;
}

/* --- Equipo v18: rejilla uniforme de retratos (placeholder de logo) ------- */

.lfe-team-people-section {
  padding-block: clamp(4rem, 9vw, 8rem);
}
.lfe-team-people__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lfe-team-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.2rem) clamp(1.2rem, 2vw, 1.6rem);
}

.lfe-team-person {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 29, 74, 0.18), rgba(10, 15, 46, 0.40));
  border: 1px solid rgba(200, 165, 91, 0.22);
  box-shadow:
    0 18px 40px -22px rgba(0, 0, 0, 0.9),
    0 0 30px -10px rgba(242, 179, 61, 0.12);
  transition: transform 0.45s var(--lfe-ease-out, cubic-bezier(.2,.7,.2,1)), box-shadow 0.45s;
}
.lfe-team-person:hover,
.lfe-team-person:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px -26px rgba(0, 0, 0, 0.95),
    0 0 40px -8px rgba(242, 179, 61, 0.30);
}

.lfe-team-person__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0a0f2e;
}
.lfe-team-person__photo picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder de logo (hasta recibir la foto) */
.lfe-team-person__photo.is-placeholder {
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(242, 179, 61, 0.07), transparent 60%),
    linear-gradient(160deg, #182253, #0a0f2e);
}
.lfe-team-person__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 12px;
  border: 1px dashed rgba(242, 179, 61, 0.28);
  border-radius: 6px;
}
.lfe-team-person__logo {
  width: 78%;
  max-width: 200px;
  height: auto;
  opacity: 0.5;
}
.lfe-team-person__pending {
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 232, 214, 0.45);
}

.lfe-team-person__body {
  padding: 0.95rem 1rem 1.2rem;
  text-align: center;
}
.lfe-team-person__name {
  font-family: var(--lfe-font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.15;
  margin: 0 0 0.3rem;
  color: var(--lfe-ivory, #F5EFE1);
}
.lfe-team-person__role {
  font-family: var(--lfe-font-body);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #c8a55b;
  margin: 0;
}

@media ( max-width: 640px ) {
  .lfe-team-credits__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .lfe-team-credits__role {
    text-align: left;
  }
}

/* --- Collaborators internacionales ------------------------------------ */

.lfe-collab-section {
  padding-block: clamp(4rem, 9vw, 8rem);
}

.lfe-collab__header {
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 4rem);
  max-width: 720px;
  margin-inline: auto;
}

.lfe-collab__header .lfe-lead {
  color: rgba(11, 10, 9, 0.7);
  margin-top: 1rem;
}

.lfe-collab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.lfe-collab__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: rgba(11, 10, 9, 0.04);
  border: 1px solid rgba(11, 10, 9, 0.1);
  border-radius: 4px;
  transition: transform 320ms var(--lfe-ease-out, ease-out),
              border-color 320ms ease,
              background 320ms ease;
}

.lfe-collab__item:hover {
  transform: translateY(-3px);
  border-color: var(--lfe-crimson-deep, #5a0f1a);
  background: rgba(11, 10, 9, 0.08);
}

.lfe-collab__name {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15;
  color: var(--lfe-black, #0a0a0a);
  font-style: italic;
}

.lfe-collab__origin {
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-crimson-deep, #5a0f1a);
  margin-top: 0.15rem;
}

.lfe-collab__credit {
  font-size: var(--lfe-fs-sm, 0.875rem);
  color: rgba(11, 10, 9, 0.65);
  line-height: 1.45;
  margin-top: 0.5rem;
}

/* --- Hero eyebrow contrast ajuste ------------------------------------- */

.lfe-hero__eyebrow {
  color: var(--lfe-gold-bright, #E6C988);
  letter-spacing: 0.28em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* =========================================================================
   CARTELERA EDITORIAL — header + filters + wall + metadata + stamp + modal
   ========================================================================= */

.lfe-shows-section {
  padding-block: clamp(4rem, 9vw, 8rem);
}

/* --- Header --- */

.lfe-shows-header {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lfe-shows-header__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-style: italic;
  font-weight: 400;
  margin: 1rem 0 1rem;
  color: var(--lfe-ivory, #F5EFE1);
}

.lfe-shows-header__lead {
  color: var(--lfe-ivory-muted, #C9C0AE);
}

/* --- Filter chips --- */

.lfe-shows-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lfe-shows-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.15rem;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(200, 165, 91, 0.35);
  border-radius: 999px;
  color: var(--lfe-ivory-muted, #C9C0AE);
  font-family: inherit;
  font-size: var(--lfe-fs-xs, 0.78rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 240ms ease,
    color 240ms ease,
    border-color 240ms ease,
    transform 240ms ease;
}

.lfe-shows-filters__chip:hover,
.lfe-shows-filters__chip:focus-visible {
  color: var(--lfe-ivory, #F5EFE1);
  border-color: var(--lfe-gold, #C8A55B);
}

.lfe-shows-filters__chip.is-active {
  background: var(--lfe-gold, #C8A55B);
  color: var(--lfe-black, #0a0a0a);
  border-color: var(--lfe-gold, #C8A55B);
}

.lfe-shows-filters__count {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: 1.2em;
  font-style: italic;
  letter-spacing: 0;
}

/* --- Wall v13: grid simetrico 3×2, todas las cards en mismo grid --- */

.lfe-shows-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
  /* v13: ticket lateral + sellos sobresalen — necesitan margen extra */
  padding: 32px 28px;
  overflow: visible;
}

/* v13: aplanar las 3 subdivisiones — todas las cards en el mismo grid 3×2. */
.lfe-shows-wall__hero,
.lfe-shows-wall__portrait,
.lfe-shows-wall__grid {
  display: contents;
}

/* v13: featured (Galtuk) ocupa 2 cols + 2 rows = ancla visual. */
.lfe-show-card--featured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4 / 5;
}

@media ( max-width: 920px ) {
  .lfe-shows-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lfe-show-card--featured {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media ( max-width: 540px ) {
  .lfe-shows-wall {
    grid-template-columns: 1fr;
  }
  .lfe-show-card--featured {
    grid-column: 1;
  }
}

/* Filtrado: las cards excluidas se ocultan. */
.lfe-shows-wall.is-filtering .lfe-show-card[data-state]:not(.is-visible) {
  display: none;
}

.lfe-shows-wall__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding-block: 3rem;
  color: var(--lfe-ivory-muted, #C9C0AE);
  font-style: italic;
}

/* --- Legacy slots vacíos (v13 removió number/discipline/year/stamp) --- */
.lfe-show-card__number,
.lfe-show-card__discipline,
.lfe-show-card__year,
.lfe-show-card__stamp {
  display: none !important;
}

/* Lo-res: indicador visual sutil para producciones sin cartel HD */
.lfe-show-card--lo-res .lfe-show-card__media img {
  filter: contrast(1.18) saturate(0.95) brightness(1.12);
}

/* --- Featured variants v13 --- */

.lfe-show-card--featured .lfe-show-card__title {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-style: italic;
}

.lfe-show-card--featured .lfe-show-card__seal {
  width: 120px;
  height: 120px;
  top: -22px;
  right: -22px;
}

/* --- Modal lightbox (ficha del show) --- */

/* Oculta el header del sitio mientras el modal esta abierto: queda en un
   stacking context superior y taparia el boton de cerrar. */
.lfe-modal-open .lfe-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lfe-show-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  pointer-events: none;
}

.lfe-show-modal[hidden] {
  display: none;
}

.lfe-show-modal.is-open {
  pointer-events: auto;
}

.lfe-show-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 10, 9, 0.88);
  backdrop-filter: blur(8px);
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 280ms ease;
}

.lfe-show-modal.is-open .lfe-show-modal__backdrop { opacity: 1; }

.lfe-show-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  width: min(1100px, 94vw);
  max-width: 94vw;
  /* Altura FIJA: el panel (y la card de datos) no cambia de tamaño según el
     aspecto de la foto activa. La imagen se contiene dentro del escenario. */
  height: min(90vh, 760px);
  background: var(--lfe-black-soft, #14110d);
  border: 1px solid rgba(200, 165, 91, 0.35);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 360ms var(--lfe-ease-out, ease-out),
              transform 360ms var(--lfe-ease-out, ease-out);
}

.lfe-show-modal.is-open .lfe-show-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lfe-show-modal__media {
  background: var(--lfe-black, #0a0a0a);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Escenario principal — foto activa, ocupa el alto disponible. */
.lfe-show-modal__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,165,91,0.08), transparent 60%),
    var(--lfe-black, #0a0a0a);
}

.lfe-show-modal__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: contrast(1.04);
}

/* Flechas prev/next */
.lfe-show-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--lfe-ivory, #F5EFE1);
  background: rgba(11, 10, 9, 0.55);
  border: 1px solid rgba(200, 165, 91, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
  z-index: 3;
}
.lfe-show-modal__nav:hover,
.lfe-show-modal__nav:focus-visible {
  background: var(--lfe-crimson, #7a0e1f);
}
.lfe-show-modal__nav--prev { left: 0.6rem; }
.lfe-show-modal__nav--next { right: 0.6rem; }
.lfe-show-modal__nav[hidden] { display: none; }

/* Contador 1 / 7 */
.lfe-show-modal__counter {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  font-size: var(--lfe-fs-xs, 0.72rem);
  letter-spacing: 0.14em;
  color: var(--lfe-ivory, #F5EFE1);
  background: rgba(11, 10, 9, 0.6);
  border: 1px solid rgba(200, 165, 91, 0.3);
  border-radius: 99px;
  padding: 0.25rem 0.6rem;
}

/* Pie de foto (caption) */
.lfe-show-modal__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1.5rem 1rem 0.7rem;
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.04em;
  color: var(--lfe-ivory, #F5EFE1);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(11, 10, 9, 0.75));
  pointer-events: none;
}

/* Tira de miniaturas */
.lfe-show-modal__thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: var(--lfe-black-soft, #14110d);
  border-top: 1px solid rgba(200, 165, 91, 0.18);
}
.lfe-show-modal__thumbs[hidden] { display: none; }

.lfe-show-modal__thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid rgba(200, 165, 91, 0.25);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.lfe-show-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lfe-show-modal__thumb:hover { opacity: 0.85; }
.lfe-show-modal__thumb.is-active {
  opacity: 1;
  border-color: var(--lfe-gold-bright, #E6C988);
}

.lfe-show-modal__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.lfe-show-modal__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-show-modal__sep {
  opacity: 0.5;
}

.lfe-show-modal__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--lfe-ivory, #F5EFE1);
  margin: 0;
  font-style: italic;
}

.lfe-show-modal__desc {
  font-size: var(--lfe-fs-md, 1.05rem);
  line-height: 1.55;
  color: var(--lfe-ivory-muted, #C9C0AE);
  margin: 0;
}

.lfe-show-modal__facts {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  margin: 0;
  padding-block: 1rem;
  border-block: 1px solid rgba(200, 165, 91, 0.18);
}

.lfe-show-modal__facts > div { margin: 0; }
.lfe-show-modal__facts > div[hidden] { display: none; }

.lfe-show-modal__facts dt {
  font-size: var(--lfe-fs-xs, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lfe-ivory-muted, #C9C0AE);
  opacity: 0.7;
}

.lfe-show-modal__facts dd {
  margin: 0.35rem 0 0;
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-style: italic;
  color: var(--lfe-gold-bright, #E6C988);
  font-size: 1.05rem;
}

.lfe-show-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 10, 9, 0.6);
  color: var(--lfe-ivory, #F5EFE1);
  border: 1px solid rgba(200, 165, 91, 0.4);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.lfe-show-modal__close:hover,
.lfe-show-modal__close:focus-visible {
  background: var(--lfe-crimson, #7a0e1f);
  transform: rotate(90deg);
}

@media ( max-width: 720px ) {
  .lfe-show-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 46vh) minmax(0, 1fr);
    width: 94vw;
    max-height: 90vh;
  }
  .lfe-show-modal__thumb {
    width: 52px;
    height: 52px;
  }
  .lfe-show-modal__facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobile snap-scroll horizontal --- */

@media ( max-width: 720px ) {
  .lfe-shows-wall {
    grid-template-columns: 1fr;
  }
  .lfe-shows-wall__hero,
  .lfe-shows-wall__portrait,
  .lfe-shows-wall__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    gap: 1rem;
    padding: 0 1rem 0.5rem;
    margin-inline: calc(-1 * var(--lfe-section-px, 1.25rem));
    -webkit-overflow-scrolling: touch;
  }
  .lfe-shows-wall__hero .lfe-show-card,
  .lfe-shows-wall__portrait .lfe-show-card,
  .lfe-shows-wall__grid .lfe-show-card {
    flex: 0 0 78vw;
    scroll-snap-align: start;
    aspect-ratio: 3 / 4;
  }
  .lfe-shows-wall__portrait,
  .lfe-shows-wall__grid {
    margin-top: 1rem;
  }
}

/* Honra reduced-motion: sin rotacion ni scale enriching. */
@media ( prefers-reduced-motion: reduce ) {
  .lfe-show-card {
    transform: none !important;
  }
  .lfe-show-card__stamp { opacity: 0.6; }
}

/* =========================================================================
   CATÁLOGO v16 — más compacto y fácil de recorrer
   Carteles algo más pequeños, nombre y lugar siempre visibles (sin depender
   del hover) y, en móvil, carrusel con flechas, contador y progreso.
   ========================================================================= */

.lfe-shows-header {
  max-width: 720px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.lfe-shows-header__title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin: 0.75rem 0;
}

.lfe-shows-header__lead {
  max-width: 56ch;
  margin-inline: auto;
}

@media (min-width: 721px) {
  .lfe-shows-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 940px;
    margin-inline: auto;
    /* Columna mínima 1.75rem: el ticket lateral vive en ese hueco. */
    gap: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.75rem, 2.5vw, 2.25rem);
    padding: 20px 28px 28px;
  }
}

/* Escalonado más suave: con carteles menores 28px se leía como desorden. */
.lfe-shows-wall__grid .lfe-show-card:nth-child(3n)   { --lfe-card-base-y: 14px; }
.lfe-shows-wall__grid .lfe-show-card:nth-child(3n+2) { --lfe-card-base-y: 7px; }

/* Rótulo inferior permanente: título + lugar. */
.lfe-show-card__body {
  opacity: 1;
  transform: none;
  gap: 0.2rem;
  padding: clamp(2rem, 3vw, 2.75rem) 1rem 0.9rem;
  background: linear-gradient(180deg,
    rgba(10, 18, 53, 0) 0%,
    rgba(10, 18, 53, 0.78) 55%,
    rgba(10, 18, 53, 0.95) 100%);
}

.lfe-show-card__title {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
}

.lfe-show-card__places {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stage-gold-bright, #FAD879);
}

/* Ratón: sinopsis y "Ver ficha" se despliegan al pasar por encima. */
@media (hover: hover) and (pointer: fine) {
  .lfe-show-card__desc,
  .lfe-show-card__cta {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 380ms var(--lfe-ease-out, ease-out),
      margin-top 380ms var(--lfe-ease-out, ease-out),
      opacity 280ms ease;
  }
  .lfe-show-card:hover .lfe-show-card__desc,
  .lfe-show-card:focus-within .lfe-show-card__desc {
    max-height: 2.9em;
    margin-top: 0.3rem;
    opacity: 1;
  }
  .lfe-show-card:hover .lfe-show-card__cta,
  .lfe-show-card:focus-within .lfe-show-card__cta {
    max-height: 1.6em;
    margin-top: 0.35rem;
    opacity: 1;
    overflow: visible;
  }
}

/* Táctil: sin sinopsis (está en la ficha); "Ver ficha" visible como pista. */
@media (hover: none), (pointer: coarse) {
  .lfe-show-card__desc { display: none; }
  .lfe-show-card__cta {
    margin-top: 0.3rem;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  .lfe-shows-wall { padding: 0; }

  .lfe-shows-wall__grid {
    gap: 1.1rem;
    /* Aire arriba para el sello y a la izquierda para el ticket lateral. */
    padding: 1.25rem var(--lfe-section-px, 1.25rem) 1.25rem 1.75rem;
    scroll-padding-inline: 1.75rem;
  }
  .lfe-shows-wall__grid .lfe-show-card {
    flex: 0 0 min(64vw, 260px);
  }
  /* Con flechas visibles la barra de scroll sobra (sin JS se mantiene). */
  .lfe-shows-section.has-shows-nav .lfe-shows-wall__grid {
    scrollbar-width: none;
  }
  .lfe-shows-section.has-shows-nav .lfe-shows-wall__grid::-webkit-scrollbar {
    display: none;
  }
}

.lfe-shows-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.lfe-shows-nav[hidden] { display: none; }

.lfe-shows-nav__btn {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid rgba(200, 165, 91, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--lfe-ivory, #F5EFE1);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.lfe-shows-nav__btn:hover,
.lfe-shows-nav__btn:focus-visible {
  border-color: var(--stage-gold-bright, #FAD879);
  color: var(--stage-gold-bright, #FAD879);
}

.lfe-shows-nav__btn:focus-visible {
  outline: 2px solid var(--lfe-gold-bright, #E6C988);
  outline-offset: 3px;
}

.lfe-shows-nav__btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  border-color: rgba(200, 165, 91, 0.45);
  color: var(--lfe-ivory, #F5EFE1);
}

.lfe-shows-nav__count {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--lfe-ivory-muted, #C9C0AE);
}

.lfe-shows-nav__current { color: var(--lfe-ivory, #F5EFE1); }

.lfe-shows-nav__bar {
  position: relative;
  inline-size: clamp(56px, 20vw, 110px);
  block-size: 1px;
  background: rgba(240, 232, 214, 0.22);
  overflow: hidden;
}

.lfe-shows-nav__bar > span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--lfe-shows-progress, 0.1667));
  background: var(--bg-sunset, linear-gradient(90deg, #F2B33D, #B83A78));
  transition: transform 260ms var(--lfe-ease-out, ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-card__desc,
  .lfe-show-card__cta,
  .lfe-shows-nav__btn,
  .lfe-shows-nav__bar > span {
    transition: none;
  }
}

/* =========================================================================
   v4 — HERO WORD ROTATOR + DUOTONE UNIVERSAL CARDS + FOOTER TRIPTICO
   ========================================================================= */

/* --- Hero word rotator ------------------------------------------------- */

/* Rotator: grid-stack. Todos los items en la misma celda → el ancho del
   contenedor lo define la palabra MÁS LARGA, así nunca cambia de posición
   al rotar. Solo .is-active es visible (opacity), los demás opacity 0.
   Tipográficamente: italic + bold + ~1.2em del H1 base, gold-bright. */
.lfe-hero__rotator {
  display: inline-grid;
  grid-template-areas: "rotator";
  vertical-align: baseline;
  text-align: left;
  color: var(--lfe-gold-bright, #E6C988);
  font-style: italic;
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: -0.005em;
  isolation: isolate; /* contiene los z-index de items overlapped */
}

.lfe-hero__rotator-item {
  grid-area: rotator; /* todos los items en la MISMA celda */
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 480ms var(--lfe-ease-stage, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 600ms var(--lfe-ease-stage, cubic-bezier(0.16, 1, 0.3, 1));
  pointer-events: none;
}

.lfe-hero__rotator-item.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lfe-hero__rotator-item.is-leaving {
  opacity: 0;
  transform: translateY(-0.4em);
}

/* --- Duotone universal en show cards (CDS-style) ----------------------- */

.lfe-show-card__media img {
  /* Pasada 2: duotone carmesi/oro en reposo, color real en hover.
     Receta: brightness + sepia + hue-rotate + saturate para emular duotone.
     Reduced-motion: sin transicion pero mantenemos el filtro. */
  filter:
    brightness(0.85)
    contrast(1.15)
    sepia(0.5)
    hue-rotate(-26deg)
    saturate(1.4);
  transition:
    transform 800ms var(--lfe-ease-out, ease-out),
    filter 600ms ease;
}

.lfe-show-card:hover .lfe-show-card__media img,
.lfe-show-card:focus-within .lfe-show-card__media img {
  transform: scale(1.04);
  filter:
    brightness(1.05)
    contrast(1.1)
    sepia(0)
    saturate(1.15);
}

/* La featured card mantiene siempre algo de color para destacar */
.lfe-show-card--featured .lfe-show-card__media img {
  filter:
    brightness(0.95)
    contrast(1.1)
    sepia(0.25)
    hue-rotate(-18deg)
    saturate(1.2);
}

@media ( prefers-reduced-motion: reduce ) {
  .lfe-show-card__media img,
  .lfe-show-card:hover .lfe-show-card__media img {
    transition: none;
  }
}

/* --- Footer triptico (wordmark + cita triple + 3 cols) ----------------- */

.lfe-footer--triptico {
  position: relative;
  background: var(--lfe-black, #0a0a0a);
  color: var(--lfe-ivory, #F5EFE1);
  padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem);
  overflow: hidden;
}

.lfe-footer__wordmark {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-style: italic;
  font-size: clamp(3.5rem, 14vw, 14rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200, 165, 91, 0.45);
  text-stroke: 1px rgba(200, 165, 91, 0.45);
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  user-select: none;
  pointer-events: none;
}

.lfe-footer__manifesto {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.45;
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  color: var(--lfe-ivory, #F5EFE1);
}

.lfe-footer__manifesto span {
  display: block;
}

.lfe-footer__manifesto span + span {
  margin-top: 0.35em;
}

.lfe-footer__manifesto em {
  font-style: normal;
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1100px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-inline: 1.5rem;
}

.lfe-footer__col h3 {
  font-family: var(--lfe-font-body, 'Inter'), sans-serif;
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--lfe-gold-bright, #E6C988);
  margin: 0 0 1rem;
  font-weight: 600;
}

.lfe-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lfe-footer__col a {
  color: var(--lfe-ivory-muted, #C9C0AE);
  text-decoration: none;
  font-size: var(--lfe-fs-sm, 0.95rem);
  transition: color 240ms ease, padding-left 240ms ease;
  display: inline-block;
  position: relative;
}

.lfe-footer__col a:hover,
.lfe-footer__col a:focus-visible {
  color: var(--lfe-ivory, #F5EFE1);
  padding-left: 0.6rem;
}

.lfe-footer__col a:hover::before,
.lfe-footer__col a:focus-visible::before {
  content: "\2192";
  position: absolute;
  left: -0.4rem;
  color: var(--lfe-gold-bright, #E6C988);
}

.lfe-footer__divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 165, 91, 0.4) 50%,
    transparent 100%);
  margin: clamp(1rem, 3vw, 2rem) auto;
  max-width: 600px;
}

.lfe-footer__micro {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  font-size: var(--lfe-fs-xs, 0.7rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 192, 174, 0.55);
  padding-inline: 1.5rem;
}

.lfe-footer__micro a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, color 200ms ease;
}

.lfe-footer__micro a:hover,
.lfe-footer__micro a:focus-visible {
  color: var(--lfe-gold-bright, #E6C988);
  border-bottom-color: var(--lfe-gold-bright, #E6C988);
}

.lfe-footer__signature {
  color: var(--lfe-gold, #C8A55B);
}

@media ( max-width: 720px ) {
  .lfe-footer__cols {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.5rem;
  }
  .lfe-footer__col ul { align-items: center; }
  .lfe-footer__col a:hover { padding-left: 0; }
  .lfe-footer__col a:hover::before { display: none; }
}

/* =========================================================================
   PULL QUOTE XXL (lfe/pull-quote-xxl)
   =========================================================================

   Cita editorial gigante Italiana italic. Tres variantes de color via
   modificador BEM: --crimson (default), --ivory, --black.

   WCAG:
     - ivory #F5EFE1 sobre crimson #7A0E1F  = 8.4:1 (AAA)
     - crimson #7A0E1F sobre ivory #F5EFE1  = 8.4:1 (AAA)
     - ivory #F5EFE1 sobre black #0A0A0A    = 19.6:1 (AAA)
   ========================================================================= */

.lfe-pull-quote {
  position: relative;
  width: 100%;
  /* min(vw, svh): en pantallas anchas pero bajas no crece por encima del alto. */
  padding-block: clamp(4rem, min(12vw, 14svh), 10rem);
  overflow: hidden;
}

/* Variante default (crimson) */
.lfe-pull-quote--crimson {
  background: var(--lfe-crimson, #7a0e1f);
}

/* Variante marfil */
.lfe-pull-quote--ivory {
  background: var(--lfe-ivory, #f5efe1);
}

/* Variante negra */
.lfe-pull-quote--black {
  background: var(--lfe-black, #0a0a0a);
}

.lfe-pull-quote__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Comilla decorativa gigante */
.lfe-pull-quote__open {
  position: absolute;
  top: -0.6em;
  left: -0.1em;
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  /* Color por variante de fondo (se sobreescribe mas abajo) */
  color: var(--lfe-gold-bright, #e6c988);
  opacity: 0.25;
}

.lfe-pull-quote--ivory .lfe-pull-quote__open {
  color: var(--lfe-crimson-deep, #5a0f1a);
  opacity: 0.18;
}

.lfe-pull-quote--black .lfe-pull-quote__open {
  color: var(--lfe-gold-bright, #e6c988);
  opacity: 0.25;
}

/* Texto de la cita */
.lfe-pull-quote__text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 18ch;
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-size: clamp(2.5rem, 7vw, 8.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--lfe-ivory, #f5efe1);
}

.lfe-pull-quote--ivory .lfe-pull-quote__text {
  color: var(--lfe-crimson, #7a0e1f);
}

/* --black hereda ivory (texto claro sobre negro) */
.lfe-pull-quote--black .lfe-pull-quote__text {
  color: var(--lfe-ivory, #f5efe1);
}

/* Attribution */
.lfe-pull-quote__attr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: clamp(2rem, 4vw, 3rem);

  /* Hairline gold horizontal sobre el attribution */
  padding-top: 1.25rem;
}

.lfe-pull-quote__attr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--lfe-gold-bright, #e6c988);
  opacity: 0.7;
}

.lfe-pull-quote--ivory .lfe-pull-quote__attr::before {
  background: var(--lfe-crimson, #7a0e1f);
}

.lfe-pull-quote__source {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: var(--lfe-gold-bright, #e6c988);
}

.lfe-pull-quote--ivory .lfe-pull-quote__source {
  color: var(--lfe-crimson, #7a0e1f);
}

.lfe-pull-quote--black .lfe-pull-quote__source {
  color: var(--lfe-gold-bright, #e6c988);
}

.lfe-pull-quote__role {
  font-family: var(--lfe-font-body, 'Inter'), sans-serif;
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-gold-bright, #e6c988);
  opacity: 0.75;
}

.lfe-pull-quote--ivory .lfe-pull-quote__role {
  color: var(--lfe-crimson-deep, #5a0f1a);
  opacity: 0.8;
}

/* Autotype: estado inicial antes de que JS dispare la animacion.
   Si no hay JS o prefers-reduced-motion, el texto es visible. */
[data-autotype]:not([data-autotype-done]) {
  /* Mantiene el texto visible para SSR / no-JS */
}

@media (prefers-reduced-motion: reduce) {
  /* No hay transition aqui — el autotype JS respeta reduced-motion
     mostrando el texto directamente sin animacion de caracteres. */
  .lfe-pull-quote__open {
    transition: none;
  }
}

@media (max-width: 720px) {
  .lfe-pull-quote__open {
    font-size: clamp(6rem, 20vw, 10rem);
    top: -0.4em;
    left: -0.05em;
  }
}

/* NUMBERS AS COMPOSITION — definición única en el bloque de más abajo
   (~L7461, con texto en degradado sunset + hairlines). Se eliminó el
   duplicado v13 cuyas reglas :nth-child pisaban por especificidad las
   posiciones basadas en clases --lg/--md/--xl/--sm. */

/* =========================================================================
   STAGE LIGHT CTA (lfe/stage-light-cta)
   =========================================================================

   CTA full-bleed con haces de luz conicos SVG. Hover intensifica los haces
   via CSS custom property --lfe-beam-opacity.
   ========================================================================= */

.lfe-stage-cta {
  --lfe-beam-opacity: 0.85;
  position: relative;
  /* Banda de CTA, no hero: siempre algo más baja que la pantalla.
     min(vw, svh) evita que en portátiles 1366×768 supere el alto visible. */
  padding-block: clamp(4rem, min(14vw, 12svh), 11rem);
  background: var(--lfe-black, #0a0a0a);
  isolation: isolate;
  overflow: hidden;
}

.lfe-stage-cta:hover {
  --lfe-beam-opacity: 1;
}

/* Transicion suave en hover del --lfe-beam-opacity (via opacity del SVG) */
.lfe-stage-cta__lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: var(--lfe-beam-opacity);
  transition: opacity 600ms ease;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lfe-stage-cta__lights {
    transition: none;
  }
}

.lfe-stage-cta__content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, min(2.5vw, 3svh), 2rem);
}

.lfe-stage-cta__eyebrow {
  /* Hereda .lfe-eyebrow del design system */
}

.lfe-stage-cta__title {
  font-family: var(--lfe-font-display, 'Italiana'), serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, min(5vw, 8svh), 4.5rem);
  line-height: 1.1;
  text-wrap: balance;
  color: var(--lfe-ivory, #f5efe1);
  margin: 0;
}

.lfe-stage-cta__lead {
  font-family: var(--lfe-font-body, 'Inter'), sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  color: #b9ae92;
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

.lfe-stage-cta__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Microcopy de credibilidad bajo los CTAs B2B (auditoría editorial 06-02). */
.lfe-stage-cta__note {
  margin: 1rem 0 0;
  font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.06em;
  color: var(--bone-dim, #A8A294);
  text-align: center;
}

/* =========================================================================
   PRESS QUOTES v9.9 — dark teatro premium
   Fondo cosmos (transparente, hereda body) + cards dark + comilla SVG XL
   decorativa en gold + hover lift+glow.
   ========================================================================= */

.lfe-press-quotes {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: transparent; /* hereda cosmos del body */
  position: relative;
}

/* Halo sutil dorado superior centrado, encaja con la atmósfera del hero. */
.lfe-press-quotes::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-gold) 50%, transparent);
  opacity: 0.55;
  margin-top: clamp(2.5rem, 5vh, 4rem);
}

.lfe-press-quotes__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lfe-press-quotes__eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lfe-press-quotes__title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  color: var(--bone, #F0E8D6);
  margin: 0.5rem 0 0;
  text-shadow: 0 0 24px rgba(242, 179, 61, 0.15);
}

.lfe-press-quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 920px) {
  .lfe-press-quotes__grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
}

/* Card: fondo cosmos-mid suave + hairline gold + sombra editorial. */
.lfe-press-quotes__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
  /* v18 (dirección de arte): "playbill" — card vellum crema sobre el cosmos
     oscuro, lee como programa de teatro apoyado en el escenario. Máxima
     separación (claro sobre oscuro) e interior de tinta granate. El oro de
     marca vive ahora en el filo (marco gilt) + el halo, no en la tipografía. */
  background:
    linear-gradient(180deg, #f7f1e4 0%, #efe6d3 55%, #e9dec7 100%);
  border: 1px solid rgba(200, 165, 91, 0.85);
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(10, 10, 10, 0.10),
    0 18px 40px -14px rgba(10, 10, 10, 0.55),
    0 0 34px -8px rgba(242, 179, 61, 0.16);
  isolation: isolate;
  overflow: hidden;
  transition: transform 360ms var(--lfe-ease-out), box-shadow 360ms var(--lfe-ease-out), border-color 360ms var(--lfe-ease-out);
}

/* v18: glow interno OFF — sobre card clara ensucia la crema. La profundidad
   la da la sombra de elevación (box-shadow), no el brillo interior. */
.lfe-press-quotes__item::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.lfe-press-quotes__item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 3px 6px rgba(10, 10, 10, 0.12),
    0 26px 54px -14px rgba(10, 10, 10, 0.60),
    0 0 40px -6px rgba(242, 179, 61, 0.24);
}

/* Comilla SVG XL decorativa — italianica gold, esquina superior izquierda. */
.lfe-press-quotes__mark {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  width: clamp(56px, 6vw, 80px);
  height: clamp(42px, 4.5vw, 60px);
  color: #5a0f1a;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.lfe-press-quotes__quote {
  margin: clamp(1.5rem, 2vw, 2rem) 0 0;
  position: relative;
  z-index: 1;
}

.lfe-press-quotes__text {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.65vw, 1.55rem);
  line-height: 1.3;
  color: #5a0f1a; /* v18: tinta granate sobre papel — 10.5:1 AAA */
  margin: 0;
  text-wrap: pretty;
}

.lfe-press-quotes__attr {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lfe-press-quotes__rule {
  display: block;
  width: 32px;
  height: 1px;
  background: #8b1a2a;
  opacity: 0.6;
}

.lfe-press-quotes__source {
  font-weight: 700;
  color: #8b1a2a; /* v18: crimson — 7:1 sobre crema (el oro fallaba AA) */
}

.lfe-press-quotes__year {
  color: #6b5d4a; /* v18: taupe-ink — 4.9:1 AA, mantiene jerarquía tenue */
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* Enlace a la nota de prensa: el ::after cubre la card entera (clic en
   cualquier punto) y el foco se marca sobre la card. */
.lfe-press-quotes__link {
  align-self: flex-start;
  margin-top: 0.25rem;
  color: #5a0f1a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(139, 26, 42, 0.35);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 240ms var(--lfe-ease-out);
}
.lfe-press-quotes__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.lfe-press-quotes__item.has-link:hover .lfe-press-quotes__link { text-decoration-color: currentColor; }
.lfe-press-quotes__link:focus-visible { outline: none; }
.lfe-press-quotes__item.has-link:focus-within {
  outline: 2px solid #c8a55b;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .lfe-press-quotes__item,
  .lfe-press-quotes__item::before { transition: none !important; }
}

/* Focus visible en botones de stage-cta (refuerzo por contexto oscuro) */
.lfe-stage-cta__ctas .lfe-btn:focus-visible {
  outline: 2px solid var(--lfe-gold-bright, #e6c988);
  outline-offset: 4px;
}

@media (max-width: 480px) {
  .lfe-stage-cta__ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lfe-stage-cta__ctas .lfe-btn {
    justify-content: center;
  }
}

/* =========================================================================
   SHOW CARD — SPOTLIGHT OVERLAY (microinteraccion CSS)
   =========================================================================

   Pseudo-element ::before en .lfe-show-card__link (overflow hidden +
   isolation: isolate ya activos) con dos haces de luz conicos gold-bright
   en mix-blend-mode screen.

   Solo desktop (hover: hover) + (pointer: fine).
   prefers-reduced-motion: transition-duration 0ms (instantaneo).
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {

  /* El ::before de .lfe-show-card ya existe condicionalmente en is-tilting
     (z-index 4, radial-gradient). El spotlight usa un pseudo-element
     diferente: lo anadimos al __link (hijo con overflow hidden) para que
     los haces queden clipeados por los bordes de la card. */

  .lfe-show-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
      /* Haz izquierdo */
      linear-gradient(
        160deg,
        rgba(230, 201, 136, 0.28) 0%,
        rgba(230, 201, 136, 0) 55%
      ),
      /* Haz derecho */
      linear-gradient(
        200deg,
        rgba(230, 201, 136, 0) 35%,
        rgba(230, 201, 136, 0.18) 70%,
        rgba(230, 201, 136, 0) 100%
      );
    background-size: 60% 100%, 60% 100%;
    background-position: 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 500ms ease-out;
  }

  .lfe-show-card:hover .lfe-show-card__link::before,
  .lfe-show-card:focus-within .lfe-show-card__link::before {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .lfe-show-card__link::before {
      transition-duration: 0ms;
    }
  }

/* =========================================================================
   COSMIC ATMOSPHERE — Opcion E "La Clique"
   Layers: fondo gradient cosmico, starfield, halo dorado superior,
   hazes magenta/violeta laterales, glow en H1, sunset en CTAs.
   ========================================================================= */

body {
  background-color: var(--cosmos-deep);
  background-image: var(--bg-cosmos);
  background-attachment: fixed;
  background-size: 100% 130vh;
  background-repeat: no-repeat;
  background-position: top center;
}

/* Starfield: SVG inline data URI con dots blancos. mix-blend-mode: screen para
   que no apaguen los degradados. Fixed para mantenerse durante el scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,240,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 24% 32%, rgba(255,255,240,0.7) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 38% 8%, rgba(255,255,255,1) 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 22%, rgba(255,255,240,0.6) 50%, transparent 100%),
    radial-gradient(2px 2px at 58% 12%, rgba(255,255,255,1) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 65% 28%, rgba(255,255,240,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 75% 19%, rgba(255,255,240,0.55) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 83% 26%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 91% 11%, rgba(255,255,240,0.7) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 5% 42%, rgba(255,255,255,0.85) 50%, transparent 100%),
    radial-gradient(1px 1px at 15% 52%, rgba(255,255,240,0.55) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 28% 48%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 42% 58%, rgba(255,255,240,0.5) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 55% 44%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1px 1px at 68% 56%, rgba(255,255,240,0.6) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 78% 49%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,240,0.55) 50%, transparent 100%);
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  animation: lfe-stars-twinkle 9s ease-in-out infinite;
}

@keyframes lfe-stars-twinkle {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: 0.7; }
}

/* Halo dorado superior + hazes laterales — fixed sobre el fondo, debajo del contenido. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    var(--bg-spotlight-top),
    var(--bg-velvet-haze),
    var(--bg-violet-haze);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* Garantiza que el contenido principal va por encima de los layers atmosfericos.
   NO se incluyen aqui: .lfe-header / #site-header (sticky z-index 100 propio),
   ni .lfe-splash (fixed z-index 10500 propio). Incluirlos sobrescribiría sus
   stacking contexts y la navbar quedaba debajo del hero. */
main,
#site-footer,
.lfe-section,
.lfe-hero,
.wp-block-cover,
.lfe-cookie-banner,
.lfe-cookie-modal {
  position: relative;
  z-index: 1;
}

/* Glow tipografico en hero H1 (uppercase italiana). */
.lfe-hero__title,
.wp-block-cover.lfe-hero .wp-block-cover__inner-container h1,
.lfe-hero h1 {
  text-shadow: var(--glow-stage-gold);
}

/* Sunset en eyebrows + accent narrative. */
.lfe-eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

@supports not (background-clip: text) {
  .lfe-eyebrow { color: var(--stage-gold); -webkit-text-fill-color: var(--stage-gold); }
}

/* Section dark variants ahora usan el gradient cosmos en lugar del plano. */
.lfe-section--black {
  background: transparent; /* hereda el body */
}

/* Show cards: spotlight ahora con sunset gradient en vez de gold plano. */
.lfe-show-card__link::before {
  background-image:
    linear-gradient(135deg, rgba(242, 179, 61, 0.6) 0%, rgba(184, 58, 120, 0.6) 100%),
    linear-gradient(45deg, rgba(184, 58, 120, 0.4) 0%, rgba(123, 93, 201, 0.4) 100%) !important;
}

/* Pull-quote XXL: fondo magenta-violeta en vez de crimson plano. */
.lfe-pull-quote--crimson,
.lfe-pull-quote {
  background: linear-gradient(135deg, var(--velvet-magenta-deep) 0%, var(--velvet-magenta) 60%, var(--stage-amber) 110%) !important;
}

/* Stage-light CTA: los conos heredan el sunset. */
.lfe-stage-cta,
.lfe-stage-light-cta {
  position: relative;
  isolation: isolate;
}

/* Splash en home con backdrop magenta (curtain rise). */
.lfe-splash {
  background-color: var(--cosmos-deep);
}
.lfe-splash__curtain {
  background: var(--bg-curtain-rise) !important;
}

/* Numbers as composition: fondo con halo central. */
.lfe-numbers-composition {
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(123, 93, 201, 0.18), transparent 65%),
    transparent;
}

/* =========================================================================
   OLA 2 — PAGE TRANSITIONS VEIL
   Telón animado por GSAP (page-transitions.js). Background = --bg-curtain-rise.
   ========================================================================= */

.lfe-transition-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-curtain-rise);
  pointer-events: none;
  display: none; /* GSAP lo activa con display: block */
  will-change: transform;
}

/* Clase puesta en body de la página destino por page-transitions.js.
   El JS anima el veil que crea en esa página y quita la clase. */
body.lfe-page-entering .lfe-transition-veil {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lfe-transition-veil {
    /* fade de opacidad en vez del telón — GSAP lo maneja; el CSS solo
       garantiza que si el JS no carga, el veil no se quede colgado. */
    transition: opacity 0.18s ease;
  }
}

/* =========================================================================
   OLA 2 — VIEW TRANSITIONS API (Chrome 111+)
   CSS complementa el <meta name="view-transition" content="same-origin">
   emitido por enqueue.php solo en single espectaculo.
   ========================================================================= */

@view-transition {
  navigation: auto;
}

/* La imagen featured del single lleva view-transition-name inline desde PHP.
   Aqui definimos el fallback para la imagen de show-card en el archivo. */
.lfe-show-card__img,
.lfe-card__media img {
  view-transition-name: none; /* se sobreescribe inline por slug */
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0.01ms !important; }
  ::view-transition-old(*) { animation-duration: 0.01ms !important; }
  ::view-transition-new(*) { animation-duration: 0.01ms !important; }
}

/* =========================================================================
   OLA 2 — SHOW COLOR THEME VARIANTS (paleta E)
   body.lfe-show--{theme} sobreescribe --accent-narrative y --accent-warm
   para el hero overlay, pull-quote y beams del stage-light CTA.
   ========================================================================= */

body.lfe-show--gold-warm {
  --accent-narrative: var(--stage-amber-deep);
  --accent-warm:      var(--stage-gold);
}

body.lfe-show--velvet-magenta {
  --accent-narrative: var(--velvet-magenta);
  --accent-warm:      var(--velvet-magenta-deep);
}

body.lfe-show--mist-violet {
  --accent-narrative: var(--mist-violet-deep);
  --accent-warm:      var(--mist-violet);
}

body.lfe-show--cosmos-cool {
  --accent-narrative: var(--cosmos-light);
  --accent-warm:      var(--cosmos-mid);
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 1: HERO
   ========================================================================= */

.lfe-show-hero {
  position: relative;
  /* svh: en móvil con barras del navegador visibles 90vh ya no cabe. */
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.lfe-show-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
}

/* Duotone overlay using mix-blend-mode: funciona sobre imagen. */
.lfe-show-hero__duotone {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-narrative) 40%, transparent) 0%,
    color-mix(in srgb, var(--cosmos-deep) 80%, transparent) 60%,
    var(--cosmos-deep) 100%
  );
  mix-blend-mode: multiply;
}

.lfe-show-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(10, 18, 53, 0.55) 55%,
    var(--cosmos-deep) 95%
  );
}

.lfe-show-hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--lfe-space-32) var(--lfe-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-4);
  max-width: 900px;
}

.lfe-show-hero__eyebrow {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-narrative);
  display: flex;
  align-items: center;
  gap: var(--lfe-space-3);
}

.lfe-show-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}

.lfe-show-hero__title {
  font-family: var(--lfe-font-display);
  font-size: clamp(3.5rem, 4rem + 5vw, 9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  color: var(--bone);
  text-shadow: var(--glow-stage-gold);
  text-wrap: balance;
  margin: 0;
}

.lfe-show-hero__meta {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex;
  gap: var(--lfe-space-4);
  flex-wrap: wrap;
}

.lfe-show-hero__meta span + span::before {
  content: "·";
  margin-right: var(--lfe-space-4);
  color: var(--accent-narrative);
}

.lfe-show-hero__scroll-hint {
  position: absolute;
  bottom: var(--lfe-space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lfe-space-2);
  color: var(--bone-dim);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: lfe-scroll-bounce 2s ease-in-out infinite;
}

.lfe-show-hero__scroll-hint svg {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

@keyframes lfe-scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-hero__scroll-hint {
    animation: none;
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 2: TAGLINE BEAT
   ========================================================================= */

.lfe-show-tagline {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--lfe-space-24);
  background-color: var(--surface-0);
  position: relative;
  isolation: isolate;
}

/* Halo de acento detrás del texto */
.lfe-show-tagline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    color-mix(in srgb, var(--accent-narrative) 20%, transparent) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

.lfe-show-tagline__quote {
  font-family: var(--lfe-font-display);
  font-size: clamp(1.75rem, 1.5rem + 2.5vw, 3.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bone);
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent-narrative) 60%, transparent);
  max-width: 800px;
  padding-inline: var(--lfe-section-px);
}

.lfe-show-tagline__quote::before { content: "\201C"; }
.lfe-show-tagline__quote::after  { content: "\201D"; }

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 3: DATOS CLAVE
   ========================================================================= */

.lfe-show-facts {
  padding-block: var(--lfe-space-16);
  background-color: var(--surface-1);
}

.lfe-show-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lfe-space-2);
}

.lfe-show-facts__item {
  padding: var(--lfe-space-8);
  text-align: center;
  border-right: 1px solid var(--hairline-warm);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-2);
}

.lfe-show-facts__item:last-child {
  border-right: none;
}

.lfe-show-facts__value {
  font-family: var(--lfe-font-display);
  font-size: clamp(2.5rem, 2rem + 3vw, 5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-narrative);
}

.lfe-show-facts__label {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.lfe-show-facts__suffix {
  font-size: 0.45em;
  font-family: var(--lfe-font-eyebrow);
  letter-spacing: 0.1em;
  color: var(--bone-dim);
  vertical-align: baseline;
  margin-left: 0.1em;
}

@media (max-width: 719px) {
  .lfe-show-facts__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lfe-show-facts__item:nth-child(2) {
    border-right: none;
  }
  .lfe-show-facts__item {
    border-bottom: 1px solid var(--hairline-warm);
    border-right: none;
    padding: var(--lfe-space-6);
  }
  .lfe-show-facts__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 4: SINOPSIS (sticky 2 cols)
   ========================================================================= */

.lfe-show-synopsis {
  padding-block: var(--lfe-space-24);
}

.lfe-show-synopsis__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--lfe-space-16);
  align-items: start;
}

/* Sticky solo en viewport ≥ 920px */
@media (min-width: 920px) {
  .lfe-show-synopsis__sticky {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

.lfe-show-synopsis__label {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-narrative);
  margin-bottom: var(--lfe-space-4);
}

.lfe-show-synopsis__quick-credits {
  margin-top: var(--lfe-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--lfe-space-2);
}

.lfe-show-synopsis__credit-item {
  display: flex;
  gap: var(--lfe-space-3);
  font-size: var(--lfe-fs-sm);
}

.lfe-show-synopsis__credit-role {
  color: var(--bone-dim);
  flex-shrink: 0;
  min-width: 80px;
}

.lfe-show-synopsis__credit-name {
  color: var(--bone);
  font-family: var(--lfe-font-display);
  font-style: italic;
}

.lfe-show-synopsis__body {
  font-size: var(--lfe-fs-md);
  line-height: var(--lfe-lh-body);
  color: var(--bone);
}

.lfe-show-synopsis__body p + p {
  margin-top: var(--lfe-space-6);
}

@media (max-width: 919px) {
  .lfe-show-synopsis__inner {
    grid-template-columns: 1fr;
    gap: var(--lfe-space-8);
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 5: FICHA ARTÍSTICA (créditos)
   ========================================================================= */

.lfe-show-credits {
  padding-block: var(--lfe-space-16);
  background-color: var(--surface-1);
}

.lfe-show-credits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--lfe-space-4);
  margin-top: var(--lfe-space-8);
}

.lfe-show-credits__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--lfe-space-4);
  padding-block: var(--lfe-space-3);
  border-bottom: 1px solid var(--hairline-warm);
  /* Initial state para JS stagger reveal */
  opacity: 0;
}

/* Si JS no carga, mostrar todo visible */
.no-js .lfe-show-credits__row,
.lfe-show-credits__row.is-revealed {
  opacity: 1;
}

.lfe-show-credits__name {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: var(--lfe-fs-md);
  color: var(--bone);
}

.lfe-show-credits__role {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-align: right;
  flex-shrink: 0;
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 6: GALERÍA HORIZONTAL
   ========================================================================= */

.lfe-show-gallery {
  padding-block: var(--lfe-space-16);
  overflow: hidden;
}

.lfe-show-gallery__track {
  display: flex;
  gap: var(--lfe-space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-narrative) var(--surface-1);
  padding-block: var(--lfe-space-4);
  /* Cursor indica arrastrable en desktop */
  cursor: grab;
}

.lfe-show-gallery__track:active {
  cursor: grabbing;
}

.lfe-show-gallery__item {
  flex: 0 0 70vw;
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  cursor: pointer;
  outline: 0;
  transition: box-shadow 0.3s ease;
}

.lfe-show-gallery__item:focus-visible {
  outline: 2px solid var(--accent-narrative);
  outline-offset: 3px;
}

.lfe-show-gallery__item:hover {
  box-shadow: 0 8px 40px color-mix(in srgb, var(--accent-narrative) 40%, transparent);
}

.lfe-show-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.lfe-show-gallery__item:hover img {
  transform: scale(1.03);
}

@media (max-width: 719px) {
  .lfe-show-gallery__item {
    flex: 0 0 82vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-gallery__item img {
    transition: none;
  }
  .lfe-show-gallery__track {
    scroll-behavior: auto;
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 6b: LIGHTBOX (dialog nativo)
   ========================================================================= */

.lfe-gallery-lb {
  border: none;
  background: rgba(10, 18, 53, 0.96);
  max-width: min(1100px, 95vw);
  max-height: 92vh;
  width: 100%;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  color: var(--bone);
}

.lfe-gallery-lb::backdrop {
  background: rgba(10, 18, 53, 0.85);
  backdrop-filter: blur(8px);
}

.lfe-gallery-lb__close {
  position: absolute;
  top: var(--lfe-space-4);
  right: var(--lfe-space-4);
  z-index: 10;
  background: rgba(10, 18, 53, 0.7);
  border: 1px solid var(--hairline-warm);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bone);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lfe-gallery-lb__close:hover,
.lfe-gallery-lb__close:focus-visible {
  background: var(--accent-narrative);
  color: var(--bone);
  outline: 2px solid var(--stage-gold);
  outline-offset: 2px;
}

.lfe-gallery-lb__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lfe-space-4);
  padding: var(--lfe-space-6);
}

.lfe-gallery-lb__img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
}

.lfe-gallery-lb__caption {
  font-size: var(--lfe-fs-sm);
  color: var(--bone-dim);
  text-align: center;
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 7: PULL-QUOTE (ya existe lfe/pull-quote-xxl)
   Sobreescritura contextual dentro de .lfe-show-press-quote
   ========================================================================= */

.lfe-show-press-quote {
  padding-block: var(--lfe-space-16);
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 8: DOSSIER PDF DOWNLOAD
   ========================================================================= */

.lfe-show-dossier {
  padding-block: var(--lfe-space-12);
  background-color: var(--surface-2);
}

.lfe-show-dossier__card {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-6);
  padding: var(--lfe-space-8);
  border: 1px solid var(--hairline-warm);
  border-radius: 6px;
  background: var(--surface-1);
  max-width: 600px;
  text-decoration: none;
  color: var(--bone);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.lfe-show-dossier__card:hover,
.lfe-show-dossier__card:focus-visible {
  border-color: var(--accent-narrative);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent-narrative) 30%, transparent);
  transform: translateY(-2px);
  outline: 2px solid var(--accent-narrative);
  outline-offset: 2px;
}

.lfe-show-dossier__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--accent-narrative);
}

.lfe-show-dossier__info {
  flex: 1;
}

.lfe-show-dossier__title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: var(--lfe-fs-md);
  color: var(--bone);
}

.lfe-show-dossier__meta {
  font-size: var(--lfe-fs-xs);
  color: var(--bone-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--lfe-space-1);
}

.lfe-show-dossier__arrow {
  flex-shrink: 0;
  color: var(--accent-narrative);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lfe-show-dossier__card:hover .lfe-show-dossier__arrow {
  opacity: 1;
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-dossier__card,
  .lfe-show-dossier__arrow {
    transition: none;
  }
  .lfe-show-dossier__card:hover {
    transform: none;
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 9: FECHAS / ESTADO
   ========================================================================= */

.lfe-show-dates {
  padding-block: var(--lfe-space-16);
  background-color: var(--surface-0);
}

/* Sello ARCHIVO para shows retirados */
.lfe-show-archive-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lfe-space-3);
  border: 2px solid var(--bone-dim);
  color: var(--bone-dim);
  padding: var(--lfe-space-2) var(--lfe-space-4);
  border-radius: 2px;
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.lfe-show-archive-badge::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bone-dim);
}

.lfe-show-tour-cities {
  margin-top: var(--lfe-space-4);
  font-size: var(--lfe-fs-sm);
  color: var(--bone-dim);
  line-height: 1.8;
}

/* Tabla de fechas para shows en cartel */
.lfe-show-dates__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--lfe-space-8);
  font-size: var(--lfe-fs-sm);
}

.lfe-show-dates__table th {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: var(--lfe-space-3);
  border-bottom: 1px solid var(--hairline-warm);
  text-align: left;
}

.lfe-show-dates__table td {
  padding-block: var(--lfe-space-4);
  border-bottom: 1px solid rgba(240, 232, 214, 0.08);
  color: var(--bone);
  vertical-align: middle;
}

.lfe-show-dates__cta {
  margin-top: var(--lfe-space-8);
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — SECCIÓN 10: SHOWS RELACIONADOS
   ========================================================================= */

.lfe-show-related {
  padding-block: var(--lfe-space-24);
  background-color: var(--surface-1);
}

.lfe-show-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lfe-space-8);
  margin-top: var(--lfe-space-12);
}

/* Rotaciones offset del playbill: -5° / 0° / +5° */
.lfe-show-related__card:nth-child(1) { --card-base-rotate: -5deg; }
.lfe-show-related__card:nth-child(2) { --card-base-rotate: 0deg; }
.lfe-show-related__card:nth-child(3) { --card-base-rotate: 5deg; }

.lfe-show-related__card {
  display: block;
  text-decoration: none; /* el <a> no debe subrayar el card */
  color: inherit;
  border-radius: 4px;
  overflow: hidden;
  transform: rotate(var(--card-base-rotate, 0deg))
             perspective(600px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
  will-change: transform;
  background: var(--surface-2);
}

.lfe-show-related__card:hover,
.lfe-show-related__card:focus-visible {
  text-decoration: none;
}

.lfe-show-related__card:focus-visible {
  outline: 2px solid var(--lfe-focus-color);
  outline-offset: 4px;
}

.lfe-show-related__card.is-hovered {
  z-index: 10;
  box-shadow: 0 20px 60px rgba(10, 18, 53, 0.7);
}

.lfe-show-related__card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.lfe-show-related__card-body {
  padding: var(--lfe-space-4);
  background: var(--surface-2);
}

.lfe-show-related__card-title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: var(--lfe-fs-md);
  color: var(--bone);
  margin-bottom: var(--lfe-space-2);
}

.lfe-show-related__card-eyebrow {
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

@media (max-width: 719px) {
  .lfe-show-related__grid {
    grid-template-columns: 1fr;
    gap: var(--lfe-space-6);
  }
  .lfe-show-related__card {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-related__card {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
}

/* =========================================================================
   OLA 2 — SINGLE ESPECTACULO — CURSOR "DRAG" en galería
   ========================================================================= */

.lfe-cursor.is-drag::after {
  content: "arrastra";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cosmos-deep);
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lfe-cursor.is-drag::after { display: none; }
}

}

/* =========================================================================
   TEAM TEASER · v9.2 — sustituye al team-credits completo en el home.
   Solo título + lead + link a /equipo. Mantiene jerarquía sin saturar.
   ========================================================================= */

.lfe-team-teaser {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.lfe-team-teaser__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.lfe-team-teaser__eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lfe-team-teaser__title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  color: var(--text-on-dark, var(--bone));
  margin: 0;
  max-width: 22ch;
}

.lfe-team-teaser__lead {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.55;
  color: var(--text-on-dark-muted, var(--bone-dim));
  max-width: 56ch;
  margin: 0;
}

.lfe-team-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--hairline-warm);
  border-radius: 999px;
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stage-gold);
  background: transparent;
  transition:
    background 200ms ease-out,
    color 200ms ease-out,
    border-color 200ms ease-out,
    transform 200ms ease-out;
}

.lfe-team-teaser__link:hover,
.lfe-team-teaser__link:focus-visible {
  background: var(--bg-sunset);
  border-color: transparent;
  color: var(--cosmos-deep);
  transform: translateY(-2px);
}

.lfe-team-teaser__arrow {
  display: inline-block;
  transition: transform 200ms ease-out;
}

.lfe-team-teaser__link:hover .lfe-team-teaser__arrow {
  transform: translateX(4px);
}

/* =========================================================================
   (v13 NOTE) — el bloque legacy "SHOWS GRID v9.2" que aplanaba el wall
   con !important y override de body se ha eliminado en v13. Ahora el
   sistema v13 (sección 34 al inicio del archivo) define el wall asymmetric
   con featured 2×2, ticket lateral, sellos SVG y reveal hover.
   ========================================================================= */

/* =========================================================================
   NUMBERS-AS-COMPOSITION v9.2 — más framing, más animación
   ========================================================================= */

.lfe-numbers-composition {
  position: relative;
  /* Cuatro cifras: deben caber en pantalla. min(vw, svh) acota en portátiles bajos. */
  padding-block: clamp(3rem, min(10vw, 11svh), 8rem);
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(123, 93, 201, 0.20), transparent 65%),
    transparent;
}

/* Línea hairline dorada arriba + abajo como "marco editorial". */
.lfe-numbers-composition::before,
.lfe-numbers-composition::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 12vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-gold) 50%, transparent);
  opacity: 0.55;
}
.lfe-numbers-composition::before { top: clamp(2.5rem, 5vh, 4rem); }
.lfe-numbers-composition::after  { bottom: clamp(2.5rem, 5vh, 4rem); }
/* v19: con marquesina de bombillas (lfe-lit--marquesina) el marco ya lo pone la luz. */
.lfe-numbers-composition.lfe-lit::before,
.lfe-numbers-composition.lfe-lit::after { content: none; }

.lfe-numbers-composition .lfe-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* v15 "pauta de gira": dos renglones limpios, sin scatter vertical. */
  gap: clamp(1.5rem, min(5vw, 5svh), 4rem) clamp(1rem, 2vw, 2rem);
  /* baseline compartida por registro — las cifras dejan de flotar. */
  align-items: baseline;
  max-width: 960px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
  counter-reset: stat;
}

.lfe-numbers-composition__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  isolation: isolate;
  counter-increment: stat;
  transition: transform 600ms var(--lfe-ease-out);
}

.lfe-numbers-composition__item:hover {
  transform: translateY(-4px);
}

/* v15: asimetría solo HORIZONTAL (grid-column). El vertical lo fija la
   baseline compartida del container → cada registro se apoya en un renglón. */
.lfe-numbers-composition__item--lg {   /* 30 — reg. 1, izq indentado */
  grid-column: 2 / 7;
  grid-row: 1;
}
.lfe-numbers-composition__item--md {   /* 13 — reg. 1, der */
  grid-column: 8 / 13;
  grid-row: 1;
  text-align: right;
}
.lfe-numbers-composition__item--xl {   /* 1,5M — reg. 2, izq a ras, dominante */
  grid-column: 1 / 8;
  grid-row: 2;
}
.lfe-numbers-composition__item--sm {   /* 07 — reg. 2, der */
  grid-column: 9 / 13;
  grid-row: 2;
  text-align: right;
}

@media (max-width: 720px) {
  .lfe-numbers-composition .lfe-container {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .lfe-numbers-composition__item--lg,
  .lfe-numbers-composition__item--xl,
  .lfe-numbers-composition__item--md,
  .lfe-numbers-composition__item--sm {
    grid-column: 1 / -1;
    grid-row: auto;
    text-align: left;
    padding-block: clamp(0.9rem, 2svh, 1.35rem);
    border-bottom: 1px solid rgba(200, 165, 91, 0.18);
  }
  /* v15: en ledger vertical las labels vuelven a la izquierda. */
  .lfe-numbers-composition__item--md .lfe-numbers-composition__label,
  .lfe-numbers-composition__item--sm .lfe-numbers-composition__label {
    margin-left: 0;
  }
}

.lfe-numbers-composition__num {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 0.95;
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* v15: sombra DIRECCIONAL (la cifra apoya sobre la pauta) en vez de un glow
     radial que la dejaba suspendida en el aire. */
  text-shadow: 0 0.05em 0.35em rgba(0, 0, 0, 0.55), 0 0 22px rgba(242, 179, 61, 0.10);
  display: inline-block;
  white-space: nowrap;  /* v14.1: evita que la "M" de 1,5M caiga a otra línea */
  position: relative;
  padding-bottom: 0.16em;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}
/* v15: regla dorada bajo cada cifra = la pauta que la ancla al renglón. */
.lfe-numbers-composition__num::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--stage-gold), transparent 88%);
  opacity: 0.5;
}
.lfe-numbers-composition__item--md .lfe-numbers-composition__num::after,
.lfe-numbers-composition__item--sm .lfe-numbers-composition__num::after {
  background: linear-gradient(270deg, var(--stage-gold), transparent 88%);
}
/* v15: 1,5M manda; 30 baja para no competir en la primera fijación. */
.lfe-numbers-composition__item--lg .lfe-numbers-composition__num { font-size: clamp(4.5rem, min(12vw, 17svh), 10rem); }
.lfe-numbers-composition__item--xl .lfe-numbers-composition__num { font-size: clamp(5.5rem, min(15vw, 21svh), 13rem); }
.lfe-numbers-composition__item--md .lfe-numbers-composition__num { font-size: clamp(4.5rem, min(12vw, 16svh), 9.5rem); }
.lfe-numbers-composition__item--sm .lfe-numbers-composition__num { font-size: clamp(4rem, min(11vw, 14svh), 8rem); }

/* v15: la "M" como magnitud anclada, no como globo sobre el número. */
.lfe-numbers-composition__unit {
  font-size: 0.5em;
  font-style: italic;
  display: inline-block;
  margin-left: 0.06em;
  vertical-align: baseline;
  position: relative;
  top: -0.32em;
}

.lfe-numbers-composition__label {
  display: block;
  font-family: var(--lfe-font-eyebrow);
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* v15: sube contraste (antes bone-dim caía por debajo de AA). */
  color: var(--lfe-ivory-muted, #bdb5a2);
  max-width: 22ch;
  margin-top: 0.9rem;
}
/* v15: índice de gira "0N ·" → lectura de tabla, cada cifra es una entrada. */
.lfe-numbers-composition__label::before {
  content: "0" counter(stat) "  ·  ";
  color: var(--stage-gold);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
/* labels a la derecha se alinean con su cifra (solo en la rejilla: en el
   ledger móvil van a la izquierda). */
@media (min-width: 721px) {
  .lfe-numbers-composition__item--md .lfe-numbers-composition__label,
  .lfe-numbers-composition__item--sm .lfe-numbers-composition__label {
    margin-left: auto;
  }
}

/* =========================================================================
   COLLABORATORS · v9.2 — formato TICKET (entrada de circo)
   ========================================================================= */

.lfe-collab-section {
  background-color: var(--cosmos-deep);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.lfe-collab__header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lfe-collab__header .lfe-eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lfe-collab__header .lfe-h2 {
  font-family: var(--lfe-font-display);
  font-style: italic !important;
  color: var(--bone);
  margin: 0.5rem auto 1rem;
  max-width: 24ch;
}

.lfe-collab__header .lfe-lead {
  color: var(--bone-dim);
  max-width: 56ch;
  margin-inline: auto;
}

.lfe-collab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* TICKET v9.4 — paleta teatro vintage: papel crema + tinta vinotinto +
   acento dorado. Bordes perforados arriba y abajo via radial-gradient
   mask. Estilo entrada de teatro real (años 50-60). */
.lfe-collab__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  /* Papel crema con leve textura via gradients suaves. */
  background:
    radial-gradient(ellipse at top left, rgba(139, 69, 19, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(139, 69, 19, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #F4E4BC 0%, #EAD9A5 100%);
  border: 1px solid rgba(122, 14, 31, 0.18);
  border-radius: 3px;
  overflow: hidden;
  transition: transform 320ms var(--lfe-ease-out), box-shadow 320ms var(--lfe-ease-out);
  box-shadow:
    0 2px 6px rgba(40, 20, 0, 0.22),
    0 6px 20px rgba(40, 20, 0, 0.18),
    inset 0 0 0 1px rgba(212, 165, 116, 0.22);
  isolation: isolate;
  min-height: 130px;
  /* Bordes perforados (top + bottom): agujeros circulares cada 14px. */
  -webkit-mask:
    radial-gradient(circle 4px at 50% 0, transparent 4px, #000 4.5px) top/14px 8px repeat-x,
    radial-gradient(circle 4px at 50% 100%, transparent 4px, #000 4.5px) bottom/14px 8px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
          mask:
    radial-gradient(circle 4px at 50% 0, transparent 4px, #000 4.5px) top/14px 8px repeat-x,
    radial-gradient(circle 4px at 50% 100%, transparent 4px, #000 4.5px) bottom/14px 8px repeat-x,
    linear-gradient(#000, #000) center / 100% calc(100% - 12px) no-repeat;
}

.lfe-collab__item:hover {
  transform: translateY(-4px) rotate(-0.6deg) scale(1.01);
  box-shadow:
    0 6px 12px rgba(40, 20, 0, 0.28),
    0 18px 40px rgba(40, 20, 0, 0.30),
    inset 0 0 0 1px rgba(212, 165, 116, 0.35);
}

/* Stub izquierdo "ADMIT ONE" — vinotinto sobre crema. */
.lfe-collab__item::before {
  content: "ADMIT\AONE";
  white-space: pre;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  background:
    repeating-linear-gradient(
      180deg,
      var(--lfe-crimson, #7A0E1F) 0px,
      var(--lfe-crimson, #7A0E1F) 8px,
      #6A0B19 8px,
      #6A0B19 10px
    );
  color: #F4E4BC;
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  border-right: 1px dashed rgba(122, 14, 31, 0.45);
}

/* Sello dashed dorado decorativo arriba del stub — imita el "stamp"
   del taquillero perforando el ticket. */
.lfe-collab__item::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 28px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px dashed rgba(244, 228, 188, 0.7);
  z-index: 3;
  pointer-events: none;
}

.lfe-collab__item .lfe-collab__name,
.lfe-collab__item .lfe-collab__origin,
.lfe-collab__item .lfe-collab__credit {
  display: block;
  grid-column: 2;
}

.lfe-collab__name {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  color: #1F1A0F;
  padding: 1rem 1.1rem 0.25rem;
  line-height: 1.15;
}

.lfe-collab__origin {
  font-family: var(--lfe-font-eyebrow);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lfe-crimson, #7A0E1F);
  padding: 0 1.1rem 0.5rem;
}

.lfe-collab__origin::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.5em;
  opacity: 0.6;
}

.lfe-collab__credit {
  font-family: var(--lfe-font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4A3F2E; /* tinta marrón oscuro */
  padding: 0 1.1rem 1rem;
}

/* --- Dos bloques: artistas / compañías, cada uno con su ticket ---------- */

.lfe-collab-group + .lfe-collab-group {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}

.lfe-collab-group__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(240, 232, 214, 0.18);
}

/* Doble clase: gana a `.lfe-section--ivory h3` (tinta oscura sobre fondo noche). */
.lfe-collab-group .lfe-collab-group__title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--bone);
  margin: 0;
}

.lfe-collab-group__lead {
  font-size: 0.95rem;
  color: var(--bone-dim);
  margin: 0;
}

/* El stub ocupa todo el alto del ticket, no solo la fila del nombre. */
.lfe-collab__item::before {
  grid-row: 1 / span 3;
}

/* Ticket de compañía: pase dorado con tinta azul noche y stub "ADMIT ALL".
   Mas ancho que el de artista: son menos y el nombre suele ser largo. */
.lfe-collab--companies {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.lfe-collab--companies .lfe-collab__item {
  grid-template-columns: 64px 1fr;
  min-height: 150px;
  background:
    radial-gradient(ellipse at top right, rgba(255, 255, 255, 0.28) 0%, transparent 55%),
    linear-gradient(135deg, var(--stage-gold-bright, #FAD879) 0%, var(--stage-gold, #F2B33D) 100%);
  border-color: rgba(10, 18, 53, 0.35);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.25),
    inset 0 0 0 4px rgba(242, 179, 61, 1),
    inset 0 0 0 5px rgba(10, 18, 53, 0.4);
}

.lfe-collab--companies .lfe-collab__item::before {
  content: "ADMIT\A ALL";
  background:
    repeating-linear-gradient(
      180deg,
      var(--cosmos-deep, #0A1235) 0px,
      var(--cosmos-deep, #0A1235) 8px,
      var(--cosmos-mid, #1A2A6B) 8px,
      var(--cosmos-mid, #1A2A6B) 10px
    );
  color: var(--stage-gold-bright, #FAD879);
  border-right-color: rgba(10, 18, 53, 0.55);
}

.lfe-collab--companies .lfe-collab__item::after {
  left: 32px;
  border-color: rgba(250, 216, 121, 0.75);
}

.lfe-collab--companies .lfe-collab__name {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  color: var(--cosmos-deep, #0A1235);
  padding: 1.15rem 1.25rem 0.3rem;
}

.lfe-collab--companies .lfe-collab__origin {
  color: var(--cosmos-deep, #0A1235);
  padding-inline: 1.25rem;
}

.lfe-collab--companies .lfe-collab__credit {
  color: rgba(10, 18, 53, 0.82);
  padding: 0 1.25rem 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
  .lfe-collab__item {
    transition: none;
  }
  .lfe-collab__item:hover {
    transform: none;
  }
}

/* =========================================================================
   SHOWS GRID — HOVER REFINEMENT v9.4
   Marco dorado animado + bloom dorado + meta CTA con subrayado expansivo.
   ========================================================================= */

.lfe-show-card { position: relative; }

/* Marco gradient sunset abrazando el cartel en hover. */
.lfe-show-card__media::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 6px;
  background: var(--bg-sunset, linear-gradient(135deg, #F2B33D 0%, #F89B3A 50%, #B83A78 100%));
  z-index: -1;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 360ms var(--lfe-ease-out), transform 460ms var(--lfe-ease-out);
  pointer-events: none;
}

.lfe-show-card:hover .lfe-show-card__media::before,
.lfe-show-card:focus-within .lfe-show-card__media::before {
  opacity: 1;
  transform: scale(1);
}

/* Bloom dorado tras la card en hover. */
.lfe-show-card::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 12px;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(242, 179, 61, 0.35), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 480ms ease-out;
  z-index: -2;
  pointer-events: none;
}

.lfe-show-card:hover::before,
.lfe-show-card:focus-within::before { opacity: 1; }

.lfe-show-card__body { transition: transform 380ms var(--lfe-ease-out); }
.lfe-show-card:hover .lfe-show-card__body,
.lfe-show-card:focus-within .lfe-show-card__body { transform: translateY(-2px); }

/* CTA "VER FICHA" subrayado expansivo on hover. */
.lfe-show-card__cta {
  position: relative;
  transition: color 240ms ease-out, opacity 240ms ease-out;
}
.lfe-show-card__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--stage-gold-bright, #FAD879);
  transition: width 360ms var(--lfe-ease-out);
}
.lfe-show-card:hover .lfe-show-card__cta::after,
.lfe-show-card:focus-within .lfe-show-card__cta::after { width: 100%; }
.lfe-show-card:hover .lfe-show-card__cta,
.lfe-show-card:focus-within .lfe-show-card__cta {
  color: var(--stage-gold-bright, #FAD879);
  opacity: 1;
}

/* Zoom + brillo de la imagen on hover. */
.lfe-show-card__media img {
  transition: transform 480ms var(--lfe-ease-out), filter 360ms ease-out;
}
.lfe-show-card:hover .lfe-show-card__media img,
.lfe-show-card:focus-within .lfe-show-card__media img {
  transform: scale(1.03);
  filter: brightness(1.06) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-show-card,
  .lfe-show-card__media::before,
  .lfe-show-card::before,
  .lfe-show-card__body,
  .lfe-show-card__cta::after,
  .lfe-show-card__media img,
  .lfe-collab__item {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   PÁGINA /equipo · team-page-intro
   ========================================================================= */

.lfe-team-page-intro {
  padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3rem);
}

.lfe-team-page-intro__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lfe-team-page-intro__eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lfe-team-page-intro__title {
  font-family: var(--lfe-font-display);
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.1;
  color: var(--bone);
  margin: 0;
  max-width: 22ch;
}

.lfe-team-page-intro__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: var(--bone-dim);
  max-width: 62ch;
  margin: 0;
}

/* =========================================================================
   PAGE · HISTORIA (v9.10) — hero + timeline + manifiesto
   ========================================================================= */

.lfe-historia-hero { padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3rem); }
.lfe-historia-hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lfe-historia-hero__eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lfe-historia-hero__title {
  font-family: var(--lfe-font-display); font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.05;
  color: var(--bone); margin: 0; max-width: 22ch;
  text-shadow: 0 0 24px rgba(242, 179, 61, 0.18);
}
.lfe-historia-hero__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6;
  color: var(--bone-dim); max-width: 64ch; margin: 0.5rem 0 0;
}

.lfe-historia-timeline { padding-block: clamp(3rem, 6vw, 5rem); }
.lfe-historia-timeline__header { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.lfe-historia-timeline__header .lfe-eyebrow { color: var(--stage-gold); }
.lfe-historia-timeline__header .lfe-h2 {
  font-family: var(--lfe-font-display); font-style: italic;
  color: var(--bone); margin-top: 0.5rem;
}
.lfe-historia-timeline__list {
  position: relative; list-style: none; margin: 0 auto;
  padding: 0 0 0 clamp(2rem, 6vw, 4rem); max-width: 880px;
}
.lfe-historia-timeline__list::before {
  content: ""; position: absolute;
  left: clamp(0.75rem, 2vw, 1.5rem); top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, var(--stage-gold) 0%, var(--velvet-magenta) 50%, var(--mist-violet) 100%);
  opacity: 0.55;
}
.lfe-historia-timeline__item {
  position: relative;
  padding: 0 0 clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem);
}
.lfe-historia-timeline__item:last-child { padding-bottom: 0; }
.lfe-historia-timeline__dot {
  position: absolute;
  left: calc(clamp(0.75rem, 2vw, 1.5rem) - 4px - clamp(1.25rem, 3vw, 2rem));
  top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--stage-gold);
  box-shadow: 0 0 0 4px rgba(242, 179, 61, 0.18), 0 0 18px rgba(242, 179, 61, 0.45);
}
.lfe-historia-timeline__year {
  display: inline-block; font-family: var(--lfe-font-display); font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem); color: var(--stage-gold);
  line-height: 1; margin-bottom: 0.5rem;
}
.lfe-historia-timeline__title {
  font-family: var(--lfe-font-display); font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--bone);
  margin: 0 0 0.5rem; line-height: 1.2;
}
.lfe-historia-timeline__text {
  font-size: 0.95rem; line-height: 1.55; color: var(--bone-dim);
  margin: 0; max-width: 56ch;
}

/* v19: luces de escena — vara de focos, un fresnel por pilar
   (lfe_stage_lights('foco'), bloque STAGE LIGHTS). */
.lfe-historia-manifiesto {
  --lfe-pilar-gap: clamp(1.5rem, 3vw, 2.5rem);
  --lfe-pilar-throw: clamp(4.5rem, 8vw, 7rem);
  padding-block: clamp(5rem, 10vw, 8rem);
}
.lfe-historia-manifiesto__inner { text-align: center; }
.lfe-historia-manifiesto__inner .lfe-eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lfe-historia-manifiesto__title {
  font-family: var(--lfe-font-display); font-style: italic;
  font-size: clamp(2rem, 4vw, 3.25rem); color: var(--bone);
  margin: 0.5rem 0 clamp(2.5rem, 5vw, 4rem);
}
.lfe-historia-manifiesto__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Cada fila deja sitio a su vara por encima. */
  column-gap: var(--lfe-pilar-gap);
  row-gap: calc(var(--lfe-pilar-throw) + var(--lfe-pilar-gap) * 0.5);
  padding-top: var(--lfe-pilar-throw);
  text-align: left;
}
@media (max-width: 720px) { .lfe-historia-manifiesto__list { grid-template-columns: 1fr; } }
/* v19: en ancho, cuatro pilares en fila bajo una sola vara. */
@media (min-width: 1100px) {
  .lfe-historia-manifiesto__inner { max-width: 1200px; }
  .lfe-historia-manifiesto__title { max-width: 720px; margin-inline: auto; }
  .lfe-historia-manifiesto__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* v18: card playbill crema (coherente con las citas de prensa de la home).
   v19: foco cenital encima — punto caliente arriba y halo dorado hacia la vara. */
.lfe-historia-manifiesto__item {
  position: relative; padding: clamp(1.5rem, 2.5vw, 2rem);
  background:
    radial-gradient(80% 42% at 50% 0%, rgba(255, 250, 236, 0.95), rgba(255, 250, 236, 0) 100%),
    linear-gradient(180deg, #f7f1e4 0%, #efe6d3 55%, #e9dec7 100%);
  border: 1px solid rgba(200, 165, 91, 0.85); border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(10, 10, 10, 0.10),
    0 18px 40px -14px rgba(10, 10, 10, 0.55),
    0 -14px 44px -16px rgba(242, 179, 61, 0.34);
}
.lfe-historia-manifiesto__num {
  font-family: var(--lfe-font-display); font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.75rem);
  color: #8b1a2a;
  display: block; line-height: 1; margin-bottom: 0.75rem;
}
.lfe-historia-manifiesto__item h3 {
  font-family: var(--lfe-font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: #5a0f1a;
  margin: 0 0 0.5rem; line-height: 1.2;
}
.lfe-historia-manifiesto__item p {
  font-size: 0.95rem; line-height: 1.55; color: #574a37; margin: 0;
}

/* =========================================================================
   PAGE · PRENSA (v9.10) — hero + grid quotes extendido + dossier
   ========================================================================= */

.lfe-prensa-hero { padding-block: clamp(6rem, 12vw, 9rem) clamp(2rem, 4vw, 3rem); }
.lfe-prensa-hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lfe-prensa-hero__eyebrow {
  background: var(--bg-sunset);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lfe-prensa-hero__title {
  font-family: var(--lfe-font-display); font-style: italic;
  font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.05;
  color: var(--bone); margin: 0; max-width: 22ch;
  text-shadow: 0 0 24px rgba(242, 179, 61, 0.18);
}
.lfe-prensa-hero__lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6;
  color: var(--bone-dim); max-width: 64ch; margin: 0.5rem 0 0;
}
.lfe-prensa-quotes-extended .lfe-press-quotes__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.lfe-prensa-dossier { padding-block: clamp(3rem, 6vw, 5rem) clamp(5rem, 10vw, 8rem); }
/* v18: card playbill crema (coherente con las citas de prensa de la home). */
.lfe-prensa-dossier__card {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, #f7f1e4 0%, #efe6d3 55%, #e9dec7 100%);
  border: 1px solid rgba(200, 165, 91, 0.85);
  border-radius: 4px;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow:
    0 2px 4px rgba(10, 10, 10, 0.10),
    0 18px 40px -14px rgba(10, 10, 10, 0.55),
    0 0 34px -8px rgba(242, 179, 61, 0.16);
}
.lfe-prensa-dossier__card::before { display: none; }
/* Eyebrow en crimson (el oro no contrasta sobre crema) */
.lfe-prensa-dossier__card .lfe-eyebrow {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #8b1a2a;
}
.lfe-prensa-dossier__title {
  font-family: var(--lfe-font-display); font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem); color: #5a0f1a;
  margin: 0.5rem 0 1rem;
}
.lfe-prensa-dossier__lead {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.55;
  color: #574a37; max-width: 54ch; margin: 0 auto 1.5rem;
}
.lfe-prensa-dossier__ctas { justify-content: center; }
.lfe-prensa-dossier__note {
  margin: 1.25rem 0 0; font-size: var(--lfe-fs-xs, 0.75rem);
  letter-spacing: 0.08em; color: #6b5d4a; opacity: 1;
}
/* Botón ghost adaptado al fondo claro (el outline oro no se ve en crema) */
.lfe-prensa-dossier__card .lfe-btn--ghost {
  color: #5a0f1a;
  border-color: rgba(139, 26, 42, 0.55);
}
.lfe-prensa-dossier__card .lfe-btn--ghost:hover,
.lfe-prensa-dossier__card .lfe-btn--ghost:focus-visible {
  color: #5a0f1a;
  border-color: #8b1a2a;
  background: rgba(139, 26, 42, 0.10);
}

/* =========================================================================
   v0.11 — PAGE HEROES con backdrop fotográfico (material clienta)
   ========================================================================= */

.lfe-page-hero--backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 14vw, 11rem) clamp(3rem, 5vw, 4rem);
}
.lfe-page-hero__backdrop {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--page-hero-bg);
  background-size: cover; background-position: center center;
  filter: brightness(0.55) saturate(0.95);
  transform: scale(1.02);
}
.lfe-page-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 100% at 50% 100%, rgba(184, 58, 120, 0.30), transparent 70%),
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(242, 179, 61, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(10, 18, 53, 0.50) 0%, rgba(10, 18, 53, 0.75) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .lfe-page-hero__backdrop { transform: none; } }

/* =========================================================================
   v0.11 — BACKSTAGE GALLERY masonry-ish (24 fotos archivo cliente)
   ========================================================================= */

.lfe-backstage-gallery { padding-block: clamp(3rem, 6vw, 5rem); }
.lfe-backstage-gallery__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (max-width: 920px) { .lfe-backstage-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .lfe-backstage-gallery__grid { grid-template-columns: 1fr; } }

.lfe-backstage-gallery__item {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(242, 179, 61, 0.12);
  background: rgba(10, 18, 53, 0.4);
  transition: transform 320ms var(--lfe-ease-out), box-shadow 320ms var(--lfe-ease-out), border-color 320ms;
}
.lfe-backstage-gallery__item:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 179, 61, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(242, 179, 61, 0.18);
  z-index: 2;
}
.lfe-backstage-gallery__figure {
  margin: 0; display: block; aspect-ratio: 297 / 210; /* A4 apaisado: páginas de dosier */ overflow: hidden;
}
.lfe-backstage-gallery__figure picture,
.lfe-backstage-gallery__figure img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--lfe-ease-out), filter 360ms;
}
.lfe-backstage-gallery__item:hover img {
  transform: scale(1.05);
  filter: brightness(1.05) saturate(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .lfe-backstage-gallery__item,
  .lfe-backstage-gallery__figure img { transition: none !important; }
}

/* Botón que envuelve cada foto (para abrir el lightbox) */
.lfe-backstage-gallery__btn {
  display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: none; cursor: zoom-in; color: var(--lfe-ivory, #F0E8D6);
}
.lfe-backstage-gallery__zoom {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--lfe-ivory, #F0E8D6);
  background: rgba(11, 10, 9, 0.55); border: 1px solid rgba(242, 179, 61, 0.4);
  border-radius: 50%;
  opacity: 0; transform: scale(0.85);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}
.lfe-backstage-gallery__btn:hover .lfe-backstage-gallery__zoom,
.lfe-backstage-gallery__btn:focus-visible .lfe-backstage-gallery__zoom {
  opacity: 1; transform: scale(1);
}

/* === Lightbox backstage — navegable, capado a viewport === */
.lfe-bs-lb {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  pointer-events: none;
}
.lfe-bs-lb[hidden] { display: none; }
.lfe-bs-lb.is-open { pointer-events: auto; }
.lfe-bs-lb__backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; cursor: zoom-out;
  background: rgba(7, 8, 12, 0.90); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 280ms ease;
}
.lfe-bs-lb.is-open .lfe-bs-lb__backdrop { opacity: 1; }

.lfe-bs-lb__stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: min(1200px, 94vw); max-height: 88vh;
  opacity: 0; transform: scale(0.97);
  transition: opacity 320ms var(--lfe-ease-out, ease-out), transform 320ms var(--lfe-ease-out, ease-out);
}
.lfe-bs-lb.is-open .lfe-bs-lb__stage { opacity: 1; transform: scale(1); }

.lfe-bs-lb__img {
  display: block; max-width: 100%; max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.95);
}

.lfe-bs-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.8rem; line-height: 1; color: var(--lfe-ivory, #F0E8D6);
  background: rgba(11, 10, 9, 0.55); border: 1px solid rgba(242, 179, 61, 0.4);
  border-radius: 50%; cursor: pointer; transition: background 200ms ease;
}
.lfe-bs-lb__nav:hover, .lfe-bs-lb__nav:focus-visible { background: var(--lfe-crimson, #8b1a2a); }
.lfe-bs-lb__nav--prev { left: -0.5rem; }
.lfe-bs-lb__nav--next { right: -0.5rem; }

.lfe-bs-lb__counter {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 3;
  font-size: 0.72rem; letter-spacing: 0.14em; color: var(--lfe-ivory, #F0E8D6);
  background: rgba(11, 10, 9, 0.6); border: 1px solid rgba(242, 179, 61, 0.3);
  border-radius: 99px; padding: 0.25rem 0.6rem;
}
.lfe-bs-lb__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 2rem 1rem 0.8rem; text-align: center;
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--lfe-ivory, #F0E8D6);
  background: linear-gradient(180deg, transparent, rgba(7, 8, 12, 0.8));
  pointer-events: none;
}
.lfe-bs-lb__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 4;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; color: var(--lfe-ivory, #F0E8D6);
  background: rgba(11, 10, 9, 0.6); border: 1px solid rgba(242, 179, 61, 0.4);
  border-radius: 50%; cursor: pointer; transition: background 200ms ease, transform 200ms ease;
}
.lfe-bs-lb__close:hover, .lfe-bs-lb__close:focus-visible {
  background: var(--lfe-crimson, #8b1a2a); transform: rotate(90deg);
}
@media (max-width: 600px) {
  .lfe-bs-lb__nav--prev { left: 0.2rem; }
  .lfe-bs-lb__nav--next { right: 0.2rem; }
  .lfe-bs-lb__nav { width: 42px; height: 42px; }
}

/* === Archive CTA "a medida" — vitrina de escenario (dirección de arte) ====
   Antes: titular + botones flotando sin contenedor. Ahora: panel gilt
   contenido con foco cenital dorado, el "telon final" del catalogo. */
.lfe-archive-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: min(1040px, 92vw);
  margin-inline: auto;
  margin-block: clamp(3rem, 6vw, 5rem);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  text-align: center;
  border-radius: 4px;
  border: 1px solid rgba(242, 179, 61, 0.38);
  border-top-color: rgba(242, 179, 61, 0.62);
  background:
    radial-gradient(120% 130% at 50% -18%,
      rgba(242, 179, 61, 0.16) 0%,
      rgba(242, 179, 61, 0.05) 34%,
      transparent 62%),
    linear-gradient(180deg, rgba(20, 17, 13, 0.72) 0%, rgba(10, 10, 10, 0.92) 100%);
  box-shadow:
    0 22px 60px -22px rgba(0, 0, 0, 0.70),
    0 0 64px -14px rgba(242, 179, 61, 0.18);
}

/* Cornisa de proscenio: filo de luz dorado centrado en el borde superior */
.lfe-archive-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 22vw, 240px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--stage-gold, #F2B33D) 50%, transparent);
  opacity: 0.75;
  pointer-events: none;
}

.lfe-archive-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin-inline: auto;
}

.lfe-archive-cta__eyebrow {
  display: block;
  margin-bottom: 1rem;
}

.lfe-archive-cta .lfe-h3 {
  font-family: var(--lfe-font-display, 'Clash Display'), sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--lfe-ivory, #f5efe1);
  text-wrap: balance;
  margin: 0;
}

.lfe-archive-cta .lfe-lead {
  font-family: var(--lfe-font-body, 'General Sans'), sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--lfe-ivory-muted, #C9C0AE);
  max-width: 46ch;
  margin: 1rem auto 0;
  text-wrap: pretty;
}

.lfe-archive-cta .lfe-cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

@media (max-width: 520px) {
  .lfe-archive-cta .lfe-cta-group { flex-direction: column; }
  .lfe-archive-cta .lfe-cta-group .lfe-btn { width: 100%; }
}

/* =========================================================================
   PAGE HEADERS v13 — "Programa de mano teatral"
   Sistema unificado para /historia, /espectaculos, /equipo, /backstage,
   /prensa, /contacto. Concepto: cubierta de un acto del dossier de gira.
   Número romano outline gigante, grid 12 col asimétrico, mask direccional,
   filete oro vertical, sello postal, meta-strip footer.
   ========================================================================= */

.lfe-ph {
  --ph-bone: var(--lfe-bone, #F0E8D6);
  --ph-bone-dim: rgba(240, 232, 214, 0.72);
  --ph-gold: var(--lfe-gold, #F2B33D);
  --ph-gold-soft: rgba(242, 179, 61, 0.4);
  --ph-cosmos: var(--lfe-cosmos-deep, #0A1235);
  --ph-magenta: var(--lfe-magenta, #B83A78);

  position: relative;
  isolation: isolate;
  /* v13.2: tamaño FIJO en todos los headers — compacto tipo banner. */
  padding: 2rem 0 1.5rem;
  overflow: hidden;
  background: var(--ph-cosmos);
}

/* v13.1: número romano eliminado (era visualmente excesivo). */
.lfe-ph__act {
  display: none !important;
}

/* === Grid 12 col asimétrico — compacto v13.1 === */

.lfe-ph__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  /* v14: anclaje SUPERIOR + alturas reservadas en título/lead → todos los
     elementos caen a la misma altura Y en las 6 páginas (homogeneidad real). */
  align-items: start;
  /* v14: altura FIJA EXACTA, un poco mayor para que el lead respire. */
  height: 288px;
  min-height: 288px;
  max-width: var(--lfe-container, 1280px);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.lfe-ph__lead {
  grid-column: 2 / 9;
  grid-row: 1;  /* v13.2: misma fila que media — evita que grid cree fila implicita extra */
  position: relative;
  z-index: 3;
  align-self: start;  /* v14: anclado arriba junto al grid */
}

.lfe-ph__media {
  grid-column: 7 / 13;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  /* v14: altura FIJA = misma que el grid. */
  height: 288px;
  min-height: 288px;
  z-index: 2;
  overflow: hidden;
}

.lfe-ph__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ph-bg, none);
  background-size: cover;
  /* v13.1: bajar viewport de la imagen (antes center → ahora center 65%) */
  background-position: center 65%;
  filter: grayscale(0.4) contrast(1.08) saturate(0.92) brightness(0.85);
  z-index: -1;
}

/* Mask direccional — la imagen sangra hacia la derecha,
   el lado izquierdo se desvanece sobre cosmos. */
.lfe-ph__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg,
      var(--ph-cosmos) 0%,
      rgba(10, 18, 53, 0.6) 30%,
      transparent 65%),
    linear-gradient(180deg,
      transparent 65%,
      rgba(10, 18, 53, 0.85) 100%);
}

/* === Regla vertical 1px oro full-height entre col 8 y 9 === */

.lfe-ph__rule-v {
  display: block;
  position: absolute;
  z-index: 3;
  top: clamp(3rem, 6vw, 5rem);
  bottom: clamp(2rem, 3vw, 3rem);
  left: 66.5%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(242, 179, 61, 0.5) 18%,
    rgba(242, 179, 61, 0.5) 82%,
    transparent 100%);
  pointer-events: none;
}

/* === Hairlines horizontales (Pentagram-style) === */

.lfe-ph__rule {
  display: block;
  height: 1px;
  background: rgba(242, 179, 61, 0.55);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}

.lfe-ph__rule--top { width: 96px; margin-bottom: 1.25rem; }
.lfe-ph__rule--mid { width: 48px; margin: 1.5rem 0 1.25rem; }

/* === Eyebrow (nombre de la sección) === */

.lfe-ph__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--lfe-font-sans, 'Inter'), sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ph-gold);
  margin: 0;
}

/* === H1 título display === */

.lfe-ph__title {
  /* v13.3: Cormorant italic real (itálica auténtica, no faux). Italiana no
     trae archivo itálico → la cursiva sintética resultaba ilegible. */
  font-family: var(--lfe-font-headline, 'Cormorant'), Georgia, serif;
  font-style: italic;
  font-weight: 500;
  /* Cormorant tiene x-height baja: sube el cuerpo para igualar presencia. */
  font-size: 2.7rem;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--ph-bone);
  margin: 0.3rem 0 0;
  /* v14: reserva SIEMPRE 2 líneas — los títulos de 1 línea ocupan el mismo
     alto que los de 2, así el lead y la meta caen a la misma altura en todas
     las páginas. */
  min-height: 2.1em;
  max-width: 26ch;
  text-wrap: balance;
  hanging-punctuation: first last;
  text-shadow: 0 1px 12px rgba(10, 18, 53, 0.35);
}

/* === Lead — reserva 3 líneas: homogéneo y sin cortes de frase === */

.lfe-ph__body {
  font-family: var(--lfe-font-sans, 'Inter'), sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ph-bone-dim);
  margin: 0;
  max-width: 46ch;
  /* v14: los copys se ajustaron a ≤3 líneas; el clamp es solo una red de
     seguridad. min-height reserva las 3 líneas para que la meta caiga a la
     misma altura aunque el lead sea más corto. */
  min-height: 4.65em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Meta-strip footer (año · lugar · acto) === */

.lfe-ph__meta {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  font-family: var(--lfe-font-sans, 'Inter'), sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 179, 61, 0.72);
  overflow: hidden;
  white-space: nowrap;
}

.lfe-ph__meta li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lfe-ph__meta li + li::before {
  content: "·";
  color: rgba(242, 179, 61, 0.45);
  margin-left: -0.6rem;
}

/* === Sello postal SVG (top-right del bloque texto) === */

.lfe-ph__stamp {
  position: absolute;
  top: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  z-index: 4;
  /* v13.1: sello reducido (antes 92px → ahora 64px) */
  width: 64px;
  height: 64px;
  transform: rotate(-8deg);
  color: var(--ph-gold);
  opacity: 0.7;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}

.lfe-ph__media:hover ~ .lfe-ph__stamp,
.lfe-ph:hover .lfe-ph__stamp {
  transform: rotate(-3deg) scale(1.05);
}

/* === Variantes por página (data-page) === */

.lfe-ph[data-page="historia"] .lfe-ph__media::before {
  filter: grayscale(0.5) contrast(1.1) saturate(0.85) brightness(0.78);
}
.lfe-ph[data-page="historia"] .lfe-ph__media::after {
  background:
    linear-gradient(92deg, var(--ph-cosmos) 0%, rgba(10, 18, 53, 0.55) 30%, transparent 65%),
    linear-gradient(180deg, transparent 60%, rgba(242, 179, 61, 0.15) 90%, rgba(10, 18, 53, 0.85) 100%);
}

.lfe-ph[data-page="prensa"] .lfe-ph__media::before {
  filter: sepia(0.3) contrast(1.05) saturate(0.92) brightness(0.85);
}

.lfe-ph[data-page="backstage"] .lfe-ph__media::before {
  filter: grayscale(0.85) contrast(1.12) brightness(0.78);
}
.lfe-ph[data-page="backstage"] .lfe-ph__media::after {
  background:
    linear-gradient(92deg, var(--ph-cosmos) 0%, rgba(10, 18, 53, 0.65) 35%, transparent 70%),
    linear-gradient(180deg, transparent 65%, rgba(10, 18, 53, 0.92) 100%);
}

.lfe-ph[data-page="equipo"] .lfe-ph__media::after {
  background:
    linear-gradient(92deg, var(--ph-cosmos) 0%, rgba(10, 18, 53, 0.55) 30%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 50% 50%, transparent 30%, rgba(184, 58, 120, 0.18) 100%),
    linear-gradient(180deg, transparent 65%, rgba(10, 18, 53, 0.88) 100%);
}

.lfe-ph[data-page="contacto"] .lfe-ph__media::after {
  background:
    linear-gradient(92deg, var(--ph-cosmos) 0%, rgba(10, 18, 53, 0.6) 32%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(184, 58, 120, 0.22) 90%, rgba(10, 18, 53, 0.9) 100%);
}

.lfe-ph[data-page="espectaculos"] .lfe-ph__media::after {
  background:
    linear-gradient(92deg, var(--ph-cosmos) 0%, rgba(10, 18, 53, 0.55) 30%, transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(242, 179, 61, 0.18) 90%, rgba(10, 18, 53, 0.88) 100%);
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
  .lfe-ph__grid {
    /* minmax(0, …): con 1fr la columna no baja del ancho de la meta (nowrap)
       y a 320px desbordaba hasta 508px. */
    grid-template-columns: minmax(0, 1fr);
    /* v14: en móvil el contenido apila y crece libre — se anula la altura fija. */
    height: auto;
    min-height: auto;
    gap: 0;
  }
  .lfe-ph__lead {
    grid-column: 1;
    order: 2;
    align-self: auto;
    padding: 1.25rem 0 0;
  }
  .lfe-ph__title {
    min-height: 0;  /* v14: sin reserva de 2 líneas en móvil */
  }
  .lfe-ph__body {
    min-height: 0;
  }
  .lfe-ph__media {
    grid-column: 1;
    order: 1;
    height: auto;
    min-height: 160px;
    aspect-ratio: 16 / 7;
  }
  .lfe-ph__media::after {
    background:
      linear-gradient(180deg, transparent 0%, transparent 50%, var(--ph-cosmos) 100%);
  }
  .lfe-ph__rule-v {
    display: none;
  }
  .lfe-ph__stamp {
    width: 48px;
    height: 48px;
    right: 1rem;
    top: 1rem;
  }
}

@media (max-width: 640px) {
  .lfe-ph__title {
    font-size: 2.1rem;
    max-width: 18ch;
  }
}

/* === MOTION ENTRY (CSS-driven, lightweight) === */

@media (prefers-reduced-motion: no-preference) {
  .lfe-ph__act {
    animation: lfe-ph-act 1200ms cubic-bezier(.2,.7,.2,1) both;
  }
  .lfe-ph__rule--top {
    animation: lfe-ph-rule 600ms cubic-bezier(.2,.7,.2,1) 200ms both;
  }
  .lfe-ph__eyebrow {
    animation: lfe-ph-fade-up 500ms ease-out 380ms both;
  }
  .lfe-ph__title {
    animation: lfe-ph-fade-up 700ms cubic-bezier(.2,.7,.2,1) 480ms both;
  }
  .lfe-ph__rule--mid {
    animation: lfe-ph-rule 500ms cubic-bezier(.2,.7,.2,1) 760ms both;
  }
  .lfe-ph__body {
    animation: lfe-ph-fade-up 500ms ease-out 860ms both;
  }
  .lfe-ph__meta {
    animation: lfe-ph-fade-up 500ms ease-out 1000ms both;
  }
  .lfe-ph__stamp {
    animation: lfe-ph-stamp 700ms cubic-bezier(.34, 1.56, .64, 1) 900ms both;
  }
  .lfe-ph__media::before {
    animation: lfe-ph-media 1400ms cubic-bezier(.2,.7,.2,1) both;
  }
}

@keyframes lfe-ph-act {
  from { opacity: 0; transform: translateX(-3vw) scale(1.05); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes lfe-ph-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes lfe-ph-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lfe-ph-stamp {
  from { opacity: 0; transform: rotate(-20deg) scale(0.6); }
  to   { opacity: 0.75; transform: rotate(-8deg) scale(1); }
}

@keyframes lfe-ph-media {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Compat: oculta los heroes viejos cuando hay variante v13 activa */
.lfe-ph + .lfe-page-hero--backdrop { display: none; }

/* =========================================================================
   STAGE LIGHTS — familia "luces de escena" (inc/stage-lights.php)
   Mismo lenguaje que el CTA B2B (.lfe-stage-cta): luz dorada en modo screen
   sobre fondo oscuro, que se intensifica en hover. Cada variante es un
   aparato de teatro distinto para que las bandas no se repitan.
   ========================================================================= */

.lfe-lit {
  --lfe-light: var(--stage-gold-bright, #FAD879);
  --lfe-light-warm: var(--stage-gold, #F2B33D);
  --lfe-light-intensity: 0.85;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.lfe-lit:hover,
.lfe-lit:focus-within {
  --lfe-light-intensity: 1;
}

/* El contenido siempre por encima de la capa de luz. */
.lfe-lit > :not(.lfe-lights) {
  position: relative;
  z-index: 1;
}

.lfe-lights {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--lfe-light-intensity);
  transition: opacity 600ms ease;
}

.lfe-lights__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lfe-lights__stop {
  stop-color: var(--lfe-light);
}

/* --- Cenital: foco vertical + charco en el suelo ------------------------ */

.lfe-lights__lens {
  fill: var(--lfe-light);
  opacity: 0.55;
  filter: blur(3px);
}

/* --- Candilejas: fila de luces a ras de escenario ----------------------- */

.lfe-lights--candilejas .lfe-lights__wash,
.lfe-lights--candilejas .lfe-lights__bulbs {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
}

/* Baño cálido que sube desde el proscenio. */
.lfe-lights--candilejas .lfe-lights__wash {
  top: 0;
  background:
    radial-gradient(90% 55% at 50% 100%,
      color-mix(in srgb, var(--lfe-light-warm) 34%, transparent) 0%,
      color-mix(in srgb, var(--lfe-light-warm) 12%, transparent) 50%,
      transparent 78%);
}

/* Bombillas: un punto brillante con halo, repetido cada 56px. */
.lfe-lights--candilejas .lfe-lights__bulbs {
  height: 64px;
  background:
    radial-gradient(circle at 50% calc(100% - 10px),
      var(--lfe-light) 0 2.5px,
      color-mix(in srgb, var(--lfe-light) 45%, transparent) 3.5px,
      color-mix(in srgb, var(--lfe-light-warm) 14%, transparent) 14px,
      transparent 30px)
    center bottom / 56px 64px repeat-x;
  border-bottom: 1px solid color-mix(in srgb, var(--lfe-light-warm) 45%, transparent);
}

/* --- Seguidor: cañón de seguimiento ------------------------------------ */

@property --lfe-spot-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --lfe-spot-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 42%;
}

.lfe-lit--seguidor {
  transition: --lfe-spot-x 700ms cubic-bezier(0.22, 1, 0.36, 1),
              --lfe-spot-y 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Borde definido (como un cañón real) y halo exterior tenue. */
.lfe-lights--seguidor .lfe-lights__spot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle clamp(9rem, 22vw, 15rem) at var(--lfe-spot-x, 50%) var(--lfe-spot-y, 42%),
      color-mix(in srgb, var(--lfe-light-warm) 22%, transparent) 0%,
      color-mix(in srgb, var(--lfe-light-warm) 15%, transparent) 88%,
      transparent 100%),
    radial-gradient(circle clamp(16rem, 38vw, 26rem) at var(--lfe-spot-x, 50%) var(--lfe-spot-y, 42%),
      color-mix(in srgb, var(--lfe-light-warm) 7%, transparent) 0%,
      transparent 100%);
}

/* --- Fantasma: la "ghost light" del teatro vacío ----------------------- */

.lfe-lights--fantasma {
  mix-blend-mode: normal;
}

.lfe-lights__rig {
  position: absolute;
  left: clamp(1rem, 8vw, 9rem);
  bottom: 0;
  width: clamp(64px, 7vw, 104px);
  aspect-ratio: 120 / 400;
  max-height: 78%;
}

.lfe-lights__lamp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lfe-lights__stand {
  stroke: color-mix(in srgb, var(--bone, #F0E8D6) 38%, transparent);
  stroke-width: 3;
  stroke-linecap: round;
}

.lfe-lights__bulb {
  fill: var(--lfe-light);
}

.lfe-lights__floor {
  fill: color-mix(in srgb, var(--lfe-light-warm) 30%, transparent);
  filter: blur(4px);
}

/* Halo centrado en la bombilla (10% del alto del pie). */
.lfe-lights__glow {
  position: absolute;
  left: 50%;
  top: 10%;
  width: clamp(420px, 60vw, 900px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--lfe-light) 34%, transparent) 0%,
    color-mix(in srgb, var(--lfe-light-warm) 12%, transparent) 22%,
    color-mix(in srgb, var(--lfe-light-warm) 4%, transparent) 45%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: lfe-ghost-flicker 7s steps(1, end) infinite;
}

/* Parpadeo irregular y breve: casi siempre encendida. */
@keyframes lfe-ghost-flicker {
  0%, 100% { opacity: 1; }
  61%      { opacity: 0.78; }
  62%      { opacity: 1; }
  64%      { opacity: 0.86; }
  65%      { opacity: 1; }
  88%      { opacity: 0.9; }
  89%      { opacity: 1; }
}

@media (max-width: 640px) {
  .lfe-lights__rig {
    left: auto;
    right: 1rem;
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lfe-lights,
  .lfe-lit--seguidor {
    transition: none;
  }
  .lfe-lights__glow {
    animation: none;
  }
}

/* --- Foco: fresnel colgado de la vara, uno por elemento ---------------- */
/* Vive dentro del elemento iluminado y sale por encima de el. El padre
   define --lfe-pilar-gap (hueco entre elementos) y --lfe-pilar-throw
   (distancia de la vara al elemento). */

.lfe-lights--foco {
  --lfe-fixture-w: clamp(36px, 3.2vw, 46px);
  inset: auto;
  left: 50%;
  bottom: 100%;
  /* +2px: el bloque de referencia es la caja de padding, sin el borde del elemento. */
  width: calc(100% + var(--lfe-pilar-gap, 2rem) + 2px);
  height: var(--lfe-pilar-throw, 6rem);
  translate: -50% 0;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Tramo de vara: los tramos contiguos de una fila forman la vara entera. */
.lfe-lights--foco::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bone, #F0E8D6) 24%, transparent);
}

.lfe-lights__fixture {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--lfe-fixture-w);
  height: auto;
  translate: -50% 0;
  overflow: visible;
}

.lfe-lights__body {
  fill: #12111c;
  stroke: color-mix(in srgb, var(--bone, #F0E8D6) 38%, transparent);
  stroke-width: 2.5;
}

.lfe-lights--foco .lfe-lights__lens {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--lfe-light-warm));
  transition: fill 400ms ease, filter 400ms ease;
}

/* Cono: de la lente al borde superior del elemento, bordes suavizados. */
.lfe-lights__beam {
  position: absolute;
  top: calc(var(--lfe-fixture-w) * 0.85);
  bottom: 0;
  inset-inline: calc(var(--lfe-pilar-gap, 2rem) / 2);
  clip-path: polygon(
    calc(50% - var(--lfe-fixture-w) * 0.18) 0,
    calc(50% + var(--lfe-fixture-w) * 0.18) 0,
    100% 100%,
    0 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--lfe-light) 46%, transparent) 0%,
    color-mix(in srgb, var(--lfe-light-warm) 15%, transparent) 70%,
    color-mix(in srgb, var(--lfe-light-warm) 28%, transparent) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mix-blend-mode: screen;
  transition: opacity 500ms ease;
}

/* El técnico elige un pilar: al pasar por uno, los demás bajan. */
@media (hover: hover) and (pointer: fine) {
  .lfe-lit--vara :has(> :hover > .lfe-lights--foco) > :not(:hover) > .lfe-lights--foco .lfe-lights__beam {
    opacity: 0.35;
  }
}

/* --- Marquesina: marco de bombillas de circo --------------------------- */

.lfe-lights__marquee {
  --lfe-bulb-gap: 26px;
  --lfe-bulb: radial-gradient(circle,
    var(--lfe-light) 0 2.5px,
    color-mix(in srgb, var(--lfe-light) 55%, transparent) 3.5px,
    color-mix(in srgb, var(--lfe-light-warm) 18%, transparent) 5.5px,
    transparent 7px);
  position: absolute;
  inset-block: clamp(1rem, min(3.5vw, 3.5svh), 2.25rem);
  inset-inline: max(1rem, 50% - 34rem);
  border: 1px solid color-mix(in srgb, var(--lfe-light-warm) 22%, transparent);
  border-radius: 14px;
  box-shadow:
    inset 0 0 80px -24px color-mix(in srgb, var(--lfe-light-warm) 22%, transparent),
    0 0 80px -28px color-mix(in srgb, var(--lfe-light-warm) 24%, transparent);
}

/* Bombillas centradas sobre la chapa; `round` las reparte a cualquier ancho. */
.lfe-lights__marquee::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    var(--lfe-bulb) left top    / var(--lfe-bulb-gap) 15px round no-repeat,
    var(--lfe-bulb) left bottom / var(--lfe-bulb-gap) 15px round no-repeat,
    var(--lfe-bulb) left top    / 15px var(--lfe-bulb-gap) no-repeat round,
    var(--lfe-bulb) right top   / 15px var(--lfe-bulb-gap) no-repeat round;
}

@media (max-width: 640px) {
  .lfe-lights__marquee {
    inset-inline: 0.625rem;
    border-radius: 10px;
  }
  /* En móvil solo arriba y abajo: los laterales pisarían las cifras. */
  .lfe-lights__marquee::before {
    background:
      var(--lfe-bulb) left top    / var(--lfe-bulb-gap) 15px round no-repeat,
      var(--lfe-bulb) left bottom / var(--lfe-bulb-gap) 15px round no-repeat;
  }
}

/* --- Encendido de función (data-light-cue, stage-lights.js) ------------ */
/* is-armed: a oscuras esperando; is-lit: entra la luz con el retardo de su
   cue (--lfe-cue-delay). Al terminar el JS quita is-armed y todo vuelve al
   estado normal, sin retardos para el hover. */

.lfe-lit--vara [data-light-cue].is-armed:not(.is-lit) {
  filter: brightness(0.28) saturate(0.6);
}

.lfe-lit--vara [data-light-cue].is-armed:not(.is-lit) .lfe-lights__beam {
  opacity: 0;
}

.lfe-lit--vara [data-light-cue].is-armed:not(.is-lit) .lfe-lights__lens {
  fill: color-mix(in srgb, var(--bone, #F0E8D6) 30%, transparent);
  filter: none;
}

/* Las transiciones solo existen al encender: armar es instantáneo. */
.lfe-lit--vara [data-light-cue].is-armed.is-lit {
  transition: filter 900ms var(--lfe-ease-out, ease-out) calc(var(--lfe-cue-delay, 0ms) + 140ms);
}

.lfe-lit--vara [data-light-cue].is-armed.is-lit .lfe-lights__beam,
.lfe-lit--vara [data-light-cue].is-armed.is-lit .lfe-lights__lens {
  transition-delay: var(--lfe-cue-delay, 0ms);
}

/* Marquesina: las bombillas prenden en barrido de izquierda a derecha. */
.lfe-lit--marquesina.is-armed > .lfe-lights {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
          mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

.lfe-lit--marquesina.is-armed:not(.is-lit) > .lfe-lights {
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
}

.lfe-lit--marquesina.is-armed.is-lit > .lfe-lights {
  transition:
    opacity 600ms ease,
    -webkit-mask-position 1700ms cubic-bezier(0.45, 0, 0.2, 1) var(--lfe-cue-delay, 0ms),
    mask-position 1700ms cubic-bezier(0.45, 0, 0.2, 1) var(--lfe-cue-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-lit--vara [data-light-cue].is-armed.is-lit,
  .lfe-lit--marquesina.is-armed.is-lit > .lfe-lights,
  .lfe-lights__beam,
  .lfe-lights--foco .lfe-lights__lens {
    transition: none;
  }
}

/* =========================================================================
   PRODUCCIONES — pagina puente (page-producciones.php): 2 cards grandes,
   Espectaculos y Ambientaciones tematicas. Toda la card es clicable via
   el enlace del titulo (::after estirado).
   ========================================================================= */

.lfe-producciones__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfe-produccion {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(200, 165, 91, 0.22);
  border-radius: var(--lfe-radius-md);
  background-color: var(--lfe-black-soft);
  transition:
    transform    var(--lfe-dur-base) var(--lfe-ease-out),
    border-color var(--lfe-dur-base) var(--lfe-ease-out),
    box-shadow   var(--lfe-dur-base) var(--lfe-ease-out);
}

.lfe-produccion:hover,
.lfe-produccion:focus-within {
  transform: translateY(-4px);
  border-color: var(--lfe-gold);
  box-shadow: var(--lfe-shadow-md);
}

.lfe-produccion__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.lfe-produccion__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--lfe-ease-out);
}

.lfe-produccion:hover .lfe-produccion__media img {
  transform: scale(1.04);
}

.lfe-produccion__badge {
  position: absolute;
  top: var(--lfe-space-4);
  left: var(--lfe-space-4);
  padding: 0.4rem 0.7rem;
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--lfe-black);
  background-color: var(--lfe-gold);
  border-radius: 999px;
}

.lfe-produccion__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--lfe-space-3);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.lfe-produccion__title {
  margin: 0;
  font-family: var(--lfe-font-display);
  font-size: var(--lfe-fs-lg);
  line-height: 1.1;
  text-wrap: balance;
}

.lfe-produccion__link {
  color: var(--lfe-ivory);
  text-decoration: none;
}

.lfe-produccion__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lfe-produccion__link:focus-visible {
  outline: none;
}

.lfe-produccion:has(.lfe-produccion__link:focus-visible) {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 3px;
}

.lfe-produccion__text {
  margin: 0;
  max-width: 46ch;
  color: var(--lfe-ivory-muted, #c9c0ae);
}

.lfe-produccion__cta {
  margin-top: auto;
  padding-top: var(--lfe-space-2);
  font-weight: 600;
  color: var(--lfe-gold);
}

.lfe-produccion__arrow {
  display: inline-block;
  transition: transform var(--lfe-dur-fast) var(--lfe-ease-out);
}

.lfe-produccion:hover .lfe-produccion__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-produccion,
  .lfe-produccion__media img,
  .lfe-produccion__arrow {
    transition: none;
  }
  .lfe-produccion:hover,
  .lfe-produccion:focus-within {
    transform: none;
  }
  .lfe-produccion:hover .lfe-produccion__media img {
    transform: none;
  }
}

/* =========================================================================
   SELECTOR DE IDIOMA (ES · EN) — inc/i18n.php lfe_language_switcher()
   Cabecera: solo desktop (en móvil va dentro del menú overlay).
   ========================================================================= */

.lfe-lang-switch__list {
  display: flex;
  align-items: center;
  gap: var(--lfe-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfe-lang-switch__item + .lfe-lang-switch__item::before {
  content: "·";
  color: var(--lfe-ivory-muted);
  opacity: 0.6;
  margin-inline-end: var(--lfe-space-1);
}

.lfe-lang-switch__item {
  display: flex;
  align-items: center;
}

.lfe-lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 var(--lfe-space-1);
  font-family: var(--lfe-font-eyebrow);
  font-size: var(--lfe-fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--lfe-ivory-muted);
  text-decoration: none;
  border-radius: 2px;
  transition: color 180ms ease;
}

.lfe-lang-switch__link:hover {
  color: var(--lfe-ivory);
}

.lfe-lang-switch__item.is-current .lfe-lang-switch__link {
  color: var(--lfe-gold);
}

.lfe-lang-switch__link:focus-visible {
  outline: 2px solid var(--lfe-gold-bright);
  outline-offset: 2px;
}

.lfe-lang-switch--header {
  display: none;
}

@media (min-width: 1024px) {
  .lfe-lang-switch--header {
    display: block;
  }
}

.lfe-lang-switch--mobile .lfe-lang-switch__link {
  min-width: 44px;
  min-height: 44px;
  font-size: var(--lfe-fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .lfe-lang-switch__link {
    transition: none;
  }
}

/* Aviso de traducción en páginas legales EN (inc/legal.php). */
.lfe-legal-page__translation-note {
  margin: 0 0 var(--lfe-space-6);
  padding: var(--lfe-space-3) var(--lfe-space-4);
  border-left: 2px solid var(--lfe-gold);
  font-size: var(--lfe-fs-sm);
  color: var(--lfe-ivory-muted);
}

.lfe-legal-page__translation-note a {
  color: var(--lfe-gold);
}

/* Nota de traducción en fichas de prensa EN (single-prensa.php). */
.lfe-prensa__translation-note {
  margin-top: var(--lfe-space-4);
  font-size: var(--lfe-fs-xs);
  color: var(--lfe-ivory-muted);
  font-style: normal;
}