/* ═══════════════════════════════════════════════════════════════
   Velaccio — ritmo de secciones
   Provenance ref: VEL-PROV-9K4XQ7M2

   Se carga la última, después de responsive.css, para no editar
   main-style.css (511 KB minificados, exportados del tema).

   DOS COSAS

   1. Los círculos. Azul y rosa, entrando desde fuera de la pantalla.
      NO viven en las secciones: viven en el contenedor de la página
      (.reel-sheet, y #legal en las páginas legales). Sus posiciones
      son porcentajes del alto total de la página y no tienen ninguna
      relación con dónde empieza o acaba cada sección — uno cae en
      mitad de una sección, el siguiente a caballo entre dos, otro
      justo en la junta. Esa es la idea: las dos capas van por libre.

      Las secciones no llevan fondo propio, así que los círculos se
      ven enteros a través de ellas.

   2. Entre secciones, un filete de 1 px que pasa de azul a rosa.
      Mismo recurso que ya usa .reel-sheet::before (línea blanca a
      .16), solo que teñido. Esto sí va atado a los límites de
      sección — es lo único que lo está.

   La entrada de las secciones al hacer scroll no está aquí: la lleva
   js/scroll-motion.js con GSAP.

   LOS COLORES NO SON NUEVOS

   #67e8f9 y #f472b6 ya son de la casa: son dos de las cinco paradas
   del degradado de .cta-bg y .section-refunds (#5eead4, #a78bfa,
   #f472b6, #67e8f9, #818cf8) y los mismos que firma el correo de
   confirmación.

   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Marca, en componentes RGB para poder darles alfa. */
  --vel-blue: 103, 232, 249;   /* #67e8f9 */
  --vel-pink: 244, 114, 182;   /* #f472b6 */

  /* Radio del círculo. min() para que no se desmadre en monitores
     anchos: a 2560 px, 52vw serían 1331 px. */
  --vel-blob: min(52vw, 720px);
}


/* ── Capa de círculos ─────────────────────────────────────────
   Van en el contenedor de toda la página, no en las secciones.

   El centro de cada uno cae fuera del viewport (-9vw a la izquierda,
   100%+9vw a la derecha), así que solo entra la caída suave del
   círculo. Sin filter:blur a propósito: forzaría una capa de
   composición sobre un elemento de varios miles de píxeles de alto,
   y la caída del radial-gradient da el mismo desenfoque gratis.

   Las alturas son porcentajes del contenedor, no de las secciones,
   que es lo que hace que caigan donde caigan. .reel-sheet llega del
   tema con background:#000 en el <style id="vel-reel"> de cada
   página; esto lo sustituye por el mismo negro más los círculos. */
.reel-sheet {
  background-color: #000;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 5%,
      rgba(var(--vel-blue), .15), rgba(var(--vel-blue), .05) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at calc(100% + 9vw) 15%,
      rgba(var(--vel-pink), .14), rgba(var(--vel-pink), .045) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at calc(100% + 9vw) 28%,
      rgba(var(--vel-blue), .13), rgba(var(--vel-blue), .04) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 39%,
      rgba(var(--vel-pink), .14), rgba(var(--vel-pink), .045) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 53%,
      rgba(var(--vel-blue), .14), rgba(var(--vel-blue), .045) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at calc(100% + 9vw) 64%,
      rgba(var(--vel-pink), .13), rgba(var(--vel-pink), .04) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at calc(100% + 9vw) 79%,
      rgba(var(--vel-blue), .13), rgba(var(--vel-blue), .04) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 91%,
      rgba(var(--vel-pink), .14), rgba(var(--vel-pink), .045) 45%, transparent 72%);
}


/* ── Caja común de las secciones ──────────────────────────────
   position:relative para el filete.

   .section-hero se queda fuera de todo el archivo: está por encima
   de .reel-sheet, lo pinta el reel (vídeo + morph GL), y encima de
   él no hay nada que separar.

   .footer también se queda fuera: el tema lo trae con margin-top:-1px
   justamente para comerse la junta con lo que tenga encima, así que
   un filete ahí caería medio tapado. */
.section-brands,
.vel-wwd,
.vel-formats,
.vel-showreel,
.ceabout,
.vsr-section,
.vel-roster,
.section-resources,
.section-benefits,
.section-channels,
.section-testimonials,
.cepricing,
.section-marketing,
.section-solutions,
.section-cta {
  position: relative;
}

.section-brands::before,
.vel-wwd::before,
.vel-formats::before,
.vel-showreel::before,
.ceabout::before,
.vsr-section::before,
.vel-roster::before,
.section-resources::before,
.section-benefits::before,
.section-channels::before,
.section-testimonials::before,
.cepricing::before,
.section-marketing::before,
.section-solutions::before,
.section-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(var(--vel-blue), .30) 20%,
      rgba(var(--vel-blue), .42) 38%,
      rgba(var(--vel-pink), .42) 62%,
      rgba(var(--vel-pink), .26) 80%,
      transparent 100%);
}


/* ── Páginas legales ──────────────────────────────────────────
   privacidad.html y terminos.html no llevan reel: el contenedor es
   <main id="legal">, y dentro hay una sola sección, así que no hay
   nada que alternar. Tres círculos bastan; las alturas siguen siendo
   porcentajes del contenedor. */
#legal {
  position: relative;
  background-color: #000;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 8%,
      rgba(var(--vel-blue), .14), rgba(var(--vel-blue), .045) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at calc(100% + 9vw) 34%,
      rgba(var(--vel-pink), .13), rgba(var(--vel-pink), .04) 45%, transparent 72%),
    radial-gradient(var(--vel-blob) var(--vel-blob) at -9vw 72%,
      rgba(var(--vel-blue), .12), rgba(var(--vel-blue), .04) 45%, transparent 72%);
}

#legal .section-page {
  position: relative;
}


/* ── Móvil ────────────────────────────────────────────────────
   A 375 px, 52vw son 195 px de radio: el círculo desaparece, así
   que pasa a radio fijo en px. */
@media (max-width: 760px) {
  :root {
    --vel-blob: 340px;
  }
}