/* ============================================================
   [PE-1] Pastilla elástica · base común del ecosistema ARATECH
   (va con pastilla-elastica.js). Cada sitio define sus colores:
     --pe-color       relleno de la pastilla (azul ARATECH)
     --pe-texto       texto/iconos dentro de la pastilla
     --pe-suave       pastilla tenue del hover
     --pe-onda        color de la onda al tocar
   ============================================================ */
.pe-caja { isolation: isolate; }

.pe-capa {
  position: absolute; top: 0; left: 0; z-index: 2;
  box-sizing: border-box; margin: 0; border: 0;
  pointer-events: none; user-select: none;
  background: var(--pe-color, #1f6feb);
  color: var(--pe-texto, #fff);
  clip-path: inset(0 100% 100% 0);
  opacity: 0;
  will-change: clip-path;
}
.pe-capa.pe-vis { opacity: 1; }
/* dentro de la pastilla todo es "activo": texto e iconos claros, sin fondos */
.pe-capa * { pointer-events: none !important; }

.pe-suave {
  position: absolute; top: 0; left: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  background: var(--pe-suave, rgba(127, 127, 127, .12));
  transition:
    transform .22s cubic-bezier(.16, 1, .3, 1),
    width .22s cubic-bezier(.16, 1, .3, 1),
    height .22s cubic-bezier(.16, 1, .3, 1),
    opacity .15s ease;
}
.pe-suave.pe-vis { opacity: 1; }
.pe-suave.pe-sin-viaje { transition: opacity .18s ease; }

.pe-onda {
  position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, transparent 38%, var(--pe-onda, rgba(127, 127, 127, .45)) 40%, transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .pe-suave { transition: opacity .01s; }
}

/* ============================================================
   [PE-W1] aratech.com.mx · barra superior
   ============================================================ */
.nav__links.pe-lista {
  --pe-color: var(--grad, linear-gradient(135deg, #2F8BFF, #38D3F5));
  --pe-texto: #fff;
  --pe-suave: rgba(47, 139, 255, .12);
  --pe-onda: rgba(56, 211, 245, .5);
  gap: 2px;
  align-items: center;
}
.nav__links.pe-lista a { display: block; padding: 7px 13px; border-radius: 999px; }
.nav__links.pe-lista a::after { display: none; }
.nav__links .pe-capa a,
.nav__links .pe-capa a:hover { color: var(--pe-texto); }
.nav__links .pe-capa { box-shadow: none; }
html.light-mode .nav__links.pe-lista { --pe-suave: rgba(31, 111, 235, .08); --pe-onda: rgba(31, 111, 235, .35); }
@media (min-width: 1440px) {
  .nav__links.pe-lista { gap: 4px; }
  .nav__links.pe-lista a { padding: 8px clamp(12px, 1vw, 18px); }
}
@media (max-width: 1180px) {
  .nav__links.pe-lista a { padding: 7px 10px; }
}