/* ═══════════════════════════════════════════════════════════════════════════
   Efectos de profundidad — lo que hace que la página deje de verse plana.
   Todos respetan "reducir movimiento" y ninguno agrega peso de red: son CSS y
   un canvas que ya existía en el proyecto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Luz que sigue al cursor dentro de cada tarjeta ──────────────────────
   Las coordenadas las escribe efectos.js en --mx/--my. Va en ::after porque el
   ::before de la tarjeta ya lo usa el barrido de luz de glass-plus.css. */
.card{--mx:50%;--my:50%}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx) var(--my),
             color-mix(in srgb,var(--lime) 15%,transparent), transparent 62%);
  opacity:0;transition:opacity .4s ease
}
.card:hover::after{opacity:1}
/* El rayo de luz que cruza la tarjeta (glass-plus.css, ::before) se dibuja
   ANTES que este halo, así que el halo lo tapaba y no se veía pasar. Subirlo
   de capa lo devuelve a la vista sin tocar su animación. */
.card::before,.auto::before,.plan::before{z-index:1}

/* ── 2 · Grano ───────────────────────────────────────────────────────────────
   Una capa de ruido casi invisible sobre todo. Es lo que separa un degradado
   "digital" de uno que parece impreso. El SVG va embebido: cero peticiones. */
html::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px 190px
}

/* ── 3 · Red de nodos: PROBADA Y DESCARTADA ──────────────────────────────────
   El canvas .net-bg (ya escrito en app.js y base.css, nunca enchufado) se probó
   y se quitó: al insertarlo, TODO el texto de la página pierde nitidez — se ve
   como desenfocado. Sólo el menú y el botón flotante, que el navegador compone
   en capas aparte, se mantienen limpios.
   Comprobado en los dos motores de render de Chrome, así que no es un problema
   de la captura. La causa probable es el degradado del fondo, que lleva un
   blur(80px): meter un canvas fijo encima obliga a componer toda la página
   junto con ese filtro.
   Si algún día se quiere el efecto, primero hay que sacarle el blur al fondo
   (bg-gradient.css) y volver a medir. No se activa hasta entonces. */

/* ── 4 · Profundidad en las secciones ────────────────────────────────────────
   Un halo suave detrás de los encabezados: rompe el fondo liso sin agregar
   ningún elemento nuevo al HTML. */
.sec-head{position:relative}
.sec-head::before{
  content:"";position:absolute;left:50%;top:-40%;width:520px;height:280px;
  transform:translateX(-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,
             color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);
  filter:blur(30px)
}

/* ── 5 · Entradas escalonadas ────────────────────────────────────────────────
   El escalonado lo calcula efectos.js por sección (antes se contaba sobre toda
   la página, así que a mitad de scroll el retraso ya no significaba nada).
   ─ */

@media (prefers-reduced-motion:reduce){
  .card::after{display:none}
  .sec-head::before{display:none}
}

/* ── Titulares equilibrados ──────────────────────────────────────────────────
   Evita la palabra suelta en la última línea. El navegador reparte el texto
   entre las líneas en vez de cortar donde llegue. */
h1,h2,.sec-head h2,.t360-hero h1{text-wrap:balance}
p.lead,.sec-head p{text-wrap:pretty}