/* InfoCardsSection.css -- Encabezado y retícula de tarjetas cargadas a mano.
   Caja y encabezado de RelatedPillarsSection, tipografía de la tarjeta del nodo 3567:2848 del
   Figma y descripción del encabezado de BrandFilteredProductCarousel. Tipografía base: site.css. */

.InfoCardsSection {
    width: 100%; /* Fondo a sangre completa. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    background-color: #ffffff; /* Blanco de RelatedPillarsSection. */
}

.InfoCardsSection-container {
    max-width: var(--container-max-width); /* Techo del sitio. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    padding: 32px 48px; /* Arriba y abajo, y lados. */
    display: flex; /* Encabezado y retícula apilados. */
    flex-direction: column; /* En columna. */
    gap: 24px; /* Separación de RelatedPillarsSection. */
}

/* --- Encabezado. --- */
.InfoCardsSection-header {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación de RelatedPillarsSection. */
}

.InfoCardsSection-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* Sin el margen del navegador. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold. */
    letter-spacing: 0.5px; /* Espaciado del diseño. */
    text-transform: uppercase; /* Mayúsculas. */
    color: #243746; /* Azul de marca. */
}

/* Texto del eyebrow: el recorte va acá porque el párrafo es flex. */
.InfoCardsSection-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
}

.InfoCardsSection-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: min(7px, 100%); /* Cuadrado del diseño. */
    height: 7px; /* Ídem. */
    background-color: #243746; /* Azul de marca. */
}

.InfoCardsSection-title {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 36px; /* Tamaño de escritorio. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado del diseño. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: anywhere; /* Una palabra larga (o un texto sin espacios) no desborda. */
}

/* Misma tipografía que BrandFilteredProductCarousel-description. */
.InfoCardsSection-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 16px; /* Tamaño estándar. */
    font-weight: 400; /* Regular. */
    line-height: 26px; /* Interlineado estándar. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar. */
    overflow-wrap: anywhere; /* Una palabra larga (o un texto sin espacios) no desborda. */
}

/* Etiqueta y tarjeta: máximo 2 renglones con puntos suspensivos. EL TÍTULO Y LA DESCRIPCIÓN DEL
   ENCABEZADO NO SE RECORTAN (BTCN-340): no tienen "Continuar leyendo" como las tarjetas, así que en
   tablet y mobile quedaban cortados sin forma de leer el resto. Se ven completos en los tres rangos. */
.InfoCardsSection-eyebrow-text,
.InfoCardsSection-card-title,
.InfoCardsSection-card-subtitle {
    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. */
    overflow: hidden; /* Recorta con puntos suspensivos. */
}

/* --- Retícula: hasta 3 tarjetas por fila; la fila incompleta mide igual que las demás. --- */
.InfoCardsSection-grid {
    display: grid; /* Columnas fijas. */
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas iguales. */
    gap: 20px; /* Separación de RelatedPillarsSection. */
}

/* --- Tarjeta: caja de RelatedPillarsSection. --- */
.InfoCardsSection-card {
    position: relative; /* Ancla de la barra y del área clickeable. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Botón y enlace solo del ancho de su texto. */
    gap: 11px; /* Separación del nodo 3567:2848. */
    padding: 22px 24px 24px; /* Relleno de RelatedPillarsSection. */
    background-color: #ffffff; /* Blanco. */
    border: 1px solid rgba(15, 15, 18, 0.1); /* Borde gris. */
    border-radius: 6px; /* Esquinas redondeadas. */
    overflow: hidden; /* La barra respeta las esquinas. */
}

/* Ninguna pieza pasa del ancho de la tarjeta. */
.InfoCardsSection-card > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Barra azul de arriba al pasar el mouse o enfocar un control. */
.InfoCardsSection-card::before {
    content: ""; /* Pseudoelemento vacío. */
    position: absolute; /* Sobre el borde superior. */
    top: 0; /* Pegada arriba. */
    left: 0; /* De lado a lado. */
    right: 0; /* Ídem. */
    height: 3px; /* Grosor de RelatedPillarsSection. */
    background-color: #429cde; /* Azul de RelatedPillarsSection. */
    opacity: 0; /* Oculta en reposo. */
    transition: opacity 0.2s ease-in-out; /* Aparece suave. */
}

.InfoCardsSection-card:hover::before,
.InfoCardsSection-card:focus-within::before {
    opacity: 1; /* Visible. */
}

/* Título: nodo 3567:2849. */
.InfoCardsSection-card-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 30px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: normal; /* Interlineado del nodo. */
    color: #243746; /* Azul de marca. */
    overflow-wrap: anywhere; /* Una palabra larga (o un texto sin espacios) no desborda. */
}

/* Subtítulo: nodo 3567:2850. */
.InfoCardsSection-card-subtitle {
    margin: 0; /* La separación la da el gap. */
    font-size: 18px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 24px; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: anywhere; /* Una palabra larga (o un texto sin espacios) no desborda. */
}

/* Descripción: nodo 3567:2851, recortada a 3 renglones. */
.InfoCardsSection-card-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 15px; /* A pedido del usuario; el nodo dice 13px. */
    font-weight: 400; /* Regular. */
    line-height: 23px; /* Misma proporción que los 20px del nodo sobre 13px. */
    color: rgba(15, 15, 18, 0.6); /* Gris del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga (o un texto sin espacios) no desborda. */
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 3; /* Tope de renglones. */
    line-clamp: 3; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta con puntos suspensivos. */
}

/* Abierta: los tres textos completos. */
.InfoCardsSection-card.is-expanded [data-card-clamp] {
    display: block; /* Sin el modelo del recorte. */
    -webkit-line-clamp: unset; /* Sin tope. */
    line-clamp: none; /* Ídem. */
    overflow: visible; /* Sin recorte. */
}

/* --- Botón de leer más: mismo color y peso que la leyenda del enlace, sin flecha. --- */
.InfoCardsSection-card-toggle {
    margin: -5px 0 0; /* Pegado al último texto. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: none; /* Sin el fondo del navegador. */
    font: inherit; /* Familia del sitio. */
    font-size: 13px; /* Tamaño de la leyenda del enlace. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado de la leyenda. */
    color: #243746; /* Azul de marca. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
    cursor: pointer; /* Mano de clic. */
}

.InfoCardsSection-card-toggle[hidden] {
    display: none; /* El atributo hidden le gana al display propio. */
}

.InfoCardsSection-card-toggle:focus-visible {
    outline: 2px solid #429cde; /* Anillo de foco visible. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas del anillo. */
}

/* --- Enlace: leyenda de RelatedPillarsSection con la flecha y la animación estándar (LegalLinksSection). --- */
.InfoCardsSection-card-cta,
.InfoCardsSection-card-cta:link,
.InfoCardsSection-card-cta:visited,
.InfoCardsSection-card-cta:hover,
.InfoCardsSection-card-cta:focus,
.InfoCardsSection-card-cta:focus-visible,
.InfoCardsSection-card-cta:active {
    text-decoration: none; /* El a:hover de Bootstrap no lo subraya. */
    color: #243746; /* Ni lo pinta de azul. */
}

.InfoCardsSection-card-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    margin-top: auto; /* Al pie de la tarjeta. */
    padding-top: 4px; /* Aire de RelatedPillarsSection. */
    font-size: 13px; /* Tamaño de RelatedPillarsSection. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado de RelatedPillarsSection. */
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

.InfoCardsSection-card-cta:hover,
.InfoCardsSection-card-cta:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco: la flecha se corre. */
}

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

/* --- Fila con una tarjeta abierta: el JS fija el alto que tenía la fila cerrada. --- */
.InfoCardsSection-card.is-frozen {
    align-self: start; /* No se estira con la abierta. */
    height: var(--row-height); /* Alto de la fila cerrada. */
}

.InfoCardsSection-card.is-expanded {
    align-self: start; /* Crece con su texto. */
    min-height: var(--row-height); /* Nunca más baja que sus vecinas. */
}

/* --- Tablet: hasta 1024px. --- */
/* --- Paginación (más de seis tarjetas): "Página 1 de 2 · ‹ Anterior | Siguiente ›". Mismo patrón y
   estilo que DocumentLibrary. Igual en PC, tablet y mobile. --- */
.InfoCardsSection-card[hidden] {
    display: none; /* La tarjeta de otra página no ocupa lugar en la retícula; le gana al flex propio. */
}

.InfoCardsSection-pager {
    display: flex; /* Estado y leyendas en una sola fila. */
    flex-wrap: wrap; /* En un ancho muy chico las leyendas bajan en lugar de salirse. */
    align-items: center; /* Centrados verticalmente. */
    justify-content: space-between; /* Estado a la izquierda, leyendas a la derecha. */
    gap: 4px 16px; /* Separación mínima al envolver. */
    padding-top: 12px; /* Aire con la última fila de tarjetas. */
    border-top: 1px solid rgba(15, 15, 18, 0.12); /* Divisor. */
}

    .InfoCardsSection-pager[hidden] {
        display: none; /* Sin script no se pinta. */
    }

/* "Página 1 de 2": discreto. */
.InfoCardsSection-pager-status {
    margin: 0; /* Sin margen propio. */
    font-size: 12px; /* Pequeño: no satura. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al cambiar de página. */
    letter-spacing: 0.2px; /* Apertura leve. */
    color: rgba(15, 15, 18, 0.5); /* Gris del diseño. */
}

.InfoCardsSection-pager-actions {
    display: flex; /* Leyendas en línea. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha. */
    gap: 12px; /* Separación entre leyendas. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.InfoCardsSection-pager-button {
    display: inline-flex; /* Texto e ícono en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 6px; /* Separación entre texto e ícono. */
    margin: 0; /* Sin el margen propio del botón. */
    padding: 8px 2px; /* Zona de toque cómoda sin caja visible. */
    border: 0; /* Sin contorno. */
    background: transparent; /* Sin fondo. */
    font: inherit; /* El botón no trae la tipografía del sitio. */
    font-size: 14px; /* Tamaño. */
    font-weight: 700; /* Bold. */
    color: #429cde; /* Celeste de enlaces del diseño. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
}

    /* Con las dos leyendas visibles, una barra las separa. */
    .InfoCardsSection-pager-button:not([hidden]) ~ .InfoCardsSection-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

    .InfoCardsSection-pager-button[hidden] {
        display: none; /* En el extremo, la leyenda que no aplica no se ve. */
    }

    .InfoCardsSection-pager-button:hover,
    .InfoCardsSection-pager-button:active {
        opacity: 0.7; /* Respuesta al puntero y al toque. */
    }

    .InfoCardsSection-pager-button:focus-visible {
        outline: 2px solid #429cde; /* Anillo de foco, como el botón de las tarjetas. */
        outline-offset: 2px;
    }

.InfoCardsSection-pager-icon {
    width: 14px; /* Tamaño del glifo. */
    height: 14px; /* Cuadrado. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

@media (max-width: 1024px) {

    .InfoCardsSection-container {
        padding: 32px; /* Relleno de tablet. */
        gap: 20px; /* Separación de tablet. */
    }

    .InfoCardsSection-header {
        gap: 6px; /* Separación de tablet. */
    }

    .InfoCardsSection-eyebrow {
        font-size: 12px; /* Tamaño de tablet. */
        font-weight: 600; /* Semibold. */
        letter-spacing: 0.48px; /* Espaciado de tablet. */
        color: #262b33; /* Gris oscuro de tablet. */
    }

    /* BTCN-373: CUADRADO también en tablet y mobile, como en desktop y en el Figma (antes era un
       punto redondo). */
    .InfoCardsSection-eyebrow-dot {
        width: 6px; /* Cuadrado de tablet. */
        height: 6px; /* Ídem. */
        background-color: #262b33; /* Gris oscuro de tablet. */
    }

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

    .InfoCardsSection-grid {
        grid-template-columns: repeat(2, minmax(0, 344px)); /* Dos columnas de RelatedPillarsSection. */
        justify-content: start; /* Pegadas a la izquierda. */
        gap: 20px 16px; /* Separación de tablet. */
    }

    .InfoCardsSection-card {
        padding: 20px; /* Relleno de tablet. */
    }
}

/* --- Mobile: hasta 500px. --- */
@media (max-width: 500px) {

    .InfoCardsSection-container {
        padding: 24px 20px; /* Relleno de mobile. */
    }

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

    .InfoCardsSection-grid {
        grid-template-columns: minmax(0, 1fr); /* Una sola columna. */
    }
}

/* Sin animación para quien la desactivó en el sistema. */
@media (prefers-reduced-motion: reduce) {

    .InfoCardsSection-card::before,
    .InfoCardsSection-card-cta,
    .InfoCardsSection-pager-button {
        transition: none; /* Sin interpolación. */
    }

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