/* ============================================================
   ResourceSpotlightCarousel.css — Estilos propios del widget ResourceSpotlightCarousel
   Bticino Mx · Sitefinity Renderer
   ============================================================

   Carrusel de recursos con una tarjeta destacada. Nodos de Figma: 3944:58936 (PC), 3944:59426 (tablet),
   3944:60231 (mobile) y 3944:58931 (encabezado). Tipografía: site.css.

   MODELO DEL MOVIMIENTO: ranuras FIJAS en posición y tamaño; las tarjetas se mudan de ranura con un
   fundido y LO ÚNICO QUE SE ANIMA ES LA OPACIDAD. El estado (destacada, vecina, lejana) es una
   propiedad de la RANURA, no de la tarjeta: por eso las reglas van como descendientes de la ranura.
   El alto de la ranura destacada lo da su contenido, con la proporción del nodo como piso; NO se
   mide con JS.

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

/* --- Sección: fondo blanco y variables del cruce. --- */
.ResourceSpotlightCarousel {
    background-color: #ffffff;
    /* Las ranuras lejanas se salen del marco a propósito: el desborde muere acá. clip y no hidden,
       porque hidden convertiría la sección en contenedor de desplazamiento y cortaría la sombra. */
    overflow-x: clip;
    --ResourceSpotlightCarousel-duration: 500ms; /* Misma duración que TRANSITION_MS del JS. */
    --ResourceSpotlightCarousel-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Contenido centrado dentro del techo del sitio, con 30px arriba y abajo. */
.ResourceSpotlightCarousel-content {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    box-sizing: border-box;
    padding: 30px 48px;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* --- Encabezado (nodo 3944:58931). --- */
.ResourceSpotlightCarousel-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.ResourceSpotlightCarousel-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    color: #1b2d3a;
}

.ResourceSpotlightCarousel-eyebrow-dot {
    width: 8px;
    height: 8px;
    flex: none;
    background-color: #1b2d3a;
}

.ResourceSpotlightCarousel-title {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    line-height: normal;
    color: #0f0f12;
}

/* Escenario: el carrusel con su depósito y su paginación. */
.ResourceSpotlightCarousel-stage {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- Carrusel de escritorio. El max-width fija el tamaño de las tarjetas, que son porcentajes de
   esta caja; es 1280px porque las lejanas se salen del marco. --- */
.ResourceSpotlightCarousel-carousel {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* Flechas de navegación, superpuestas a las tarjetas. */
.ResourceSpotlightCarousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2; /* Sobre las tarjetas. */
    width: clamp(40px, 6vw, 52px);
    height: clamp(40px, 6vw, 52px);
    border-radius: 50%;
    border: 1px solid rgba(15, 15, 18, 0.14);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    color: rgba(15, 15, 18, 0.65);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Chevron en SVG: el glifo de texto caía bajo el centro por las métricas de la fuente. */
.ResourceSpotlightCarousel-chevron-icon {
    width: 1em;
    height: 1em;
    display: block;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ResourceSpotlightCarousel-arrow--prev {
    left: 2.34375%; /* Los 30px de separación del nodo, sobre los 1280 del marco. */
}

/* La flecha siguiente va en oscuro, como en el nodo. La navegación es circular: sin :disabled. */
.ResourceSpotlightCarousel-arrow--next {
    right: 2.34375%;
    background-color: #0f0f12;
    color: #ffffff;
}

/* Área visible SIN recorte: las lejanas asoman por fuera y la sombra de la destacada baja unos 45px. */
.ResourceSpotlightCarousel-viewport {
    position: relative;
    overflow: visible;
}

/* Fila de ranuras: contenedor de posicionamiento, no fila flex (las vecinas van en absoluto y la
   destacada se superpone). Su alto lo da la destacada, que va en el flujo de esta celda; la proporción
   del marco queda de piso en el ::before. */
.ResourceSpotlightCarousel-track {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas: "stack";
    grid-template-columns: minmax(0, 1fr); /* Columna fija al ancho del marco. */
}

.ResourceSpotlightCarousel-track::before {
    content: "";
    grid-area: stack;
    align-self: start; /* Sin esto no hay piso: estirado, la proporción se ignora. */
    aspect-ratio: 1280 / 500;
}

/* Ranura lejana (la base): posición y ancho absolutos, en porcentaje del marco. */
.ResourceSpotlightCarousel-slot {
    position: absolute;
    top: 20.65%; /* 120/581 del marco. */
    width: 20.3125%; /* 260/1280. */
    aspect-ratio: 260 / 256; /* Alto fijo, necesario para el fundido. */
    background-color: #ffffff;
    border: 1px solid rgba(15, 15, 18, 0.08);
    border-radius: 6px;
    opacity: 0.3;
    overflow: hidden;
}

.ResourceSpotlightCarousel-slot--far:first-child {
    left: -11.71875%; /* -150/1280. */
}

.ResourceSpotlightCarousel-slot--far:last-child {
    left: 91.40625%; /* 1170/1280. */
}

/* Ranura vecina: más grande y menos apagada que la lejana. */
.ResourceSpotlightCarousel-slot--near {
    top: 14.8%; /* 86/581. */
    width: 22.65625%; /* 290/1280. */
    aspect-ratio: 290 / 303;
    opacity: 0.55;
}

/* Izquierda y derecha por vecindad con la destacada, no por posición en la fila: la cantidad de
   ranuras depende de la cantidad de tarjetas. */
.ResourceSpotlightCarousel-slot--near:has(+ .ResourceSpotlightCarousel-slot--active) {
    left: 8.75%; /* 112/1280. */
}

.ResourceSpotlightCarousel-slot--active + .ResourceSpotlightCarousel-slot--near {
    left: 68.59375%; /* 878/1280. */
}

/* Ranura destacada: en el flujo del marco, y es la que le da el alto. */
.ResourceSpotlightCarousel-slot--active {
    position: relative;
    grid-area: stack;
    justify-self: center;
    align-self: start;
    top: auto;
    left: auto;
    margin-top: 0.9375%; /* 12/1280: fracción del ANCHO, así sigue la escala del marco. */
    width: 59.140625%; /* 757/1280. */
    display: grid; /* Apila tarjeta y fantasma en una sola celda. */
    grid-template-areas: "stack";
    grid-template-columns: minmax(0, 1fr);
    aspect-ratio: auto; /* Manda el contenido, no la proporción. */
    /* El gesto horizontal lo lee el JS: sin esto el navegador se queda con el eje x y corta el gesto. */
    touch-action: pan-y;
    z-index: 1; /* Sobre las vecinas. */
    opacity: 1;
    border: 1.5px solid rgba(66, 156, 222, 0.25);
    border-radius: 6px;
    box-shadow: 0 22px 52px -6px rgba(31, 20, 10, 0.22);
}

/* Piso de la destacada: proporción del nodo como alto mínimo. */
.ResourceSpotlightCarousel-slot--active::before {
    content: "";
    grid-area: stack;
    align-self: start;
    aspect-ratio: 757 / 467;
}

/* La tarjeta destacada vuelve al flujo. El fantasma queda en absoluto y no aporta alto. */
.ResourceSpotlightCarousel-slot--active > .ResourceSpotlightCarousel-card:not(.ResourceSpotlightCarousel-ghost) {
    position: relative;
    inset: auto;
    grid-area: stack;
}

.ResourceSpotlightCarousel-slot:not(.ResourceSpotlightCarousel-slot--active) {
    cursor: pointer;
}

/* Cursor de agarre solo donde hay un puntero que apunta, y solo en la destacada (la única que se
   arrastra). Durante el arrastre la clase va en el <html>: el gesto se cierra en la ventana. */
@media (hover: hover) {
    .ResourceSpotlightCarousel-slot--active {
        cursor: grab;
    }

    .ResourceSpotlightCarousel-is-grabbing,
    .ResourceSpotlightCarousel-is-grabbing * {
        cursor: grabbing !important;
    }
}

/* Tarjeta: ocupa la ranura entera en absoluto para que el alto lo mande la ranura y la que entra
   conviva con el fantasma de la que sale. Sin fondo propio: el blanco lo pone la ranura. */
.ResourceSpotlightCarousel-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transition: opacity var(--ResourceSpotlightCarousel-duration) var(--ResourceSpotlightCarousel-easing);
}

/* Partida de la tarjeta que entra: el JS la pone, fuerza un reflujo y la saca. */
.ResourceSpotlightCarousel-card.is-entering {
    opacity: 0;
}

/* Fantasma: copia de la que sale, se desvanece en su lugar. */
.ResourceSpotlightCarousel-ghost {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ResourceSpotlightCarousel-ghost.is-leaving {
    opacity: 0;
}

/* Depósito de las tarjetas fuera de escena. */
.ResourceSpotlightCarousel-pool {
    display: none;
}

/* Recuadro de la imagen: proporción de la tarjeta lejana; vecina y destacada la pisan. */
.ResourceSpotlightCarousel-card-media {
    position: relative;
    flex-shrink: 0;
    min-height: 0; /* Sin esto el aspect-ratio no se cumple: gana el alto intrínseco del archivo. */
    aspect-ratio: 260 / 147;
    background: linear-gradient(157deg, #f2f1ef 7%, #e1e0de 79%); /* Respaldo mientras carga. */
}

.ResourceSpotlightCarousel-slot--near .ResourceSpotlightCarousel-card-media {
    aspect-ratio: 290 / 170;
}

.ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-media {
    aspect-ratio: 757 / 314;
}

.ResourceSpotlightCarousel-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cuerpo de la tarjeta. min-height auto y overflow visible: con min-height 0 y overflow hidden,
   Chrome colapsa el título y la descripción (que usan line-clamp) en vez de recortarlos. */
.ResourceSpotlightCarousel-card-body {
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 2vw, 20px);
}

.ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-body {
    padding: clamp(6px, 1vw, 8px) clamp(18px, 3vw, 28px) clamp(18px, 2.5vw, 26px);
}

/* Título de una tarjeta lateral, tope de dos líneas (la ranura tiene alto fijo). */
.ResourceSpotlightCarousel-card-title {
    margin: 0;
    color: #0f0f12;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Título de la destacada: 36px Black, centrado. */
.ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-title {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2; /* Con 1.05 el descendente de una "g" se recortaba. */
    letter-spacing: -0.5px;
    text-align: center;
}

/* Descripción de una tarjeta lateral, tope de tres líneas. */
.ResourceSpotlightCarousel-card-description {
    color: rgba(15, 15, 18, 0.5);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Descripción de la destacada: sin tope de líneas ni centrado, solo el título se centra. */
.ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-description {
    color: rgba(15, 15, 18, 0.6);
    margin-bottom: 12px;
    display: block;
    overflow: visible;
}

/* Botón del enlace, exclusivo de la ranura destacada. */
.ResourceSpotlightCarousel-card-cta {
    display: none;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 193px;
    background-color: #243746;
    font-size: 16px;
    font-weight: 400;
    border-radius: 6px;
    padding: 12px 22px;
    transition: gap 0.2s ease-in-out; /* Animación estándar de LegalLinksSection. */
}

.ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-cta {
    display: inline-flex;
}

/* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
.ResourceSpotlightCarousel-card-cta,
.ResourceSpotlightCarousel-card-cta:link,
.ResourceSpotlightCarousel-card-cta:visited,
.ResourceSpotlightCarousel-card-cta:hover,
.ResourceSpotlightCarousel-card-cta:focus,
.ResourceSpotlightCarousel-card-cta:active {
    color: #ffffff;
    text-decoration: none;
}

.ResourceSpotlightCarousel-card-cta:hover,
.ResourceSpotlightCarousel-card-cta:focus-visible {
    gap: 10px;
}

.ResourceSpotlightCarousel-card-cta:hover {
    background-color: #1a2833;
}

/* Leyenda: dos renglones como máximo; lo que sobra se corta con puntos suspensivos. */
.ResourceSpotlightCarousel-cta-text {
    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. */
    min-width: 0; /* Cede ancho a la flecha. */
    overflow: hidden; /* Recorta lo que no entra. */
    overflow-wrap: anywhere; /* Una palabra larga parte en vez de desbordar. */
}

/* Flecha estándar de LegalLinksSection. */
.ResourceSpotlightCarousel-cta-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-inline-end: 4px; /* Botón de ancho fijo y centrado: la reserva va adentro, así el texto no se corre. */
    transition: margin-inline-end 0.2s ease-in-out; /* Al mismo ritmo que el gap. */
}

/* Cede la reserva al abrirse la separación: el grupo centrado mide lo mismo y solo avanza la flecha. */
.ResourceSpotlightCarousel-card-cta:hover .ResourceSpotlightCarousel-cta-arrow,
.ResourceSpotlightCarousel-card-cta:focus-visible .ResourceSpotlightCarousel-cta-arrow {
    margin-inline-end: 0;
}

/* --- Puntos y contador: uno por tarjeta; el ancho de la fila no cambia al navegar. --- */
.ResourceSpotlightCarousel-dots {
    display: flex;
    flex-wrap: wrap; /* Con muchos recursos los puntos bajan a otro renglón en vez de salirse de la pantalla (BTCN-357). */
    align-items: center;
    justify-content: center;
    gap: 7px;
    row-gap: 10px; /* Aire entre renglones de puntos. */
    max-width: 100%; /* Nunca más ancha que el carrusel: los primeros puntos y el contador quedan siempre a la vista. */
    min-width: 0;
}

.ResourceSpotlightCarousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: rgba(15, 15, 18, 0.18);
    border: none;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: width var(--ResourceSpotlightCarousel-duration) var(--ResourceSpotlightCarousel-easing),
                background-color var(--ResourceSpotlightCarousel-duration) var(--ResourceSpotlightCarousel-easing);
}

.ResourceSpotlightCarousel-dot.is-active {
    width: 26px;
    background-color: #364054;
}

/* Contador: caja de referencia del fundido del número, que el JS clona y superpone. */
.ResourceSpotlightCarousel-counter {
    position: relative;
    display: inline-block;
    color: rgba(15, 15, 18, 0.5);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin-left: 7px;
    white-space: nowrap;
}

.ResourceSpotlightCarousel-counter-value {
    display: block;
    opacity: 1;
    transition: opacity var(--ResourceSpotlightCarousel-duration) var(--ResourceSpotlightCarousel-easing);
}

.ResourceSpotlightCarousel-counter-value.is-entering {
    opacity: 0;
}

/* Movimiento reducido: no se apaga la navegación, solo el cruce. Sin "transition: none" para
   conservar el mismo comportamiento del JS. */
@media (prefers-reduced-motion: reduce) {
    .ResourceSpotlightCarousel-card,
    .ResourceSpotlightCarousel-ghost,
    .ResourceSpotlightCarousel-dot,
    .ResourceSpotlightCarousel-counter-value {
        transition-duration: 0.01ms !important;
    }

    .ResourceSpotlightCarousel-card-cta,
    .ResourceSpotlightCarousel-cta-arrow {
        transition: none;
    }

    /* La reserva se queda. */
    .ResourceSpotlightCarousel-card-cta:hover .ResourceSpotlightCarousel-cta-arrow,
    .ResourceSpotlightCarousel-card-cta:focus-visible .ResourceSpotlightCarousel-cta-arrow {
        margin-inline-end: 4px;
    }

    .ResourceSpotlightCarousel-card-cta:hover,
    .ResourceSpotlightCarousel-card-cta:focus-visible {
        gap: 6px;
    }
}

/* --- Tablet: tarjeta única a todo el ancho, con paginación por puntos y arrastre. Se reutiliza el
   mismo carrusel: se ocultan las ranuras lateral y las flechas. --- */
@media (max-width: 1024px) {
    .ResourceSpotlightCarousel-arrow {
        display: none;
    }

    /* Sin piso: no hay ranuras laterales que sostener. */
    .ResourceSpotlightCarousel-track::before {
        content: none;
    }

    .ResourceSpotlightCarousel-slot--far,
    .ResourceSpotlightCarousel-slot--near {
        display: none;
    }

    .ResourceSpotlightCarousel-slot--active {
        margin-top: 0;
        width: 100%;
    }

    /* Piso de la destacada con techo: una proporción sola seguiría creciendo con el ancho y dejaría
       aire muerto bajo el botón. */
    .ResourceSpotlightCarousel-slot--active::before {
        aspect-ratio: 704 / 471;
        max-height: 471px;
    }

    .ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-media {
        aspect-ratio: 704 / 300;
    }

    .ResourceSpotlightCarousel-content {
        padding: 30px 32px;
        gap: 40px;
    }
}

/* --- Mobile: la misma tarjeta única con las medidas del nodo de mobile (título de 20px). --- */
@media (max-width: 500px) {
    .ResourceSpotlightCarousel-content {
        padding-inline: 20px;
    }

    .ResourceSpotlightCarousel-slot--active::before {
        aspect-ratio: 335 / 383;
        max-height: 383px;
    }

    .ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-media {
        aspect-ratio: 335 / 200;
    }

    .ResourceSpotlightCarousel-slot--active .ResourceSpotlightCarousel-card-title {
        font-size: 20px;
        line-height: 1.2; /* Con 1.05 el descendente de una "g" se recorta. */
    }
}