/* ProductSpotlightSection.css — Producto destacado + lista lateral de productos secundarios.
   Nodos 2611:25511 (PC), 2611:31150 (tablet) y 2611:31358 (mobile) del Figma. Tipografía:
   site.css. En PC la sombra reemplaza el borde del nodo, para que coincida con las demás
   tarjetas de la página (más suave); el fondo gris sí se toma del nodo, igual en los tres
   rangos. */

.ProductSpotlightSection {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
}

.ProductSpotlightSection-container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    box-sizing: border-box;
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ProductSpotlightSection-header {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ProductSpotlightSection-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #243746;
}

.ProductSpotlightSection-eyebrow-dot {
    flex: 0 0 auto;
    width: min(7px, 100%);
    height: 7px;
    background-color: #243746;
}

.ProductSpotlightSection-title {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f0f12;
}

/* align-items:flex-start y no el stretch por defecto: con varios productos, la lista podía medir
   más que el destacado y el stretch simétrico de flex ESTIRABA AL DESTACADO para igualarla, en vez
   de acotar la lista -- quedaba más grande y con hueco vacío debajo del botón. */
.ProductSpotlightSection-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.ProductSpotlightSection-featured,
.ProductSpotlightSection-featured:link,
.ProductSpotlightSection-featured:visited,
.ProductSpotlightSection-featured:hover,
.ProductSpotlightSection-featured:focus,
.ProductSpotlightSection-featured:focus-visible,
.ProductSpotlightSection-featured:active {
    text-decoration: none;
    color: inherit;
}

.ProductSpotlightSection-featured {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #fafafa;
    border-radius: 6px;
    box-shadow: 0px 14px 34px -4px rgba(26, 20, 13, 0.14);
    overflow: hidden;
}

.ProductSpotlightSection-featured-media {
    position: relative;
    width: 100%;
    height: 300px;
    flex: none;
}

.ProductSpotlightSection-featured-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.ProductSpotlightSection-featured-badge {
    position: absolute;
    top: 15px;
    left: 22px;
    padding: 6px 12px;
    background-color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1b2d3a;
}

.ProductSpotlightSection-featured-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 28px 28px;
    background-color: #fafafa;
}

.ProductSpotlightSection-featured-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #0f0f12;
}

.ProductSpotlightSection-featured-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.55);
}

.ProductSpotlightSection-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-top: 6px;
    padding: 12px 22px;
    background-color: #243746;
    border-radius: 6px;
    font-size: 16px;
    color: #ffffff;
    /* Acercamiento sutil, mismo estándar que HelpCalloutSection-button: transform en vez de
       cambiar width/height, para no disparar reflow. */
    transform: scale(1);
    /* gap: animación estándar de la flecha (LegalLinksSection). */
    transition: transform 0.2s ease-in-out, gap 0.2s ease-in-out;
}

    /* El acercamiento reacciona al hover de TODA la tarjeta, no solo del botón. */
    .ProductSpotlightSection-featured:hover .ProductSpotlightSection-featured-cta,
    .ProductSpotlightSection-featured:focus-visible .ProductSpotlightSection-featured-cta {
        transform: scale(1.05);
    }

.ProductSpotlightSection-list-wrapper {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* max-height es el alto EXACTO del destacado en el nodo (300px de foto + 178px de cuerpo): un
   valor fijo, no el stretch de flex, para no depender de que el destacado y la lista midan lo
   mismo por casualidad. BARRA PROPIA Y SIEMPRE VISIBLE: la nativa se oculta porque los
   navegadores táctiles la esconden cuando no se está desplazando, y entonces no se sabe que hay
   más contenido. La propia es delgada y redondeada; se puede arrastrar con el mouse
   (ProductSpotlightSection.js), con la rueda, con el dedo o agarrando la barra misma. cursor:grab
   avisa que también se puede arrastrar el contenido. */
.ProductSpotlightSection-list {
    width: 100%;
    max-height: 478px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    cursor: grab;
    scrollbar-width: none;
    padding-right: 10px;
}

    .ProductSpotlightSection-list::-webkit-scrollbar {
        display: none;
    }

/* Barra propia: riel y pulgar. Solo se ve si la lista tiene contenido por desplazar (la clase
   has-overflow la pone ProductSpotlightSection.js). */
.ProductSpotlightSection-scrollbar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    width: 6px;
    border-radius: 3px;
    background-color: #eef1f3;
}

.ProductSpotlightSection-list-wrapper.has-overflow .ProductSpotlightSection-scrollbar {
    display: block;
}

.ProductSpotlightSection-scrollbar-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    min-height: 32px;
    border-radius: 3px;
    /* Mismo color que el botón del destacado, para que sea congruente. */
    background-color: #243746;
    cursor: grab;
    touch-action: none;
}

    /* Zona de toque más ancha que el pulgar visible, para el dedo. */
    .ProductSpotlightSection-scrollbar-thumb::before {
        content: "";
        position: absolute;
        inset: 0 -8px;
    }

/* Sombra que avisa que hay más productos arriba o abajo, según dónde esté la lista: tenue y corta,
   para no tapar el producto que queda a medio mostrar. ProductSpotlightSection.js la enciende solo
   hacia el lado donde todavía hay contenido, y no la enciende si no hay nada que desplazar. Deja
   libre la barra (10px de relleno + 6px de barra). */
.ProductSpotlightSection-list-shadow {
    position: absolute;
    left: 0;
    right: 16px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

.ProductSpotlightSection-list-shadow--top {
    top: 0;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

.ProductSpotlightSection-list-shadow--bottom {
    bottom: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(to top, rgba(15, 15, 18, 0.2) 0%, rgba(15, 15, 18, 0) 100%);
}

    .ProductSpotlightSection-list-shadow.ProductSpotlightSection-list-shadow--visible {
        opacity: 1;
    }

/* Encendida por ProductSpotlightSection.js mientras dura el arrastre: cursor de "agarrado" y sin
   selección de texto, que si no se corta se selecciona el título en vez de arrastrar la lista. */
html.ProductSpotlightSection-is-grabbing,
html.ProductSpotlightSection-is-grabbing .ProductSpotlightSection-list {
    cursor: grabbing;
}

html.ProductSpotlightSection-is-grabbing {
    user-select: none;
}

.ProductSpotlightSection-item {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    /* min-height y no height fijo: en PC el link va apilado debajo de la descripción, y una altura
       fija corta el CTA cuando el título o la descripción ocupan más de un renglón. */
    min-height: 100px;
    box-sizing: border-box;
    padding: 18px;
    background-color: #fafafa;
    border-radius: 6px;
    /* Acercamiento a nivel de TARJETA, no solo del link -- mismo estándar de transform que el
       botón del destacado. */
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}

    .ProductSpotlightSection-item:hover,
    .ProductSpotlightSection-item:focus-within {
        transform: scale(1.02);
    }

.ProductSpotlightSection-item-media {
    flex: none;
    width: min(96px, 100%);
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
}

.ProductSpotlightSection-item-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* En PC el link va apilado debajo de la descripción, dentro de la misma columna. */
.ProductSpotlightSection-item-content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ProductSpotlightSection-item-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ProductSpotlightSection-item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f0f12;
}

.ProductSpotlightSection-item-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.55);
}

/* Es el único elemento clickeable de la tarjeta lateral -- el resto del card ya no navega, para no
   pelear con el arrastre de la lista. */
.ProductSpotlightSection-item-cta,
.ProductSpotlightSection-item-cta:link,
.ProductSpotlightSection-item-cta:visited,
.ProductSpotlightSection-item-cta:hover,
.ProductSpotlightSection-item-cta:focus,
.ProductSpotlightSection-item-cta:focus-visible,
.ProductSpotlightSection-item-cta:active {
    text-decoration: none;
    color: #243746;
}

.ProductSpotlightSection-item-cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

    /* La flecha se corre al abrir la separación, sin animar transform. */
    .ProductSpotlightSection-featured:hover .ProductSpotlightSection-featured-cta,
    .ProductSpotlightSection-featured:focus-visible .ProductSpotlightSection-featured-cta,
    .ProductSpotlightSection-item:hover .ProductSpotlightSection-item-cta,
    .ProductSpotlightSection-item:focus-within .ProductSpotlightSection-item-cta {
        gap: 10px;
    }

/* Flecha estándar de LegalLinksSection. */
.ProductSpotlightSection-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Tablet: hasta 1024px. --- */
@media (max-width: 1024px) {
    .ProductSpotlightSection-container {
        padding: 48px 32px;
        gap: 20px;
    }

    .ProductSpotlightSection-header {
        gap: 6px;
    }

    .ProductSpotlightSection-eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.48px;
        color: #262b33;
    }

    .ProductSpotlightSection-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #262b33;
    }

    .ProductSpotlightSection-title {
        font-size: 24px;
    }

    /* Apilado y sin tope de alto: la página crece con la lista, sin scroll interno. */
    .ProductSpotlightSection-layout {
        flex-direction: column;
    }

    .ProductSpotlightSection-featured {
        flex: none;
        width: 100%;
        background-color: #fafafa;
        border-radius: 8px;
        box-shadow: none;
    }

    /* El wrapper es el hijo directo del layout ahora (no la lista): el que necesita el 100% para no
       encogerse con el align-items:flex-start de la base es este, no .list. */
    .ProductSpotlightSection-list-wrapper {
        width: 100%;
    }

    /* aspect-ratio solo, sin techo, crece sin límite con el ancho: cerca de 1024px la tarjeta se
       ve más alta que el nodo (dibujado sobre 768px). max-height la frena en el valor del nodo. */
    .ProductSpotlightSection-featured-media {
        aspect-ratio: 704 / 272;
        height: auto;
        max-height: 272px;
    }

    .ProductSpotlightSection-featured-badge {
        top: 14px;
        left: 14px;
        padding: 5px 10px;
        border-radius: 3px;
        font-size: 10px;
    }

    .ProductSpotlightSection-featured-body {
        padding: 20px 20px 24px;
    }

    .ProductSpotlightSection-featured-description {
        font-size: 14px;
        color: rgba(15, 15, 18, 0.7);
    }

    .ProductSpotlightSection-featured-cta {
        padding: 10px 18px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        background-color: #1b2d3a;
    }

    /* width:100% explícito: en columna, el align-items:flex-start de la base (necesario para el
       destacado en PC) encoge a sus hijos al ancho de su contenido en vez de ocupar todo el ancho
       -- por eso los cards se veían angostos, como recortados. */
    .ProductSpotlightSection-list {
        flex: none;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        cursor: auto;
        gap: 12px;
    }

    /* Sin scroll en tablet/mobile: se listan todos los productos, así que no hay nada que avisar. */
    .ProductSpotlightSection-list-shadow,
    .ProductSpotlightSection-scrollbar {
        display: none !important;
    }

    .ProductSpotlightSection-item {
        height: auto;
        gap: 14px;
        padding: 12px;
        background-color: #fafafa;
    }

    .ProductSpotlightSection-item-media {
        width: 64px;
        height: 64px;
        border-radius: 4px;
    }

    .ProductSpotlightSection-item-image {
        object-fit: cover;
    }

    /* En tablet/mobile el link vuelve a quedar a la derecha, junto al bloque de texto.
       align-items:flex-start y no center: con un nombre de producto largo (dos o tres renglones),
       centrado dejaba el link pegado contra el medio del título en vez de con aire alrededor. */
    .ProductSpotlightSection-item-content {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }

    .ProductSpotlightSection-item-title {
        overflow-wrap: break-word;
    }

    .ProductSpotlightSection-item-cta {
        margin-top: 2px;
    }

    .ProductSpotlightSection-item-body {
        flex: 1 1 0;
        min-width: 0;
    }

    .ProductSpotlightSection-item-title {
        font-size: 14px;
    }

    .ProductSpotlightSection-item-description {
        font-size: 12px;
        color: rgba(15, 15, 18, 0.6);
    }

    .ProductSpotlightSection-item-cta {
        font-size: 12px;
    }
}

/* --- Mobile: hasta 500px. Va después del bloque de tablet. --- */
@media (max-width: 500px) {
    .ProductSpotlightSection-container {
        padding: 32px 20px;
    }

    .ProductSpotlightSection-title {
        font-size: 20px;
    }

    .ProductSpotlightSection-featured-title {
        font-size: 20px;
    }

    .ProductSpotlightSection-featured-description {
        font-size: 13px;
    }
}

/* --- Movimiento reducido: la flecha no se corre. --- */
@media (prefers-reduced-motion: reduce) {
    /* Conserva el acercamiento del botón, sin la separación. */
    .ProductSpotlightSection-featured-cta {
        transition: transform 0.2s ease-in-out;
    }

    .ProductSpotlightSection-item-cta {
        transition: none;
    }

    .ProductSpotlightSection-featured:hover .ProductSpotlightSection-featured-cta,
    .ProductSpotlightSection-featured:focus-visible .ProductSpotlightSection-featured-cta,
    .ProductSpotlightSection-item:hover .ProductSpotlightSection-item-cta,
    .ProductSpotlightSection-item:focus-within .ProductSpotlightSection-item-cta {
        gap: 6px;
    }
}

/* --- Textos largos sin espacios (bug de QA, Pilares soluciones): con el máximo de caracteres, una palabra o una
   cadena sin espacios (ej. "//QA//QA//...") desbordaba la pantalla o quedaba cortada en tablet y
   mobile. Se corta donde haga falta en vez de salirse. Solo SUMA esta propiedad; no cambia nada
   con textos normales. --- */
.ProductSpotlightSection-eyebrow,
.ProductSpotlightSection-title,
.ProductSpotlightSection-featured-title,
.ProductSpotlightSection-featured-description,
.ProductSpotlightSection-item-title,
.ProductSpotlightSection-item-description {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}

/* --- BTCN-380: el botón del destacado y el link "Ver producto" de las laterales salen siempre, con
   un texto que carga el editor (hasta 30 caracteres). Con una cadena larga sin espacios se cortan
   en vez de desbordar la tarjeta. Solo SUMA reglas; con "Ver producto" no cambia nada. --- */
.ProductSpotlightSection-featured-cta {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.ProductSpotlightSection-item-cta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* En tablet/mobile el link va al lado del texto: con tope de ancho, un texto largo no deja al
   título sin lugar. "Ver producto" entra completo en una línea aun a 320px. */
@media (max-width: 1024px) {
    .ProductSpotlightSection-item-cta {
        max-width: 60%;
    }
}