/* ════════════════════════════════════════════════════════════════
   Barra de firma fe studio — version "feflag" (la misma de Tco Burgers).
   Paisaje de montañas de noche con deriva lenta + polvo de estrellas y
   fugaces en canvas.

   TODO scopeado bajo .feflag-bar. Ojo al tocar este archivo: las capas
   del paisaje son position:absolute y dependen del position:relative +
   overflow:hidden de .feflag-bar (la primera regla). Si esa regla se
   rompe, las capas se posicionan contra la pagina entera y el paisaje
   tapa el hero.

   La capa oscura de la izquierda NO es decorativa: el PNG del logo trae
   "studio" en blanco puro y sin ella la palabra se pierde en el paisaje.

   Vive en public/ a proposito: vite copia public/ tal cual, sin generar
   el proxy module de <style> que falla cuando la ruta tiene ñ.
   ════════════════════════════════════════════════════════════════ */
.feflag-bar {
    position: relative; overflow: hidden;
    background: #0A1220;
    border-top: 1px solid rgba(227,178,60,.20);
    border-bottom: 1px solid rgba(227,178,60,.10);
    /* Banda baja: la imagen es 1800x158, asi que con poca altura
       igual entran las cumbres (ver background-position). */
    min-height: 92px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px clamp(20px,5vw,60px); gap: 24px;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.feflag-bar > * { position: relative; z-index: 2; }

/* Respaldo de separacion para navegadores sin flex `gap`
   (Safari < 14.1). Sin esto los tres bloques quedan pegados. */
@supports not (gap: 1px) {
    .feflag-bar > * { margin-left: 12px; margin-right: 12px; }
}

.feflag-layers {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden; pointer-events: none; z-index: 1;
}

/* Paisaje con deriva lateral muy lenta.
   El color de fondo es el respaldo si la imagen no carga. */
.feflag-scene {
    position: absolute; top: -2%; right: -4%; bottom: -2%; left: -4%;
    background-color: #101c2e;
    background-image: url('/branding/footer-montanas-2.png');
    background-size: cover;
    background-repeat: no-repeat;
    /* AJUSTE ENCUADRE: mas alto = mas cielo, mas bajo = mas montaña.
       46% deja las cumbres dentro aun con la barra baja. */
    background-position: 58% 46%;
    will-change: transform;
    -webkit-animation: ffDrift 46s ease-in-out infinite alternate;
            animation: ffDrift 46s ease-in-out infinite alternate;
}
@-webkit-keyframes ffDrift {
    from { -webkit-transform: scale(1.06) translate3d(0,0,0); }
    to   { -webkit-transform: scale(1.06) translate3d(-2.4%,0,0); }
}
@keyframes ffDrift {
    from { transform: scale(1.06) translate3d(0,0,0); }
    to   { transform: scale(1.06) translate3d(-2.4%,0,0); }
}

/* Filtro 1: desenfoque + oscurecido general */
.feflag-scrim {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    -webkit-backdrop-filter: blur(1px) saturate(.92);
            backdrop-filter: blur(1px) saturate(.92);
    background: rgba(7,14,24,.16);
}
/* Sin desenfoque disponible (Firefox con la opcion apagada, navegadores
   viejos) se compensa con un velo un poco mas denso, asi el texto
   conserva el mismo contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .feflag-scrim { background: rgba(7,14,24,.34); }
}

/* Filtro 2: profundidad a la izquierda (logo) y base inferior */
.feflag-depth-x {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(4,9,16,.62) 0%, rgba(4,9,16,.34) 24%, rgba(4,9,16,.10) 48%, rgba(4,9,16,.03) 72%, rgba(4,9,16,0) 100%);
}
.feflag-depth-y {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(4,9,16,.16) 0%, rgba(4,9,16,0) 44%, rgba(4,9,16,.18) 100%);
}
/* Brillo calido del sol, restituido por encima del filtro */
.feflag-sun {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(58% 150% at 88% 54%, rgba(255,214,138,.30) 0%, rgba(224,168,63,.14) 34%, rgba(184,121,31,.05) 66%, rgba(184,121,31,0) 100%);
}
.feflag-stars {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; display: block;
    mix-blend-mode: screen;   /* si no se soporta, las estrellas igual se ven */
}
/* Linea de horizonte calida, apenas insinuada */
.feflag-horizon {
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(227,178,60,0) 0%, rgba(227,178,60,.22) 62%, rgba(255,214,138,.42) 90%, rgba(227,178,60,0) 100%);
}

.feflag-bar .feflag-logo { height: 30px; width: auto; display: block; }
.feflag-bar .feflag-claim {
    margin: 0; font-size: 14px; font-style: italic; font-weight: 300;
    color: #EAF1F8;
    text-shadow: 0 1px 3px rgba(4,9,16,.95), 0 2px 22px rgba(4,9,16,.9);
}
.feflag-bar .feflag-claim strong { font-weight: 700; font-style: italic; color: #FFFFFF; }
.feflag-bar .feflag-cta {
    display: inline-block; text-decoration: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: .18em;
    color: #0A1220; background: #E3B23C;
    padding: 10px 22px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 2px 18px rgba(4,9,16,.55);
    -webkit-transition: background .3s ease;
            transition: background .3s ease;
}
.feflag-bar .feflag-cta:hover { background: #F5D780; color: #0A1220; }

@media (max-width: 900px) {
    .feflag-bar { flex-direction: column; padding: 20px 24px; gap: 14px; text-align: center; }
    /* menos oscurecido lateral: en columna el logo ya no cae a la izquierda */
    .feflag-depth-x { opacity: .35; }
    /* con la barra en columna se ve mas alta: subimos el encuadre
       para no perder las cumbres */
    .feflag-scene { background-position: 58% 50%; }
}
/* ── Excepcion deliberada a prefers-reduced-motion ────────────────────
   Por decision del negocio la barra de firma anima siempre: es una pieza
   de marca. Mayor especificidad para ganarle a los resets globales del
   sitio (`*` + !important en app.css, main.css y custom-beach-theme.css),
   que se mantienen para todo el resto.
   PARA REVERTIR: reemplazar este bloque por `animation: none`. */
@media (prefers-reduced-motion: reduce) {
    .feflag-bar .feflag-scene {
        -webkit-animation: ffDrift 46s ease-in-out infinite alternate !important;
                animation: ffDrift 46s ease-in-out infinite alternate !important;
        -webkit-animation-duration: 46s !important;
                animation-duration: 46s !important;
        -webkit-animation-iteration-count: infinite !important;
                animation-iteration-count: infinite !important;
    }
    .feflag-bar .feflag-cta {
        -webkit-transition: background .3s ease !important;
                transition: background .3s ease !important;
        -webkit-transition-duration: .3s !important;
                transition-duration: .3s !important;
    }
}