/* ============================================================
   BrandFilteredProductCarousel.css — Estilos propios del widget BrandFilteredProductCarousel
   Sitefinity Renderer
   ============================================================

   Una sola sección: encabezado con las flechas a la derecha, fila única de marcas desplazable y
   pista de tarjetas. Nodos de Figma: 3567:2357 y 3567:2382 (PC), 3567:2599 y 3567:2625 (mobile).
   Tablet sin nodo: medidas de escritorio con 3 tarjetas.

   Breakpoints: mobile hasta 500px, tablet hasta 1024px, laptop hereda escritorio.
   ============================================================ */

.BrandFilteredProductCarousel {
    --bfpc-gap: 18px; /* Separación entre tarjetas. */
    --bfpc-visible: 4; /* Tarjetas a la vista en escritorio. */
    width: 100%; /* Ocupa el ancho de su columna. */
    box-sizing: border-box; /* El relleno no suma ancho. */
    background-color: #ffffff; /* Fondo blanco del nodo. */
    padding: 32px 48px; /* Arriba y abajo, y lados de escritorio. */
    overflow-x: clip; /* Nada de la sección suma ancho al documento. */
}

/* --- Encabezado --- */
.BrandFilteredProductCarousel-header {
    display: flex; /* Textos a la izquierda, flechas a la derecha. */
    align-items: flex-start; /* Flechas alineadas con el antetítulo. */
    justify-content: space-between; /* Cada bloque a un extremo. */
    gap: 16px; /* Aire mínimo entre textos y flechas. */
    max-width: var(--container-max-width); /* Techo del sitio. */
    margin: 0 auto 24px; /* Centrado y separado de los filtros. */
}

/* Columna de antetítulo, título y descripción. */
.BrandFilteredProductCarousel-heading {
    display: flex; /* Apilados. */
    flex-direction: column; /* En columna. */
    gap: 10px; /* Separación del nodo. */
    min-width: 0; /* Cede ancho antes que las flechas. */
}

.BrandFilteredProductCarousel-eyebrow {
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Espaciado del nodo. */
    text-transform: uppercase; /* Mayúsculas. */
    color: #243746; /* Azul de marca. */
}

.BrandFilteredProductCarousel-eyebrow-dot {
    width: 7px; /* Cuadrado del nodo. */
    height: 7px; /* Ídem. */
    flex-shrink: 0; /* No se comprime. */
    background-color: #243746; /* Azul de marca. */
}

.BrandFilteredProductCarousel-title {
    margin: 0; /* Sin el margen del navegador. */
    font-size: 36px; /* Tamaño del nodo de escritorio. */
    font-weight: 700; /* Bold. */
    line-height: 1.2; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* Misma tipografía que ImageTileMosaic-description. */
.BrandFilteredProductCarousel-description {
    margin: 0; /* La separación la da el gap. */
    font-size: 16px; /* Tamaño estándar. */
    font-weight: 400; /* Regular. */
    line-height: 26px; /* Interlineado estándar. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar. */
    overflow-wrap: break-word; /* Una palabra larga no desborda. */
}

/* --- Flechas (estándar de ProductCarousel) --- */
.BrandFilteredProductCarousel-controls {
    display: flex; /* En fila. */
    flex: 0 0 auto; /* No se comprimen. */
    gap: 8px; /* Separación entre flechas. */
}

.BrandFilteredProductCarousel-control {
    display: inline-flex; /* Centra el chevron. */
    align-items: center; /* Ídem vertical. */
    justify-content: center; /* Ídem horizontal. */
    width: 32px; /* Círculo estándar. */
    height: 32px; /* Ídem. */
    padding: 0; /* Sin relleno del navegador. */
    border-radius: 16px; /* Círculo. */
    border: 1px solid rgba(15, 15, 18, 0.2); /* Borde estándar. */
    background-color: transparent; /* Transparente. */
    font-size: 15px; /* Base del tamaño del chevron. */
    color: rgba(15, 15, 18, 0.55); /* Gris estándar. */
    cursor: pointer; /* Clickeable. */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; /* Cambios suaves. */
}

.BrandFilteredProductCarousel-chevron-icon {
    width: 1.25em; /* Sigue el font-size del botón. */
    height: 1.25em; /* Cuadrado. */
    display: block; /* Sin línea base. */
    flex: none; /* No se comprime. */
    stroke: currentColor; /* Color del botón. */
    stroke-width: 2.5; /* Grosor estándar. */
    fill: none; /* Solo contorno. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

    .BrandFilteredProductCarousel-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06); /* Hover estándar. */
    }

    /* Apagadas en los extremos: confirman que se llegó al final. */
    .BrandFilteredProductCarousel-control:disabled {
        opacity: 0.35; /* Apagada. */
        cursor: default; /* Sin mano. */
    }

/* --- Fila de marcas --- */
.BrandFilteredProductCarousel-filters {
    display: flex; /* Una sola fila. */
    gap: 10px; /* Separación del nodo. */
    max-width: var(--container-max-width); /* Techo del sitio. */
    margin: 0 auto 24px; /* Centrada y separada de la pista. */
    overflow-x: auto; /* Desplazable cuando no entran todas. */
    overscroll-behavior-x: contain; /* Al llegar al final no arrastra la página. */
    scrollbar-width: none; /* Sin barra visible. */
}

    .BrandFilteredProductCarousel-filters::-webkit-scrollbar {
        display: none; /* Sin barra visible en WebKit. */
    }

.BrandFilteredProductCarousel-chip {
    flex: none; /* No se comprime: el texto va en un renglón. */
    margin: 0; /* Sin margen del navegador. */
    padding: 10px 16px; /* Relleno del nodo. */
    border: 1px solid rgba(15, 15, 18, 0.16); /* Borde del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #243746; /* Azul de marca. */
    color: #ffffff; /* Texto blanco. */
    font-family: inherit; /* Tipografía del sitio, no la del botón. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado del nodo. */
    white-space: nowrap; /* Un renglón. */
    cursor: pointer; /* Clickeable. */
    transition: background-color 0.2s ease-in-out; /* Cambio suave al activarse. */
}

    /* Marca elegida: 25% más clara. */
    .BrandFilteredProductCarousel-chip[aria-pressed="true"] {
        background-color: #5B6974; /* Azul aclarado. */
    }

    .BrandFilteredProductCarousel-chip:focus-visible {
        outline: 2px solid #243746; /* Foco visible. */
        outline-offset: 2px; /* Separado del chip. */
    }

/* --- Pista de tarjetas --- */
.BrandFilteredProductCarousel-viewport {
    max-width: var(--container-max-width); /* Techo del sitio. */
    margin-inline: auto; /* Centrada. */
}

.BrandFilteredProductCarousel-track {
    display: flex; /* Tarjetas en fila; todas con el alto de la más alta. */
    gap: var(--bfpc-gap); /* Separación entre tarjetas. */
    overflow-x: auto; /* Desplazamiento nativo. */
    overscroll-behavior-x: contain; /* Al llegar al final no arrastra la página. */
    scroll-behavior: smooth; /* Para el clic de las flechas. */
    scrollbar-width: none; /* Sin barra visible. */
}

    .BrandFilteredProductCarousel-track::-webkit-scrollbar {
        display: none; /* Sin barra visible en WebKit. */
    }

    /* Mientras se arrastra con el mouse la pista acompaña al puntero sin interpolar. */
    .BrandFilteredProductCarousel-track.is-dragging {
        scroll-behavior: auto; /* Sin suavizado. */
    }

.BrandFilteredProductCarousel-card {
    display: flex; /* Imagen arriba, cuerpo abajo. */
    flex: 0 0 calc((100% - var(--bfpc-gap) * (var(--bfpc-visible) - 1)) / var(--bfpc-visible)); /* N tarjetas exactas por pantalla. */
    flex-direction: column; /* Apiladas. */
    min-width: 0; /* El texto no estira la tarjeta. */
    box-sizing: border-box; /* El borde no suma ancho. */
    background-color: #ffffff; /* Blanco. */
    border: 1px solid rgba(15, 15, 18, 0.09); /* Borde del nodo. */
    border-radius: 12px; /* Esquinas del nodo. */
    overflow: hidden; /* La imagen respeta las esquinas. */
    color: inherit; /* Los textos ponen su color. */
    text-decoration: none; /* Nunca subrayado. */
}

    /* Los cinco estados: el a:hover de Bootstrap le gana a la regla base. */
    .BrandFilteredProductCarousel-card--link:link,
    .BrandFilteredProductCarousel-card--link:visited,
    .BrandFilteredProductCarousel-card--link:hover,
    .BrandFilteredProductCarousel-card--link:focus,
    .BrandFilteredProductCarousel-card--link:active {
        color: inherit; /* Sin azul de enlace. */
        text-decoration: none; /* Nunca subrayado. */
    }

    .BrandFilteredProductCarousel-card--link:focus-visible {
        outline: 2px solid #243746; /* Foco visible. */
        outline-offset: -2px; /* Adentro: la pista recorta lo de afuera. */
    }

.BrandFilteredProductCarousel-card-media {
    position: relative; /* Ancla del velo. */
    flex: none; /* No se comprime. */
    height: 210px; /* Alto del nodo de escritorio. */
    overflow: hidden; /* Recorta el acercamiento. */
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%); /* Fondo mientras carga o sin imagen. */
}

.BrandFilteredProductCarousel-card-image {
    display: block; /* Sin hueco de línea. */
    width: 100%; /* Llena el recuadro. */
    height: 100%; /* Ídem. */
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: contain; /* El producto entra entero, como en el nodo. */
    transition: transform 0.3s ease-in-out; /* Acercamiento suave. */
}

/* Velo oscuro en la parte baja de la imagen. Solo con la casilla del editor encendida. */
.BrandFilteredProductCarousel--veil .BrandFilteredProductCarousel-card-media::after {
    content: ""; /* Pseudo-elemento vacío. */
    position: absolute; /* Sobre la imagen. */
    inset: 0; /* La cubre entera. */
    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 nodo. */
    pointer-events: none; /* No intercepta el clic. */
}

/* Acercamiento sutil: solo la tarjeta con enlace. */
.BrandFilteredProductCarousel-card--link:hover .BrandFilteredProductCarousel-card-image,
.BrandFilteredProductCarousel-card--link:focus-visible .BrandFilteredProductCarousel-card-image {
    transform: scale(1.05); /* Acercamiento estándar. */
}

/* Cuerpo: el enlace va pegado a la descripción, no al pie de la tarjeta. */
.BrandFilteredProductCarousel-card-body {
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    gap: 5px; /* Separación del nodo. */
    padding: 14px 16px 16px; /* Relleno del nodo. */
}

/* Marca: nodo 3567:2397. */
.BrandFilteredProductCarousel-card-brand {
    margin: 0; /* Sin margen del navegador. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Espaciado del nodo. */
    text-transform: uppercase; /* Mayúsculas. */
    color: #243746; /* Azul de marca. */
}

/* Nombre: nodo 3567:2399. */
.BrandFilteredProductCarousel-card-title {
    margin: 0; /* Sin margen del navegador. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: #0f0f12; /* Casi negro. */
}

/* SKU: nodo 3567:2400. */
.BrandFilteredProductCarousel-card-code {
    margin: 0; /* Sin margen del navegador. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
}

/* Descripción corta: nodo 3567:2398. */
.BrandFilteredProductCarousel-card-description {
    margin: 0; /* Sin margen del navegador. */
    font-size: 12px; /* Tamaño del nodo. */
    font-weight: 400; /* Regular. */
    line-height: 1.3; /* Interlineado del nodo. */
    color: #66666b; /* Gris del nodo. */
}

/* Marca, nombre, SKU y descripción: máximo dos renglones con puntos suspensivos. */
.BrandFilteredProductCarousel-card-brand,
.BrandFilteredProductCarousel-card-title,
.BrandFilteredProductCarousel-card-code,
.BrandFilteredProductCarousel-card-description {
    overflow-wrap: anywhere; /* Parte también dentro de una palabra sin espacios. */
    display: -webkit-box; /* Necesario para el recorte por renglones. */
    -webkit-box-orient: vertical; /* Ídem. */
    -webkit-line-clamp: 2; /* Tope de renglones. */
    line-clamp: 2; /* Ídem, versión estándar. */
    overflow: hidden; /* Recorta con puntos suspensivos. */
}

/* Leyenda del enlace: nodo 3567:2392, con la flecha estándar. */
.BrandFilteredProductCarousel-card-cta {
    display: inline-flex; /* Leyenda y flecha en línea. */
    align-items: center; /* Centradas entre sí. */
    align-self: flex-start; /* Solo el ancho de su texto. */
    gap: 6px; /* Separación estándar. */
    font-size: 13px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: normal; /* Interlineado del nodo. */
    color: #243746; /* Azul de marca. */
    transition: gap 0.2s ease-in-out; /* Animación estándar. */
}

    /* La flecha se corre con el hover o el foco de la tarjeta. */
    .BrandFilteredProductCarousel-card--link:hover .BrandFilteredProductCarousel-card-cta,
    .BrandFilteredProductCarousel-card--link:focus-visible .BrandFilteredProductCarousel-card-cta {
        gap: 10px; /* Separación estándar en hover. */
    }

.BrandFilteredProductCarousel-arrow {
    width: 14px; /* Tamaño estándar. */
    height: 14px; /* Cuadrada. */
    flex: none; /* No se comprime. */
    fill: none; /* Solo trazo. */
    stroke: currentColor; /* Color de la leyenda. */
    stroke-width: 2.75; /* Grosor estándar. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértice redondeado. */
}

/* Tarjeta de carga mientras llega una página. Los bloques grises son los de site.css. */
.BrandFilteredProductCarousel-card--skeleton .BrandFilteredProductCarousel-card-media {
    background: none; /* El degradado lo pone el bloque. */
}

.BrandFilteredProductCarousel-card--skeleton .Skeleton-box {
    height: 100%; /* Llena el recuadro de la imagen. */
    border-radius: 0; /* Las esquinas las pone la tarjeta. */
}

/* Mensaje sin productos. */
.BrandFilteredProductCarousel-empty {
    margin: 0; /* Sin margen del navegador. */
    padding: 48px 0; /* Ocupa el lugar de las tarjetas. */
    font-size: 16px; /* Tamaño estándar. */
    line-height: 26px; /* Interlineado estándar. */
    color: rgba(34, 42, 48, 0.75); /* Gris estándar. */
}

/* --- Tablet: hasta 1024px. Sin nodo: medidas de escritorio y 3 tarjetas. --- */
@media (max-width: 1024px) {
    .BrandFilteredProductCarousel {
        --bfpc-visible: 3; /* Tres tarjetas a la vista. */
        padding: 32px; /* Arriba y abajo, y lados de tablet. */
    }
}

/* --- Mobile: hasta 500px. Nodos 3567:2599 y 3567:2625. --- */
@media (max-width: 500px) {
    .BrandFilteredProductCarousel {
        --bfpc-visible: 2.15; /* Dos tarjetas y el asomo de la tercera. */
        padding: 24px 20px; /* Arriba y abajo, y lados de mobile. */
    }

    .BrandFilteredProductCarousel-header {
        margin-bottom: 12px; /* Separación del nodo. */
    }

    .BrandFilteredProductCarousel-title {
        font-size: 30px; /* Bajado de 38px para que entre al lado de las flechas. */
    }

    .BrandFilteredProductCarousel-filters {
        gap: 8px; /* Separación del nodo. */
    }

    .BrandFilteredProductCarousel-chip {
        font-weight: 500; /* Medium del nodo. */
        line-height: normal; /* Interlineado del nodo. */
    }

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

/* Movimiento reducido: desplazamiento y acercamiento instantáneos. */
@media (prefers-reduced-motion: reduce) {
    .BrandFilteredProductCarousel-track {
        scroll-behavior: auto; /* Sin suavizado. */
    }

    .BrandFilteredProductCarousel-card-image,
    .BrandFilteredProductCarousel-control,
    .BrandFilteredProductCarousel-chip,
    .BrandFilteredProductCarousel-card-cta {
        transition: none; /* Sin interpolación. */
    }

    .BrandFilteredProductCarousel-card--link:hover .BrandFilteredProductCarousel-card-cta,
    .BrandFilteredProductCarousel-card--link:focus-visible .BrandFilteredProductCarousel-card-cta {
        gap: 6px; /* La flecha no se corre. */
    }
}

/* --- Arrastre con el mouse: cursor de agarre solo donde hay un puntero que apunta. --- */
@media (hover: hover) {
    .BrandFilteredProductCarousel-track,
    .BrandFilteredProductCarousel-filters {
        cursor: grab; /* Se puede arrastrar. */
    }

    /* Durante el arrastre la clase va en el <html>: el mouse puede salirse sin soltar. */
    .BrandFilteredProductCarousel-is-grabbing,
    .BrandFilteredProductCarousel-is-grabbing * {
        cursor: grabbing !important; /* Agarrando. */
    }
}