/* ════════════════════════════════════════════════════════════
   SECCIÓN — ¿POR QUÉ ES GRATIS? ("Gratis de verdad. Así nos pagamos.")
   Dos columnas: a la izquierda la explicación en texto llano; a la
   derecha el póster de Draco con el ZIP y, encima, un ticket que
   deja claro quién paga qué. El ticket se "imprime" al entrar en
   pantalla (js/why-free.js) y es el único movimiento de la sección.
   Los colores salen de las variables --wf-*; [data-theme="light"]
   las redefine para el modo claro. El ticket es papel en ambos.
   ════════════════════════════════════════════════════════════ */

.wf{
  --wf-blue:#2f7bff;--wf-text:#f5f7fb;--wf-strong:#fff;--wf-muted:#b9c1cf;--wf-soft:#8e99ad;
  --wf-bg:#050913;--wf-rule:#ffffff17;--wf-poster-border:#ffffff14;--wf-poster-shadow:0 40px 90px -30px #000c;
  --wf-paper:#f5f2ea;--wf-ink:#16181d;--wf-ink-soft:#6b6f78;--wf-ink-rule:#16181d26;
  position:relative;overflow:clip;padding:var(--section-pad) 0;background:var(--wf-bg);color:var(--wf-text)}
[data-theme="light"] .wf{
  --wf-blue:#1f62f0;--wf-text:#0d1526;--wf-strong:#0d1526;--wf-muted:#4a5568;--wf-soft:#6b7689;
  --wf-bg:#f4f7fd;--wf-rule:#0d15261a;--wf-poster-border:#0d15260f;--wf-poster-shadow:0 40px 80px -34px #1f3c7a59;
  --wf-paper:#ffffff;--wf-ink-rule:#16181d1f}

.wf ::selection{background:#2f7bff59;color:inherit}
.wf-container{position:relative;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:84px;align-items:start}
.wf-blue{color:var(--wf-blue)}

/* ── Texto ── */
.wf-title{font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;margin-bottom:28px;color:var(--wf-strong)}
.wf-lead{max-width:46ch;color:var(--wf-muted);text-wrap:pretty}
.wf-lead + .wf-lead{margin-top:14px}

.wf-facts{list-style:none;margin:36px 0 0;padding:0;max-width:46ch;border-top:1px solid var(--wf-rule)}
.wf-facts li{padding:15px 0;border-bottom:1px solid var(--wf-rule);font-size:15px;line-height:1.5;color:var(--wf-muted)}
.wf-facts b{font-weight:700;color:var(--wf-strong);margin-right:4px}

.wf-foot{margin-top:40px}
.wf-cta{display:inline-flex;align-items:center;border-radius:999px;color:#fff;font-weight:700;cursor:pointer}
.wf-cta svg{transition:transform .25s var(--ease)}
.wf-cta:hover svg{transform:translateX(3px)}
.wf-cta:focus-visible{outline:2px solid var(--wf-blue);outline-offset:4px}
.wf-fine{margin-top:16px;max-width:44ch;font-size:13px;line-height:1.5;color:var(--wf-soft)}

/* ── Visual: Draco con el ticket ──
   Lienzo de 720×724 u; el escenario es un contenedor de tamaño:
   1u = 100cqi/720.
   · papel abierto (con su curva y rulo): x 0–340, y 316–700 u
   · final del papel (curva + rulo, recortado del mismo papel, con sus
     34 u de arriba fundidas): y 540–700 u. Arranca en y 318 u (bajo la
     barra) y baja 222 u hasta su sitio exacto.
   · texto en x 68–300, y 336–552 u */
.wf-copy{position:sticky;top:112px;padding-top:24px}
.wf-visual{--rw:560px;position:relative;width:100%;justify-self:center;display:flex;justify-content:center}
.wf-receipt{position:relative;flex:none;width:var(--rw);aspect-ratio:720/724;container-type:inline-size;--u:calc(100cqi / 720)}
.wf-receipt > img,.wf-r-win > img{position:absolute;pointer-events:none;height:auto}
.wf-r-base{z-index:1;inset:0;width:100%;filter:drop-shadow(0 30px 40px #0007)}
[data-theme="light"] .wf-r-base{filter:drop-shadow(0 26px 34px #1f3c7a33)}
.wf-r-win{position:absolute;z-index:2;left:0;top:calc(316 * var(--u));width:calc(340 * var(--u));aspect-ratio:340/384;overflow:hidden}
.wf-r-sheet{inset:0;width:100%}
.wf-r-curl{z-index:3;left:0;top:calc(540 * var(--u));width:calc(340 * var(--u))}

/* texto escrito sobre el papel: escala con el escenario, como la imagen */
.wf-r-text{position:absolute;z-index:4;left:calc(68 * var(--u));top:calc(334 * var(--u));width:calc(232 * var(--u));
  color:#16181d;font-size:max(10px,calc(14 * var(--u)));line-height:1.3;font-variant-numeric:tabular-nums}
.wf-r-head{display:flex;align-items:center;gap:.5em;padding-bottom:.7em;margin-bottom:.35em;border-bottom:1.5px dashed #16181d33;
  font-size:.82em;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.wf-r-head img{width:1.5em;height:auto}
.wf-r-row{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;padding:.45em 0}
.wf-r-row > span:last-child{font-weight:700;white-space:nowrap}
.wf-r-row s{margin-right:.35em;font-weight:600;color:#d93a3a;text-decoration-color:#e5484d;text-decoration-thickness:1.5px}
.wf-r-total{display:flex;justify-content:space-between;align-items:center;margin-top:.5em;padding:.75em 0;
  border-top:1.5px dashed #16181d33;border-bottom:1.5px dashed #16181d33;font-weight:800}
.wf-r-total strong{font-size:2em;font-weight:900;letter-spacing:-.03em;line-height:1;color:#1f62f0}
.wf-r-note{margin-top:.8em;font-size:.76em;line-height:1.35;color:#5b6170}

/* ── Movimiento: el ticket se desenrolla solo, al llegar a la sección ──
   js/why-free.js añade .is-armed y luego .is-open. El final del papel
   baja 222 u desde la barra; el papel se ve hasta 40 u por debajo del
   borde de arriba de ese final (que se funde con él): la ventana sube d u
   y el papel baja d u dentro, d de 342 a 120. Al acabar queda la foto
   exacta. Luego .is-printed imprime el texto. Sin JS: abierto. */
.wf-receipt{--unroll:.85s;--unroll-ease:cubic-bezier(.3,0,.2,1)}
.wf-r-win,.wf-r-sheet,.wf-r-curl{will-change:transform;transition:transform var(--unroll) var(--unroll-ease)}
.wf-receipt:not(.is-armed) .wf-r-win{transform:translateY(calc(-120 * var(--u)))}
.wf-receipt:not(.is-armed) .wf-r-sheet{transform:translateY(calc(120 * var(--u)))}
.wf-receipt.is-armed .wf-r-win{transform:translateY(calc(-342 * var(--u)))}
.wf-receipt.is-armed .wf-r-sheet{transform:translateY(calc(342 * var(--u)))}
.wf-receipt.is-armed .wf-r-curl{transform:translateY(calc(-222 * var(--u)))}
.wf-receipt.is-armed.is-open .wf-r-win{transform:translateY(calc(-120 * var(--u)))}
.wf-receipt.is-armed.is-open .wf-r-sheet{transform:translateY(calc(120 * var(--u)))}
.wf-receipt.is-armed.is-open .wf-r-curl{transform:none}
.wf-receipt.is-armed .wf-r-text > *{opacity:0;transform:translateY(-6px);clip-path:inset(0 0 100% 0)}
/* el contenido se imprime línea a línea, como un ticket de caja */
.wf-receipt.is-printed .wf-r-text > *{opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .18s ease,transform .3s cubic-bezier(.16,1,.3,1),clip-path .28s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--l,0) * .07s)}
.wf-r-text > :nth-child(2){--l:1}
.wf-r-text > :nth-child(3){--l:2}
.wf-r-text > :nth-child(4){--l:3}
.wf-r-text > :nth-child(5){--l:4}
.wf-r-text > :nth-child(6){--l:5}
.wf-r-text > :nth-child(7){--l:6}
.wf-r-text > :nth-child(8){--l:7}
.wf-receipt.is-printed .wf-r-total strong{animation:wf-stamp .45s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes wf-stamp{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}

/* Reveal de texto y póster (igual que el resto de la landing) */
.wf [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.wf [data-reveal].is-visible{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:980px){
  .wf-container{grid-template-columns:1fr;gap:56px}
  .wf-copy{position:static;padding-top:0}
}
@media(max-width:640px){
  .wf-cta{width:100%;justify-content:center;padding:0 18px!important}
  /* en móvil el escenario crece y se recorta por la derecha (cola y ala)
     para que el papel tenga ancho para el texto */
  .wf-visual{--rw:min(500px,119vw);justify-content:flex-start;overflow:clip;overflow-clip-margin:24px}
  .wf-r-text{font-size:max(9.5px,calc(14 * var(--u)))}
  .wf-r-row{gap:.4em}
  .wf-r-row > span:first-child{white-space:nowrap}
  .wf-r-row s{margin-right:.25em}
}
@media(prefers-reduced-motion:reduce){
  .wf [data-reveal]{opacity:1;transform:none;transition:none}

  .wf-receipt.is-armed .wf-r-text > *{opacity:1;transform:none;clip-path:none}
  .wf-receipt.is-printed .wf-r-total strong{animation:none}
}

/* Enlace a la pregunta del FAQ que lo explica en detalle */
.wf-link{color:var(--wf-strong);font-weight:600;text-decoration:underline;text-decoration-color:var(--wf-blue);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease}
.wf-link:hover{color:var(--wf-blue)}
.wf-link:focus-visible{outline:2px solid var(--wf-blue);outline-offset:3px;border-radius:3px}