/* ============================================================
   FILBB 2026 – home.css
   Estilos de todas las secciones del homepage.
   ============================================================ */

/* ── 1. HERO ─────────────────────────────────────────────── */
.filbb-hero {
    position:   relative;
    min-height: 420px;
    display:    flex;
    align-items:flex-end;
    background: var(--filbb-oscuro) center / cover no-repeat;
}

.filbb-hero--con-imagen { min-height: 500px; }

.filbb-hero__overlay {
    position: absolute;
    inset:    0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.45) 50%,
        rgba(0,0,0,.1)  100%
    );
}

.filbb-hero__contenido {
    position:      relative;
    z-index:       1;
    padding-top:   var(--gap-xl);
    padding-bottom:var(--gap-xl);
}

.filbb-hero__texto {
    max-width:  520px;
    color:      var(--filbb-blanco);
    font-size:  var(--text-md);
    line-height:1.55;
}
.filbb-hero__texto strong { font-weight: 700; font-size: var(--text-lg); }
.filbb-hero__texto p { margin-bottom: var(--gap-sm); }
.filbb-hero__texto p:last-child { margin-bottom: 0; }

/* ── 2. CUENTA REGRESIVA ─────────────────────────────────── */
.filbb-countdown {
    background: var(--filbb-celeste);
    padding:    var(--gap-xl) 0;
    text-align: center;
}

.filbb-countdown__titulo {
    font-size:     var(--text-xl);
    letter-spacing:.25em;
    color:         var(--filbb-blanco);
    font-weight:   700;
    text-transform:uppercase;
    margin-bottom: var(--gap-md);
}

.filbb-countdown__numeros {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         var(--gap-md);
    flex-wrap:   wrap;
}

.filbb-countdown__bloque {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    min-width:      80px;
}

.filbb-countdown__num {
    font-size:   var(--text-4xl);
    font-weight: 700;
    color:       var(--filbb-blanco);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.filbb-countdown__label {
    font-size:     var(--text-xs);
    letter-spacing:.15em;
    text-transform:uppercase;
    color:         rgba(255,255,255,.8);
    margin-top:    .35rem;
}

.filbb-countdown__sep {
    font-size:   var(--text-3xl);
    font-weight: 700;
    color:       rgba(255,255,255,.5);
    line-height: 1;
    margin-bottom: 1.5rem; /* Alinea con los números (compensa el label) */
}

.filbb-countdown__en-curso {
    font-size:  var(--text-lg);
    color:      var(--filbb-blanco);
    font-weight:700;
    margin-top: var(--gap-md);
}

/* ── 3. CRONOGRAMA ───────────────────────────────────────── */
.filbb-cronograma {
    background: var(--filbb-naranja);
    padding:    var(--gap-xl) 0;
}

.filbb-cronograma__titulo {
    font-size:     var(--text-2xl);
    letter-spacing:.25em;
    text-transform:uppercase;
    color:         var(--filbb-blanco);
    text-align:    center;
    margin-bottom: var(--gap-xl);
    position:      relative;
}
/* Líneas decorativas a los lados del título */
.filbb-cronograma__titulo::before,
.filbb-cronograma__titulo::after {
    content:    '';
    position:   absolute;
    top:        50%;
    width:      calc((100% - 320px) / 2);
    height:     2px;
    background: rgba(255,255,255,.4);
}
.filbb-cronograma__titulo::before { left: 0; }
.filbb-cronograma__titulo::after  { right: 0; }

.filbb-cronograma__dias {
    display:         flex;
    justify-content: center;
    gap:             var(--gap-lg);
    flex-wrap:       wrap;
}

.filbb-cronograma__dia { flex-shrink: 0; }

.filbb-cronograma__link {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .5rem;
    color:          var(--filbb-blanco);
    transition:     transform var(--transicion), opacity var(--transicion);
    text-decoration:none;
}
.filbb-cronograma__link:hover { transform: translateY(-4px); opacity: .9; color: var(--filbb-blanco); }

.filbb-cronograma__icono {
    width:  90px;
    height: 97px;
    color:  var(--filbb-blanco);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* Día sin entrada publicada */
.filbb-cronograma__dia--pendiente .filbb-cronograma__link {
    opacity: .55;
    cursor:  default;
}
.filbb-cronograma__dia--pendiente .filbb-cronograma__link:hover {
    transform: none;
    opacity:   .55;
}
.filbb-cronograma__proximamente {
    font-size:     var(--text-xs);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:         rgba(255,255,255,.7);
}

/* ── 4. GALERÍA ──────────────────────────────────────────── */
.filbb-galeria {
    overflow: hidden;
    line-height: 0; /* Elimina espacio debajo de las imágenes inline */
}

.filbb-galeria__pista {
    display: flex;
    width:   100%;
}

.filbb-galeria__item {
    flex:   0 0 25%;        /* 4 fotos en desktop */
    height: 280px;
    overflow: hidden;
}

.filbb-galeria__foto {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.filbb-galeria__item:hover .filbb-galeria__foto { transform: scale(1.04); }

/* ── 5. SPONSORS ─────────────────────────────────────────── */
.filbb-sponsors {
    background: var(--filbb-blanco);
    padding:    var(--gap-xl) 0;
}

.filbb-sponsors__titulo {
    font-size:     var(--text-sm);
    font-weight:   700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:         var(--filbb-azul-acc);
    text-align:    center;
    margin-bottom: var(--gap-lg);
    line-height:   1.4;
}

/* Wrapper con overflow hidden para contener la pista */
.filbb-sponsors__wrapper {
    overflow:   hidden;
    position:   relative;
    width:      100%;
    /* Gradientes para fade lateral */
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Pista animada (infinita por CSS) */
.filbb-sponsors__track {
    display:            flex;
    align-items:        center;
    gap:                var(--gap-xl);
    width:              max-content;
    animation:          filbb-scroll 30s linear infinite;
    will-change:        transform;
}

/* Pausa al hacer hover */
.filbb-sponsors__wrapper:hover .filbb-sponsors__track {
    animation-play-state: paused;
}

@keyframes filbb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.filbb-sponsors__item {
    flex-shrink: 0;
}

.filbb-sponsors__logo {
    height:      60px;
    width:       auto;
    max-width:   180px;
    object-fit:  contain;
    filter:      grayscale(20%);
    opacity:     .85;
    transition:  filter var(--transicion), opacity var(--transicion), transform var(--transicion);
}
.filbb-sponsors__item:hover .filbb-sponsors__logo {
    filter:    none;
    opacity:   1;
    transform: scale(1.05);
}

.filbb-sponsors__enlace { display: block; }

/* ── 6. CTA SISTEMA DE APORTES ───────────────────────────── */
.filbb-aportes-cta {
    background: var(--filbb-celeste);
    padding:    var(--gap-xl) 0;
}

.filbb-aportes-cta__inner {
    display:     flex;
    align-items: center;
    gap:         var(--gap-xl);
}

.filbb-aportes-cta__icono {
    flex-shrink: 0;
    width:  80px;
    height: 80px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     .75rem;
}
.filbb-aportes-cta__icono svg { width: 100%; height: 100%; }

.filbb-aportes-cta__texto { flex: 1; }

.filbb-aportes-cta__titulo {
    font-size:     var(--text-lg);
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:         var(--filbb-blanco);
    margin-bottom: var(--gap-xs);
}

.filbb-aportes-cta__desc {
    font-size:  var(--text-base);
    color:      rgba(255,255,255,.9);
    max-width:  520px;
    margin:     0;
    line-height:1.55;
}

.filbb-aportes-cta__accion { flex-shrink: 0; }