/* DownloadCardGrid.css -- Encabezado y tarjetas de recursos descargables. Nodos 3567:12758 (PC) y
   3567:12850 (mobile); tablet sin nodo. Medidas del estándar del proyecto: rellenos de
   TextImageSection, encabezado de InfoCardsSection, tarjeta de InfoCardsSection con el contorno
   estándar 0.14, botón de leer más de ImageCardGrid 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. --- */
.DownloadCardGrid {
    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. */
.DownloadCardGrid-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. --- */
.DownloadCardGrid-header {
    display: flex; /* Eyebrow y título 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. */
.DownloadCardGrid-header > *,
.DownloadCardGrid-card > * {
    max-width: 100%; /* Techo del ancho de la columna. */
}

/* Etiqueta con el cuadrado de marca. */
.DownloadCardGrid-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. */
.DownloadCardGrid-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. */
.DownloadCardGrid-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 estándar al piso del rango de escritorio; el nodo dice 42px. */
.DownloadCardGrid-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. */
}

/* --- Grilla: columnas iguales de 220px como mínimo; con 3 tarjetas, tres columnas. --- */
.DownloadCardGrid-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Las que entren, iguales. */
    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. */
.DownloadCardGrid--cols-1 .DownloadCardGrid-grid {
    grid-template-columns: minmax(0, 1fr); /* Una por fila. */
}

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

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

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

/* --- Tarjeta: caja de InfoCardsSection con el contorno estándar. --- */
.DownloadCardGrid-card {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* El enlace solo del ancho de su texto. */
    gap: 12px; /* Separación estándar de tarjeta. */
    min-width: 0; /* No fuerza el ancho de la columna. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    padding: 22px 24px 24px; /* Relleno estándar de tarjeta. */
    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. */
}

/* Ícono de la librería: entra completo en el cuadro de 38px del nodo. */
.DownloadCardGrid-icon {
    display: block; /* Sin el hueco de línea de un img en línea. */
    width: 38px; /* Lado del nodo. */
    height: 38px; /* Cuadrado. */
    object-fit: contain; /* Sin recortar ni deformar. */
    object-position: left center; /* Alineado al texto. */
}

/* Título de la tarjeta: el nodo dice 18px. */
.DownloadCardGrid-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 12,5px. */
.DownloadCardGrid-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: tipografía del nodo 4329:69063, pedida tal cual. */
.DownloadCardGrid-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. */
.DownloadCardGrid-card-title,
.DownloadCardGrid-card-short-description,
.DownloadCardGrid-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. */
}

.DownloadCardGrid-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. */
.DownloadCardGrid-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. */
.DownloadCardGrid-card.is-frozen {
    align-self: start; /* No se estira con la abierta. */
    height: var(--card-height); /* Alto que tenía cerrada. */
}

.DownloadCardGrid-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. --- */
.DownloadCardGrid-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. */
}

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

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

/* --- Enlaces de la tarjeta: enlace, archivo y video, apilados al pie. --- */
.DownloadCardGrid-links {
    display: flex; /* Enlaces apilados. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Cada uno del ancho de su texto. */
    gap: 6px; /* Separación entre enlaces. */
    align-self: stretch; /* Todo el ancho de la tarjeta: el tope de cada enlace se mide contra ella, no contra su propio texto. */
    margin-top: auto; /* Al pie: alinea los enlaces de una fila. */
    padding-top: 4px; /* Aire con el texto de arriba. */
}

/* --- Enlace: los cinco estados le ganan al a:hover de Bootstrap; nunca subrayado. --- */
.DownloadCardGrid-link,
.DownloadCardGrid-link:link,
.DownloadCardGrid-link:visited,
.DownloadCardGrid-link:hover,
.DownloadCardGrid-link:focus,
.DownloadCardGrid-link:active {
    color: var(--color-cool-neutral-02); /* Azul de marca del nodo. */
    text-decoration: none; /* Nunca subrayado. */
}

/* Leyenda y flecha con la animación estándar; el nodo dice 12,5px. */
.DownloadCardGrid-link {
    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. */
    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. */
    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; /* Flecha y tope al mismo ritmo. */
}

/* La flecha se corre al abrir la separación, sin animar transform. */
.DownloadCardGrid-link:hover,
.DownloadCardGrid-link:focus-visible {
    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. */
}

/* Anillo de foco visible. */
.DownloadCardGrid-link:focus-visible {
    outline: 2px solid #429cde; /* Azul estándar del foco. */
    outline-offset: 2px; /* Separado del texto. */
    border-radius: 2px; /* Esquinas del anillo. */
}

/* Leyenda: dos renglones como máximo con puntos suspensivos (estándar de enlaces). */
.DownloadCardGrid-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. */
.DownloadCardGrid-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 enlace. */
    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. --- */
.DownloadCardGrid--arrow-down .DownloadCardGrid-arrow {
    --DownloadCardGrid-arrow-turn: 90deg; /* Hacia abajo. */
}

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

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

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

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

/* Sin flecha: en hover el tope no crece, o la leyenda de dos renglones se reacomodaría. */
.DownloadCardGrid--arrow-none .DownloadCardGrid-link:hover,
.DownloadCardGrid--arrow-none .DownloadCardGrid-link:focus-visible {
    max-width: min(calc(100% - 4px), 280px); /* El tope de reposo. */
}

/* Girada, la separación no se abre: el avance lo hace la flecha sola. */
.DownloadCardGrid--arrow-down .DownloadCardGrid-link:hover,
.DownloadCardGrid--arrow-down .DownloadCardGrid-link:focus-visible,
.DownloadCardGrid--arrow-up .DownloadCardGrid-link:hover,
.DownloadCardGrid--arrow-up .DownloadCardGrid-link:focus-visible,
.DownloadCardGrid--arrow-left .DownloadCardGrid-link:hover,
.DownloadCardGrid--arrow-left .DownloadCardGrid-link:focus-visible {
    gap: 6px; /* Separación de reposo. */
    max-width: min(calc(100% - 4px), 280px); /* El tope no crece. */
}

/* --- Tablet: hasta 1024px. Sin nodo: tres columnas, del ancho de las tarjetas de mobile. --- */
@media (max-width: 1024px) {

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

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

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

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

    /* Por fila elegidas: hasta 3 en tablet. */
    .DownloadCardGrid--cols-3 .DownloadCardGrid-grid,
    .DownloadCardGrid--cols-4 .DownloadCardGrid-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres columnas. */
    }

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

/* --- Mobile: hasta 500px. Dos columnas como el nodo; la última sola ocupa la fila. --- */
@media (max-width: 500px) {

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

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

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

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

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

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

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

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

    /* La tarjeta que queda sola en la última fila toma el ancho completo, como el nodo. */
    .DownloadCardGrid-card:last-child:nth-child(odd) {
        grid-column: 1 / -1; /* De lado a lado. */
    }

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

/* --- Modal del video: <dialog> nativo, con fondo, Esc y foco atrapado del navegador. --- */
.DownloadCardGrid-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. */
}

.DownloadCardGrid-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(.DownloadCardGrid-modal[open]) {
    overflow: hidden; /* Sin scroll de fondo. */
}

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

/* Cerrar: arriba a la derecha, por fuera del video. */
.DownloadCardGrid-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>. */
}

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

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

/* --- Reproductor: los controles de IntroVideoText. --- */
.DownloadCardGrid-media {
    --DownloadCardGrid-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. */
}

.DownloadCardGrid-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. */
}

.DownloadCardGrid-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>. */
}

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

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

.DownloadCardGrid-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. */
.DownloadCardGrid-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>. */
}

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

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

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

/* Progreso: abajo, a lo ancho; deja lugar al botón de sonido. */
.DownloadCardGrid-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. */
.DownloadCardGrid-media:not(:has(.DownloadCardGrid-sound)) .DownloadCardGrid-progress {
    right: 16px; /* Margen. */
}

.DownloadCardGrid-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. */
}

.DownloadCardGrid-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. */
}

.DownloadCardGrid-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. */
.DownloadCardGrid-media.is-playing .DownloadCardGrid-start {
    display: none; /* Sin play. */
}

.DownloadCardGrid-media[data-video-pausable="true"].is-playing .DownloadCardGrid-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) {

    .DownloadCardGrid-link,
    .DownloadCardGrid--arrow-down .DownloadCardGrid-arrow,
    .DownloadCardGrid--arrow-up .DownloadCardGrid-arrow,
    .DownloadCardGrid--arrow-left .DownloadCardGrid-arrow {
        transition: none; /* Sin interpolación. */
    }

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

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

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