/* ===================================================================
   LUDIKA · la piel
   -------------------------------------------------------------------
   Colores y efectos mágicos: una noche con aurora, luz que respira
   detrás de las tarjetas y botones que brillan al tocarlos.

   Dos reglas que no se rompen por bonito que se vea:
   1. El texto siempre contrasta: nada de gris sobre morado.
   2. Todo movimiento se apaga con prefers-reduced-motion.
   =================================================================== */

:root{
  /* la noche */
  --fondo:#0B0A1F; --fondo-2:#150F35; --fondo-3:#1E1247;
  /* la magia */
  --violeta:#8B5CF6; --fucsia:#EC4899; --cian:#22D3EE;
  --dorado:#FBBF24; --menta:#34D399; --coral:#FB7185;
  /* superficies */
  --vidrio:rgba(255,255,255,.07); --vidrio-2:rgba(255,255,255,.12);
  --borde:rgba(255,255,255,.16); --borde-vivo:rgba(139,92,246,.55);
  /* texto */
  --tinta:#F5F3FF; --suave:#C4B5FD; --gris:#A5A0C8; --apagado:#7E79A3;

  /* nombres de antes, para que lo ya escrito siga encajando */
  --azul:#8B5CF6; --azul-oscuro:#0B0A1F; --azul-medio:#A78BFA;
  --celeste:#22D3EE; --hielo:rgba(255,255,255,.18); --nieve:rgba(255,255,255,.12);
  --bruma:rgba(255,255,255,.06); --teal:#34D399; --calido:#FBBF24; --ambar:#FB7185;

  --fuente:'Figtree','Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  --curva:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--fuente);
  color:var(--tinta);
  background:var(--fondo);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  position:relative;
}

/* ---- la aurora: tres luces que respiran detrás de todo ---- */
body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 14%, rgba(139,92,246,.42), transparent 62%),
    radial-gradient(38% 34% at 84% 22%, rgba(236,72,153,.32), transparent 62%),
    radial-gradient(46% 42% at 54% 92%, rgba(34,211,238,.26), transparent 64%);
  filter:blur(18px);
  animation:respirar 22s ease-in-out infinite;
}
/* ---- polvo de estrellas ---- */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.4px 1.4px at 68% 12%, rgba(196,181,253,.8), transparent),
    radial-gradient(1.8px 1.8px at 32% 68%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.3px 1.3px at 88% 54%, rgba(34,211,238,.8), transparent),
    radial-gradient(1.5px 1.5px at 52% 38%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 8% 84%, rgba(251,191,36,.7), transparent),
    radial-gradient(1.6px 1.6px at 76% 86%, rgba(255,255,255,.8), transparent);
  animation:titilar 7s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-2.5%,0) scale(1.08)}
}
@keyframes titilar{0%,100%{opacity:.34}50%{opacity:.62}}

.envoltura{max-width:980px;margin:0 auto;padding:26px 18px 48px;position:relative;z-index:1}

/* ---- títulos con luz ---- */
h1{
  font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin:0 0 8px;
  letter-spacing:-.025em;font-weight:900;
  background:linear-gradient(104deg,#fff 0%,var(--suave) 38%,var(--cian) 72%,#fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:correr-luz 9s linear infinite;
}
@keyframes correr-luz{0%{background-position:0% 50%}100%{background-position:220% 50%}}
h2{line-height:1.25;color:var(--tinta);font-weight:900}
h3{color:var(--tinta)}
.bajada{color:var(--suave);font-size:18px;line-height:1.55;margin:0 0 26px}

.oculto{display:none !important}

/* ---- campos: vidrio sobre la noche ---- */
input,textarea,select{
  width:100%;border:2px solid var(--borde);border-radius:15px;padding:13px 15px;
  font-family:var(--fuente);font-size:17px;font-weight:700;color:var(--tinta);
  background:rgba(255,255,255,.06);min-height:50px;
  transition:border-color .2s var(--curva), box-shadow .2s var(--curva), background .2s;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--violeta);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(139,92,246,.25), 0 0 22px rgba(139,92,246,.35);
}
input::placeholder,textarea::placeholder{color:var(--apagado);font-weight:600}
select option{background:var(--fondo-2);color:var(--tinta)}

/* ---- botones que brillan ---- */
.boton{
  position:relative;overflow:hidden;border:none;border-radius:17px;padding:15px 26px;
  font-size:18px;font-weight:900;cursor:pointer;min-height:54px;font-family:inherit;
  color:#fff;background:linear-gradient(118deg,var(--violeta),var(--fucsia));
  box-shadow:0 8px 26px rgba(139,92,246,.42), inset 0 1px 0 rgba(255,255,255,.3);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
  transition:transform .18s var(--curva), box-shadow .25s var(--curva), filter .2s;
}
/* el destello que cruza al pasar el mouse */
.boton::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .65s var(--curva);
}
.boton:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(236,72,153,.5), inset 0 1px 0 rgba(255,255,255,.35)}
.boton:hover::after{left:135%}
.boton:active{transform:translateY(0) scale(.985)}
.boton[disabled]{
  background:rgba(255,255,255,.08);color:var(--apagado);cursor:not-allowed;
  box-shadow:none;filter:grayscale(.4)
}
.boton[disabled]::after{display:none}
.boton.fantasma{background:rgba(255,255,255,.06);color:var(--suave);
  border:2px solid var(--borde);box-shadow:none}
.boton.fantasma:hover{background:rgba(255,255,255,.12);border-color:var(--violeta);
  color:#fff;box-shadow:0 0 22px rgba(139,92,246,.3)}
.boton.calido{background:linear-gradient(118deg,var(--dorado),var(--coral));
  box-shadow:0 8px 26px rgba(251,191,36,.4), inset 0 1px 0 rgba(255,255,255,.35)}

.chico{
  border:2px solid transparent;border-radius:14px;padding:11px 18px;font-size:16px;font-weight:800;
  background:linear-gradient(118deg,var(--violeta),var(--fucsia));color:#fff;cursor:pointer;
  min-height:46px;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 5px 18px rgba(139,92,246,.35);
  transition:transform .18s var(--curva), box-shadow .22s var(--curva);
}
.chico:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(236,72,153,.45)}
.chico.claro{background:rgba(255,255,255,.07);color:var(--suave);border-color:var(--borde);box-shadow:none}
.chico.claro:hover{background:rgba(255,255,255,.13);color:#fff;border-color:var(--violeta)}
.chico.verde{background:linear-gradient(118deg,var(--menta),#10B981);box-shadow:0 5px 18px rgba(52,211,153,.35)}

.fila{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---- avisos ---- */
.aviso{margin-top:14px;font-size:17px;font-weight:800;color:var(--dorado);min-height:24px;line-height:1.45}

/* ---- tarjetas de vidrio ---- */
.tarjeta{
  position:relative;background:var(--vidrio);border-radius:24px;padding:24px;
  border:1px solid var(--borde);
  box-shadow:0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
/* el filo luminoso de arriba */
.tarjeta::before{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:linear-gradient(135deg,rgba(139,92,246,.4),transparent 42%,rgba(34,211,238,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}

/* ---- cosas que flotan ---- */
.flota{animation:flotar 6s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- un resplandor para lo que importa ---- */
.brilla{animation:latido-luz 2.6s ease-in-out infinite}
@keyframes latido-luz{
  0%,100%{box-shadow:0 8px 26px rgba(139,92,246,.42), inset 0 1px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 10px 40px rgba(236,72,153,.6), 0 0 60px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.4)}
}

/* La magia no puede marear a nadie. */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  h1{background:none;-webkit-text-fill-color:var(--tinta);color:var(--tinta)}
}