/* ==========================================================================
   CLUB.CSS - Estilos específicos de la página "El Club"
   ========================================================================== */

/* ==========================================================================
   BLOQUE 1: HERO Y VIDEO (Sección Superior)
   ========================================================================== */

/* Sobrescribimos solo lo necesario, manteniendo la herencia de .seccion-base */
.seccion-base.seccion-club {
    /* min-height:100vh ya viene de .seccion-base */
    padding: 0 24px; /* padding lateral, el superior lo hereda (var(--alto-nav)) */
    /* No definimos height fija, usamos min-height */
}

.seccion-club {
    /*display: flex;
    flex-direction: column;    
    min-height: 100vh; /* heredado, pero lo reafirmamos */
    position: relative;
    /* No usamos justify-content, el espacio lo gestiona flex:1 del título */
    align-items: center;
    overflow: visible; /* permitimos scroll si el contenido crece */
}

/* Degradado inferior (sin cambios) */
.seccion-club::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, transparent, var(--color-crema));
    pointer-events: none;
    z-index: 1;
}

/* Vídeo de fondo (sin cambios) */
.club-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.9;
    filter: blur(5px);
    transform: scale(1.05);
}

/* ===== POSICIONAMIENTO VERTICAL (igual que en base-pagina) ===== */

/* Reset de márgenes y posicionamiento */
.club-texto-arriba,
.club-logorario-arriba,
.club-titulo,
.club-logorario-abajo,
.club-texto-abajo {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
}

/* Grupos: se comportan como bloques fijos (no se encogen) */
.grupo-superior,
.grupo-inferior {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0; /* evita que se encojan si falta espacio */
}

/* Título: ocupa todo el espacio restante y centra su contenido */
.club-titulo {
    flex: 1; /* ocupa el espacio entre los dos grupos */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    width: 100%;
    color: var(--color-negro);
}

/* Márgenes fijos para mantener el mismo comportamiento que el logorario */
.club-texto-arriba {
    margin-top: 90px; /* mismo valor que .logorario-parent en .seccion-base */
    margin-bottom: var(--gap-48);
    text-align: center;
    color: var(--color-negro);
}

.club-logorario-arriba {
    margin-bottom: var(--gap-24);
    margin-top: 0;
}

.club-logorario-abajo {
    margin-top: var(--gap-24);
    margin-bottom: 0;
}

.club-texto-abajo {
    margin-top: var(--gap-48);
    margin-bottom: var(--gap-48); /* padding inferior similar a subtitulo-base */
    text-align: center;
    color: var(--color-negro);
}

/* Anulación del margin-top heredado de .logorario-parent en esta sección */
.seccion-club .logorario-parent {
    margin-top: 0;
}

/* ==========================================================================
   BLOQUE 2: CONTENEDOR PRINCIPAL (Sección Debajo)
   ========================================================================== */

.club-debajo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 24px;
    background-color: var(--color-crema);
    position: relative;
    z-index: 3;
    min-height: 100vh;
}

/* --- A. Bloque Superior (Imagen) --- */
.club-debajo-top {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.club-debajo-img-mini {
    width: 360px;
    height: 120px;
    object-fit: cover;
    object-position: center;
}

/* --- B. Bloque Medio (Banner + Grid) --- */
.club-debajo-middle {
    display: flex;
    flex-direction: column;
    gap: var(--gap-48);
    width: 100%;
}

.labels-secundarias {
    display: flex;
    justify-content: flex-end;
}

.club-debajo-banner-derecha {
    text-align: right;
    width: 100%;
}

.tab-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    margin-left: 20px;
}

.tab-btn.activo,
.tab-btn:hover {
    opacity: 1;
}

.club-debajo-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    width: 100%;
}

.club-debajo-h2 {
    max-width: 600px;
}

.club-debajo-col-der {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-right: 200px;
}

.tab-content {
    display: none;
}

.tab-content.activo {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* --- C. Bloque Inferior (Subgrid) --- */
.club-debajo-subgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: calc(50% - 40px);
    margin-left: calc(50% + 40px);
    text-align: left;
}

/* ==========================================================================
   BLOQUE 4: BLOQUEO DE INTERACCIÓN MANUAL EN GALERÍA AUTOMÁTICA
   ========================================================================== */
.galeria-automatica .galeria-track {
    touch-action: pan-y; /* Permite scroll vertical pero no horizontal */
    user-select: none;
    -webkit-user-select: none;
}

/* ==========================================================================
   BLOQUE 5: RESPONSIVE (MÓVIL)
   ========================================================================== */

@media (max-width: 768px) {
    /* ===== HERO ===== */
    .home {
        padding-top: 0;
        overflow-x: hidden;
    }

    .seccion-base.seccion-club {
        padding: 0 16px;
        height: 100vh;
    }

    .club-texto-arriba {
        margin-top: 90px;
        margin-bottom: var(--gap-24);
        padding: 0 8px;
    }

    .club-texto-extra {
        display: none; /* Oculta la parte extra del texto en móvil */
    }

    .club-logorario-arriba {
        margin-bottom: var(--gap-8);
    }

    .club-titulo {
        margin: 0;
    }

    .club-logorario-abajo {
        margin-top: var(--gap-8);
    }

    .club-texto-abajo {
        margin-top: var(--gap-24);
        margin-bottom: var(--gap-24);
        padding: 0 8px;
    }

    .grupo-superior,
    .grupo-inferior {
        width: 100%;
        height: auto;
        flex-shrink: 0;
    }

    .club-titulo {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* ===== CONTENEDOR PRINCIPAL ===== */
    .club-debajo {
        padding: 20px 24px;
        height: 85vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-height: auto;
    }

    .club-debajo-top {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .club-debajo-img-mini {
        width: 200px;
        height: 66px;
        object-fit: cover;
        object-position: left;
        align-self: flex-start;
        margin-bottom: var(--gap-48);
    }

    .club-debajo-middle {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--gap-24);
        margin-top: 0;
        overflow-y: auto;
        min-height: 0;
    }

    /* ===== TABS EN MÓVIL ===== */
    .club-debajo-banner-derecha {
        text-align: left;
        margin-top: 0;
        flex-shrink: 0;
    }

    .club-debajo-banner-derecha .labels-secundarias {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        width: 100%;
    }

    .club-debajo-banner-derecha .tab-btn {
        margin: 0;
        width: 100%;
        text-align: left;
        padding: 2px 0;
        opacity: 0.4;
        transition: opacity 0.3s ease;
    }

    .club-debajo-banner-derecha .tab-btn.activo,
    .club-debajo-banner-derecha .tab-btn:hover {
        opacity: 1;
    }

    .club-debajo-banner-derecha .tab-btn:nth-child(1) {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    .club-debajo-banner-derecha .tab-btn:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    .club-debajo-banner-derecha .tab-btn:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 3;
    }
    .club-debajo-banner-derecha .tab-btn:nth-child(4) {
        grid-column: 2 / 3;
        grid-row: 2;
    }
    .club-debajo-banner-derecha .tab-btn:nth-child(5) {
        grid-column: 2 / 3;
        grid-row: 3;
    }

    /* ===== MAIN GRID ===== */
    .club-debajo-main-grid {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto; /* No se estira */
        gap: 0;
        width: 100%;
        min-height: 0;
    }

    .club-debajo-col-izq {
        flex: 0 0 auto; /* No se estira */
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-top: 100px;
        padding: 0;
    }

    .club-debajo-h2 {
        max-width: 100%;
        text-align: left;
        margin: 0;
    }

    .club-debajo-col-der {
        flex-shrink: 0;
        order: 2;
        padding-right: 0;
        gap: 20px;
        margin-top: 40px;
        width: 100%;
    }

    .tab-content.activo {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .club-debajo-p {
        text-align: left;
        margin: 0;
    }

    /* ===== SUBGRID INFERIOR ===== */
    .club-debajo-subgrid {
        display: none;
    }

    /* ===== GALERÍA FINAL ===== */
    .galeria-wrapper {
        padding-top: var(--gap-24);
    }

    .galeria-wrapper .galeria-track {
        scroll-snap-type: none !important;
    }
}