/* ============================================================
   FONDOS CINEMATOGRÁFICOS POR SECCIÓN — Generados con Higgsfield
   Reemplazan los fondos dibujados por CSS por imágenes 8K reales,
   con scrim para legibilidad + zoom lento hipnótico.
   (Se carga DESPUÉS de section_backgrounds.css para ganar el ::before)
   ============================================================ */

/* El contenido SIEMPRE por encima del fondo (blindaje de stacking) */
.section > .container { position: relative; z-index: 2; }

/* Zoom lento hipnótico del fondo */
@keyframes hypZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Patrón común del fondo de sección */
#precios, #confianza, #mercados, #vision, #tecnologia,
#resultados, #roadmap, #afiliados, #contacto {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#precios::before, #confianza::before, #mercados::before, #vision::before,
#tecnologia::before, #resultados::before, #roadmap::before,
#afiliados::before, #contacto::before {
    content: '';
    position: absolute;
    inset: -8%;                 /* margen para que el zoom nunca deje bordes */
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    animation: hypZoom 42s ease-in-out infinite alternate;
    /* el scrim (gradiente) va en cada sección para adaptarlo */
}

/* Scrim común: oscurece arriba (bajo el título) y abajo (transición),
   deja ver el neón hipnótico en la franja media */
#precios::before, #confianza::before, #mercados::before, #vision::before,
#tecnologia::before, #resultados::before, #roadmap::before,
#afiliados::before, #contacto::before {
    background-image:
        linear-gradient(180deg,
            rgba(7,11,20,0.80) 0%,
            rgba(7,11,20,0.48) 14%,
            rgba(7,11,20,0.36) 50%,
            rgba(7,11,20,0.48) 86%,
            rgba(7,11,20,0.82) 100%),
        var(--sec-img);
}

#precios     { --sec-img: url('assets/hf/sec_precios.webp?hq3'); }
#confianza   { --sec-img: url('assets/hf/sec_seguridad.webp?hq3'); }
#mercados    { --sec-img: url('assets/hf/sec_mercados.webp?hq3'); }
#vision      { --sec-img: url('assets/hf/sec_vision.webp?hq4'); }
#tecnologia  { --sec-img: url('assets/hf/sec_tecnologia.webp?hq3'); }
#resultados  { --sec-img: url('assets/hf/sec_resultados.webp?hq3'); }
#roadmap     { --sec-img: url('assets/hf/sec_roadmap.webp?hq3'); }
#afiliados   { --sec-img: url('assets/hf/sec_afiliados.webp?hq3'); }
#contacto    { --sec-img: url('assets/hf/sec_contacto.webp?hq3'); }

/* Desactivar los fondos dibujados por CSS antiguos que quedaban en ::after
   o capas extra (evita choque visual con la imagen nueva) */
#confianza::after, #vision::after, #mercados::after,
#tecnologia::after, #resultados::after { background: none !important; animation: none !important; }

/* FIX visión: section_backgrounds.css fijaba #vision::before a width/height:1000px
   y top/left:50% (glow decorativo viejo), encerrando la imagen cinematográfica en un
   cuadro de 1000px en la esquina. Forzamos que cubra TODA la sección como los demás fondos. */
#vision::before {
    top: -8% !important;
    right: -8% !important;
    bottom: -8% !important;
    left: -8% !important;
    width: auto !important;
    height: auto !important;
}

/* ── Secciones ESTRELLA con VIDEO de fondo (movimiento hipnótico real) ── */
.sec-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    background: #070b14;   /* mientras carga */
}
/* En estas 3 el ::before deja de traer imagen y pasa a ser SOLO scrim,
   POR ENCIMA del video (z:1) y por DEBAJO del contenido (z:2). */
#mercados::before, #tecnologia::before, #resultados::before {
    background-image: linear-gradient(180deg,
        rgba(7, 11, 20, 0.74) 0%,
        rgba(7, 11, 20, 0.42) 30%,
        rgba(7, 11, 20, 0.40) 70%,
        rgba(7, 11, 20, 0.80) 100%) !important;
    inset: 0 !important;
    z-index: 1 !important;
    animation: none !important;
}
/* Blindaje de capas en secciones con video: video(0) < scrim(1) < contenido(2).
   (Alguna regla previa fijaba el .container en z-index:1; forzamos aquí.) */
#mercados > .sec-bg-video,
#tecnologia > .sec-bg-video,
#resultados > .sec-bg-video {
    position: absolute !important;   /* gana a section_depth.css (#id > :not(.canvas){position:relative}) */
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
}
#mercados > .container,
#tecnologia > .container,
#resultados > .container { position: relative !important; z-index: 2 !important; }