/* ImageTileMosaic.css — Encabezado y mosaico de imágenes a dos columnas. Nodos 3567:2346 y 3567:2352
   (PC) y 3567:2568 (mobile); tablet sin nodo. Tipografía: site.css.
   El mosaico va a sangre en PC y tablet; en mobile queda dentro del relleno de 20px. */

/* --- Sección: fondo blanco a sangre completa. --- */
.ImageTileMosaic {
    --tile-gap: 10px; /* Separación entre teselas del nodo 3567:2352. */
    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: 8px 0 0; /* Arriba del nodo 3567:2346; el mosaico cierra la sección. */
    overflow-x: clip; /* Nada suma ancho al documento. */
}

/* --- Encabezado: relleno lateral y techo del sitio. --- */
.ImageTileMosaic-header {
    padding: 0 48px 32px; /* Lados y abajo del nodo 3567:2346. */
}

/* Sin textos, el encabezado solo existe por las flechas: en escritorio no se pinta. */
.ImageTileMosaic-header--controls-only {
    display: none; /* Las flechas no se usan en escritorio. */
}

/* Textos a la izquierda y flechas a la derecha, dentro del techo. */
.ImageTileMosaic-header-inner {
    display: flex; /* Textos y flechas en fila. */
    align-items: flex-start; /* Flechas alineadas con el eyebrow. */
    justify-content: space-between; /* Cada bloque a un extremo. */
    gap: 16px; /* Aire mínimo entre textos y flechas. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
}

/* Eyebrow, título y descripción apilados. */
.ImageTileMosaic-heading {
    display: flex; /* Piezas en columna. */
    flex-direction: column; /* En vertical. */
    align-items: flex-start; /* Pegadas al borde de inicio. */
    gap: 10px; /* Separación del nodo 3567:2348. */
    min-width: 0; /* Cede ancho antes que las flechas. */
}

/* Ninguna pieza pasa del ancho: una palabra sin espacios no ensancha el encabezado. */
.ImageTileMosaic-heading > * {
    max-width: 100%; /* Techo del ancho del contenedor. */
}

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

/* Cuadrado de la etiqueta. */
.ImageTileMosaic-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. */
.ImageTileMosaic-eyebrow-text {
    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: completo, partido en renglones parejos. */
.ImageTileMosaic-title {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 42px; /* Tamaño del nodo 3567:2350. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado normal de la fuente. */
    letter-spacing: -0.025em; /* -1,05px a 42px y -0,7px a 28px del diseño. */
    color: #0f0f12; /* Casi negro del diseño. */
    text-wrap: balance; /* Los dos renglones con largo parecido. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Descripción: tipografía del nodo 3567:2663. */
.ImageTileMosaic-description {
    margin: 0; /* La separación la da el gap del encabezado. */
    font-size: 16px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 26px; /* Interlineado del nodo. */
    color: rgba(34, 42, 48, 0.75); /* Gris del nodo. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Mosaico: dos columnas iguales a sangre. --- */
.ImageTileMosaic-grid {
    display: grid; /* Filas de teselas. */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales. */
    gap: var(--tile-gap); /* Separación entre teselas. */
}

/* --- Tesela: marco 640x440 del diseño; la imagen se estira a él. --- */
.ImageTileMosaic-tile {
    position: relative; /* Origen de la imagen. */
    display: block; /* El enlace se comporta como caja. */
    width: 100%; /* Ancho de la columna. */
    align-self: start; /* Sin estirar: con aspect-ratio WebKit la deja en 0x0. */
    aspect-ratio: 640 / 440; /* Proporción del nodo 3567:2353. */
    overflow: hidden; /* Recorta lo que sobra de la imagen. */
    min-width: 0; /* No fuerza el ancho de la columna. */
}

/* La tesela suelta va sola en su fila, con el ancho de una columna. */
.ImageTileMosaic-tile--odd {
    grid-column: 1 / -1; /* Ocupa la fila entera. */
    width: calc((100% - var(--tile-gap)) / 2); /* Ancho de una columna. */
}

/* Alineación de la suelta elegida por el editor. */
.ImageTileMosaic-grid[data-odd-align="left"] .ImageTileMosaic-tile--odd {
    justify-self: start; /* Contra el borde izquierdo. */
}

.ImageTileMosaic-grid[data-odd-align="center"] .ImageTileMosaic-tile--odd {
    justify-self: center; /* Centrada. */
}

.ImageTileMosaic-grid[data-odd-align="right"] .ImageTileMosaic-tile--odd {
    justify-self: end; /* Contra el borde derecho. */
}

/* Imagen: estirada al marco sin recortar, un píxel de más por lado contra el antialias. */
.ImageTileMosaic-tile-image {
    position: absolute; /* Sobre el marco. */
    top: -1px; /* Desborde contra el medio píxel sin pintar. */
    left: -1px; /* Ídem. */
    width: calc(100% + 2px); /* Ídem. */
    height: calc(100% + 2px); /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: fill; /* La imagen entera, estirada a la proporción del marco. */
}

/* Enlace: sin el color ni el subrayado de Bootstrap en ningún estado. */
a.ImageTileMosaic-tile,
a.ImageTileMosaic-tile:link,
a.ImageTileMosaic-tile:visited,
a.ImageTileMosaic-tile:hover,
a.ImageTileMosaic-tile:active {
    color: inherit; /* Sin el azul de Bootstrap. */
    text-decoration: none; /* Los enlaces nunca van subrayados. */
}

/* Foco: anillo blanco hacia adentro, nunca un borde oscuro sobre la foto. */
a.ImageTileMosaic-tile:focus-visible {
    outline: 2px solid #ffffff; /* Estándar del proyecto. */
    outline-offset: -3px; /* Hacia adentro. */
}

/* --- Flechas (estándar de ProductCarousel): solo en tablet y mobile. --- */
.ImageTileMosaic-controls {
    display: none; /* En escritorio no hay carrusel. */
    flex: 0 0 auto; /* No se comprimen. */
    gap: 8px; /* Separación entre flechas. */
    margin-left: auto; /* A la derecha aunque no haya textos. */
}

.ImageTileMosaic-control {
    display: inline-flex; /* Centra el chevron. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 32px; /* Círculo estándar. */
    height: 32px; /* Ídem. */
    padding: 0; /* Sin relleno del navegador. */
    border-radius: 16px; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Borde estándar. */
    background-color: transparent; /* Transparente. */
    font-size: 15px; /* Base del tamaño del chevron. */
    color: rgba(15, 15, 18, 0.55); /* Gris estándar. */
    cursor: pointer; /* Clickeable. */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Cambios suaves. */
}

.ImageTileMosaic-chevron-icon {
    width: 1.25em; /* Sigue el font-size del botón. */
    height: 1.25em; /* Cuadrado. */
    display: block; /* Sin línea base. */
    flex: none; /* No se comprime. */
    stroke: currentColor; /* Color del botón. */
    stroke-width: 2.5; /* Grosor estándar. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

    .ImageTileMosaic-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06); /* Hover estándar. */
    }

    /* Apagadas en los extremos: confirman que se llegó al final. */
    .ImageTileMosaic-control:disabled {
        opacity: 0.35; /* Apagada. */
        cursor: default; /* Sin mano. */
    }

/* --- Tablet: hasta 1024px. Sin nodo: valores entre PC y mobile. El mosaico pasa a carrusel. --- */
@media (max-width: 1024px) {

    .ImageTileMosaic {
        --tile-gap: 6px; /* Entre los 10px de PC y los 2px de mobile. */
        --tiles-visible: 2; /* Teselas enteras a la vista. */
    }

    /* Sin textos, el encabezado sí se pinta: lleva las flechas. */
    .ImageTileMosaic-header--controls-only {
        display: block; /* Visible. */
    }

    .ImageTileMosaic-controls {
        display: flex; /* En fila. */
    }

    /* Pista del carrusel: desplazamiento nativo con enganche por tesela. */
    .ImageTileMosaic-grid {
        display: flex; /* Una sola fila. */
        overflow-x: auto; /* Desplazable con el dedo, el trackpad y las flechas. */
        overscroll-behavior-x: contain; /* Al llegar al final no arrastra la página; SOLO en x. */
        scroll-snap-type: x mandatory; /* Siempre queda una tesela alineada. */
        scroll-behavior: smooth; /* El clic de las flechas se desliza. */
        scrollbar-width: none; /* Sin barra visible. */
    }

        .ImageTileMosaic-grid::-webkit-scrollbar {
            display: none; /* Sin barra visible en WebKit. */
        }

    /* Todas las teselas iguales, la suelta incluida: el ancho reparte las visibles. */
    .ImageTileMosaic-tile,
    .ImageTileMosaic-tile--odd {
        flex: 0 0 calc((100% - (var(--tiles-visible) - 1) * var(--tile-gap)) / var(--tiles-visible)); /* Ancho de una tesela. */
        width: auto; /* Lo manda el flex-basis. */
        scroll-snap-align: start; /* Se engancha por su borde izquierdo. */
    }

    /* Mientras se arrastra con el mouse, ni el enganche ni el deslizamiento corren detrás del puntero. */
    .ImageTileMosaic-grid.is-dragging {
        scroll-snap-type: none; /* Sin reenganche en cada píxel. */
        scroll-behavior: auto; /* Sin interpolar el scrollLeft. */
    }

    .ImageTileMosaic-header {
        padding: 0 40px 28px; /* Lados de tablet y aire entre los de PC y mobile. */
    }

    .ImageTileMosaic-title {
        font-size: 34px; /* Entre los 42px de PC y los 28px de mobile. */
    }
}

/* --- Mobile: hasta 500px. El mosaico entra en el relleno. --- */
@media (max-width: 500px) {

    .ImageTileMosaic {
        --tile-gap: 2px; /* Separación del nodo 3567:2574. */
        --tiles-visible: 1; /* Una tesela entera a la vista. */
        padding: 8px 20px 48px; /* Arriba, lados y abajo del nodo 3567:2568. */
    }

    .ImageTileMosaic-header {
        padding: 0 0 26px; /* El relleno lateral ya lo da la sección; abajo, el gap del nodo. */
    }

    .ImageTileMosaic-title {
        font-size: 28px; /* Tamaño del nodo 3567:2572. */
    }
}

/* --- Arrastre con el mouse: cursor de agarre solo donde hay carrusel y un puntero que apunta. --- */
@media (max-width: 1024px) and (hover: hover) {

    .ImageTileMosaic-grid {
        cursor: grab; /* Invita a arrastrar. */
    }

    /* Mientras dura el arrastre la clase va en el <html>: el mouse puede salirse de la pista. */
    .ImageTileMosaic-is-grabbing,
    .ImageTileMosaic-is-grabbing * {
        cursor: grabbing !important; /* Le gana al cursor de los enlaces. */
    }
}

/* Movimiento reducido: el clic de las flechas salta sin deslizar. */
@media (prefers-reduced-motion: reduce) {

    .ImageTileMosaic-grid {
        scroll-behavior: auto; /* Sin interpolación. */
    }

    .ImageTileMosaic-control {
        transition: none; /* Sin interpolación. */
    }
}