/* ===== BASE ===== */
html, body {
    margin: 0;
    padding: 0;
    background-color: #111111;
    color: white;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
    width: 100%;
}
 
body, #app, main, .container-fluid, .pagina-wrapper {
    background-color: #111111 !important;
}

body {
    -ms-overflow-style: none; /* Ocultar scroll en Internet Explorer y Edge */
    scrollbar-width: none;  /* Ocultar scroll en Firefox */
}

body::-webkit-scrollbar {
    display: none; /* Ocultar scroll en Chrome, Safari y Opera */
}
 
/* ===== HEADER ===== */
.header-wrapper {
    position: relative;
    background: #000;
}
 
.header-bar {
    width: 100%;
    line-height: 0;
    position: relative;
    z-index: 1;
}
.header-bar img {
    display: block;
    width: 100%;
}
 
.header-logos-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #000;
}
 
/* Fila superior — desktop */
.header-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 2rem;
    min-height: 110px;
    position: relative;
}
 
/* Fila inferior redes — oculta en desktop, visible en móvil */
.header-row-bottom {
    display: none;
    background: #000;
}
 
/* ===== LOGOS ===== */
.logo-escudo {
    height: 180px;
    object-fit: contain;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
    margin-bottom: -80px;
}
 
.logo-central {
    height: 90px;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
 
/* ===== REDES SOCIALES ===== */
.redes-wrapper {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    z-index: 2;
    flex-shrink: 0;
}
 
.red-institucional {
    height: 36px;
    width: auto;
    object-fit: contain;
}
 
.red-leones { height: 38px; }
 
.red-social-icon {
    height: 30px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s, opacity 0.2s;
}
.red-social-icon:hover { transform: scale(1.15); opacity: 0.85; }
 
.red-social-dot {
    height: 36px;
    width: auto;
    object-fit: contain;
}
 
 
/* ===== HERO CARRUSEL ===== */
 
.hero-carousel-section {
    width: 100%;
    line-height: 0;
    background: #000;
    position: relative;
}
 
.hero-splide {
    width: 100%;
}
 
.hero-banner-img {
 
    width: 100%;
    height: auto;
 
    display: block;
 
    object-fit: cover;
}
 
/* ===== FLECHAS ===== */
 
.hero-splide .splide__arrow {
 
    background: rgba(0,0,0,0.45);
 
    border: 2px solid rgba(255,193,7,0.7);
 
    width: 2.8rem;
    height: 2.8rem;
 
    opacity: 1;
 
    transition: background 0.2s;
}
 
.hero-splide .splide__arrow:hover {
    background: rgba(255,193,7,0.85);
}
 
.hero-splide .splide__arrow svg {
 
    fill: #fff;
 
    width: 1rem;
    height: 1rem;
}
 
/* ===== REGISTRO ===== */
.registro-section {
    background: #111;
    display: flex;
    justify-content: center;
    padding: 3rem 1rem 1rem;
}
.btn-registro {
    max-width: 460px;
    width: 90%;
    height: auto;
    transition: transform 0.2s, opacity 0.2s;
}
.btn-registro:hover { transform: scale(1.04); opacity: 0.9; }
 
/* ===== FECHA ===== */ 
.fecha-salida-section { 
    background: #111; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 2rem; 
    padding: 5rem 2rem 2rem; } 
     .logo-fecha { 
        max-width: 420px; 
        width: 45%; 
        min-width: 260px; 
        object-fit: contain; }
 
/* ===== BOTONES MENÚ ===== */
.botones-menu {
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 5rem 1rem 3rem;
}
.btn-menu-img {
    height: 52px;
    object-fit: contain;
    transition: transform 0.2s, opacity 0.2s;
}
.btn-menu-img:hover { transform: scale(1.06); opacity: 0.85; }
 
/* ===== SECCIONES IMAGEN ===== */
.seccion-img {
    background: #111;
    display: flex;
    justify-content: center;
    padding: 5rem 1rem 3rem;
}
.img-seccion {
    max-width: 1100px;
    width: 95%;
    object-fit: contain;
}
 
/* ===== CUOTAS ===== */
.cuotas-section {
    background: #111;
    display: flex;
    justify-content: center;
    padding: 5rem 1rem 3rem;
}
.cuotas-desk {
    display: block;
    width: 95%;
    max-width: 1100px;
    object-fit: contain;
}
 
/* Wrapper móvil cuotas — oculto en desktop */
.cuotas-movil-wrapper { display: none; width: 100%; }
.cuotas-titulo-movil  { display: block; width: 80%; max-width: 320px; margin: 0 auto 1rem; object-fit: contain; }
.cuotas-grid-movil    { display: none; }
.cuota-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #111;
}
 
/* ===== LA MANADA ===== */
.manada-section {
    position: relative;
    background: #111;
    line-height: 0;
}
.img-manada-fondo {
    width: 100%;
    display: block;
    object-fit: cover;
}
.img-manada-texto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    max-width: 480px;
    object-fit: contain;
    pointer-events: none;
}
 
/* ===== PATROCINADORES ===== */
.patrocinadores-section {
    background: #111;
    display: flex;
    justify-content: center;
    padding: 1.2rem 1rem;
}
.patrocinadores-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem 0.6rem;
    max-width: 1000px;
    width: 100%;
}
 
/* 6 por fila desktop: 5 gaps × 0.6rem = 3rem */
.patrocinadores-grid .patrocinador-link {
    flex: 0 0 calc((100% - 3rem) / 6);
    justify-content: center;
}
.patrocinador-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, opacity 0.2s;
}
.patrocinador-link:hover { transform: scale(1.08); opacity: 0.85; }
.patrocinador-img {
    height: 32px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}
 
/* ===== COPYRIGHT ===== */
.copyright-section {
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 1rem;
}
.img-copyright-desk {
    height: 20px;
    object-fit: contain;
    opacity: 0.6;
    display: block;
}
/* Texto móvil — oculto en desktop */
.copyright-movil { display: none; }
 
 
/* ================================================================
   RESPONSIVE MÓVIL — solo afecta ≤ 1024px
   ================================================================ */
@media screen and (max-width: 1024px) {
    /* ===== HERO SPLIDE ===== */
 
.hero-banner-img {
 
    width: 100% !important;
 
    height: auto !important;
 
    object-fit: cover !important;
}
 
.hero-splide .splide__arrow {
 
    width: 2.3rem !important;
    height: 2.3rem !important;
}
 
.hero-splide .splide__arrow--prev {
    left: 8px !important;
}
 
.hero-splide .splide__arrow--next {
    right: 8px !important;
}
 
 
 
    /* ===== FILA SUPERIOR ===== */
    .header-row-top {
        padding: 0.2rem 0.8rem 0rem !important;
        min-height: 78px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0rem !important;
        position: relative !important;
        z-index: 2 !important;
        margin-bottom: -40px !important;
    }
 
    /* ocultar redes en fila superior */
    .header-row-top .redes-wrapper {
        display: none !important;
    }
 
    /* ===== ESCUDO ===== */
    .logo-escudo {
        height: 112px !important;
        margin-bottom: -35px !important;
        position: relative !important;
        z-index: 20 !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
    }
 
    /* ===== LOGO CENTRAL ===== */
.logo-central {
    height: 100px !important;
 
    position: absolute !important;
 
    left: 50% !important;
    top: 35% !important;
 
    transform: translate(-50%, -50%) !important;
 
    margin-top: 0 !important;
 
    object-fit: contain !important;
 
    z-index: 3 !important;
}
 
    /* ===== FRANJA ===== */
    .header-bar {
        position: relative !important;
        z-index: 1 !important;
        margin-top: 18px !important;
    }
 
   .header-row-bottom {
 
    display: flex !important;
    flex-wrap: nowrap !important;
 
    justify-content: center !important;
    align-items: center !important;
 
    gap: 0.45rem !important;
 
    width: 100% !important;
 
    padding: 0 !important;
    padding-left: 1.8rem !important;
 
    margin-top: -70px !important;
    margin-bottom: 8px !important;
 
    transform: translateX(78px) !important;
 
    background: transparent !important;
 
    position: relative !important;
    z-index: 10 !important;
 
    box-sizing: border-box !important;
}
 
    /* ===== TAMAÑOS ÍCONOS REDES ===== */
    .header-row-bottom .red-institucional { height: 22px !important; }
    .header-row-bottom .red-leones        { height: 28px !important; }
    .header-row-bottom .red-social-icon   { height: 22px !important; }
    .header-row-bottom .red-social-dot    { height: 18px !important; }
 
    /* ===== CONTENIDO ===== */
    .fecha-salida-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 1.5rem 1rem !important;
    }
    .logo-fecha {
        width: 90% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }
 
    .botones-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
 
    .btn-registro { margin: 0 auto !important; display: block !important;}
    .btn-menu-img { height: 42px !important; }
    .seccion-img  { padding: 1rem 0.5rem 1.5rem !important; }
    .img-seccion  { width: 100% !important; }
 
    /* ===== CUOTAS — desktop oculto, grid visible ===== */
    .cuotas-section {
        padding: 1rem 0.5rem 1.5rem !important;
        display: block !important;
    }
    .cuotas-desk { display: none !important; }
    .cuotas-movil-wrapper {
        display: block !important;
        width: 100% !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
    }
    .cuotas-titulo-movil {
        display: block !important;
        width: 85% !important;
        max-width: 340px !important;
        margin: 0 auto 0.8rem !important;
        object-fit: contain !important;
    }
    .cuotas-grid-movil {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .cuota-img {
        width: 100% !important;
        height: 200px !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #111 !important;
        border-radius: 6px !important;
    }
 
    /* ===== LA MANADA ===== */
    .img-manada-texto {
        width: 32% !important;
        max-width: 140px !important;
    }
 
    /* ===== PATROCINADORES ===== */
    .patrocinadores-section { padding: 1.5rem 1rem !important; }
    .patrocinadores-grid {
        gap: 1.8rem 0.8rem !important;
    }
    /* 4 por fila móvil: 3 gaps × 0.8rem = 2.4rem */
    .patrocinadores-grid .patrocinador-link {
        flex: 0 0 calc((100% - 2.4rem) / 4) !important;
    }
    .patrocinador-img { height: 40px !important; max-width: 110px !important; }
 
    /* ===== COPYRIGHT ===== */
    .copyright-section { padding: 0.3rem 1rem !important; }
    .img-copyright-desk { display: none !important; }
    .copyright-movil {
        display: block !important;
        font-size: 0.62rem !important;
        color: rgba(255,255,255,0.55) !important;
        text-align: center !important;
        letter-spacing: 0.02em !important;
    }
}
 
/* ================================================================
   MÓVIL PEQUEÑO ≤ 480px
   ================================================================ */
@media screen and (max-width: 480px) {
    .logo-escudo  { height: 76px !important; margin-bottom: -42px !important; }
    .logo-central { height: 34px !important;}
 
    .header-row-bottom .red-social-icon   { height: 20px !important; }
    .header-row-bottom .red-institucional { height: 24px !important; }
    .header-row-bottom .red-leones        { height: 24px !important; }
    .header-row-bottom .red-social-dot    { height: 16px !important; }
    .header-row-bottom {
        gap: 0.50rem !important;
        padding: 0.5rem 0.8rem 0.5rem !important;
        padding-left: 0.2rem !important;
        margin-top: -14px !important;
        background: transparent !important;
        justify-content: flex-start !important;
    }
 
    .img-manada-texto {
        width: 60% !important;
        max-width: 190px !important;
    }
 
    /* 4 por fila en móvil pequeño: 3 gaps × 0.6rem = 1.8rem */
    .patrocinadores-grid { gap: 1.4rem 0.6rem !important; }
    .patrocinadores-grid .patrocinador-link { flex: 0 0 calc((100% - 1.8rem) / 4) !important; }
    .patrocinador-img    { height: 32px !important; max-width: 85px !important; }
 
    .copyright-movil { font-size: 0.55rem !important; }
}