/* ═══════════════════════════════════════════════════════════
   CCESDN Hero Slider — Estilos Frontend
   Prefijo CSS: chs- (ccesdn-hero-slider)
   Colores: Primary #c1202a | Secondary #0a2558
   ══════════════════════════════════════════════════════════ */

.ccesdn-hero-slider {
    --chs-primary:   #B8962E;
    --chs-gold:      #B8962E;
    --chs-secondary: #0a2558;
    --chs-dark:      #0d1b3e;
    --chs-white:     #ffffff;
    --chs-trans:     800ms;
}

/* ── Contenedor ────────────────────────────────────────── */
.ccesdn-hero-slider {
    position: relative;
    width: 100%;
    height: var(--slider-height, 90vh);
    overflow: hidden;
    background: var(--chs-secondary);
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.chs-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Slide base ────────────────────────────────────────── */
.chs-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 0;
}
.chs-slide.chs-active {
    pointer-events: auto;
    z-index: 1;
}

/* ── Imagen de fondo ───────────────────────────────────── */
.chs-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;
    transition: transform calc(var(--chs-trans) * 1.5) ease;
    /* image rendering: auto — no modificar para no pixelar fotos */
}

/* ── Overlay ───────────────────────────────────────────── */
.chs-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Contenido ─────────────────────────────────────────── */
.chs-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
    /* columna vertical: label → título → subtítulo → botón */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.chs-content.chs-align-left   { align-items: flex-start; text-align: left; }
.chs-content.chs-align-center { align-items: center;     text-align: center; }
.chs-content.chs-align-right  { align-items: flex-end;   text-align: right; }

/* ── Bloque de texto con línea roja vertical ── */
.chs-text-block {
    display: block;
    border-left: 4px solid var(--chs-gold);
    padding-left: 18px;
    margin-bottom: 24px;
}
.chs-align-center .chs-text-block {
    border-left: none;
    border-top: 4px solid var(--chs-gold);
    padding-left: 0;
    padding-top: 12px;
}
.chs-align-right .chs-text-block {
    border-left: none;
    border-right: 4px solid var(--chs-gold);
    padding-left: 0;
    padding-right: 18px;
}

/* Label — texto pequeño encima del título */
.chs-label-tag {
    display: block;
    color: rgba(255,255,255,0.82);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Nombre / Autor — línea sobre el título */
.chs-name {
    display: block;
    color: rgba(255,255,255,0.90);
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.1vw, 15px);
    letter-spacing: 0.5px;
    margin: 0 0 4px;
}

/* Título */
.chs-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 50px);
    line-height: 1.08;
    color: var(--chs-white);
    margin: 0 0 5px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
    max-width: 600px;
}

/* Subtítulo */
.chs-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(12px, 1.1vw, 16px);
    color: rgba(255,255,255,0.78);
    margin: 0;
    font-weight: 400;
    max-width: 460px;
    letter-spacing: 0.2px;
}

/* Botón — dorado con hover navy */
.chs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--chs-gold);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 30px;
    border-radius: 30px;
    border: 2px solid var(--chs-gold);
    margin-top: 22px;
    transition: background 0.25s, color 0.25s, transform 0.2s, border-color 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 20px rgba(184,150,46,0.35);
}
.chs-btn:hover {
    background: var(--chs-secondary);
    color: var(--chs-white);
    border-color: var(--chs-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(184,150,46,0.45);
}

/* ═══════════════════════════════════════════════════════
   EFECTOS DE TRANSICIÓN
   ══════════════════════════════════════════════════════ */

/* FADE */
[data-effect="fade"] .chs-slide {
    opacity: 0;
    transition: opacity var(--chs-trans) ease;
}
[data-effect="fade"] .chs-slide.chs-active { opacity: 1; }

/* SLIDE — JS mueve el track con translateX */
[data-effect="slide"] .chs-track {
    display: flex;
}
[data-effect="slide"] .chs-slide {
    position: relative;
    flex: 0 0 100%;
    opacity: 1;
}

/* ZOOM — Ken Burns */
[data-effect="zoom"] .chs-slide {
    opacity: 0;
    transition: opacity var(--chs-trans) ease;
}
[data-effect="zoom"] .chs-slide.chs-active { opacity: 1; }
[data-effect="zoom"] .chs-slide.chs-active .chs-bg-image {
    animation: chs-kenburns 8s ease forwards;
}
@keyframes chs-kenburns {
    0%   { transform: scale(1);    }
    100% { transform: scale(1.08); }
}

/* FLIP — 3D */
[data-effect="flip"] .chs-track { perspective: 1200px; }
[data-effect="flip"] .chs-slide {
    opacity: 0;
    transform: rotateY(90deg);
    transform-origin: center center;
    transition: opacity var(--chs-trans) ease, transform var(--chs-trans) ease;
}
[data-effect="flip"] .chs-slide.chs-active {
    opacity: 1;
    transform: rotateY(0deg);
}
[data-effect="flip"] .chs-slide.chs-leaving {
    opacity: 0;
    transform: rotateY(-90deg);
}

/* Animación de entrada del contenido */
.chs-slide.chs-active .chs-label-tag { animation: chs-slide-up 0.6s ease 0.2s both; }
.chs-slide.chs-active .chs-title     { animation: chs-slide-up 0.6s ease 0.35s both; }
.chs-slide.chs-active .chs-subtitle  { animation: chs-slide-up 0.6s ease 0.5s both; }
.chs-slide.chs-active .chs-btn       { animation: chs-slide-up 0.6s ease 0.65s both; }

@keyframes chs-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   NAVEGACIÓN
   ══════════════════════════════════════════════════════ */
.chs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.4);
    color: var(--chs-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
    backdrop-filter: blur(4px);
}
.chs-arrow svg { width: 22px; height: 22px; }
.chs-prev { left: 24px; }
.chs-next { right: 24px; }
.chs-arrow:hover {
    background: var(--chs-gold);
    border-color: var(--chs-gold);
    transform: translateY(-50%) scale(1.1);
}

/* Dots */
.chs-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}
.chs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: 2px solid rgba(255,255,255,0.6);
    cursor: pointer;
    transition: background 0.25s, width 0.3s;
    padding: 0;
}
.chs-dot.chs-dot-active {
    background: var(--chs-gold);
    border-color: var(--chs-gold);
    width: 28px;
    border-radius: 5px;
}

/* Barra de progreso */
.chs-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--chs-gold);
    z-index: 10;
    transition: width linear;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Altura: mostrar imagen completa en proporción 4:3 aprox */
    .ccesdn-hero-slider { --slider-height: 56vw; min-height: 300px; }

    /* Imagen: sin recorte, centrada, sin filtros que degraden */
    .chs-bg-image {
        background-position: center center;
        background-size: cover;
        background-attachment: scroll; /* fix iOS */
    }

    /* Overlay más sutil en móvil para ver la imagen */
    .chs-overlay { opacity: 0.25 !important; }

    /* Contenido: padding lateral reducido */
    .chs-content { padding: 0 20px; }

    /* Título más pequeño */
    .chs-title { font-size: clamp(18px, 4.5vw, 28px); max-width: 100%; }

    /* Subtítulo */
    .chs-subtitle { font-size: clamp(11px, 2.5vw, 14px); max-width: 100%; }

    /* Label */
    .chs-label-tag { font-size: clamp(9px, 2vw, 12px); letter-spacing: 1.5px; }

    /* Línea decorativa más delgada */
    .chs-text-block { border-left-width: 3px; padding-left: 12px; margin-bottom: 16px; }

    /* Flechas más pequeñas y pegadas al borde */
    .chs-arrow { width: 36px; height: 36px; }
    .chs-arrow svg { width: 16px; height: 16px; }
    .chs-prev { left: 10px; }
    .chs-next { right: 10px; }

    /* Dots */
    .chs-dots { bottom: 14px; gap: 6px; }
    .chs-dot { width: 8px; height: 8px; }
    .chs-dot.chs-dot-active { width: 22px; }

    /* Botón compacto */
    .chs-btn {
        padding: 10px 22px;
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-top: 14px;
        border-radius: 24px;
    }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤480px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Altura: suficiente para ver bien la imagen */
    .ccesdn-hero-slider { --slider-height: 62vw; min-height: 260px; }

    /* Imagen visible completa, sin attachment que cause bugs iOS */
    .chs-bg-image { background-position: center center; background-size: cover; }

    /* Overlay muy sutil */
    .ccesdn-hero-slider .chs-overlay { opacity: 0.22 !important; }

    /* Padding lateral mínimo */
    .chs-content { padding: 0 16px; }

    /* Títulos pequeños pero legibles */
    .chs-title { font-size: clamp(15px, 4.8vw, 22px); line-height: 1.15; }
    .chs-subtitle { font-size: clamp(10px, 2.8vw, 13px); line-height: 1.5; }
    .chs-label-tag { font-size: 9px; letter-spacing: 1px; }

    /* Bloque de texto más compacto */
    .chs-text-block { padding-left: 10px; margin-bottom: 12px; }

    /* Flechas ocultas en móvil muy pequeño — se usa swipe */
    .chs-arrow { display: none; }

    /* Botón bien compacto */
    .chs-btn {
        padding: 9px 18px;
        font-size: 9px;
        letter-spacing: 1px;
        margin-top: 12px;
        box-shadow: 0 3px 12px rgba(184,150,46,0.4);
    }

    /* Dots */
    .chs-dots { bottom: 10px; }
}


/* =====================================================
   YouTube Background Support
   ===================================================== */

/* Container que ocupa todo el slide como fondo */
.chs-youtube-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Iframe escalado para cubrir como background-size:cover */
.chs-yt-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Ratio 16:9: para cubrir el contenedor hay que sobredimensionar */
    width: 177.78vh;   /* 100vh * 16/9 */
    height: 100vh;
    min-width: 100%;
    min-height: 56.25vw; /* 100vw * 9/16 */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* En móvil, ocultar el iframe y mostrar la imagen fallback */
@media (max-width: 767px) {
    .chs-youtube-bg {
        display: none;
    }
    .chs-yt-fallback {
        display: block !important;
    }
}

/* Cuando NO hay youtube, .chs-yt-fallback nunca existe, no importa */
/* Cuando SÍ hay youtube en desktop, ocultar el fallback */
@media (min-width: 768px) {
    .chs-yt-fallback {
        display: none;
    }
}