/* LatestMediaMosaic.css — Mosaico irregular de novedades. Nodos 1535:27276 (PC), 1535:27606
   (tablet), 1535:27930 (mobile); prototipo 1724:33797.
   EL NODO DE TABLET ES EL DE ESCRITORIO POR 0,6 EXACTO: por eso no tiene reglas de layout propias.
   Ninguna medida se copia en px: todo va como proporción de su mesa. NO HAY JAVASCRIPT. */

/* --- Sección: fondo blanco y variables compartidas por todo el widget. --- */
.LatestMediaMosaic {
    --LatestMediaMosaic-pad: min(3.75vw, 48px); /* Separación con el borde de la ventana. */
    --LatestMediaMosaic-gap: min(1.25vw, 16px); /* Separación entre tarjetas; mobile la pisa. */
    --LatestMediaMosaic-card-pad: min(1.5625vw, 20px); /* Aire del contenido contra el borde. */
    --LatestMediaMosaic-card-pad-top: min(1.25vw, 16px); /* Aire de la etiqueta superior. */
    --LatestMediaMosaic-motion: 350ms ease-out; /* Duración y curva del prototipo. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding: var(--LatestMediaMosaic-pad); /* Relleno en los cuatro lados. */
}

/* Contenido centrado dentro del techo del sitio. */
.LatestMediaMosaic-container {
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    display: flex; /* Apila encabezado y mosaico. */
    flex-direction: column; /* En columna. */
    gap: min(2.1875vw, 28px); /* Separación entre el encabezado y el mosaico. */
}

/* --- Encabezado: etiqueta y título. --- */
.LatestMediaMosaic-header {
    display: flex; /* Apila los dos textos. */
    flex-direction: column; /* En columna. */
    gap: min(0.625vw, 8px); /* Separación entre los dos. */
}

/* Etiqueta sobre el título. */
.LatestMediaMosaic-eyebrow {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    display: flex; /* Cuadradito y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 8px; /* Separación entre los dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 1.17vw, 14px); /* Tamaño del nodo, con piso legible. */
    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; /* Las mayúsculas las pone el CSS, no el editor. */
    color: #54565b; /* Gris del diseño. */
}

/* Cuadradito que precede a la etiqueta. */
.LatestMediaMosaic-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. No escala: se volvería invisible. */
    height: 7px; /* Cuadrado. */
    background-color: #429cde; /* Celeste del diseño. */
}

/* Título de la sección. */
.LatestMediaMosaic-title {
    margin: 0; /* Quita el margen propio del título. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(20px, 3vw, 36px); /* 36px del nodo de PC, tocando el techo a 1200px. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Mosaico: una pila de BLOQUES de cinco tarjetas. El diseño muestra un mosaico irregular de
   cinco piezas y con más tarjetas se repite tal cual. --- */
.LatestMediaMosaic-mosaic {
    container-type: inline-size; /* Habilita cqw: el bloque incompleto calcula el alto de una fila de tres. */
    display: flex; /* Apila los bloques. */
    flex-direction: column; /* En columna. */
    gap: var(--LatestMediaMosaic-gap); /* Separación entre bloques. */
}

/* Un bloque de cinco tarjetas. */
.LatestMediaMosaic-block {
    --LatestMediaMosaic-col: calc((100cqw - (2 * var(--LatestMediaMosaic-gap))) / 3); /* Ancho de una columna. */
    --LatestMediaMosaic-tall: calc(var(--LatestMediaMosaic-col) * 260 / 384); /* Alto alto del diseño. */
    --LatestMediaMosaic-short: calc(var(--LatestMediaMosaic-col) * 190 / 384); /* Alto bajo del diseño. */
    display: grid; /* Cuadrícula de tres columnas. */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales. */
    gap: var(--LatestMediaMosaic-gap); /* Separación entre tarjetas. */
}

/* Columna 1, arriba: tarjeta alta. */
.LatestMediaMosaic-block:not(.LatestMediaMosaic-block--partial) > .LatestMediaMosaic-card:nth-child(1) {
    grid-column: 1; /* Primera columna. */
    grid-row: 1; /* Primera fila. */
    align-self: start; /* Pegada arriba. */
    aspect-ratio: 384 / 260; /* Proporción alta del diseño. */
}

/* Columna 1, abajo: tarjeta baja. */
.LatestMediaMosaic-block:not(.LatestMediaMosaic-block--partial) > .LatestMediaMosaic-card:nth-child(2) {
    grid-column: 1; /* Primera columna. */
    grid-row: 2; /* Segunda fila. */
    align-self: start; /* Pegada arriba. */
    aspect-ratio: 384 / 190; /* Proporción baja del diseño. */
}

/* Columna 2, arriba: tarjeta baja. */
.LatestMediaMosaic-block:not(.LatestMediaMosaic-block--partial) > .LatestMediaMosaic-card:nth-child(3) {
    grid-column: 2; /* Segunda columna. */
    grid-row: 1; /* Primera fila. */
    align-self: start; /* Pegada arriba. */
    aspect-ratio: 384 / 190; /* Proporción baja del diseño. */
}

/* Columna 2, abajo: tarjeta alta ANCLADA AL FONDO. Es lo que da el ritmo quebrado al mosaico. */
.LatestMediaMosaic-block:not(.LatestMediaMosaic-block--partial) > .LatestMediaMosaic-card:nth-child(4) {
    grid-column: 2; /* Segunda columna. */
    grid-row: 1 / span 2; /* Cruza las dos filas... */
    align-self: end; /* ...y se ancla al fondo. */
    aspect-ratio: 384 / 260; /* Proporción alta del diseño. */
}

/* Columna 3: una sola tarjeta a alto completo. */
.LatestMediaMosaic-block:not(.LatestMediaMosaic-block--partial) > .LatestMediaMosaic-card:nth-child(5) {
    grid-column: 3; /* Tercera columna. */
    grid-row: 1 / span 2; /* Cruza las dos filas. */
    align-self: stretch; /* Ocupa el alto completo del bloque. */
}

/* --- Bloque incompleto: las tarjetas que sobraron del último grupo de cinco. SE REPARTEN EL ANCHO
   COMPLETO en una fila y conservan el alto que les tocaba por posición, calculado sobre el ancho de
   UNA columna y no sobre su ancho estirado. --- */
.LatestMediaMosaic-block--partial {
    grid-template-columns: repeat(var(--LatestMediaMosaic-count), 1fr); /* Tantas columnas como tarjetas. */
}

/* Bloque de una tarjeta. */
.LatestMediaMosaic-block--n1 {
    --LatestMediaMosaic-count: 1; /* Una columna. */
}

/* Bloque de dos tarjetas. */
.LatestMediaMosaic-block--n2 {
    --LatestMediaMosaic-count: 2; /* Dos columnas. */
}

/* Bloque de tres tarjetas. */
.LatestMediaMosaic-block--n3 {
    --LatestMediaMosaic-count: 3; /* Tres columnas. */
}

/* Bloque de cuatro tarjetas. */
.LatestMediaMosaic-block--n4 {
    --LatestMediaMosaic-count: 4; /* Cuatro columnas. */
}

/* Tarjetas del bloque incompleto: reserva sin container queries. */
.LatestMediaMosaic-block--partial > .LatestMediaMosaic-card {
    grid-row: 1; /* Todas en la misma fila. */
    align-self: start; /* Pegadas arriba. */
    aspect-ratio: 384 / 260; /* Proporción alta, como reserva. */
}

/* Las posiciones 2 y 3 son las bajas del mosaico. */
.LatestMediaMosaic-block--partial > .LatestMediaMosaic-card:nth-child(2),
.LatestMediaMosaic-block--partial > .LatestMediaMosaic-card:nth-child(3) {
    aspect-ratio: 384 / 190; /* Proporción baja, como reserva. */
}

/* Donde las unidades cqw existen, el alto se calcula exacto. */
@supports (container-type: inline-size) {
    /* Tarjetas altas del bloque incompleto. */
    .LatestMediaMosaic-block--partial > .LatestMediaMosaic-card {
        aspect-ratio: auto; /* Suelta la reserva. */
        height: var(--LatestMediaMosaic-tall); /* Alto exacto, sin depender del ancho estirado. */
    }

    /* EL aspect-ratio:auto SE REPITE ACÁ Y NO ALCANZA CON EL DE ARRIBA: esa regla tiene menos
       especificidad que la reserva de las posiciones 2 y 3, y con la proporción puesta y un alto ya
       definido el navegador le calcula el ANCHO a la tarjeta y deja un hueco a la derecha. */
    .LatestMediaMosaic-block--partial > .LatestMediaMosaic-card:nth-child(2),
    .LatestMediaMosaic-block--partial > .LatestMediaMosaic-card:nth-child(3) {
        aspect-ratio: auto; /* Suelta la reserva. */
        height: var(--LatestMediaMosaic-short); /* Alto exacto de las posiciones bajas. */
    }
}

/* --- Tarjeta del mosaico. --- */
.LatestMediaMosaic-card {
    position: relative; /* Origen de la foto, el degradado y el contenido. */
    display: block; /* Caja propia. */
    overflow: hidden; /* Recorta la imagen ampliada. */
    border-radius: 14px; /* Radio del nodo de PC; tablet y mobile lo bajan a 6px. */
    /* SIN COLOR DE FONDO PROPIO: con uno, el alto fraccionario de la grilla dejaba asomar una línea
       de ese color en los bordes y en las esquinas redondeadas. */
    background-color: transparent;
    min-width: 0; /* Es ítem de grilla: sin esto una palabra larga le ensancha la columna. */
}

/* LOS CINCO ESTADOS DEL ENLACE VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y
   pintaría la tarjeta azul y subrayada. */
.LatestMediaMosaic-card:link,
.LatestMediaMosaic-card:visited,
.LatestMediaMosaic-card:hover,
.LatestMediaMosaic-card:focus,
.LatestMediaMosaic-card:active {
    color: #ffffff; /* Blanco en los cinco estados. */
    text-decoration: none; /* Sin subrayado en ninguno. */
}

/* EL ANILLO DE FOCO VA BLANCO Y HACIA ADENTRO: con un color oscuro y hacia afuera se dibujaba un
   recuadro negro alrededor de la tarjeta. */
.LatestMediaMosaic-card:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre la foto. */
    outline-offset: -3px; /* Hacia adentro, para no salirse del recorte. */
}

/* Foto de la tarjeta. DESBORDA UN PÍXEL POR LADO A PROPÓSITO: el alto es fraccionario y una foto de
   100 % exacto deja medio píxel sin pintar por el antialias del recorte. */
.LatestMediaMosaic-image {
    position: absolute; /* Detrás de las capas. */
    top: -1px; /* El píxel de desborde. */
    left: -1px; /* Ídem. */
    width: calc(100% + 2px); /* Compensa el desborde de los dos lados. */
    height: calc(100% + 2px); /* Ídem. */
    object-fit: cover; /* Llena la tarjeta sin deformarse. */
    object-position: center; /* Conserva el centro al recortar. */
    display: block; /* Quita el hueco de renglón que deja un img en línea. */
    transition: transform var(--LatestMediaMosaic-motion); /* Suaviza el zoom. */
}

/* Degradado de legibilidad del nodo. */
.LatestMediaMosaic-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tarjeta entera. */
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
}

/* Velo de color del hover. Se emite siempre y se anima la opacidad: es más barato que insertar un
   elemento, y en táctil nunca llega a verse. */
.LatestMediaMosaic-veil {
    position: absolute; /* Sobre el degradado. */
    inset: 0; /* Cubre la tarjeta entera. */
    background-color: var(--color-cool-neutral-02); /* Token de la paleta. */
    opacity: 0; /* Invisible en reposo. */
    transition: opacity var(--LatestMediaMosaic-motion); /* Suaviza la aparición. */
}

/* --- Contenido de la tarjeta. --- */

/* Bloque superior: etiqueta y llamado a la acción. */
.LatestMediaMosaic-top {
    position: absolute; /* Sobre las capas. */
    top: var(--LatestMediaMosaic-card-pad-top); /* Aire con el borde de arriba. */
    left: var(--LatestMediaMosaic-card-pad); /* Aire con el borde izquierdo. */
    right: var(--LatestMediaMosaic-card-pad); /* Aire con el borde derecho. */
    display: flex; /* Apila etiqueta y CTA. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Alineados a la izquierda. */
    gap: min(0.47vw, 6px); /* Separación entre los dos. */
}

/* Etiqueta de la tarjeta. */
.LatestMediaMosaic-card-eyebrow {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(8px, 1.17vw, 14px); /* 14px en PC y 8px en tablet; mobile lo pisa con 10px. */
    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: rgba(255, 255, 255, 0.92); /* Blanco casi pleno. */
}

/* Llamado a la acción del hover. VA DEBAJO DE LA ETIQUETA cuando la tarjeta la tiene y en su lugar
   cuando no: en el prototipo los dos ocupan la misma esquina. Lo resuelve el flex del contenedor. */
.LatestMediaMosaic-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: min(0.55vw, 7px); /* Separación entre las dos. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(11px, 1.25vw, 15px); /* Tamaño del prototipo, con piso legible. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: #ffffff; /* Blanco sobre la foto. */
    opacity: 0; /* Invisible en reposo. */
    transform: translateY(-6px); /* Entra desde arriba. */
    transition: opacity var(--LatestMediaMosaic-motion), transform var(--LatestMediaMosaic-motion); /* Suaviza la entrada. */
}

/* LOS ENLACES DEL SITIO NO VAN SUBRAYADOS: el prototipo lo dibuja y NO se replica. */
.LatestMediaMosaic-cta-text {
    text-decoration: none; /* Sin subrayado. */
}

/* Envoltorio de la flecha. */
.LatestMediaMosaic-arrow {
    display: inline-flex; /* Se ciñe al SVG. */
    align-items: center; /* Centrada con la leyenda. */
    transition: transform 200ms ease; /* Avanza con el hover de la tarjeta. */
}

/* Trazo de la flecha. */
.LatestMediaMosaic-arrow-icon {
    display: block; /* Caja propia. */
    width: 14px; /* Tamaño del diseño. */
    height: 14px; /* Cuadrada. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke: currentColor; /* Toma el color del texto que la contiene. */
    stroke-width: 2; /* Grosor del trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Bloque inferior: título y subtítulo. */
.LatestMediaMosaic-body {
    position: absolute; /* Anclado al pie de la tarjeta. */
    left: var(--LatestMediaMosaic-card-pad); /* Aire con el borde izquierdo. */
    right: var(--LatestMediaMosaic-card-pad); /* Aire con el borde derecho. */
    bottom: var(--LatestMediaMosaic-card-pad); /* Aire con el borde inferior. */
    display: flex; /* Apila los dos textos. */
    flex-direction: column; /* En columna. */
}

/* Título de la tarjeta. */
.LatestMediaMosaic-card-title {
    margin: 0; /* Es ítem de flex: el margen del h3 descuadraría el bloque contra el borde. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: clamp(17px, 3vw, 36px); /* 36px en PC, 22px en tablet y 17px en mobile. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.05; /* Interlineado apretado de titular. */
    letter-spacing: -0.5px; /* Compactado del nodo. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* Subtítulo de la tarjeta. */
.LatestMediaMosaic-card-subtitle {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-family: var(--font-brand); /* Pila de marca. */
    /* 20px en PC y 12px en tablet. Mobile lo pisa con 17px, que es MÁS grande que el de tablet y
       por eso no puede salir del mismo clamp. */
    font-size: clamp(12px, 1.67vw, 20px);
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* --- Hover: zoom, velo y entrada del CTA. VA DENTRO DE @media (hover: hover) porque los nodos de
   tablet y mobile no traen ningún estado de hover. El foco de teclado repite el estado FUERA. --- */
@media (hover: hover) {
    /* Zoom de la foto. */
    .LatestMediaMosaic-card:hover .LatestMediaMosaic-image {
        transform: scale(1.045); /* El mismo 4,5 % en los dos ejes del prototipo. */
    }

    /* Aparece el velo de color. */
    .LatestMediaMosaic-card:hover .LatestMediaMosaic-veil {
        opacity: 0.28; /* Velo tenue. */
    }

    /* Entra el llamado a la acción. */
    .LatestMediaMosaic-card:hover .LatestMediaMosaic-cta {
        opacity: 1; /* Visible. */
        transform: translateY(0); /* En su lugar. */
    }

    /* La flecha avanza. */
    .LatestMediaMosaic-card:hover .LatestMediaMosaic-arrow {
        transform: translateX(3px); /* Tres píxeles a la derecha. */
    }
}

/* Foco de teclado: zoom de la foto. */
.LatestMediaMosaic-card:focus-visible .LatestMediaMosaic-image {
    transform: scale(1.045); /* Igual que el hover. */
}

/* Foco de teclado: velo de color. */
.LatestMediaMosaic-card:focus-visible .LatestMediaMosaic-veil {
    opacity: 0.28; /* Igual que el hover. */
}

/* Foco de teclado: entra el llamado a la acción. */
.LatestMediaMosaic-card:focus-visible .LatestMediaMosaic-cta {
    opacity: 1; /* Visible. */
    transform: translateY(0); /* En su lugar. */
}

/* --- Tablet: hasta 1024px. El nodo es el de escritorio por 0,6 exacto, así que el layout lo
   resuelven las proporciones del bloque base. Lo único propio es el radio. --- */
@media (max-width: 1024px) {
    .LatestMediaMosaic-card {
        border-radius: 6px; /* Radio del nodo de tablet. */
    }
}

/* --- Mobile: hasta 500px. Acá el diseño SÍ cambia: una sola columna, todas las tarjetas del mismo
   alto y separación propia. Las reglas repiten la profundidad de selector de las de arriba para
   poder pisarlas. --- */
@media (max-width: 500px) {
    .LatestMediaMosaic {
        --LatestMediaMosaic-gap: 14px; /* Separación propia de este rango. */
        --LatestMediaMosaic-card-pad: 18px; /* Aire propio del contenido. */
        --LatestMediaMosaic-card-pad-top: 14px; /* Aire propio de la etiqueta. */
    }

    /* Una sola columna. */
    .LatestMediaMosaic-mosaic .LatestMediaMosaic-block {
        grid-template-columns: 1fr; /* Columna única. */
    }

    /* Todas las tarjetas iguales: se anula la colocación del mosaico. */
    .LatestMediaMosaic-mosaic .LatestMediaMosaic-block > .LatestMediaMosaic-card:nth-child(n) {
        grid-column: auto; /* Sin columna fija. */
        grid-row: auto; /* Sin fila fija. */
        align-self: stretch; /* Ocupa su celda. */
        height: auto; /* El alto lo da la proporción. */
        aspect-ratio: 347 / 200; /* Todas del mismo alto, según el nodo. */
    }

    .LatestMediaMosaic-card-eyebrow {
        font-size: 10px; /* Tamaño del nodo de mobile. */
    }

    .LatestMediaMosaic-card-subtitle {
        font-size: 17px; /* Tamaño del nodo de mobile. */
    }
}

/* --- Movimiento reducido: sin zoom ni desplazamientos. El velo y el CTA se siguen mostrando, pero
   sin transición: son información, no decoración. --- */
@media (prefers-reduced-motion: reduce) {
    .LatestMediaMosaic-image,
    .LatestMediaMosaic-veil,
    .LatestMediaMosaic-cta,
    .LatestMediaMosaic-arrow {
        transition: none; /* Sin interpolación. */
    }

    .LatestMediaMosaic-cta {
        transform: none; /* Aparece en su lugar, sin entrar desde arriba. */
    }

    .LatestMediaMosaic-card:hover .LatestMediaMosaic-image,
    .LatestMediaMosaic-card:focus-visible .LatestMediaMosaic-image {
        transform: none; /* La foto no crece. */
    }

    .LatestMediaMosaic-card:hover .LatestMediaMosaic-arrow {
        transform: none; /* La flecha no avanza. */
    }
}