/* PillarQuickAccessGrid.css — Accesos directos a los pilares de soluciones.
   Nodos 2611:38071 (PC, contenido de 1184), 2611:38373 (tablet, mesa de 768) y 2611:38648 (mobile,
   mesa de 375).
   ESCRITORIO: 4 tarjetas por fila, con borde. TABLET Y MOBILE: 2 por fila, sin borde. La tarjeta con
   color de acento lleva una franja arriba y el número y el enlace en ese color (en el diseño, la
   cuarta en rojo). AL PASAR EL MOUSE, CUALQUIER TARJETA MUESTRA LA FRANJA (decisión del usuario):
   en su acento o, sin acento, en el azul oscuro estándar. El eyebrow es el estándar del proyecto en los tres rangos (los nodos de tablet y
   mobile traen un círculo celeste, mismo criterio que el resto de los widgets). */

/* --- Sección. --- */
.PillarQuickAccessGrid {
    --PillarQuickAccessGrid-columns: 4; /* Tarjetas por fila en escritorio. */
    --PillarQuickAccessGrid-ink: #0f0f12; /* Casi negro del diseño. */
    --PillarQuickAccessGrid-number-color: var(--color-cool-neutral-02); /* #243746 del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 48px 48px 56px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--PillarQuickAccessGrid-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.PillarQuickAccessGrid-container {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    gap: 24px; /* Separación del nodo. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Cabecera: eyebrow y título a todo el ancho. Sin nota (se quitó por pedido de QA: en mobile,
   a la derecha del título, lo apretaba en una columna angosta). --- */
.PillarQuickAccessGrid-header {
    min-width: 0; /* El título envuelve dentro del ancho. */
}

.PillarQuickAccessGrid-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    min-width: 0; /* Deja que el título envuelva. */
}

/* --- Eyebrow estándar. --- */
.PillarQuickAccessGrid-eyebrow {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    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. */
}

.PillarQuickAccessGrid-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: 34px en el piso del rango de escritorio (1200px). --- */
.PillarQuickAccessGrid-title {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(28px, 2.8333vw, 34px); /* 34 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* -0.68px sobre 34px. */
    color: var(--PillarQuickAccessGrid-ink);
}

/* --- Grilla: 4 columnas iguales en escritorio. --- */
.PillarQuickAccessGrid-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(var(--PillarQuickAccessGrid-columns), minmax(0, 1fr)); /* Columnas iguales. */
    gap: 20px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.PillarQuickAccessGrid-item {
    display: flex; /* La tarjeta estira al alto de la fila. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.PillarQuickAccessGrid-card {
    position: relative; /* Ancla de la franja de acento. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada texto con su ancho. */
    gap: 9px; /* Separación del nodo. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    width: 100%; /* Ancho de la celda. */
    padding: 20px 22px 24px; /* Rellenos del nodo. */
    overflow: hidden; /* La franja respeta el redondeo. */
    background-color: #ffffff; /* Fondo del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Borde del nodo. */
    border-radius: 6px; /* Redondeo del nodo. */
    transition: border-color 0.25s ease; /* Realce. */
}

    /* Los cinco estados le ganan al a:hover de Bootstrap. */
    .PillarQuickAccessGrid-card,
    .PillarQuickAccessGrid-card:link,
    .PillarQuickAccessGrid-card:visited,
    .PillarQuickAccessGrid-card:hover,
    .PillarQuickAccessGrid-card:focus,
    .PillarQuickAccessGrid-card:active {
        color: var(--PillarQuickAccessGrid-ink); /* Color base del texto. */
        text-decoration: none; /* Sin subrayado. */
    }

/* Franja de arriba: existe en todas las tarjetas, plegada hacia la izquierda. Se despliega al
   pasar el mouse y queda siempre desplegada en la tarjeta con acento. Va sobre el relleno, así que
   no cambia el alto de la tarjeta. */
.PillarQuickAccessGrid-card::before {
    content: ""; /* La franja. */
    position: absolute; /* Pegada arriba. */
    top: 0;
    left: 0;
    right: 0;
    height: 4px; /* Alto del nodo. */
    background-color: var(--PillarQuickAccessGrid-accent, var(--color-cool-neutral-02)); /* Acento o azul oscuro. */
    transform: scaleX(0); /* Plegada. */
    transform-origin: left center; /* Se despliega de izquierda a derecha. */
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); /* Despliegue suave. */
}

/* Tarjeta con acento: franja siempre visible y número y enlace en su color. */
.PillarQuickAccessGrid-card.has-accent {
    --PillarQuickAccessGrid-number-color: var(--PillarQuickAccessGrid-accent);
}

    .PillarQuickAccessGrid-card.has-accent::before,
    .PillarQuickAccessGrid-card.is-linked:hover::before,
    .PillarQuickAccessGrid-card.is-linked:focus-visible::before {
        transform: scaleX(1);
    }

    .PillarQuickAccessGrid-card.is-linked:hover,
    .PillarQuickAccessGrid-card.is-linked:focus-visible {
        border-color: rgba(15, 15, 18, 0.35); /* El borde se marca, como en el resto de las tarjetas. */
    }

.PillarQuickAccessGrid-number {
    font-size: 20px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    letter-spacing: -0.01em; /* -0.2px sobre 20px. */
    color: var(--PillarQuickAccessGrid-number-color); /* Azul oscuro o el acento. */
}

.PillarQuickAccessGrid-card-title {
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.25; /* Interlineado de titular. */
    letter-spacing: -0.005em; /* -0.09px sobre 18px. */
}

.PillarQuickAccessGrid-card-text {
    font-size: 12.5px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

/* "Ver pilar →". El margen superior automático lo pega abajo si las tarjetas de la fila tienen
   descripciones de distinto largo. */
.PillarQuickAccessGrid-link {
    display: inline-flex; /* Texto y flecha en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    max-width: min(calc(100% - 4px), 280px); /* Tope estándar: deja libres los 4px del hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    margin-top: auto; /* Pegado abajo. */
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    color: var(--PillarQuickAccessGrid-number-color); /* Azul oscuro o el acento. */
    transition: gap 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Flecha y tope al mismo ritmo. */
}

/* La flecha se corre al abrir la separación con el hover o el foco de la tarjeta. */
.PillarQuickAccessGrid-card.is-linked:hover .PillarQuickAccessGrid-link,
.PillarQuickAccessGrid-card.is-linked:focus-visible .PillarQuickAccessGrid-link {
    gap: 10px; /* Separación estándar en hover y foco. */
    max-width: min(100%, 284px); /* El tope crece los 4px de la flecha: el texto no se corre. */
}

/* Leyenda: dos renglones como máximo con puntos suspensivos (estándar de enlaces). */
.PillarQuickAccessGrid-link-text {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Flecha estándar de LegalLinksSection. */
.PillarQuickAccessGrid-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. */
}

/* --- Tablet (hasta 1024px): 2 por fila, sin borde y números celestes. --- */
@media (max-width: 1024px) {
    .PillarQuickAccessGrid {
        --PillarQuickAccessGrid-columns: 2; /* Tarjetas por fila del nodo. */
        --PillarQuickAccessGrid-number-color: #429cde; /* Celeste del nodo de tablet. */
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    .PillarQuickAccessGrid-container {
        gap: 20px; /* Separación del nodo. */
    }

    .PillarQuickAccessGrid-heading {
        gap: 6px; /* Separación del nodo. */
    }

    .PillarQuickAccessGrid-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .PillarQuickAccessGrid-title {
        font-size: min(3.125vw, 24px); /* 24px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

    .PillarQuickAccessGrid-grid {
        gap: 20px 16px; /* Separación del nodo. */
    }

    .PillarQuickAccessGrid-card {
        gap: 6px; /* Separación del nodo. */
        padding: 20px; /* Rellenos del nodo. */
        border-color: transparent; /* Sin borde en el nodo de tablet. */
    }

    .PillarQuickAccessGrid-number {
        font-size: 14px; /* Tamaño del nodo de tablet. */
        font-weight: 700; /* Bold del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

    .PillarQuickAccessGrid-card-title {
        font-size: 17px; /* Tamaño del nodo de tablet. */
        letter-spacing: 0; /* Sin ajuste en el nodo. */
    }

    .PillarQuickAccessGrid-card-text {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        color: rgba(15, 15, 18, 0.65); /* Gris del nodo de tablet. */
    }

    .PillarQuickAccessGrid-link {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del nodo de tablet. */
    }

    /* Sin borde, el realce lo da una sombra tenue. */
    .PillarQuickAccessGrid-card.is-linked:hover,
    .PillarQuickAccessGrid-card.is-linked:focus-visible {
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(15, 15, 18, 0.08);
    }
}

/* --- Mobile (hasta 500px): siguen 2 por fila, con letra más chica. --- */
@media (max-width: 500px) {
    .PillarQuickAccessGrid {
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .PillarQuickAccessGrid-title {
        font-size: min(5.3333vw, 20px); /* 20px sobre la mesa de 375. */
    }

    .PillarQuickAccessGrid-card-title {
        font-size: 15px; /* Tamaño del nodo de mobile. */
    }
}

/* Movimiento reducido: la flecha no se mueve. */
@media (prefers-reduced-motion: reduce) {
    .PillarQuickAccessGrid-card,
    .PillarQuickAccessGrid-card::before,
    .PillarQuickAccessGrid-link {
        transition: none;
    }

    .PillarQuickAccessGrid-card.is-linked:hover .PillarQuickAccessGrid-link,
    .PillarQuickAccessGrid-card.is-linked:focus-visible .PillarQuickAccessGrid-link {
        gap: 6px; /* La flecha no se corre. */
        max-width: min(calc(100% - 4px), 280px); /* El tope no crece. */
    }
}