/* ==========================================================================
   Europing — sistema visual compartido
   Paleta derivada de la referencia de fondo (azul marino profundo con
   una franja de luz cian horizontal). Un único archivo enlazado desde
   cada página — no toca lógica, solo variables y utilidades visuales.
   ========================================================================== */

:root {
  /* -- superficie / profundidad -- */
  --e-bg-deep: #0a0e26;
  --e-bg-mid: #10163a;
  --e-surface: #121a35;
  --e-surface-2: #182248;
  --e-surface-hover: #1c2750;

  /* -- glow (tomado literalmente de la referencia) -- */
  --e-glow-core: #2fb4dc;
  --e-glow-soft: #2f6fd6;
  --e-glow-violet: #3a3fb0;

  /* -- texto -- */
  --e-ink: #eef2fb;
  --e-ink-soft: #9fb0d1;
  --e-ink-faint: #64729a;

  /* -- borde / tinte (sustituye rgba(2,50,127,X)) -- */
  --e-line-rgb: 148, 196, 255;
  --e-border: rgba(var(--e-line-rgb), 0.14);
  --e-border-soft: rgba(var(--e-line-rgb), 0.08);
  --e-border-strong: rgba(var(--e-line-rgb), 0.24);

  /* -- acento (mismo cian del glow: la UI y el fondo comparten fuente de luz) -- */
  --e-accent: #2fb4dc;
  --e-accent-ink: #052230;
  --e-accent-deep: #1c84ab;
  --e-accent-soft: rgba(47, 180, 220, 0.13);

  /* -- semántico -- */
  --e-success: #4fbf8f;
  --e-warning: #e0a84e;
  --e-danger: #e0685f;

  --e-shadow-sm: 0 1px 2px rgba(3, 6, 20, 0.4);
  --e-shadow-md: 0 10px 30px rgba(3, 6, 20, 0.45);
  --e-shadow-lg: 0 24px 64px rgba(3, 6, 20, 0.55);

  --e-radius-sm: 10px;
  --e-radius-md: 14px;
  --e-radius-lg: 20px;

  --e-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}

/* ==========================================================================
   Fondo animado — capa fija detrás de todo el contenido de la página.
   Uso: <div class="e-bg" aria-hidden="true"><div class="e-bg-glow e-bg-glow-a"></div>...</div>
   colocado como primer hijo del contenedor raíz de cada página, que a su
   vez debe tener position:relative y background:var(--e-bg-deep).
   ========================================================================== */
.e-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--e-bg-deep);
}
.e-bg::before {
  /* grano sutil — SVG feTurbulence como data-URI, sin peticiones de red */
  content: '';
  position: absolute;
  inset: -10%;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.e-bg-glow {
  position: absolute;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  min-width: 480px;
  min-height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.e-bg-glow-a {
  top: -12%;
  left: 8%;
  background: radial-gradient(circle, var(--e-glow-core) 0%, var(--e-glow-soft) 45%, transparent 72%);
  animation: eDriftA 34s ease-in-out infinite alternate;
}
.e-bg-glow-b {
  bottom: -18%;
  right: 4%;
  background: radial-gradient(circle, var(--e-glow-violet) 0%, var(--e-bg-mid) 60%, transparent 75%);
  opacity: 0.5;
  animation: eDriftB 42s ease-in-out infinite alternate;
}
.e-bg-glow-c {
  top: 30%;
  right: 22%;
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  min-width: 320px;
  min-height: 320px;
  background: radial-gradient(circle, var(--e-glow-core) 0%, transparent 70%);
  opacity: 0.28;
  animation: eDriftC 26s ease-in-out infinite alternate;
}
@keyframes eDriftA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(6%, 8%) scale(1.08); }
}
@keyframes eDriftB {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-8%, -6%) scale(1.1); }
}
@keyframes eDriftC {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-10%, 6%) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .e-bg-glow { animation: none !important; }
}
/* pantallas pequeñas / gama baja: una sola capa de blur pesado es cara —
   se reduce a dos capas y se sube el blur (más barato que animar 3) */
@media (max-width: 640px) {
  .e-bg-glow-c { display: none; }
}

/* Placeholder de formularios — coherente en todas las páginas que enlazan este archivo */
input::placeholder, textarea::placeholder { color: var(--e-ink-faint); opacity: 1; }

/* ==========================================================================
   Utilidades de superficie
   ========================================================================== */
.e-surface {
  background: var(--e-surface);
  border: 1px solid var(--e-border-soft);
  border-radius: var(--e-radius-md);
  box-shadow: var(--e-shadow-sm);
}
.e-font-mono { font-family: var(--e-font-mono); font-variant-numeric: tabular-nums; }

.e-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--e-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.e-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.e-badge-live { background: rgba(79, 191, 143, 0.14); color: var(--e-success); }
.e-badge-live::before { background: var(--e-success); animation: ePulse 1.8s ease-in-out infinite; }
.e-badge-est { background: rgba(224, 168, 78, 0.14); color: var(--e-warning); }
.e-badge-est::before { background: var(--e-warning); }
@keyframes ePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .e-badge-live::before { animation: none; }
}

/* Motion base — respeta reduced-motion globalmente para cualquier
   transición que las páginas añadan usando estas variables. */
:root { --e-ease: cubic-bezier(0.16, 1, 0.3, 1); --e-dur: 0.22s; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}