/* ══════════════════════════════════════════════════════════════════
   FONDO DE MARCA · pedido de Sebas del 18/10/2026 ("el fondo es muy básico")

   La idea: la luz de la consulta respondida. El celeste es el doble tilde
   de "leído"; aparece como luz sobre el azul y casi nada sobre el papel.
   Tres niveles, en <html data-fondo>:
     a · grano     el papel deja de ser un color plano (img/marca/grano.webp, 6 KB)
     b · luz       a + tres halos que se mueven lento detrás del papel
     c · flujo     b + el azul se mueve como en Stripe (js/fondo.js, WebGL)
   Recetas sacadas con REA: el grano y la caída de los halos de Linear
   (.SPbJba_grain, .Fzcv4W_edgeGlow); el flujo del shader de Stripe
   (módulo 65193 de pages/index-*.js). Detalle en 2-OFERTA-3S/web-preview/
   pedido-2026-10-18/07-FONDO.md.
   Pedido 08 (08-FONDOS-Y-DATOS.md): acá van los anillos de la O y las columnas;
   las líneas con punta, el plano y la grilla de logos están en css/trazos.css.
══════════════════════════════════════════════════════════════════ */

:root{--fondo-grano:url(/img/marca/grano.webp);--grano-tam:128px}
/* En pantallas de 2x o más, el punto de grano a 1 px de CSS se ve grueso: se achica a la mitad. */
@media (min-resolution:2dppx){:root{--grano-tam:64px}}

/* Las capas de papel dejan ver lo que hay detrás. fondo.js les pone
   .fondo-sin-capa solo si su color es el mismo papel del body, así que
   las tarjetas con superficie propia (tema deep) no se tocan. */
html[data-fondo] body{background-image:var(--fondo-grano);background-size:var(--grano-tam)}
html[data-fondo] .fondo-sin-capa{background-color:transparent!important}
/* En las páginas internas el tema de la página manda: el body queda en papel
   aunque el menú pase a oscuro sobre el cierre. */
html[data-fondo] body:has(.subpage.active:not([data-theme=dark])){background-color:var(--ot-papel)}

/* Las secciones azules llevan su grano propio (el del body queda tapado). */
html[data-fondo] .hc,
html[data-fondo] .sc,
html[data-fondo] .il-hero,
html[data-fondo] .ins-banda,
html[data-fondo] section[data-theme=dark],
html[data-fondo] .ins-panel-video,
html[data-fondo] .ins-cierre,
html[data-fondo] .ins-plano,
html[data-fondo] footer[data-footer],
html[data-fondo] [data-fondo-oscuro]{background-image:var(--fondo-grano);background-size:var(--grano-tam)}

/* ── b · luz: tres halos fijos detrás de todo ── */
.fondo-luz{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fondo-luz i{position:absolute;display:block;border-radius:50%;will-change:transform;
  /* caída de Linear (.Fzcv4W_edgeGlow): 100 94 78 58 35 16 3 0 */
  background:radial-gradient(closest-side,
    var(--tinte) 0%,
    color-mix(in srgb,var(--tinte) 94%,transparent) 15%,
    color-mix(in srgb,var(--tinte) 78%,transparent) 30%,
    color-mix(in srgb,var(--tinte) 58%,transparent) 45%,
    color-mix(in srgb,var(--tinte) 35%,transparent) 60%,
    color-mix(in srgb,var(--tinte) 16%,transparent) 75%,
    color-mix(in srgb,var(--tinte) 3%,transparent) 90%,
    transparent 100%)}
/* Celeste solo como luz, nunca como texto sobre papel (la regla del manual sigue en pie). */
.fondo-luz i:nth-child(1){--tinte:rgb(83 189 235 / .20);width:78vmax;height:62vmax;left:-22vmax;top:-26vmax;animation:fondo-deriva-1 31s ease-in-out infinite alternate}
.fondo-luz i:nth-child(2){--tinte:rgb(83 189 235 / .09);width:90vmax;height:70vmax;right:-34vmax;top:18vh;animation:fondo-deriva-2 37s ease-in-out infinite alternate}
.fondo-luz i:nth-child(3){--tinte:rgb(83 189 235 / .13);width:64vmax;height:52vmax;left:22vw;bottom:-34vmax;animation:fondo-deriva-3 27s ease-in-out infinite alternate}
@keyframes fondo-deriva-1{to{transform:translate3d(16vw,10vh,0) scale(1.12)}}
@keyframes fondo-deriva-2{to{transform:translate3d(-14vw,-12vh,0) scale(.9)}}
@keyframes fondo-deriva-3{to{transform:translate3d(-12vw,-16vh,0) scale(1.15)}}
/* Sobre una sección azul el halo de papel no suma: se apaga con el tema. */
body[data-theme=dark] .fondo-luz{opacity:.55}
.fondo-luz{transition:opacity .8s ease}

/* ── c · flujo: el lienzo va detrás del contenido de cada sección azul ── */
.fondo-flujo-host{isolation:isolate}
.fondo-flujo-host--rel{position:relative}
.fondo-flujo{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* En una grilla, el absoluto con ubicación auto toma la caja entera; .content-grid > * le ponía la columna del contenido. */
.fondo-flujo-host>.fondo-flujo{grid-area:auto}
.fondo-flujo canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.fondo-flujo--listo canvas{opacity:1}
.fondo-flujo::after{content:"";position:absolute;inset:0;background:var(--fondo-grano);background-size:var(--grano-tam)}

/* ── Home · la O del camión se enciende cuando las cajas la arman ── */
/* .hc ya tiene isolation; ::after con z-index -1 queda arriba del lienzo y abajo de la escena. */
html[data-fondo] .hc{--hc-p:0;--hc-ox:73.5%;--hc-oy:52%}
@media (max-width:767px){html[data-fondo] .hc{--hc-ox:50%;--hc-oy:38%}}
html[data-fondo] .hc::after{content:"";position:absolute;left:var(--hc-ox);top:var(--hc-oy);width:min(62vw,860px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgb(83 189 235 / .34),rgb(83 189 235 / .2) 35%,rgb(83 189 235 / .07) 65%,transparent);
  opacity:clamp(0,calc((var(--hc-p) - .66) * 3.2),1);scale:calc(.75 + var(--hc-p) * .25)}

/* ── Home · anillos de Orizon alrededor de la O (pedido 08, receta .sing-rings) ──
   Un anillo cada 48 px, del radio 64 al 784, con el alfa bajando ×0,86 por anillo.
   Van achatados al 57,7 % (la proporción isométrica del monograma, 39/67,55): quedan
   apoyados en el piso, como una consulta que se expande desde la O. Una sola capa que
   se pinta una vez; el avance mueve opacidad y escala, nada más. Va en .hc-escena y no
   en .hc porque el lienzo del flujo (z-index -1) tapaba un ::before de la sección. */
html[data-fondo] .hc--vivo .hc-escena::before{content:"";position:absolute;left:var(--hc-ox);top:var(--hc-oy);width:1600px;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background-image:
    radial-gradient(circle,#0000 62.5px,rgb(83 189 235 / .300) 64px,#0000 65.5px),
    radial-gradient(circle,#0000 110.5px,rgb(83 189 235 / .258) 112px,#0000 113.5px),
    radial-gradient(circle,#0000 158.5px,rgb(83 189 235 / .222) 160px,#0000 161.5px),
    radial-gradient(circle,#0000 206.5px,rgb(83 189 235 / .191) 208px,#0000 209.5px),
    radial-gradient(circle,#0000 254.5px,rgb(83 189 235 / .164) 256px,#0000 257.5px),
    radial-gradient(circle,#0000 302.5px,rgb(83 189 235 / .141) 304px,#0000 305.5px),
    radial-gradient(circle,#0000 350.5px,rgb(83 189 235 / .121) 352px,#0000 353.5px),
    radial-gradient(circle,#0000 398.5px,rgb(83 189 235 / .104) 400px,#0000 401.5px),
    radial-gradient(circle,#0000 446.5px,rgb(83 189 235 / .090) 448px,#0000 449.5px),
    radial-gradient(circle,#0000 494.5px,rgb(83 189 235 / .077) 496px,#0000 497.5px),
    radial-gradient(circle,#0000 542.5px,rgb(83 189 235 / .066) 544px,#0000 545.5px),
    radial-gradient(circle,#0000 590.5px,rgb(83 189 235 / .057) 592px,#0000 593.5px),
    radial-gradient(circle,#0000 638.5px,rgb(83 189 235 / .049) 640px,#0000 641.5px),
    radial-gradient(circle,#0000 686.5px,rgb(83 189 235 / .042) 688px,#0000 689.5px),
    radial-gradient(circle,#0000 734.5px,rgb(83 189 235 / .036) 736px,#0000 737.5px),
    radial-gradient(circle,#0000 782.5px,rgb(83 189 235 / .031) 784px,#0000 785.5px);
  /* la máscara los apaga hacia afuera, sin borde */
  -webkit-mask:radial-gradient(closest-side,#000 45%,#0000 100%);mask:radial-gradient(closest-side,#000 45%,#0000 100%);
  /* aparecen cuando las cajas arman la O (--hc-p lo pone fondo.js) y se abren con el avance */
  opacity:clamp(0,calc((var(--hc-p) - .55) * 2.6),1);
  scale:calc(.86 + var(--hc-p) * .18) calc((.86 + var(--hc-p) * .18) * .577)}
@media (max-width:767px){html[data-fondo] .hc--vivo .hc-escena::before{width:1100px}}

/* ── Columnas de Crosswalk: 13 líneas de 1 px detrás de todo el papel (pedido 08) ──
   Una capa fija con trece <i> (fondo.js): las secciones de papel son transparentes,
   así que las líneas se ven en todas sin tocar ninguna; las azules y las tarjetas las tapan. */
.fondo-columnas{position:fixed;top:0;bottom:0;left:50%;width:min(94vw,1440px);translate:-50% 0;z-index:-1;pointer-events:none;contain:strict;
  display:flex;justify-content:space-between;transition:opacity .8s ease}
.fondo-columnas i{display:block;width:1px;background:rgb(14 42 92 / .06)}
/* Sobre el azul del body (cuando el tema pasa a oscuro) van en celeste: es luz, no texto. */
body[data-theme=dark] .fondo-columnas i{background:rgb(83 189 235 / .07)}
/* En el celular, trece líneas quedan a 30 px: se deja una de cada dos (siete). */
@media (max-width:767px){.fondo-columnas i:nth-child(even){display:none}}

/* Quieto en el celular y con movimiento reducido: la luz queda, el movimiento no. */
@media (hover:none),(max-width:767px),(prefers-reduced-motion:reduce){
  .fondo-luz i{animation:none}
}

/* ── Selector de la prueba (solo con ?fondo= en la dirección) ── */
.fondo-prueba{position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgb(8 25 54 / .88);backdrop-filter:blur(8px);box-shadow:0 10px 30px -10px rgb(0 0 0 / .5);font:600 12px/1 system-ui,sans-serif}
.fondo-prueba button{all:unset;cursor:pointer;color:#F7F5F0;padding:8px 11px;border-radius:999px}
.fondo-prueba button[aria-pressed=true]{background:#F7F5F0;color:#0E2A5C}
.fondo-prueba button:focus-visible{outline:2px solid #53BDEB;outline-offset:1px}