/* =========================================================================
   SkyAutomate — Carrusel de Pósters "Cursos IA" + Banda de Flujo
   v2.5.0 (2026-10-24) — archivo NUEVO, no modifica styles.css

   Componente autocontenido: el JS (carousel.js) y el CSS (carousel.css) viven
   aparte para poder iterar el carrusel sin tocar la hoja base compartida.
   Al final, index.html lleva 2 lineas nuevas:
     <link rel="stylesheet" href="carousel.css?v=1">
     <script src="carousel.js?v=1"></script>

   DISENO
   - Pila (stack) de slides: solo una activa a la vez, crossfade.
   - Las vecinas NO se ven: solo el poster activo, con un mazo de cartas
     dibujado debajo (::before/::after) para dar profundidad sin ensuciar.
   - El alto lo manda --cursos-h; el ancho se deriva de la relacion de aspecto
     real del flyer (1005x1300 = 0.773) para que NUNCA se deforme.
   - Debajo: pie de foto (titulo del curso) + indicadores y navegacion.

   NOTA reduced-motion: el bloque global de styles.css deja las transiciones en
   0.01ms !important, asi que bajo reduced-motion el crossfade se vuelve un
   corte instantaneo. La ROTACION sigue activa (es contenido, no decoracion) —
   mismo criterio que el diagrama del hero, que tambien se anima igual.
   ========================================================================= */

/* --- El carrusel dentro del hero --------------------------------------
   El titulo "PROXIMOS EVENTOS" vive aqui, encima de los volantes: en
   escritorio queda sobre el carrusel de la columna derecha y en movil esa
   seccion completa va PRIMERO (ver `order` mas abajo). */
.hero-visual.hero-visual--cursos {
    height: auto;
    flex-direction: column;
    align-items: center;
}

.hero-visual.hero-visual--cursos .cursos-carousel {
    --cursos-h: 400px;
    --cursos-gap: 20px;
}

.cursos-carousel {
    /* Alto del poster en CSS px. Cada variante lo sobreescribe. */
    --cursos-h: 440px;
    --cursos-w: calc(var(--cursos-h) * 1005 / 1300);
    --cursos-gap: 18px;

    position: relative;
    width: 100%;
}

/* --- Escenario ---------------------------------------------------------- */
.cursos-carousel-stage {
    position: relative;
    height: var(--cursos-h);
    width: 100%;
}

/* Mazo de cartas: dos hojas asomando por debajo del poster activo.
   Es un detalle de profundidad, NO un segundo contenido visible: con 3
   posters, mostrar las vecinas al 30% se leia como tres flyers encimados. */
.cursos-carousel-stage::before,
.cursos-carousel-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    width: var(--cursos-w);
    height: var(--cursos-h);
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    transform: translateX(-50%);
    z-index: 0;
}

.cursos-carousel-stage::before {
    top: 14px;
    opacity: 0.45;
}

.cursos-carousel-stage::after {
    top: 7px;
    opacity: 0.7;
}

/* --- Slide -------------------------------------------------------------- */
.cursos-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--cursos-w);
    aspect-ratio: 1005 / 1300;
    transform: translateX(-50%) scale(0.97);
    opacity: 0;
    z-index: 1;
    text-decoration: none;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.cursos-slide.is-active {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    z-index: 3;
    pointer-events: auto;
}

/* Las vecinas NO se ven: solo el poster activo. El mazo de cartas de arriba
   da la sensacion de profundidad sin ensuciar la lectura. */
.cursos-slide[data-carousel-pos="-1"],
.cursos-slide[data-carousel-pos="1"] {
    opacity: 0;
    transform: translateX(-50%) scale(0.97);
}

.cursos-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    background: var(--bg-surface);
}

/* En modo claro la sombra dura se ve sucia: se suaviza. */
body.light-theme .cursos-slide img {
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
}

/* --- Barra de control --------------------------------------------------- */
.cursos-carousel-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.cursos-dots {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.cursos-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-focus);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cursos-dot:hover {
    border-color: var(--sky);
}

.cursos-dot[aria-current="true"] {
    background: var(--sky);
    border-color: var(--sky);
    box-shadow: 0 0 10px var(--sky-soft);
}

.cursos-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
}

.cursos-nav:hover {
    color: var(--text-primary);
    border-color: var(--sky);
    background: var(--bg-surface-hover);
}

.cursos-nav svg {
    width: 15px;
    height: 15px;
}

/* --- Pie de foto (titulo del curso en curso) --------------------------- */
.cursos-caption {
    margin: 0.85rem auto 0;
    max-width: var(--cursos-w);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    min-height: 1.2em;
}

.cursos-caption strong {
    color: var(--text-secondary);
    font-weight: 500;
}

/* =========================================================================
   CTA DE INSCRIPCION (v2.8.0)

   Bloque bajo el carrusel: SOLO el boton que lleva al formulario de
   inscripcion de la UNAQ. Sin mensaje, sin panel, sin segunda via: el
   pedido de JLCR fue "abajo del carrusel solo aparezca un boton que diga
   Inscribirse y mande al forms, ya por sencilles".

   - El ancho se amarra a `--cursos-w` (el ancho real del poster) para que
     el boton quede centrado bajo el volante. En movil `--cursos-w` es 100%
     y el boton ocupa el ancho completo, igual que el poster.
   - El boton es solido con `--sky`, el MISMO tratamiento que `.btn-primary`
     del hero: no se abre un color nuevo para una accion secundaria.
   - El icono de Lucide va como HERMANO del `<span data-i18n>`, nunca dentro:
     el manager de i18n reescribe el innerHTML al cambiar de idioma y
     `lucide.createIcons()` no vuelve a correr, asi que un icono dentro de un
     elemento traducible desapareceria al pulsar ES/EN.
   ========================================================================= */

.cursos-cta {
    width: 100%;
    max-width: var(--cursos-w);
    margin: 1.1rem auto 0;
    text-align: center;
}

.cursos-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border: 1px solid var(--sky);
    border-radius: 6px;
    background: var(--sky);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cursos-cta-btn:hover {
    background-color: var(--sky-glow);
    border-color: var(--sky-glow);
    transform: translateY(-1px);
}

.cursos-cta-btn:focus-visible {
    outline: 2px solid var(--sky-glow);
    outline-offset: 3px;
}

.cursos-cta-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

@media (max-width: 640px) {
    .cursos-cta {
        margin-top: 1rem;
    }

    .cursos-cta-btn {
        width: 100%;
    }
}

/* --- Enlace de escape para lectores de pantalla ------------------------- */
.cursos-sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   TITULO "PROXIMOS EVENTOS" (v2.5.0)

   Va antes del H1 del hero y titula la parte de la publicidad de los cursos.
   "PROXIMOS" con el azul de la marca (--sky), "EVENTOS" con el verde
   (--automate), dentro de un marco rectangular con el rojo de la marca
   (--impulse) que brilla como neon.

   El texto entra por i18n (data-i18n) con los <span> de color dentro del
   valor, para que el ES/EN se repinte sin perder los colores.
   ========================================================================= */

.cursos-titulo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    align-self: center;
    margin: 0 0 1.1rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--impulse);
    border-radius: 4px;
    background: rgba(254, 71, 61, 0.06);
    /* Neon: dos halos externos + un resplandor interior del marco. */
    box-shadow:
        0 0 16px rgba(254, 71, 61, 0.45),
        0 0 38px rgba(254, 71, 61, 0.20),
        inset 0 0 14px rgba(254, 71, 61, 0.16);
    animation: cursos-neon 4s ease-in-out infinite;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* La respiracion del neon: el halo sube y baja en 4s. Es contenido, no
   decoracion (mismo criterio que el diagrama del hero). */
@keyframes cursos-neon {
    0%, 100% {
        box-shadow:
            0 0 13px rgba(254, 71, 61, 0.38),
            0 0 30px rgba(254, 71, 61, 0.16),
            inset 0 0 12px rgba(254, 71, 61, 0.13);
    }
    50% {
        box-shadow:
            0 0 24px rgba(254, 71, 61, 0.62),
            0 0 52px rgba(254, 71, 61, 0.30),
            inset 0 0 20px rgba(254, 71, 61, 0.24);
    }
}

/* Bajo reduced-motion el universal de styles.css congelaria el neon en un
   estado fijo (0.01ms). Se le restaura la duracion real, igual que se hizo
   con el diagrama: el movimiento es contenido de marca. */
@media (prefers-reduced-motion: reduce) {
    .cursos-titulo {
        animation-duration: 4s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }
}

.cursos-titulo .titulo-proximos {
    color: var(--sky);
    text-shadow: 0 0 8px rgba(32, 123, 251, 0.85), 0 0 20px rgba(32, 123, 251, 0.45);
}

.cursos-titulo .titulo-eventos {
    color: var(--automate);
    text-shadow: 0 0 8px rgba(2, 201, 72, 0.75), 0 0 20px rgba(2, 201, 72, 0.40);
}

/* En modo claro el neon se atenua: sobre fondo blanco el glow se ensucia y
   se pierde el contraste del marco. */
body.light-theme .cursos-titulo {
    background: rgba(254, 71, 61, 0.04);
    animation-name: cursos-neon-claro;
}

body.light-theme .cursos-titulo .titulo-proximos,
body.light-theme .cursos-titulo .titulo-eventos {
    text-shadow: none;
}

@keyframes cursos-neon-claro {
    0%, 100% {
        box-shadow:
            0 0 10px rgba(254, 71, 61, 0.20),
            inset 0 0 10px rgba(254, 71, 61, 0.06);
    }
    50% {
        box-shadow:
            0 0 18px rgba(254, 71, 61, 0.38),
            inset 0 0 16px rgba(254, 71, 61, 0.12);
    }
}

@media (max-width: 640px) {
    .cursos-titulo {
        font-size: 0.74rem;
        padding: 0.38rem 0.75rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.9rem;
    }
}

/* --- Responsive ---------------------------------------------------------
   OJO con la especificidad: la regla del hero (.hero-visual.hero-visual--cursos
   .cursos-carousel) tiene (0,3,0) y le gana a un `.cursos-carousel` (0,1,0)
   aunque este ultimo este dentro de un @media. Por eso los breakpoints
   repiten el selector completo: si no, en movil el poster se queda en 400px
   (medido: stageH=400 con el viewport en 390px). */
@media (max-width: 968px) {
    .cursos-carousel {
        --cursos-h: 340px;
    }

    .hero-visual.hero-visual--cursos .cursos-carousel {
        --cursos-h: 340px;
    }

    /* v2.5.0 (bis 2): en una sola columna, la seccion "PROXIMOS EVENTOS"
       (titulo + volantes) va PRIMERO, y despues todo el contenido que ya
       habia (overline, H1, subtitulo, CTAs). `order` mueve la pieza en el
       grid sin tocar el orden del DOM (que sigue siendo legible sin CSS). */
    .hero-visual.hero-visual--cursos {
        order: -1;
    }
}

@media (max-width: 640px) {
    .cursos-carousel {
        --cursos-w: 100%;
        --cursos-gap: 12px;
    }

    .hero-visual.hero-visual--cursos .cursos-carousel {
        --cursos-w: 100%;
        --cursos-gap: 12px;
    }

    /* v2.5.0 (pedido de JLCR): en movil el poster ocupa TODO el ancho
       disponible. El alto sale de la relacion de aspecto real del flyer
       (1005x1300), asi que la imagen no se deforma ni se recorta: a 350px de
       ancho queda de 453px de alto.
       Antes el alto venia de --cursos-h (280px) y el poster se quedaba en
       216px de ancho: se desperdiciaba mas de la mitad del ancho util. */
    .cursos-carousel-stage {
        height: auto;
        aspect-ratio: 1005 / 1300;
    }

    .cursos-slide {
        width: 100%;
        height: 100%;
    }

    .cursos-carousel-stage::before,
    .cursos-carousel-stage::after {
        width: 100%;
        height: 100%;
    }

    .cursos-caption {
        font-size: 0.72rem;
        padding: 0 0.5rem;
    }
}

/* =========================================================================
   BANDA DE FLUJO — el diagrama del hero reubicado (v2.5.0)

   En la v2.5.0 la columna derecha del hero pasa a ser el carrusel de
   volantes. El diagrama animado NO se pierde: se mueve a esta banda, que va
   justo despues del hero.

   Se reusan TAL CUAL las clases .hero-visual y .diagram-container, con lo que
   TODA la geometria del diagrama (400x400, escala 0.7 en <=640px, trayectorias
   en px, paquetes con offset-path) sigue valiendo sin tocar una sola regla de
   styles.css. Reutilizar las clases es lo que hace seguro el traslado: la
   unica fuente de verdad sigue siendo el lienzo de 400x400.
   ========================================================================= */

.flujo-band {
    padding: 4.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
    background: radial-gradient(circle at 50% 55%, rgba(32, 123, 251, 0.07) 0%, transparent 58%);
    overflow: hidden;
}

.flujo-title {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 2rem;
}

/* El lienzo del diagrama sigue siendo de 400x400. En la banda 641-968px el
   .hero-visual de styles.css baja a 350px y el lienzo se salia de la caja;
   aqui se mantiene en 400 para que no haya solape con el titulo. */
.flujo-band .hero-visual {
    height: 400px;
}

@media (max-width: 640px) {
    .flujo-band {
        padding: 3rem 0;
    }

    .flujo-band .hero-visual {
        height: 280px;
    }

    .flujo-title {
        margin-bottom: 1.25rem;
    }
}