/* ============================================================
   [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; }
}