/* HorizontalPosterStrip.css — Carrusel de pósters tipo acordeón. Nodos 1535:27407 (PC),
   1535:27737 (tablet), 1535:28058 (mobile).
   LA TARJETA EN FOCO OCUPA EL ANCHO DEL CONTENIDO y las demás quedan en el tamaño chico del nodo,
   que es el estado que los tres nodos dibujan con la primera tarjeta. El foco lo mueven las flechas
   en los dispositivos con puntero y el deslizamiento en los táctiles.
   Los tres nodos son el mismo dibujo escalado, así que el alto sale de UNA proporción para los
   cuatro rangos y no hay medidas por breakpoint: lo único propio de tablet y mobile es el radio.
   LOS TEXTOS NO SE CALCAN de esos dos nodos: son el de escritorio reducido y dan cuerpos de 8px. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. --- */
.HorizontalPosterStrip {
    --HorizontalPosterStrip-pad: min(3.75vw, 48px); /* Separación con el borde de la ventana. */
    --HorizontalPosterStrip-gap: min(1.25vw, 16px); /* Separación entre tarjetas. */
    /* Ancho del contenido: el techo del sitio, o lo que deje la ventana descontando el relleno. */
    --HorizontalPosterStrip-content: min(var(--container-max-width), calc(100vw - 2 * var(--HorizontalPosterStrip-pad)));
    /* Alto de la fila. SALE DEL ANCHO DE LA TARJETA EN FOCO para conservar el 4,2:1 del nodo
       (280/1174): da 282px a 1280 de ventana, 169 a 768, 83 a 375 y 382 con el techo de 1600. */
    --HorizontalPosterStrip-height: calc(var(--HorizontalPosterStrip-content) * 280 / 1174);
    /* Ancho de la tarjeta chica. SALE DEL ALTO para conservar la proporción del nodo (284/280): da
       286px a 1280, 171 a 768 y 84 a 375, y no se estira en vertical arriba de la mesa del diseño. */
    --HorizontalPosterStrip-card: calc(var(--HorizontalPosterStrip-height) * 284 / 280);
    --HorizontalPosterStrip-card-pad: min(1.09vw, 14px); /* Aire del CTA contra el borde de la foto. */
    --HorizontalPosterStrip-motion: 350ms ease-out; /* Duración y curva del hover y del acordeón. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding-block: min(4.06vw, 52px); /* Aire arriba y abajo. */
    padding-inline: var(--HorizontalPosterStrip-pad); /* Relleno lateral. */
    /* El sangrado de la tira usa 50vw, y vw INCLUYE el ancho de la barra de desplazamiento, así que
       se pasa unos 8px del borde real y esos 8px dejaban arrastrar la página de costado. Se recorta
       acá, en la sección, que ya va a sangre: el dibujo no cambia. Es clip y no hidden, que
       convertiría la sección en contenedor de desplazamiento y cortaría la sombra de las tarjetas. */
    overflow-x: clip;
}

/* Contenido centrado dentro del techo del sitio. */
.HorizontalPosterStrip-container {
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    display: flex; /* Apila encabezado y tira. */
    flex-direction: column; /* En columna. */
    gap: min(1.5625vw, 20px); /* Separación entre el encabezado y la tira. */
}

/* --- Encabezado: textos a la izquierda, flechas a la derecha. --- */
.HorizontalPosterStrip-header {
    display: flex; /* Textos y flechas en línea. */
    align-items: flex-end; /* Las flechas quedan a ras del título. */
    justify-content: space-between; /* El sobrante queda en el medio. */
    gap: min(1.25vw, 16px); /* Separación mínima entre los dos bloques. */
}

/* Columna de textos del encabezado. */
.HorizontalPosterStrip-header-text {
    display: flex; /* Apila etiqueta y título. */
    flex-direction: column; /* En columna. */
    gap: min(0.7vw, 9px); /* Separación entre los dos. */
    min-width: 0; /* Deja que un título largo envuelva en vez de meterse bajo las flechas. */
}

/* Etiqueta sobre el título. */
.HorizontalPosterStrip-eyebrow {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: min(0.78vw, 10px); /* Separación entre los dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 1.17vw, 14px); /* Tamaño del nodo, con piso legible. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Token de la paleta. */
}

/* Cuadradito que precede a la etiqueta. */
.HorizontalPosterStrip-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. No escala: se volvería invisible. */
    height: 7px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.HorizontalPosterStrip-title {
    margin: 0; /* Quita el margen propio del título. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(20px, 3vw, 36px); /* Toca los 36px del nodo en el piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Flechas. NO ESTÁN EN NINGÚN NODO: las pidió el negocio, y las pidió para LOS CUATRO RANGOS.
   En táctil conviven con el deslizamiento: son dos caminos al mismo foco, no uno el reemplazo del
   otro. --- */
.HorizontalPosterStrip-controls {
    display: inline-flex; /* Visibles en los cuatro rangos. */
    flex: 0 0 auto; /* No se comprimen. */
    gap: 8px; /* Separación entre las dos. */
}

/* Una flecha de navegación. */
.HorizontalPosterStrip-control {
    position: relative; /* Origen del blanco táctil. */
    display: inline-flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 32px; /* Diámetro del diseño. */
    height: 32px; /* Cuadrado, para que el radio dé un círculo. */
    border-radius: 16px; /* La mitad del lado: círculo exacto. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Contorno tenue. */
    background-color: transparent; /* Sin relleno en reposo. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 15px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    color: rgba(15, 15, 18, 0.55); /* Gris del signo. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Suaviza los estados. */
}

    /* Flecha disponible con el puntero encima. */
    .HorizontalPosterStrip-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06); /* Se rellena apenas. */
    }

    /* En los extremos se apaga y no se oculta: la flecha gris confirma que se llegó al final. */
    .HorizontalPosterStrip-control:disabled {
        opacity: 0.35; /* Atenuada. */
        cursor: default; /* Ya no es accionable. */
    }

/* --- La tira. SANGRA HASTA LOS DOS BORDES DE LA VENTANA para que asomen la tarjeta anterior y la
   siguiente: ese asomo es lo que le dice al visitante que hay más y que puede deslizar.
   El margen negativo y el relleno usan LA MISMA fórmula, medida contra el contenedor, así que el
   contenido de la tira cae exacto sobre el eje del contenido, topada en 1600px y a ancho completo. --- */
.HorizontalPosterStrip-track {
    display: flex; /* Tarjetas en línea. */
    gap: var(--HorizontalPosterStrip-gap); /* Separación entre tarjetas. */
    overflow-x: auto; /* Se recorre en horizontal: el script la mueve con scrollTo. */
    overscroll-behavior-x: contain; /* El gesto muere en la pista: sin esto, al llegar al final arrastra la página. */
    /* EL DEDO NO DESPLAZA LA TIRA: pan-y le deja al navegador solo el eje vertical, o sea el
       desplazamiento de la página, y le saca el horizontal. Sin esto el navegador la desplaza con su
       INERCIA, y era la inercia -- y no el visitante -- la que decidía cuántas tarjetas avanzaba un
       envión: un gesto tiene que mover UNA tarjeta, y de eso se encarga el script. */
    touch-action: pan-y;
    /* SIN scroll-snap, Y NO ES UN OLVIDO: los puntos de enganche son los bordes de las tarjetas, y
       con la tarjeta en foco midiendo todo el contenido esos bordes NO caen en múltiplos del paso, así
       que el enganche dejaba la tira en posiciones que el script no puede traducir a un cambio de
       foco. La alineación la hace el script al soltar el gesto. */
    margin-inline: calc(50% - 50vw); /* Sangrado hasta los dos bordes de la ventana. */
    padding-inline: calc(50vw - 50%); /* Devuelve el contenido de la tira al eje del contenido. */
    scrollbar-width: none; /* La barra no está en el diseño: se recorre con flechas o dedo. */
}

    /* Ídem en los navegadores WebKit. */
    .HorizontalPosterStrip-track::-webkit-scrollbar {
        display: none; /* Sin barra visible. */
    }

/* --- Tarjeta de la tira. --- */
.HorizontalPosterStrip-card {
    flex: 0 0 var(--HorizontalPosterStrip-card); /* Tamaño chico del nodo; el foco la agranda. */
    display: flex; /* Apila foto y etiqueta. */
    flex-direction: column; /* En columna. */
    gap: min(0.78vw, 10px); /* Separación entre la foto y su etiqueta. */
    min-width: 0; /* Permite comprimirse en vez de desbordar. */
    transition: flex-basis var(--HorizontalPosterStrip-motion); /* Suaviza el acordeón. */
}

    /* LA TARJETA EN FOCO OCUPA EL ANCHO DEL CONTENIDO: el 100% se mide contra el contenido de la
       tira, que el sangrado y el relleno dejan igual al del contenedor, así que la foto queda
       alineada con los dos bordes del título. La clase la mueve el script, y la vista ya la emite en
       la primera tarjeta para que no se vea chica hasta que el script corra. */
    .HorizontalPosterStrip-card.is-active {
        flex-basis: 100%; /* Ancho del contenido. */
    }

/* LOS CINCO ESTADOS DEL ENLACE VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y
   pintaría la etiqueta azul y subrayada. */
.HorizontalPosterStrip-card:link,
.HorizontalPosterStrip-card:visited,
.HorizontalPosterStrip-card:hover,
.HorizontalPosterStrip-card:focus,
.HorizontalPosterStrip-card:active {
    color: #0f0f12; /* Casi negro en los cinco estados. */
    text-decoration: none; /* Sin subrayado en ninguno. */
}

/* El anillo de foco va sobre la foto: alrededor de la tarjeta caería sobre el fondo blanco de la
   sección y rodearía también a la etiqueta. */
.HorizontalPosterStrip-card:focus-visible {
    outline: none; /* Fuera el anillo del navegador. */
}

    /* Anillo de foco sobre la foto. */
    .HorizontalPosterStrip-card:focus-visible .HorizontalPosterStrip-media {
        outline: 2px solid #ffffff; /* Blanco, visible sobre la foto. */
        outline-offset: -3px; /* Hacia adentro, para no salirse del recorte. */
    }

/* --- Recuadro de la foto. --- */
.HorizontalPosterStrip-media {
    position: relative; /* Origen de la imagen, el degradado y el CTA. */
    overflow: hidden; /* Recorta la imagen ampliada. */
    border-radius: 14px; /* Radio del nodo de PC; tablet y mobile lo bajan a 6px. */
    /* ALTO Y NO PROPORCIÓN: el ancho de la tarjeta cambia con el foco, y una proporción le
       calcularía el ancho a la tarjeta en vez de tomarlo del acordeón. */
    height: var(--HorizontalPosterStrip-height);
}

/* La foto. DESBORDA UN PÍXEL POR LADO A PROPÓSITO: el ancho de la tarjeta es fraccionario y una
   foto de 100 % exacto deja un borde sin pintar por el antialias del recorte. */
.HorizontalPosterStrip-image {
    position: absolute; /* Dentro del recuadro. */
    top: -1px; /* El píxel de desborde. */
    left: -1px; /* Ídem. */
    width: calc(100% + 2px); /* Compensa el desborde de los dos lados. */
    height: calc(100% + 2px); /* Ídem. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Conserva el centro al recortar. */
    display: block; /* Quita el hueco de renglón que deja un img en línea. */
    transition: transform var(--HorizontalPosterStrip-motion); /* Suaviza el zoom. */
}

/* Degradado de legibilidad del nodo. */
.HorizontalPosterStrip-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre el recuadro entero. */
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
}

/* Velo de color del hover. Solo se emite en las tarjetas con destino. */
.HorizontalPosterStrip-veil {
    position: absolute; /* Sobre el degradado. */
    inset: 0; /* Cubre el recuadro entero. */
    background-color: var(--color-cool-neutral-02); /* Token de la paleta. */
    opacity: 0; /* Invisible en reposo. */
    transition: opacity var(--HorizontalPosterStrip-motion); /* Suaviza la aparición. */
}

/* Llamado a la acción del hover: arriba a la izquierda, entrando desde arriba. */
.HorizontalPosterStrip-cta {
    position: absolute; /* Sobre la foto. */
    top: var(--HorizontalPosterStrip-card-pad); /* Aire con el borde de arriba. */
    left: var(--HorizontalPosterStrip-card-pad); /* Aire con el borde izquierdo. */
    right: var(--HorizontalPosterStrip-card-pad); /* Aire con el borde derecho. */
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: min(0.55vw, 7px); /* Separación entre las dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 1.17vw, 14px); /* Tamaño del nodo, con piso legible. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: #ffffff; /* Blanco sobre la foto. */
    opacity: 0; /* Invisible en reposo. */
    transform: translateY(-6px); /* Entra desde arriba. */
    transition: opacity var(--HorizontalPosterStrip-motion), transform var(--HorizontalPosterStrip-motion); /* Suaviza la entrada. */
}

/* LOS ENLACES DEL SITIO NO VAN SUBRAYADOS, en ningún estado. */
.HorizontalPosterStrip-cta-text {
    text-decoration: none; /* Sin subrayado. */
}

/* Envoltorio de la flecha del CTA. */
.HorizontalPosterStrip-arrow {
    display: inline-flex; /* Se ciñe al SVG. */
    align-items: center; /* Centrada con la leyenda. */
    transition: transform 200ms ease; /* Avanza con el hover de la tarjeta. */
}

/* Trazo de la flecha. */
.HorizontalPosterStrip-arrow-icon {
    display: block; /* Caja propia. */
    width: 14px; /* Tamaño del diseño. */
    height: 14px; /* Cuadrada. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke: currentColor; /* Toma el color del texto que la contiene. */
    stroke-width: 2; /* Grosor del trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Etiqueta de la tarjeta, debajo de la foto. --- */
.HorizontalPosterStrip-card-title {
    margin: 0; /* Quita el margen propio del título. */
    font-family: var(--font-brand); /* Pila de marca. */
    /* 13px del nodo de PC. El piso NO es el 8px de tablet y mobile: esos nodos son el de escritorio
       reducido y 8px no es un tamaño legible. */
    font-size: clamp(11px, 1.08vw, 13px);
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Hover. Va dentro de @media (hover: hover) porque el negocio pidió que sin puntero el texto
   del enlace no se muestre. El foco de teclado repite el estado FUERA de esa condición. --- */
@media (hover: hover) {
    .HorizontalPosterStrip-controls {
        display: inline-flex; /* Las flechas aparecen. */
    }

    /* Zoom de la foto. */
    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-image {
        transform: scale(1.045); /* El mismo 4,5 % que LatestMediaMosaic. */
    }

    /* Aparece el velo de color. */
    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-veil {
        opacity: 0.28; /* Velo tenue. */
    }

    /* Entra el llamado a la acción. */
    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-cta {
        opacity: 1; /* Visible. */
        transform: translateY(0); /* En su lugar. */
    }

    /* La flecha avanza. */
    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-arrow {
        transform: translateX(3px); /* Tres píxeles a la derecha. */
    }
}

/* Foco de teclado: zoom de la foto. */
a.HorizontalPosterStrip-card:focus-visible .HorizontalPosterStrip-image {
    transform: scale(1.045); /* Igual que el hover. */
}

/* Foco de teclado: velo de color. */
a.HorizontalPosterStrip-card:focus-visible .HorizontalPosterStrip-veil {
    opacity: 0.28; /* Igual que el hover. */
}

/* Foco de teclado: entra el llamado a la acción. */
a.HorizontalPosterStrip-card:focus-visible .HorizontalPosterStrip-cta {
    opacity: 1; /* Visible. */
    transform: translateY(0); /* En su lugar. */
}

/* --- Tablet: hasta 1024px. El nodo es el de escritorio por 0,6, así que el layout lo resuelven las
   proporciones del bloque base. Lo único propio es el radio. --- */
@media (max-width: 1024px) {
    .HorizontalPosterStrip-media {
        border-radius: 6px; /* Radio del nodo de tablet. */
    }
}

/* --- Mobile: hasta 500px. El acordeón es el mismo en proporción, así que lo único propio es el
   aire del CTA: el del bloque base, escalado, da 4px y el texto no respira. --- */
@media (max-width: 500px) {
    .HorizontalPosterStrip {
        --HorizontalPosterStrip-card-pad: 14px; /* Aire propio del CTA. */
    }
}

/* --- Movimiento reducido: sin zoom ni desplazamientos. --- */
@media (prefers-reduced-motion: reduce) {
    .HorizontalPosterStrip-card,
    .HorizontalPosterStrip-image,
    .HorizontalPosterStrip-veil,
    .HorizontalPosterStrip-cta,
    .HorizontalPosterStrip-arrow,
    .HorizontalPosterStrip-control {
        transition: none; /* Sin interpolación. */
    }

    .HorizontalPosterStrip-cta {
        transform: none; /* El CTA aparece en su lugar, sin entrar desde arriba. */
    }

    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-image,
    a.HorizontalPosterStrip-card:focus-visible .HorizontalPosterStrip-image {
        transform: none; /* La foto no crece. */
    }

    a.HorizontalPosterStrip-card:hover .HorizontalPosterStrip-arrow {
        transform: none; /* La flecha no avanza. */
    }
}