/* glass.css — capa visual «luminoso con cristal» de PresupuestoYa.
   Se carga DESPUÉS de tokens.css y fonts.css. Diseño: docs/superpowers/specs/2026-10-02-landing-cristal-design.md
   Reglas: solo se animan transform/translate/scale/opacity; los orbes son degradados radiales (no filter:blur);
   backdrop-filter solo en pocos elementos (.cr-cristal); las rejillas usan .cr-cristal-lite. */

:root{
  --cr-fondo:#f4f7ff;
  --cr-banda:rgba(255,255,255,.55);
  --cr-texto:#0f172a;
  --cr-texto-suave:#475569;
  --cr-enlace:#1a56db;
  --cr-cristal:rgba(255,255,255,.62);
  --cr-cristal-fuerte:rgba(255,255,255,.82);
  --cr-opaco:#ffffff;
  --cr-borde:rgba(255,255,255,.95);
  --cr-linea:rgba(26,86,219,.25);
  --cr-sombra:0 10px 30px rgba(59,91,219,.14),inset 0 1px 0 #fff;
  --cr-sombra-alta:0 22px 50px rgba(59,91,219,.22),inset 0 1px 0 #fff;
  --cr-orbe-1:rgba(59,130,246,.55);
  --cr-orbe-2:rgba(167,139,250,.55);
  --cr-orbe-3:rgba(34,211,238,.45);
  --cr-grad-a:#2563eb;
  --cr-grad-b:#7c3aed;
  --cr-btn-sombra:rgba(26,86,219,.38);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --cr-fondo:#0b1020;
    --cr-banda:rgba(255,255,255,.03);
    --cr-texto:#f1f5f9;
    --cr-texto-suave:#cbd5e1;
    --cr-enlace:#bfdbfe;
    --cr-cristal:rgba(255,255,255,.06);
    --cr-cristal-fuerte:rgba(255,255,255,.10);
    --cr-opaco:#151b2e;
    --cr-borde:rgba(255,255,255,.13);
    --cr-linea:rgba(255,255,255,.24);
    --cr-sombra:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
    --cr-sombra-alta:0 22px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
    --cr-orbe-1:rgba(37,99,235,.60);
    --cr-orbe-2:rgba(139,92,246,.50);
    --cr-orbe-3:rgba(6,182,212,.35);
    --cr-grad-a:#60a5fa;
    --cr-grad-b:#c4b5fd;
    --cr-btn-sombra:rgba(37,99,235,.5);
  }
}
/* Elección manual (botón sol/luna → assets/tema.js): fuerza el tema aunque el sistema diga otra cosa.
   Las dos listas de variables deben ser IDÉNTICAS (lo comprueba tools/tests-tema). */
:root[data-theme="dark"]{
  color-scheme: dark;
    --cr-fondo:#0b1020;
    --cr-banda:rgba(255,255,255,.03);
    --cr-texto:#f1f5f9;
    --cr-texto-suave:#cbd5e1;
    --cr-enlace:#bfdbfe;
    --cr-cristal:rgba(255,255,255,.06);
    --cr-cristal-fuerte:rgba(255,255,255,.10);
    --cr-opaco:#151b2e;
    --cr-borde:rgba(255,255,255,.13);
    --cr-linea:rgba(255,255,255,.24);
    --cr-sombra:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
    --cr-sombra-alta:0 22px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
    --cr-orbe-1:rgba(37,99,235,.60);
    --cr-orbe-2:rgba(139,92,246,.50);
    --cr-orbe-3:rgba(6,182,212,.35);
    --cr-grad-a:#60a5fa;
    --cr-grad-b:#c4b5fd;
    --cr-btn-sombra:rgba(37,99,235,.5);
}
:root[data-theme="light"]{color-scheme: light}

/* ── Lienzo con orbes ── */
.cr-ambiente{background:var(--cr-fondo);color:var(--cr-texto)}
.cr-ambiente::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 50% at 8% 0%,var(--cr-orbe-1),transparent 70%),
             radial-gradient(50% 45% at 100% 30%,var(--cr-orbe-2),transparent 70%),
             radial-gradient(55% 45% at 30% 100%,var(--cr-orbe-3),transparent 70%)}
.cr-fondo{position:relative;isolation:isolate;overflow:hidden;background:var(--cr-fondo);color:var(--cr-texto)}
.cr-lienzo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cr-orbe{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform;
  transform:translate3d(0,var(--py,0px),0);animation:cr-flota 18s ease-in-out infinite alternate}
.cr-o1{width:min(560px,90vw);aspect-ratio:1;left:-12%;top:-26%;background:radial-gradient(circle,var(--cr-orbe-1),transparent 68%)}
.cr-o2{width:min(500px,80vw);aspect-ratio:1;right:-10%;top:6%;background:radial-gradient(circle,var(--cr-orbe-2),transparent 68%);animation-duration:22s;animation-delay:-6s}
.cr-o3{width:min(460px,80vw);aspect-ratio:1;left:30%;bottom:-30%;background:radial-gradient(circle,var(--cr-orbe-3),transparent 68%);animation-duration:26s;animation-delay:-11s}
.cr-intenso .cr-orbe{scale:1.25}
.cr-orbe.cr-pausa,.cr-borde-luz.cr-pausa::before{animation-play-state:paused}
@keyframes cr-flota{from{translate:0 0}to{translate:28px -22px}}
.cr-banda{background:var(--cr-banda)}

/* ── Cristal ── */
.cr-cristal,.cr-cristal-lite{background:var(--cr-cristal);border:1px solid var(--cr-borde);box-shadow:var(--cr-sombra);border-radius:var(--radio-lg,18px)}
.cr-cristal{-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.cr-cristal-lite{background:var(--cr-cristal-fuerte)}
/* Barra fija: casi opaca y SIN desenfoque; un backdrop-filter en un elemento fijo se recalcula en cada fotograma del scroll. */
.cr-nav{background:color-mix(in srgb,var(--cr-opaco) 88%,transparent);border-bottom:1px solid var(--cr-borde);transition:background .25s,box-shadow .25s}
.cr-nav.cr-scrolled{background:var(--cr-opaco);box-shadow:0 6px 24px rgba(15,23,42,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cr-cristal,.cr-nav,.cr-btn-sec{background:var(--cr-opaco)}
}
@media (prefers-reduced-transparency:reduce){
  .cr-cristal,.cr-cristal-lite,.cr-nav,.cr-btn-sec,.cr-pill{background:var(--cr-opaco);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── Botones, píldora y texto con degradado ── */
.cr-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:'Space Grotesk',sans-serif;font-weight:700;color:#fff;background:linear-gradient(180deg,#2563eb,#1a56db);
  padding:14px 26px;border-radius:var(--radio-pill,999px);box-shadow:0 8px 22px var(--cr-btn-sombra),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .2s var(--easing,ease),box-shadow .2s}
.cr-btn::after{content:'';position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);transition:transform .7s var(--easing,ease);
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%)}
.cr-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--cr-btn-sombra),inset 0 1px 0 rgba(255,255,255,.3)}
.cr-btn:hover::after{transform:translateX(120%)}
.cr-btn:active{transform:translateY(0) scale(.97)}
.cr-btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;color:var(--cr-texto);cursor:pointer;
  background:var(--cr-cristal);border:1px solid var(--cr-linea);padding:13px 22px;border-radius:var(--radio-pill,999px);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s var(--easing,ease),background .2s}
.cr-btn-sec:hover{background:var(--cr-cristal-fuerte);transform:translateY(-2px)}
.cr-btn:focus-visible,.cr-btn-sec:focus-visible{outline:3px solid var(--cr-enlace);outline-offset:3px}
.cr-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--cr-texto-suave);
  background:var(--cr-cristal);border:1px solid var(--cr-borde);padding:7px 16px 7px 8px;border-radius:var(--radio-pill,999px)}
.cr-texto-grad{background:linear-gradient(90deg,var(--cr-grad-a),var(--cr-grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-texto-grad .cr-pal{background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Entrada (solo con JS y movimiento permitido: html.js-efectos) ── */
.js-efectos [data-reveal]{opacity:0;translate:0 12px;transition:opacity .4s var(--easing,ease),translate .4s var(--easing,ease)}
.js-efectos [data-reveal].cr-visible{opacity:1;translate:0 0}
.js-efectos [data-palabras] .cr-pal{display:inline-block;opacity:0;translate:0 .5em;
  transition:opacity .7s var(--easing,ease),translate .7s var(--easing,ease);transition-delay:calc(var(--i,0)*70ms + 120ms)}
.js-efectos [data-palabras].cr-visible .cr-pal{opacity:1;translate:0 0}
.js-efectos [data-dibuja]{transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--easing,ease)}
.js-efectos [data-dibuja].cr-visible{transform:scaleX(1)}
.js-efectos [data-reveal] .cr-rebote{scale:.6;opacity:0}
.js-efectos [data-reveal].cr-visible .cr-rebote{animation:cr-rebote .6s var(--easing,ease) .15s both}
@keyframes cr-rebote{0%{scale:.6;opacity:0}60%{scale:1.12;opacity:1}100%{scale:1;opacity:1}}

/* ── Inclinación 3D y brillo que sigue al puntero ── */
[data-tilt]{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--easing,ease),box-shadow .3s}
[data-tilt].cr-activo{transition:transform .08s linear,box-shadow .3s;box-shadow:var(--cr-sombra-alta);will-change:transform}
.js-efectos [data-reveal][data-tilt]{transition:opacity .4s var(--easing,ease),translate .4s var(--easing,ease),transform .45s var(--easing,ease),box-shadow .3s}
.js-efectos [data-reveal][data-tilt].cr-activo{transition:opacity .4s var(--easing,ease),translate .4s var(--easing,ease),transform .08s linear,box-shadow .3s}
[data-spot]{position:relative}
[data-spot]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 65%)}
[data-spot].cr-activo::after{opacity:1}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [data-spot]::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 65%)}
}
:root[data-theme="dark"] [data-spot]::after{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 65%)}

/* ── Borde de luz giratorio (plan destacado) ── */
@property --cr-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.cr-borde-luz{position:relative}
.cr-borde-luz::before{content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--cr-ang),transparent 0 62%,var(--cr-grad-a),var(--cr-grad-b),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:cr-gira 6s linear infinite}
@keyframes cr-gira{to{--cr-ang:360deg}}

/* ── Barra de progreso de lectura (artículos del blog) ── */
.cr-progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none;transform-origin:left center;
  transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--cr-grad-a),var(--cr-grad-b))}

/* ── Pequeños movimientos ── */
.cr-pulso{animation:cr-pulso .45s var(--easing,ease)}
@keyframes cr-pulso{from{opacity:.35;translate:0 6px}to{opacity:1;translate:0 0}}
.cr-flota-suave{animation:cr-flota-suave 7s ease-in-out infinite alternate}
@keyframes cr-flota-suave{from{translate:0 0}to{translate:0 -8px}}

/* ── Móvil: menos orbes y más lentos; desenfoque más barato ── */
@media (max-width:640px){
  .cr-o3{display:none}
  .cr-orbe{animation-duration:30s}
  .cr-cristal,.cr-nav{-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
}

/* ── Movimiento reducido: todo quieto ── */
@media (prefers-reduced-motion:reduce){
  .cr-orbe,.cr-borde-luz::before,.cr-flota-suave,.cr-pulso,.cr-rebote{animation:none!important}
  [data-tilt]{transform:none!important;transition:none!important}
  .cr-btn::after{display:none}
  .cr-btn,.cr-btn-sec{transition:none}
}