/* ============================================================================ ESCUADRÓN — ficha de una unidad ---------------------------------------------------------------------------- Rework de /escuadrones/{slug}, la ultima pagina del sitio que seguia siendo un puerto del legacy: hero de pantalla completa con el video a todo trapo, flechas de navegacion flotando sobre las esquinas, estilos escritos en linea dentro del Blade y un "hangar v7" con su propia paleta de neones (--primary-neon) que no era la de ninguna otra pagina. Ahora habla el mismo idioma que el INDICE (squadrons.css), del que es la continuacion natural, y que el SOP, OPERACIONES, PILOTOS y las fichas: · fondo #0f172e con fotografia fija bajo un velo azul noche · paneles en degradado 150deg sobre azul noche · rotulos en versalitas muy espaciadas · filete degradado rematando los titulos de seccion (.sqd-rule) · rejilla tecnica de 64px enmascarada · cifras con font-variant-numeric: tabular-nums Y CONSERVA EL COLOR POR FUERZA del indice: pinchas una tarjeta dorada de la Navy y aterrizas en una pagina dorada. Es el hilo que une las dos paginas. Sustituye a squadron_detail.css y squadron_aircraft_v7.css, que se retiran. ============================================================================ */ body.page-sqd { --sqd-accent: #60a5fa; --sqd-ink: #fff; --sqd-body: #cbd5e1; --sqd-muted: #8296b8; --sqd-dim: #64748b; --sqd-line: rgba(255, 255, 255, 0.08); --sqd-panel: linear-gradient(150deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 46, 0.96)); --sqd-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9); /* Color de fuerza por defecto. Se declara AQUI, en el , y no junto a las ramas: las clases .branch-* van en este mismo elemento, y una regla de respaldo con la misma especificidad ganaria o perderia solo por el orden del fichero. Heredado desde arriba, cualquier .branch-* lo pisa. Es el mismo montaje que en squadrons.css, por el mismo motivo. */ --sqd-c: var(--sqd-accent); /* La misma fotografia de fondo que el indice, a proposito: la ficha es la continuacion de aquella pagina, no un sitio distinto. */ background: linear-gradient(rgba(15, 23, 46, 0.88), rgba(15, 23, 46, 0.96)), url('../images/bg/carrier-vfa88.webp'); background-size: cover; background-position: center; background-attachment: fixed; color: var(--sqd-body); font-family: 'Oswald', sans-serif; } /* Los CINCO tonos del indice. Si aqui cambia uno, tiene que cambiar tambien en squadrons.css (.branch-*): son las dos caras de la misma seccion y el color es justo lo que las cose. */ body.branch-usaf { --sqd-c: #60a5fa; } body.branch-navy { --sqd-c: #fbbf24; } body.branch-eda { --sqd-c: #f87171; } body.branch-ejercito { --sqd-c: #f97316; } body.branch-army { --sqd-c: #4ade80; } .sqd { padding-bottom: 90px; } /* ═══════════════════════════════════════════════════════ FONDO DE PÁGINA ═ El video es un EXTRA, no el cimiento: la página entera está diseñada para verse terminada sin él —fotografía fija, halo del color de fuerza en la portada, rejilla técnica y degradado— y el video entra por encima cuando termina de cargar, FIJO detrás de toda la página (no solo la portada): al bajar a Historial o Aeronaves se sigue viendo de fondo, tapado donde hace falta por los paneles casi opacos de cada sección. Esto no es un capricho: los vídeos pesan varios MB y antes iban con `autoplay preload="auto"`, así que la ficha arrancaba pidiéndolos enteros antes de enseñar nada. Ahora los carga el JS cuando la página ya está en pie, y no los pide siquiera en ahorro de datos o con movimiento reducido (ver squadron.js). Tampoco se usa `poster`: los que había en la base eran imágenes sueltas —a un escuadrón le tocaba el emblema estirado y a otro un parche— y parpadeaban como una foto puesta al azar. `position: fixed` con z-index NEGATIVO y sin ancestro con transform/ isolation por medio: pinta por encima del `background` del body (la foto de respaldo) pero por debajo de CUALQUIER contenido normal de la página, sea cual sea su posición en el DOM. Por eso puede vivir como primer hijo de

y aun así quedar detrás de todo, incluida la portada. */ .sqd-bg-video { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* Nace invisible y lo enciende el JS al tener el primer fotograma: sin esto se ve el rectangulo negro del