/* Ruta de Recuperación · capa visual «agua, vidrio y brillo» (la misma familia de Turnos, Te Arrimo y Proyectista AI).
   Quien sigue un plan largo y exigente necesita calma: agua clara y quieta, luz que entra desde arriba y se mueve muy despacio,
   tarjetas de vidrio esmerilado con un filo de luz y botones como gotas pulidas. Con «reducir movimiento» no se mueve nada. */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('plus-jakarta-sans.woff2') format('woff2');
}

:root {
  --marca: #0b2a4a; --marca-2: #0e6f8f; --marca-3: #22b8d6;
  --oro: #c9a24a; --oro-suave: #f4e3b5;
  --tinta: #0d2438; --tinta-2: #2c4a63; --tinta-3: #566f84;
  --acento: #0e7fa3; --acento-claro: #22d3ee; --acento-fondo: rgba(34, 184, 214, .12);
  --mal: #b4232f; --mal-fondo: rgba(220, 70, 80, .12);
  --adv: #8a5a06; --adv-fondo: rgba(232, 170, 60, .18);
  --bien: #17704a; --bien-fondo: rgba(40, 170, 110, .14);
  --radio: 22px;
  --tarjeta: rgba(255, 255, 255, .58);
  --tarjeta-fuerte: rgba(255, 255, 255, .82);
  --fondo: rgba(255, 255, 255, .40);
  --borde: rgba(11, 42, 74, .11);
  --filo: rgba(255, 255, 255, .9);
  --sombra: 0 1px 1px rgba(11, 42, 74, .04), 0 10px 26px -12px rgba(11, 42, 74, .26), 0 28px 64px -34px rgba(11, 42, 74, .32);
  --sombra-alta: 0 2px 4px rgba(11, 42, 74, .06), 0 22px 46px -16px rgba(11, 42, 74, .34), 0 46px 100px -44px rgba(7, 30, 56, .42);
  --desenfoque: blur(20px) saturate(160%);
  --agua-1: #eef8fb; --agua-2: #d6edf5; --agua-3: #b4dcea; --agua-4: #8cc3d8;
  --luz: rgba(255, 255, 255, .6);
  --gris-estado: #8aa0b0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #e6f4fa; --marca-2: #59c7e0; --marca-3: #36b4d4;
    --oro: #e4c06a; --oro-suave: #4a3a17;
    --tinta: #e3eef5; --tinta-2: #b6cad9; --tinta-3: #8fa9bc;
    --acento: #5fd3ec; --acento-claro: #5fd3ec; --acento-fondo: rgba(95, 211, 236, .12);
    --mal: #ff9c9c; --mal-fondo: rgba(255, 110, 110, .12);
    --adv: #f2c66d; --adv-fondo: rgba(242, 198, 109, .12);
    --bien: #7fe0ae; --bien-fondo: rgba(127, 224, 174, .12);
    --tarjeta: rgba(12, 34, 56, .55);
    --tarjeta-fuerte: rgba(12, 34, 56, .85);
    --fondo: rgba(255, 255, 255, .05);
    --borde: rgba(140, 210, 235, .14);
    --filo: rgba(170, 230, 250, .22);
    --sombra: 0 1px 1px rgba(0, 0, 0, .2), 0 12px 30px -12px rgba(0, 0, 0, .6), 0 32px 72px -36px rgba(0, 0, 0, .7);
    --sombra-alta: 0 2px 6px rgba(0, 0, 0, .3), 0 22px 48px -16px rgba(0, 0, 0, .7), 0 48px 104px -44px rgba(0, 0, 0, .8);
    --agua-1: #0b2a44; --agua-2: #082238; --agua-3: #05192b; --agua-4: #03101d;
    --luz: rgba(90, 200, 235, .16);
    --gris-estado: #5d7689;
    color-scheme: dark;
  }
}

html { background: var(--agua-3); }
body {
  font-family: 'Jakarta', system-ui, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -.005em;
  color: var(--tinta);
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--luz), transparent 60%),
    linear-gradient(180deg, var(--agua-1) 0%, var(--agua-2) 40%, var(--agua-3) 80%, var(--agua-4) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after { content: ''; position: fixed; inset: -25%; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(28% 18% at 22% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(22% 14% at 72% 22%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(30% 20% at 60% 68%, rgba(255, 255, 255, .28), transparent 70%),
    radial-gradient(18% 12% at 30% 78%, rgba(255, 255, 255, .26), transparent 70%);
  filter: blur(30px); opacity: .5;
  animation: causticas 40s ease-in-out infinite alternate;
}
body::after {
  inset: 0;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(255, 255, 255, .15) 22%, transparent 30% 46%, rgba(255, 255, 255, .09) 52%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 45%);
  mix-blend-mode: soft-light;
  animation: rayos 26s ease-in-out infinite alternate;
}
@keyframes causticas {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.06) rotate(2deg); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.02) rotate(-1.5deg); }
}
@keyframes rayos { from { opacity: .7; transform: translateX(-2%); } to { opacity: 1; transform: translateX(2%); } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { opacity: .2; }
  :root:not([data-theme="light"]) body::after { opacity: .45; mix-blend-mode: screen; }
}
::selection { background: rgba(34, 184, 214, .3); }
a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { letter-spacing: -.02em; color: var(--marca); }
h1 { font-weight: 800; }
:focus-visible { outline: 3px solid rgba(34, 184, 214, .6); outline-offset: 3px; border-radius: 8px; }

/* vidrio */
.tarjeta, .cabecera, .franja {
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
.tarjeta {
  position: relative; isolation: isolate;
  background: linear-gradient(160deg, var(--tarjeta-fuerte) -20%, var(--tarjeta) 55%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: inset 0 1px 0 var(--filo), var(--sombra);
}
.tarjeta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .06) 28%, transparent 46%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tarjeta::before { background: linear-gradient(115deg, rgba(150, 225, 250, .09) 0%, transparent 40%); }
}

/* botones: gotas pulidas con destello */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 11px 18px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, #13849f 0%, var(--marca-2) 40%, #0b2a4a 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 6px rgba(0, 20, 40, .25), 0 10px 22px -10px rgba(11, 42, 74, .6);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.btn::after {
  content: ''; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg) translateX(-120%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::after { transform: skewX(-18deg) translateX(420%); }
.btn.sec {
  background: color-mix(in srgb, var(--tarjeta-fuerte) 70%, transparent); color: var(--marca);
  border: 1px solid rgba(14, 111, 143, .3);
  box-shadow: inset 0 1px 0 var(--filo), 0 6px 16px -10px rgba(11, 42, 74, .35);
}

@keyframes emerger { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}