/* ApplicationMosaic.css — Mosaico "¿Qué estás construyendo?". Nodos 1328:41255 (PC),
   1366:21903 (tablet), 1366:22175 (mobile). Tipografía: site.css.
   EL MARCADO ES EL MISMO en los tres: solo cambian columnas, la primera tesela y qué se ve.
   El panel de hover y la etiqueta SOLO EXISTEN EN ESCRITORIO. */

/* --- Sección: fondo a sangre completa y contenido acotado. --- */
.ApplicationMosaic {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #f7f6f4; /* Fondo de la sección. */
    padding: clamp(32px, 4.69vw, 60px) 0; /* 60px arriba y abajo del nodo de escritorio. */
}

/* Contenido centrado dentro del techo del sitio. */
.ApplicationMosaic-container {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin: 0 auto; /* Centrado. */
    padding: 0 clamp(20px, 3.75vw, 48px); /* 48px laterales del nodo de PC. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
}

/* --- Encabezado: etiqueta con cuadrado azul y título grande. --- */
.ApplicationMosaic-header {
    display: flex; /* Apila etiqueta y título. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del nodo. */
    margin-bottom: clamp(16px, 2.03vw, 26px); /* Gap del nodo más el separador del diseño. */
}

/* Etiqueta sobre el título. */
.ApplicationMosaic-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.14em; /* Apertura del nodo. */
    text-transform: uppercase; /* Las mayúsculas las pone el CSS, no el editor. */
    color: #243746; /* Azul oscuro del nodo, no el naranja de las demás secciones. */
}

/* Cuadrado que precede a la etiqueta. */
.ApplicationMosaic-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: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.ApplicationMosaic-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(34px, 5.33vw, 64px); /* Toca los 64px del nodo al piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.1; /* Interlineado de titular. */
    letter-spacing: -0.01em; /* Compactado del nodo. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Mosaico: cinco columnas de 1fr y no de 224px fijos, así en la mesa de 1280 cada columna cae
   en la medida del nodo y en el contenedor de 1600 las teselas crecen en vez de dejar un hueco.
   LA PRIMERA TESELA SE COLOCA SOLA: ocupa 2x2 y va primera en el marcado.
   LA CANTIDAD DE TESELAS NO TIENE TOPE: la decide el editor. --- */
.ApplicationMosaic-grid {
    display: grid; /* Cuadrícula. */
    grid-template-columns: repeat(5, 1fr); /* Cinco columnas iguales. */
    gap: 16px; /* Separación del nodo. */
}

/* --- Tesela. Es <a> con enlace y <article> sin él: los estilos van sobre la clase. --- */
.ApplicationMosaic-tile {
    position: relative; /* Origen de la foto, las capas y el panel. */
    display: block; /* Caja propia. */
    aspect-ratio: 1 / 1; /* Cuadradas en los tres rangos; la primera se sale de esta regla. */
    box-sizing: border-box; /* El borde entra dentro del lado. */
    border-radius: 6px; /* Esquinas redondeadas. */
    overflow: hidden; /* Recorta las capas y esconde el panel debajo del borde inferior. */
    background-color: rgba(15, 15, 18, 0.06); /* Fondo mientras la imagen carga. */
}

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

/* Foco por teclado, aparte del hover. */
a.ApplicationMosaic-tile:focus-visible {
    outline: 3px solid #429cde; /* El mismo azul del panel. */
    outline-offset: 3px; /* Separado del borde de la tesela. */
}

/* La primera tesela es la grande: 2x2 en la mesa de escritorio. */
.ApplicationMosaic-tile:first-child {
    grid-column: span 2; /* Dos columnas de ancho. */
    grid-row: span 2; /* Dos filas de alto. */
    aspect-ratio: auto; /* La proporción la resuelve la colocación. */
}

/* --- Foto de fondo y las dos capas que van encima. --- */
.ApplicationMosaic-photo {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tesela entera. */
    display: block; /* Quita el espacio de línea base. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Llena la tesela sin deformarse. */
}

/* Tinte de color. SE DESVANECE al pasar el puntero: es la mitad del efecto de hover del nodo, la
   otra mitad es el panel que sube. */
.ApplicationMosaic-tint {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tesela entera. */
    opacity: 0.55; /* El color lo asigna el bloque de la paleta, más abajo. */
    transition: opacity 300ms ease; /* Suaviza el desvanecido. */
}

/* Con el puntero encima o con el foco, el tinte se apaga y aparece la foto real. */
a.ApplicationMosaic-tile:hover .ApplicationMosaic-tint,
a.ApplicationMosaic-tile:focus-visible .ApplicationMosaic-tint {
    opacity: 0; /* Transparente. */
}

/* Degradado de legibilidad. EL SENTIDO SIGUE AL TÍTULO: acá el título va abajo, así que oscurece
   abajo. En tablet y mobile la primera tesela lo invierte junto con su título. */
.ApplicationMosaic-scrim {
    position: absolute; /* Sobre el tinte. */
    inset: 0; /* Cubre la tesela entera. */
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0) 35%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
}

/* --- Paleta del tinte. EL COLOR NO SALE DEL MÓDULO NI DEL DISEÑADOR: el módulo "applications" no
   tiene campo de color y el nodo cicla cinco colores por POSICIÓN. Con :nth-child el ciclo se
   mantiene sin importar cuántas aplicaciones seleccione el editor. --- */
.ApplicationMosaic-tile:nth-child(5n + 1) .ApplicationMosaic-tint { background-color: #429cde; }
.ApplicationMosaic-tile:nth-child(5n + 2) .ApplicationMosaic-tint { background-color: #454f63; }
.ApplicationMosaic-tile:nth-child(5n + 3) .ApplicationMosaic-tint { background-color: #0e5d60; }
.ApplicationMosaic-tile:nth-child(5n + 4) .ApplicationMosaic-tint { background-color: #213f65; }
.ApplicationMosaic-tile:nth-child(5n + 5) .ApplicationMosaic-tint { background-color: #2d8098; }

/* --- Título de la tesela. Se ancla al pie y se levanta al pasar el puntero, para dejarle lugar al
   panel. EL TAMAÑO NO SALE DEL NODO DE ESCRITORIO TAL CUAL: ahí cada tesela tiene el suyo ajustado
   a mano a cada palabra, y acá el título lo escribe el editor. Los 26px salen del nodo de tablet,
   para una tesela del mismo ancho que la chica de escritorio. --- */
.ApplicationMosaic-tile-title {
    position: absolute; /* Sobre las capas. */
    left: 0; /* Ancho completo de la tesela, anclado abajo. */
    right: 0; /* Ídem. */
    bottom: 0; /* Ídem. */
    margin: 0; /* Quita el margen propio del título. */
    padding: 16px; /* Relleno de la tesela chica del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    font-size: clamp(17px, 2.03vw, 26px); /* Toca los 26px al piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado extra: el título es corto. */
    color: #ffffff; /* Blanco sobre la foto. */
    overflow-wrap: break-word; /* RED DE SEGURIDAD: un título inventado muy largo desbordaría. */
    transition: transform 300ms ease; /* Suaviza el levantado. */
}

/* La tesela grande respira más y lleva el título más grande, según el nodo. */
.ApplicationMosaic-tile:first-child .ApplicationMosaic-tile-title {
    padding: 24px; /* Relleno de la tesela grande. */
    font-size: clamp(22px, 3.44vw, 44px); /* El nodo dibuja 59px, pero ahí se parten las palabras largas. */
}

/* --- Panel del llamado a la acción. Espera debajo del borde inferior y sube al pasar el puntero.
   Se emite solo cuando la aplicación tiene enlace. --- */
.ApplicationMosaic-panel {
    position: absolute; /* Anclado al pie de la tesela. */
    left: 0; /* Ancho completo. */
    right: 0; /* Ídem. */
    bottom: 0; /* Al borde inferior. */
    display: flex; /* Para centrar la leyenda. */
    align-items: center; /* Centrado vertical. */
    height: 56px; /* Alto en la tesela chica del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del alto. */
    padding: 0 16px; /* Relleno lateral. */
    background-color: rgba(66, 156, 222, 0.6); /* ES EL MISMO EN TODAS: no sigue el ciclo del tinte. */
    transform: translateY(100%); /* Fuera de la tesela mientras no hay hover. */
    transition: transform 300ms ease; /* Suaviza la subida. */
}

/* Medidas del panel en la tesela grande, según el nodo. */
.ApplicationMosaic-tile:first-child .ApplicationMosaic-panel {
    height: 72px; /* Alto de la tesela grande. */
    padding: 0 24px; /* Relleno de la tesela grande. */
}

/* El panel sube al pasar el puntero o con el foco. */
a.ApplicationMosaic-tile:hover .ApplicationMosaic-panel,
a.ApplicationMosaic-tile:focus-visible .ApplicationMosaic-panel {
    transform: translateY(0); /* En su lugar. */
}

/* El título se levanta el alto del panel más 10px de aire, que es el desplazamiento del nodo. */
a.ApplicationMosaic-tile:hover .ApplicationMosaic-tile-title,
a.ApplicationMosaic-tile:focus-visible .ApplicationMosaic-tile-title {
    transform: translateY(-66px); /* 56 del panel más 10 de aire. */
}

/* La tesela grande se declara aparte porque su panel es más alto. */
a.ApplicationMosaic-tile:first-child:hover .ApplicationMosaic-tile-title,
a.ApplicationMosaic-tile:first-child:focus-visible .ApplicationMosaic-tile-title {
    transform: translateY(-82px); /* 72 del panel más 10 de aire. */
}

/* Leyenda dentro del panel. */
.ApplicationMosaic-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación entre las dos. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.2; /* Interlineado ajustado. */
    color: #ffffff; /* Blanco sobre el panel azul. */
}

/* Leyenda de la tesela grande. */
.ApplicationMosaic-tile:first-child .ApplicationMosaic-cta {
    font-size: 15px; /* Un punto más grande. */
}

/* Envoltorio de la flecha. */
.ApplicationMosaic-arrow {
    display: inline-flex; /* Se ciñe al SVG. */
    align-items: center; /* Centrada con la leyenda. */
}

/* Trazo de la flecha. */
.ApplicationMosaic-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 de la leyenda. */
    stroke-width: 2; /* Grosor del trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* --- Tablet: hasta 1024px (nodo 1366:21903). Tres columnas, la primera tesela ocupa dos columnas y
   una fila, y su título pasa ARRIBA. Sin etiqueta y sin panel de hover. --- */
@media (max-width: 1024px) {
    .ApplicationMosaic-eyebrow {
        display: none; /* El nodo no dibuja la etiqueta. */
    }

    .ApplicationMosaic-title {
        font-size: 26px; /* Tamaño del nodo de tablet. */
    }

    .ApplicationMosaic-header {
        margin-bottom: 16px; /* Separación del nodo hasta el mosaico. */
    }

    .ApplicationMosaic-grid {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas. */
        gap: 14px; /* Separación del nodo de tablet. */
    }

    .ApplicationMosaic-tile:first-child {
        grid-column: span 2; /* Dos columnas de ancho... */
        grid-row: span 1; /* ...pero una sola fila: el alto lo fijan las teselas cuadradas vecinas. */
    }

    /* El título de la tesela grande pasa arriba, según el nodo. */
    .ApplicationMosaic-tile:first-child .ApplicationMosaic-tile-title {
        top: 0; /* Anclado arriba. */
        bottom: auto; /* Suelta el anclaje inferior. */
        padding: 16px 18px; /* Rellenos del nodo. */
        font-size: 32px; /* Tamaño del nodo de tablet. */
    }

    /* El degradado acompaña al título: si no, la parte oscura quedaría del lado contrario. */
    .ApplicationMosaic-tile:first-child .ApplicationMosaic-scrim {
        background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0.6) 0%, rgba(15, 15, 18, 0) 70%); /* Invertido. */
    }

    /* Título de las teselas chicas. */
    .ApplicationMosaic-tile-title {
        padding: 12px; /* Relleno del nodo de tablet. */
        font-size: 26px; /* Tamaño del nodo de tablet. */
        line-height: 0.95; /* Interlineado apretado del nodo. */
    }

    /* El panel no existe en este rango: el nodo no lo dibuja y el hover no llega a una pantalla
       táctil. Se oculta acá porque el rango se conoce en el navegador, no en el servidor. */
    .ApplicationMosaic-panel {
        display: none; /* Fuera en este rango. */
    }

    /* Sin panel no hay a qué dejarle lugar: el título tampoco se levanta. */
    a.ApplicationMosaic-tile:hover .ApplicationMosaic-tile-title,
    a.ApplicationMosaic-tile:focus-visible .ApplicationMosaic-tile-title,
    a.ApplicationMosaic-tile:first-child:hover .ApplicationMosaic-tile-title,
    a.ApplicationMosaic-tile:first-child:focus-visible .ApplicationMosaic-tile-title {
        transform: none; /* Quieto. */
    }
}

/* --- Mobile: hasta 500px (nodo 1366:22175). Dos columnas y la primera tesela a ancho completo. --- */
@media (max-width: 500px) {
    .ApplicationMosaic-title {
        font-size: 22px; /* Tamaño del nodo de mobile. */
    }

    .ApplicationMosaic-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas. */
        gap: 12px; /* Separación del nodo de mobile. */
    }

    .ApplicationMosaic-tile:first-child {
        grid-column: 1 / -1; /* A todo el ancho, sin importar cuántas columnas haya. */
        grid-row: span 1; /* Una sola fila. */
        aspect-ratio: 335 / 150; /* Franja del nodo, no un cuadrado. */
    }

    /* Título de la tesela grande en mobile. */
    .ApplicationMosaic-tile:first-child .ApplicationMosaic-tile-title {
        padding: 16px 18px; /* Rellenos del nodo. */
        font-size: 21px; /* Tamaño del nodo de mobile. */
    }

    /* Título de las teselas chicas en mobile. */
    .ApplicationMosaic-tile-title {
        padding: 12px; /* Relleno del nodo. */
        font-size: 17px; /* Tamaño del nodo de mobile. */
    }
}

/* --- Movimiento reducido: el tinte y el panel siguen funcionando, pero sin transición. --- */
@media (prefers-reduced-motion: reduce) {
    .ApplicationMosaic-tint,
    .ApplicationMosaic-panel,
    .ApplicationMosaic-tile-title {
        transition: none; /* Sin interpolación. */
    }
}