/* PillarShowcase.css — Vitrina de pilares: UN carrusel con una tarjeta por pilar. Tipografía:
   site.css. LAS MEDIDAS SE HEREDARON DE PillarBrandShowcase: los nodos citados son los de AQUEL
   diseño y valen como punto de partida, no como contrato.
   MODELO DEL MOVIMIENTO: ranuras FIJAS en posición y tamaño; las tarjetas se mudan de ranura con un
   fundido, y LO ÚNICO QUE SE ANIMA ES LA OPACIDAD. La única ranura cuyo alto NO es fijo es la
   destacada: lo toma de su tarjeta, con la proporción del nodo como piso. NO SE MIDE CON JS, ver la
   nota del bloque .PillarShowcase-slot--active. El estado (destacada, vecina, lejana) es una
   propiedad de la RANURA, no de la tarjeta: por eso las reglas van como descendientes de la ranura. */

/* --- Sección: fondo blanco y variables del cruce. --- */
.PillarShowcase {
    background-color: #ffffff; /* Blanco del nodo propio, NO el #f7f6f4 heredado del widget de marcas. */
    /* LAS RANURAS LEJANAS SE SALEN DEL MARCO A PROPÓSITO y ese desborde tiene que MORIR ACA: sin
       este recorte suma entre 60 y 100px al ancho del documento en todo el rango de 1025 a 1580px,
       y en táctil eso es una página que se arrastra de costado con el dedo. Es clip y no hidden:
       hidden convierte la sección en contenedor de desplazamiento y le corta la sombra de abajo a
       la tarjeta destacada. Safari lo soporta desde la 16; más atrás queda el salvavidas de site.css. */
    overflow-x: clip; /* Recorta el desborde lateral sin tocar el eje vertical. */
    --PillarShowcase-duration: 500ms; /* Duración del prototipo, compartida por todo el cruce. */
    --PillarShowcase-easing: cubic-bezier(0.22, 1, 0.36, 1); /* Curva del prototipo. */
}

/* Contenido centrado dentro del techo del sitio. */
.PillarShowcase-content {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding: 56px 48px; /* Rellenos del diseño. */
    display: flex; /* Apila encabezado y escenario. */
    flex-direction: column; /* En columna. */
    gap: 56px; /* Separación entre los dos. */
}

/* --- Encabezado de la sección. --- */
.PillarShowcase-header {
    display: flex; /* Apila etiqueta, título y bajada. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Alineados a la izquierda. */
    gap: 10px; /* Separación entre las piezas. */
}

/* Etiqueta de la sección. Es la única del widget: la tarjeta no lleva. */
.PillarShowcase-eyebrow {
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación entre los dos. */
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* Cuadradito que precede a la etiqueta. */
.PillarShowcase-eyebrow-dot {
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección: 36px del export, no un clamp aproximado de otro widget. */
.PillarShowcase-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 36px; /* Tamaño del export. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Bajada del título. */
.PillarShowcase-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    max-width: 720px; /* Medida de línea del diseño. */
    font-size: 16px; /* Tamaño del diseño. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.7); /* Gris de cuerpo. */
}

/* Escenario: el carrusel con su depósito y su paginación. NO lleva título propio: acá el pilar es
   la TARJETA y hay un solo carrusel. */
.PillarShowcase-stage {
    display: flex; /* Apila carrusel y paginación. */
    flex-direction: column; /* En columna. */
    gap: 24px; /* Separación entre los dos. */
}

/* --- Carrusel de escritorio. EL max-width NO ES DECORATIVO: es lo que fija el tamaño de las
   tarjetas, que son porcentajes de esta caja. EL TECHO ES 1280px Y NO LOS 1216 DEL RESTO DE LA HOME
   porque las tarjetas lejanas se salen del marco a propósito. --- */
.PillarShowcase-carousel {
    position: relative; /* Referencia de las flechas, que van encima de las tarjetas. */
    width: 100%; /* Explícito: es un ítem flex y sin ancho propio se autoajusta a su contenido. */
    max-width: 1280px; /* Ancho del marco real del nodo. */
    margin-inline: auto; /* Centra la caja en pantallas más anchas que el techo. */
}

/* Flecha de navegación. VAN SUPERPUESTAS sobre las tarjetas y no al costado: al costado se comían
   136px de ancho y las dos tarjetas lejanas quedaban enteras fuera de cuadro. */
.PillarShowcase-arrow {
    position: absolute; /* Sobre las tarjetas. */
    top: 50%; /* Punto de partida del centrado vertical. */
    transform: translateY(-50%); /* Centrado real. */
    z-index: 2; /* Sobre las tarjetas: es lo que las deja clickeables donde se pisan. */
    width: clamp(40px, 6vw, 52px); /* Diámetro del prototipo, con piso en móvil. */
    height: clamp(40px, 6vw, 52px); /* Cuadrado, para que el radio dé un círculo. */
    border-radius: 50%; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Contorno tenue. */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Sombra que la despega. */
    background-color: #ffffff; /* Fondo blanco. */
    color: rgba(15, 15, 18, 0.65); /* Chevron gris. */
    font-size: clamp(16px, 2vw, 20px); /* Techo del diseño, con piso en móvil. */
    font-weight: 500; /* Medium del diseño: sin declararlo el chevron heredaba el peso del body. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    display: flex; /* Para centrar el chevron. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    cursor: pointer; /* Indica que es accionable. */
}

/* Flecha anterior. */
.PillarShowcase-arrow--prev {
    left: 2.34375%; /* Los 30px de separación del prototipo, sobre los 1280 del marco. */
}

/* Flecha siguiente: en oscuro, como el prototipo. */
.PillarShowcase-arrow--next {
    right: 2.34375%; /* Los 30px de separación del prototipo. */
    background-color: #0f0f12; /* Fondo casi negro. */
    color: #ffffff; /* Chevron blanco. */
}

/* NO hay regla :disabled: la navegación es CIRCULAR. Si vuelve a aparecer un estado deshabilitado,
   es que alguien reintrodujo el tope en el script. */

/* Área visible. SIN RECORTE: las ranuras lejanas asoman por fuera del marco y tienen que verse
   contra el fondo, y la sombra de la destacada baja unos 45px por debajo de su caja. */
.PillarShowcase-viewport {
    position: relative; /* Contexto de las ranuras. */
    overflow: visible; /* Deja pasar lo que sobresale. */
}

/* Fila de ranuras. ES un contenedor de posicionamiento y no una fila flex: en el nodo las tarjetas
   van en absoluto y la destacada se SUPERPONE a las vecinas. El aspect-ratio reserva el alto. */
.PillarShowcase-track {
    position: relative; /* Origen de las ranuras, que van en absoluto. */
    width: 100%; /* Ocupa el ancho del marco. */
    aspect-ratio: 1280 / 500; /* Reserva el alto: las ranuras no aportan alto por sí solas. */
}

/* Ranura lejana (la base): posición y ancho ABSOLUTOS, en porcentaje del marco real. */
.PillarShowcase-slot {
    position: absolute; /* Colocada por cálculo, no por el flujo. */
    top: 20.65%; /* 120/581 del marco real. */
    width: 20.3125%; /* 260/1280. */
    aspect-ratio: 260 / 256; /* Alto FIJO, necesario para el fundido. */
    background-color: #ffffff; /* Fondo de la ranura. */
    border: 1px solid rgba(15, 15, 18, 0.08); /* Contorno tenue. */
    border-radius: 6px; /* Esquinas redondeadas. */
    opacity: 0.3; /* Opacidad de la ranura lejana. */
    overflow: hidden; /* Recorta la tarjeta a esas esquinas. */
}

/* Lejana de la izquierda: asoma por fuera del marco. */
.PillarShowcase-slot--far:first-child {
    left: -11.71875%; /* -150/1280. */
}

/* Lejana de la derecha. */
.PillarShowcase-slot--far:last-child {
    left: 91.40625%; /* 1170/1280. */
}

/* Ranura vecina: más grande y menos apagada que la lejana. */
.PillarShowcase-slot--near {
    top: 14.8%; /* 86/581 del marco. */
    width: 22.65625%; /* 290/1280. */
    aspect-ratio: 290 / 303; /* Promedio real del nodo. */
    opacity: 0.55; /* Opacidad de la vecina. */
}

/* IZQUIERDA Y DERECHA POR VECINDAD CON LA DESTACADA, NO POR POSICIÓN EN LA FILA: la cantidad de
   ranuras la decide la cantidad de pilares. Con nth-of-type ninguna vecina quedaba seleccionada en
   una fila de tres y se apilaban detrás de la destacada. */
.PillarShowcase-slot--near:has(+ .PillarShowcase-slot--active) {
    left: 8.75%; /* 112/1280: la vecina de la izquierda. */
}

/* Vecina de la derecha. */
.PillarShowcase-slot--active + .PillarShowcase-slot--near {
    left: 68.59375%; /* 878/1280. */
}

/* Ranura destacada: 757px reales, NO los 410px de otro prototipo. */
.PillarShowcase-slot--active {
    top: 2.41%; /* 14/581 del marco. */
    left: 50%; /* Punto de partida del centrado. */
    transform: translateX(-50%); /* Centrado real, sin depender del ancho del contenedor. */
    width: 59.140625%; /* 757/1280. */
    /* EL ALTO LO DA EL CONTENIDO, NO LA PROPORCIÓN: la descripción admite hasta 255 caracteres y
       cada pilar necesita un alto distinto. La proporción del nodo queda como PISO, en el ::before.
       ANTES LO MEDIA EL SCRIPT y dejaba el resultado fijo en px: esa medición se toma en
       DOMContentLoaded, o sea antes de que la tipografía cambie de la de reserva a Inter y antes de
       que llegue la imagen del CMS, y nada la revalidaba. Lo que el alto viejo no cubría quedaba
       tapado por el overflow HASTA QUE EL VISITANTE NAVEGABA, que era lo único que la recalculaba. */
    display: grid; /* Apila tarjeta y fantasma en una sola celda. */
    grid-template-areas: "stack"; /* La única celda del apilado. */
    grid-template-columns: minmax(0, 1fr); /* LA COLUMNA VA FIJA AL ANCHO DE LA RANURA: una columna
       auto se dimensiona por el contenido más ancho, y el ::before de abajo, que tiene proporción,
       le pedía el ancho que le correspondía a SU alto. La celda terminaba más ancha que la ranura. */
    aspect-ratio: auto; /* Anula la de la ranura base: acá manda el contenido. */
    z-index: 1; /* Sobre las vecinas: produce la superposición del nodo. */
    opacity: 1; /* Plena. */
    border: 1.5px solid rgba(66, 156, 222, 0.25); /* Azul del nodo real, no naranja. */
    border-radius: 6px; /* Esquinas redondeadas. */
    box-shadow: 0 22px 52px -6px rgba(31, 20, 10, 0.22); /* Sombra del nodo. */
}

/* Piso de la ranura destacada: un ítem vacío en la misma celda, con la proporción del nodo. Fija el
   alto MÍNIMO y deja que una descripción larga lo supere. */
.PillarShowcase-slot--active::before {
    content: ""; /* Sin esto el pseudoelemento no se genera. */
    grid-area: stack; /* Misma celda que la tarjeta. */
    align-self: start; /* SIN ESTO NO HAY PISO: estirado, el alto se lo da la fila y la proporción
       se ignora. Con start el alto sale de la proporción y la fila toma el mayor de los dos. */
    aspect-ratio: 757 / 467; /* Proporción del nodo, ahora como mínimo y no como alto fijo. */
}

/* La tarjeta destacada vuelve al flujo: es la que le da el alto a la ranura. EL FANTASMA QUEDA
   AFUERA A PROPÓSITO -- sigue en absoluto, así la copia que se desvanece no aporta alto y la ranura
   toma el del pilar que entra desde el primer cuadro del cruce. */
.PillarShowcase-slot--active > .PillarShowcase-card:not(.PillarShowcase-ghost) {
    position: relative; /* En el flujo de la celda, no superpuesta. */
    inset: auto; /* Anula el inset:0 de la tarjeta. */
    grid-area: stack; /* La celda del apilado. */
}

/* Las ranuras que no son la destacada llevan a ese pilar al hacer clic: el prototipo no lo define
   pero tampoco lo contradice. */
.PillarShowcase-slot:not(.PillarShowcase-slot--active) {
    cursor: pointer; /* Indica que es accionable. */
}

/* Tarjeta del pilar. Ocupa la ranura entera en absoluto por dos motivos: así el alto lo manda la
   ranura, y así la tarjeta que entra y el fantasma de la que sale conviven superpuestos.
   NO LLEVA FONDO PROPIO: el blanco lo pone la ranura, y es lo que hace que el cruce se vea como un
   fundido del contenido y no como un parpadeo de dos rectángulos blancos. */
.PillarShowcase-card {
    position: absolute; /* Dentro de la ranura. */
    inset: 0; /* La cubre entera. */
    display: flex; /* Apila imagen y cuerpo. */
    flex-direction: column; /* En columna. */
    opacity: 1; /* Visible. */
    transition: opacity var(--PillarShowcase-duration) var(--PillarShowcase-easing); /* Lo único que se anima. */
}

/* Estado de partida de la tarjeta que entra: el script se la pone antes de mudarla, fuerza un
   reflujo y se la saca, y eso dispara el fundido. */
.PillarShowcase-card.is-entering {
    opacity: 0; /* Invisible. */
}

/* Fantasma: la copia que deja la tarjeta que sale, para que su contenido se desvanezca en el lugar
   mientras la nueva aparece encima. El script lo clona, lo marca con aria-hidden e inert y lo borra. */
.PillarShowcase-ghost {
    position: absolute; /* Sobre la ranura. */
    inset: 0; /* La cubre entera. */
    pointer-events: none; /* Es decorativo: no intercepta clics. */
}

/* El fantasma se desvanece. */
.PillarShowcase-ghost.is-leaving {
    opacity: 0; /* Transparente. */
}

/* Depósito de los pilares fuera de escena. Con cinco o menos queda vacío. */
.PillarShowcase-pool {
    display: none; /* No ocupa lugar ni se pinta. */
}

/* Recuadro de la imagen. La proporción es la de las tarjetas que NO son la destacada. */
.PillarShowcase-card-media {
    position: relative; /* Contexto de la imagen. */
    flex-shrink: 0; /* La imagen conserva su proporción aunque el cuerpo pida más lugar. */
    /* EL min-height NO ES DECORATIVO: SIN ÉL EL aspect-ratio NO SE CUMPLE. Un elemento flexible
       arranca en min-height:auto, que se resuelve al alto INTRÍNSECO del archivo del backoffice y le
       gana a la proporción: el recuadro crecía y el botón terminaba fuera del recorte. */
    min-height: 0;
    aspect-ratio: 260 / 147; /* Proporción real de la lejana; la vecina la pisa abajo. */
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%); /* Respaldo mientras carga. */
}

/* Proporción de la imagen en la ranura vecina. */
.PillarShowcase-slot--near .PillarShowcase-card-media {
    aspect-ratio: 290 / 170; /* Proporción real de la vecina. */
}

/* Proporción de la imagen en la ranura destacada. */
.PillarShowcase-slot--active .PillarShowcase-card-media {
    aspect-ratio: 757 / 314; /* Proporción real del nodo "spotlight". */
}

/* La imagen del pilar. */
.PillarShowcase-card-image {
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    object-fit: cover; /* Recorta en vez de deformar. */
}

/* Cuerpo de la tarjeta. El display:flex es necesario para que el align-self del botón tenga efecto.
   Va con min-height:auto y overflow:visible, NO con min-height:0 y overflow:hidden: con un texto del
   CMS más largo que la ranura, esa combinación hace que Chrome colapse a 0px el título y la
   descripción (que usan line-clamp) en vez de recortarlos. El recorte ya lo hace la ranura. */
.PillarShowcase-card-body {
    display: flex; /* Apila título, descripción y botón. */
    flex-direction: column; /* En columna. */
    padding: clamp(16px, 2vw, 20px); /* Rellenos del diseño. */
}

/* Cuerpo de la tarjeta destacada. Arriba mucho menos relleno que a los costados: en el nodo el texto
   queda casi pegado a la imagen, y con el mismo clamp en los cuatro lados el botón terminaba fuera
   del recorte en pilares con título y descripción de más de una línea. */
.PillarShowcase-slot--active .PillarShowcase-card-body {
    padding: clamp(6px, 1vw, 8px) clamp(18px, 3vw, 28px) clamp(18px, 2.5vw, 26px); /* Rellenos del nodo. */
}

/* Botón del enlace, EXCLUSIVO de la ranura destacada: en las vecinas y lejanas el nodo no lo trae. */
.PillarShowcase-card-cta {
    display: none; /* Lo enciende la regla de la ranura destacada. */
    align-self: flex-end; /* Cae a la derecha del bloque de texto, como el nodo. */
    justify-content: center; /* Centra la etiqueta con la flecha. */
    align-items: center; /* Centradas entre sí. */
    gap: 8px; /* Separación entre las dos. */
    width: 193px; /* Ancho del nodo. */
    background-color: #243746; /* Azul-gris del nodo, no el naranja del prototipo de otra pantalla. */
    color: #ffffff; /* Texto blanco. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    text-decoration: none; /* Es un botón, no un enlace de texto. */
    border-radius: 6px; /* Esquina del nodo, no píldora. */
    padding: 12px 22px; /* Rellenos del nodo. */
}

/* El botón solo aparece en la ranura destacada. */
.PillarShowcase-slot--active .PillarShowcase-card-cta {
    display: inline-flex; /* Visible. */
}

/* Título de una tarjeta vecina. EL TOPE DE DOS LÍNEAS ES LA CONTRAPARTIDA DEL ALTO FIJO de la
   ranura: sin él, un título largo del CMS empujaría la descripción fuera de la caja. */
.PillarShowcase-card-title {
    color: #0f0f12; /* Casi negro del diseño. */
    font-size: 24px; /* Del nodo real "side", no el 16-22px del prototipo de otra pantalla. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.25; /* Interlineado de titular. */
    margin-bottom: 0; /* La separación la da el flujo del cuerpo. */
    display: -webkit-box; /* Habilita el recorte por renglones. */
    -webkit-box-orient: vertical; /* Necesario para el recorte. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta lo que sobra. */
}

/* Título de la destacada: 36px Black y centrado, del nodo real "spotlight". */
.PillarShowcase-slot--active .PillarShowcase-card-title {
    font-size: 36px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.2; /* Con 1.05 el descendente de una "g" se recortaba contra el overflow. */
    letter-spacing: -0.5px; /* Compactado del nodo. */
    text-align: center; /* Centrado, como el nodo. */
}

/* Descripción de una tarjeta vecina. El tope de tres líneas cumple el mismo papel que el del
   título: la ranura tiene alto fijo. */
.PillarShowcase-card-description {
    color: rgba(15, 15, 18, 0.5); /* Gris de cuerpo. */
    font-size: 16px; /* Del nodo real "side", no el 11-12.5px del prototipo de otra pantalla. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    margin-top: 0; /* El <p> trae 1em de arriba: sin esto se metía un espacio que no está en el nodo. */
    margin-bottom: 0; /* La separación la da el flujo del cuerpo. */
    display: -webkit-box; /* Habilita el recorte por renglones. */
    -webkit-box-orient: vertical; /* Necesario para el recorte. */
    -webkit-line-clamp: 3; /* Tope de renglones. */
    line-clamp: 3; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta lo que sobra. */
}

/* Descripción de la destacada. SIN text-align:center: en el nodo real solo el título se centra. */
.PillarShowcase-slot--active .PillarShowcase-card-description {
    color: rgba(15, 15, 18, 0.6); /* Un punto más opaca que en las vecinas. */
    font-size: 16px; /* Tamaño del nodo. */
    margin-bottom: 12px; /* Separación con el botón. */
    /* SIN límite de líneas: la ranura ya se agrandó para que el texto completo, hasta los 255
       caracteres del campo, entre sin recortar. */
    display: block;
    overflow: visible; /* Nada que recortar. */
}

/* Botón con el puntero encima. */
.PillarShowcase-card-cta:hover {
    background-color: #1a2833; /* Un punto más oscuro. */
    color: #ffffff; /* Se repite: el estado por defecto de los enlaces lo cambia. */
}

/* El estado base NO alcanza: el a:hover de Bootstrap pesa más. Va en regla aparte porque también
   tiene que cubrir :focus (el del clic del mouse), y ahí el oscurecido no corresponde. */
.PillarShowcase-card-cta:hover,
.PillarShowcase-card-cta:focus {
    text-decoration: none; /* Sin subrayado. */
}

/* --- Flecha del enlace de la tarjeta. Sin estas dos reglas el SVG se pinta con el tamaño por
   defecto del navegador y rellenado de negro. El sufijo cta las separa de PillarShowcase-arrow, que
   son las flechas de navegación del carrusel. --- */

/* Envoltorio de la flecha. */
.PillarShowcase-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. */
.PillarShowcase-cta-arrow-icon {
    width: 14px; /* Tamaño visual. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color del enlace 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. */
}

/* --- Puntos y contador. Los valores son los del nodo "pagination". Hay UN PUNTO POR PILAR y la
   cantidad la elige el editor; el ancho de la fila no cambia al navegar porque el que se alarga y
   el que se acorta se compensan. --- */

/* Fila de puntos. */
.PillarShowcase-dots {
    display: flex; /* Puntos en línea. */
    align-items: center; /* Centrados entre sí. */
    justify-content: center; /* Centrados en el ancho. */
    gap: 7px; /* Separación del prototipo. */
}

/* Un punto de paginación. */
.PillarShowcase-dot {
    width: 8px; /* Ancho del inactivo. */
    height: 8px; /* Alto, igual en los dos estados. */
    border-radius: 4px; /* Extremos redondeados. */
    background-color: rgba(15, 15, 18, 0.18); /* Casi negro del prototipo al 18 %. */
    border: none; /* Quita el borde del button. */
    padding: 0; /* Sin relleno del button. */
    flex-shrink: 0; /* Sin esto el activo no llega a los 26px cuando la fila queda justa. */
    cursor: pointer; /* Indica que es accionable. */
    transition: width var(--PillarShowcase-duration) var(--PillarShowcase-easing),
                background-color var(--PillarShowcase-duration) var(--PillarShowcase-easing); /* Misma ventana que las tarjetas. */
}

/* Punto del pilar a la vista. */
.PillarShowcase-dot.is-active {
    width: 26px; /* Ancho del activo en el prototipo. */
    background-color: #364054; /* Azul-gris del nodo real, no el naranja del otro prototipo. */
}

/* Contador de posición. Es la caja de referencia del fundido del texto: el script clona el valor y
   apoya el clon en absoluto sobre esta caja, así el número viejo y el nuevo se cruzan superpuestos. */
.PillarShowcase-counter {
    position: relative; /* Origen del clon que apoya el script. */
    display: inline-block; /* Caja propia, ceñida al número. */
    color: rgba(15, 15, 18, 0.5); /* Gris translúcido del diseño. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del nodo real, no Bold. */
    margin-left: 8px; /* Separación con la fila de puntos. */
    white-space: nowrap; /* El clon superpuesto no debe partir el número en dos líneas. */
}

/* El número visible del contador. */
.PillarShowcase-counter-value {
    display: block; /* Ocupa la caja del contador. */
    opacity: 1; /* Visible. */
    transition: opacity var(--PillarShowcase-duration) var(--PillarShowcase-easing); /* Misma ventana. */
}

/* El número que entra arranca invisible. */
.PillarShowcase-counter-value.is-entering {
    opacity: 0; /* Punto de partida del fundido. */
}

/* --- Movimiento reducido. No se apaga la navegación, solo el cruce. NO se declara
   "transition: none": el navegador no emitiría transitionend, y aunque el script no depende de él,
   dejar una duración mínima mantiene el comportamiento igual en los dos casos. --- */
@media (prefers-reduced-motion: reduce) {
    .PillarShowcase-card,
    .PillarShowcase-ghost,
    .PillarShowcase-dot,
    .PillarShowcase-counter-value {
        transition-duration: 0.01ms !important; /* Cruce imperceptible. */
    }
}

/* --- Responsive — tarjeta única (nodos 1535:19326 tablet y 1535:19127 mobile). Por debajo de 1024px
   NO hay tarjetas laterales: es UNA sola a todo el ancho, con paginación por puntos y arrastre. Se
   reutiliza el MISMO carrusel: se ocultan las lejanas y vecinas y la destacada vuelve al flujo. --- */
@media (max-width: 1024px) {
    .PillarShowcase-arrow {
        display: none; /* Se navega con arrastre o tocando un punto. */
    }

    .PillarShowcase-track {
        aspect-ratio: auto; /* El alto ya no lo reserva el marco: lo da la tarjeta única. */
    }

    .PillarShowcase-slot--far,
    .PillarShowcase-slot--near {
        display: none; /* Sin tarjetas laterales en este rango. */
    }

    /* La destacada pasa al flujo normal. Es relative y NO static para que el fantasma, que va en
       absoluto, se ancle en la ranura y no en la fila. Con relative el top y el left del bloque de
       escritorio SÍ desplazan la caja, así que hay que anularlos. */
    .PillarShowcase-slot--active {
        position: relative; /* En el flujo, y ancla del fantasma. */
        top: auto; /* Anula el 2.41% de escritorio. */
        left: auto; /* Anula el 50% de escritorio. */
        transform: none; /* Sin el centrado por translate. */
        width: 100%; /* A todo el ancho. */
    }

    /* Piso de la destacada en tablet. */
    .PillarShowcase-slot--active::before {
        aspect-ratio: 704 / 471; /* Proporción real del nodo de tablet. */
    }

    /* Imagen de la destacada en tablet. */
    .PillarShowcase-slot--active .PillarShowcase-card-media {
        aspect-ratio: 704 / 300; /* Imagen real de tablet, no la de PC. */
    }

    .PillarShowcase-content {
        padding: 40px 32px; /* Rellenos del nodo de tablet. */
        gap: 40px; /* Separación más corta. */
    }
}

/* --- Mobile: hasta 500px. Misma tarjeta única, con las medidas del nodo de mobile. --- */
@media (max-width: 500px) {
    .PillarShowcase-slot--active::before {
        aspect-ratio: 335 / 383; /* Proporción real del nodo de mobile. */
    }

    /* Imagen de la destacada en mobile. */
    .PillarShowcase-slot--active .PillarShowcase-card-media {
        aspect-ratio: 335 / 200; /* Imagen real de mobile. */
    }
}