/* ============================================================================
   Relojes André · velo de seda · componente CSS
   ----------------------------------------------------------------------------
   INTEGRADO en web/ el 22 sep 2026 (copia de _fuente/velo/velo.css sin el
   bloque :root de la paleta, que está en estilo.css). La guía de abajo queda
   como referencia.

   Fondo de seda para la portada y el pie, en el tono estrella del iPhone 18
   Pro: «Dark Cherry» (Pantone 6076), un cruce de vino tinto y morado que en
   la luz vira de cereza profunda a berenjena. El oro sigue siendo el único
   acento metálico: el brillo de la seda es cereza, nunca dorado.

   Capas, de abajo arriba:
     .velo              fotograma estático del propio shader (hero/velo-*.webp).
                        Es lo que ve quien no tiene JS o WebGL, y lo que se
                        pinta antes de que arranque la seda viva.
     .velo-lienzo       la seda viva (la crea velo.js). Entra con fundido
                        exactamente encima del fotograma, que es idéntico.
     .velo::after       grano finísimo (sin modos de fusión) + la sombra que
                        protege el texto (--velo-sombra).

   ── CÓMO INTEGRARLO EN web/index.html ─────────────────────────────────────
   Archivos: velo.css y velo.js a web/; hero/velo-h.webp y hero/velo-v.webp a
   web/hero/ (.htaccess ya los cachea un año). En <head>, después de estilo.css:
       <link rel="stylesheet" href="velo.css?v=00000000">
   y al final del <body>, antes de sitio.js:
       <script src="velo.js?v=00000000" defer></script>
   Añadir 'velo.css' y 'velo.js' a RECURSOS en _fuente/sellar.py y correrlo.

   PORTADA — en <section class="hero" id="inicio"> cambiar
       <div class="hero-img">…<picture>…</picture></div>
       <div class="hero-velo"></div>
   por
       <div class="velo velo--portada" aria-hidden="true"></div>
   (el resto de la portada —textos, botones, .hero-baja— se queda igual).

   PIE — conservar TODO el marcado actual (botón «Soy mayorista», «Todos los
   derechos reservados») y añadir el velo como primer hijo:
       <footer class="pie">
         <div class="velo velo--pie" aria-hidden="true"></div>
         <div class="wrap pie-in"> … lo de hoy … </div>
       </footer>
   y dentro de .pie-legal, al final, la firma:
       <span class="firma-gp">Hecho con ❤️ por <a href="https://goplentyglobal.com" rel="noopener">Goplenty</a></span>

   En estilo.css (ver velo-final.html, donde van aplicados y marcados CAMBIO):
     - html: background:var(--vino-abismo) (el rebote del scroll en iOS)
     - .hero: background:var(--vino-abismo); isolation:isolate
     - .pie: position:relative; overflow:hidden; isolation:isolate;
             background:var(--vino-abismo); padding-block:clamp(4rem,8vw,6rem)
       .pie-in: position:relative; z-index:1
       .pie-legal: color rgba(251,249,245,.66) (era .58: sobre la seda no da AA)
       .firma-gp{display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.08em;
                 color:rgba(251,249,245,.66)}
       .firma-gp a{text-decoration:none;border-bottom:1px solid rgba(227,200,143,.4)}
     - borrar .hero-img, .hero-velo y el bloque móvil que encuadra
       hero-movil.webp (@media max-width:760px, .hero-img img … .hero-velo)
     - .tira y .cred: var(--tinta) → var(--vino-abismo) (si no, se ve gris
       justo debajo de la seda)
     - .hero h1: max-width 13ch → 17ch y font-size clamp(2.9rem,7.4vw,6rem);
       opcional: la 2.ª frase en <em> con .hero h1 em{display:block;font-style:italic}
     - menú móvil: hoy asoma 10 px por arriba cerrado y sus enlaces reciben
       foco. Sobre la seda se vería como una línea de horizonte. Arreglo:
         .menu{transform:translateY(calc(-100% - var(--nav-h)));visibility:hidden;
               transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s .32s}
         .menu.abierto{visibility:visible;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
       y su fondo abierto sobre la portada: var(--vino-abismo) en vez de --tinta
     - reducir movimiento: @media (prefers-reduced-motion:reduce){.hero-baja
       span{animation:none;opacity:.6}} DESPUÉS de la regla de .hero-baja span
       (con la regla global de .01ms la flecha seguía corriendo: es infinite)
     - aparte del velo: .hamb{margin-left:auto}. Hoy, en móvil, la hamburguesa
       queda pegada al logotipo (el menú fijo sale del flujo y ya no la empuja)
   ========================================================================== */

/* ── paleta ─────────────────────────────────────────────────────────────
   EN web/ LA PALETA --vino-* VIVE EN estilo.css (:root), no aquí: así, si
   este archivo faltara, portada, tira y pie siguen en vino y legibles. El
   shader la lee de allí igual (getComputedStyle). La copia de referencia,
   con los mismos valores, está en _fuente/velo/velo.css. */

/* ── el velo ─────────────────────────────────────────────────────────── */
/* Dos fotogramas del shader en T=0: horizontal 1536x640 (se escala por el
   alto) y vertical 720x1800 (por el ancho, como la tela viva cuando la
   portada es más estrecha que 4:5). */
.velo{position:absolute;inset:0;z-index:0;overflow:hidden;contain:strict;pointer-events:none;
  background:var(--vino-abismo) url(hero/velo-h.webp) center/cover no-repeat}
@media (max-aspect-ratio:4/5){.velo{background-image:url(hero/velo-v.webp)}}

.velo-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.4s ease}
.velo-vivo .velo-lienzo{opacity:1}

/* grano: dos capas de motas, claras y oscuras, con transparencia. Sin modo
   de fusión: ahorra una pasada de composición a pantalla completa en cada
   fotograma. Es fijo y va a la resolución de la pantalla. */
.velo::after{content:'';position:absolute;inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95 .75' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .95 2.6 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95 .75' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 0 0 0 0 0 .04 -2.6 0 0 0 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.15'/%3E%3C/svg%3E"),
    var(--velo-sombra,none)}

/* ── portada ─────────────────────────────────────────────────────────────
   La luz entra por arriba a la derecha; el texto vive abajo a la izquierda,
   en la parte de la tela que ya está en sombra. La sombra sólo asegura el
   contraste AA del logotipo (arriba) y del bloque de texto. Es del mismo
   abismo berenjena que la tela, nunca negro: el negro agrisa. */
.velo--portada{--velo-sombra:
  linear-gradient(to bottom,rgba(var(--vino-sombra),.6) 0,rgba(var(--vino-sombra),0) 20%),
  linear-gradient(to right,rgba(var(--vino-sombra),.68) 0,rgba(var(--vino-sombra),.52) 30%,rgba(var(--vino-sombra),.16) 55%,rgba(var(--vino-sombra),0) 70%),
  linear-gradient(to top,rgba(var(--vino-sombra),.5) 0,rgba(var(--vino-sombra),0) 42%)}
@media (max-width:760px){
  /* en vertical el texto ocupa la mitad baja: la sombra sube con él */
  .velo--portada{--velo-sombra:
    linear-gradient(to bottom,rgba(var(--vino-sombra),.6) 0,rgba(var(--vino-sombra),0) 16%),
    linear-gradient(to top,rgba(var(--vino-sombra),.86) 0,rgba(var(--vino-sombra),.68) 40%,rgba(var(--vino-sombra),.42) 58%,rgba(var(--vino-sombra),.1) 72%,rgba(var(--vino-sombra),0) 82%)}
}

/* ── pie ─────────────────────────────────────────────────────────────────
   Más hondo y más quieto: menos luz, otro momento del ciclo y una sola
   veladura pareja. Muestra la tela a la misma escala que la portada. */
.velo--pie{--velo-luz:.82;--velo-desfase:97;
  --velo-sombra:linear-gradient(to bottom,rgba(var(--vino-sombra),.5),rgba(var(--vino-sombra),.62));
  background-size:auto 100vh;background-size:auto 100svh}
@media (max-aspect-ratio:4/5){.velo--pie{background-size:100% auto}}

@media (prefers-reduced-motion:reduce){.velo-lienzo{transition:none}}

/* Deriva suave también cuando WebGL baja a un fotograma estático. */
.velo--pie{inset:-3%;transform:scale(1.025);animation:seda-pie-respira 24s ease-in-out infinite alternate;animation-play-state:paused}
.pie.fondo-visible:not(.fondo-pausado) .velo--pie{animation-play-state:running}
@keyframes seda-pie-respira{from{transform:translate3d(-.8%,.35%,0) scale(1.025)}to{transform:translate3d(.8%,-.35%,0) scale(1.055)}}
@media(prefers-reduced-motion:reduce){.velo--pie{animation:none;transform:none}}