/* RelatedSolutionsSection.css — Sección "Las otras soluciones del pilar" al cierre de una página
   individual de solución. Nodos 3279:54792 (PC), 3279:54970 (tablet) y 3279:55148 (mobile) del
   Figma. Mismo aspecto y misma mecánica que RelatedPillarsSection: fondo blanco con borde gris
   SIEMPRE, en los tres rangos -- sin el fondo gris que el Figma de escritorio agrega.
   Tipografía: site.css. */

.RelatedSolutionsSection {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    /* El relleno lateral va en la sección, por fuera del tope del contenedor: así el contenido
       apoya sobre la misma vertical que las secciones vecinas en monitores anchos. */
    padding-inline: 48px;
}

.RelatedSolutionsSection-container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    box-sizing: border-box;
    padding-block: 56px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Encabezado: el título a la izquierda y el enlace de regreso al pilar a la derecha, alineado a la
   base del título. */
.RelatedSolutionsSection-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.RelatedSolutionsSection-heading {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.RelatedSolutionsSection-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #243746;
}

.RelatedSolutionsSection-eyebrow-dot {
    flex: 0 0 auto;
    width: min(7px, 100%);
    height: 7px;
    background-color: #243746;
}

.RelatedSolutionsSection-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f0f12;
}

/* Enlace "Volver al pilar →". El texto lo carga el editor. */
.RelatedSolutionsSection-back,
.RelatedSolutionsSection-back:link,
.RelatedSolutionsSection-back:visited,
.RelatedSolutionsSection-back:hover,
.RelatedSolutionsSection-back:focus,
.RelatedSolutionsSection-back:focus-visible,
.RelatedSolutionsSection-back:active {
    text-decoration: none;
    color: #243746;
}

.RelatedSolutionsSection-back {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    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. */
    .RelatedSolutionsSection-back:hover,
    .RelatedSolutionsSection-back:focus-visible {
        gap: 10px;
    }

/* Cuatro tarjetas por fila: desde la quinta bajan a una fila nueva con el mismo ancho. */
.RelatedSolutionsSection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Anula el subrayado que Bootstrap agrega en a:hover, que le gana en especificidad a una sola
   clase -- por eso se repite en cada pseudo-clase en vez de solo en el estado base. */
.RelatedSolutionsSection-card,
.RelatedSolutionsSection-card:link,
.RelatedSolutionsSection-card:visited,
.RelatedSolutionsSection-card:hover,
.RelatedSolutionsSection-card:focus,
.RelatedSolutionsSection-card:focus-visible,
.RelatedSolutionsSection-card:active {
    text-decoration: none;
    color: inherit;
}

.RelatedSolutionsSection-card {
    position: relative;
    flex: 0 0 calc((100% - 3 * 20px) / 4); /* Cuatro por fila, descontando los tres espacios. */
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px 24px 24px;
    background-color: #ffffff;
    border: 1px solid rgba(15, 15, 18, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

/* Con 3 soluciones o menos, las tarjetas llenan la fila en lugar de dejar el hueco de las columnas
   que faltan (BTCN-364): 3 → tercios, 2 → mitades, 1 → todo el ancho. Con 4 o más, sin cambios: la
   quinta y las siguientes bajan con el mismo ancho de un cuarto. Se cuenta con el patrón
   :first-child:nth-last-child(n) ~ hermanas, sin JavaScript. Solo PC: en tablet y mobile la grilla
   ya es de 2 y 1 columnas. */
.RelatedSolutionsSection-card:first-child:nth-last-child(3),
.RelatedSolutionsSection-card:first-child:nth-last-child(3) ~ .RelatedSolutionsSection-card {
    flex-basis: calc((100% - 2 * 20px) / 3);
}

.RelatedSolutionsSection-card:first-child:nth-last-child(2),
.RelatedSolutionsSection-card:first-child:nth-last-child(2) ~ .RelatedSolutionsSection-card {
    flex-basis: calc((100% - 20px) / 2);
}

.RelatedSolutionsSection-card:only-child {
    flex-basis: 100%;
}

    .RelatedSolutionsSection-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #429cde;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .RelatedSolutionsSection-card:hover::before,
    .RelatedSolutionsSection-card:focus-visible::before {
        opacity: 1;
    }

/* Número correlativo de la solución: "SOLUCIÓN 01". */
.RelatedSolutionsSection-card-number {
    margin: 0;
    font-size: 10px; /* El Figma dice 9.5px: un tamaño fraccionario tan chico deforma el 1 y el 4 con el hinting. */
    font-weight: 700;
    letter-spacing: 0.19px;
    text-transform: uppercase;
    color: #243746;
}

.RelatedSolutionsSection-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #0f0f12;
    /* BTCN-342: recortado a 3 renglones con "…", igual que la descripción: un título al máximo
       (255) ya no alarga la tarjeta ni estira las demás de la fila. */
    overflow-wrap: anywhere; /* Una palabra larga sin espacios también corta. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Descripción corta, recortada a 3 renglones -- mismo patrón que RelatedPillarsSection. */
.RelatedSolutionsSection-card-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(15, 15, 18, 0.55);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.RelatedSolutionsSection-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #243746;
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

    .RelatedSolutionsSection-card:hover .RelatedSolutionsSection-card-cta,
    .RelatedSolutionsSection-card:focus-visible .RelatedSolutionsSection-card-cta {
        gap: 10px;
    }

/* Flecha estándar de LegalLinksSection. */
.RelatedSolutionsSection-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Tablet: hasta 1024px. --- */
@media (max-width: 1024px) {
    .RelatedSolutionsSection {
        padding-inline: 32px;
    }

    .RelatedSolutionsSection-container {
        padding-block: 48px;
        gap: 20px;
    }

    /* El enlace de regreso baja debajo del título, a la izquierda. */
    .RelatedSolutionsSection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .RelatedSolutionsSection-heading {
        gap: 6px;
    }

    .RelatedSolutionsSection-eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.48px;
        color: #262b33;
    }

    .RelatedSolutionsSection-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #262b33;
    }

    .RelatedSolutionsSection-title {
        font-size: 24px;
    }

    /* Grid y no flex-wrap: así la tarjeta sola de una fila incompleta mide igual que sus
       hermanas, en vez de estirarse con flex-grow. */
    .RelatedSolutionsSection-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 344px));
        justify-content: start;
        gap: 20px 16px;
    }

    .RelatedSolutionsSection-card {
        width: 100%;
        padding: 20px;
    }

    .RelatedSolutionsSection-card-title {
        font-size: 18px;
        font-weight: 700;
    }

    .RelatedSolutionsSection-card-description {
        color: rgba(15, 15, 18, 0.65);
    }
}

/* --- Mobile: hasta 500px. Va después del bloque de tablet. --- */
@media (max-width: 500px) {
    .RelatedSolutionsSection {
        padding-inline: 20px;
    }

    .RelatedSolutionsSection-container {
        padding-block: 32px;
    }

    .RelatedSolutionsSection-title {
        font-size: 20px;
    }

    .RelatedSolutionsSection-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Movimiento reducido: la flecha no se corre. --- */
@media (prefers-reduced-motion: reduce) {
    .RelatedSolutionsSection-back,
    .RelatedSolutionsSection-card-cta {
        transition: none;
    }

    .RelatedSolutionsSection-back:hover,
    .RelatedSolutionsSection-back:focus-visible,
    .RelatedSolutionsSection-card:hover .RelatedSolutionsSection-card-cta,
    .RelatedSolutionsSection-card:focus-visible .RelatedSolutionsSection-card-cta {
        gap: 6px;
    }
}