/* FeaturedProductsCarousel.css — Carrusel de productos destacados (vertiente PRODUCTOS). Nodos
   1226:36613 (PC), 1226:38532 (tablet), 1226:38292 (mobile); flechas del prototipo 1274:27291.
   Tipografía: site.css.
   MODELO DEL CARRUSEL DE PC: ranuras FIJAS en posición y tamaño, y las tarjetas se mudan de ranura
   con un fundido. Acá son TRES ranuras (chica/grande/chica). */

/* --- Sección: se solapa sobre VerticalHeroBanner de laptop en adelante. --- */
.FeaturedProductsCarousel {
    position: relative; /* Contexto de apilamiento sobre el héroe. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    margin-top: -119px; /* El solape NO es el visible: hay que restar los rellenos internos. */
    background-color: transparent; /* Deja ver el héroe en la franja solapada. */
    --FeaturedProductsCarousel-duration: 500ms; /* Duración del fundido. */
    --FeaturedProductsCarousel-easing: cubic-bezier(0.22, 1, 0.36, 1); /* Curva del fundido. */
}

/* Contenido centrado dentro del techo del sitio. */
.FeaturedProductsCarousel-content {
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    padding: 40px 32px; /* Rellenos del diseño. */
}

/* --- Carrusel de PC (chica / grande / chica). El @media del final lo apaga. --- */
.FeaturedProductsCarousel-carousel {
    position: relative; /* Origen de las flechas. */
}

/* Flecha de navegación, superpuesta sobre las ranuras. */
.FeaturedProductsCarousel-arrow {
    position: absolute; /* Sobre las tarjetas. */
    top: 50%; /* Punto de partida del centrado vertical. */
    transform: translateY(-50%); /* Centrado real. */
    z-index: 2; /* Sobre las tarjetas. */
    width: 52px; /* Diámetro del prototipo. */
    height: 52px; /* Cuadrado, para que el radio dé un círculo. */
    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. */
    display: flex; /* Para centrar el signo. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    font-size: 20px; /* Tamaño del signo. */
    font-weight: 500; /* Medium del diseño. */
    line-height: 1; /* Sin interlineado que descentre el glifo. */
    cursor: pointer; /* Indica que es accionable. */
}

/* Flecha anterior: en blanco, como el prototipo. */
.FeaturedProductsCarousel-arrow--prev {
    left: 10px; /* Separación del borde izquierdo. */
    background-color: #ffffff; /* Fondo blanco. */
    color: rgba(15, 15, 18, 0.65); /* Signo gris. */
}

/* Flecha siguiente: en oscuro, como el prototipo. */
.FeaturedProductsCarousel-arrow--next {
    right: 10px; /* Separación del borde derecho. */
    background-color: #0f0f12; /* Fondo casi negro. */
    color: #ffffff; /* Signo blanco. */
}

/* NO hay :disabled: la navegación es CIRCULAR. */

/* Ventana del carrusel. */
.FeaturedProductsCarousel-viewport {
    overflow: hidden; /* Recorta lo que sale de las ranuras. */
    padding: 24px 0; /* Aire para la sombra de las tarjetas. */
}

/* Fila de las tres ranuras. */
.FeaturedProductsCarousel-track {
    display: flex; /* Ranuras en línea. */
    align-items: center; /* Las chicas quedan centradas con la grande. */
    justify-content: center; /* Centradas en el ancho. */
    gap: 20px; /* Separación real del nodo. */
    width: 100%; /* Ocupa el ancho del viewport. */
}

/* Ranura chica, a los costados. */
.FeaturedProductsCarousel-slot {
    position: relative; /* Origen de la tarjeta y su fantasma. */
    flex: 0 1 18.581%; /* 220/1184 del nodo. */
    aspect-ratio: 220 / 255; /* Proporción del nodo. */
    background-color: #ffffff; /* Fondo de la ranura. */
    border: 1px solid rgba(15, 15, 18, 0.09); /* Filete tenue. */
    border-radius: 12px; /* Esquinas redondeadas. */
    box-shadow: 0px 14px 34px -4px rgba(26, 20, 13, 0.14); /* Sombra del nodo. */
    overflow: hidden; /* Recorta la tarjeta a esas esquinas. */
}

/* Ranura grande, al centro: panorámica. */
.FeaturedProductsCarousel-slot--active {
    flex: 0 1 36.064%; /* 427/1184 del nodo. */
    aspect-ratio: 427 / 290; /* Proporción del nodo. */
}

/* Tarjeta del producto: ocupa la ranura entera. */
.FeaturedProductsCarousel-card {
    position: absolute; /* Dentro de la ranura. */
    inset: 0; /* La cubre entera. */
    display: flex; /* Apila imagen y cuerpo. */
    flex-direction: column; /* En columna. */
    opacity: 1; /* Visible. */
    transition: opacity var(--FeaturedProductsCarousel-duration) var(--FeaturedProductsCarousel-easing); /* Fundido. */
}

/* Tarjeta que entra a la ranura: arranca invisible y el script la funde. */
.FeaturedProductsCarousel-card.is-entering {
    opacity: 0; /* Punto de partida del fundido. */
}

/* Copia de la tarjeta que sale, para que el cruce se vea. */
.FeaturedProductsCarousel-ghost {
    position: absolute; /* Sobre la ranura. */
    inset: 0; /* La cubre entera. */
    pointer-events: none; /* Es decorativa: no intercepta clics. */
}

/* El fantasma se desvanece. */
.FeaturedProductsCarousel-ghost.is-leaving {
    opacity: 0; /* Punto de llegada del fundido. */
}

/* Depósito de las tarjetas que no están en ninguna ranura. */
.FeaturedProductsCarousel-pool {
    display: none; /* Fuera del flujo y sin pintar. */
}

/* Recuadro de la imagen del producto. */
.FeaturedProductsCarousel-card-media {
    position: relative; /* Origen del velo. */
    flex: 1 1 auto; /* Ocupa el alto que deja el cuerpo. */
    min-height: 0; /* Permite comprimirse dentro de la ranura. */
    box-sizing: border-box; /* El relleno entra dentro del alto. */
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%); /* Degradado del diseño. */
}

/* El script marca esta clase cuando la foto no calza con la forma de la ranura. */
.FeaturedProductsCarousel-card-media.is-mismatched {
    padding: 16px; /* Aire, en vez de recortar la foto contra los bordes. */
}

/* Velo oscuro sobre la imagen, del export de Figma. */
.FeaturedProductsCarousel-card-media::after {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre el recuadro entero. */
    background: 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 export. */
    pointer-events: none; /* No intercepta clics. */
}

/* La imagen del producto. */
.FeaturedProductsCarousel-card-image {
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    object-fit: cover; /* Llena la ranura; el script pasa a contain cuando no calza. */
}

/* Cuando no calza, la imagen entra entera en vez de agrandarse de más. */
.FeaturedProductsCarousel-card-media.is-mismatched .FeaturedProductsCarousel-card-image {
    object-fit: contain; /* Sin recortar. */
}

/* Cuerpo de la tarjeta. */
.FeaturedProductsCarousel-card-body {
    display: flex; /* Apila los textos. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del export de Figma. */
    padding: 14px 16px; /* Rellenos del export de Figma. */
}

/* Familia del producto. */
.FeaturedProductsCarousel-eyebrow {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    line-height: 1.3; /* Interlineado del diseño. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Nombre del producto. Mismo tamaño en todas las tarjetas: solo la ranura crece, no el texto. */
.FeaturedProductsCarousel-card-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 14px; /* Tamaño del diseño. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.5px; /* Apertura del diseño. */
    text-transform: uppercase; /* Del diseño. */
    line-height: 1.35; /* Interlineado del diseño. */
    color: #243746; /* Azul-gris del diseño. */
    display: -webkit-box; /* Dos renglones y recorte: el título lo carga el editor. */
    -webkit-box-orient: vertical; /* Necesario para el recorte por renglones. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta lo que sobra. */
}

/* Leyenda del enlace de la tarjeta. */
.FeaturedProductsCarousel-card-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    gap: 4px; /* Separación entre las dos. */
    color: #243746; /* Mismo azul-gris del eyebrow: el export NO usa el azul de marca acá. */
    font-size: 13px; /* Tamaño del diseño. */
    font-weight: 600; /* Semibold del diseño. */
    text-decoration: none; /* Sin subrayado. */
    transition: gap 0.2s ease-in-out; /* Anima la flecha, no el color. */
}

    /* Le gana al a:hover/color de Bootstrap: mismo color en los cuatro estados, la flecha es la
       única que se mueve -- mismo patrón que LegalLinksSection. */
    .FeaturedProductsCarousel-card-cta,
    .FeaturedProductsCarousel-card-cta:hover,
    .FeaturedProductsCarousel-card-cta:focus,
    .FeaturedProductsCarousel-card-cta:visited {
        color: #243746;
        text-decoration: none;
    }

    .FeaturedProductsCarousel-card:hover .FeaturedProductsCarousel-card-cta,
    .FeaturedProductsCarousel-card:focus-within .FeaturedProductsCarousel-card-cta {
        gap: 8px; /* La flecha se corre al pasar el mouse sobre toda la tarjeta. */
    }

/* Trazo de la flecha del CTA. */
.FeaturedProductsCarousel-cta-arrow-icon {
    width: 14px; /* Tamaño del diseño. */
    height: 14px; /* Cuadrada. */
    stroke: currentColor; /* Toma el color de la leyenda. */
    stroke-width: 3; /* Grosor del trazo. */
    fill: none; /* Sin relleno: solo trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Movimiento reducido: el cruce de tarjetas es instantáneo. */
@media (prefers-reduced-motion: reduce) {
    .FeaturedProductsCarousel-card,
    .FeaturedProductsCarousel-ghost {
        transition-duration: 0.01ms !important; /* Sin fundido perceptible. */
    }
}

/* --- Variante de TABLET y MOBILE: desplazamiento horizontal nativo, sin flechas. Oculta por
   defecto; la enciende el @media de más abajo. --- */
.FeaturedProductsCarousel-mobile-track {
    display: none; /* Solo en tablet y mobile. */
    gap: 16px; /* Separación del nodo de tablet. */
    width: 100%; /* Ocupa el ancho disponible. */
    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. */
    scroll-snap-type: x proximity; /* Las tarjetas se acomodan al soltar. */
    -webkit-overflow-scrolling: touch; /* Inercia en iOS. */
    touch-action: pan-x; /* Solo desplazamiento horizontal. */
}

/* Tarjeta de la variante táctil. */
.FeaturedProductsCarousel-mobile-card {
    scroll-snap-align: start; /* Punto de enganche del arrastre. */
    flex: 0 0 calc((100% - 2 * 16px) / 3); /* Tres a la vista; el resto se descubre desplazando. */
    display: flex; /* Apila imagen y cuerpo. */
    flex-direction: column; /* En columna. */
    background-color: #ffffff; /* Fondo de la tarjeta. */
    border: 1px solid rgba(15, 15, 18, 0.09); /* Filete tenue. */
    border-radius: 12px; /* Esquinas redondeadas. */
    overflow: hidden; /* Recorta la imagen a esas esquinas. */
    text-decoration: none; /* Es un enlace: sin subrayado. */
    color: inherit; /* No hereda el azul de enlace. */
    touch-action: pan-x; /* El arrastre desplaza la pista. */
    -webkit-user-drag: none; /* No dispara el arrastre nativo del enlace. */
    user-select: none; /* No selecciona el texto al arrastrar. */
    -webkit-user-select: none; /* Ídem, en WebKit. */
}

    /* Le gana al a:hover subrayado de Bootstrap. */
    .FeaturedProductsCarousel-mobile-card:hover,
    .FeaturedProductsCarousel-mobile-card:focus {
        text-decoration: none; /* Sin subrayado en ninguno de los dos estados. */
    }

/* Recuadro de la imagen en la variante táctil. */
.FeaturedProductsCarousel-mobile-card-media {
    position: relative; /* Origen del velo. */
    width: 100%; /* Ancho de la tarjeta. */
    height: 130px; /* Alto del nodo de tablet. */
    box-sizing: border-box; /* El relleno entra dentro del alto. */
    background-color: #e5e7eb; /* Respaldo mientras la imagen carga. */
    background-size: cover; /* El script pasa a contain cuando la foto no calza. */
    background-repeat: no-repeat; /* Una sola copia de la imagen. */
    background-position: center; /* Conserva el centro al recortar. */
}

/* Cuando no calza, la imagen entra entera con aire alrededor. */
.FeaturedProductsCarousel-mobile-card-media.is-mismatched {
    padding: 12px; /* Aire alrededor de la foto. */
    background-size: contain; /* Sin recortar. */
}

/* Mismo velo oscuro que la tarjeta de PC. */
.FeaturedProductsCarousel-mobile-card-media::after {
    content: ""; /* Necesario para que el pseudoelemento exista. */
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* Cubre el recuadro entero. */
    background: 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 export. */
    pointer-events: none; /* No intercepta clics. */
}

/* Cuerpo de la tarjeta táctil. */
.FeaturedProductsCarousel-mobile-card-body {
    display: flex; /* Apila los dos textos. */
    flex-direction: column; /* En columna. */
    gap: 3px; /* Separación del diseño. */
    padding: 14px 16px; /* Rellenos del diseño. */
}

/* Familia del producto en la variante táctil. */
.FeaturedProductsCarousel-mobile-card-eyebrow {
    margin: 0; /* Quita el margen propio del párrafo. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del diseño. */
    color: #0f0f12; /* Casi negro del diseño. */
}

/* Nombre del producto en la variante táctil. */
.FeaturedProductsCarousel-mobile-card-title {
    margin: 0; /* Quita el margen propio del título. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del diseño. */
    letter-spacing: 0.06em; /* Apertura del diseño. */
    text-transform: uppercase; /* Del diseño. */
    color: #243746; /* Mismo color que la tarjeta de PC. */
}

/* --- Tablet: hasta 1024px. El héroe y el carrusel quedan a ras, sin solape. --- */
@media (max-width: 1024px) {
    .FeaturedProductsCarousel {
        margin-top: 0; /* Sin solape sobre el héroe. */
        background-color: #f7f6f4; /* Fondo propio, ya sin el héroe detrás. */
    }

    .FeaturedProductsCarousel-content {
        padding: 32px 32px; /* Rellenos del nodo de tablet. */
    }

    .FeaturedProductsCarousel-carousel,
    .FeaturedProductsCarousel-pool {
        display: none; /* El carrusel de ranuras es solo de PC. */
    }

    .FeaturedProductsCarousel-mobile-track {
        display: flex; /* Aparece la pista de desplazamiento. */
    }
}

/* --- Mobile: hasta 500px. Mismas tarjetas, medidas más chicas. --- */
@media (max-width: 500px) {
    .FeaturedProductsCarousel-content {
        padding: 24px 20px; /* Rellenos del nodo de mobile. */
    }

    .FeaturedProductsCarousel-mobile-track {
        gap: 10px; /* Separación del nodo de mobile. */
    }

    .FeaturedProductsCarousel-mobile-card {
        flex: 0 0 calc((100% - 2 * 10px) / 3); /* Tres a la vista, con el gap de este rango. */
    }

    .FeaturedProductsCarousel-mobile-card-media {
        height: 84px; /* Alto del nodo de mobile. */
    }
}

/* El marcador del editor usa las clases WidgetPlaceholder de site.css, no este archivo. */