/* PhotoMosaicGrid.css — Mosaico de fotos a sangre completa. Widget general. Nodos 820:36659 (PC),
   820:38277 (tablet), 820:38147 (mobile). Tipografía: site.css.
   NO lleva --container-max-width en ningún rango: las fotos llegan al borde real de la ventana. */

/* --- Sección: contenedor del mosaico. --- */
.PhotoMosaicGrid {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    overflow: hidden; /* Recorta lo que sobresalga del mosaico. */
}

/* Grilla base: SIEMPRE 6 columnas. Las reglas --count-N solo cambian cuántas ocupa cada tile, así
   una sola base resuelve los seis acomodos. */
.PhotoMosaicGrid-grid {
    position: relative; /* Contexto de apilamiento del mosaico. */
    display: grid; /* Cuadrícula. */
    grid-template-columns: repeat(6, 1fr); /* Seis columnas iguales. */
}

/* --- Tile: una foto del mosaico. --- */
.PhotoMosaicGrid-tile {
    position: relative; /* Origen de la imagen, el duotono y el filete. */
    overflow: hidden; /* Recorta la imagen ampliada. */
    background-color: #e5e7eb; /* Respaldo si la imagen no trae URL válida. */
    height: clamp(220px, 21.875vw, 340px); /* Proporción del diseño (280/1280): con alto fijo se achatan. */
    isolation: isolate; /* Aísla el mix-blend-mode del duotono a esta tile. */
}

/* La foto de la tile. */
.PhotoMosaicGrid-tile-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tile entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Recorta en vez de deformar. */
    object-position: center; /* Conserva el centro al recortar. */
    pointer-events: none; /* No intercepta clics. */
    transform: scale(1); /* Punto de partida del zoom. */
    transition: transform 350ms cubic-bezier(0, 0, 0.58, 1); /* Suaviza el zoom. */
}

/* Zoom sutil de la foto, solo donde hay puntero real. */
@media (hover: hover) and (pointer: fine) {
    .PhotoMosaicGrid-tile:hover .PhotoMosaicGrid-tile-image {
        transform: scale(1.06); /* Crece un 6 %. */
    }
}

/* Movimiento reducido: la foto no se anima. */
@media (prefers-reduced-motion: reduce) {
    .PhotoMosaicGrid-tile-image {
        transition: none; /* Sin interpolación. */
    }
}

/* Duotono fijo de la tile 1 (nodo 499:29987): protege la legibilidad del texto sea cual sea la
   foto. VA EN UN ELEMENTO APARTE, ENCIMA de la imagen: puesto en la propia <img> el blend se
   mezclaría con el fondo de respaldo y la lavaría casi a blanco. */
.PhotoMosaicGrid-tile-tint {
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre la tile entera. */
    z-index: 1; /* Encima de la foto. */
    background-color: rgba(69, 79, 99, 0.82); /* Azul grisáceo del nodo. */
    mix-blend-mode: color; /* Tiñe sin tocar la luminosidad. */
    pointer-events: none; /* No intercepta clics. */
}

/* Velo plano del mismo tono: el duotono solo tiñe y no alcanza para el contraste del texto blanco.
   TIENE QUE SER HERMANO de -tile-tint y no su ::after: dentro de un mix-blend-mode:color se compone
   contra su padre y no oscurece nada. */
.PhotoMosaicGrid-tile-tint-veil {
    position: absolute; /* Sobre el duotono. */
    inset: 0; /* Cubre la tile entera. */
    z-index: 2; /* Encima del duotono. */
    background-color: rgba(69, 79, 99, 0.42); /* Mismo tono, plano. */
    pointer-events: none; /* No intercepta clics. */
}

/* Filete superior del diseño: es lo que da la sensación de mosaico. */
.PhotoMosaicGrid-tile-fillet {
    position: absolute; /* Sobre las capas. */
    top: 0; /* Al borde de arriba. */
    left: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 1px; /* Línea del diseño. */
    z-index: 3; /* Por encima del duotono y el velo. */
    background-color: rgba(255, 255, 255, 0.25); /* Blanco tenue. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Acomodo según la cantidad de imágenes: cada tile ocupa N de las 6 columnas. --- */

/* 1 imagen: ancho completo. */
.PhotoMosaicGrid-grid--count-1 .PhotoMosaicGrid-tile {
    grid-column: span 6; /* Las seis columnas. */
}

/* 2 imágenes: mitad y mitad. */
.PhotoMosaicGrid-grid--count-2 .PhotoMosaicGrid-tile {
    grid-column: span 3; /* Media fila cada una. */
}

/* 3 imágenes: una sola fila completa. */
.PhotoMosaicGrid-grid--count-3 .PhotoMosaicGrid-tile {
    grid-column: span 2; /* Un tercio cada una. */
}

/* 4 imágenes: dos filas de dos. */
.PhotoMosaicGrid-grid--count-4 .PhotoMosaicGrid-tile {
    grid-column: span 3; /* Media fila cada una. */
}

/* 5 imágenes: las tres primeras llenan la fila de arriba. */
.PhotoMosaicGrid-grid--count-5 .PhotoMosaicGrid-tile:nth-child(-n+3) {
    grid-column: span 2; /* Un tercio cada una. */
}

/* 5 imágenes: las dos últimas, a mitad y mitad abajo. */
.PhotoMosaicGrid-grid--count-5 .PhotoMosaicGrid-tile:nth-child(n+4) {
    grid-column: span 3; /* Media fila cada una. */
}

/* 6 imágenes: la grilla completa, tres columnas por dos filas. */
.PhotoMosaicGrid-grid--count-6 .PhotoMosaicGrid-tile {
    grid-column: span 2; /* Un tercio cada una. */
}

/* --- Título y descripción, SOLO en la primera tile y SOLO en escritorio: el nodo no los trae en
   tablet ni en mobile. --- */
.PhotoMosaicGrid-tile-content {
    position: absolute; /* Sobre las capas de la tile. */
    left: 0; /* Ocupa la tile entera. */
    top: 0; /* Ídem. */
    right: 0; /* Ídem. */
    bottom: 0; /* Ídem. */
    z-index: 3; /* Por encima del duotono y el velo. */
    display: flex; /* Apila título y descripción. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Texto a la izquierda. */
    justify-content: center; /* Centrado vertical. */
    gap: 12px; /* Separación entre los dos textos. */
    padding: 0 clamp(24px, 2.5vw, 32px); /* Rellenos laterales del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Título sobre la primera tile. */
.PhotoMosaicGrid-tile-title {
    margin: 0; /* Quita el margen propio del título. */
    max-width: min(363px, 85%); /* Ancho de línea del diseño, sin pasarse en una tile angosta. */
    font-size: clamp(28px, 3.33vw, 40px); /* Toca los 40px del diseño a partir de 1200px. */
    font-weight: 900; /* Black del diseño. */
    line-height: 1.1; /* 44px sobre 40px del diseño. */
    letter-spacing: -0.02em; /* Compactado del diseño. */
    color: #ffffff; /* Blanco sobre la foto. */
}

/* Descripción sobre la primera tile. */
.PhotoMosaicGrid-tile-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    max-width: min(355px, 85%); /* Ancho de línea del diseño. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.46; /* 19px sobre 13px del diseño. */
    color: rgba(255, 255, 255, 0.88); /* Blanco apenas atenuado. */
}

/* --- Tablet: hasta 1024px. Mismas 6 columnas, tiles más chicas y sin textos. --- */
@media (max-width: 1024px) {
    .PhotoMosaicGrid-tile {
        height: clamp(150px, 23.44vw, 260px); /* 255x180 sobre una mesa de 768. */
    }

    .PhotoMosaicGrid-tile-content {
        display: none; /* El título y la descripción no existen en este rango. */
    }

    /* Los chips de marca están calculados sobre la grilla de 3x2, que acá ya no existe. */
    .PhotoMosaicGrid-caption {
        display: none; /* Fuera en este rango. */
    }
}

/* --- Mobile: hasta 500px. El nodo pasa a 2 columnas, sin importar cuántas imágenes haya. --- */
@media (max-width: 500px) {
    .PhotoMosaicGrid-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas. */
    }

    /* Va antepuesto .PhotoMosaicGrid-grid para igualar la especificidad de las reglas --count-N. */
    .PhotoMosaicGrid-grid .PhotoMosaicGrid-tile {
        grid-column: span 1; /* Cada tile ocupa 1 de las 2 columnas. */
    }

        /* Con cantidad impar, la última pasa a ancho completo en vez de dejar un hueco. */
        .PhotoMosaicGrid-grid .PhotoMosaicGrid-tile:nth-child(odd):last-child {
            grid-column: span 2; /* Las dos columnas. */
        }

    .PhotoMosaicGrid-tile {
        height: clamp(110px, 37.87vw, 200px); /* 187x142 sobre una mesa de 375. */
    }
}

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