/* =============================================================
   WANDERPIN / TRIPPLAN — Capa FX  (efectos "wow")
   Aurora 3D · splash animado · tilt 3D · brillo holográfico ·
   chinchetas flotantes · reveal-on-scroll.
   Pensada para superponerse a design-system.css sin reemplazarlo.
   Soporta claro/oscuro y respeta prefers-reduced-motion.
============================================================= */

/* ============================================================
   0 · TOKENS FX
============================================================ */
:root {
  --fx-aurora-1: rgba(91,59,140,.20);   /* plum */
  --fx-aurora-2: rgba(211,75,58,.12);   /* pin-red */
  --fx-aurora-3: rgba(56,99,168,.12);   /* pin-blue */
  --fx-shine:    rgba(255,255,255,.55);
  --fx-glass:    rgba(247,242,232,.55);
  --fx-glass-edge: rgba(28,26,30,.10);
}
[data-theme="dark"] {
  --fx-aurora-1: rgba(133,98,204,.42);
  --fx-aurora-2: rgba(232,96,80,.22);
  --fx-aurora-3: rgba(77,122,196,.30);
  --fx-shine:    rgba(196,168,240,.45);
  --fx-glass:    rgba(28,24,48,.62);
  --fx-glass-edge: rgba(255,255,255,.10);
}

/* ============================================================
   1 · AURORA — fondo animado en 3D (fijo, detrás de todo)
============================================================ */
.fx-aurora {
  position: fixed;
  inset: -20vh -20vw;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  filter: blur(8px);
  opacity: .9;
}
.fx-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: normal;
  will-change: transform;
}
.fx-aurora .b1 {
  width: 52vw; height: 52vw; left: -8vw; top: -10vh;
  background: radial-gradient(circle at 30% 30%, var(--fx-aurora-1), transparent 62%);
  animation: fxDrift1 26s ease-in-out infinite;
}
.fx-aurora .b2 {
  width: 46vw; height: 46vw; right: -10vw; top: 8vh;
  background: radial-gradient(circle at 60% 40%, var(--fx-aurora-3), transparent 60%);
  animation: fxDrift2 32s ease-in-out infinite;
}
.fx-aurora .b3 {
  width: 50vw; height: 50vw; left: 18vw; bottom: -22vh;
  background: radial-gradient(circle at 50% 50%, var(--fx-aurora-2), transparent 60%);
  animation: fxDrift3 38s ease-in-out infinite;
}
[data-theme="dark"] .fx-aurora { opacity: 1; filter: blur(10px); }

@keyframes fxDrift1 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(8vw,6vh,0) scale(1.12); }
  66%     { transform: translate3d(-4vw,10vh,0) scale(.95); }
}
@keyframes fxDrift2 {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(-9vw,8vh,0) scale(1.15); }
}
@keyframes fxDrift3 {
  0%,100% { transform: translate3d(0,0,0) scale(1.05); }
  40%     { transform: translate3d(7vw,-6vh,0) scale(.92); }
  75%     { transform: translate3d(-6vw,-3vh,0) scale(1.1); }
}

/* ============================================================
   2 · SPLASH — pantalla de inicio animada
============================================================ */
#fx-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 38%, var(--surface) 0%, var(--paper) 60%);
  overflow: hidden;
  transition: opacity .55s ease, visibility .55s ease;
  /* Failsafe: si fx.js no llega a cerrarlo, se oculta solo a los 4s
     para no bloquear nunca la página. */
  animation: fxSplashFailsafe 0s linear 4s forwards;
}
@keyframes fxSplashFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#fx-splash.fx-hide { opacity: 0; visibility: hidden; }
.fx-splash-seen #fx-splash { display: none !important; }
#fx-splash::before {
  /* halo plum pulsante de fondo */
  content: ""; position: absolute; width: 60vmin; height: 60vmin;
  border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-58%);
  background: radial-gradient(circle, var(--fx-aurora-1), transparent 65%);
  animation: fxSplashHalo 2.4s ease-in-out infinite;
}
@keyframes fxSplashHalo {
  0%,100% { opacity: .55; transform: translate(-50%,-58%) scale(.9); }
  50%     { opacity: 1;   transform: translate(-50%,-58%) scale(1.15); }
}
.fx-splash-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  perspective: 800px;
}
/* Anillos orbitando (mapa/brújula abstracta) */
.fx-splash-orbit {
  position: relative; width: 132px; height: 132px;
  transform-style: preserve-3d;
  animation: fxSplashTilt 3s ease-in-out infinite;
}
.fx-splash-orbit i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--plum-3);
  opacity: .5;
}
.fx-splash-orbit i:nth-child(1) { transform: rotateX(68deg); }
.fx-splash-orbit i:nth-child(2) { transform: rotateY(68deg); border-color: var(--pin-red); }
.fx-splash-orbit i:nth-child(3) { transform: rotateX(20deg) rotateY(45deg); border-color: var(--pin-blue); }
@keyframes fxSplashTilt {
  0%,100% { transform: rotateZ(0deg) rotateX(4deg); }
  50%     { transform: rotateZ(180deg) rotateX(-4deg); }
}
/* Chincheta que cae en el centro */
.fx-splash-pin {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-100%);
  animation: fxPinDrop .9s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.35));
}
.fx-splash-pin svg { width: 38px; height: 48px; display: block; }
@keyframes fxPinDrop {
  0%   { transform: translate(-50%,-260%) scale(.6); opacity: 0; }
  60%  { transform: translate(-50%,-96%)  scale(1.05); opacity: 1; }
  80%  { transform: translate(-50%,-104%) scale(1); }
  100% { transform: translate(-50%,-100%) scale(1); }
}
.fx-splash-word {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 30px; letter-spacing: -.02em;
  color: var(--ink);
  display: flex; gap: .02em; overflow: hidden;
}
.fx-splash-word span {
  display: inline-block;
  animation: fxLetterUp .6s cubic-bezier(.22,1,.36,1) both;
}
.fx-splash-word em { color: var(--plum); font-style: italic; font-weight: 400; }
@keyframes fxLetterUp {
  from { opacity: 0; transform: translateY(110%) rotate(6deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
.fx-splash-bar {
  width: 132px; height: 3px; border-radius: 999px;
  background: var(--paper-edge); overflow: hidden;
}
.fx-splash-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--plum), var(--plum-3));
  animation: fxSplashLoad 1.25s ease-out .25s forwards;
}
@keyframes fxSplashLoad { to { width: 100%; } }

/* ============================================================
   3 · TILT 3D + BRILLO HOLOGRÁFICO  (tarjetas)
   JS añade .fx-tilt y setea --rx/--ry/--mx/--my.
============================================================ */
.trip-grid, .plan-grid { perspective: 1100px; }

.fx-tilt {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateY(var(--ty, 0px));
  transition: transform .12s ease-out, box-shadow .25s ease;
  will-change: transform;
}

/* Brillo que sigue el cursor (sin tocar el markup, usa ::after) */
.trip-card::after,
.plan-card::after,
.feat::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 4;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              var(--fx-shine), transparent 58%);
  opacity: 0; transition: opacity .3s ease;
  mix-blend-mode: soft-light;
}
.trip-card:hover::after,
.plan-card:hover::after,
.feat:hover::after { opacity: .9; }
[data-theme="dark"] .trip-card:hover::after,
[data-theme="dark"] .plan-card:hover::after,
[data-theme="dark"] .feat:hover::after { opacity: 1; mix-blend-mode: screen; }

/* ============================================================
   4 · REVEAL ON SCROLL
============================================================ */
/* Estado oculto solo si hay JS (clase fx-js en <html>): sin JS, el
   contenido se ve siempre — nunca dejamos texto invisible. */
.fx-js .fx-reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.fx-reveal.fx-in { opacity: 1; transform: none; }
.fx-reveal[data-fx-delay="1"] { transition-delay: .08s; }
.fx-reveal[data-fx-delay="2"] { transition-delay: .16s; }
.fx-reveal[data-fx-delay="3"] { transition-delay: .24s; }
.fx-reveal[data-fx-delay="4"] { transition-delay: .32s; }

/* ============================================================
   5 · CHINCHETAS FLOTANTES 3D  (decorativas, landing)
============================================================ */
/* Capa al FRENTE del contenido (antes quedaban medio escondidas detrás
   del texto y parecía un bug). Colocadas en zonas sin texto. */
.fx-floaters { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 6; }
.fx-pin {
  position: absolute;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.28));
  animation: fxFloat 7s ease-in-out infinite;
  will-change: transform;
}
.fx-pin svg { display: block; }
/* Zonas libres: mitad derecha (alrededor de la tarjeta) + márgenes,
   lejos de la columna de texto de la izquierda. */
.fx-pin.p-a { left: 60%; top: 4%;  animation-delay: -1s;   }
.fx-pin.p-b { left: 89%; top: 1%;  animation-delay: -3s;   }
.fx-pin.p-c { left: 95%; top: 72%; animation-delay: -5s;   }
.fx-pin.p-d { left: 57%; top: 90%; animation-delay: -2.4s; }
@keyframes fxFloat {
  0%,100% { transform: translateY(0) rotate(-6deg); }
  50%     { transform: translateY(-22px) rotate(6deg); }
}

/* ============================================================
   6 · UTILIDADES DE TEXTO / GLASS
============================================================ */
.fx-grad-text {
  background: linear-gradient(110deg, var(--ink) 18%, var(--plum-2) 60%, var(--pin-red) 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Evita que background-clip:text recorte descenders de la itálica */
  padding-bottom: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-theme="dark"] .fx-grad-text {
  background: linear-gradient(110deg, var(--ink) 10%, var(--plum-3) 55%, #f0b8ad 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fx-glass {
  background: var(--fx-glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--fx-glass-edge);
}

/* Brillo deslizante en botón primario (sweep) */
.btn-primary-wp { position: relative; overflow: hidden; }
.btn-primary-wp::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
}
.btn-primary-wp:hover::after { animation: fxSweep .85s ease; }
@keyframes fxSweep { from { left: -120%; } to { left: 160%; } }

/* ============================================================
   7 · RESPONSIVE / RENDIMIENTO
============================================================ */
@media (max-width: 767px) {
  /* En móvil bajamos coste: menos blur, sin tilt (JS también lo evita) */
  .fx-aurora { filter: blur(6px); opacity: .8; }
  .fx-floaters { display: none; }
  .fx-splash-word { font-size: 24px; }
}

/* ============================================================
   8 · BOTONES REFORZADOS  (global — también dentro de la app)
============================================================ */
.btn-wp { letter-spacing: .005em; }

.btn-primary-wp {
  background: linear-gradient(135deg, var(--plum-2) 0%, var(--plum) 70%);
  box-shadow: 0 2px 0 var(--plum-ink), 0 10px 24px -10px rgba(91,59,140,.7);
}
.btn-primary-wp:hover {
  background: linear-gradient(135deg, var(--plum-3) 0%, var(--plum-2) 75%);
  box-shadow: 0 2px 0 var(--plum-ink), 0 16px 34px -12px rgba(91,59,140,.85);
}
[data-theme="dark"] .btn-primary-wp {
  background: linear-gradient(135deg, var(--plum-2) 0%, var(--plum) 75%);
  box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 28px rgba(133,98,204,.5);
}
[data-theme="dark"] .btn-primary-wp:hover {
  box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 40px rgba(133,98,204,.7);
}

/* Lift solo en botones grandes (no en los icono/sm del navbar) */
.btn-ghost-wp:not(.btn-sm-wp) {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.btn-ghost-wp:not(.btn-sm-wp):hover { transform: translateY(-2px); }

/* Ghost en oscuro: relleno sutil para que se lean como botones (antes
   quedaban como contornos casi invisibles). */
[data-theme="dark"] .btn-ghost-wp {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: var(--ink);
}
[data-theme="dark"] .btn-ghost-wp:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.26);
  color: var(--ink);
}
[data-theme="dark"] .btn-ghost-wp.active {
  background: rgba(133,98,204,.22);
  border-color: var(--plum-2);
  color: #fff;
}

/* Botón "peligro" inline (color/border bad): hover se rellena de rojo
   (antes mi regla dejaba texto blanco sobre fondo transparente). */
.btn-wp[style*="--bad"]:hover {
  background: var(--bad) !important; color: #fff !important; border-color: var(--bad) !important;
}

/* Inputs de archivo nativos -> estilo del sistema (el botón blanco por
   defecto rompía el modo oscuro). */
input[type="file"].input-wp {
  padding: 5px; cursor: pointer; line-height: 1.6;
}
input[type="file"].input-wp::file-selector-button {
  font: inherit; font-weight: 700; font-size: 12.5px;
  padding: 8px 14px; margin-right: 12px;
  border-radius: 8px; border: 1px solid var(--paper-edge);
  background: var(--surface-2); color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
input[type="file"].input-wp::file-selector-button:hover {
  background: var(--plum-soft); border-color: var(--plum-3); color: var(--plum);
}
[data-theme="dark"] input[type="file"].input-wp::file-selector-button {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: var(--ink);
}
[data-theme="dark"] input[type="file"].input-wp::file-selector-button:hover {
  background: rgba(133,98,204,.22); border-color: var(--plum-2); color: var(--plum-3);
}

/* ============================================================
   8b · TARJETAS MÁS RICAS  (global — dashboard / agenda)
============================================================ */
.trip-card, .plan-card { border-radius: var(--radius-lg); }

/* Gloss diagonal sobre la "foto" de las trip-cards */
.trip-card-art { position: relative; }
.trip-card-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.28) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.16) 100%);
  mix-blend-mode: soft-light;
}
/* Zoom sutil de la foto al pasar el ratón */
.trip-card .photo-ph, .plan-card .img .photo-ph {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.trip-card:hover .photo-ph, .plan-card:hover .photo-ph { transform: scale(1.06); }

/* Acento plum que crece en el borde superior al pasar el ratón */
.trip-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--plum), var(--pin-red));
  transform: scaleX(0); transform-origin: left; z-index: 3;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.trip-card:hover::before { transform: scaleX(1); }

/* ============================================================
   9 · ENTRADA DE PÁGINA  (perceptible al navegar en la app)
============================================================ */
@keyframes fxPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.page, .agenda-shell, .auth-split {
  animation: fxPageIn .5s cubic-bezier(.22,1,.36,1) both;
}

/* Título de página con barrido de brillo continuo */
.page-title em, .trip-side h2 { position: relative; }

/* ============================================================
   10 · AUTH — layout partido con panel decorativo
============================================================ */
.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
}
.auth-aside {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 56px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(255,255,255,.14), transparent 50%),
    linear-gradient(150deg, var(--plum-ink) 0%, var(--plum) 55%, var(--plum-2) 100%);
}
.auth-aside-mid { position: relative; z-index: 2; }
.auth-aside-mid h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 18px; color: #fff; }
.auth-aside-mid h2 em { font-style: italic; font-weight: 400; color: #f3d9d2; }
.auth-aside-mid p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 30ch; margin: 0; }
.auth-aside-foot { position: relative; z-index: 2; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* Escena de mapa de fondo del aside (se mueve con el ratón vía data-parallax) */
.auth-aside-scene { position: absolute; inset: -36px; z-index: 0; }
.auth-aside-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,10,38,.58) 0%, rgba(18,10,38,.14) 44%, transparent 66%),
    linear-gradient(180deg, rgba(18,10,38,.40) 0%, transparent 26%, transparent 50%, rgba(18,10,38,.58) 100%);
}
/* Legibilidad del texto sobre el mapa */
.auth-aside-top, .auth-aside-mid h2, .auth-aside-mid p, .auth-aside-foot {
  text-shadow: 0 1px 14px rgba(10,6,24,.5);
}
/* Marca clicable -> raíz */
.auth-aside-top {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 11px;
  font-family: "Fraunces", serif; font-weight: 700; font-size: 22px; color: #fff;
  text-decoration: none; width: max-content;
  transition: opacity .15s;
}
.auth-aside-top:hover { color: #fff; opacity: .82; }
.auth-aside-logo { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }

.auth-panel { display: grid; place-items: center; padding: 40px 20px; }
.auth-panel .auth-card {
  width: 100%; max-width: 420px;
  background: var(--fx-glass);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--fx-glass-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 30px;
}
.auth-panel .auth-card h1 { font-size: 38px; margin: 14px 0 6px; }
.auth-panel .auth-card .brand-logo-icon { height: 44px; width: auto; }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}

/* ============================================================
   11 · ESCENA DE MAPA  (hero + aside de auth)
============================================================ */
.wp-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.wp-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.wp-water { fill: rgba(110,150,195,.20); }
[data-theme="dark"] .wp-water { fill: rgba(70,105,160,.22); }

.wp-grid path { stroke: rgba(60,45,15,.07); stroke-width: 1; fill: none; }
[data-theme="dark"] .wp-grid path { stroke: rgba(200,185,240,.06); }

/* Ruta planificada — overlay que comparte el sistema de % con los pins */
.wp-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.wp-route {
  fill: none; stroke: var(--pin-red); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 6 9; opacity: .92;
  vector-effect: non-scaling-stroke;
  animation: wpDash 1.1s linear infinite;
}
@keyframes wpDash { to { stroke-dashoffset: -30; } }

/* Pins de la escena — MISMAS coordenadas que los vértices de la ruta
   (42,68) (58,45) (80,28), para que la línea cuadre con las chinchetas. */
.wp-map-pins { position: absolute; inset: 0; z-index: 2; }
.wp-mp { position: absolute; transform: translate(-50%, -100%); }
.wp-mp svg { display: block; filter: drop-shadow(0 5px 5px rgba(0,0,0,.32)); }
.wp-mp-1 { left: 42%; top: 68%; animation: wpPinBob 3.2s ease-in-out infinite; }
.wp-mp-2 { left: 58%; top: 45%; animation: wpPinBob 3.2s ease-in-out .5s infinite; }
.wp-mp-3 { left: 80%; top: 28%; animation: wpPinBob 3.2s ease-in-out 1s infinite; }
@keyframes wpPinBob {
  0%,100% { transform: translate(-50%, -100%); }
  50%     { transform: translate(-50%, -116%); }
}
/* Onda expansiva en el pin destacado */
.wp-ripple {
  position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--pin-red);
  transform: translate(-50%, 50%); pointer-events: none;
  animation: wpRipple 2.1s ease-out infinite;
}
@keyframes wpRipple {
  0%   { opacity: .7; transform: translate(-50%, 50%) scale(.4); }
  100% { opacity: 0;  transform: translate(-50%, 50%) scale(2.6); }
}

/* Brújula */
.wp-compass {
  position: absolute; right: 14px; top: 14px; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--fx-glass); border: 1px solid var(--fx-glass-edge);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm); color: var(--ink); z-index: 3;
}
.wp-compass svg { width: 24px; height: 24px; display: block; }

/* ── Mapa del hero (home) — look CLARO más moderno ───────────
   Antes era beige/crema. Lo pasamos a una paleta fría tipo Positron
   (lavanda/blanco) para que combine con el plum y resalten los pines.
   Solo afecta a modo claro; el oscuro (que ya gusta) queda intacto. */
html:not([data-theme="dark"]) .hero-map {
  background:
    radial-gradient(ellipse at 22% 26%, #eff0fb 0%, transparent 46%),
    radial-gradient(ellipse at 78% 74%, #e7e6f6 0%, transparent 52%),
    linear-gradient(165deg, #f5f3fd 0%, #e6e4f3 100%) !important;
}
html:not([data-theme="dark"]) .hero-map .map-road  { stroke: #c8c3e2; opacity: .9; }
html:not([data-theme="dark"]) .hero-map .map-river { stroke: #b7c6ea; opacity: .9; }
html:not([data-theme="dark"]) .hero-map .wp-grid path { stroke: rgba(91,59,140,.08); }
html:not([data-theme="dark"]) .hero-map .wp-water { fill: rgba(125,150,215,.16); }

/* Si el usuario prefiere menos movimiento, lo desactivamos todo */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-pin, #fx-splash::before,
  .fx-splash-orbit, .fx-splash-pin, .fx-splash-word span,
  .fx-splash-bar i,
  .wp-route, .wp-mp, .wp-ripple { animation: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; }
  .fx-tilt { transform: none !important; }
  .page, .agenda-shell, .auth-split { animation: none !important; }
  #fx-splash { display: none !important; }
}