/* =========================================================
   PÁGINA MARCAS — rejilla de logos con animación de "caída"
   Cada logo cae desde arriba y se acomoda, uno tras otro.
   ========================================================= */

/* ---------- Video de fondo de toda la página ---------- */
.pagina-video-fondo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    background: var(--navy-900);
}
.pagina-video-velo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,16,33,.8), rgba(6,16,33,.88));
}
/* la sección se vuelve transparente para dejar ver el video */
.section.con-video-fondo { background: transparent; }
.section.con-video-fondo .eyebrow { color: var(--sky-400); }
.section.con-video-fondo .section-head h2 { color: #fff; }
.section.con-video-fondo .section-head p { color: #d5e0f0; }

/* Intro más ancha y justificada (solo en esta página): el texto es
   largo y en el ancho estándar de .section-head hacía muchos saltos. */
.section-head.intro-ancha {
    max-width: 900px;
}
.section-head.intro-ancha p {
    text-align: justify;
    hyphens: auto;
}

.marcas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

/* ---------- Celdas de CRISTAL BRILLANTE ---------- */
/* Más blancas que un cristal normal: dejan ver el video, pero con
   suficiente opacidad para que los logos resalten bien. */
.marca-celda {
    aspect-ratio: 3 / 2;
    background: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
            backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    /* brillo: sombra exterior + reflejo interior arriba */
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.marca-celda:hover {
    transform: translateY(-6px) scale(1.03);
    background: rgba(255, 255, 255, .7);
    border-color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34),
                inset 0 1px 0 rgba(255, 255, 255, 1);
    z-index: 2;
}
.marca-celda img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

/* recuadro de respaldo cuando el logo aún no existe */
.marca-celda .ph-texto {
    font-size: .78rem;
    font-weight: 600;
    color: #5f6b7d;
    text-align: center;
}

/* ---------- Animación de caída ---------- */
/* Estado inicial: arriba y transparente. La clase .cae-lista (que pone
   el JS al entrar en pantalla) dispara la caída de cada logo. */
.marcas-grid.animar .marca-celda {
    opacity: 0;
    transform: translateY(-60px);
}
.marcas-grid.animar.cae-lista .marca-celda {
    animation: marca-caer .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@keyframes marca-caer {
    0%   { opacity: 0; transform: translateY(-60px); }
    70%  { opacity: 1; transform: translateY(8px); }   /* rebotecito al aterrizar */
    100% { opacity: 1; transform: translateY(0); }
}

/* si el usuario pidió menos movimiento, nada de caídas */
@media (prefers-reduced-motion: reduce) {
    .marcas-grid.animar .marca-celda,
    .marcas-grid.animar.cae-lista .marca-celda {
        opacity: 1;
        transform: none;
        animation: none;
    }
}