/* FloatImageCarousel.css — Carrusel circular de fotos con la tarjeta del centro destacada y las
   vecinas escalonadas a los costados. Nodos 2611:29804 (PC, mesa de 1280), 2611:31414 (tablet, mesa
   de 768) y 2611:31985 (mobile, mesa de 375).
   LAS MEDIDAS DE CADA POSICIÓN (centro, vecina y lejana) VIVEN SOLO ACÁ, como variables por rango.
   El script no repite ningún número: mide las sondas ocultas, que toman estas mismas variables, y
   con eso ubica cada tarjeta. Cambiar un tamaño es cambiar la variable y nada más. */

/* --- Sección: variables compartidas por todo el widget. Las medidas de escritorio son las del nodo
   de 1280px convertidas a vw, con techo en la proporción de 1600px (el ancho del contenido del
   sitio), así escalan con la ventana y se detienen junto con el contenedor. --- */
.FloatImageCarousel {
    --FloatImageCarousel-center-w: min(34.375vw, 550px); /* 440px sobre 1280. */
    --FloatImageCarousel-center-h: min(21.875vw, 350px); /* 280px sobre 1280. */
    --FloatImageCarousel-near-w: min(14.0625vw, 225px); /* 180px sobre 1280. */
    --FloatImageCarousel-near-h: min(10.9375vw, 175px); /* 140px sobre 1280. */
    --FloatImageCarousel-far-w: min(10.15625vw, 162.5px); /* 130px sobre 1280. */
    --FloatImageCarousel-far-h: min(7.8125vw, 125px); /* 100px sobre 1280. */
    --FloatImageCarousel-gap: min(1.5625vw, 25px); /* 20px sobre 1280. */
    --FloatImageCarousel-arrow-offset: 2.34375%; /* Separación del borde del estándar de flechas. */
    /* Parte de la tarjeta del centro que sube sobre la sección anterior (el héroe), medida en los
       nodos: 80px de sus 280 en escritorio. Va como fracción del alto del centro para que el solape
       escale junto con la tarjeta. */
    --FloatImageCarousel-overlap: 0.2857;
    position: relative; /* Contexto de apilamiento sobre el héroe. */
    z-index: 1; /* Por encima del contenido del héroe, que también usa 1: gana por ir después. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    /* SE MONTA SOBRE EL HÉROE, como FeaturedProductsCarousel: la sección sube lo que el nodo deja
       a la tarjeta del centro por encima del borde inferior del héroe. */
    margin-top: calc(var(--FloatImageCarousel-center-h) * var(--FloatImageCarousel-overlap) * -1);
    background-color: transparent; /* Deja ver el héroe en la franja solapada. */
    /* Las tarjetas vecinas asoman fuera de la ventana en tablet y mobile. Es clip y no hidden, que
       convertiría la sección en contenedor de desplazamiento. */
    overflow-x: clip;
}

/* Contenido centrado dentro del techo del sitio. Es el origen de las flechas. */
.FloatImageCarousel-container {
    position: relative; /* Origen de las flechas y de las sondas. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Sondas de medida. Invisibles y fuera del flujo: solo existen para que el script lea el tamaño
   real de cada posición y el hueco entre ellas en el rango actual. EL ORDEN IMPORTA: lejana, vecina y
   centro, una al lado de la otra, para que el hueco se mida entre dos sondas reales. --- */
.FloatImageCarousel-probes {
    position: absolute; /* Fuera del flujo. */
    top: 0; /* Anclada arriba. */
    left: 0; /* Anclada a la izquierda. */
    display: flex; /* Sondas en línea. */
    align-items: flex-start; /* Cada una con su propio alto. */
    gap: var(--FloatImageCarousel-gap); /* El hueco del diseño. */
    visibility: hidden; /* No se ven ni reciben eventos. */
    pointer-events: none; /* Por si acaso. */
}

.FloatImageCarousel-probe {
    flex: 0 0 auto; /* Mantienen su tamaño. */
}

.FloatImageCarousel-probe--far {
    width: var(--FloatImageCarousel-far-w);
    height: var(--FloatImageCarousel-far-h);
}

.FloatImageCarousel-probe--near {
    width: var(--FloatImageCarousel-near-w);
    height: var(--FloatImageCarousel-near-h);
}

.FloatImageCarousel-probe--center {
    width: var(--FloatImageCarousel-center-w);
    height: var(--FloatImageCarousel-center-h);
}

/* --- Pista: tan alta como la tarjeta del centro, que es la más alta. Las tarjetas van en absoluto
   desde su centro y el script las corre en horizontal. --- */
.FloatImageCarousel-track {
    position: relative; /* Origen de las tarjetas. */
    height: var(--FloatImageCarousel-center-h); /* Alto de la tarjeta del centro. */
    /* EL DEDO NO DESPLAZA LA PISTA: pan-y le deja al navegador solo el desplazamiento vertical de la
       página, y el horizontal lo resuelve el script, que es el que mueve las tarjetas con el gesto. */
    touch-action: pan-y;
    user-select: none; /* Arrastrar no selecciona texto. */
    -webkit-user-select: none; /* Ídem en Safari. */
}

/* Con más de un ítem, el puntero indica que se puede arrastrar. */
.FloatImageCarousel-track.is-draggable {
    cursor: grab; /* Mano abierta. */
}

/* Cursor de arrastre en toda la página mientras dura el gesto: el mouse puede salirse de la pista sin
   soltar. La clase la pone el script en el <html>, solo para mouse. */
.FloatImageCarousel-is-grabbing,
.FloatImageCarousel-is-grabbing * {
    cursor: grabbing !important; /* Mano cerrada. */
}

/* --- Tarjeta: la foto con sus capas y los textos. El tamaño, la posición, la opacidad y el orden de
   apilado los escribe el script en cada cuadro; acá va solo el aspecto. --- */
.FloatImageCarousel-card {
    --FloatImageCarousel-focus: 0; /* 1 en el centro, 0 lejos: lo escribe el script. */
    position: absolute; /* Ubicada por el script. */
    top: 50%; /* Centrada en vertical contra la pista. */
    left: 50%; /* Origen horizontal en el centro de la pista. */
    box-sizing: border-box; /* El borde entra en el tamaño. */
    width: var(--FloatImageCarousel-center-w); /* Tamaño inicial: el del centro. */
    height: var(--FloatImageCarousel-center-h); /* Ídem. */
    transform: translate(-50%, -50%); /* Centrada sobre su origen. */
    overflow: hidden; /* La foto no se sale de la caja. */
    border: 1px solid rgba(15, 15, 18, 0.11); /* Contorno tenue del nodo. */
    border-radius: 2px; /* Radio del nodo. */
    background-color: #dddfd9; /* Respaldo mientras carga la foto. */
    color: #ffffff; /* Textos en blanco. */
    text-decoration: none; /* Sin subrayado cuando es enlace. */
    opacity: 0; /* Oculta hasta que el script la ubique. */
    -webkit-tap-highlight-color: transparent; /* Sin el destello gris al tocar. */
    border-radius: 12px;
}

    /* Bootstrap subraya el texto de un enlace con el puntero encima. */
    .FloatImageCarousel-card:hover,
    .FloatImageCarousel-card:focus {
        color: #ffffff; /* Se mantiene blanco. */
        text-decoration: none; /* Sin subrayado. */
    }

    /* Sin script, solo se ve la primera tarjeta, en el centro. */
    .FloatImageCarousel-card.is-active {
        --FloatImageCarousel-focus: 1; /* Es la del centro. */
        opacity: 1; /* Visible. */
    }

/* Con el script listo, la opacidad la manda él: deja de valer la regla de arriba. */
.FloatImageCarousel.is-ready .FloatImageCarousel-card {
    opacity: var(--FloatImageCarousel-opacity, 0); /* La escribe el script por tarjeta. */
}

/* Foto a todo el tamaño de la tarjeta. */
.FloatImageCarousel-photo {
    position: absolute; /* Detrás de las capas. */
    inset: 0; /* Cubre la tarjeta. */
    width: 100%; /* Ancho completo. */
    height: 100%; /* Alto completo. */
    object-fit: cover; /* Recorta sin deformar. */
    pointer-events: none; /* El gesto lo recibe la tarjeta, no la imagen. */
}

/* Velo de legibilidad del nodo central: transparente arriba y oscuro abajo. Se funde con la cercanía
   al centro, así que en las laterales no se ve. */
.FloatImageCarousel-scrim {
    position: absolute; /* Sobre la foto. */
    inset: 0; /* Cubre la tarjeta. */
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%); /* Degradado del nodo. */
    opacity: var(--FloatImageCarousel-focus); /* Solo en el centro. */
    pointer-events: none; /* Decorativo. */
}

/* Escuadra de la esquina superior izquierda: 11px de brazo a 9px del borde, como el nodo. */
.FloatImageCarousel-corner {
    position: absolute; /* Sobre la foto. */
    top: 9px; /* Separación del nodo. */
    left: 9px; /* Ídem. */
    width: 11px; /* Largo del brazo horizontal. */
    height: 11px; /* Largo del brazo vertical. */
    border-top: 1px solid rgba(15, 15, 18, 0.3); /* Brazo horizontal. */
    border-left: 1px solid rgba(15, 15, 18, 0.3); /* Brazo vertical. */
    pointer-events: none; /* Decorativo. */
}

/* --- Textos: abajo a la izquierda, a 9px del borde, como la etiqueta del nodo. --- */
.FloatImageCarousel-content {
    position: absolute; /* Sobre la foto. */
    left: 9px; /* Separación del nodo. */
    right: 9px; /* No toca el borde derecho. */
    bottom: 9px; /* Separación del nodo. */
    display: flex; /* Apila etiqueta y descripción. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* La etiqueta abraza su texto. */
    gap: 8px; /* Separación entre las dos. */
}

/* Etiqueta del título: vidrio claro en las laterales, como el nodo. TEXTO BLANCO EN TODAS: decisión
   del usuario, el texto oscuro del nodo no se leía sobre la foto. */
.FloatImageCarousel-label {
    margin: 0; /* El párrafo es ítem de flex: sin esto el navegador le agrega 16px abajo. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 7px; /* Separación del nodo. */
    box-sizing: border-box; /* El relleno entra en el ancho. */
    max-width: 100%; /* No se sale de la tarjeta chica. */
    padding: 6px 11px 6px 10px; /* Relleno del nodo. */
    border: 1px solid rgba(255, 255, 255, 0.45); /* Contorno del vidrio claro. */
    border-radius: 3px; /* Radio del nodo. */
    background-color: rgba(255, 255, 255, 0.16); /* Vidrio claro. */
    -webkit-backdrop-filter: blur(9px); /* Desenfoque del nodo, en Safari. */
    backdrop-filter: blur(9px); /* Desenfoque del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 14px; /* Heading/H6 del nodo. */
    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: #ffffff; /* Blanco, ver arriba. */
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out; /* Cambio de vidrio al llegar al centro. */
}

/* Cuadrado que precede al título. */
.FloatImageCarousel-label-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 5px; /* Lado del nodo. */
    height: 5px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña al color del texto. */
}

/* Texto del título: una sola línea, con puntos suspensivos si no entra en una tarjeta chica. */
.FloatImageCarousel-label-text {
    min-width: 0; /* Deja que se recorte. */
    overflow: hidden; /* Recorta. */
    white-space: nowrap; /* Una línea, como el nodo. */
    text-overflow: ellipsis; /* Puntos suspensivos. */
}

/* En el centro la etiqueta pasa al vidrio oscuro del nodo. */
.FloatImageCarousel-card.is-active .FloatImageCarousel-label {
    border-color: rgba(15, 15, 18, 0.16); /* Contorno del vidrio oscuro. */
    background-color: rgba(15, 15, 18, 0.34); /* Vidrio oscuro. */
    -webkit-backdrop-filter: blur(10px); /* Desenfoque del nodo, en Safari. */
    backdrop-filter: blur(10px); /* Desenfoque del nodo. */
}

/* Descripción: el nodo no la dibuja, así que toma la tipografía de texto del sitio. SOLO EN EL
   CENTRO: se funde con la cercanía, y fuera del centro no ocupa lugar. */
.FloatImageCarousel-description {
    margin: 0; /* Sin el margen propio del párrafo. */
    max-width: 100%; /* No se sale de la tarjeta. */
    font-family: var(--font-brand); /* Pila de marca. */
    font-size: 15px; /* Texto de lectura. */
    font-weight: 400; /* Regular para texto normal. */
    line-height: 1.4; /* Interlineado de lectura. */
    color: #ffffff; /* Blanco sobre el velo oscuro. */
    text-shadow: 0 1px 2px rgba(15, 15, 18, 0.35); /* Separa el texto de una foto clara. */
    opacity: var(--FloatImageCarousel-focus); /* Aparece al llegar al centro. */
    /* Hasta tres líneas: el velo solo oscurece el tramo de abajo. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Fuera del centro no se emite caja: la regla anterior la deja como caja de líneas. */
.FloatImageCarousel-card:not(.is-active) .FloatImageCarousel-description {
    display: none; /* Sin lugar reservado. */
}

/* --- Flechas: el estándar blanco y negro del proyecto (PillarShowcase, HorizontalPosterStrip). NO
   ESTÁN EN NINGÚN NODO y se ven en los cuatro rangos, superpuestas a los costados y centradas contra
   la pista. LA NAVEGACIÓN ES CIRCULAR, así que no tienen estado apagado. --- */
.FloatImageCarousel-arrow {
    position: absolute; /* Sobre las tarjetas. */
    top: calc(var(--FloatImageCarousel-center-h) / 2); /* Mitad del alto de la pista. */
    transform: translateY(-50%); /* Centrado real. */
    z-index: 200; /* Sobre todas las tarjetas, que el script apila hasta 100. */
    width: clamp(40px, 6vw, 52px); /* Diámetro del estándar, con piso en móvil. */
    height: clamp(40px, 6vw, 52px); /* Cuadrado, para que el radio dé un círculo. */
    padding: 0; /* Sin el relleno propio del botón. */
    border-radius: 50%; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.14); /* Contorno tenue. */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); /* Sombra que la despega. */
    background-color: #ffffff; /* Fondo blanco. */
    color: rgba(15, 15, 18, 0.65); /* Chevron gris. */
    font-size: clamp(16px, 2vw, 20px); /* Tamaño del chevron, con piso en móvil. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    display: flex; /* Para centrar el chevron. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    cursor: pointer; /* Indica que es accionable. */
    transition: transform 0.2s ease-out; /* Suaviza el realce. */
}

    /* Realce estándar de botones del proyecto. :active es el que lo hace existir en táctil. */
    .FloatImageCarousel-arrow:hover,
    .FloatImageCarousel-arrow:focus-visible,
    .FloatImageCarousel-arrow:active {
        transform: translateY(-50%) scale(1.05); /* Conserva el centrado. */
    }

/* Chevron dibujado en SVG (estándar del proyecto): el glifo de texto caía bajo el centro. */
.FloatImageCarousel-chevron-icon {
    width: 1em; /* Sigue el font-size del botón. */
    height: 1em; /* Cuadrado. */
    display: block; /* Sin la línea base que lo corre hacia abajo. */
    flex: none; /* No se comprime dentro del botón. */
    stroke: currentColor; /* Toma el color del botón. */
    stroke-width: 2.5; /* Grosor del trazo. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Flecha anterior: blanca, a la izquierda. */
.FloatImageCarousel-arrow--prev {
    left: var(--FloatImageCarousel-arrow-offset);
}

/* Flecha siguiente: casi negra, a la derecha. */
.FloatImageCarousel-arrow--next {
    right: var(--FloatImageCarousel-arrow-offset);
    background-color: #0f0f12; /* Fondo casi negro. */
    color: #ffffff; /* Chevron blanco. */
}

/* --- Tablet (hasta 1024px). Nodo de 768px: la tarjeta del centro y las vecinas mantienen los
   tamaños de escritorio sobre una mesa más angosta, así que las vecinas quedan cortadas por el borde.
   El nodo no dibuja lejanas: se igualan a las vecinas y quedan fuera de la ventana. --- */
@media (max-width: 1024px) {
    .FloatImageCarousel {
        /* TARJETAS AL 75% DEL NODO, a pedido del cliente: con el tamaño del nodo (440×280) y sus
           133px de solape, la tarjeta del centro tapaba el subtítulo del héroe. */
        --FloatImageCarousel-center-w: 42.9688vw; /* 330px sobre 768 (440 del nodo × 0.75). */
        --FloatImageCarousel-center-h: 27.3438vw; /* 210px sobre 768 (280 × 0.75). */
        --FloatImageCarousel-near-w: 17.5781vw; /* 135px sobre 768 (180 × 0.75). */
        --FloatImageCarousel-near-h: 13.6719vw; /* 105px sobre 768 (140 × 0.75). */
        --FloatImageCarousel-far-w: 17.5781vw; /* Igual a la vecina. */
        --FloatImageCarousel-far-h: 13.6719vw; /* Ídem. */
        --FloatImageCarousel-gap: 2.6042vw; /* 20px sobre 768. */
        /* Solape chico: 60px de 210 sobre el héroe (el nodo subía 133 de 280). Además el héroe
           reserva este solape abajo (ver reserveHostSpace en el script), así que no tapa el texto. */
        --FloatImageCarousel-overlap: 0.2857;
    }
}

/* --- Mobile (hasta 500px). Nodo de 375px: la del centro casi a todo el ancho y las vecinas apenas
   asoman por los bordes. --- */
@media (max-width: 500px) {
    .FloatImageCarousel {
        /* Tarjetas al 75% del nodo, igual que en tablet. */
        --FloatImageCarousel-center-w: 62.8vw; /* 235.5px sobre 375 (314 del nodo × 0.75). */
        --FloatImageCarousel-center-h: 40vw; /* 150px sobre 375 (200 × 0.75). */
        --FloatImageCarousel-near-w: 36vw; /* 135px sobre 375 (180 × 0.75). */
        --FloatImageCarousel-near-h: 28vw; /* 105px sobre 375 (140 × 0.75). */
        --FloatImageCarousel-far-w: 36vw; /* Igual a la vecina. */
        --FloatImageCarousel-far-h: 28vw; /* Ídem. */
        --FloatImageCarousel-gap: 5.3333vw; /* 20px sobre 375. */
        /* Solape chico: 50px de 150 sobre el héroe (el nodo subía 153 de 200). */
        --FloatImageCarousel-overlap: 0.3333;
    }

    /* La tarjeta del centro mide 200px de alto: la descripción baja a dos líneas y un punto menos. */
    .FloatImageCarousel-description {
        font-size: 14px; /* Un punto menos. */
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/* Movimiento reducido: el script salta sin animar, y el vidrio de la etiqueta cambia en seco. */
@media (prefers-reduced-motion: reduce) {
    .FloatImageCarousel-label,
    .FloatImageCarousel-arrow {
        transition: none; /* Sin interpolación. */
    }
}