/* ImageDownloadCardGrid.css -- Encabezado y tarjetas con miniatura de recursos descargables.
   Nodo 3906:48115 (PC); tablet y mobile sin nodo. Medidas del estándar del proyecto: rellenos de
   TextImageSection, encabezado de InfoCardsSection, tarjeta de DownloadCardGrid, botón de
   DownloadablePosterGrid y flecha de LegalLinksSection. Tipografía base: site.css. */

/* --- Sección: fondo blanco a sangre completa. El relleno lateral va acá, no en el contenedor. --- */
.ImageDownloadCardGrid {
    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; /* Relleno estándar: arriba y abajo, y lados. */
}

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

/* --- Encabezado. --- */
.ImageDownloadCardGrid-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: 9px; /* Separación estándar del encabezado. */
    min-width: 0; /* No fuerza el ancho. */
}

/* Ninguna pieza pasa del ancho de su columna. */
.ImageDownloadCardGrid-header > *,
.ImageDownloadCardGrid-body > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.ImageDownloadCardGrid-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: flex-start; /* Cuadrado arriba si el texto parte renglón. */
    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. */
.ImageDownloadCardGrid-eyebrow-mark {
    flex-shrink: 0; /* No se comprime. */
    width: 7px; /* Lado del diseño. */
    height: 7px; /* Cuadrado. */
    margin-top: 6px; /* Centrado en el primer renglón: (14 x 1,35 - 7) / 2. */
    background-color: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Texto de la etiqueta: el estándar, ya igual en el nodo. */
.ImageDownloadCardGrid-eyebrow-text {
    min-width: 0; /* Cede ancho al cuadrado. */
    font-size: 14px; /* Tamaño estándar. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado estándar. */
    letter-spacing: 0.5px; /* Apertura estándar. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Título: toca los 36px del nodo al piso del rango de escritorio. */
.ImageDownloadCardGrid-title {
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(24px, 3vw, 36px); /* 36 / 1200 * 100. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado de titular. */
    letter-spacing: -0.02em; /* Cierre del diseño. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción de la sección: la estándar. */
.ImageDownloadCardGrid-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 16px; /* Tamaño estándar. */
    font-weight: 400; /* Regular. */
    line-height: 1.625; /* 26px sobre 16px, estándar. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Grilla: columnas iguales de 300px como mínimo, para que la miniatura no quede angosta. --- */
.ImageDownloadCardGrid-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); /* Las que entren, iguales; nunca más que la sección. */
    grid-auto-rows: auto; /* Cada fila mide su tarjeta más alta. */
    gap: 20px; /* 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. */
}

/* Tarjetas por fila elegidas en el diseñador: columnas fijas en escritorio y laptop. */
.ImageDownloadCardGrid--cols-1 .ImageDownloadCardGrid-grid {
    grid-template-columns: minmax(0, 1fr); /* Una por fila. */
}

.ImageDownloadCardGrid--cols-2 .ImageDownloadCardGrid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos por fila. */
}

.ImageDownloadCardGrid--cols-3 .ImageDownloadCardGrid-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres por fila. */
}

.ImageDownloadCardGrid--cols-4 .ImageDownloadCardGrid-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Cuatro por fila. */
}

/* --- Tarjeta: la de DownloadCardGrid, con la miniatura arriba y los textos en su caja. --- */
.ImageDownloadCardGrid-card {
    display: flex; /* Miniatura y caja de textos apiladas. */
    flex-direction: column; /* En vertical. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    box-sizing: border-box; /* El borde no suma ancho. */
    background-color: #ffffff; /* Blanco. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Contorno tenue estándar de tarjeta. */
    border-radius: 6px; /* Esquinas estándar de tarjeta. */
}

/* Franja de la miniatura: alto del nodo; recorta la foto a las esquinas de arriba. */
.ImageDownloadCardGrid-thumb {
    flex: none; /* No se comprime ni crece. */
    height: 150px; /* Alto del nodo. */
    overflow: hidden; /* Recorta la foto. */
    border-radius: 5px 5px 0 0; /* Radio de la tarjeta menos su borde. */
}

/* Miniatura: llena la franja y recorta lo que sobra. */
.ImageDownloadCardGrid-image {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 100%; /* Ancho de la tarjeta. */
    height: 100%; /* Alto de la franja. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
}

/* Caja de textos y botones. */
.ImageDownloadCardGrid-body {
    display: flex; /* Piezas apiladas. */
    flex: 1 1 auto; /* Ocupa el alto que deja la miniatura: los botones van al pie. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Cada pieza del ancho de su texto. */
    gap: 12px; /* Separación estándar de tarjeta. */
    min-width: 0; /* No fuerza el ancho. */
    padding: 22px 24px 24px; /* Relleno estándar de tarjeta. */
}

/* Título de la tarjeta: el nodo dice 17px semibold. */
.ImageDownloadCardGrid-card-title {
    margin: 0; /* La separación la da el gap. */
    font-size: 20px; /* Tamaño estándar de título de tarjeta. */
    font-weight: 700; /* Bold. */
    line-height: 1.3; /* Interlineado de título de tarjeta. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción: el nodo dice 14px #5c5e63. */
.ImageDownloadCardGrid-card-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 15px; /* Tamaño estándar de descripción de tarjeta. */
    font-weight: 400; /* Regular. */
    line-height: 23px; /* Interlineado estándar de descripción de tarjeta. */
    color: rgba(15, 15, 18, 0.6); /* Gris estándar de tarjeta. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción corta del recurso: la de DownloadCardGrid (nodo 4329:69063). */
.ImageDownloadCardGrid-card-short-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del nodo. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: #66666b; /* Gris del nodo. */
}

/* Recorte de la tarjeta cerrada: título y descripción corta en dos renglones, descripción en tres. */
.ImageDownloadCardGrid-card-title,
.ImageDownloadCardGrid-card-short-description,
.ImageDownloadCardGrid-card-description {
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones del título. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta con puntos suspensivos. */
    overflow-wrap: anywhere; /* Parte también dentro de una palabra si hace falta. */
}

.ImageDownloadCardGrid-card-description {
    -webkit-line-clamp: 3; /* Tope de renglones de la descripción. */
    line-clamp: 3; /* Ídem, versión estándar. */
}

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

/* Con una tarjeta abierta, las demás conservan el alto que tenían cerradas. */
.ImageDownloadCardGrid-card.is-frozen {
    align-self: start; /* No se estira con la abierta. */
    height: var(--card-height); /* Alto que tenía cerrada. */
}

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

/* --- Botón de leer más: el de ImageCardGrid e InfoCardsSection. --- */
.ImageDownloadCardGrid-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 estándar del botón de leer más. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    text-decoration: none; /* Sin subrayado en ningún estado. */
    cursor: pointer; /* Mano de clic. */
}

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

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

/* --- Botones de la tarjeta: enlace, archivo y video, uno al lado del otro al pie. --- */
.ImageDownloadCardGrid-buttons {
    display: flex; /* Botones en fila. */
    flex-flow: row wrap; /* El que no entra baja de renglón. */
    align-items: stretch; /* Los de un mismo renglón, del mismo alto. */
    gap: 8px; /* Separación entre botones, en las dos direcciones. */
    align-self: stretch; /* Todo el ancho de la tarjeta: el tope de cada botón se mide contra ella, no contra su propio texto. */
    margin-top: auto; /* Al pie: alinea los botones de una fila. */
    padding-top: 4px; /* Aire con el texto de arriba. */
}

/* --- Botón: el de DownloadablePosterGrid. Los cinco estados le ganan al a:hover de Bootstrap. --- */
.ImageDownloadCardGrid-button,
.ImageDownloadCardGrid-button:link,
.ImageDownloadCardGrid-button:visited,
.ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid-button:focus,
.ImageDownloadCardGrid-button:active {
    color: var(--ImageDownloadCardGrid-button-ink, #ffffff); /* Blanco o negro, elegido por el editor; sin elegir, blanco. */
    text-decoration: none; /* Nunca subrayado. */
}

.ImageDownloadCardGrid-button {
    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-inline-end: 4px; /* Reserva los 4px que crece en hover. */
    max-width: calc(100% - 4px); /* Nunca más que la tarjeta; deja libres los 4px del hover. */
    min-width: 0; /* Puede achicarse por debajo de su leyenda. */
    padding: 17px 32px; /* Rellenos de DownloadablePosterGrid. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    border-radius: 6px; /* Esquinas del botón estándar. */
    background-color: var(--ImageDownloadCardGrid-button-bg, #429cde); /* Color de la paleta; sin elegir, celeste del diseño. */
    font-size: 18px; /* Tamaño de DownloadablePosterGrid. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado ajustado. */
    text-align: left; /* La flecha queda al final del texto. */
    /* 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, margin-inline-end 0.2s ease-in-out, max-width 0.2s ease-in-out; /* Realce, flecha, reserva y tope al mismo ritmo. */
}

/* Leyenda: dos renglones como máximo con puntos suspensivos (estándar de enlaces). */
.ImageDownloadCardGrid-button-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. */
}

/* Realce estándar de botones del proyecto: el fondo es de la paleta y no se puede oscurecer. */
.ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid-button:focus-visible,
.ImageDownloadCardGrid-button:active {
    transform: translateZ(0) scale(1.05); /* Acercamiento sutil. */
}

/* La flecha se corre al abrir la separación, sin animar transform. */
.ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid-button:focus-visible {
    gap: 10px; /* Separación estándar en hover y foco. */
    margin-inline-end: 0; /* Cede la reserva: el ancho total no cambia. */
    max-width: 100%; /* El tope crece los 4px de la flecha: el texto no se corre. */
}

/* Anillo de foco visible. */
.ImageDownloadCardGrid-button:focus-visible {
    outline: 2px solid #429cde; /* Azul estándar del foco. */
    outline-offset: 2px; /* Separado del botón. */
}

/* Flecha estándar de LegalLinksSection. */
.ImageDownloadCardGrid-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Dirección elegida en el diseñador: el mismo dibujo girado; la derecha es la del estándar. --- */
.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-arrow {
    --ImageDownloadCardGrid-arrow-turn: 90deg; /* Hacia abajo. */
}

.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-arrow {
    --ImageDownloadCardGrid-arrow-turn: -90deg; /* Hacia arriba. */
}

.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-arrow {
    --ImageDownloadCardGrid-arrow-turn: 180deg; /* Hacia la izquierda. */
}

/* Girada: avanza hacia donde apunta. El translateX va después del giro, así sigue su dirección. */
.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-arrow {
    transform: rotate(var(--ImageDownloadCardGrid-arrow-turn)) translateX(0); /* Reposo. */
    transition: transform 0.2s ease-in-out; /* Mismo ritmo que la animación estándar. */
}

.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow {
    transform: rotate(var(--ImageDownloadCardGrid-arrow-turn)) translateX(4px); /* Los mismos 4px del estándar. */
}

/* Girada o sin flecha: la separación, la reserva y el tope no cambian; solo queda el realce. */
.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:focus-visible,
.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:focus-visible,
.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:focus-visible,
.ImageDownloadCardGrid--arrow-none .ImageDownloadCardGrid-button:hover,
.ImageDownloadCardGrid--arrow-none .ImageDownloadCardGrid-button:focus-visible {
    gap: 6px; /* Separación de reposo. */
    margin-inline-end: 4px; /* Reserva de reposo. */
    max-width: calc(100% - 4px); /* El tope de reposo. */
}

/* --- Paginación (BTCN-396): "Página 1 de 2 · ‹ Anterior | Siguiente ›", el mismo patrón de
   DocumentLibrary, LocationsGallery y ContactHelpSection. La muestra el script. --- */
.ImageDownloadCardGrid-grid > [hidden] {
    display: none; /* Tarjetas de las otras páginas: el atributo hidden le gana al display propio. */
}

.ImageDownloadCardGrid-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 el divisor. */
    border-top: 1px solid rgba(15, 15, 18, 0.1); /* Divisor. */
}

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

/* "Página 1 de 2": discreto. */
.ImageDownloadCardGrid-pager-status {
    min-width: 0; /* No desborda la fila. */
    margin: 0; /* La separación la da el gap. */
    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. */
    overflow-wrap: anywhere; /* Un texto largo sin espacios no se sale. */
}

.ImageDownloadCardGrid-pager-actions {
    display: flex; /* Leyendas en línea. */
    flex-wrap: wrap; /* Dos leyendas largas bajan en lugar de salirse. */
    align-items: center; /* Centradas entre sí. */
    justify-content: flex-end; /* Pegadas a la derecha. */
    gap: 12px; /* Separación entre leyendas. */
    min-width: 0; /* No desborda la fila. */
    margin-left: auto; /* Quedan a la derecha aunque la fila envuelva. */
}

/* Leyenda de texto, no botón: sin caja, sin contorno y sin fondo. */
.ImageDownloadCardGrid-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. */
    min-width: 0; /* El texto largo se parte en lugar de estirar el botón. */
    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. */
    text-align: start; /* Un texto que se parte queda alineado. */
    color: var(--color-cool-neutral-02); /* Azul de marca, el del botón de leer más. */
    cursor: pointer; /* Indica que es accionable. */
    transition: opacity 0.2s ease; /* Respuesta suave. */
}

    /* Divisor entre las dos leyendas cuando se ven las dos. */
    .ImageDownloadCardGrid-pager-button:not([hidden]) ~ .ImageDownloadCardGrid-pager-button:not([hidden]) {
        padding-left: 12px;
        border-left: 1px solid rgba(15, 15, 18, 0.2);
    }

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

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

    .ImageDownloadCardGrid-pager-button:focus-visible {
        outline: 2px solid #429cde; /* Anillo de foco del botón de leer más. */
        outline-offset: 2px; /* Separado del texto. */
        border-radius: 2px; /* Esquinas del anillo. */
    }

.ImageDownloadCardGrid-pager-text {
    min-width: 0; /* Puede partirse dentro del botón. */
    overflow-wrap: anywhere; /* Un texto largo sin espacios no se sale. */
}

.ImageDownloadCardGrid-pager-icon {
    flex: none; /* No se comprime con un texto largo. */
    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. */
}

/* Entrada animada de cada página (la pone el script): las tarjetas entran desde abajo, una tras otra. */
.ImageDownloadCardGrid-enter {
    animation: ImageDownloadCardGrid-enter 0.32s ease-out both; /* Entrada; "both" la oculta durante el retraso. */
    animation-delay: var(--ImageDownloadCardGrid-delay, 0ms); /* Escalonado que pone el script. */
}

@keyframes ImageDownloadCardGrid-enter {
    from {
        opacity: 0; /* Aparece... */
        transform: translateY(10px); /* ...desde abajo. */
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    .ImageDownloadCardGrid {
        padding: 32px 40px; /* Relleno estándar de tablet. */
    }

    .ImageDownloadCardGrid-container {
        gap: 20px; /* Separación de tablet. */
    }

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

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

    /* Por fila elegidas: hasta 2 en tablet; con 1 sigue siendo 1. */
    .ImageDownloadCardGrid--cols-2 .ImageDownloadCardGrid-grid,
    .ImageDownloadCardGrid--cols-3 .ImageDownloadCardGrid-grid,
    .ImageDownloadCardGrid--cols-4 .ImageDownloadCardGrid-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas. */
    }

    .ImageDownloadCardGrid-body {
        padding: 20px; /* Relleno estándar de tablet. */
    }
}

/* --- Mobile: hasta 500px. Una tarjeta por fila, a todo el ancho. --- */
@media (max-width: 500px) {

    .ImageDownloadCardGrid {
        padding: 24px 20px; /* Relleno estándar de mobile. */
    }

    .ImageDownloadCardGrid-title {
        font-size: 24px; /* Tamaño de mobile estándar. */
    }

    /* Una columna, elija lo que elija el editor. */
    .ImageDownloadCardGrid-grid,
    .ImageDownloadCardGrid--cols-2 .ImageDownloadCardGrid-grid,
    .ImageDownloadCardGrid--cols-3 .ImageDownloadCardGrid-grid,
    .ImageDownloadCardGrid--cols-4 .ImageDownloadCardGrid-grid {
        grid-template-columns: minmax(0, 1fr); /* Una por fila. */
    }

    .ImageDownloadCardGrid-card-title {
        font-size: 18px; /* Título de tarjeta de mobile. */
    }

    /* Botones apilados, cada uno del ancho de su texto. */
    .ImageDownloadCardGrid-buttons {
        flex-direction: column; /* En vertical. */
        align-items: flex-start; /* Sin estirarse al ancho de la tarjeta. */
    }

    /* Modal: casi todo el ancho del teléfono. */
    .ImageDownloadCardGrid-modal {
        width: calc(100vw - 32px); /* Aire de 16px por lado. */
    }

    .ImageDownloadCardGrid-media {
        --ImageDownloadCardGrid-play-size: 56px; /* Play más chico. */
    }

    .ImageDownloadCardGrid-progress {
        left: 12px; /* Margen de mobile. */
        right: 60px; /* Lugar para el sonido. */
        bottom: 22px; /* Centro del sonido. */
        gap: 8px; /* Separación de mobile. */
    }

    .ImageDownloadCardGrid-sound {
        right: 12px; /* Esquina de mobile. */
        bottom: 12px; /* Ídem. */
        width: 36px; /* Área de toque. */
        height: 36px; /* Cuadrada. */
    }
}

/* --- Modal del video: <dialog> nativo, con fondo, Esc y foco atrapado del navegador. --- */
.ImageDownloadCardGrid-modal {
    width: min(1100px, calc(100vw - 64px)); /* Ancho del video, con aire a los costados. */
    max-width: none; /* Sin el tope del navegador. */
    max-height: none; /* Ídem. */
    margin: auto; /* Centrado en la ventana. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: transparent; /* El fondo lo da el ::backdrop. */
    overflow: visible; /* El botón de cerrar sale por arriba. */
}

.ImageDownloadCardGrid-modal::backdrop {
    background-color: rgba(15, 15, 18, 0.8); /* Velo plano del sitio. */
}

/* Con el modal abierto la página de atrás no se desplaza. */
html:has(.ImageDownloadCardGrid-modal[open]) {
    overflow: hidden; /* Sin scroll de fondo. */
}

.ImageDownloadCardGrid-modal-frame {
    position: relative; /* Origen del botón de cerrar. */
}

/* Cerrar: arriba a la derecha, por fuera del video. */
.ImageDownloadCardGrid-modal-close {
    position: absolute; /* Sobre el marco. */
    right: 0; /* Pegado al borde derecho del video. */
    bottom: calc(100% + 12px); /* Por encima del video. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 40px; /* Área de toque cómoda. */
    height: 40px; /* Cuadrada. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.ImageDownloadCardGrid-modal-close svg {
    width: 18px; /* Ícono. */
    height: 18px; /* Cuadrado. */
}

.ImageDownloadCardGrid-modal-close:focus-visible,
.ImageDownloadCardGrid-start:focus-visible,
.ImageDownloadCardGrid-sound:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre el velo. */
    outline-offset: 2px; /* Separado del botón. */
}

/* --- Reproductor: los controles de IntroVideoText. --- */
.ImageDownloadCardGrid-media {
    --ImageDownloadCardGrid-play-size: 72px; /* Diámetro del play. */
    position: relative; /* Origen de los controles. */
    aspect-ratio: 16 / 9; /* Proporción del video. */
    overflow: hidden; /* Recorta al borde redondeado. */
    border-radius: 6px; /* Esquinas estándar. */
    background-color: #0f0f12; /* Fondo mientras carga y en las franjas del video. */
}

.ImageDownloadCardGrid-video {
    position: absolute; /* Ocupa el marco. */
    inset: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: contain; /* Se ve entero: no recorta los subtítulos quemados. */
    pointer-events: none; /* El clic lo toma el play o, si se puede pausar, el video. */
}

.ImageDownloadCardGrid-start {
    position: absolute; /* Cubre el marco. */
    inset: 0; /* De borde a borde. */
    z-index: 1; /* Sobre el video. */
    display: flex; /* Centra el play. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    background: none; /* Transparente. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.ImageDownloadCardGrid-play {
    display: flex; /* Centra el triángulo. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: var(--ImageDownloadCardGrid-play-size); /* Diámetro. */
    height: var(--ImageDownloadCardGrid-play-size); /* Círculo. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    transition: transform 0.2s ease-in-out; /* Realce. */
}

.ImageDownloadCardGrid-start:hover .ImageDownloadCardGrid-play,
.ImageDownloadCardGrid-start:focus-visible .ImageDownloadCardGrid-play {
    transform: scale(1.05); /* Realce estándar. */
}

.ImageDownloadCardGrid-play-icon {
    width: 12px; /* Triángulo. */
    height: 14px; /* Ídem. */
    margin-left: 3px; /* Centrado óptico del triángulo. */
    fill: var(--color-cool-neutral-02); /* Azul de marca. */
}

/* Sonido: abajo a la derecha, visible también mientras reproduce. */
.ImageDownloadCardGrid-sound {
    position: absolute; /* Sobre el video. */
    z-index: 2; /* Sobre el play. */
    right: 16px; /* Esquina. */
    bottom: 16px; /* Ídem. */
    display: flex; /* Centra el ícono. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 40px; /* Área de toque. */
    height: 40px; /* Cuadrada. */
    margin: 0; /* Sin el margen del navegador. */
    padding: 0; /* Sin el relleno del navegador. */
    border: 0; /* Sin el borde del navegador. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    color: var(--color-cool-neutral-02); /* Azul de marca. */
    cursor: pointer; /* Mano de clic. */
    appearance: none; /* Sin los estilos nativos de <button>. */
}

.ImageDownloadCardGrid-sound-icon {
    display: block; /* Sin hueco de línea. */
    width: 20px; /* Ícono. */
    height: 20px; /* Cuadrado. */
}

.ImageDownloadCardGrid-sound-icon--off,
.ImageDownloadCardGrid-media.is-muted .ImageDownloadCardGrid-sound-icon--on {
    display: none; /* Uno de los dos íconos según el estado. */
}

.ImageDownloadCardGrid-media.is-muted .ImageDownloadCardGrid-sound-icon--off {
    display: block; /* Silenciado. */
}

/* Progreso: abajo, a lo ancho; deja lugar al botón de sonido. */
.ImageDownloadCardGrid-progress {
    position: absolute; /* Sobre el video. */
    z-index: 2; /* Sobre el play. */
    left: 16px; /* Margen. */
    right: 72px; /* Lugar para el sonido. */
    bottom: 28px; /* A la altura del centro del sonido. */
    display: flex; /* Tiempo, barra y duración. */
    align-items: center; /* Centrados entre sí. */
    gap: 12px; /* Separación de IntroVideoText. */
}

/* Sin botón de sonido, la barra llega al borde. */
.ImageDownloadCardGrid-media:not(:has(.ImageDownloadCardGrid-sound)) .ImageDownloadCardGrid-progress {
    right: 16px; /* Margen. */
}

.ImageDownloadCardGrid-time {
    flex: none; /* No se comprime. */
    font-size: 13px; /* Tamaño de IntroVideoText. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado. */
    color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan. */
    white-space: nowrap; /* En un renglón. */
}

.ImageDownloadCardGrid-track {
    flex: 1 1 0; /* Ocupa lo que queda. */
    min-width: 1px; /* Puede achicarse. */
    height: 3px; /* Grosor de IntroVideoText. */
    border-radius: 6px; /* Extremos redondeados. */
    background-color: rgba(255, 255, 255, 0.35); /* Riel. */
    cursor: pointer; /* Salto por clic. */
}

.ImageDownloadCardGrid-track-fill {
    width: 0; /* Lo actualiza el script. */
    height: 100%; /* Alto del riel. */
    border-radius: inherit; /* Mismos extremos. */
    background-color: #ffffff; /* Avance. */
    pointer-events: none; /* El clic lo toma el riel. */
}

/* Reproduciendo: se va el play; si se puede pausar, el video toma el clic. */
.ImageDownloadCardGrid-media.is-playing .ImageDownloadCardGrid-start {
    display: none; /* Sin play. */
}

.ImageDownloadCardGrid-media[data-video-pausable="true"].is-playing .ImageDownloadCardGrid-video {
    pointer-events: auto; /* Pausa por clic. */
    cursor: pointer; /* Mano de clic. */
}


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

    .ImageDownloadCardGrid-button,
    .ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid-pager-button {
        transition: none; /* Sin interpolación. */
    }

    .ImageDownloadCardGrid-enter {
        animation: none; /* Las tarjetas de la página aparecen sin entrada. */
    }

    /* Sin realce. */
    .ImageDownloadCardGrid-button:hover,
    .ImageDownloadCardGrid-button:focus-visible,
    .ImageDownloadCardGrid-button:active {
        transform: translateZ(0); /* Queda en su tamaño. */
    }

    /* La flecha girada tampoco avanza. */
    .ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-down .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-up .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:hover .ImageDownloadCardGrid-arrow,
    .ImageDownloadCardGrid--arrow-left .ImageDownloadCardGrid-button:focus-visible .ImageDownloadCardGrid-arrow {
        transform: rotate(var(--ImageDownloadCardGrid-arrow-turn)) translateX(0); /* Queda en reposo. */
    }

    .ImageDownloadCardGrid-button:hover,
    .ImageDownloadCardGrid-button:focus-visible {
        gap: 6px; /* La flecha no se corre. */
        margin-inline-end: 4px; /* Reserva de reposo. */
        max-width: calc(100% - 4px); /* El tope no crece. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */