/* ApplicationCardsCarousel.css — Sección "EN CADA ESPACIO". Nodos 1535:27352+27355 (PC),
   1535:27682+27685 (tablet), 1535:28003+28006 (mobile). Tipografía: site.css.
   EL NODO DE TABLET ES EL DE ESCRITORIO AL 0,6 EXACTO, tipografía incluida: por eso la tarjeta
   escala en proporción y los textos NO. EL DE MOBILE SÍ ES PROPIO.
   LAS FLECHAS NO ESTÁN EN NINGÚN NODO: son decisión del proyecto para escritorio.
   EL SUBRAYADO DEL "VER MÁS" NO SE IMPLEMENTA, por decisión del usuario. */

/* --- Sección: contenedor exterior. Los nodos no aíslan su relleno vertical, así que el respiro
   sigue el ritmo del resto de las secciones. --- */
.ApplicationCardsCarousel {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding: clamp(32px, 4.69vw, 60px) 0; /* Aire arriba y abajo. */
}

/* Contenido centrado dentro del techo del sitio. */
.ApplicationCardsCarousel-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: los dos textos a la izquierda y las flechas a la derecha. --- */
.ApplicationCardsCarousel-header {
    display: flex; /* Textos y flechas en línea. */
    justify-content: space-between; /* Las flechas quedan pegadas al borde derecho. */
    align-items: flex-end; /* Las flechas se alinean con el pie del bloque de texto. */
    gap: 16px; /* Separación mínima entre los dos bloques. */
    margin-bottom: clamp(14px, 1.56vw, 20px); /* 20px hasta la primera fila, según los nodos. */
}

/* Columna de textos del encabezado. */
.ApplicationCardsCarousel-heading {
    display: flex; /* Apila etiqueta y título. */
    flex-direction: column; /* En columna. */
    gap: 8px; /* Separación del nodo. */
    min-width: 0; /* El texto cede ancho antes que las flechas, que son de tamaño fijo. */
}

/* Etiqueta sobre el título. */
.ApplicationCardsCarousel-eyebrow {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 14px; /* Del nodo. No escala: por debajo no se lee. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.036em; /* 0.5px sobre 14px del nodo. */
    line-height: 1.35; /* Interlineado del nodo. */
    text-transform: uppercase; /* Las mayúsculas las pone el CSS, no el editor. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* Título de la sección. */
.ApplicationCardsCarousel-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(24px, 3vw, 36px); /* Toca los 36px del nodo al piso del rango de escritorio. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #243746; /* Azul oscuro del diseño. */
}

/* --- Flechas de escritorio. Mismo patrón y medidas que los controles de FeaturedBrandsStrip. --- */
.ApplicationCardsCarousel-controls {
    display: flex; /* Flechas en línea. */
    flex: 0 0 auto; /* No se comprimen. */
    gap: 8px; /* Separación entre las dos. */
}

/* Una flecha de navegación. */
.ApplicationCardsCarousel-control {
    display: inline-flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 32px; /* Diámetro del diseño. */
    height: 32px; /* Cuadrado, para que el radio dé un círculo. */
    border-radius: 16px; /* La mitad del lado: círculo exacto. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Contorno tenue. */
    background-color: transparent; /* Sin relleno en reposo. */
    font-size: 15px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: rgba(15, 15, 18, 0.55); /* Gris del signo. */
    cursor: pointer; /* Indica que es accionable. */
}

    /* Flecha disponible con el puntero encima. */
    .ApplicationCardsCarousel-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06); /* Se rellena apenas. */
    }

    /* En los extremos se apaga y no se oculta: la flecha gris confirma que se llegó al final. */
    .ApplicationCardsCarousel-control:disabled {
        opacity: 0.35; /* Atenuada. */
        cursor: default; /* Ya no es accionable. */
    }

/* --- Pista: lleva el desplazamiento. Las flechas la mueven y el dedo la arrastra. --- */
.ApplicationCardsCarousel-track {
    display: flex; /* Tarjetas en línea. */
    gap: 16px; /* Separación del nodo de escritorio. */
    overflow-x: auto; /* Se recorre en horizontal. */
    overscroll-behavior-x: contain; /* El gesto muere en la pista: sin esto, al llegar al final arrastra la página. */
    overflow-y: hidden; /* Sin desplazamiento vertical. */
    scroll-behavior: smooth; /* El salto de las flechas es suave. */
    scroll-snap-type: x mandatory; /* Siempre queda una tarjeta alineada con el borde. */
    scrollbar-width: none; /* Sin barra: en escritorio mandan las flechas. */
    outline-offset: 4px; /* El foco del teclado cae acá: se le da aire contra las tarjetas. */
}

    /* Ídem en los navegadores WebKit. */
    .ApplicationCardsCarousel-track::-webkit-scrollbar {
        display: none; /* Sin barra visible. */
    }

/* --- Tarjeta. EL PISO DE 190px NO SALE DEL FIGMA Y ES DELIBERADO: con los 134px del nodo de tablet
   el nombre parte en tres renglones y el panel de vidrio pasa a ocupar el 62 % de la tarjeta en vez
   del 26 % del diseño. --- */
.ApplicationCardsCarousel-card {
    --acc-hover-duration: 350ms; /* Duración del prototipo, compartida por las tres capas del hover. */
    --acc-hover-easing: ease-out; /* Curva del prototipo. */
    position: relative; /* Origen de la foto y de todas las capas. */
    display: block; /* Caja propia. */
    flex: 0 0 auto; /* No se comprime dentro de la pista. */
    width: clamp(190px, 17.5vw, 224px); /* 224/1280 del nodo, con piso legible. */
    aspect-ratio: 224 / 238; /* El alto sale de la proporción, no del contenido. */
    box-sizing: border-box; /* El trazo de Figma es interior: sin esto las cinco suman 1194. */
    overflow: hidden; /* Recorta las capas a las esquinas. */
    border: 1px solid rgba(15, 15, 18, 0.11); /* Filete tenue. */
    border-radius: 2px; /* Esquinas apenas redondeadas. */
    background-color: #d9d9db; /* Reserva del color del nodo, mientras la foto no llegó. */
    scroll-snap-align: start; /* Cada tarjeta es una parada del anclaje. */
    text-decoration: none; /* La tarjeta es un enlace: sin subrayado. */
    color: inherit; /* No hereda el azul de enlace. */
}

    /* LOS CINCO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta y pintaría la
       tarjeta azul y subrayada. */
    .ApplicationCardsCarousel-card:link,
    .ApplicationCardsCarousel-card:visited,
    .ApplicationCardsCarousel-card:hover,
    .ApplicationCardsCarousel-card:focus,
    .ApplicationCardsCarousel-card:active {
        text-decoration: none; /* Sin subrayado en ningún estado. */
        color: inherit; /* Sin cambio de color en ninguno. */
    }

/* Foto de fondo de la tarjeta. */
.ApplicationCardsCarousel-photo {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tarjeta entera. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta en vez de deformar. */
    transform-origin: center; /* Replica el escalado centrado del prototipo. */
    transition: transform var(--acc-hover-duration, 350ms) var(--acc-hover-easing, ease-out); /* Suaviza el zoom. */
}

/* Velo azul del hover. */
.ApplicationCardsCarousel-tint {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tarjeta entera. */
    background-color: #243746; /* Azul del prototipo. */
    opacity: 0; /* Invisible en reposo. */
    pointer-events: none; /* No intercepta clics. */
    transition: opacity var(--acc-hover-duration, 350ms) var(--acc-hover-easing, ease-out); /* Suaviza la aparición. */
}

/* Degradado que oscurece el pie para que el panel de vidrio se lea. No se mueve en el hover: el
   prototipo lo deja igual en las dos variantes. */
.ApplicationCardsCarousel-scrim {
    position: absolute; /* Sobre el velo. */
    inset: 0; /* Cubre la tarjeta entera. */
    background-image: linear-gradient(180deg, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
    pointer-events: none; /* No intercepta clics. */
}

/* Escuadra de la esquina superior izquierda, dibujada con los pseudoelementos para no gastar dos
   elementos del marcado. */
.ApplicationCardsCarousel-corner {
    position: absolute; /* Anclada a la esquina. */
    top: 10px; /* Posición del nodo. */
    left: 10px; /* Ídem. */
    width: 10px; /* Lado de la escuadra. */
    height: 10px; /* Cuadrada. */
    pointer-events: none; /* No intercepta clics. */
}

    /* Los dos filetes de la escuadra. */
    .ApplicationCardsCarousel-corner::before,
    .ApplicationCardsCarousel-corner::after {
        content: ""; /* Necesario para que existan. */
        position: absolute; /* Dentro de la escuadra. */
        top: 0; /* Los dos arrancan en el mismo punto. */
        left: 0; /* Ídem. */
        background-color: rgba(15, 15, 18, 0.3); /* Gris translúcido del nodo. */
    }

    /* Filete horizontal. */
    .ApplicationCardsCarousel-corner::before {
        width: 10px; /* Largo de la escuadra. */
        height: 1px; /* Grosor del trazo. */
    }

    /* Filete vertical. */
    .ApplicationCardsCarousel-corner::after {
        width: 1px; /* Grosor del trazo. */
        height: 10px; /* Largo de la escuadra. */
    }

/* Número de orden de la tarjeta. */
.ApplicationCardsCarousel-number {
    position: absolute; /* Esquina superior derecha. */
    top: 9px; /* Posición del nodo. */
    right: 12px; /* Ídem. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: rgba(255, 255, 255, 0.92); /* Blanco casi pleno. */
    pointer-events: none; /* No intercepta clics. */
}

/* --- Panel de vidrio del pie. EL ALTO NO SE FIJA en los 62px del nodo: el texto sale del módulo y
   puede ocupar dos renglones, así que el panel abraza su contenido. --- */
.ApplicationCardsCarousel-glass {
    position: absolute; /* Anclado al pie de la tarjeta. */
    left: 10px; /* Posición del nodo. */
    right: 10px; /* Ídem. */
    bottom: 9px; /* Ídem. */
    display: flex; /* Apila encabezado y descripción. */
    flex-direction: column; /* En columna. */
    gap: 7px; /* Separación del nodo. */
    padding: 12px 13px 13px; /* Rellenos del nodo. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    border: 1px solid rgba(15, 15, 18, 0.11); /* Filete tenue. */
    border-radius: 6px; /* Esquinas redondeadas. */
    background-color: rgba(255, 255, 255, 0.92); /* Blanco casi opaco. */
    backdrop-filter: blur(22px); /* Donde no esté soportado, el fondo casi opaco ya alcanza. */
    -webkit-backdrop-filter: blur(22px); /* Ídem, en WebKit. */
}

/* Fila del cuadradito y el nombre. */
.ApplicationCardsCarousel-card-heading {
    display: flex; /* Cuadradito y texto en línea. */
    align-items: flex-start; /* El cuadrado se alinea con la primera línea, no con el medio. */
    gap: 7px; /* Separación del nodo. */
}

/* Cuadradito naranja del nombre. */
.ApplicationCardsCarousel-card-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 5px; /* Lado del nodo. No escala: se volvería invisible. */
    height: 5px; /* Cuadrado. */
    margin-top: 6px; /* Lo baja al medio de la primera línea del título. */
    background-color: #ff5a1f; /* Naranja del diseño. */
}

/* Nombre de la aplicación. */
.ApplicationCardsCarousel-card-title {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: #0f0f12; /* Casi negro del diseño. */
    min-width: 0; /* Permite que el nombre parta de renglón en vez de desbordar. */
    overflow-wrap: anywhere; /* Parte también dentro de una palabra si hace falta. */
    display: -webkit-box; /* Dos renglones y recorte: sin tope el panel se comería la foto. */
    -webkit-box-orient: vertical; /* Necesario para el recorte por renglones. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    overflow: hidden; /* Recorta lo que sobra. */
}

/* Descripción corta de la aplicación. */
.ApplicationCardsCarousel-card-text {
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    letter-spacing: 0.015em; /* 0.2px sobre 13px del nodo. */
    color: rgba(15, 15, 18, 0.6); /* Gris de cuerpo. */
    display: -webkit-box; /* Dos renglones: la descripción del módulo no tiene tope de largo. */
    -webkit-box-orient: vertical; /* Necesario para el recorte por renglones. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    overflow: hidden; /* Recorta lo que sobra. */
}

/* --- Llamado a la acción del hover. En reposo existe pero es invisible, como la variante Default
   del prototipo: con display:none no habría nada que animar. --- */
.ApplicationCardsCarousel-cta {
    position: absolute; /* Esquina superior izquierda. */
    top: 20px; /* Posición del prototipo. */
    left: 20px; /* Ídem. */
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 6px; /* Separación entre las dos. */
    font-size: 15px; /* Tamaño del prototipo. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.1; /* Interlineado apretado. */
    color: #ffffff; /* Blanco sobre la foto. */
    opacity: 0; /* Invisible en reposo. */
    pointer-events: none; /* El clic lo recibe la tarjeta entera. */
    transition: opacity var(--acc-hover-duration, 350ms) var(--acc-hover-easing, ease-out); /* Suaviza la aparición. */
}

/* Va SIN subrayar, por decisión del usuario: el prototipo le dibuja un filete y acá no se replica. */
.ApplicationCardsCarousel-cta-text {
    text-decoration: none; /* Sin subrayado. */
}

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

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

/* --- Hover. Acotado a punteros finos: en táctil el hover emulado queda PEGADO después del toque.
   El foco del teclado dispara lo mismo. --- */
@media (hover: hover) and (pointer: fine) {
    /* Zoom de la foto. */
    a.ApplicationCardsCarousel-card:hover .ApplicationCardsCarousel-photo,
    a.ApplicationCardsCarousel-card:focus-visible .ApplicationCardsCarousel-photo {
        transform: scale(1.045); /* El 1,045 exacto de los dos ejes del prototipo. */
    }

    /* Aparece el velo azul. */
    a.ApplicationCardsCarousel-card:hover .ApplicationCardsCarousel-tint,
    a.ApplicationCardsCarousel-card:focus-visible .ApplicationCardsCarousel-tint {
        opacity: 0.28; /* Velo tenue. */
    }

    /* Aparece el llamado a la acción. */
    a.ApplicationCardsCarousel-card:hover .ApplicationCardsCarousel-cta,
    a.ApplicationCardsCarousel-card:focus-visible .ApplicationCardsCarousel-cta {
        opacity: 1; /* Visible. */
    }
}

/* --- Tablet: hasta 1024px. La tarjeta ya está en su piso, así que solo cambia la separación. Las
   flechas se van: acá se navega arrastrando. --- */
@media (max-width: 1024px) {
    .ApplicationCardsCarousel-controls {
        display: none; /* Sin flechas en este rango. */
    }

    .ApplicationCardsCarousel-track {
        gap: 10px; /* 9,6px del nodo, redondeado. */
    }
}

/* --- Mobile: hasta 500px. El nodo es propio: la tarjeta cambia de proporción y la fila se desborda
   de la mesa a propósito. --- */
@media (max-width: 500px) {
    .ApplicationCardsCarousel-track {
        gap: 12px; /* Separación del nodo de mobile. */
    }

    .ApplicationCardsCarousel-card {
        aspect-ratio: 150 / 165; /* Un poco más alta que la de escritorio. El ancho sigue en el piso. */
    }

    .ApplicationCardsCarousel-glass {
        left: 8px; /* Medidas del nodo de mobile. */
        right: 8px; /* Ídem. */
        bottom: 8px; /* Ídem. */
        padding: 10px; /* Relleno del nodo de mobile. */
    }

    .ApplicationCardsCarousel-number {
        top: 8px; /* Posición del nodo de mobile. */
        right: 10px; /* Ídem. */
    }
}

/* --- Movimiento reducido. El velo y el "Ver más" siguen apareciendo porque son información: lo que
   se quita es el movimiento, no el estado. --- */
@media (prefers-reduced-motion: reduce) {
    .ApplicationCardsCarousel-track {
        scroll-behavior: auto; /* El salto de las flechas es instantáneo. */
    }

    .ApplicationCardsCarousel-photo,
    .ApplicationCardsCarousel-tint,
    .ApplicationCardsCarousel-cta {
        transition: none; /* Sin interpolación. */
    }

    /* La foto no crece. */
    a.ApplicationCardsCarousel-card:hover .ApplicationCardsCarousel-photo,
    a.ApplicationCardsCarousel-card:focus-visible .ApplicationCardsCarousel-photo {
        transform: none; /* Quieta. */
    }
}