/* PillarSolutionShowcaseGrid.css — Grilla de soluciones dentro de un pilar, con el número de
   posición y la etiqueta de color de cada una sobre la foto.
   Nodo de referencia: 2611:25446 (PC, mesa de 1600).
   ESTANDARIZADO CON EL DISEÑO DE ESCRITORIO EN LOS TRES ANCHOS (decisión del usuario, 2026-09-24):
   el nodo real de tablet y de mobile trae su propio degradado invertido y no dibuja el filete ni el
   bloque de color -- acá los tres anchos comparten la receta de escritorio, y de tablet/mobile solo
   se toma el ancho de tarjeta y la cantidad de columnas.
   ES GRILLA Y NO CARRUSEL: envuelve a una fila nueva en los tres anchos. Sin flechas de navegación,
   sin arrastre, sin script propio. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. --- */
.PillarSolutionShowcaseGrid {
    --PillarSolutionShowcaseGrid-pad: clamp(20px, 3vw, 48px); /* Separación con el borde de la ventana. */
    --PillarSolutionShowcaseGrid-motion: 350ms ease-out; /* Duración y curva del zoom, el estándar del proyecto. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding-block: clamp(32px, 3vw, 48px) clamp(40px, 4vw, 64px); /* Aire arriba y abajo del nodo. */
    padding-inline: var(--PillarSolutionShowcaseGrid-pad); /* Relleno lateral. */
    background-color: #ffffff; /* Fondo de la sección. */
}

/* Contenido centrado dentro del techo del sitio. SIN RELLENO PROPIO: lo pone la sección. */
.PillarSolutionShowcaseGrid-container {
    display: flex; /* Apila encabezado y grilla. */
    flex-direction: column; /* En columna. */
    gap: clamp(20px, 1.75vw, 28px); /* Separación del nodo de escritorio entre el encabezado y la grilla. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Encabezado: etiqueta y título, sin controles -- es grilla, no carrusel. --- */
.PillarSolutionShowcaseGrid-header {
    display: flex; /* Apila etiqueta y título. */
    flex-direction: column; /* En columna. */
    gap: min(0.56vw, 9px); /* Separación del nodo de escritorio entre los dos. */
}

/* Etiqueta sobre el título. EL CUADRADO ES EL MISMO EN LOS TRES ANCHOS: el Figma de tablet y de
   mobile dibuja un círculo distinto, pero el usuario pidió conservar el de escritorio siempre. */
.PillarSolutionShowcaseGrid-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.63vw, 10px); /* Separación del nodo de escritorio entre los dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 0.88vw, 14px); /* Tamaño del nodo de escritorio, 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 (#243746). */
}

/* Cuadradito que precede a la etiqueta. Tamaño fijo en los tres anchos, a propósito. */
.PillarSolutionShowcaseGrid-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo de escritorio. 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. */
.PillarSolutionShowcaseGrid-title {
    margin: 0; /* Quita el margen propio del título. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(22px, 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. */
}

/* --- Grilla de escritorio: FLEX Y NO GRID. El editor elige entre 4 y 6 soluciones (nunca envuelve
   acá), y con grid-template-columns fijo una selección de menos de 6 dejaba columnas vacías en vez
   de repartir el ancho real -- verificado contra los nodos de 4, 5 y 6 tarjetas: el ancho de cada
   una crece o se achica según cuántas haya. flex-wrap es un respaldo por si algún día se
   seleccionan más de 6. */
.PillarSolutionShowcaseGrid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 16px; /* Separación del nodo: 20 entre filas, 16 entre columnas. */
}

/* --- Tarjeta: foto arriba, panel de texto blanco abajo. --- */
.PillarSolutionShowcaseGrid-card {
    /* flex-basis:0 + flex-grow:1 reparte el ancho por igual entre las que haya (4, 5 o 6), en vez de
       un ancho fijo. min-width:0 evita que una foto o un título largo la empuje más ancha que su
       parte pareja. max-width es el techo con 1, 2 o 3 tarjetas -- sin Figma que cubra ese caso, se
       topan en el ancho que ocuparían 4 (el mínimo del diseño) y el resto de la fila queda en
       blanco. 16px es el mismo gap entre columnas que declara .PillarSolutionShowcaseGrid-grid. */
    flex: 1 1 0;
    min-width: 0;
    max-width: calc((100% - 3 * 16px) / 4);
    position: relative; /* Contexto de apilado, sin efecto en el posicionamiento de las capas de la
                           foto: esas anclan contra PillarSolutionShowcaseGrid-photo-box, no contra
                           la tarjeta. */
    display: flex; /* Apila foto y panel. */
    flex-direction: column; /* En columna. */
    background-color: #ffffff; /* Fondo del panel de texto. */
    /* EL CONTORNO VA POR box-shadow Y NO POR border: un border correría el origen del right:0 y
       bottom:0 del bloque de esquina un píxel hacia adentro. Ver ApplicationShowcaseGrid.css. */
    box-shadow: inset 0 0 0 1px rgba(15, 15, 18, 0.1); /* Contorno del nodo de escritorio. */
    border-radius: 6px; /* Radio del nodo. */
    overflow: hidden; /* Recorta el zoom de la foto a las esquinas. */
    color: inherit; /* No hereda el azul de enlace. */
    text-decoration: none; /* La tarjeta puede ser un enlace: sin subrayado. */
}

    /* LOS CINCO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pintaría la
       tarjeta azul y subrayada. */
    .PillarSolutionShowcaseGrid-card:link,
    .PillarSolutionShowcaseGrid-card:visited,
    .PillarSolutionShowcaseGrid-card:hover,
    .PillarSolutionShowcaseGrid-card:focus,
    .PillarSolutionShowcaseGrid-card:active {
        color: inherit; /* Sin cambio de color en ninguno. */
        text-decoration: none; /* Sin subrayado en ninguno. */
    }

    /* Foco del teclado. Va POR FUERA de la tarjeta y en naranja de marca: un anillo oscuro sobre la
       foto se lee como un borde negro. */
    .PillarSolutionShowcaseGrid-card:focus-visible {
        outline: 2px solid var(--color-brand-orange); /* Anillo visible sobre el fondo blanco. */
        outline-offset: 2px; /* Separado del borde de la tarjeta. */
    }

/* Caja PROPIA de la foto: recorta el zoom y ancla las capas absolutas contra ELLA, no contra toda
   la tarjeta -- que también incluye el panel de texto de abajo. */
.PillarSolutionShowcaseGrid-photo-box {
    position: relative; /* Origen de las capas que siguen. */
    overflow: hidden; /* Recorta el zoom de la foto a esta caja, sin invadir el panel de texto. */
    aspect-ratio: 224 / 170; /* Proporción del nodo de escritorio (224x170). */
}

/* Foto de fondo de la tarjeta. */
.PillarSolutionShowcaseGrid-photo {
    position: absolute; /* Cubre su caja. */
    inset: 0;
    width: 100%; /* Ancho completo de la caja. */
    height: 100%; /* Alto completo de la caja. */
    object-fit: cover; /* Recorta en vez de deformar. */
    transform-origin: center; /* El zoom crece desde el centro. */
    transition: transform var(--PillarSolutionShowcaseGrid-motion); /* Suaviza el zoom. */
}

/* Velo de legibilidad del nodo de escritorio: transparente arriba y oscuro abajo. Estandarizado en
   los tres anchos -- el nodo real de tablet/mobile trae uno invertido (oscuro arriba), no se usa. */
.PillarSolutionShowcaseGrid-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la caja de la foto entera. */
    background-image: linear-gradient(180deg, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%);
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior del nodo de escritorio. Estandarizado en los tres anchos. */
.PillarSolutionShowcaseGrid-rule {
    position: absolute; /* Sobre la foto. */
    top: 0; /* Borde superior de la foto. */
    left: 0; /* De lado a lado. */
    right: 0;
    height: 1px; /* Grosor del nodo. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco translúcido del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Número de posición de la tarjeta ("01", "02"...). Estandarizado en los tres anchos: mismo tamaño
   y misma posición que el nodo de escritorio, sin importar el ancho real de la tarjeta. */
.PillarSolutionShowcaseGrid-number {
    position: absolute; /* Sobre la foto. */
    left: 8.04%; /* 18 sobre 224, nodo de escritorio. */
    top: 61.18%; /* 104 sobre 170, nodo de escritorio. */
    margin: 0; /* El párrafo no es ítem de flex acá: sin esto el navegador le agrega margen. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 28px; /* Tamaño del nodo de escritorio, igual en los tres anchos. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.15; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    color: rgba(255, 255, 255, 0.92); /* Blanco casi pleno del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Bloque de color de la esquina inferior derecha -- la etiqueta de la solución. Estandarizado en
   los tres anchos. Va sólido: este diseño no tiene velo de color en la caja de texto. */
.PillarSolutionShowcaseGrid-corner {
    position: absolute; /* Anclado a la esquina de la caja de la foto. */
    right: 0; /* Pegado al borde derecho. */
    bottom: 0; /* Pegado al borde inferior de la foto. */
    width: 42.86%; /* 96 sobre 224, nodo de escritorio. */
    height: 5.88%; /* 10 sobre 170, nodo de escritorio. */
    background-color: var(--PillarSolutionShowcaseGrid-accent); /* Color de la solución, siempre sólido. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Panel de texto. LA LEYENDA DEL ENLACE ES CONDICIONAL -- una solución sin PageLink no la
   pinta -- así que el margin-top:auto de la leyenda NO ALCANZA para igualar el alto: cuando falta
   el renglón entero, con solo eso la tarjeta queda más baja que las demás. Por eso el panel lleva
   un min-height fijo, la suma de sus rellenos más los tres renglones al tope (título 2, bajada 3,
   leyenda 1) más sus separaciones: 44 (relleno) + 44 (título) + 9 (separación) + 77 (bajada) + 9
   (separación) + 17 (leyenda) = 200px. Faltando la leyenda, ese hueco queda en blanco al pie en vez
   de acortar la tarjeta -- medido y corregido con el banco de pruebas, no es un ajuste estético. */
.PillarSolutionShowcaseGrid-text {
    display: flex; /* Apila título, bajada y leyenda. */
    flex-direction: column; /* En columna. */
    flex: 1 1 auto; /* Ocupa el resto de la tarjeta. */
    gap: 9px; /* Separación del nodo de escritorio. */
    padding: 20px 22px 24px; /* Rellenos del nodo de escritorio. */
    min-height: 200px; /* Ver el cálculo arriba. */
}

/* Título de la tarjeta. RECORTADO A 2 RENGLONES Y CON PISO DE 2 RENGLONES: el título más largo del
   nodo ya ocupa dos, y sin un techo Y UN PISO comunes las tarjetas quedarían de alto distinto según
   el título -- lo mismo que se pidió para la bajada, extendido acá para que el tamaño de la
   tarjeta sea igual en todas. */
.PillarSolutionShowcaseGrid-card-title {
    margin: 0; /* El título es ítem de flex: sin esto el navegador le agrega margen. */
    display: -webkit-box; /* Necesario para que -webkit-line-clamp tenga efecto. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Techo de dos renglones. */
    line-clamp: 2;
    overflow: hidden; /* Recorta el tercer renglón en adelante. */
    min-height: 44px; /* Piso de dos renglones (16px × 1.35 × 2), para el título de un solo renglón. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 16px; /* Tamaño del nodo de escritorio. */
    font-weight: 600; /* Semibold del nodo de escritorio. */
    line-height: 1.35; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Bajada de la tarjeta. RECORTADA A 3 RENGLONES Y CON PISO DE 3 RENGLONES, con puntos suspensivos
   si sobra texto. Acá el recorte es seguro: el <a> de la tarjeta es TODA la tarjeta, no un enlace
   anidado con un ::after estirado. Ver [[trampa-recortar-texto-bajo-enlace-estirado]]. */
.PillarSolutionShowcaseGrid-card-text {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    min-height: 77px; /* Piso de tres renglones (16px × 1.6 × 3), para la bajada corta. */
    display: -webkit-box; /* Necesario para que -webkit-line-clamp tenga efecto. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* Techo de tres renglones, en los tres anchos. */
    line-clamp: 3;
    overflow: hidden; /* Recorta el cuarto renglón en adelante. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 16px; /* Tamaño del nodo de escritorio. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.6; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo de escritorio. */
}

/* Leyenda del enlace ("Ver solución"), al pie de la tarjeta. */
.PillarSolutionShowcaseGrid-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación entre las dos, el estándar del proyecto. */
    margin-top: auto; /* Al pie del panel de texto. NO lleva padding-top: el margen no se come el gap. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 13px; /* Tamaño del nodo de escritorio. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: var(--color-cool-neutral-02); /* Token de la paleta (#243746), el mismo del eyebrow. */
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

/* La flecha se corre al abrir la separación, sin animar transform. */
a.PillarSolutionShowcaseGrid-card:hover .PillarSolutionShowcaseGrid-cta,
a.PillarSolutionShowcaseGrid-card:focus-visible .PillarSolutionShowcaseGrid-cta {
    gap: 10px; /* Separación estándar en hover y foco. */
}

/* Flecha estándar de LegalLinksSection. */
.PillarSolutionShowcaseGrid-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color de la leyenda. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Hover. Acotado a punteros finos: en táctil el hover emulado queda PEGADO después del toque.
   El foco del teclado dispara lo mismo. SOLO EL ZOOM en la foto: la flecha ya tiene su propia
   transición arriba. --- */
@media (hover: hover) and (pointer: fine) {
    .PillarSolutionShowcaseGrid-card:hover .PillarSolutionShowcaseGrid-photo,
    .PillarSolutionShowcaseGrid-card:focus-visible .PillarSolutionShowcaseGrid-photo {
        transform: scale(1.06); /* Zoom sutil, sin despegar los bordes. */
    }
}

/* --- Táctil: el mismo estado, disparado por el toque. SIN ESTO EL EFECTO NO EXISTE en un teléfono,
   donde no hay hover sostenido. --- */
.PillarSolutionShowcaseGrid-card:active .PillarSolutionShowcaseGrid-photo {
    transform: scale(1.06); /* Mismo zoom. */
}

.PillarSolutionShowcaseGrid-card:active .PillarSolutionShowcaseGrid-cta {
    gap: 10px; /* Misma separación, disparada por el toque. */
}

/* --- Tablet: hasta 1024px. Sin nodo propio -- estandarizado con escritorio --, la única diferencia
   real es la cantidad de columnas y el tamaño de tipografía del encabezado. --- */
@media (max-width: 1024px) {
    .PillarSolutionShowcaseGrid {
        --PillarSolutionShowcaseGrid-pad: 32px; /* Relleno lateral del nodo de tablet. */
        padding-block: 48px; /* Aire arriba y abajo del nodo de tablet. */
    }

    .PillarSolutionShowcaseGrid-container {
        gap: 20px; /* Separación del nodo entre el encabezado y la grilla. */
    }

    .PillarSolutionShowcaseGrid-header {
        gap: 6px; /* Separación del nodo de tablet entre etiqueta y título. */
    }

    .PillarSolutionShowcaseGrid-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        letter-spacing: 0.48px; /* Apertura del nodo de tablet. */
    }

    .PillarSolutionShowcaseGrid-title {
        font-size: 24px; /* Tamaño del nodo de tablet. */
    }

    /* display:grid explícito: la base ahora es flex (para el reparto parejo de escritorio), así que
       tablet/mobile ya no lo heredan y hay que volver a declararlo acá. */
    .PillarSolutionShowcaseGrid-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Las 3 columnas del nodo de tablet. */
    }

    .PillarSolutionShowcaseGrid-card {
        flex: initial; /* Anula el crecimiento parejo de escritorio: acá el ancho lo fija la columna. */
        max-width: none; /* El cálculo del techo es de la fila de escritorio; acá no aplica. */
    }
}

/* --- Mobile: hasta 500px. Misma familia que tablet -- por eso este bloque va DESPUÉS y solo pisa
   lo que cambia --, con una sola columna. --- */
@media (max-width: 500px) {
    .PillarSolutionShowcaseGrid {
        --PillarSolutionShowcaseGrid-pad: 20px; /* Relleno lateral del nodo de mobile. */
        padding-block: 32px; /* Aire arriba y abajo del nodo de mobile. */
    }

    .PillarSolutionShowcaseGrid-title {
        font-size: 20px; /* Tamaño del nodo de mobile. */
    }

    .PillarSolutionShowcaseGrid-grid {
        grid-template-columns: 1fr; /* Una sola columna del nodo de mobile. */
    }
}

/* --- Movimiento reducido. Se quita el movimiento, no el estado. --- */
@media (prefers-reduced-motion: reduce) {
    .PillarSolutionShowcaseGrid-photo,
    .PillarSolutionShowcaseGrid-cta {
        transition: none; /* Sin interpolación. */
    }

    .PillarSolutionShowcaseGrid-card:hover .PillarSolutionShowcaseGrid-photo,
    .PillarSolutionShowcaseGrid-card:focus-visible .PillarSolutionShowcaseGrid-photo,
    .PillarSolutionShowcaseGrid-card:active .PillarSolutionShowcaseGrid-photo {
        transform: none; /* Quieta. */
    }

    a.PillarSolutionShowcaseGrid-card:hover .PillarSolutionShowcaseGrid-cta,
    a.PillarSolutionShowcaseGrid-card:focus-visible .PillarSolutionShowcaseGrid-cta,
    .PillarSolutionShowcaseGrid-card:active .PillarSolutionShowcaseGrid-cta {
        gap: 6px; /* La flecha no se corre. */
    }
}

/* --- Textos largos sin espacios (bug de QA, Pilares soluciones): con el máximo de caracteres, una palabra o una
   cadena sin espacios (ej. "//QA//QA//...") desbordaba la pantalla o quedaba cortada en tablet y
   mobile. Se corta donde haga falta en vez de salirse. Solo SUMA esta propiedad; no cambia nada
   con textos normales. --- */
.PillarSolutionShowcaseGrid-eyebrow,
.PillarSolutionShowcaseGrid-title,
.PillarSolutionShowcaseGrid-text,
.PillarSolutionShowcaseGrid-card-title,
.PillarSolutionShowcaseGrid-card-text {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}