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

   Widget GENERAL: tira de marcas destacadas, sin límite de cantidad, elegidas por el editor. Nodos
   de Figma (vertiente de Marcas): PC 1226:42972, tablet 1226:40051, mobile 1226:39697.

   El editor elige con qué disposición se reparten las tarjetas en tablet y mobile, y el escritorio
   siempre usa la fila. Nodos de Figma de la disposición: fila 1535:27309 (a medida de escritorio, y
   es la misma vista en los tres rangos), grilla en tablet 1535:19222 y en mobile 1535:19097.

   Va a sangre completa (fondo blanco hasta el borde real), con el contenido centrado dentro de
   --container-max-width, igual que el resto de las secciones del sitio.

   Breakpoints del @media propio: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px
   (hereda el diseño de escritorio, sin nodo propio en Figma), desktop de 1201px en adelante.
   ============================================================ */

.FeaturedBrandsStrip {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 40px 48px;
}

.FeaturedBrandsStrip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max-width);
    margin-inline: auto;
    margin-bottom: 20px;
}

.FeaturedBrandsStrip-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px; /* Tamaño chico, el del diseño y el que trae la instancia por defecto. */
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #243746;
}

/* Los otros dos tamaños que puede elegir el editor en el diseñador. Solo pisan el tamaño de letra:
   el cuadradito, el color y el interlineado del encabezado no se tocan.

   El chico NO tiene modificador propio: es el tamaño de la regla de arriba, así que una instancia
   publicada antes de que la propiedad existiera se sigue viendo igual sin clase extra.

   Son una decisión del editor y no del diseño, que no tiene nodo de Figma para estos dos tamaños.
   Valen igual en escritorio y en tablet; en mobile se reducen porque no entran (ver el @media de
   500px). */
.FeaturedBrandsStrip-eyebrow--medium {
    font-size: 23px;
}

.FeaturedBrandsStrip-eyebrow--large {
    font-size: 32px;
}

.FeaturedBrandsStrip-eyebrow-dot {
    width: 7px;
    height: 7px;
    background-color: #243746;
    flex-shrink: 0;
}

.FeaturedBrandsStrip-controls {
    display: flex;
    flex: 0 0 auto; /* No se comprimen: el par mide lo mismo con cualquier eyebrow. */
    gap: 8px;
}

    /* La pone el script cuando la mecánica activa no tiene nada que mover: todas las tarjetas
       entran en el ancho, o hay una sola página. Es distinto de apagar una flecha en un extremo
       --eso sigue siendo :disabled-- porque acá el par entero no cumple ninguna función. */
    .FeaturedBrandsStrip-controls.is-hidden {
        display: none;
    }

.FeaturedBrandsStrip-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid rgba(15, 15, 18, 0.2);
    background-color: transparent;
    font-size: 15px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    color: rgba(15, 15, 18, 0.55);
    cursor: pointer;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .FeaturedBrandsStrip-control:hover:not(:disabled) {
        background-color: rgba(15, 15, 18, 0.06);
    }

    /* Los controles se apagan (no se ocultan) en los extremos: el visitante ve las dos flechas
       siempre, y la deshabilitada le confirma que llegó al final. */
    .FeaturedBrandsStrip-control:disabled {
        opacity: 0.35;
        cursor: default;
    }

.FeaturedBrandsStrip-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid rgba(15, 15, 18, 0.12);
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    flex-shrink: 0;
}

    /* Bootstrap trae "a:hover { text-decoration: underline; }" por defecto, que le gana en
       especificidad a la regla base (una sola clase) -- se repite acá, en el mismo estado y con
       la misma especificidad, para ganarle. */
    .FeaturedBrandsStrip-card:hover,
    .FeaturedBrandsStrip-card:focus-visible,
    .FeaturedBrandsStrip-card:active {
        text-decoration: none;
    }

.FeaturedBrandsStrip-card-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 600; /* Acumin Pro Semibold del diseño. */
    color: rgba(15, 15, 18, 0.72);
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}

    /* :active cubre el toque en tablet/mobile, donde no hay :hover sostenido. */
    .FeaturedBrandsStrip-card:hover .FeaturedBrandsStrip-card-title,
    .FeaturedBrandsStrip-card:focus-visible .FeaturedBrandsStrip-card-title,
    .FeaturedBrandsStrip-card:active .FeaturedBrandsStrip-card-title {
        transform: scale(1.08);
    }

/* ------------------------------------------------------------
   Desktop: tira continua, scroll horizontal controlado por los botones.
   ------------------------------------------------------------ */
.FeaturedBrandsStrip-viewport--scroll {
    max-width: var(--container-max-width);
    margin-inline: auto;
    overflow: hidden;
}

/* El recorte va acá y no en el riel: el viewport es la ventana por la que se ve una página, y lo
   que sobresale a los costados es justamente el resto de las páginas. */
.FeaturedBrandsStrip-viewport--paged {
    display: none;
    overflow: hidden;
}

.FeaturedBrandsStrip-track {
    display: flex;
    gap: 16px;
    height: 92px;
    overflow-x: auto;
    overscroll-behavior-x: contain; /* El gesto muere en la pista: sin esto, al llegar al final arrastra la página. */
    scroll-behavior: smooth;
    scrollbar-width: none; /* El desplazamiento lo manejan los botones, no hace falta ver la barra. */
}

    .FeaturedBrandsStrip-track::-webkit-scrollbar {
        display: none;
    }

.FeaturedBrandsStrip-viewport--scroll .FeaturedBrandsStrip-card {
    width: 176px;
    height: 92px;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------
   Con la grilla --la disposición predeterminada-- tablet y mobile cambian de mecánica: en vez de
   una tira que se scrollea, las tarjetas se agrupan en páginas de 6 (ver Default.cshtml) -- una
   grilla que envuelve, con una sola página visible a la vez.

   Con la fila no cambia nada de eso: los dos rangos siguen mostrando la tira del escritorio, con
   las mismas tarjetas de 176x92, y lo único propio de cada rango es el relleno de la sección.

   EN LOS DOS CASOS LAS FLECHAS SIGUEN VISIBLES: no hay regla que las oculte en estos rangos, así
   que el visitante tiene las dos formas de mover --las flechas y el arrastre con el dedo-- y las
   dos operan la mecánica activa (ver FeaturedBrandsStrip.js). Lo único que las esconde es la clase
   is-hidden del script, cuando no hay nada que mover.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .FeaturedBrandsStrip {
        padding: 36px 32px 30px;
    }

    .FeaturedBrandsStrip-header {
        margin-bottom: 12px;
    }

    .FeaturedBrandsStrip-viewport--scroll {
        display: none;
    }

    /* La fila se queda con la tira en estos dos rangos. El modificador está en la SECCIÓN, así que
       le gana por especificidad a la regla de arriba sin necesidad de !important. */
    .FeaturedBrandsStrip--row .FeaturedBrandsStrip-viewport--scroll {
        display: block;
    }

    .FeaturedBrandsStrip-viewport--paged {
        display: block;
    }

    /* El riel lleva todas las páginas en fila y se corre un ancho completo por página. Su ancho es
       el del viewport --es un bloque-- así que un translateX de -100% cae exacto en la página
       siguiente, sin depender de cuántas páginas haya.

       El align-items al inicio deja cada página pegada arriba: la última suele tener menos
       tarjetas, y sin esto quedaría centrada a lo alto respecto de la más grande. */
    .FeaturedBrandsStrip-rail {
        display: flex;
        align-items: flex-start;
        transition: transform 0.35s ease-in-out;
    }

    /* CADA PÁGINA OCUPA EL ANCHO COMPLETO DEL VIEWPORT y no el de su contenido: es la otra mitad
       de lo que hace que el desplazamiento de 100% caiga justo. El flex-shrink en 0 es lo que las
       deja sobresalir en vez de comprimirse para entrar todas juntas. */
    .FeaturedBrandsStrip-page {
        flex: 0 0 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 224px));
        gap: 8px;
        justify-content: center;
    }

    /* LA CANTIDAD DE TARJETAS POR FILA LA FIJA LA GRILLA, NO EL ANCHO DISPONIBLE. Con flex-wrap
       eran las que entraran, así que el diseño de 3 solo se daba en una franja de anchos: MEDIDO,
       a 1024px entraban 4, a 700px entraban 2 y a 501px entraba 1.

       El minmax con mínimo 0 es lo que permite que la columna se angoste por debajo de los 224px
       del diseño cuando el rango no da para tanto, en vez de desbordar. */
    .FeaturedBrandsStrip-viewport--paged .FeaturedBrandsStrip-card {
        width: 100%;
        height: 60px;
    }

    /* VA SCOPEADO A LA GRILLA Y NO SUELTO: es la tipografía del diseño de la grilla en tablet y
       mobile. La fila usa las tarjetas del escritorio, y ahí el título es el de la regla base
       (16px Semibold), que es lo que dibuja el nodo de la fila. */
    .FeaturedBrandsStrip-viewport--paged .FeaturedBrandsStrip-card-title {
        font-size: 17px;
        font-weight: 900; /* Acumin Pro Black del diseño de tablet/mobile. */
    }
}

@media (max-width: 500px) {
    .FeaturedBrandsStrip {
        padding: 26px 20px 22px;
    }

    /* Los dos tamaños grandes del eyebrow se reducen acá. MEDIDO EN UN VIEWPORT DE 375px: el
       grande a 32px deja "MARCAS DESTACADAS" en 335px de tinta contra 335px de ancho útil, y el
       encabezado se parte en dos renglones. Con estos valores el texto predeterminado entra en un
       renglón con margen (unos 303px el grande y 255px el mediano) y se mantiene la jerarquía
       entre los tres tamaños.

       El chico no se toca: 14px mide 187px y entra de sobra. Tablet tampoco: ahí el grande mide
       395px contra 704px disponibles.

       OJO: el texto del eyebrow lo escribe el editor. Estos números son para el predeterminado de
       17 caracteres; uno bastante más largo se va a partir en dos renglones igual, y ahí el
       encabezado crece en alto en lugar de desbordar.

       Y OJO TAMBIÉN CON LAS FLECHAS: el par gasta 72px del renglón, así que en un teléfono angosto
       los dos tamaños grandes se parten en dos renglones aunque el texto sea el predeterminado. El
       chico, que es el de la instancia nueva, entra en uno solo. */
    .FeaturedBrandsStrip-eyebrow--medium {
        font-size: 20px;
    }

    .FeaturedBrandsStrip-eyebrow--large {
        font-size: 24px;
    }

    /* Dos columnas fijas, por el mismo motivo que las tres de tablet: con flex-wrap, MEDIDO, a
       360px --que es un ancho de teléfono muy común-- entraba una sola tarjeta por fila. */
    .FeaturedBrandsStrip-page {
        grid-template-columns: repeat(2, minmax(0, 162px));
    }

    /* El ancho lo sigue poniendo la regla de tablet (100% de la columna, que la grilla topea en
       162px); acá solo cambia el alto del diseño de mobile. */
    .FeaturedBrandsStrip-viewport--paged .FeaturedBrandsStrip-card {
        height: 56px;
    }
}

/* El desplazamiento del riel es la única animación del widget, así que respeta la preferencia del
   sistema: sin ella el cambio de página es instantáneo, pero sigue funcionando igual. */
@media (prefers-reduced-motion: reduce) {
    .FeaturedBrandsStrip-rail {
        transition: none;
    }
}

/* El marcador de posición que este widget muestra en el editor cuando no tiene contenido NO se
   estiliza acá: usa las clases WidgetPlaceholder de site.css, comunes a todos los widgets. */