/* ============================================================
   PROMOCIÓN EMERGENTE · GRUPO FRONTERA EN ARENA MONTERREY
   ------------------------------------------------------------
   Aviso promocional que aparece centrado en pantalla (velo +
   tarjeta) unos instantes después de cargar index.html, una sola
   vez por sesión de navegación (lo controla js/promo-grupo-
   frontera.js con sessionStorage). Archivo aislado del resto del
   sitio a propósito: no toca css/base.css, css/inicio.css ni
   css/sesion.css, así que no afecta ningún otro componente ni
   ninguna otra página. Reutiliza los tokens de marca ya definidos
   en css/base.css (colores, radios, sombras, tipografías) para
   que se vea nativo del sitio.
   ============================================================ */

.promo-gf-velo{
  position:fixed; inset:0; z-index:350;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(11,31,61,.62);
  -webkit-backdrop-filter:saturate(.6) blur(2px);
  backdrop-filter:saturate(.6) blur(2px);
  animation:promoGfVelo .2s ease-out;
}
.promo-gf-velo.promo-gf-velo--activo{ display:grid; }

@keyframes promoGfVelo{ from{ opacity:0; } }

.promo-gf-tarjeta{
  position:relative;
  width:100%; max-width:400px;
  background:var(--papel);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 70px rgba(11,31,61,.45);
  animation:promoGfTarjeta .26s cubic-bezier(.22,1,.36,1);
}
@keyframes promoGfTarjeta{ from{ opacity:0; transform:translateY(-16px) scale(.98); } }

.promo-gf-cerrar{
  position:absolute; top:12px; right:12px; z-index:2;
  width:32px; height:32px;
  display:grid; place-items:center;
  background:rgba(11,31,61,.55); border:0; border-radius:50%;
  color:#fff; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.promo-gf-cerrar:hover{ background:rgba(11,31,61,.8); transform:scale(1.06); }
.promo-gf-cerrar svg{ width:16px; height:16px; }

.promo-gf-figura{
  position:relative;
  margin:0;
  aspect-ratio:1200/630;
  background:#0b1f3d;
}
.promo-gf-figura img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.promo-gf-insignia{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  background:var(--carmin); color:#fff;
  border-radius:var(--radio-pastilla);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(180,20,58,.4);
}
.promo-gf-insignia svg{ width:12px; height:12px; }

.promo-gf-cuerpo{
  padding:22px 24px 26px;
  text-align:center;
}

.promo-gf-ojo{
  margin:0 0 4px;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#1e5fb8;
}

.promo-gf-titulo{
  margin:0 0 6px;
  font-family:var(--fuente-titulo);
  font-size:23px; font-weight:800; letter-spacing:-.01em; line-height:1.15;
  color:var(--tinta);
}

.promo-gf-datos{
  margin:0 0 16px;
  font-size:13.5px; font-weight:500;
  color:var(--tinta-suave);
}

.promo-gf-cuenta{
  display:flex; justify-content:center; gap:8px;
  margin:0 0 16px;
}
.promo-gf-cuenta__celda{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:54px;
  padding:8px 4px;
  background:var(--papel-tenue);
  border:1px solid var(--linea);
  border-radius:10px;
}
.promo-gf-cuenta__num{
  font-family:var(--fuente-dato);
  font-size:18px; font-weight:600;
  color:var(--carmin-hondo);
  font-variant-numeric:tabular-nums;
}
.promo-gf-cuenta__etq{
  font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--tinta-tenue);
}

.promo-gf-precio{
  margin:0 0 18px;
  font-size:13px;
  color:var(--tinta);
}
.promo-gf-precio b{
  font-size:16px; font-weight:800; color:var(--carmin-hondo);
}

.promo-gf-cta{
  display:flex; width:100%;
  align-items:center; justify-content:center;
  padding:15px 20px;
  border:0; border-radius:var(--radio-pastilla);
  background:var(--degradado-cta); color:#fff;
  font-family:var(--fuente-titulo);
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}
.promo-gf-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(224,36,94,.4); }

.promo-gf-despues{
  display:block; margin:14px auto 0;
  background:none; border:0;
  font-size:12.5px; color:var(--tinta-tenue);
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}
.promo-gf-despues:hover{ color:var(--tinta-suave); }

@media (max-width:480px){
  .promo-gf-velo{ padding:16px; }
  .promo-gf-cuerpo{ padding:18px 18px 22px; }
  .promo-gf-titulo{ font-size:20px; }
  .promo-gf-cuenta__celda{ min-width:46px; padding:7px 3px; }
  .promo-gf-cuenta__num{ font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  .promo-gf-velo, .promo-gf-tarjeta{ animation:none; }
}