/* ApplicationShowcaseGrid.css — Grilla de aplicaciones destacadas, con la etiqueta de color de
   cada una en la esquina de la foto.
   Nodos 2611:25402 (PC, mesa de 1600), 2611:31059 (tablet) y 2611:31267 (mobile).
   ES GRILLA Y NO CARRUSEL: envuelve a una fila nueva en los tres anchos. Sin flechas, sin arrastre,
   sin script propio.
   EL DEGRADADO Y EL FILETE SON DE ESCRITORIO; el bloque de color de la esquina se ve en los tres. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. --- */
.ApplicationShowcaseGrid {
    --ApplicationShowcaseGrid-pad: clamp(20px, 3vw, 48px); /* Separación con el borde de la ventana. */
    --ApplicationShowcaseGrid-gap: clamp(16px, 2.1vw, 34px); /* Separación entre tarjetas, del nodo de escritorio (34 sobre 1600). */
    --ApplicationShowcaseGrid-motion: 350ms ease-out; /* Duración y curva del hover, 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(--ApplicationShowcaseGrid-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. */
.ApplicationShowcaseGrid-container {
    display: flex; /* Apila encabezado y grilla. */
    flex-direction: column; /* En columna. */
    gap: clamp(20px, 1.9vw, 30px); /* Separación del nodo 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. --- */
.ApplicationShowcaseGrid-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. */
.ApplicationShowcaseGrid-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. */
.ApplicationShowcaseGrid-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. */
.ApplicationShowcaseGrid-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: 4 tarjetas por fila, hasta 3 filas (BTCN-343; antes repartía el ancho
   entre 4 y 6 por fila). La fila envuelve: la 5.ª tarjeta pasa a la segunda fila. */
.ApplicationShowcaseGrid-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ApplicationShowcaseGrid-gap);
}

/* --- Tarjeta: foto arriba, panel de texto blanco abajo. A DIFERENCIA DE BleedImageCarousel EL
   TEXTO NO VA SOBRE LA FOTO: son dos bloques apilados. --- */
.ApplicationShowcaseGrid-card {
    /* BTCN-343: SIEMPRE 4 POR FILA, como el Figma: cada tarjeta mide un cuarto de la fila y la 5.ª
       baja a una fila nueva (hasta 3 filas: el ViewComponent corta en 12). El mínimo es 4, así que
       con menos queda lugar a la derecha y el editor ve el aviso. min-width:0 evita que una foto o
       un título largo empuje la tarjeta más ancha que su cuarto. El ancho se calcula con la MISMA
       variable de separación que usa la fila, así sigue exacto en cualquier ancho de pantalla. */
    flex: 0 0 calc((100% - 3 * var(--ApplicationShowcaseGrid-gap)) / 4);
    min-width: 0;
    max-width: calc((100% - 3 * var(--ApplicationShowcaseGrid-gap)) / 4);
    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 (el inset de un absoluto se mide desde
       el borde del padding, no del borde exterior), y la esquina dejaría de quedar a ras. El
       box-shadow no participa de la caja y no mueve nada. */
    /* CONTORNO ESTANDARIZADO EN LOS TRES ANCHOS (2026-09-24): el nodo de tablet y el de mobile no
       lo dibujan, pero el usuario pidió parejarlo con el de escritorio en vez de seguir el Figma
       al pie de la letra acá. */
    box-shadow: inset 0 0 0 1px rgba(15, 15, 18, 0.09); /* Contorno, en los tres anchos. */
    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. */
    .ApplicationShowcaseGrid-card:link,
    .ApplicationShowcaseGrid-card:visited,
    .ApplicationShowcaseGrid-card:hover,
    .ApplicationShowcaseGrid-card:focus,
    .ApplicationShowcaseGrid-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. */
    .ApplicationShowcaseGrid-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. Sin esta caja, un "bottom:0" en el
   bloque de esquina lo pegaría al pie de la tarjeta entera, no al de la foto. */
.ApplicationShowcaseGrid-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: 270 / 180; /* Proporción del nodo de escritorio (270x180). */
}

/* Foto de fondo de la tarjeta. */
.ApplicationShowcaseGrid-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(--ApplicationShowcaseGrid-motion); /* Suaviza el zoom. */
}

/* Velo de legibilidad del nodo de escritorio: transparente arriba y oscuro abajo. Mismas paradas
   que BleedImageCarousel. Se oculta por debajo de 1024px, donde los nodos no lo dibujan. */
.ApplicationShowcaseGrid-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. Va de lado a lado de la foto. */
.ApplicationShowcaseGrid-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. */
}

/* Bloque de color de la esquina inferior derecha -- la etiqueta de la aplicación. Se ve en los
   tres anchos: es la única decoración que el diseño mantiene siempre. Las medidas son porcentaje
   de la foto (82x10 sobre 270x180 en escritorio), así que escalan con ella. */
.ApplicationShowcaseGrid-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: 30.37%; /* 82 sobre 270, nodo de escritorio. */
    height: 5.56%; /* 10 sobre 180, nodo de escritorio. */
    background-color: var(--ApplicationShowcaseGrid-accent); /* Color de la aplicación, siempre sólido. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Panel de texto. --- */
.ApplicationShowcaseGrid-text {
    display: flex; /* Apila título y bajada. */
    flex-direction: column; /* En columna. */
    gap: 5px; /* Separación del nodo de escritorio. */
    padding: 14px 16px 16px; /* Rellenos del nodo de escritorio. */
}

/* Título de la tarjeta. */
.ApplicationShowcaseGrid-card-title {
    margin: 0; /* El título es ítem de flex: sin esto el navegador le agrega margen. */
    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, 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 como en PillarPosterGrid, así que el overflow:hidden de este párrafo no le come área
   clickeable a nada. Ver [[trampa-recortar-texto-bajo-enlace-estirado]]. */
.ApplicationShowcaseGrid-card-text {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    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; /* Propiedad estándar, para los navegadores que ya no necesitan el prefijo. */
    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.45); /* Gris del nodo de escritorio. */
}

/* --- 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: este diseño no tiene velo que oscurezca la
   foto al pasar el puntero, a diferencia de BleedImageCarousel. --- */
@media (hover: hover) and (pointer: fine) {
    .ApplicationShowcaseGrid-card:hover .ApplicationShowcaseGrid-photo,
    .ApplicationShowcaseGrid-card:focus-visible .ApplicationShowcaseGrid-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. --- */
.ApplicationShowcaseGrid-card:active .ApplicationShowcaseGrid-photo {
    transform: scale(1.06); /* Mismo zoom. */
}

/* --- Tablet: hasta 1024px. EL NODO ES PROPIO: sin degradado ni filete, proporción de foto propia y
   dos columnas. --- */
@media (max-width: 1024px) {
    .ApplicationShowcaseGrid {
        --ApplicationShowcaseGrid-pad: 32px; /* Relleno lateral del nodo de tablet. */
        --ApplicationShowcaseGrid-gap: 16px; /* Separación del nodo de tablet. */
        padding-block: 48px; /* Aire arriba y abajo del nodo de tablet. */
    }

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

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

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

    .ApplicationShowcaseGrid-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á. */
    .ApplicationShowcaseGrid-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Las 2 columnas del nodo de tablet. */
    }

    .ApplicationShowcaseGrid-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. */
    }

    /* Los nodos de tablet y de mobile no dibujan el degradado ni el filete. */
    .ApplicationShowcaseGrid-scrim,
    .ApplicationShowcaseGrid-rule {
        display: none; /* Fuera de este rango hacia abajo. */
    }

    .ApplicationShowcaseGrid-photo-box {
        aspect-ratio: 344 / 229; /* Proporción propia del nodo de tablet. */
    }

    .ApplicationShowcaseGrid-corner {
        width: 15.12%; /* 52 sobre 344, nodo de tablet. */
        height: 3.49%; /* 8 sobre 229, nodo de tablet. */
    }

    .ApplicationShowcaseGrid-text {
        gap: 3px; /* Separación del nodo de tablet y de mobile. */
        padding: 16px 16px 20px; /* Rellenos del nodo de tablet y de mobile. */
    }

    .ApplicationShowcaseGrid-card-title {
        font-size: 17px; /* Tamaño del nodo de tablet y de mobile. */
        font-weight: 700; /* Bold del nodo de tablet y de mobile, no el semibold de escritorio. */
    }

    .ApplicationShowcaseGrid-card-text {
        font-size: 13px; /* Tamaño del nodo de tablet y de mobile. */
        color: rgba(15, 15, 18, 0.7); /* Gris del nodo de tablet y de mobile. */
    }
}

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

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

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

    .ApplicationShowcaseGrid-photo-box {
        aspect-ratio: 335 / 223; /* Proporción propia del nodo de mobile. */
    }

    .ApplicationShowcaseGrid-corner {
        width: 15.52%; /* 52 sobre 335, nodo de mobile. */
        height: 3.59%; /* 8 sobre 223, nodo de mobile. */
    }
}

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

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

/* --- 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. --- */
.ApplicationShowcaseGrid-eyebrow,
.ApplicationShowcaseGrid-title,
.ApplicationShowcaseGrid-text,
.ApplicationShowcaseGrid-card-title,
.ApplicationShowcaseGrid-card-text {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}