/* ============================================================
   Energy Telecom — Sistema "Gooey Dorado" de navegación
   Realce líquido dorado (#ffce3a) coherente con la marca.
   - Desktop (>1080px): blob dorado tras el link activo/hover.
   - Móvil (<=1080px): barra flotante inferior tipo app.
   Autoconstruido por gooey-nav.js (inyecta blob + filtros SVG).
   ============================================================ */

:root{
  --gooey-gold:      #ffce3a;
  --gooey-gold-2:    #ffb61e;
  --gooey-navy-ink:  #081428;
  --gooey-ease:      cubic-bezier(.34,1.56,.64,1); /* overshoot líquido */
}

/* ==========================================================
   A) DESKTOP — blob dorado en el nav superior (>1080px)
   ========================================================== */
.nav{position:relative}

/* Capa de blobs: recibe el filtro goo + glow dorado.
   El texto va aparte (por encima) para no difuminarse. */
.gooey-nav__goo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter:url(#gooey-nav-goo) drop-shadow(0 4px 14px rgba(255,206,58,.55));
}
.gooey-nav__blob{
  position:absolute; top:50%; left:0;
  height:38px; width:80px; border-radius:12px;
  transform:translate(0,-50%) scale(.6);
  opacity:0;
  background:linear-gradient(135deg,var(--gooey-gold),var(--gooey-gold-2));
  transition:transform .48s var(--gooey-ease),width .48s var(--gooey-ease),opacity .3s ease;
  will-change:transform,width;
}
.gooey-nav.is-ready .gooey-nav__blob{opacity:1;transform:translate(0,-50%) scale(1)}

/* Links por encima del blob */
.nav a{position:relative;z-index:1}

/* En modo gooey el fondo del link lo pinta el blob: neutraliza el bg base */
body.gooey-on .nav a:hover,
body.gooey-on .nav a.active{background:transparent;color:#cbdaec}
/* Texto legible (navy) sobre el blob dorado: lo marca el JS */
body.gooey-on .nav a.is-lit{color:var(--gooey-navy-ink);font-weight:700}

/* ==========================================================
   B) MÓVIL — barra flotante inferior tipo app (<=1080px)
   ========================================================== */
.gooey-mobilenav{display:none}

@media (max-width:1080px){
  /* Esta barra reemplaza a la hamburguesa */
  .nav-toggle{display:none!important}

  /* Sube el WhatsApp flotante para no chocar con la barra */
  .wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}

  /* Reserva espacio para que la barra flotante no tape el footer/copyright */
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  .gooey-mobilenav{
    display:block;
    position:fixed; left:50%; z-index:75;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
    width:min(420px,calc(100% - 28px));
  }
  .gooey-mobilenav__bar{
    position:relative;
    display:grid; grid-template-columns:repeat(5,1fr);
    padding:8px 6px;
    background:rgba(12,31,66,.92);
    backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    border:1px solid rgba(255,206,58,.28);
    border-radius:26px;
    box-shadow:0 14px 40px -10px rgba(8,20,40,.7),
               inset 0 1px 0 rgba(255,255,255,.06);
  }

  /* Capa gooey (blob flotante) detrás de los iconos */
  .gooey-mobilenav__goo{
    position:absolute; inset:0; z-index:0; pointer-events:none;
    filter:url(#gooey-mobile-goo) drop-shadow(0 6px 16px rgba(255,206,58,.6));
  }
  .gooey-mobilenav__blob{
    position:absolute; top:50%; left:0;
    width:52px; height:52px; border-radius:50%;
    transform:translate(0,-50%) scale(.5); opacity:0;
    background:radial-gradient(circle at 35% 30%,var(--gooey-gold),var(--gooey-gold-2));
    transition:transform .5s var(--gooey-ease),opacity .3s ease;
    will-change:transform;
  }
  .gooey-mobilenav.is-ready .gooey-mobilenav__blob{opacity:1;transform:translate(0,-50%) scale(1)}

  /* Celdas: icono + label */
  .gooey-mobilenav__cell{
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:7px 2px 5px;
    color:#9db3d2; text-align:center;
    transition:color .3s ease,transform .3s var(--gooey-ease);
  }
  .gooey-mobilenav__cell svg{width:22px;height:22px;stroke-width:2;flex:0 0 auto}
  .gooey-mobilenav__label{
    font-family:var(--font-head,'Montserrat',sans-serif);
    font-weight:600; font-size:.62rem; letter-spacing:.01em; line-height:1;
  }
  /* Celda activa: icono navy sobre el dorado, elevado */
  .gooey-mobilenav__cell.is-active{color:var(--gooey-navy-ink);transform:translateY(-3px)}
  .gooey-mobilenav__cell.is-active .gooey-mobilenav__label{color:#e9f0fb;font-weight:700}
  .gooey-mobilenav__cell:active{transform:scale(.92)}
}

/* ==========================================================
   C) Accesibilidad — sin animación si el usuario lo pide
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  .gooey-nav__blob,
  .gooey-mobilenav__blob,
  .gooey-mobilenav__cell{transition:none!important}
}