/* ImageCardGrid.css — Grilla de tarjetas cargadas a mano. Mismo diseño que ProductCardGrid: nodos
   3655:48882 (PC) y 3655:49084 (mobile); tablet sin nodo. Tipografía: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.ImageCardGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    padding: 32px 48px; /* Arriba y abajo, y lados. */
}

/* Contenido centrado dentro del techo del sitio: encabezado y grilla apilados. */
.ImageCardGrid-container {
    display: flex; /* Encabezado y grilla en columna. */
    flex-direction: column; /* En vertical. */
    gap: 16px; /* Separación del nodo 3655:48883. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* --- Encabezado. --- */
.ImageCardGrid-header {
    display: flex; /* Eyebrow, título y descripción apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegados al borde de inicio. */
    gap: 10px; /* Misma separación que TextImageSection. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho: una palabra sin espacios no ensancha el encabezado. La caja del título
   también: en mobile su fila es display: contents y sus piezas no son hijas directas del encabezado. */
.ImageCardGrid-header > *,
.ImageCardGrid-heading,
.ImageCardGrid-heading > * {
    max-width: 100%; /* Techo del ancho del contenedor. */
}

/* Etiqueta con el cuadrado de marca: misma que TextImageSection. */
.ImageCardGrid-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del diseño. */
    margin: 0; /* El 0 es obligatorio: es un <p> usado como ítem de flex. */
}

/* Cuadrado de la etiqueta. */
.ImageCardGrid-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    background-color: var(--color-cool-neutral-02); /* #243746 del diseño. */
}

/* Texto de la etiqueta. */
.ImageCardGrid-eyebrow-text {
    min-width: 0; /* Ítem de flex: sin esto una palabra larga no parte y desborda. */
    font-size: 14px; /* Tamaño del diseño. */
    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); /* #243746 del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título de la sección. */
.ImageCardGrid-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 24px; /* Tamaño del nodo 3655:48886. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.25; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción de la sección: 16px del nodo 3655:48888 sobre el título. */
.ImageCardGrid-description {
    margin: 6px 0 0; /* 6px que suman 16px con el gap del encabezado. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: var(--color-cool-neutral-02); /* #243746 del diseño. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Fila superior: eyebrow y título a la izquierda, enlace a la derecha al pie del título. */
.ImageCardGrid-header-top {
    display: flex; /* Textos y enlace en línea. */
    align-items: flex-end; /* Enlace a la altura del pie del título. */
    gap: 32px; /* Aire mínimo entre título y enlace. */
    align-self: stretch; /* Todo el ancho: el tope porcentual del enlace se mide contra él. */
}

/* Eyebrow y título apilados; cede ancho al enlace. */
.ImageCardGrid-heading {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegadas al borde de inicio. */
    gap: 10px; /* Misma separación que el encabezado. */
    flex: 1 1 0; /* Toma el ancho que deja el enlace. */
    min-width: 0; /* Puede achicarse. */
}

/* --- Enlace del encabezado: los cinco estados le ganan al a:hover de Bootstrap; nunca subrayado. --- */
.ImageCardGrid-header-link,
.ImageCardGrid-header-link:link,
.ImageCardGrid-header-link:visited,
.ImageCardGrid-header-link:hover,
.ImageCardGrid-header-link:focus,
.ImageCardGrid-header-link:active {
    color: #243746; /* Azul de marca, como el enlace de las tarjetas. */
    text-decoration: none; /* Nunca subrayado. */
}

/* Leyenda y flecha con la animación estándar; pegado a la derecha, reserva los 4px del hover. */
.ImageCardGrid-header-link {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    flex: 0 1 auto; /* Del ancho de su leyenda. */
    gap: 6px; /* Separación estándar entre leyenda y flecha. */
    max-width: min(calc(100% - 4px), 280px); /* Tope: ~30 caracteres por renglón; deja libres los 4px del hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    margin-inline: auto 4px; /* Siempre a la derecha, con la reserva del hover. */
    font-size: 14px; /* Tamaño estándar del enlace. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado de la leyenda. */
    text-align: left; /* La flecha queda al final del texto. */
    transition: gap 0.2s ease-in-out, max-width 0.2s ease-in-out, margin-inline-end 0.2s ease-in-out; /* Flecha, tope y reserva al mismo ritmo. */
}

.ImageCardGrid-header-link:hover,
.ImageCardGrid-header-link:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco: la flecha se corre. */
    max-width: min(100%, 284px); /* El tope crece los 4px de la flecha: el texto no se corre. */
    margin-inline-end: 0; /* Cede la reserva: solo avanza la flecha. */
}

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

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.ImageCardGrid-header-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. */
}

@media (prefers-reduced-motion: reduce) {

    .ImageCardGrid-header-link {
        transition: none; /* Sin interpolación. */
    }

    .ImageCardGrid-header-link:hover,
    .ImageCardGrid-header-link:focus-visible {
        gap: 6px; /* La flecha no se corre. */
        max-width: min(calc(100% - 4px), 280px); /* El tope no crece. */
        margin-inline-end: 4px; /* La reserva se queda. */
    }
}

/* --- Grilla: cuatro tarjetas por fila, todas del mismo ancho. --- */
.ImageCardGrid-grid {
    display: grid; /* Filas de tarjetas. */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Cuatro columnas iguales. */
    grid-auto-rows: auto; /* Cada fila con el alto de SU tarjeta más alta: iguales dentro de la fila, no entre filas. */
    gap: 20px; /* Separación del nodo 3655:48889. */
}

/* --- Tarjeta. --- */
.ImageCardGrid-card {
    display: flex; /* Imagen y textos apilados. */
    flex-direction: column; /* En vertical. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    overflow: hidden; /* La imagen respeta las esquinas. */
    box-sizing: border-box; /* El borde entra en el ancho. */
    background-color: #ffffff; /* Fondo del diseño. */
    border: 1px solid rgba(15, 15, 18, 0.09); /* Borde del diseño. */
    border-radius: 12px; /* Esquinas del diseño. */
}

/* Recuadro de la imagen: alto fijo para que todas las tarjetas midan lo mismo. */
.ImageCardGrid-card-media {
    flex: none; /* No se comprime. */
    height: 190px; /* Alto del nodo. */
    display: flex; /* Centra el marco de la foto. */
    align-items: center; /* En vertical. */
    justify-content: center; /* En horizontal. */
    container-type: size; /* Habilita cqw y cqh para medir la foto visible. */
}

/* Marco de la foto: sin proporción conocida llena el recuadro, como antes. */
.ImageCardGrid-card-photo {
    position: relative; /* Ancla de la etiqueta. */
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
}

/* Centrada con espacio: con proporción conocida mide lo mismo que la foto con contain. */
.ImageCardGrid--image-inset .ImageCardGrid-card-photo--fitted {
    width: min(100cqw, 100cqh * var(--ImageCardGrid-photo-ratio)); /* El lado que tope primero. */
    height: auto; /* Lo da la proporción. */
    aspect-ratio: var(--ImageCardGrid-photo-ratio); /* Proporción del archivo. */
}

/* Etiqueta sobre la esquina inferior izquierda de la foto: nodo 4367:73036. */
.ImageCardGrid-card-tag {
    position: absolute; /* Sobre la foto. */
    left: 18px; /* Del nodo. */
    bottom: 19px; /* 170 - 131 - 20 del nodo. */
    max-width: calc(100% - 36px); /* No se sale de una foto angosta. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    padding: 5px 10px; /* Del nodo. */
    border-radius: 6px; /* Del nodo. */
    background-color: var(--ImageCardGrid-tag-bg, transparent); /* Color de la paleta; sin él, sin fondo. */
    color: var(--ImageCardGrid-tag-ink, #0f0f12); /* Negro, blanco o gris elegido. */
    font-size: 9px; /* Del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 10px; /* Alto del texto del nodo. */
    letter-spacing: 0.9px; /* Del nodo. */
    text-transform: uppercase; /* Mayúsculas del diseño. */
    white-space: nowrap; /* Un renglón, como el diseño. */
    overflow: hidden; /* Lo que no entra se corta... */
    text-overflow: ellipsis; /* ...con puntos suspensivos. */
}

/* Etiqueta al inicio de los textos: mismo aspecto, en el flujo de la tarjeta. */
.ImageCardGrid-card-tag--body {
    position: static; /* Fuera de la foto. */
    align-self: flex-start; /* Solo el ancho de su texto. */
    max-width: 100%; /* No se sale de la tarjeta. */
}

.ImageCardGrid-card-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    object-fit: cover; /* Todo el ancho: llena el recuadro sin cambiar su medida. */
}

/* Textos de la tarjeta. */
.ImageCardGrid-card-body {
    display: flex; /* Título y descripción apilados. */
    flex-direction: column; /* En vertical. */
    flex: 1; /* Ocupa el resto del alto de la tarjeta. */
    gap: 5px; /* Separación del nodo. */
    padding: 15px 18px 18px; /* Arriba, lados y abajo del nodo. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Subtítulo, título y descripción: hasta dos renglones con puntos suspensivos. */
.ImageCardGrid-card-subtitle,
.ImageCardGrid-card-title,
.ImageCardGrid-card-text {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado del nodo. */
    overflow-wrap: anywhere; /* Parte también dentro de una palabra si hace falta. */
    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 lo que sobra con puntos suspensivos. */
}

.ImageCardGrid-card-title {
    font-size: 16px; /* A pedido del usuario. */
    color: var(--ImageCardGrid-title-ink, #0f0f12); /* Negro o azul oscuro elegido. */
}

.ImageCardGrid-card-text {
    color: rgba(15, 15, 18, 0.45); /* Gris del diseño. */
}

/* Subtítulo: nodo I3567:3589;406:28. Va después del bloque compartido para pisarle tamaño y peso. */
.ImageCardGrid-card-subtitle {
    font-size: 10px; /* A pedido del usuario; el nodo dice 9,5px. */
    font-weight: 700; /* Bold del nodo. */
    line-height: normal; /* Interlineado del nodo. */
    letter-spacing: 0.02em; /* 0,19px sobre 9,5px del nodo, en proporción. */
    color: var(--ImageCardGrid-subtitle-ink, #243746); /* Azul de marca del nodo, o negro elegido. */
}

/* --- Tres por fila elegido en el diseñador: solo cambia escritorio; en tablet ya son tres y en
   mobile dos, como con la opción de cuatro. --- */
.ImageCardGrid--three-per-row .ImageCardGrid-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas iguales. */
}

/* --- Alto de la imagen elegido en el diseñador ("Image height"). Sin elegir, los 190 px de
   siempre. Dos clases: le ganan al alto base del recuadro. --- */
.ImageCardGrid--image-medium .ImageCardGrid-card-media {
    height: 240px;
}

.ImageCardGrid--image-tall .ImageCardGrid-card-media {
    height: 300px;
}

.ImageCardGrid--image-extra-tall .ImageCardGrid-card-media {
    height: 360px;
}

/* --- "Full card" elegido en "Image height" (nodo 5264:54225 del Figma): la imagen ocupa TODA la
   tarjeta con el alto elegido; los textos del ítem, si tiene, van encima de la imagen, abajo, sobre
   un degradado oscuro y en blanco para que se lean. --- */
.ImageCardGrid--full-card .ImageCardGrid-card {
    position: relative; /* Ancla de los textos sobre la imagen. */
    height: var(--ImageCardGrid-full-height); /* Alto elegido. */
}

.ImageCardGrid--image-full-280 {
    --ImageCardGrid-full-height: 280px; /* Alto del nodo. */
}

.ImageCardGrid--image-full-360 {
    --ImageCardGrid-full-height: 360px;
}

.ImageCardGrid--image-full-440 {
    --ImageCardGrid-full-height: 440px;
}

    /* La imagen llena toda la tarjeta. */
    .ImageCardGrid--full-card .ImageCardGrid-card-media {
        flex: 1 1 auto; /* Todo el alto de la tarjeta. */
        height: auto; /* Lo da la tarjeta. */
        min-height: 0; /* Puede encogerse dentro de la tarjeta. */
    }

    /* Textos sobre la imagen, abajo, con degradado de legibilidad. */
    .ImageCardGrid--full-card .ImageCardGrid-card-body {
        position: absolute; /* Encima de la imagen. */
        inset: auto 0 0 0; /* Pegados abajo, a todo el ancho. */
        flex: none; /* Alto según sus textos. */
        max-height: 100%; /* Nunca más alto que la tarjeta. */
        overflow: hidden; /* Lo que no entra se recorta (los textos ya van con tope de renglones). */
        padding-top: 40px; /* Lugar para que el degradado arranque suave. */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%); /* Degradado. */
        color: #ffffff; /* Texto blanco. */
    }

        /* El enlace va con tres clases: le gana a sus estados (:hover, :visited...) que lo pintan azul. */
        .ImageCardGrid--full-card .ImageCardGrid-card-title,
        .ImageCardGrid--full-card .ImageCardGrid-card-subtitle,
        .ImageCardGrid--full-card .ImageCardGrid-card .ImageCardGrid-card-cta,
        .ImageCardGrid--full-card .ImageCardGrid-card-toggle {
            color: #ffffff; /* Sobre el degradado, siempre blancos. */
        }

        .ImageCardGrid--full-card .ImageCardGrid-card-text {
            color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
        }

/* --- Tamaño de la imagen por tarjeta ("Image size"): la imagen se ve completa, sin recortes,
   centrada y a esa escala; el espacio libre toma el fondo de la tarjeta. "Fill" es el de siempre. */
.ImageCardGrid-card--image-large {
    --ImageCardGrid-photo-scale: 0.85;
}

.ImageCardGrid-card--image-medium {
    --ImageCardGrid-photo-scale: 0.7;
}

.ImageCardGrid-card--image-small {
    --ImageCardGrid-photo-scale: 0.55;
}

    /* Sin proporción conocida: el marco se achica y la foto se ve entera dentro. */
    .ImageCardGrid-card[class*="ImageCardGrid-card--image-"] .ImageCardGrid-card-photo {
        width: calc(var(--ImageCardGrid-photo-scale) * 100%);
        height: calc(var(--ImageCardGrid-photo-scale) * 100%);
    }

    /* Con proporción conocida: el marco mide lo mismo que la foto, así la etiqueta queda pegada a ella. */
    .ImageCardGrid-card[class*="ImageCardGrid-card--image-"] .ImageCardGrid-card-photo--fitted {
        width: min(calc(var(--ImageCardGrid-photo-scale) * 100cqw), calc(var(--ImageCardGrid-photo-scale) * 100cqh * var(--ImageCardGrid-photo-ratio)));
        height: auto; /* Lo da la proporción. */
        aspect-ratio: var(--ImageCardGrid-photo-ratio); /* Proporción del archivo. */
    }

    .ImageCardGrid-card[class*="ImageCardGrid-card--image-"] .ImageCardGrid-card-image {
        object-fit: contain; /* Entera, sin recortes. */
    }

/* --- Sin borde elegido en el diseñador ("Show card border" apagado): la tarjeta pierde el
   contorno; conserva las esquinas y el fondo elegido. --- */
.ImageCardGrid--no-border .ImageCardGrid-card {
    border: 0;
}

/* --- Dos por fila elegido en el diseñador: se reparten todo el ancho en escritorio y tablet. --- */
/* Dos clases: le gana también a las tres columnas de tablet. */
.ImageCardGrid--two-per-row .ImageCardGrid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
}

/* --- Botón de leer más: mismo estilo que el de InfoCardsSection. --- */
.ImageCardGrid-card-toggle {
    align-self: flex-start; /* Solo el ancho de su texto. */
    margin: 0; /* La separación la da el gap. */
    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 del de InfoCardsSection. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado. */
    color: #243746; /* Azul de marca. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
    cursor: pointer; /* Mano de clic. */
}

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {

    .ImageCardGrid-card-cta {
        transition: none; /* Sin interpolación. */
    }

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

/* Abierta: los textos completos. */
.ImageCardGrid-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. */
}

.ImageCardGrid-card.is-frozen {
    align-self: start; /* No se estira con la abierta. */
    height: var(--card-height); /* Alto que tenía cerrada. */
}

.ImageCardGrid-card.is-expanded {
    align-self: start; /* Crece con sus textos. */
    min-height: var(--card-height); /* Nunca más baja que las demás. */
}

/* --- Imagen centrada con espacio a los costados, elegida en el diseñador. --- */
.ImageCardGrid--image-inset .ImageCardGrid-card-image {
    object-fit: contain; /* La imagen entera dentro de su espacio. */
}

.ImageCardGrid--image-inset .ImageCardGrid-card-media {
    padding-inline: 15%; /* Del ancho de la tarjeta; el alto sigue siendo el del recuadro. */
}

/* --- Fondo de color elegido en el diseñador, por zona de la tarjeta. --- */
.ImageCardGrid--gray {
    --ImageCardGrid-card-fill: #f8f7f5; /* Gris claro. */
}

.ImageCardGrid--cool-gray {
    --ImageCardGrid-card-fill: #f7f8f9; /* Gris azulado del nodo 4367:72555. */
}

.ImageCardGrid--fill-image .ImageCardGrid-card-media {
    background-color: var(--ImageCardGrid-card-fill); /* Recuadro de la imagen. */
}

.ImageCardGrid--fill-text .ImageCardGrid-card-body {
    background-color: var(--ImageCardGrid-card-fill); /* Caja de los textos, que llena el resto del alto. */
}

/* --- Tablet: hasta 1024px. Sin nodo: tres columnas. --- */
@media (max-width: 1024px) {

    .ImageCardGrid {
        padding: 32px 40px; /* Arriba y abajo, y lados de tablet. */
    }

    .ImageCardGrid-title {
        font-size: 22px; /* Entre el de PC y el de mobile. */
    }

    .ImageCardGrid-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas iguales. */
        gap: 16px; /* Separación de tablet. */
    }

    /* Alto de la imagen elegido: más contenido en tarjetas más angostas. */
    .ImageCardGrid--image-medium .ImageCardGrid-card-media {
        height: 220px;
    }

    .ImageCardGrid--image-tall .ImageCardGrid-card-media {
        height: 260px;
    }

    .ImageCardGrid--image-extra-tall .ImageCardGrid-card-media {
        height: 300px;
    }

    /* "Full card": tarjetas más angostas, altos más bajos. */
    .ImageCardGrid--image-full-280 {
        --ImageCardGrid-full-height: 260px;
    }

    .ImageCardGrid--image-full-360 {
        --ImageCardGrid-full-height: 320px;
    }

    .ImageCardGrid--image-full-440 {
        --ImageCardGrid-full-height: 360px;
    }
}

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

    .ImageCardGrid {
        padding: 24px 20px; /* Arriba y abajo, y lados de mobile. */
    }

    .ImageCardGrid-header {
        gap: 12px; /* Separación del nodo 3655:49087. */
    }

    /* La fila superior se deshace: sus piezas pasan a ser del encabezado. */
    .ImageCardGrid-header-top {
        display: contents; /* Sin caja propia. */
    }

    .ImageCardGrid-heading {
        flex: none; /* En la columna del encabezado mide su contenido. */
        gap: 12px; /* Misma separación que el encabezado. */
    }

    /* El enlace baja al final, debajo de la descripción, alineado a la izquierda. */
    .ImageCardGrid-header-link {
        order: 1; /* Después de todas las piezas. */
        margin-inline-start: 0; /* Pegado al borde de inicio. */
    }

    .ImageCardGrid-title {
        font-size: 20px; /* Tamaño del nodo 3655:49088. */
    }

    /* Descripción del nodo de mobile: más chica, semibold y gris. */
    .ImageCardGrid-description {
        margin-top: 0; /* La separación la da el gap de 12px. */
        font-size: 13px; /* Tamaño del nodo 3655:49089. */
        font-weight: 600; /* Semibold del diseño. */
        color: rgba(15, 15, 18, 0.4); /* Gris del diseño. */
    }

    .ImageCardGrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
        gap: 16px 12px; /* Filas y columnas del nodo 3655:49091. */
    }

    /* Con 3 por fila elegido en el diseñador, en mobile van dos, como con la opción de cuatro: dos
       clases, le gana a la regla de escritorio de tres por fila. */
    .ImageCardGrid--three-per-row .ImageCardGrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
    }

    /* Alto de la imagen elegido: en mobile, con dos tarjetas por fila, se queda cerca del alto de
       siempre (máximo 240 px) para no quedar desproporcionada. */
    .ImageCardGrid--image-medium .ImageCardGrid-card-media {
        height: 210px;
    }

    .ImageCardGrid--image-tall .ImageCardGrid-card-media {
        height: 225px;
    }

    .ImageCardGrid--image-extra-tall .ImageCardGrid-card-media {
        height: 240px;
    }

    /* "Full card": con dos tarjetas por fila, cerca del alto de siempre. */
    .ImageCardGrid--image-full-280 {
        --ImageCardGrid-full-height: 220px;
    }

    .ImageCardGrid--image-full-360 {
        --ImageCardGrid-full-height: 240px;
    }

    .ImageCardGrid--image-full-440 {
        --ImageCardGrid-full-height: 260px;
    }

    /* Con 2 por fila elegido en el diseñador, en mobile va una sola: dos clases, le gana a la regla de arriba. */
    .ImageCardGrid--two-per-row .ImageCardGrid-grid {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
    }
}