/* ==========================================================================
   Italy Experience 2026 — portada cinematográfica
   Alfa Romeo + Fiat · paleta muestreada del arte oficial del programa.

   Notas de implementación:

   · Todo cuelga de .ie-cine y los selectores van calificados con la etiqueta
     (.ie-cine h1, .ie-cine h2...). No es paranoia: hello-elementor y Elementor
     traen reglas propias para los encabezados que ganan por especificidad y
     devolvían los titulares a la sans del tema.

   · La portada rompe el ancho del tema a mano (width:100vw + margen negativo)
     porque los planos tienen que ir a sangre.

   · Sin variante oscura automática: la identidad es crema con rojo y así se
     queda. Los actos con video son oscuros por dirección de arte, no porque el
     sistema del visitante lo pida.
   ========================================================================== */

.ie-cine {
    --ie-red:       #BA1F27;
    --ie-red-claro: #E04751;
    --ie-maroon:    #5E1719;
    --ie-cream:     #F4EFE9;
    --ie-cream-alt: #FAF7F3;
    --ie-ink:       #241012;
    --ie-ink-soft:  #6B5B58;
    --ie-line:      #DED5CC;
    --ie-noche:     #140A0B;

    /* La declara también assets/marca.css, que es quien trae el @font-face.
       Se repite aquí para que la portada siga entera si esa hoja no llega. */
    --ie-display: 'This Appeal IE', 'Anton', 'Archivo Black', Impact, sans-serif;
    --ie-body:    'Archivo', 'Inter', system-ui, -apple-system, sans-serif;

    /* Curva de entrada: sale rápido y frena largo. Es lo que hace que el
       movimiento se sienta pesado y caro en vez de rebotado. */
    --ie-curva: cubic-bezier(.16, 1, .3, 1);

    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--ie-cream);
    color: var(--ie-ink);
    font-family: var(--ie-body);
    line-height: 1.55;
    overflow-x: clip;
}

.ie-cine *,
.ie-cine *::before,
.ie-cine *::after { box-sizing: border-box; }

.ie-cine p { margin: 0 0 1em; }

/* ============================ TIPOGRAFÍA ============================ */

.ie-cine h1,
.ie-cine h2,
.ie-cine h3 {
    font-family: var(--ie-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

.ie-cine .ie-seccion {
    font-size: clamp(34px, 5.5vw, 78px);
    line-height: .92;
    color: var(--ie-red);
    margin: 0 0 24px;
}
.ie-cine .ie-seccion--centro { text-align: center; margin-bottom: 48px; }

.ie-cine .ie-declaracion {
    font-size: clamp(38px, 7vw, 104px);
    line-height: .9;
    color: var(--ie-cream);
    text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

/* ============================ PLANOS DE VIDEO ============================ */

.ie-acto {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(72px, 10vh, 140px) clamp(20px, 5vw, 72px);
    color: var(--ie-cream);
    background: var(--ie-noche);
    overflow: hidden;
}

.ie-acto__fondo { position: absolute; inset: 0; z-index: 0; }

/* Contenedor de cada plano: lleva el fotograma como fondo, así el acto nunca
   se ve vacío mientras el clip carga ni si el clip no llega a cargar. */
.ie-plano {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--ie-noche);
}

.ie-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Arranca apagado y sube al entrar: evita el parpadeo del primer cuadro. */
    opacity: 0;
    transition: opacity .9s ease;
}
.ie-video.esta-listo { opacity: 1; }

/* El velo es lo que hace legible el texto encima del video. Doble capa: un
   degradado vertical para anclar arriba y abajo, y un tinte cálido que amarra
   cualquier plano a la paleta del programa. */
.ie-acto__velo {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20,10,11,.75) 0%, rgba(20,10,11,.35) 35%, rgba(20,10,11,.55) 70%, rgba(20,10,11,.92) 100%),
        radial-gradient(120% 80% at 50% 40%, rgba(186,31,39,.10), transparent 70%);
}
.ie-acto__velo--suave {
    background:
        linear-gradient(180deg, rgba(20,10,11,.55) 0%, rgba(20,10,11,.15) 40%, rgba(20,10,11,.85) 100%);
}

.ie-acto > *:not(.ie-acto__fondo) { position: relative; z-index: 1; }

/* ============================ EL TELÓN ============================

   Pantalla de entrada. Existe por una razón técnica —los móviles no dejan
   arrancar video sin un gesto de la persona— pero se resuelve como parte de la
   pieza y no como un aviso de error.

   Mientras el telón está puesto, la animación del cartel queda EN PAUSA: así
   nadie se pierde la entrada por haber tardado en pulsar.
   ================================================================================ */

.ie-telon {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ie-cream);
    text-align: center;
    transition: opacity .8s var(--ie-curva), visibility .8s;
}
.ie-telon[hidden] { display: none; }

.ie-telon.se-va { opacity: 0; visibility: hidden; pointer-events: none; }

/* El logo, arriba del telón.
   Entra primero y por sí solo: durante ese medio segundo la pantalla solo dice
   de quién es el programa, y el título llega después. */
.ie-telon__logo {
    display: block;
    width: min(46vw, 260px);
    height: auto;
    margin: 0 auto 26px;
    opacity: 0;
    animation: ie-telon-entra .8s var(--ie-curva) .1s both;
}

/* Se conserva por si alguna plantilla vieja todavía imprime la línea de texto
   que el logo sustituyó. */
.ie-telon__marca {
    font-size: clamp(10px, 1.3vw, 13px);
    letter-spacing: .4em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ie-maroon);
    margin: 0 0 14px;
    opacity: 0;
    animation: ie-telon-entra .8s var(--ie-curva) .1s both;
}
.ie-cine .ie-telon__titulo {
    font-family: var(--ie-display) !important;
    text-transform: uppercase;
    font-size: clamp(34px, 7vw, 78px);
    line-height: .9;
    color: var(--ie-red);
    margin: 0;
    opacity: 0;
    animation: ie-telon-entra .9s var(--ie-curva) .2s both;
}
.ie-cine .ie-telon__anio {
    font-family: var(--ie-display) !important;
    font-size: clamp(44px, 10vw, 116px);
    line-height: 1;
    margin-top: .12em;
    color: transparent;
    -webkit-text-stroke: clamp(1.5px, .2vw, 3px) var(--ie-red);
    margin-bottom: 20px;
    opacity: 0;
    animation: ie-telon-entra 1s var(--ie-curva) .35s both;
}
.ie-telon__pie {
    font-size: clamp(12px, 1.4vw, 15px);
    color: var(--ie-ink-soft);
    margin: 0 0 clamp(24px, 4vh, 40px);
    opacity: 0;
    animation: ie-telon-entra .8s var(--ie-curva) .5s both;
}
@keyframes ie-telon-entra {
    from { opacity: 0; translate: 0 20px; }
    to   { opacity: 1; translate: none; }
}

/* El botón: aro que late para que se lea como "pulsa aquí" sin decirlo. */
.ie-cine .ie-telon__boton {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: clamp(112px, 17vw, 152px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: var(--ie-red);
    color: #fff;
    font-family: var(--ie-display) !important;
    font-size: clamp(20px, 3vw, 28px);
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    opacity: 0;
    animation: ie-telon-entra .9s var(--ie-curva) .65s both;
    transition: scale .25s var(--ie-curva), background .25s ease;
}
.ie-cine .ie-telon__boton:hover  { background: var(--ie-red-claro); scale: 1.05; }
.ie-cine .ie-telon__boton:active { scale: .97; }
.ie-cine .ie-telon__boton:focus-visible { outline: 3px solid var(--ie-maroon); outline-offset: 6px; }
.ie-telon__boton span { position: relative; z-index: 1; }

/* Onda que sale del botón, en bucle */
.ie-telon__boton::before,
.ie-telon__boton::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ie-red);
    animation: ie-onda 2.8s ease-out infinite;
}
.ie-telon__boton::after { animation-delay: 1.4s; }
@keyframes ie-onda {
    0%   { scale: 1;    opacity: .55; }
    100% { scale: 1.75; opacity: 0; }
}

.ie-telon__nota {
    margin: 42px 0 0;
    font-size: 12px;
    color: var(--ie-ink-soft);
    opacity: 0;
    animation: ie-telon-entra .8s var(--ie-curva) .85s both;
}

/* --- La película espera al gesto ---
   Con el telón puesto, todo lo del cartel queda pausado. Se reanuda al pulsar
   Join, cuando el guion pone .ie-arranca en <html>. */
.ie-js:not(.ie-arranca) .ie-cartel-vivo,
.ie-js:not(.ie-arranca) .ie-cartel-vivo *,
.ie-js:not(.ie-arranca) .ie-apertura [data-anim] { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .ie-telon__boton::before,
    .ie-telon__boton::after { animation: none; }
    .ie-telon__marca, .ie-telon__titulo, .ie-telon__anio,
    .ie-telon__pie, .ie-telon__boton, .ie-telon__nota {
        animation: none !important; opacity: 1 !important; translate: none !important;
    }
}

/* ============================ ACTO 0 · EL CARTEL, VIVO ============================

   El hero recrea el arte del programa con piezas separadas para poder animarlas.
   Todas las posiciones son porcentajes sobre una caja de proporción 9:16, que es
   la del cartel, y salen de medir el archivo original de 720x1280:

     título    y  95..190   ->  top 7.4%
     bloque    x  75..655   ->  left 10.4%  width 80.6%
               y 230..1010  ->  top 18.0%   height 61.0%
     Alfa      x   0..420   ->  left 0%     width 58.3%   top 37.9%
     Fiat      x 455..720   ->  left 63.2%  width 36.8%   top 19.1%
     lema      y 1040..1090 ->  top 81.2%
     lockup    x 215..505   ->  left 29.9%  width 40.3%   top 87.5%

   Así la composición se conserva idéntica a cualquier tamaño de pantalla.
   ================================================================================ */

.ie-apertura {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 80px);
    min-height: 100svh;
    padding: clamp(40px, 6vh, 90px) clamp(20px, 5vw, 72px);
    background: var(--ie-cream);
    color: var(--ie-ink);
}

/* ==========================================================================
   EL CARTEL, TAL CUAL

   Sustituye a la reconstrucción pieza por pieza. Lo que se anima ahora es la
   lámina entera: entra, se mueve con el scroll y sale. Nada se extrae del arte,
   así que no hay nada que pueda extraerse mal.

   Las reglas .ie-cv__* de más abajo se conservan: las sigue usando el fondo del
   hero, que reaprovecha las mismas piezas a tamaño gigante y muy tenue.
   ========================================================================== */

.ie-cartel-arte {
    position: relative;
    width: min(100%, 460px);
    margin-inline: auto;
    border-radius: 18px;
    overflow: hidden;
    /* La sombra de un impreso apoyado, no de una tarjeta flotando: un contacto
       corto y cerrado, y una difusa muy abierta. */
    box-shadow:
        0 2px 6px rgba(36, 16, 18, .10),
        0 26px 64px rgba(36, 16, 18, .20);
}

.ie-cartel-arte img {
    display: block;
    width: 100%;
    height: auto;
}

/* El destello que recorre la lámina. Es lo único que se mueve DENTRO del
   cartel, y no lo toca: es una capa de luz por encima, en modo pantalla.
   Sustituye al brillo que antes recorría los numerales por máscara. */
.ie-cartel-brillo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255, 255, 255, .30) 47%,
        rgba(255, 255, 255, .30) 53%,
        transparent 62%
    );
    background-size: 300% 100%;
    mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
    .ie-cartel-arte {
        opacity: 0;
        animation: ie-cartel-entra 1.2s var(--ie-curva) .25s both;
    }
    @keyframes ie-cartel-entra {
        from { opacity: 0; translate: 0 26px; scale: .97; }
        to   { opacity: 1; translate: none;   scale: 1; }
    }

    .ie-cartel-brillo {
        animation: ie-cartel-brillo 7s ease-in-out 1.6s infinite;
    }
    @keyframes ie-cartel-brillo {
        0%, 62%  { background-position: 150% 0; }
        88%,100% { background-position: -50% 0; }
    }
}

.ie-cartel-vivo {
    position: relative;
    /* Se limita por ancho Y por alto: 0.5625 es 9/16, la proporción del cartel,
       así que `78svh * 0.5625` es el ancho máximo que cabe sin que se corte el
       lockup del pie en una pantalla de portátil. */
    width: min(100%, 460px, calc(78svh * 0.5625));
    margin-inline: auto;
    aspect-ratio: 720 / 1280;
    margin: 0 auto;
    background: var(--ie-cream);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(36,16,18,.08), 0 40px 90px rgba(36,16,18,.20);
    /* Contexto de apilado propio: dentro se ordenan bloque < coches < texto. */
    isolation: isolate;
}

/* --- Bloque rojo: sube desde abajo y arrastra todo lo demás --- */
.ie-cv__bloque {
    position: absolute;
    left: 10.4%; top: 18%;
    width: 80.6%; height: 61%;
    background: var(--ie-red);
    z-index: 1;
    transform-origin: bottom;
    animation: ie-cv-bloque 1.1s var(--ie-curva) both;
}
@keyframes ie-cv-bloque {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* --- Título --- */
.ie-cine .ie-cv__titulo {
    position: absolute;
    left: 8.3%; top: 6.6%;
    width: 83.4%;
    margin: 0;
    z-index: 4;
    font-size: min(9.4cqw, 9.4vw);
    line-height: .9;
    letter-spacing: -.005em;
    color: var(--ie-red);
    text-align: center;
}
/* La caja del cartel manda las unidades del texto: así el título escala con la
   composición y no con la ventana. */
.ie-cartel-vivo { container-type: inline-size; }
.ie-cine .ie-cv__titulo { font-size: 9.4cqw; }

/* --- Los numerales: la cinta del cartel, no cuatro cifras ---

   En el arte el "2026" es un dibujo continuo: el 2 se enlaza con el 0 y los
   trazos siguen de un cuadrante al siguiente. Compuesto con tipografía suelta
   —por muy condensada que sea— esa conexión desaparece y se nota. Así que la
   forma se extrajo del arte original y se aplica como máscara sobre un relleno
   crema. Ventaja adicional: al ser relleno y no texto, se le puede pasar un
   destello por encima sin deformar el dibujo. */
.ie-cv__anio {
    position: absolute;
    left: 10.28%; top: 18.75%;
    width: 78.89%; height: 60%;
    z-index: 2;

    -webkit-mask-image: var(--ie-numerales);
            mask-image: var(--ie-numerales);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    /* El relleno lleva un destello incrustado que recorre la cinta en bucle,
       como la luz cruzando un impreso. */
    background:
        linear-gradient(115deg,
            var(--ie-cream) 0%, var(--ie-cream) 38%,
            #FFFFFF 47%, #FFFFFF 53%,
            var(--ie-cream) 62%, var(--ie-cream) 100%);
    background-size: 300% 100%;
    background-position: 120% 0;

    /* Entrada: barrido diagonal, como si se imprimiera de una pasada. */
    clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%);
    animation:
        ie-cv-barrido 1.5s var(--ie-curva) .5s both,
        ie-cv-destello 7s ease-in-out 2.6s infinite;
}
@keyframes ie-cv-barrido {
    to { clip-path: polygon(0 0, 135% 0, 110% 100%, -25% 100%); }
}
@keyframes ie-cv-destello {
    0%, 12%   { background-position: 120% 0; }
    38%, 100% { background-position: -60% 0; }
}

/* --- Los coches: tres capas, tres responsabilidades ---

   .ie-cv__coche    posición fija en la composición + salida por scroll
   .ie-cv__ralenti  el bucle de vida (bamboleo mínimo)
   img              la entrada conduciendo

   Están separadas a propósito. Una animación en curso gana sobre una
   declaración normal de la MISMA propiedad; si entrada, bucle y scroll
   escribieran `translate` sobre el mismo elemento, solo se vería uno.        */

.ie-cv__coche {
    position: absolute;
    z-index: 3;
    display: block;
    will-change: transform;
}
.ie-cv__ralenti,
.ie-cv__coche img { display: block; width: 100%; height: auto; }

.ie-cv__coche--alfa { left: 0; top: 37.9%; width: 58.3%; }
.ie-cv__coche--fiat { left: 63.2%; top: 19.1%; width: 36.8%; }

/* Entrada */
.ie-cv__coche--alfa img {
    translate: -120% 0;
    animation: ie-cv-alfa 1.5s var(--ie-curva) 1.05s both;
}
@keyframes ie-cv-alfa {
    60% { translate: 4% 0; }
    to  { translate: none; }
}
.ie-cv__coche--fiat img {
    translate: 0 -160%;
    rotate: -14deg;
    animation: ie-cv-fiat 1.4s var(--ie-curva) 1.35s both;
}
@keyframes ie-cv-fiat {
    65% { translate: 0 5%; rotate: 3deg; }
    to  { translate: none; rotate: -14deg; }
}

/* Ralentí: recorridos de un píxel. No se leen como animación, se leen como
   que la pieza está viva. */
.ie-cv__coche--alfa .ie-cv__ralenti { animation: ie-ralenti-a 6s ease-in-out 2.6s infinite; }
.ie-cv__coche--fiat .ie-cv__ralenti { animation: ie-ralenti-f 7.5s ease-in-out 2.9s infinite; }
@keyframes ie-ralenti-a {
    0%, 100% { translate: 0 0; }
    50%      { translate: .8% -1%; }
}
@keyframes ie-ralenti-f {
    0%, 100% { translate: 0 0;      rotate: 0deg; }
    50%      { translate: -.7% .9%; rotate: 1deg; }
}

/* Salida por scroll: el Alfa arranca hacia la derecha, el Fiat se levanta. */
.ie-cv__coche--alfa { transform: translate(calc(var(--salida) * 62%), calc(var(--salida) * -4%)); }
.ie-cv__coche--fiat { transform: translate(calc(var(--salida) * 20%), calc(var(--salida) * -46%))
                                 rotate(calc(var(--salida) * -12deg)); }

/* --- Lema y lockup --- */
.ie-cv__lema {
    position: absolute;
    left: 6%; top: 80.4%;
    width: 88%;
    z-index: 4;
    font-family: var(--ie-display);
    font-size: 6.6cqw;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ie-red);
    opacity: 0;
    translate: 0 40%;
    animation: ie-cv-abajo .9s var(--ie-curva) 1.75s both;
}
.ie-cv__lockup {
    position: absolute;
    left: 29.9%; top: 87.5%;
    width: 40.3%; height: auto;
    z-index: 4;
    opacity: 0;
    translate: 0 40%;
    animation: ie-cv-abajo .9s var(--ie-curva) 1.95s both;
}
@keyframes ie-cv-abajo {
    to { opacity: 1; translate: none; }
}

/* --- Bucle de vida ---

   Sin esto el hero queda congelado en cuanto termina la entrada. Son
   recorridos de uno o dos píxeles: no se leen como animación, se leen como que
   la pieza está viva. Van sobre `translate`/`scale` independientes para no
   pisar el `transform` que usa el scroll. */

.ie-cartel-vivo { animation: ie-respira 9s ease-in-out 2.4s infinite; }
@keyframes ie-respira {
    0%, 100% { scale: 1; }
    50%      { scale: 1.006; }
}

.ie-cv__alfa { animation: ie-cv-alfa 1.5s var(--ie-curva) 1.05s both,
                          ie-ralenti-a 6s ease-in-out 2.6s infinite; }
@keyframes ie-ralenti-a {
    0%, 100% { translate: calc(var(--salida) *  62%)        calc(var(--salida) * -4%); }
    50%      { translate: calc(var(--salida) *  62% + .7%)  calc(var(--salida) * -4% - .9%); }
}

.ie-cv__fiat { animation: ie-cv-fiat 1.4s var(--ie-curva) 1.35s both,
                          ie-ralenti-f 7.5s ease-in-out 2.9s infinite; }
@keyframes ie-ralenti-f {
    0%, 100% { translate: calc(var(--salida) * 18%)        calc(var(--salida) * -46%);
               rotate: calc(-14deg + var(--salida) * -10deg); }
    50%      { translate: calc(var(--salida) * 18% - .6%)  calc(var(--salida) * -46% + .8%);
               rotate: calc(-13.2deg + var(--salida) * -10deg); }
}

/* --- Grano: le quita el aire "vectorial" y lo acerca al cartel impreso --- */
.ie-cv__grano {
    position: absolute;
    inset: -50%;
    z-index: 5;
    pointer-events: none;
    opacity: .16;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: ie-grano 1.1s steps(3) infinite;
}
@keyframes ie-grano {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-3%, 2%); }
    66%  { transform: translate(2%, -3%); }
    100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------------------
   FONDO DEL HERO

   El cartel estaba flotando sobre crema plano y la mitad derecha quedaba vacía.
   El fondo se arma con piezas del propio cartel —el campo rojo, la cinta de
   numerales y el lema— en vez de inventar un motivo nuevo: así complementa el
   arte en lugar de competir con él.

   Todo va detrás (z-index 0) y el contenido por delante. Nada de esto añade
   peticiones: el campo es color, la banda es texto y las cifras reutilizan la
   máscara que el hero ya carga.
   --------------------------------------------------------------------------- */

.ie-apertura { position: relative; overflow: hidden; isolation: isolate; }
.ie-apertura > *:not(.ie-fondo) { position: relative; z-index: 1; }

.ie-fondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* --- Campo rojo que sangra por la izquierda ---
   Es el bloque del cartel ampliado y salido de cuadro: el póster se apoya
   encima, como un impreso sobre una pared pintada. */
.ie-fondo__campo {
    position: absolute;
    left: -12%;
    top: 8%;
    width: 46%;
    height: 76%;
    background: var(--ie-red);
    border-radius: 0 18px 18px 0;
    /* Se aleja un poco más despacio que el cartel al hacer scroll: da fondo. */
    transform: translateY(calc(var(--salida) * -3vh));
    opacity: .96;
}

/* --- La cinta de numerales, gigante y tenue, sobre el crema --- */
.ie-fondo__cifras {
    position: absolute;
    right: -16%;
    top: 50%;
    width: 62%;
    aspect-ratio: 1136 / 1536;
    translate: 0 -50%;

    background: var(--ie-red);
    -webkit-mask-image: var(--ie-numerales);
            mask-image: var(--ie-numerales);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    /* Muy por debajo del texto: tiene que leerse como marca de agua impresa,
       no como un elemento más. */
    opacity: .055;
    transform: translateY(calc(var(--salida) * -8vh)) rotate(-4deg);
}

/* --- Banda vertical con el lema, repetido --- */
.ie-fondo__banda {
    position: absolute;
    right: clamp(8px, 2vw, 26px);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    writing-mode: vertical-rl;
    overflow: hidden;
    font-family: var(--ie-display);
    text-transform: uppercase;
    font-size: clamp(9px, 1vw, 12px);
    letter-spacing: .42em;
    color: var(--ie-maroon);
    opacity: .22;
    white-space: nowrap;
}
.ie-fondo__banda i {
    font-style: normal;
    /* Dos copias en fila para que el bucle no deje hueco al reiniciar. */
    animation: ie-banda 46s linear infinite;
}
@keyframes ie-banda {
    from { translate: 0 0; }
    to   { translate: 0 -100%; }
}

@media (max-width: 900px) {
    /* En vertical el campo rojo pasa a ser una franja superior: acompaña al
       cartel sin robarle sitio. */
    .ie-fondo__campo { left: -22%; top: 0; width: 74%; height: 42%; border-radius: 0 0 22px 0; }
    .ie-fondo__cifras { right: -34%; width: 96%; opacity: .045; }
    .ie-fondo__banda { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-fondo__banda i { animation: none; }
    .ie-fondo__campo, .ie-fondo__cifras { transform: none; }
}

/* --- Columna de datos --- */

.ie-apertura__datos { max-width: 460px; }

.ie-cine .ie-marca {
    font-size: clamp(11px, 1.2vw, 13px);
    letter-spacing: .38em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ie-maroon);
    margin: 0 0 16px;
}

.ie-apertura__fechas {
    font-size: clamp(15px, 1.7vw, 19px);
    color: var(--ie-ink-soft);
    margin: 0 0 clamp(20px, 3vh, 32px);
}
.ie-apertura__fechas strong {
    display: block;
    font-family: var(--ie-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: .01em;
    color: var(--ie-red);
    margin-bottom: 4px;
}

/* --- Cuenta regresiva --- */

.ie-cuenta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 clamp(22px, 3.5vh, 34px);
}
.ie-cuenta > div {
    min-width: 74px;
    padding: 12px 16px;
    border: 1px solid var(--ie-line);
    border-radius: 14px;
    background: var(--ie-cream-alt);
    text-align: center;
}
.ie-cuenta strong {
    display: block;
    font-family: var(--ie-display);
    font-weight: 400;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1;
    color: var(--ie-red);
    font-variant-numeric: tabular-nums;
}
.ie-cuenta span {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ie-ink-soft);
}

/* --- Indicador de scroll --- */

.ie-scroll { margin-top: clamp(22px, 4vh, 46px); }
.ie-scroll span {
    display: block;
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ie-ink-soft);
    margin-bottom: 10px;
}
.ie-scroll i {
    display: block;
    width: 1px;
    height: 44px;
    background: linear-gradient(180deg, var(--ie-red), transparent);
    transform-origin: top;
    animation: ie-hilo 2.2s ease-in-out infinite;
}
@keyframes ie-hilo {
    0%, 100% { transform: scaleY(.35); opacity: .35; }
    50%      { transform: scaleY(1);   opacity: 1; }
}

/* --- Salida por scroll ---

   Al bajar, el cartel no se limita a desplazarse con la página: se despide. El
   guion escribe --salida (0 en reposo, 1 cuando el hero ya casi salió) y aquí
   se reparte ese valor entre las piezas, cada una a su ritmo. El resultado es
   que los coches arrancan y el cartel se aleja, en vez de un bloque rígido
   subiendo.

   Todo va sobre translate/scale/rotate independientes y opacity: ninguna de
   esas propiedades obliga al navegador a recalcular el diseño. */

/* El guion escribe --salida aquí; las propiedades personalizadas heredan
   solas, así que llega a los coches y al cartel sin volver a declararla. */
.ie-apertura { --salida: 0; }

/* El marco es quien se mueve con el scroll. El cartel de dentro solo respira,
   así ninguna animación pisa a la otra.

   `width: 100%` no es decorativo: TODAS las piezas del cartel están
   posicionadas en absoluto, así que su ancho intrínseco es cero. Si el marco
   tuviera que deducir su tamaño del contenido —como pasa en cuanto algo lo
   pone a ajustarse, por ejemplo `justify-items: center`— la cadena se vuelve
   circular y el cartel colapsa a 0x0: desaparece de la pantalla sin error
   ninguno. Con un ancho definido aquí, el cartel de dentro se cuelga de él. */
.ie-cartel-marco {
    width: 100%;
    transform: translateY(calc(var(--salida) * -6vh)) scale(calc(1 - var(--salida) * .12));
    opacity: calc(1 - var(--salida) * .55);
    will-change: transform, opacity;
}

/* Los coches se van dentro de sus propios keyframes de ralentí (ver más
   arriba): el Alfa arranca hacia la derecha y el Fiat se levanta girando. */
/* La columna de datos se queda un paso atrás: da profundidad. */
.ie-apertura__datos  { transform: translateY(calc(var(--salida) * -3vh));
                       opacity: calc(1 - var(--salida) * .8); }

/* ============================ ACTO 1 · INTRO ============================ */

.ie-intro__texto { max-width: 680px; }
.ie-intro__texto p { font-size: clamp(15px, 1.6vw, 18px); color: rgba(244,239,233,.78); max-width: 46ch; }
.ie-intro .ie-seccion { color: var(--ie-cream); }

/* ============================ ACTO 2 · LA CARRETERA ============================ */

.ie-carretera { justify-content: space-between; }
.ie-carretera__centro { flex: 1; display: flex; align-items: center; }

.ie-datos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(244,239,233,.16);
    border: 1px solid rgba(244,239,233,.16);
    border-radius: 16px;
    overflow: hidden;
    margin-top: clamp(28px, 5vh, 56px);
}
.ie-dato {
    background: rgba(20,10,11,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px 22px;
}
.ie-dato__etiqueta {
    display: block;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244,239,233,.55);
    margin-bottom: 8px;
}
.ie-dato__valor {
    display: block;
    font-family: var(--ie-display);
    text-transform: uppercase;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1;
    color: var(--ie-cream);
    margin-bottom: 6px;
}
.ie-dato__nota { display: block; font-size: 13px; color: rgba(244,239,233,.65); }

/* Los datos son siempre cuatro: con auto-fit, entre ~602 y ~803 px caían a tres
   columnas y la fila de abajo dejaba dos celdas vacías que se veían como un
   rectángulo claro dentro del marco. Repartidos 2 y 2 no queda hueco. */
@media (max-width: 800px) {
    .ie-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En móvil estrecho seguimos con una sola columna, como hasta ahora. */
@media (max-width: 400px) {
    .ie-datos { grid-template-columns: 1fr; }
}

/* ============================ ACTO 3 · CIUDADES ============================ */

.ie-ciudades {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(80px, 14vh, 170px) clamp(20px, 5vw, 60px);
}

.ie-ciudad {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    margin-bottom: clamp(56px, 9vh, 120px);
}
/* Se alternan los lados para que la lectura zigzaguee en vez de caer en columna. */
.ie-ciudad:nth-of-type(even) .ie-ciudad__video { order: 2; }

.ie-ciudad__video {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: var(--ie-cream-alt);
    box-shadow: 0 2px 6px rgba(36,16,18,.08), 0 30px 70px rgba(36,16,18,.16);
    will-change: transform;
}

.ie-ciudad__n {
    display: block;
    font-family: var(--ie-display);
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ie-red);
    margin-bottom: 10px;
}
.ie-cine .ie-ciudad__texto h3 {
    font-size: clamp(30px, 4.4vw, 62px);
    line-height: .95;
    color: var(--ie-red);
    margin-bottom: 12px;
}
.ie-ciudad__texto p { color: var(--ie-ink-soft); max-width: 42ch; }

/* ============================ ACTO 4 · DÍA POR DÍA ============================ */

.ie-itinerario {
    background: var(--ie-cream-alt);
    padding: clamp(72px, 12vh, 150px) clamp(20px, 5vw, 60px);
}

.ie-linea {
    list-style: none;
    max-width: 820px;
    margin: 0 auto;
    padding: 0 0 0 34px;
    position: relative;
}
/* La línea del tiempo se dibuja de arriba abajo cuando la sección entra. */
.ie-linea::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--ie-red);
    opacity: .28;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.4s var(--ie-curva);
}
.ie-itinerario.esta-dentro .ie-linea::before { transform: scaleY(1); }

.ie-linea__dia { position: relative; padding: 0 0 26px; }
.ie-linea__punto {
    position: absolute;
    left: -34px;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ie-cream-alt);
    border: 2px solid var(--ie-red);
}
.ie-cine .ie-linea__dia h3 {
    font-family: var(--ie-body);
    font-weight: 600;
    text-transform: none;
    font-size: 17px;
    color: var(--ie-maroon);
    margin-bottom: 3px;
}
.ie-linea__dia p { font-size: 14px; color: var(--ie-ink-soft); margin: 0; }

.ie-nota {
    max-width: 820px;
    margin: 24px auto 0;
    font-size: 13px;
    font-style: italic;
    color: var(--ie-ink-soft);
}
.ie-requisitos .ie-nota { color: rgba(244,239,233,.62); margin-left: 0; }

/* ============================ ACTO 5 · REQUISITOS ============================ */

.ie-requisitos__centro { max-width: 1080px; margin: 0 auto; width: 100%; }
.ie-requisitos .ie-seccion { color: var(--ie-cream); }

.ie-requisitos__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(20px, 3vw, 40px);
}
.ie-requisitos__lista li {
    border-left: 2px solid var(--ie-red-claro);
    padding-left: 18px;
    font-size: 14px;
    color: rgba(244,239,233,.72);
}
.ie-requisitos__lista strong {
    display: block;
    font-family: var(--ie-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(17px, 2vw, 22px);
    letter-spacing: .02em;
    color: var(--ie-cream);
    margin-bottom: 8px;
}

/* ============================ ACTO 6 · REGISTRO ============================ */

.ie-registro {
    background: var(--ie-cream);
    padding: clamp(72px, 12vh, 160px) clamp(20px, 5vw, 60px);
}
.ie-registro__caja { max-width: 620px; margin: 0 auto; }
.ie-registro__bajada { color: var(--ie-ink-soft); margin-bottom: 28px; }

.ie-form {
    background: var(--ie-cream-alt);
    border: 1px solid var(--ie-line);
    border-radius: 18px;
    padding: clamp(20px, 3vw, 32px);
    position: relative;
}

.ie-campo { display: block; margin-bottom: 16px; }
.ie-campo > span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ie-ink-soft);
    margin-bottom: 7px;
}
.ie-campo input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--ie-line);
    border-radius: 11px;
    background: #fff;
    color: var(--ie-ink);
    font-family: var(--ie-body);
    /* 16px evita que iOS haga zoom al enfocar el campo. */
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ie-campo input:focus-visible {
    outline: none;
    border-color: var(--ie-red);
    box-shadow: 0 0 0 3px rgba(186,31,39,.16);
}

.ie-campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* El par de teléfono se quedó con un solo campo: al quitarse la Lada, WhatsApp
   ocupa el renglón entero. Con las dos columnas de antes quedaba un hueco de
   110px a la izquierda que se leía como un campo faltante. La regla se conserva
   —en vez de borrarse con el modificador— porque el marcado puede seguir
   trayéndolo y así el campo nunca hereda las dos columnas del contenedor. */
.ie-campo-par--tel { grid-template-columns: 1fr; }

.ie-acepto {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    color: var(--ie-ink-soft);
    margin-bottom: 22px;
}
.ie-acepto input { margin-top: 3px; flex: 0 0 auto; }

/* Trampa para bots. No se usa display:none porque algunos rastreadores lo
   detectan y saltan el campo; así queda fuera de la vista y del lector de
   pantalla, pero sigue presente en el formulario. */
.ie-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ie-form__mensaje { margin: 14px 0 0; font-size: 14px; min-height: 1.2em; text-align: center; }
.ie-form__mensaje--error { color: var(--ie-red); }
.ie-form__mensaje--ok    { color: #2E7D53; }

/* ============================ BOTÓN ============================ */

.ie-cine .ie-boton {
    display: inline-block;
    background: var(--ie-red);
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    padding: 16px 38px;
    font-family: var(--ie-body);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .01em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--ie-curva), box-shadow .25s ease;
}
.ie-cine .ie-boton:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(186,31,39,.35);
}
/* Destello que cruza el botón al pasar el cursor. */
.ie-cine .ie-boton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .7s var(--ie-curva);
}
.ie-cine .ie-boton:hover::after { transform: translateX(120%); }
.ie-cine .ie-boton[disabled] { opacity: .6; cursor: progress; transform: none; }
.ie-boton--ancho { width: 100%; }

/* ============================ PIE ============================ */

.ie-pie {
    background: var(--ie-noche);
    color: rgba(244,239,233,.6);
    text-align: center;
    padding: clamp(48px, 8vh, 90px) 20px;
    font-size: 13px;
}
.ie-pie__cartel {
    position: relative;
    width: 130px;
    aspect-ratio: 720 / 1280;
    margin: 0 auto 22px;
    border-radius: 10px;
    overflow: hidden;
    opacity: .92;
}
.ie-pie p { margin: 0; }

/* ============================ ANIMACIÓN AL ENTRAR ============================ */

/* Estado de reposo. Se aplica solo si el guion está vivo (html.ie-js): sin
   JavaScript nada se oculta y la portada se lee entera. */
/* IMPORTANTE — quién observa a quién.
   El revelado lo dispara la SECCIÓN ([data-acto].esta-dentro), no cada pieza.

   La primera versión observaba cada pieza con IntersectionObserver, y las que
   arrancaban con `clip-path: inset(0 0 100%)` no se revelaban nunca: un
   elemento recortado a cero tiene área pintada nula, el observador lo reporta
   como no visible, y como nunca "entra", nunca se le quita el recorte. Un
   bloqueo que se alimentaba a sí mismo. Las secciones no llevan recorte, así
   que sirven de disparador fiable. */
.ie-js .ie-cine [data-anim] {
    opacity: 0;
    will-change: translate, opacity;
}
/* Se anima la propiedad `translate`, no `transform`.
   Motivo: varios elementos animados ya usan transform para otra cosa —el
   indicador de scroll se centra con translateX(-50%) y el botón se levanta al
   pasar el cursor—. Animar transform les pisaba ese valor y el indicador se iba
   al borde derecho. `translate` es independiente y convive con transform. */
.ie-js .ie-cine [data-anim="subir"]   { translate: 0 34px; }
.ie-js .ie-cine [data-anim="revelar"] { translate: 0 24px; clip-path: inset(0 0 100% 0); }

.ie-js .ie-cine [data-acto].esta-dentro [data-anim],
.ie-js .ie-cine [data-anim].esta-dentro {
    opacity: 1;
    translate: none;
    clip-path: inset(0 0 -20% 0);
    transition:
        opacity   .9s  var(--ie-curva) var(--retraso, 0s),
        translate 1s   var(--ie-curva) var(--retraso, 0s),
        clip-path 1.1s var(--ie-curva) var(--retraso, 0s);
}

/* En la apertura el texto entra con su retraso sin esperar al scroll: ya está
   en pantalla cuando carga la página. */
.ie-js .ie-apertura [data-anim="subir"] {
    animation: ie-subir .9s var(--ie-curva) forwards;
    animation-delay: var(--retraso, 0s);
    opacity: 0;
}
@keyframes ie-subir {
    from { opacity: 0; translate: 0 34px; }
    to   { opacity: 1; translate: none; }
}

/* ==========================================================================
   PRIORIDAD TIPOGRÁFICA

   El sitio tiene una fuente global llamada "brand" (cargada por el plugin de
   tipografías) que se aplica con una regla tan amplia que gana sobre todo lo
   de arriba: en el navegador, el titular resolvía a `font-family: brand` aun
   con los selectores calificados por etiqueta.

   Contra un override global que no controlamos, subir la especificidad no
   alcanza y encadenar selectores absurdos sería peor de mantener. Aquí el
   !important es la herramienta correcta, y está acotado a .ie-cine: fuera de
   la portada el tema sigue mandando.
   ========================================================================== */

.ie-cine,
.ie-cine p,
.ie-cine li,
.ie-cine span,
.ie-cine input,
.ie-cine button,
.ie-cine a { font-family: var(--ie-body) !important; }

.ie-cine h1,
.ie-cine h2,
.ie-cine h3,
.ie-cine .ie-seccion,
.ie-cine .ie-declaracion,
.ie-cine .ie-titular,
.ie-cine .ie-titular__anio,
.ie-cine .ie-lema,
.ie-cine .ie-kin__letra,
.ie-cine .ie-kin__palabra,
.ie-cine .ie-cuenta strong,
.ie-cine .ie-cv__titulo,
.ie-cine .ie-cv__anio,
.ie-cine .ie-cv__anio b,
.ie-cine .ie-cv__lema,
.ie-cine .ie-apertura__fechas strong,
.ie-cine .ie-dato__valor,
.ie-cine .ie-ciudad__n,
.ie-cine .ie-requisitos__lista strong {
    font-family: var(--ie-display) !important;
    font-weight: 400 !important;
}

/* Los días del itinerario sí van en la de cuerpo: llevan nombre propio de
   ciudad y en condensada pesada se leen peor. */
.ie-cine .ie-linea__dia h3 { font-family: var(--ie-body) !important; font-weight: 600 !important; }

/* ============================ AJUSTES PARA MÓVIL ============================

   Lo que cambia en un teléfono no es solo el tamaño: cambia el presupuesto.
   Menos CPU para componer capas, menos batería y, muchas veces, datos contados.
   Estas reglas recortan justo lo que cuesta caro y no se nota que falta.
   ============================================================================ */

@media (max-width: 900px) {
    /* Máscara ligera: 620 px de ancho bastan para un cartel de 320 px, incluso
       a densidad 3x. */
    .ie-cv__anio {
        -webkit-mask-image: var(--ie-numerales-mv, var(--ie-numerales));
                mask-image: var(--ie-numerales-mv, var(--ie-numerales));
    }

    /* El grano es una capa a pantalla completa que se repinta en bucle: en un
       teléfono es de lo más caro que hay y a ese tamaño casi no se percibe. */
    .ie-cv__grano { display: none; }

    /* will-change reserva memoria de composición por elemento. En escritorio
       compensa; en un teléfono con varias capas de video encima, no. */
    .ie-cartel-marco,
    .ie-cv__coche,
    .ie-cartel__pieza,
    .ie-ciudad__video { will-change: auto; }

    /* Los desenfoques de fondo son de los efectos más caros por píxel. */
    .ie-cuenta > div,
    .ie-dato {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(20,10,11,.72);
    }
    .ie-cuenta > div { background: var(--ie-cream-alt); }

    /* Objetivos táctiles: mínimo 44 px de alto real. */
    .ie-cine .ie-boton { padding: 17px 32px; min-height: 48px; }
    .ie-campo input    { min-height: 50px; }
    .ie-acepto input   { width: 22px; height: 22px; }
    .ie-cine .ie-telon__boton { width: clamp(128px, 38vw, 168px); }

    /* Sombras grandes y difusas cuestan lo suyo al componer. */
    .ie-cartel-vivo  { box-shadow: 0 2px 6px rgba(36,16,18,.10), 0 18px 40px rgba(36,16,18,.16); }
    .ie-ciudad__video { box-shadow: 0 2px 6px rgba(36,16,18,.08); }
}

/* Pantallas estrechas de verdad: el cartel manda y lo demás se aprieta. */
@media (max-width: 480px) {
    .ie-apertura { padding-inline: 16px; }
    .ie-cartel-vivo,
    .ie-cartel-arte { width: min(86vw, 330px); }
    .ie-cuenta { gap: 8px; }
    .ie-cuenta > div { min-width: 0; flex: 1 1 68px; padding: 10px 8px; }
    .ie-acto { padding-inline: 18px; }
    .ie-ciudades, .ie-registro, .ie-itinerario { padding-inline: 18px; }
}

/* Ahorro de datos: quien lo activa está diciendo explícitamente que no quiere
   descargas grandes. Se queda el fotograma de cada plano, que ya está ahí. */
@media (prefers-reduced-data: reduce) {
    .ie-video { display: none; }
}

/* ============================ RESPONSIVE ============================ */

@media (max-height: 780px) and (min-width: 901px) {
    .ie-cartel-vivo,
    .ie-cartel-arte { width: min(100%, 400px, calc(74svh * 0.5625)); }
}

@media (max-width: 900px) {
    .ie-apertura {
        grid-template-columns: 1fr;
        text-align: center;
        gap: clamp(24px, 5vh, 44px);
        /* Nada de `justify-items: center` aquí: pondría al marco a ajustarse a
           su contenido, y el contenido del cartel es todo absoluto (ancho
           intrínseco 0). El centrado se hace con márgenes, que no tocan el
           cálculo del ancho. */
    }
    .ie-cartel-vivo,
    .ie-cartel-arte { width: min(80vw, 340px); }
    .ie-apertura__datos { max-width: 460px; margin-inline: auto; }
    .ie-cuenta { justify-content: center; }
    .ie-scroll { display: none; }
    .ie-ciudad { grid-template-columns: 1fr; gap: 20px; }
    .ie-ciudad:nth-of-type(even) .ie-ciudad__video { order: 0; }
    .ie-acto { min-height: auto; padding-block: clamp(64px, 12vh, 110px); }
    .ie-apertura { min-height: 100svh; }
}

/* Pantallas bajas (portátiles de 13", móvil en horizontal): el titular y la
   cuenta regresiva se comen el alto y el indicador de scroll acababa encima del
   botón. Se aprieta el ritmo vertical y, por debajo de cierto alto, el
   indicador simplemente sobra. */
@media (max-height: 860px) {
    .ie-cine .ie-titular      { font-size: clamp(40px, 8.5vw, 104px); }
    .ie-titular__anio         { font-size: clamp(52px, 12vw, 150px); }
    .ie-cuenta                { margin-bottom: clamp(16px, 2.5vh, 26px); }
    .ie-apertura__fechas      { margin-bottom: clamp(14px, 2vh, 24px); }
}
@media (max-height: 720px) {
    .ie-scroll { display: none; }
}

@media (max-width: 520px) {
    /* --tel ya viene a una columna desde arriba: aquí solo se apila el par
       de nombre y apellidos. */
    .ie-campo-par { grid-template-columns: 1fr; }
    .ie-cuenta > div { min-width: 66px; padding: 10px 12px; }
    .ie-scroll { display: none; }
}

/* ============================ MOVIMIENTO REDUCIDO ============================

   Quien pide menos movimiento recibe la portada completa y quieta: nada de
   video reproduciéndose, nada de entradas, nada de parallax. El guion además
   se salta el play() y deja el póster de cada plano.
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .ie-js .ie-cine [data-anim],
    .ie-js .ie-cine [data-acto].esta-dentro [data-anim],
.ie-js .ie-cine [data-anim].esta-dentro {
        opacity: 1 !important;
        translate: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }
    .ie-kin__letra,
    .ie-titular__anio {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .ie-titular__anio { color: var(--ie-red-claro); -webkit-text-stroke: 0; }
    .ie-scroll i { animation: none; }

    /* El cartel aparece ya armado: cada pieza en su sitio, sin recorrido. */
    .ie-cv__bloque,
    .ie-cv__anio,
    .ie-cv__coche img,
    .ie-cv__lema,
    .ie-cv__lockup {
        animation: none !important;
        opacity: 1 !important;
        translate: none !important;
        rotate: none !important;
        clip-path: none !important;
    }
    .ie-cv__fiat { rotate: -14deg !important; } /* la inclinación es del diseño, no del movimiento */
    .ie-cv__grano { animation: none; }
    .ie-apertura { --salida: 0 !important; }
    .ie-cartel-marco, .ie-apertura__datos { transform: none !important; opacity: 1 !important; }
    .ie-cv__coche, .ie-cv__ralenti { transform: none !important; animation: none !important; }
    .ie-cv__coche--fiat img { rotate: -14deg !important; }
    .ie-video { opacity: 1; transition: none; }
    .ie-linea::before { transform: scaleY(1); transition: none; }
}

/* ==========================================================================
   EL INTERRUPTOR DEL SONIDO

   Va fijo abajo a la derecha y aparece en cuanto suena la música. No es un
   detalle de cortesía: una página que suena más de tres segundos tiene que
   ofrecer cómo callarla (WCAG 2.2, criterio 1.4.2), y esconderlo en un menú no
   cuenta como ofrecerlo.

   Por debajo del telón (9999) para que no asome mientras el telón está puesto,
   y por encima de todo lo demás.
   ========================================================================== */

.ie-sonido {
    position: fixed;
    right: clamp(14px, 3vw, 26px);
    bottom: clamp(14px, 3vw, 26px);
    z-index: 60;

    /* 48x48: el mínimo cómodo para un dedo. */
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;

    border: 1px solid var(--ie-line);
    border-radius: 50%;
    background: rgba(250, 247, 243, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ie-maroon);
    cursor: pointer;
    padding: 0;

    box-shadow: 0 2px 6px rgba(36, 16, 18, .08), 0 10px 26px rgba(36, 16, 18, .12);
    transition: background .25s var(--ie-curva), color .25s var(--ie-curva),
                scale .25s var(--ie-curva);
}

.ie-sonido[hidden] { display: none; }

.ie-sonido:hover  { background: var(--ie-red); color: #fff; scale: 1.06; }
.ie-sonido:active { scale: .95; }
.ie-sonido:focus-visible {
    outline: 3px solid var(--ie-red);
    outline-offset: 3px;
}

.ie-sonido svg { width: 22px; height: 22px; display: block; }

/* Callado: se apagan las ondas y aparece la tache. Al revés cuando suena.
   El estado se dice también en aria-pressed y en aria-label; esto es solo la
   mitad visual. */
.ie-sonido__tache { opacity: 0; transition: opacity .2s var(--ie-curva); }
.ie-sonido__onda  { opacity: 1; transition: opacity .2s var(--ie-curva); }

.ie-sonido.esta-callado .ie-sonido__onda  { opacity: 0; }
.ie-sonido.esta-callado .ie-sonido__tache { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ie-sonido { transition: none; }
    .ie-sonido:hover { scale: none; }
}

/* ==========================================================================
   LA CONFIRMACIÓN, EN LA PROPIA PORTADA

   Sustituye al formulario en el sitio donde estaba. No es una página nueva ni
   un modal: esta pantalla ES la confirmación y no hay correo detrás, así que
   mandar a la persona a otro lado sería quitarle de la vista lo único que se
   le va a entregar.
   ========================================================================== */

.ie-confirma-caja[hidden] { display: none; }

.ie-confirma {
    background: var(--ie-cream-alt);
    border: 1px solid var(--ie-line);
    border-radius: 20px;
    padding: clamp(24px, 5vw, 40px);
    text-align: center;
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ie-confirma { animation: ie-confirma-entra .7s var(--ie-curva) both; }
    @keyframes ie-confirma-entra {
        from { opacity: 0; translate: 0 16px; }
        to   { opacity: 1; translate: none; }
    }
}

.ie-confirma__sello {
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ie-maroon);
    margin: 0 0 10px;
}

.ie-cine .ie-confirma__nombre {
    font-family: var(--ie-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: clamp(26px, 5.5vw, 42px);
    line-height: .95;
    color: var(--ie-red);
    margin: 0 0 14px;
}

.ie-confirma__viaje {
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.5;
    color: var(--ie-ink);
    margin: 0 0 22px;
}
.ie-confirma__viaje span { color: var(--ie-ink-soft); }

/* Los datos de registro: sirven para reconocerse, no para lucirse. */
.ie-confirma__datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px clamp(18px, 4vw, 34px);
    margin: 0 0 24px;
    padding: 16px 0;
    border-top: 1px solid var(--ie-line);
    border-bottom: 1px solid var(--ie-line);
}
.ie-confirma__datos dt {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ie-ink-soft);
    margin-bottom: 3px;
}
.ie-confirma__datos dd {
    margin: 0;
    font-size: 14px;
    color: var(--ie-ink);
    word-break: break-word;
}

/* La palomita.

   Es lo primero que se ve y lo único que hace falta entender: el registro
   quedó. Va antes que el nombre a propósito — un símbolo se lee de un vistazo
   y una frase hay que leerla.

   Aquí vivía el QR del pase. Se quitó porque en este punto del recorrido la
   gente lo leía como una tarea pendiente. El código sigue en el perfil. */
.ie-confirma__palomita {
    display: block;
    width: clamp(56px, 12vw, 72px);
    height: auto;
    margin: 0 auto 18px;
    color: var(--ie-red);
}
.ie-confirma__palomita svg { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
    /* El aro y el trazo se dibujan, no aparecen. Es medio segundo y convierte
       un icono estático en un acuse de recibo: algo acaba de ocurrir.
       pathLength no se usa porque el largo real de cada trazo es distinto; se
       fija un dasharray holgado y se recorre. */
    .ie-confirma__aro {
        stroke-dasharray: 150;
        stroke-dashoffset: 150;
        animation: ie-traza .55s var(--ie-curva) .1s forwards;
    }
    .ie-confirma__trazo {
        stroke-dasharray: 40;
        stroke-dashoffset: 40;
        animation: ie-traza .35s var(--ie-curva) .5s forwards;
    }
    @keyframes ie-traza { to { stroke-dashoffset: 0; } }
}

/* Sin animación, los trazos tienen que estar completos desde el principio:
   si el dashoffset se quedara puesto, no se vería nada. */
@media (prefers-reduced-motion: reduce) {
    .ie-confirma__aro,
    .ie-confirma__trazo { stroke-dashoffset: 0; }
}

/* El aviso de que no habrá correo. Va en rojo de marca y con borde a la
   izquierda porque es lo único de esta pantalla que, si no se lee, deja a
   alguien esperando un mensaje que no va a llegar. */
.ie-confirma__aviso {
    text-align: left;
    background: #FBEDEE;
    border-left: 3px solid var(--ie-red);
    border-radius: 0 12px 12px 0;
    padding: 14px 16px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ie-ink);
}
.ie-confirma__aviso strong { color: var(--ie-maroon); }

/* El bloque de datos del paso 2 aparece al saberse que el correo es nuevo. */
.ie-form__datos[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .ie-form__datos:not([hidden]) {
        animation: ie-confirma-entra .5s var(--ie-curva) both;
    }
}

/* ==========================================================================
   ACTO 5b · CÓMO VESTIR

   Cinco tarjetas, una por día. Cada una con su hueco de imagen ARRIBA, que es
   donde el ojo entra: la foto responde la pregunta más rápido que el texto.

   El hueco se reserva aunque la foto no haya llegado. Ese es el punto: cuando
   diseño mande el material, se sueltan los archivos y no se mueve nada — ni el
   alto de la sección, ni el ritmo del scroll, ni las animaciones de entrada.
   Añadir el espacio DESPUÉS obligaría a rehacer este bloque.
   ========================================================================== */

.ie-vestir {
    background: var(--ie-cream);
    padding: clamp(64px, 12vh, 130px) clamp(16px, 5vw, 48px);
}

.ie-vestir__centro {
    max-width: 1280px;
    margin: 0 auto;
}

.ie-vestir__intro {
    max-width: 62ch;
    margin: clamp(18px, 3vh, 30px) 0 clamp(38px, 6vh, 62px);
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.65;
    color: var(--ie-ink-soft);
}
.ie-vestir__intro strong { color: var(--ie-ink); font-weight: 600; }

/* auto-fit + minmax: cinco días caben en fila en escritorio, dos o tres en
   tableta y uno en teléfono, sin escribir una sola media query. */
.ie-vestir__dias {
    display: grid;
    /* 260 px de mínimo y no 210: por debajo de eso las figuras de cuerpo
       entero dejan de distinguirse, que es justo lo que la tarjeta viene a
       resolver. Con cinco días salen tres arriba y dos abajo en escritorio. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(20px, 3vw, 36px);
    align-items: start;
}

.ie-vestir__dia { min-width: 0; }

/* --- El hueco de la imagen --- */

.ie-vestir__foto {
    /* Alto fijo en vez de proporción fija.
    
       Las referencias llegaron recortadas al contenido, así que cada una tiene
       una proporción distinta: la de pista es casi cuadrada y la de viaje es
       muy vertical. Con `aspect-ratio` las cajas serían iguales pero las
       figuras saldrían a tamaños distintos, unas grandes y otras diminutas.
    
       Con alto fijo y `contain`, todas las personas se ven al mismo tamaño y la
       caja se adapta. */
    height: clamp(230px, 26vw, 300px);
    margin-bottom: 16px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ie-vestir__foto img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Apoyadas abajo: son figuras de cuerpo entero y, alineadas por el suelo,
       las cinco tarjetas comparten una línea de piso. Centradas en vertical
       cada una flotaría a su altura. */
    object-position: bottom;
    display: block;
}

/* Vacío: tiene que leerse como "falta esto", no como "esto se rompió". De ahí
   el borde punteado y el texto, en vez de un rectángulo gris a secas. */
.ie-vestir__foto.esta-vacia {
    display: grid;
    place-items: center;
    border-radius: 14px;
    border: 1px dashed var(--ie-line);
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0 10px,
            rgba(186, 31, 39, .035) 10px 20px
        ),
        var(--ie-cream-alt);
}

.ie-vestir__pendiente {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
    text-align: center;
    color: var(--ie-ink-soft);
    opacity: .75;
}

/* --- El texto --- */

.ie-vestir__fecha {
    margin: 0 0 2px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ie-maroon);
}

.ie-cine .ie-vestir__donde {
    font-family: var(--ie-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1;
    color: var(--ie-red);
    margin: 0 0 8px;
}

.ie-vestir__codigo {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ie-ink);
}

.ie-vestir__texto {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ie-ink-soft);
}

/* El día de pista lleva reglas de seguridad, no sugerencias de estilo: se
   marca para que no se lea como una recomendación más. */
.ie-vestir__dia.es-aviso .ie-vestir__codigo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FBEDEE;
    color: var(--ie-red);
}
.ie-vestir__dia.es-aviso .ie-vestir__foto { border-color: rgba(186, 31, 39, .35); }

/* --- En la maleta ---
   Cierra la sección de vestimenta. Cuatro renglones, formato de ficha: el
   nombre del look manda y el detalle acompaña. Sobre el crema alterno para que
   se separe de las cinco tarjetas sin abrir otra sección. */

.ie-maleta {
    margin-top: clamp(36px, 6vh, 64px);
    padding: clamp(24px, 4vw, 38px);
    background: var(--ie-cream-alt);
    border: 1px solid var(--ie-line);
    border-radius: 18px;
}

.ie-cine .ie-maleta__titulo {
    font-family: var(--ie-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    font-size: clamp(21px, 2.6vw, 30px);
    line-height: 1;
    color: var(--ie-red);
    margin: 0 0 18px;
}

.ie-maleta__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px clamp(20px, 3vw, 40px);
    margin: 0;
}

.ie-maleta__lista dt {
    font-size: 13px;
    font-weight: 700;
    color: var(--ie-maroon);
    margin-bottom: 3px;
}

.ie-maleta__lista dd {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ie-ink-soft);
}

/* ==========================================================================
   EL ITINERARIO DESPLEGABLE

   Cada día abre con <details> nativo. El resumen decide si te interesa; el
   detalle está a un toque, sin cargar nada ni salir de la página.
   ========================================================================== */

.ie-linea__detalle summary {
    display: block;
    cursor: pointer;
    position: relative;
    padding-right: 32px;
    /* El triángulo del navegador se quita: hay una flecha propia alineada con
       la retícula, y dos marcas para lo mismo es una de más. */
    list-style: none;
}
.ie-linea__detalle summary::-webkit-details-marker { display: none; }

.ie-linea__abrir {
    position: absolute;
    right: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    color: var(--ie-red);
    opacity: .55;
    transition: transform .3s var(--ie-curva), opacity .2s;
}
.ie-linea__abrir svg { width: 100%; height: 100%; display: block; }
.ie-linea__detalle summary:hover .ie-linea__abrir { opacity: 1; }
.ie-linea__detalle[open] .ie-linea__abrir { transform: rotate(180deg); opacity: 1; }

.ie-linea__detalle summary:focus-visible {
    outline: 3px solid var(--ie-red);
    outline-offset: 4px;
    border-radius: 6px;
}

/* --- La jornada, hora por hora --- */

.ie-jornada {
    list-style: none;
    margin: 14px 0 4px;
    padding: 0 0 0 2px;
    border-left: 1px solid var(--ie-line);
}

.ie-jornada li {
    display: grid;
    /* Columna fija para la hora: así todas quedan alineadas y la lista se lee
       como un horario y no como un párrafo con números dentro. */
    grid-template-columns: 52px 1fr;
    gap: 10px;
    padding: 7px 0 7px 14px;
}

.ie-jornada__hora {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--ie-red);
    padding-top: 1px;
}
.ie-jornada__hora--vacia { display: block; }

.ie-jornada__que {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ie-ink);
}
.ie-jornada__que em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--ie-ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
    .ie-linea__detalle[open] .ie-jornada {
        animation: ie-jornada-abre .35s var(--ie-curva) both;
    }
    @keyframes ie-jornada-abre {
        from { opacity: 0; translate: 0 -6px; }
        to   { opacity: 1; translate: none; }
    }
}

/* ==========================================================================
   EL MENÚ FLOTANTE

   Índice de la portada. Puntos en el costado derecho: el nombre aparece al
   pasar el cursor o al enfocar con teclado, para no montar una columna de
   texto encima de la página.
   ========================================================================== */

.ie-ancla {
    /* Ancla desplazada: sin esto, el salto deja el título pegado al borde
       superior de la ventana. */
    display: block;
    position: relative;
    top: -40px;
}

.ie-indice {
    position: fixed;
    right: clamp(10px, 1.6vw, 20px);
    top: 50%;
    translate: 0 -50%;
    z-index: 55;
    /* Empieza invisible: mientras el telón está puesto no hay nada que
       navegar. El guion lo enciende al arrancar la película. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s var(--ie-curva);
}
.ie-arranca .ie-indice { opacity: 1; pointer-events: auto; }

.ie-indice ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ie-indice a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    /* 44 px de alto: el mínimo cómodo para tocar o apuntar. */
    min-height: 34px;
    padding: 4px 2px 4px 10px;
    text-decoration: none;
}

.ie-indice__punto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ie-maroon);
    opacity: .3;
    transition: opacity .25s, scale .25s var(--ie-curva);
}

.ie-indice__nombre {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ie-maroon);
    white-space: nowrap;
    /* Oculto sin sacarlo del árbol: un lector de pantalla lo lee igual, y al
       enfocar con teclado aparece. */
    opacity: 0;
    translate: 6px 0;
    transition: opacity .25s, translate .25s var(--ie-curva);
}

.ie-indice a:hover .ie-indice__punto,
.ie-indice a:focus-visible .ie-indice__punto { opacity: .8; scale: 1.15; }

.ie-indice a:hover .ie-indice__nombre,
.ie-indice a:focus-visible .ie-indice__nombre { opacity: 1; translate: none; }

.ie-indice a:focus-visible {
    outline: 2px solid var(--ie-red);
    outline-offset: 2px;
    border-radius: 999px;
}

/* La sección en la que estás. */
.ie-indice a.esta-aqui .ie-indice__punto {
    opacity: 1;
    background: var(--ie-red);
    scale: 1.3;
}

/* Sobre los actos oscuros, el marrón desaparece: se aclara. */
.ie-indice.sobre-oscuro .ie-indice__punto { background: var(--ie-cream); }
.ie-indice.sobre-oscuro .ie-indice__nombre { color: var(--ie-cream); }
.ie-indice.sobre-oscuro a.esta-aqui .ie-indice__punto { background: var(--ie-red-claro); }

/* En el teléfono el recorrido ES el contenido, y un menú fijo se come el
   pulgar. Además ahí abajo ya está el botón del sonido. */
@media (max-width: 640px) {
    .ie-indice { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ie-indice, .ie-indice__punto, .ie-indice__nombre { transition: none; }
}


/* --- Las dos maletas --- */

.ie-maleta__fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(16px, 3vw, 32px);
    margin: 0 0 clamp(22px, 4vh, 34px);
}

.ie-maleta__fotos img {
    display: block;
    width: 100%;
    height: auto;
    /* Sin marco ni fondo: vienen recortadas y se apoyan en el crema del bloque,
       igual que las figuras de arriba. */
}

/* ==========================================================================
   CON EL TELÓN PUESTO, LA PÁGINA NO SE MUEVE

   El telón es `position: fixed`, así que tapa la pantalla entera pero NO impide
   que la página de detrás se desplace. En un teléfono eso es una trampa: se
   abre el sitio, se ve una portada quieta con un botón, y el primer instinto es
   deslizar para ver si hay más. No pasa nada visible —el telón sigue ahí— pero
   la página de atrás ya viajó tres mil píxeles. Al pulsar Join, el telón se va
   y la persona aparece a mitad del recorrido, sin haber visto el principio.

   Le pasó a la clienta en su primera visita desde el móvil.

   overflow:hidden en html y body basta en escritorio; en iOS hace falta además
   touch-action, porque Safari sigue permitiendo el arrastre táctil del
   documento aunque el overflow esté cerrado.
   ========================================================================== */

html.ie-telon-puesto,
html.ie-telon-puesto body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

html.ie-telon-puesto body {
    touch-action: none;
}