/* PillarPosterGrid.css — "Los cuatro pilares". Nodos 499:29534 (PC), 820:38193 (tablet),
   820:38075 (mobile); hover del prototipo 139:27034 (350 ms ease-out). Tipografía: site.css.
   Los tres rangos pintan el MISMO DOM: escritorio es una cuadrícula de dos columnas, tablet un
   carrusel de dos con flechas, y mobile una columna apilada.
   Hay un @media a 620px que NO es del estándar: es una guarda medida, documentada ahí. */

/* --- Sección: fondo blanco a sangre completa con el contenido acotado. --- */
.PillarPosterGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding: clamp(36px, 4.375vw, 56px) 0; /* 56px del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio. */
.PillarPosterGrid-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    padding: 0 clamp(20px, 3.75vw, 48px); /* 48px laterales del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta con cuadrado, título y bajada. --- */
.PillarPosterGrid-header {
    margin-bottom: clamp(16px, 1.875vw, 24px); /* 24px hasta la cuadrícula, según el nodo. */
}

/* Etiqueta sobre el título. */
.PillarPosterGrid-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación entre los dos. */
    margin: 0 0 10px; /* Solo separación con el título. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.22px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #243746; /* Azul marino del nodo, no naranja. */
}

/* Cuadrado exacto y no un punto: el nodo es un frame de 7x7 sin radio. SOLO EXISTE EN PC. */
.PillarPosterGrid-eyebrow-dot {
    width: 0.4375rem; /* 7px: cuadrado decorativo de ancho fijo. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.PillarPosterGrid-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(28px, 3vw, 36px); /* Toca los 36px del nodo a partir de 1200px. */
    font-weight: 700; /* Bold del diseño, no Black. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Bajada del título. */
.PillarPosterGrid-description {
    margin: 10px 0 0; /* Separación con el título. */
    max-width: 59.375%; /* 760/1280 del nodo, en porcentaje para aguantar en monitores anchos. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.55); /* Gris de cuerpo. */
}

/* --- Flechas del carrusel. SOLO SE VEN EN TABLET: acá quedan fuera del flujo, así que en
   escritorio y mobile no ocupan lugar ni entran en el orden de tabulación. --- */
.PillarPosterGrid-controls {
    display: none; /* Las enciende el bloque de tablet. */
}

/* Una flecha de navegación. */
.PillarPosterGrid-arrow {
    width: 36px; /* Diámetro del nodo. */
    height: 36px; /* Cuadrado, para que el radio dé un círculo. */
    flex: none; /* No se comprime. */
    display: flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    padding: 0; /* Sin relleno del button. */
    border: 1px solid rgba(15, 15, 18, 0.16); /* Contorno tenue. */
    border-radius: 18px; /* La mitad del lado: círculo exacto, como el nodo. */
    background-color: #ffffff; /* Fondo blanco. */
    font-size: 15px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: rgba(15, 15, 18, 0.75); /* Gris del signo. */
    cursor: pointer; /* Indica que es accionable. */
    transition: border-color 200ms ease, color 200ms ease; /* Suaviza el hover. */
}

    /* Flecha disponible con el puntero encima o con el foco. */
    .PillarPosterGrid-arrow:hover:not(:disabled),
    .PillarPosterGrid-arrow:focus-visible:not(:disabled) {
        border-color: #ff5a1f; /* Contorno naranja. */
        color: #ff5a1f; /* Signo naranja. */
    }

    /* Deshabilitada es la que llegó al extremo. Se deja visible y atenuada: si desapareciera, la
       fila de controles cambiaría de ancho y la otra flecha se correría bajo el dedo. */
    .PillarPosterGrid-arrow:disabled {
        opacity: 0.35; /* Atenuada. */
        cursor: default; /* Ya no es accionable. */
    }

/* --- Cuadrícula: dos columnas que envuelven. --- */
.PillarPosterGrid-viewport {
    width: 100%; /* NO recorta acá: en tablet se convierte en la ventana del carrusel. */
}

/* Carril de los pósters. */
.PillarPosterGrid-track {
    /* Va como variable porque el ancho de cada póster se calcula restándola y el script la lee para
       saber cuánto avanzar en cada movimiento. */
    --PillarPosterGrid-gap: clamp(12px, 1.5625vw, 20px);
    display: flex; /* Pósters en línea. */
    flex-wrap: wrap; /* Bajan de renglón cuando no entran. */
    gap: var(--PillarPosterGrid-gap); /* Separación entre pósters. */
}

/* --- El póster: foto, degradado, filete, escuadra de color y caja de texto abajo. --- */
.PillarPosterGrid-poster {
    position: relative; /* Origen de las capas y del ::after del enlace. */
    /* LA CAJA DE TEXTO VA EN EL FLUJO Y SE ANCLA ABAJO CON flex-end, no con position:absolute: el
       área clickeable es el ::after del ancla del título, y un ::after absoluto se estira hasta el
       ancestro posicionado más cercano. Con la caja posicionada, el clic sobre la foto no llegaba. */
    display: flex;
    flex-direction: column; /* En columna. */
    justify-content: flex-end; /* Ancla la caja de texto al borde inferior. */
    isolation: isolate; /* Los z-index negativos quedan detrás del texto y delante del respaldo. */
    flex: 0 0 calc((100% - var(--PillarPosterGrid-gap)) / 2); /* Dos por fila, como el nodo. */
    aspect-ratio: 582 / 330; /* Proporción del nodo de PC, en vez de un alto fijo. */
    /* EL min-height NO ES DECORATIVO: un elemento flexible arranca en min-height:auto, que le gana
       al aspect-ratio. El overflow también lo lleva a cero, pero se declaran los dos: si alguna vez
       se quitara el recorte, la proporción seguiría respetándose. */
    min-height: 0;
    overflow: hidden; /* Recorta las capas al borde del póster. */
    background-color: #1a1a1f; /* Respaldo mientras carga la foto o si su URL no resuelve. */
    --PillarPosterGrid-hover-duration: 350ms; /* Ventana del prototipo, compartida por las tres capas. */
    --PillarPosterGrid-hover-easing: cubic-bezier(0, 0, 0.58, 1); /* Curva del prototipo. */
    --PillarPosterGrid-corner: clamp(12px, 1.1vw, 14px); /* Grosor de las esquinas: no escala. */
}

/* --accent es la escuadra; --accent-veil el velo de la caja EN REPOSO y --accent-veil-strong el del
   HOVER. Los tres son el MISMO color con distinta opacidad, y los velos van como rgba completo para
   que la opacidad no arrastre al texto que llevan adentro.

   LOS COLORES YA NO ESTÁN ACÁ. Salen del ciclo que el editor carga en el diseñador del widget,
   eligiendo cada color del módulo "colorpalettes" del backoffice, y se aplican por POSICIÓN del
   póster. La vista los emite en el style de cada póster, ya combinados con las tres opacidades que
   también se eligen en el diseñador (100 %, 25 % y 55 % por omisión, que son los valores del diseño).
   Lo único que queda en esta hoja es el valor de respaldo de cada var(), para un póster que llegue
   sin style.

   ATENCIÓN AL AGREGAR COLORES AL MÓDULO: la paleta del CMS NO TIENE los cuatro colores de este
   diseño. Medido el 2026-09-10 contra los 22 registros del módulo, el más cercano a cada uno queda a
   ΔE2000 de 5,5 (naranja y rojo), 7,7 (gris azulado) y 16,3 (verde petróleo, o sea otro color). Para
   que la sección se vea igual que antes hay que dar de alta en el módulo los cuatro hexadecimales
   originales: #FF5A1F, #454F63, #ED1C24 y #0E5D60, y cargarlos en ese orden. */

/* Foto de fondo del póster. */
.PillarPosterGrid-poster-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre el póster entero. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    z-index: -1; /* Detrás del texto, delante del color de respaldo. */
    pointer-events: none; /* No intercepta el clic que va al ancla estirada. */
    /* El estado de reposo se declara acá y no solo en el @media para que la vuelta al soltar el
       mouse también sea animada: una transición solo en :hover entra suave y sale de golpe. */
    transform: scale(1);
    transform-origin: center center; /* Zoom centrado, como el prototipo. */
    transition: transform var(--PillarPosterGrid-hover-duration) var(--PillarPosterGrid-hover-easing); /* Suaviza el zoom. */
}

/* Degradado de legibilidad, con las tres opacidades y la parada al 44 % del nodo. ES EL MISMO EN
   REPOSO Y EN HOVER, y por eso no hay ningún cruce que animar: el prototipo lo declara idéntico en
   Estado=Default y Estado=Hover (leído el 2026-09-09 en 1274:11670 y sus tres hermanos).

   ANTES cruzaba 0.02/0.16/0.40 -> 0.10/0.44/0.84 con un ::after por opacidad. Esos valores salían
   del prototipo VIEJO (IFSvSq5rioepaGL54XCDmy, 139:27034) y el usuario decidió (2026-09-09) alinear
   al nuevo, así que el pseudoelemento se eliminó. NO reponerlo. */
.PillarPosterGrid-poster-veil {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre el póster entero. */
    background-image: linear-gradient(180deg, rgba(15, 15, 18, 0.1) 0%, rgba(15, 15, 18, 0.44) 44%, rgba(15, 15, 18, 0.84) 100%); /* Degradado del nodo. */
    z-index: -1; /* Sobre la foto, debajo del texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior del nodo. */
.PillarPosterGrid-poster-fillet {
    position: absolute; /* Sobre las capas. */
    top: 0; /* Al borde de arriba. */
    left: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 1px; /* Línea del nodo. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco tenue. */
    z-index: -1; /* Sobre la foto, debajo del texto. */
    pointer-events: none; /* No intercepta clics. */
}

/* Escuadra del ángulo inferior derecho. Se ancla a ese ángulo —nunca con el top y el left literales
   del nodo— para que siga cerrada en cualquier ancho. */
.PillarPosterGrid-poster-corner {
    position: absolute; /* Anclada a la esquina. */
    right: 0; /* Al borde derecho. */
    bottom: 0; /* Al borde inferior. */
    background-color: var(--accent, #ff5a1f); /* Color del pilar. */
    /* POR ENCIMA DE LA CAJA DE TEXTO: en el nodo son hijos posteriores a ella y se superponen en una
       franja, donde el color pleno tiene que ganarle al velo translúcido. */
    z-index: 1;
    pointer-events: none; /* El ::after del ancla está más arriba: el clic no se pierde. */
}

/* Barra horizontal de la escuadra. */
.PillarPosterGrid-poster-corner--bottom {
    width: 34%; /* 198/582 del ancho del póster, en los tres nodos. */
    height: var(--PillarPosterGrid-corner); /* Grosor común. */
}

/* Barra vertical de la escuadra. */
.PillarPosterGrid-poster-corner--side {
    width: var(--PillarPosterGrid-corner); /* Grosor común. */
    height: 30%; /* 99/330 del alto, también constante en los tres nodos. */
}

/* --- Caja de texto. SE ANCLA AL BORDE INFERIOR Y NO AL top DEL NODO: ahí el top declarado es
   exactamente el alto del póster menos el del contenido, y calcado a porcentaje se desalinearía en
   cuanto el texto real ocupe distinto que el del mockup. --- */
.PillarPosterGrid-poster-caption {
    width: 84%; /* 489/582 del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila los textos y el CTA. */
    flex-direction: column; /* En columna. */
    gap: 2px; /* Separación del nodo. */
    padding: 12px 16px 14px; /* Rellenos del nodo. */
    background-color: var(--accent-veil, rgba(255, 90, 31, 0.25)); /* Velo del color del pilar. */
    transition: background-color var(--PillarPosterGrid-hover-duration) var(--PillarPosterGrid-hover-easing); /* Arranca y termina con el zoom. */
    /* SIN overflow:hidden, Y NO ES UN OLVIDO: el nodo declara overflow-clip acá, pero un recorte en
       la caja también recorta el ::after del ancla, que es el área clickeable del póster. */
}

/* Nombre del pilar. */
.PillarPosterGrid-poster-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 32px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* El ancla envuelve solo al título y el ::after estira el área clickeable al póster entero: así el
   nombre accesible del enlace es el título del pilar y no los tres textos seguidos.
   EL COLOR Y EL SUBRAYADO SE REPITEN EN TODOS LOS ESTADOS Y NO ES REDUNDANCIA: una clase suelta le
   gana al "a" a secas de Bootstrap pero PIERDE contra su "a:hover". NO se resuelve con !important a
   propósito: es un problema de especificidad. */
.PillarPosterGrid-poster-link,
.PillarPosterGrid-poster-link:link,
.PillarPosterGrid-poster-link:visited,
.PillarPosterGrid-poster-link:hover,
.PillarPosterGrid-poster-link:focus,
.PillarPosterGrid-poster-link:focus-visible,
.PillarPosterGrid-poster-link:active {
    color: inherit; /* Hereda del título, que es blanco. Nunca el azul de enlace del tema. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
}

    /* Estira el área clickeable al póster entero. */
    .PillarPosterGrid-poster-link::after {
        content: ""; /* Necesario para que el pseudoelemento exista. */
        position: absolute; /* Contra el póster. */
        inset: 0; /* Lo cubre entero. */
        z-index: 2; /* Sobre TODAS las capas, esquinas incluidas. */
    }

    /* EL TÍTULO NO SE SUBRAYA NI CAMBIA DE COLOR EN EL HOVER: la afordancia que eligió el prototipo
       es otra —aparece el bloque "Ver más"— y dos señales de enlace competirían en la tarjeta. */

    /* El foco se dibuja sobre el póster entero y no sobre el título, porque el área clickeable es el
       póster: un anillo alrededor de dos palabras no diría dónde está parado el visitante. */
    .PillarPosterGrid-poster-link:focus-visible {
        outline: none; /* Fuera el anillo del navegador. */
    }

        /* Anillo de foco sobre el póster. */
        .PillarPosterGrid-poster-link:focus-visible::after {
            outline: 2px solid #ffffff; /* Blanco, visible sobre la foto. */
            outline-offset: -4px; /* Hacia adentro, para no salirse del recorte. */
        }

/* --- Llamado a la acción "Ver más". VA DENTRO DEL FLUJO de la caja y no flotando encima del
   párrafo, que es lo que lo hacía superponerse a la descripción. EN REPOSO NO OCUPA LUGAR: con el
   hover crece y, como la caja se ancla abajo, crecer hace que "suba" en vez de desbordar. --- */
.PillarPosterGrid-poster-cta {
    display: flex; /* Texto y flecha en línea. */
    align-items: center; /* La flecha del estándar es un SVG y NO tiene línea base propia. */
    gap: 9px; /* Separación del nodo entre el texto y la flecha. */
    overflow: hidden; /* Recorta el texto mientras el alto es cero. */
    font-size: 15.5px; /* Tamaño del prototipo. */
    font-weight: 400; /* Regular, el mismo criterio que el resto de los CTA del sitio. */
    line-height: 1.1; /* Interlineado apretado. */
    color: #ffffff; /* Blanco sobre el velo. */
    white-space: nowrap; /* En una sola línea. */
    pointer-events: none; /* El clic lo recibe el ::after del ancla. */
    max-height: 0; /* No ocupa lugar en reposo. */
    margin-top: 0; /* Sin separación mientras está cerrado. */
    opacity: 0; /* Invisible en reposo. */
    transition: max-height var(--PillarPosterGrid-hover-duration) var(--PillarPosterGrid-hover-easing),
                margin-top var(--PillarPosterGrid-hover-duration) var(--PillarPosterGrid-hover-easing),
                opacity var(--PillarPosterGrid-hover-duration) var(--PillarPosterGrid-hover-easing); /* Suaviza la apertura. */
}

/* Texto del CTA. Es el ancla del subrayado, que solo va bajo el texto y no bajo la flecha. */
.PillarPosterGrid-poster-cta-text {
    position: relative; /* Origen del filete. */
}

    /* Subrayado que el prototipo agrega bajo "Ver más". Existe únicamente en la variante Hover, así
       que acompaña la aparición del bloque y no necesita animación propia. */
    .PillarPosterGrid-poster-cta-text::after {
        content: ""; /* Necesario para que el pseudoelemento exista. */
        position: absolute; /* Bajo el texto. */
        left: 0; /* De borde a borde del texto. */
        right: 0; /* Ídem. */
        bottom: -5px; /* Justo debajo de la línea base, según el nodo. */
        height: 1.5px; /* Grosor del filete. */
        background-color: #ffffff; /* Blanco, como el texto. */
    }

/* Flecha del CTA. Es la del estándar del sitio, la misma que emiten los otros quince widgets: un
   SVG de trazo y no el carácter "→", así que su grosor lo fija stroke-width y no font-weight. */
.PillarPosterGrid-poster-cta-arrow {
    display: inline-flex; /* Se ciñe al SVG y no arrastra el interlineado del renglón. */
    align-items: center; /* Centrada con la etiqueta. */
}

/* Trazo de la flecha. */
.PillarPosterGrid-poster-cta-arrow-icon {
    width: 14px; /* Tamaño visual. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color del CTA que la contiene. */
    stroke-width: 3; /* Es lo único que hay que tocar para engrosarla. */
    fill: none; /* Sin esto el navegador rellenaría de negro lo que encierra la punta. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- EL HOVER DEL PÓSTER: las tres capas que mueve el prototipo -- la foto, el color de la caja y
   el "Ver más" --, disparadas juntas. EL DEGRADADO NO ES UNA DE ELLAS: es el mismo en las dos
   variantes.
   SE ACOTA A PUNTEROS FINOS y no es opcional: en táctil el navegador emula el hover y lo deja
   PEGADO después del toque. EL DISPARADOR ES LA TARJETA ENTERA y no el ancla, porque el área
   clickeable es todo el póster. El :focus-within le da al teclado el mismo estado. --- */
@media (hover: hover) and (pointer: fine) {

    /* La foto crece, con zoom CENTRADO: los desplazamientos del nodo son exactamente la mitad del
       crecimiento en cada eje. */
    .PillarPosterGrid-poster:hover .PillarPosterGrid-poster-image,
    .PillarPosterGrid-poster:focus-within .PillarPosterGrid-poster-image {
        transform: scale(1.08); /* Crece un 8 %. */
    }

    /* La caja de texto pasa al color vivo. Es el MISMO tono: el prototipo solo le sube la opacidad
       del 25 al 55 %, así que no hay un segundo hexadecimal que mantener. */
    .PillarPosterGrid-poster:hover .PillarPosterGrid-poster-caption,
    .PillarPosterGrid-poster:focus-within .PillarPosterGrid-poster-caption {
        background-color: var(--accent-veil-strong, rgba(255, 90, 31, 0.55)); /* Velo reforzado. */
    }

    /* El llamado a la acción se abre. */
    .PillarPosterGrid-poster:hover .PillarPosterGrid-poster-cta,
    .PillarPosterGrid-poster:focus-within .PillarPosterGrid-poster-cta {
        max-height: 24px; /* Alto suficiente para una línea a 15.5px sin recortarla. */
        margin-top: 6px; /* Separación con el texto de arriba. */
        opacity: 1; /* Visible. */
    }
}

/* Descripción del pilar. */
.PillarPosterGrid-poster-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 13.5px; /* Tamaño del nodo. */
    line-height: 19px; /* Interlineado del nodo. */
    color: rgba(255, 255, 255, 0.88); /* Blanco apenas atenuado. */
}

/* Línea de pie del pilar. */
.PillarPosterGrid-poster-tagline {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 11.5px; /* Tamaño del nodo. */
    line-height: 16px; /* Interlineado del nodo. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
}

/* --- TABLET: hasta 1024px (nodo 820:38193). El diseño pasa a ser un CARRUSEL de dos pósters con
   flechas: el carril deja de envolver, el viewport recorta y el desplazamiento lo aplica el JS.
   1024px y no 768px: un iPad real mide entre 810 y 834px en vertical. --- */
@media (max-width: 1024px) {
    .PillarPosterGrid {
        padding: clamp(36px, 6.5vw, 50px) 0 14px; /* El nodo deja solo 14px abajo. */
    }

    .PillarPosterGrid-container {
        padding: 0 clamp(20px, 4.17vw, 32px); /* 32px laterales del nodo de tablet. */
    }

    .PillarPosterGrid-header {
        margin-bottom: 18px; /* Separación del nodo hasta la fila de flechas. */
    }

    .PillarPosterGrid-eyebrow {
        margin-bottom: 18px; /* Separación con el título. */
        font-size: 10.5px; /* Tamaño del nodo de tablet. */
        letter-spacing: normal; /* El nodo de tablet no declara espaciado extra. */
    }

    .PillarPosterGrid-eyebrow-dot {
        display: none; /* El cuadrado NO existe en el nodo de tablet: la etiqueta va sola. */
    }

    .PillarPosterGrid-title {
        font-size: clamp(26px, 4.43vw, 34px); /* 34px del nodo, en su propia mesa. */
        letter-spacing: normal; /* El nodo de tablet no declara espaciado negativo. */
    }

    .PillarPosterGrid-description {
        margin-top: 18px; /* Separación con el título. */
        max-width: none; /* En tablet el nodo la estira a todo el ancho disponible. */
        font-size: 14px; /* Tamaño del nodo de tablet. */
        line-height: 1.5; /* Interlineado del nodo. */
        color: rgba(15, 15, 18, 0.6); /* Gris de cuerpo. */
    }

    /* Las flechas aparecen SOLO acá. Son dos condiciones distintas y las dos tienen que cumplirse:
       el rango lo decide el CSS, y si hay algo que recorrer lo decide el script después de medir. */
    .PillarPosterGrid-controls {
        display: flex; /* Visibles en este rango. */
        justify-content: flex-end; /* Contra el borde derecho. */
        align-items: center; /* Centradas entre sí. */
        gap: 8px; /* Separación entre las dos. */
        margin-bottom: 18px; /* Separación con el carril. */
    }

        /* El script quita el atributo cuando hay desbordamiento que recorrer. */
        .PillarPosterGrid-controls[hidden] {
            display: none; /* Ocultas mientras no haga falta. */
        }

    .PillarPosterGrid-viewport {
        overflow: hidden; /* La ventana del carrusel: recorta lo que queda fuera. */
    }

    .PillarPosterGrid-track {
        --PillarPosterGrid-gap: 16px; /* Separación del nodo de tablet. */
        --PillarPosterGrid-offset: 0px; /* Lo escribe el script; nace en cero por si el JS no corre. */
        flex-wrap: nowrap; /* El carril ya no envuelve. */
        transform: translateX(calc(var(--PillarPosterGrid-offset) * -1)); /* Desplazamiento actual. */
        transition: transform 400ms cubic-bezier(0.22, 0.61, 0.36, 1); /* Suaviza el paso. */
        will-change: transform; /* El carril se mueve entero, no cada póster por separado. */
        /* EL DEDO NO DESPLAZA NADA POR SU CUENTA: pan-y le deja al navegador solo el eje vertical, o
           sea el desplazamiento de la página, y le saca el horizontal. El gesto lo lee el script. */
        touch-action: pan-y;
    }

        /* Mientras el dedo está apoyado el carril tiene que seguirlo sin interpolar: con los 400ms
           puestos, el carril va atrás del dedo. Lo pone y lo saca el script. */
        .PillarPosterGrid-track.is-dragging {
            transition: none; /* Sin interpolación durante el arrastre. */
        }

    .PillarPosterGrid-poster {
        flex: 0 0 calc((100% - var(--PillarPosterGrid-gap)) / 2); /* Dos visibles a la vez. */
        aspect-ratio: 344 / 250; /* Proporción del nodo de tablet. */
    }

    .PillarPosterGrid-poster-caption {
        width: 87%; /* 300/344 del ancho del póster en el nodo de tablet. */
    }

    /* ATENCIÓN: EL NODO DECLARA 32px ACÁ Y NO ENTRA EN SU PROPIA CAJA: con el póster de 344px la
       caja deja 268px útiles y un título largo se recorta. El techo de 30px es el que entra. */
    .PillarPosterGrid-poster-title {
        font-size: clamp(22px, 3.9vw, 30px); /* Techo que entra completo. */
    }
}

/* --- GUARDA DEL BORDE ANGOSTO DEL RANGO DE TABLET — hasta 620px. NO ES UN RANGO NUEVO: es la misma
   vista de tablet con UN póster por pantalla, para teléfonos chicos ACOSTADOS.
   El motivo es medible: la caja de texto crece cuando el póster se angosta mientras su alto baja con
   la proporción, y cerca de los 600px la caja queda más alta que su póster. --- */
@media (max-width: 620px) {
    .PillarPosterGrid-poster {
        flex-basis: 100%; /* Uno por pantalla; el resto sobresale, listo para recorrerse. */
    }
}

/* --- MOBILE: hasta 500px (nodo 820:38075). El carrusel desaparece: los pósters se apilan y las
   flechas se ocultan. Va después del bloque de tablet para pisar solo lo que cambia. --- */
@media (max-width: 500px) {
    .PillarPosterGrid {
        padding: 36px 0 10px; /* Rellenos del nodo de mobile. */
    }

    .PillarPosterGrid-container {
        padding: 0 20px; /* Relleno lateral del nodo de mobile. */
    }

    .PillarPosterGrid-header {
        margin-bottom: 16px; /* Separación entre bloques en el nodo de mobile. */
    }

    .PillarPosterGrid-eyebrow {
        margin-bottom: 16px; /* Separación con el título. */
        font-size: 10px; /* Tamaño del nodo de mobile. */
    }

    .PillarPosterGrid-title {
        font-size: clamp(22px, 6.93vw, 26px); /* 26px del nodo, en su propia mesa. */
    }

    .PillarPosterGrid-description {
        margin-top: 16px; /* Separación con el título. */
        font-size: 13px; /* Tamaño del nodo de mobile. */
    }

    /* Sin carrusel no hay flechas. Se declara aparte del [hidden] del script porque acá la razón es
       el rango y no la medición: en mobile se recorre con el desplazamiento natural de la página. */
    .PillarPosterGrid-controls {
        display: none; /* Fuera en este rango. */
    }

    .PillarPosterGrid-viewport {
        overflow: visible; /* No hay nada que recortar en una columna. */
    }

    .PillarPosterGrid-track {
        --PillarPosterGrid-gap: 12px; /* Separación del nodo de mobile. */
        flex-direction: column; /* Un póster por fila. */
        /* ATENCIÓN: EL CARRIL NO SE DESPLAZA EN MOBILE. Se anula el transform porque el script puede
           haber dejado un desplazamiento escrito antes de llegar a este rango. */
        transform: none; /* Sin desplazamiento. */
        transition: none; /* Sin animación de paso. */
        will-change: auto; /* Sin preparación de capa. */
    }

    .PillarPosterGrid-poster {
        flex: 0 0 auto; /* Uno por fila. */
        width: 100%; /* A todo el ancho. */
        aspect-ratio: 335 / 215; /* Proporción del nodo de mobile. */
    }

    .PillarPosterGrid-poster-caption {
        width: 88%; /* 295/335 del ancho del póster en el nodo de mobile. */
    }

    /* Mismo caso que en tablet y más apretado: la caja deja 263px útiles y los 32px del nodo no
       entran ni de cerca. El techo de 26px es el mayor que entra completo a 375px de ancho. */
    .PillarPosterGrid-poster-title {
        font-size: clamp(20px, 6.93vw, 26px); /* Techo que entra completo. */
    }
}

/* --- Movimiento reducido: el carril igual cambia de posición —las flechas siguen funcionando— pero
   salta en vez de desplazarse. --- */
@media (prefers-reduced-motion: reduce) {
    .PillarPosterGrid-track {
        transition: none; /* El paso es instantáneo. */
    }

    .PillarPosterGrid-arrow {
        transition: none; /* Sin interpolación en el hover de las flechas. */
    }

    /* El hover CONSERVA SUS ESTADOS pero deja de interpolarlos: el "Ver más" sigue apareciendo, de
       un cuadro al otro, porque es la afordancia que dice que la tarjeta es un enlace. */
    .PillarPosterGrid-poster-image,
    .PillarPosterGrid-poster-caption,
    .PillarPosterGrid-poster-cta {
        transition: none; /* Sin interpolación. */
    }

    /* EL ZOOM SÍ SE ANULA DEL TODO, a diferencia de las otras dos capas: un salto del 8 % es
       precisamente el movimiento brusco que esta preferencia pide evitar, y no comunica nada. */
    .PillarPosterGrid-poster:hover .PillarPosterGrid-poster-image,
    .PillarPosterGrid-poster:focus-within .PillarPosterGrid-poster-image {
        transform: none; /* La foto no crece. */
    }
}