/* ApplicationsCarousel.css — Carrusel de aplicaciones a pantalla completa. Nodos 1226:43462 (PC),
   1366:21975 (tablet), 1366:22246 (mobile). Tipografía: site.css.
   TABLET Y MOBILE NO SON UNA REDUCCIÓN: cambian de mecanismo. En PC el texto se lee sobre un BLOQUE
   de color; en los otros dos ese bloque desaparece y lo reemplaza un DEGRADADO al pie de la foto.
   EL DOM ES EL MISMO: cada rango oculta la capa que no le toca. */

/* --- Sección: fondo blanco a sangre completa. --- */
.ApplicationsCarousel {
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    background-color: #ffffff; /* Fondo de la sección. */
    padding: clamp(36px, 4.375vw, 56px) 0; /* 56px del nodo de PC. */
}

/* Contenido centrado dentro del techo del sitio. */
.ApplicationsCarousel-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 y título. --- */
.ApplicationsCarousel-header {
    margin-bottom: clamp(14px, 1.875vw, 24px); /* 24px hasta el visor, según el nodo. */
}

/* Etiqueta sobre el título. Es AZUL OSCURO y no naranja: el nodo la declara sobre la variable
   color/eyebrow, el mismo azul de ApplicationMosaic. */
.ApplicationsCarousel-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    margin: 0 0 clamp(14px, 1.875vw, 24px); /* La misma separación que hay hasta el visor. */
    font-size: 14px; /* Estilo Heading/H6 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: #243746; /* Azul oscuro del nodo. */
}

/* Cuadrado que precede a la etiqueta. Es exacto y no un punto: el nodo es un frame de 7x7 sin radio. */
.ApplicationsCarousel-eyebrow-dot {
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    flex: none; /* No se comprime. */
    background-color: #243746; /* Acompaña al color de la etiqueta. */
}

/* Título de la sección. */
.ApplicationsCarousel-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(24px, 2.67vw, 32px); /* Heading/H2 del diseño, tocando el techo a 1200px. */
    font-weight: 700; /* Bold y no Black: el nodo actualizado bajó el peso junto con el tamaño. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* --- Visor: recorta las diapositivas y ancla el contador y las flechas. EL ALTO ES PROPIO: las
   diapositivas están fuera del flujo y sin él el visor colapsaría a cero. --- */
.ApplicationsCarousel-viewport {
    position: relative; /* Origen de las diapositivas, el contador y las flechas. */
    width: 100%; /* Ocupa el ancho del contenedor. */
    height: clamp(320px, 39.2vw, 470px); /* 470px del nodo, tocando el techo a 1200px. */
    overflow: hidden; /* Recorta lo que sale del visor. */
    border-radius: 6px; /* Esquinas redondeadas. */
    background-color: #0f0f12; /* Se ve solo mientras la primera foto carga. */
}

/* --- Diapositivas: apiladas en el mismo lugar y solo una visible. El cambio es un fundido y no un
   desplazamiento de pista porque cada diapositiva ocupa el visor entero. --- */
.ApplicationsCarousel-slide {
    position: absolute; /* Apiladas en la misma caja. */
    inset: 0; /* Ocupa el visor entero. */
    opacity: 0; /* Oculta por defecto. */
    pointer-events: none; /* Las inactivas no reciben clics ni tabulación. */
    transition: opacity 450ms ease; /* Fundido entre diapositivas. */
}

/* Diapositiva a la vista. */
.ApplicationsCarousel-slide.is-active {
    opacity: 1; /* Visible. */
    pointer-events: auto; /* Recibe clics. */
    z-index: 1; /* Su panel es el que recibe el clic. */
}

/* Foto de la diapositiva. */
.ApplicationsCarousel-slide-image {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre el visor entero. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta sin deformar: las imágenes del módulo no traen proporción fija. */
    pointer-events: none; /* La foto es el fondo: el panel y los controles van encima. */
}

/* Filete superior. SOLO EN ESCRITORIO: los nodos de tablet y mobile no lo dibujan. */
.ApplicationsCarousel-slide-rule {
    position: absolute; /* Sobre la foto. */
    top: 0; /* Al borde de arriba. */
    left: 0; /* De borde a borde. */
    width: 100%; /* Ancho completo. */
    height: 1px; /* Línea del nodo. */
    background-color: rgba(255, 255, 255, 0.35); /* Blanco tenue. */
}

/* Degradado que oscurece el pie. ES LO CONTRARIO DEL FILETE: en escritorio no va, porque ahí el
   texto se apoya en el bloque verde; en tablet y mobile es lo único que lo hace legible. */
.ApplicationsCarousel-slide-scrim {
    display: none; /* Lo encienden los bloques de tablet y mobile. */
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre el visor entero. */
    pointer-events: none; /* No intercepta clics. */
    background-image: linear-gradient(to bottom, rgba(15, 15, 18, 0) 35%, rgba(15, 15, 18, 0.9) 100%); /* Degradado del nodo. */
}

/* --- Panel, abajo a la izquierda de la foto. En escritorio es un BLOQUE de color que ocupa poco
   menos de media foto; en tablet y mobile pierde el fondo y se estira. --- */
.ApplicationsCarousel-panel {
    position: absolute; /* Anclado al pie de la foto. */
    left: 0; /* Al borde izquierdo. */
    bottom: 0; /* Al borde inferior. */
    width: 47.3%; /* 560/1184 del nodo. En porcentaje, para acompañar al visor, que es fluido. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    display: flex; /* Apila los textos y el enlace. */
    flex-direction: column; /* En columna. */
    gap: 10px; /* Separación entre las piezas. */
    padding: clamp(18px, 2.19vw, 28px) clamp(18px, 2.34vw, 30px); /* Rellenos del nodo. */
    background-color: rgba(14, 93, 96, 0.84); /* Verde translúcido del diseño. */
}

/* Etiqueta del panel. */
.ApplicationsCarousel-panel-kicker {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 14px; /* Heading/H6, el mismo de la etiqueta de la sección. */
    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.8); /* Blanco atenuado. */
}

/* Título del panel. */
.ApplicationsCarousel-panel-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: clamp(22px, 2.67vw, 32px); /* Heading/H2, el mismo del título de la sección. */
    font-weight: 700; /* Bold y no Black: el nodo actualizado bajó el peso. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #ffffff; /* Blanco sobre el verde. */
}

/* Descripción del panel. */
.ApplicationsCarousel-panel-description {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 16px; /* Body/Default del diseño. */
    line-height: 1.6; /* Interlineado de lectura. */
    color: rgba(255, 255, 255, 0.9); /* Blanco apenas atenuado. */
}

/* Enlace del panel. LOS CINCO ESTADOS VAN JUNTOS: el a:hover de Bootstrap le gana a la clase suelta
   y lo pintaría azul y subrayado. */
.ApplicationsCarousel-panel-link,
.ApplicationsCarousel-panel-link:link,
.ApplicationsCarousel-panel-link:visited,
.ApplicationsCarousel-panel-link:hover,
.ApplicationsCarousel-panel-link:focus,
.ApplicationsCarousel-panel-link:active {
    display: inline-flex; /* Etiqueta y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 10px; /* Separación entre las dos. */
    width: fit-content; /* No se estira al ancho del panel. */
    font-size: 16px; /* Heading/H5 del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    color: #ffffff; /* Blanco en los cinco estados. */
    text-decoration: none; /* Sin subrayado en ninguno. */
}

/* Envoltorio de la flecha, ceñido al trazo para no arrastrar el interlineado del renglón. */
.ApplicationsCarousel-panel-arrow {
    display: inline-flex; /* Se ciñe al SVG. */
    align-items: center; /* Centrada con la etiqueta. */
    color: rgba(255, 255, 255, 0.9); /* Un punto menos que el texto. */
    transition: transform 200ms ease; /* Avanza con el hover. */
}

/* Trazo de la flecha, calcado del glifo del diseño. EL NODO ACTUALIZADO PINTA EL CARÁCTER "→" Y ACÁ
   SE MANTIENE EL TRAZO: el glifo de la fuente de respaldo sale más corto y con la punta rellena. */
.ApplicationsCarousel-panel-arrow-icon {
    width: 12px; /* Tamaño del glifo del nodo. */
    height: 12px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color del envoltorio, no el blanco pleno del texto. */
    stroke-width: 1.5; /* Los 2px del glifo, ya sin el desborde del suavizado. */
    fill: none; /* Sin esto el navegador rellenaría de negro lo que encierra la punta. */
    stroke-linecap: butt; /* A escuadra, como el glifo: redondearlo lo acorta y lo engorda. */
    stroke-linejoin: miter; /* Vértice a escuadra. */
}

/* El desplazamiento de la flecha es el único acuse del hover: el subrayado está descartado arriba. */
.ApplicationsCarousel-panel-link:hover .ApplicationsCarousel-panel-arrow,
.ApplicationsCarousel-panel-link:focus-visible .ApplicationsCarousel-panel-arrow {
    transform: translateX(4px); /* Cuatro píxeles a la derecha. */
}

/* Foco visible del enlace del panel. */
.ApplicationsCarousel-panel-link:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre el verde. */
    outline-offset: 3px; /* Separado del texto. */
}

/* --- Contador y flechas. Son del VISOR y no de cada diapositiva: quedan quietos mientras las fotos
   se funden por debajo. --- */
.ApplicationsCarousel-counter {
    position: absolute; /* Sobre las diapositivas. */
    top: clamp(12px, 1.875vw, 24px); /* Arriba a la IZQUIERDA en escritorio. */
    left: clamp(12px, 1.875vw, 24px); /* Separación del borde izquierdo. */
    z-index: 2; /* Sobre las diapositivas. */
    margin: 0; /* Quita el margen propio del párrafo. */
    padding: 7px 12px; /* Rellenos del nodo. */
    border-radius: 4px; /* Esquinas apenas redondeadas. */
    background-color: rgba(15, 15, 18, 0.55); /* Fondo oscuro translúcido. */
    font-size: 13px; /* Label/L2 del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado ajustado. */
    color: rgba(255, 255, 255, 0.95); /* Blanco casi pleno. */
}

/* Una flecha de navegación. */
.ApplicationsCarousel-arrow {
    position: absolute; /* Sobre las diapositivas. */
    top: 50%; /* Punto de partida del centrado vertical. */
    transform: translateY(-50%); /* Centrado real, como el nodo. */
    z-index: 2; /* Sobre las diapositivas. */
    width: 40px; /* Diámetro del nodo. */
    height: 40px; /* Cuadrado, para que el radio dé un círculo. */
    display: flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    padding: 0; /* Sin relleno del button. */
    border: 1px solid rgba(255, 255, 255, 0.45); /* Contorno claro. */
    border-radius: 20px; /* La mitad del lado: círculo exacto. */
    background-color: rgba(255, 255, 255, 0.16); /* Relleno translúcido. */
    backdrop-filter: blur(9px); /* Vidrio esmerilado del diseño; sin soporte queda translúcido. */
    -webkit-backdrop-filter: blur(9px); /* Ídem, en WebKit. */
    font-size: 18px; /* Tamaño del signo. */
    font-weight: 700; /* Bold del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    color: #ffffff; /* Signo blanco. */
    cursor: pointer; /* Indica que es accionable. */
    transition: background-color 200ms ease, border-color 200ms ease; /* Suaviza el hover. */
}

/* Flecha con el puntero encima. */
.ApplicationsCarousel-arrow:hover {
    background-color: rgba(255, 255, 255, 0.28); /* Relleno más presente. */
    border-color: rgba(255, 255, 255, 0.7); /* Contorno más presente. */
}

/* Foco visible de la flecha. */
.ApplicationsCarousel-arrow:focus-visible {
    outline: 2px solid #ffffff; /* Blanco, visible sobre la foto. */
    outline-offset: 2px; /* Separado del borde del botón. */
}

/* Flecha anterior. */
.ApplicationsCarousel-arrow--prev {
    left: clamp(12px, 1.875vw, 24px); /* Separación del borde izquierdo. */
}

/* Flecha siguiente. */
.ApplicationsCarousel-arrow--next {
    right: clamp(12px, 1.875vw, 24px); /* Separación del borde derecho. */
}

/* --- TABLET: hasta 1024px (nodo 1366:21975). Cambia el MECANISMO: el bloque verde desaparece y lo
   reemplaza el degradado, el contador se va arriba a la derecha como píldora, y los controles pasan
   a blancos con flecha negra. --- */
@media (max-width: 1024px) {
    .ApplicationsCarousel {
        padding: 48px 0; /* Relleno vertical del nodo. */
    }

    .ApplicationsCarousel-container {
        padding: 0 32px; /* Relleno lateral del nodo. */
    }

    /* 16px entre la etiqueta, el título y el visor, según el nodo. */
    .ApplicationsCarousel-header,
    .ApplicationsCarousel-eyebrow {
        margin-bottom: 16px; /* Separación del nodo de tablet. */
    }

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

    .ApplicationsCarousel-viewport {
        height: clamp(340px, 59.9vw, 460px); /* 460/768 del nodo. */
        border-radius: 8px; /* El nodo sube el radio de 6 a 8. */
        /* EL DEDO CAMBIA DE DIAPOSITIVA EN ESTE RANGO Y EN MOBILE, que hereda de acá. La bandera es
           para el script: el rango lo decide ESTA hoja y no el JavaScript, así que el "1024px" vive
           en un solo lugar. Las flechas no sirven de pista como en los otros carruseles, porque acá
           se ven en todos los rangos. */
        --ApplicationsCarousel-drag: 1;
        /* pan-y le deja al navegador el eje vertical -- el desplazamiento de la página -- y le saca
           el horizontal, que es el que lee el script. */
        touch-action: pan-y;
    }

    .ApplicationsCarousel-slide-rule {
        display: none; /* El nodo no dibuja el filete en este rango. */
    }

    .ApplicationsCarousel-slide-scrim {
        display: block; /* Reemplaza al bloque de color del panel. */
    }

    .ApplicationsCarousel-panel {
        width: 100%; /* A todo el ancho de la foto. */
        gap: 8px; /* Separación más corta. */
        padding: 20px; /* Relleno del nodo de tablet. */
        background-color: transparent; /* SIN FONDO PROPIO: la legibilidad la da el degradado. */
    }

    .ApplicationsCarousel-panel-kicker {
        font-size: 10px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold en este rango. */
        letter-spacing: 0.2px; /* Apertura del nodo de tablet. */
        color: rgba(255, 255, 255, 0.75); /* Blanco atenuado. */
    }

    .ApplicationsCarousel-panel-title {
        font-size: 30px; /* Tamaño del nodo de tablet. */
    }

    .ApplicationsCarousel-panel-description {
        font-size: 13px; /* Tamaño del nodo de tablet. */
        color: rgba(255, 255, 255, 0.85); /* Blanco atenuado. */
    }

    /* Enlace del panel en este rango. */
    .ApplicationsCarousel-panel-link,
    .ApplicationsCarousel-panel-link:link,
    .ApplicationsCarousel-panel-link:visited,
    .ApplicationsCarousel-panel-link:hover,
    .ApplicationsCarousel-panel-link:focus,
    .ApplicationsCarousel-panel-link:active {
        font-size: 13px; /* Tamaño del nodo de tablet. */
        gap: 6px; /* Separación más corta con la flecha. */
    }

    .ApplicationsCarousel-panel-arrow-icon {
        width: 11px; /* Flecha más chica. */
        height: 11px; /* Cuadrada. */
    }

    /* El contador se va ARRIBA A LA DERECHA y se vuelve píldora. El left se apaga explícitamente:
       sin eso conviviría con el right y el contador se estiraría de lado a lado. */
    .ApplicationsCarousel-counter {
        top: 16px; /* Posición del nodo de tablet. */
        left: auto; /* Suelta el anclaje izquierdo. */
        right: 16px; /* Contra el borde derecho. */
        padding: 6px 12px; /* Rellenos del nodo. */
        border-radius: 20px; /* Píldora. */
        background-color: rgba(15, 15, 18, 0.6); /* Un punto más opaco. */
        font-size: 12px; /* Tamaño del nodo de tablet. */
        color: #ffffff; /* Blanco pleno. */
    }

    /* Los controles se invierten: blanco casi opaco y flecha negra. El desenfoque se apaga porque
       detrás del blanco al 90 % no aporta nada y cuesta una capa de composición. */
    .ApplicationsCarousel-arrow {
        border: none; /* Sin contorno. */
        background-color: rgba(255, 255, 255, 0.9); /* Blanco casi opaco. */
        backdrop-filter: none; /* Sin desenfoque. */
        -webkit-backdrop-filter: none; /* Ídem, en WebKit. */
        color: #0f0f12; /* Signo casi negro. */
    }

    /* Flecha con el puntero encima, en este rango. */
    .ApplicationsCarousel-arrow:hover {
        background-color: #ffffff; /* Blanco pleno. */
    }

    /* Foco visible en este rango: sobre el botón blanco, el anillo blanco no se vería. */
    .ApplicationsCarousel-arrow:focus-visible {
        outline-color: #0f0f12; /* Anillo oscuro. */
    }

    /* Flecha anterior en este rango. */
    .ApplicationsCarousel-arrow--prev {
        left: 16px; /* Separación del nodo de tablet. */
    }

    /* Flecha siguiente en este rango. */
    .ApplicationsCarousel-arrow--next {
        right: 16px; /* Separación del nodo de tablet. */
    }
}

/* --- MOBILE: hasta 500px (nodo 1366:22246). Mismo mecanismo que tablet: solo cambian las medidas.
   Va después de ese bloque para pisar solo lo que no le sirve. --- */
@media (max-width: 500px) {
    .ApplicationsCarousel {
        padding: 32px 0; /* Relleno vertical del nodo. */
    }

    .ApplicationsCarousel-container {
        padding: 0 20px; /* Relleno lateral del nodo. */
    }

    .ApplicationsCarousel-title {
        font-size: 18px; /* Tamaño del nodo de mobile. */
    }

    .ApplicationsCarousel-viewport {
        height: clamp(340px, 112vw, 420px); /* 420/375 del nodo. */
    }

    .ApplicationsCarousel-panel-title {
        font-size: 26px; /* Tamaño del nodo de mobile. */
    }

    /* Tres renglones y recorte. NO ES UN CAPRICHO: el panel tiene 160px de un visor de 420, y la
       descripción la escribe el editor sin tope de longitud; sin el recorte, una larga empujaría al
       panel por encima de la mitad de la foto. */
    .ApplicationsCarousel-panel-description {
        display: -webkit-box; /* Habilita el recorte por renglones. */
        -webkit-line-clamp: 3; /* Tope de renglones. */
        line-clamp: 3; /* Ídem, versión estándar. */
        -webkit-box-orient: vertical; /* Necesario para el recorte. */
        overflow: hidden; /* Recorta lo que sobra. */
        font-size: 12px; /* Tamaño del nodo de mobile. */
    }
}

/* --- Movimiento reducido: el cambio de diapositiva pasa a ser instantáneo. El script no depende de
   que la transición termine, así que apagarla no deja al carrusel a medio camino. --- */
@media (prefers-reduced-motion: reduce) {
    .ApplicationsCarousel-slide,
    .ApplicationsCarousel-panel-arrow,
    .ApplicationsCarousel-arrow {
        transition: none; /* Sin interpolación. */
    }
}