/* ══════════════════════════════════════════════════════════════════════
   TU PLANTILLA — LIENZO DE SUBPÁGINAS · 31-ago-2026
   ══════════════════════════════════════════════════════════════════════
   Por qué existe: /como-funciona/ y /precios/ tenían el fondo QUIETO —
   solo la trama de puntos del body — mientras el texto quedaba apretado
   en los 640px de la izquierda y la mitad derecha del monitor vacía.
   Medido a 1440: el home usa el mismo reparto, pero llena y mueve ese
   vacío con las piezas del lienzo. Eso es lo que faltaba aquí.

   Reutiliza EXACTAMENTE el vocabulario de css/chrome.css (.pz--win,
   --skel, --pill, --plus, --ring): no se inventa nada nuevo.

   Motor: CSS puro. /como-funciona/ no carga GSAP y no vale la pena
   sumarle ~50KB por un fondo ambiental. Bucle sin costura (el fotograma
   0% y el 100% son idénticos) y todo en transform/opacity.
   ══════════════════════════════════════════════════════════════════════ */

.lienzo-pag{
  position:fixed; inset:0; z-index:1;
  pointer-events:none; overflow:hidden;
  contain:strict;                  /* no invalida el layout de la página */
}
/* El contenido SIEMPRE por encima del lienzo — mismo patrón que el home
   (css/chrome.css: .lienzo z-index 1, .container z-index 2). */
main > section > .container,
main > section > div,
.px-sec > .container,
.px-hero > .container,
.g-main > .container,
header .container,
footer .container,
.sticky-cta, .px-sticky, .cta-sticky, .g-sticky, .wsp-fab, .popup{
  position:relative; z-index:2
}

.lienzo-pag .pz{
  position:absolute; opacity:.95;
  will-change:transform;
  animation:pz-flota var(--t,14s) ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}

/* Vaivén: sube/baja, deriva de lado y gira apenas. El 0% y el 100% son
   distintos a propósito porque va en `alternate` — la ida y la vuelta
   recorren el mismo camino, así que no hay salto. */
@keyframes pz-flota{
  from{ transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(var(--s,1)) }
  to  { transform:translate3d(var(--dx,10px),var(--dy,-16px),0)
                  rotate(calc(var(--r,0deg) + var(--dr,3deg))) scale(var(--s,1)) }
}

/* ── Las piezas, copiadas tal cual de css/chrome.css ──────────────────
   Se repiten aquí porque estas dos páginas no cargan chrome.css. Si el
   vocabulario cambia allá, cámbialo aquí también. ──────────────────── */
.lienzo-pag .pz--win{width:150px;height:100px;border:2px solid rgba(36,64,255,.5);border-radius:12px;background:rgba(36,64,255,.07)}
.lienzo-pag .pz--win::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;border-bottom:2px solid rgba(36,64,255,.5);background:rgba(36,64,255,.2);border-radius:10px 10px 0 0}
.lienzo-pag .pz--win.pz--sm{width:100px;height:70px}
.lienzo-pag .pz--win.pz--sm::before{height:14px}
.lienzo-pag .pz--skel{width:120px;display:flex;flex-direction:column;gap:8px}
.lienzo-pag .pz--skel i{display:block;height:9px;border-radius:5px;background:rgba(120,124,150,.42)}
.lienzo-pag .pz--skel i:nth-child(1){width:70%;height:13px;background:rgba(36,64,255,.3)}
.lienzo-pag .pz--skel i:nth-child(2){width:100%}
.lienzo-pag .pz--skel i:nth-child(3){width:85%}
.lienzo-pag .pz--pill{width:110px;height:36px;border-radius:999px;border:2px solid rgba(36,64,255,.55);background:rgba(36,64,255,.13)}
.lienzo-pag .pz--pill.pz--llena{background:rgba(36,64,255,.55);border-color:transparent}
.lienzo-pag .pz--plus{width:34px;height:34px;border-radius:50%;background:rgba(36,64,255,.5);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;font-family:var(--f-display,Archivo)}
.lienzo-pag .pz--plus::before{content:"+"}
.lienzo-pag .pz--ring{width:120px;height:120px;border-radius:50%;border:2px dashed rgba(36,64,255,.38)}

/* Colocación: SOLO en el aire de la derecha y en los bordes, nunca sobre
   la columna de texto (que vive entre el 4% y el 52% del ancho). */
.lienzo-pag .pz:nth-child(1){ left:77vw; top:14vh; --r:-6deg; --s:1;   --t:15s; --dx:14px;  --dy:-18px; --dr:3deg;  --d:0s }
.lienzo-pag .pz:nth-child(2){ left:88vw; top:52vh; --r:5deg;  --s:.85; --t:19s; --dx:-12px; --dy:14px;  --dr:-4deg; --d:1.2s }
.lienzo-pag .pz:nth-child(3){ left:81vw; top:78vh; --r:-3deg; --s:.9;  --t:17s; --dx:10px;  --dy:-13px; --dr:2deg;  --d:.6s }
.lienzo-pag .pz:nth-child(4){ left:92vw; top:26vh; --r:7deg;  --s:.95; --t:21s; --dx:-9px;  --dy:-11px; --dr:-3deg; --d:2s }
.lienzo-pag .pz:nth-child(5){ left:2vw;  top:64vh; --r:-8deg; --s:.8;  --t:16s; --dx:11px;  --dy:15px;  --dr:4deg;  --d:.9s }
.lienzo-pag .pz:nth-child(6){ left:76vw; top:40vh; --r:0deg;  --s:1;   --t:23s; --dx:-14px; --dy:12px;  --dr:-2deg; --d:1.6s }
.lienzo-pag .pz:nth-child(7){ left:1vw;  top:18vh; --r:4deg;  --s:.75; --t:18s; --dx:12px;  --dy:-10px; --dr:3deg;  --d:2.4s }

/* Parallax con el scroll — nativo, sin JS ni listeners. Donde no está
   soportado simplemente no pasa nada: el vaivén ya da la vida. */
@supports (animation-timeline: scroll()){
  .lienzo-pag .pz{
    animation:pz-flota var(--t,14s) ease-in-out infinite alternate,
              pz-parallax linear both;
    animation-timeline:auto, scroll(root block);
  }
  @keyframes pz-parallax{
    from{ translate:0 0 }
    to  { translate:0 calc(var(--prof,.3) * -260px) }
  }
  .lienzo-pag .pz:nth-child(1){ --prof:.5 }
  .lienzo-pag .pz:nth-child(2){ --prof:.22 }
  .lienzo-pag .pz:nth-child(3){ --prof:.4 }
  .lienzo-pag .pz:nth-child(4){ --prof:.16 }
  .lienzo-pag .pz:nth-child(5){ --prof:.55 }
  .lienzo-pag .pz:nth-child(6){ --prof:.3 }
  .lienzo-pag .pz:nth-child(7){ --prof:.45 }
}

/* Las piezas flotan sobre el fondo de las secciones, igual que en el home.
   El azul de marca se lee tanto sobre la crema como sobre el negro, así que
   no hace falta un tratamiento por tema (la regla anterior usaba un selector
   hermano que nunca casaba). */

/* Bajo 1080 no hay aire lateral que llenar: el teléfono ya se ve bien y
   sumar piezas solo gasta batería. */
@media(max-width:1079.9px){ .lienzo-pag{ display:none } }

/* Quien pide menos movimiento las ve quietas, no las pierde. */
@media(prefers-reduced-motion:reduce){
  .lienzo-pag .pz{ animation:none; opacity:.35 }
}

/* ══════════════════════════════════════════════════════════════════════
   RITMO · la escala de espaciado que a estas páginas les faltaba
   ══════════════════════════════════════════════════════════════════════
   Medido el 31-ago: /como-funciona/ y /precios/ usan var(--s…) pero NO
   cargan css/escala.css, así que las 8 variables resolvían a NADA. El
   home tiene 4/14/28/40/80px; aquí no había ninguno. Eso es, literal,
   "todo se ve compactado".

   Se traen SOLO los tokens (no las reglas de escala.css, que están
   escritas para las clases del home). Escala en múltiplos de 8, que es
   la unidad de rejilla del sitio.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --s1:4px;    /* pelos: un icono de su texto */
  --s2:8px;    /* dentro de una píldora, línea a línea */
  --s3:14px;   /* el paso base */
  --s4:20px;   /* relleno de tarjeta */
  --s5:28px;   /* de un bloque al siguiente */
  --s6:40px;   /* cabecera a contenido */
  --s7:56px;   /* respiro de sección */
  --s8:80px;   /* aire grande */
}

/* ── Aire entre párrafos ──────────────────────────────────────────────
   Medido a 1440: el home deja 80,8px entre párrafos; /como-funciona/
   dejaba 37,8px — menos de la mitad. Con 73 caracteres por línea (el
   límite cómodo son 75) el bloque se leía como un muro. */
@media(min-width:768px){
  .px-sec .container--prosa p + p{ margin-top:var(--s5) }
  .px-sec .container--prosa ul + p,
  .px-sec .container--prosa p + ul{ margin-top:var(--s6) }
  /* La medida de línea baja de ~73 a ~66 caracteres: se lee sin volver
     a empezar el renglón. */
  .px-sec .container--prosa{ max-width:min(var(--medida, 62ch), 640px) }
  /* Cabecera a contenido: era 0. */
  .px-sec .sec-head, .px-sec > .container > header{ margin-bottom:var(--s6) }
}