/* ============================================================
   gf-anim.css — Animaciones del logotipo GestFuturo 3
   Piezas: contraccion (GestFuturo 3.0 -> GF3), cambio de version
   (GestFuturo 2 -> 3) y la ruta 1992 -> 2005 -> GF3.
   Motor: assets/js/gf-anim.js
   Peso 700 (no 800): la web solo carga Poppins 400/500/600/700.
   ============================================================ */

.gf-mark{
  --gf-1:#080a3c;   /* "Gest" y la G */
  --gf-2:#3399cc;   /* "Futuro" y la F */
  --gf-3:#ff612f;   /* "3.0" y el 3 */
  --gf-old:#b9bdd2; /* el 2 de la version antigua */
  font-family:'Poppins','Poppins Fallback',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700; font-size:30px; line-height:1.1; letter-spacing:-.02em;
  white-space:nowrap; display:inline-block; position:relative;
  font-variant-numeric:tabular-nums; user-select:none;
}
.gf-w1{ color:var(--gf-1) } .gf-w2{ color:var(--gf-2) } .gf-w3{ color:var(--gf-3) }

/* --- Contraccion --- */
.gf-k{ display:inline-block }
.gf-c{ display:inline-block; transform-origin:left center; white-space:pre; will-change:width,transform,opacity }

/* --- Cambio de version (2 -> 3) --- */
.gf-slot{ position:relative; display:inline-block; z-index:0 }
.gf-roll{ position:relative; display:inline-block }
.gf-old{ display:inline-block; color:var(--gf-old) }
.is-v3 .gf-old{ color:var(--gf-3) }
.gf-new{ position:absolute; left:0; top:0; display:inline-block; color:var(--gf-3); pointer-events:none;
  opacity:0; filter:blur(10px); transform:translateY(40%) scale(.9) }
.gf-new.is-old{ color:var(--gf-old) }
.gf-pulse{ position:absolute; left:50%; top:50%; width:1.9em; height:1.9em; border-radius:50%; z-index:-1; pointer-events:none;
  transform:translate(-50%,-50%) scale(.6); opacity:0; background:radial-gradient(circle,var(--gf-3) 0%,transparent 65%) }
.gf-line{ position:absolute; left:0; right:0; bottom:-.04em; height:.045em; border-radius:1em; pointer-events:none;
  background:var(--gf-3); transform:scaleX(0); transform-origin:left center; opacity:0 }

/* --- La ruta: 1992 -> 2005 -> GF3 --- */
.gf-journey{ --gf-1:#080a3c; --gf-2:#3399cc; --gf-3:#ff612f; --gf-old:#b9bdd2;
  font-family:'Poppins','Poppins Fallback',system-ui,-apple-system,"Segoe UI",sans-serif; font-size:clamp(2rem,6vw,4rem);
  display:inline-grid; justify-items:center; gap:.18em; position:relative; user-select:none }
.gf-journey .gf-mark{ font-size:1em; --gf-1:inherit; --gf-2:inherit; --gf-3:inherit; --gf-old:inherit }
.gf-j-year{ font-size:.2em; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gf-old); opacity:0; line-height:1; padding-left:.3em }
.gf-j-stack{ display:grid; justify-items:center; align-items:center }
.gf-j-stack > *{ grid-area:1/1 }
.gf-j-name{ opacity:0 }
.gf-journey[data-era="1"] .gf-w2{ color:var(--gf-1) }
.gf-journey .gf-w2{ transition:color .7s }
.gf-j-ver{ display:inline-block; white-space:pre; width:0; transform:scaleX(0); transform-origin:left center; opacity:0; color:var(--gf-3) }
.gf-j-final{ font-size:1.35em; opacity:0; position:relative }
.gf-j-final .gf-w3{ position:relative; z-index:0 }
.gf-j-final .gf-pulse{ width:2.4em; height:2.4em }
.gf-j-track{ position:relative; width:62%; height:.04em; background:var(--gf-old); opacity:.55; border-radius:1em; margin-top:.1em }
.gf-j-fill{ position:absolute; inset:0; background:var(--gf-3); transform:scaleX(0); transform-origin:left center; border-radius:1em }
.gf-j-dot{ position:absolute; top:50%; width:.14em; height:.14em; border-radius:50%; background:var(--gf-old); transform:translate(-50%,-50%); transition:background .4s, box-shadow .4s }
.gf-j-dot:nth-child(2){ left:0 } .gf-j-dot:nth-child(3){ left:50% } .gf-j-dot:nth-child(4){ left:100% }
.gf-j-dot.on{ background:var(--gf-3); box-shadow:0 0 0 .05em rgba(255,97,47,.35) }
.gf-journey.is-final .gf-j-track{ opacity:0; transition:opacity .4s }

/* --- Caja del logo en la navbar: reserva ancho y alto fijos para CLS 0 --- */
.gf-logo{ display:inline-flex; align-items:center; height:54px; overflow:visible }
.gf-logo .gf-mark{ cursor:pointer }
.gf-logo-d{ width:206px }   /* escritorio: "GestFuturo 3" a 30px */
.gf-logo-m{ width:84px }    /* movil: GF3 contraido */
.gf-logo-m .gf-mark{ font-size:34px }
.navbar-area .navbar-brand .gf-logo,
.strax-responsive-nav .logo .gf-logo{ vertical-align:middle }
@media (max-width:1199px){ .gf-logo-d{ width:180px } .gf-logo-d .gf-mark{ font-size:26px } }
@media (max-width:420px){ .gf-logo-m{ width:72px } .gf-logo-m .gf-mark{ font-size:29px } }

/* Texto accesible solo para lectores de pantalla */
.gf-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

@media (prefers-reduced-motion: reduce){ .gf-logo .gf-mark{ cursor:default } }