/* ApplicationMatrixGrid.css — Grilla de aplicaciones "Encuentra tu proyecto". Nodos 3765:43218 (PC,
   contenido de 1184), 2611:31492 (tablet) y 2611:31946 (mobile).
   LA GRILLA SE ACOMODA SOLA a la cantidad de tarjetas: hasta 5 por fila en escritorio, 3 en tablet y
   2 en mobile. Todas miden lo mismo, y la última fila incompleta queda a la izquierda. */

/* --- Sección. --- */
.ApplicationMatrixGrid {
    --ApplicationMatrixGrid-columns: 5; /* Máximo por fila en escritorio. */
    --ApplicationMatrixGrid-ink: #0f0f12; /* Casi negro del diseño. */
    --ApplicationMatrixGrid-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Curva del realce. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 48px 48px 72px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo de la página. */
    font-family: var(--font-brand); /* Pila de marca. */
}

/* Contenido centrado dentro del techo del sitio. */
.ApplicationMatrixGrid-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Encabezado: textos a la izquierda y botón a la derecha. --- */
.ApplicationMatrixGrid-header {
    display: flex; /* En línea. */
    flex-wrap: wrap; /* Si no entran, el botón baja. */
    align-items: center; /* Centrados entre sí. */
    justify-content: space-between; /* A los extremos. */
    gap: 16px 24px; /* Separación mínima al envolver. */
    margin-bottom: 62px; /* 15 + 32 + 15 del nodo hasta la grilla. */
}

.ApplicationMatrixGrid-header-text {
    display: flex; /* Etiqueta y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 10px; /* Separación del nodo. */
    min-width: 0; /* Deja que el título envuelva. */
}

.ApplicationMatrixGrid-eyebrow {
    margin: 0; /* Sin margen propio. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.ApplicationMatrixGrid-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

/* Título: 44px en el piso del rango de escritorio (1200px). */
.ApplicationMatrixGrid-title {
    margin: 0; /* Sin margen propio. */
    font-size: clamp(32px, 3.6667vw, 44px); /* 44 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.1; /* Interlineado de titular. */
    letter-spacing: -0.025em; /* -1.1px sobre 44px. */
    color: var(--ApplicationMatrixGrid-ink);
}

/* Botón del encabezado. */
.ApplicationMatrixGrid-button {
    display: inline-flex; /* Texto y flecha en línea. */
    flex: 0 1 auto; /* Su ancho natural; con un texto largo cede en lugar de salirse de la pantalla. */
    max-width: 100%; /* Nunca más ancho que el contenedor: el texto pasa al renglón siguiente. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación estándar entre texto y flecha. */
    min-height: 54px; /* Alto del nodo; crece si el texto envuelve. */
    padding: 12px 30px; /* Rellenos del nodo, con aire vertical para el texto en varios renglones. */
    line-height: 1.3; /* Interlineado del texto en varios renglones. */
    text-align: left; /* Alineado con la flecha al envolver. */
    overflow-wrap: anywhere; /* Una palabra larguísima también se corta. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: var(--color-cool-neutral-02); /* #243746 del nodo. */
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del nodo. */
    color: #ffffff; /* Blanco. */
    text-decoration: none; /* Sin subrayado. */
    /* Capa propia: evita la raya de repintado al agrandarse con el realce. */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.2s ease-out, gap 0.2s ease-in-out; /* Realce estándar y animación de LegalLinksSection. */
}

    /* Realce estándar de botones del proyecto. :active lo hace existir en táctil. */
    .ApplicationMatrixGrid-button:hover,
    .ApplicationMatrixGrid-button:focus-visible,
    .ApplicationMatrixGrid-button:active {
        transform: translateZ(0) scale(1.05);
        color: #ffffff;
        text-decoration: none;
    }

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

/* Flecha estándar de LegalLinksSection. */
.ApplicationMatrixGrid-button-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    stroke: currentColor; /* Blanca. */
    stroke-width: 2.75; /* Grosor estándar. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Grilla: N columnas iguales; la última fila incompleta queda a la izquierda sola. --- */
.ApplicationMatrixGrid-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(var(--ApplicationMatrixGrid-columns), minmax(0, 1fr)); /* Columnas iguales. */
    gap: 16px; /* Separación del nodo. */
    margin: 0; /* Sin el margen de la lista. */
    padding: 0; /* Sin la sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.ApplicationMatrixGrid-cell {
    min-width: 0; /* La tarjeta no empuja la columna. */
}

/* --- Tarjeta: foto con velo, escuadra, número y recuadro de vidrio. 238px de alto en los tres
   nodos; el ancho lo da la columna. --- */
.ApplicationMatrixGrid-card {
    position: relative; /* Origen de las capas. */
    display: block; /* Ocupa la celda. */
    box-sizing: border-box; /* El borde entra en el tamaño. */
    height: 238px; /* Alto del nodo. */
    overflow: hidden; /* La foto respeta el radio. */
    border: 1px solid rgba(15, 15, 18, 0.11); /* Contorno del nodo. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: #d9d9db; /* Respaldo del nodo mientras carga la foto. */
    color: inherit; /* Sin el azul de enlace. */
    text-decoration: none; /* Sin subrayado. */
}

    .ApplicationMatrixGrid-card:hover,
    .ApplicationMatrixGrid-card:focus {
        color: inherit; /* Bootstrap colorea los enlaces con el puntero encima. */
        text-decoration: none; /* Ídem con el subrayado. */
    }

.ApplicationMatrixGrid-photo {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tarjeta. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta sin deformar. */
    transition: transform 0.6s var(--ApplicationMatrixGrid-ease); /* Zoom del realce. */
}

/* Realce estándar de tarjetas con enlace: zoom sutil de la foto. */
.ApplicationMatrixGrid-card.is-link:hover .ApplicationMatrixGrid-photo,
.ApplicationMatrixGrid-card.is-link:focus-visible .ApplicationMatrixGrid-photo {
    transform: scale(1.05);
}

/* Velo de legibilidad: transparente arriba y oscuro abajo, detrás del vidrio. */
.ApplicationMatrixGrid-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tarjeta. */
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%);
    pointer-events: none; /* Decorativo. */
}

/* Escuadra de la esquina superior izquierda: brazos de 10px a 9px del borde. */
.ApplicationMatrixGrid-corner {
    position: absolute; /* Sobre la foto. */
    top: 9px; /* Separación del nodo. */
    left: 9px; /* Ídem. */
    width: 10px; /* Brazo horizontal. */
    height: 10px; /* Brazo vertical. */
    border-top: 1px solid rgba(15, 15, 18, 0.3); /* Brazo horizontal. */
    border-left: 1px solid rgba(15, 15, 18, 0.3); /* Brazo vertical. */
    pointer-events: none; /* Decorativo. */
}

/* Número de la tarjeta, arriba a la derecha. */
.ApplicationMatrixGrid-number {
    position: absolute; /* Sobre la foto. */
    top: 8px; /* Separación del nodo. */
    right: 12px; /* Ídem. */
    font-size: 10px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium. */
    letter-spacing: 1px; /* Apertura del nodo. */
    color: rgba(255, 255, 255, 0.92); /* Blanco del nodo. */
}

/* Recuadro de vidrio, abajo, a 9px de los bordes. */
.ApplicationMatrixGrid-glass {
    position: absolute; /* Sobre la foto. */
    left: 9px; /* Separación del nodo. */
    right: 9px; /* Ídem. */
    bottom: 9px; /* Ídem. */
    display: flex; /* Título y bajada apilados. */
    flex-direction: column; /* En columna. */
    gap: 7px; /* Separación del nodo. */
    padding: 12px 13px 13px; /* Rellenos del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.11); /* Contorno del nodo. */
    border-radius: 6px; /* Radio del nodo. */
    background-color: rgba(255, 255, 255, 0.92); /* Vidrio del nodo. */
    -webkit-backdrop-filter: blur(11px); /* Desenfoque del nodo, en Safari. */
    backdrop-filter: blur(11px); /* Desenfoque del nodo. */
}

.ApplicationMatrixGrid-card-title {
    margin: 0; /* Sin margen propio. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 7px; /* Separación del nodo. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.ApplicationMatrixGrid-card-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 5px; /* Lado del nodo. */
    height: 5px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña al título. */
}

/* Hasta dos líneas: un título largo envuelve en vez de cortarse a media palabra. */
.ApplicationMatrixGrid-card-title-text {
    min-width: 0; /* Deja que envuelva. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.ApplicationMatrixGrid-card-text {
    margin: 0; /* Sin margen propio. */
    font-size: 10.5px; /* Tamaño del nodo. */
    line-height: 1.3; /* Compacto. */
    color: rgba(15, 15, 18, 0.6); /* Gris del nodo. */
}

/* --- Tablet (hasta 1024px): 3 por fila. --- */
@media (max-width: 1024px) {
    .ApplicationMatrixGrid {
        --ApplicationMatrixGrid-columns: 3; /* Tarjetas por fila del nodo de tablet. */
        padding: 48px 34px 72px; /* Rellenos del nodo. */
    }

    .ApplicationMatrixGrid-title {
        font-size: min(4.5573vw, 35px); /* 35px sobre la mesa de 768. */
    }
}

/* --- Mobile (hasta 500px): 2 por fila; el botón baja debajo del título. --- */
@media (max-width: 500px) {
    .ApplicationMatrixGrid {
        --ApplicationMatrixGrid-columns: 2; /* Tarjetas por fila del nodo de mobile. */
        padding: 26px 20px 72px; /* Rellenos del nodo. */
    }

    .ApplicationMatrixGrid-header {
        flex-direction: column; /* Textos y botón apilados. */
        align-items: flex-start; /* A la izquierda. */
        gap: 14px; /* Separación del nodo. */
        margin-bottom: 24px; /* Hasta la grilla. */
    }

    .ApplicationMatrixGrid-title {
        font-size: min(7.4667vw, 28px); /* 28px sobre la mesa de 375. */
    }

    .ApplicationMatrixGrid-grid {
        gap: 16px 8px; /* Separación del nodo: 16 entre filas, 8 entre columnas. */
    }

    /* En mobile el vidrio es más transparente, como el nodo. */
    .ApplicationMatrixGrid-glass {
        background-color: rgba(255, 255, 255, 0.7);
    }
}

/* Movimiento reducido: sin zoom ni realce. */
@media (prefers-reduced-motion: reduce) {
    .ApplicationMatrixGrid-photo,
    .ApplicationMatrixGrid-button {
        transition: none;
    }

    /* La flecha no se corre. */
    .ApplicationMatrixGrid-button:hover,
    .ApplicationMatrixGrid-button:focus-visible {
        gap: 6px; /* Separación de reposo. */
    }
}