/* ════════════════════════════════════════════════════════════
   VisionPass · Efectos disruptivos (compartido en los 3 canales)
   Paleta oficial · estética editorial Zegna/Loro Piana
   ════════════════════════════════════════════════════════════ */

/* ───────── 1. SLIDER DE ENFOQUE (hero) ─────────
   Imagen borrosa "antes" que el usuario arrastra para enfocar.
   Antes = persona forzando la vista. Después = persona relajada. */
.vpfs{position:relative;width:100%;height:min(86vh,780px);border-radius:0 0 24px 24px;overflow:hidden;background:#2a132f;box-shadow:0 36px 90px rgba(36,21,40,.18),0 1px 0 rgba(255,255,255,.6) inset;border:1px solid rgba(80,55,48,.1);user-select:none;touch-action:pan-y;cursor:ew-resize}
.vpfs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block;pointer-events:none}
/* Capa nítida (después): base, full */
.vpfs-after{z-index:1}
/* Capa borrosa (antes): encima, recortada con clip-path para NO deformar la imagen */
.vpfs-before-wrap{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:hidden;clip-path:inset(0 5% 0 0);will-change:clip-path}
.vpfs-before{filter:blur(2.5px) saturate(.92) contrast(.98) brightness(.99);transform:scale(1.06)}
.vpfs-before-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,18,56,.30) 0%,rgba(45,18,56,.10) 70%,transparent 100%);pointer-events:none}
/* Etiquetas antes/después */
.vpfs-tag{position:absolute;top:22px;z-index:4;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:999px;backdrop-filter:blur(6px);transition:opacity .3s}
.vpfs-tag-before{left:22px;background:rgba(20,8,26,.5);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.2)}
.vpfs-tag-after{right:22px;background:rgba(255,251,235,.9);color:var(--morado);border:1px solid rgba(145,23,191,.3)}
/* Handle divisor */
.vpfs-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:3;background:rgba(255,255,255,.9);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(45,18,56,.15),0 0 22px rgba(255,255,255,.4);will-change:left}
.vpfs-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:999px;background:rgba(255,251,235,.96);border:1.5px solid rgba(145,23,191,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(36,21,40,.3);transition:transform .2s}
.vpfs:hover .vpfs-knob{transform:translate(-50%,-50%) scale(1.06)}
.vpfs-knob svg{stroke:var(--morado)}
/* Texto sobre el slider (overlay inferior) */
.vpfs-caption{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(26px,5vw,56px) clamp(24px,5vw,64px);background:linear-gradient(0deg,rgba(20,12,22,.72) 0%,rgba(20,12,22,.30) 56%,transparent 100%);pointer-events:none}
.vpfs-cap-text{font-family:var(--f-display);font-weight:600;color:#fff;font-size:clamp(20px,2.6vw,30px);line-height:1.18;letter-spacing:-.02em;max-width:560px;text-shadow:0 2px 16px rgba(0,0,0,.32)}
.vpfs-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.82);background:rgba(20,8,26,.4);padding:6px 14px;border-radius:999px;backdrop-filter:blur(6px);animation:vpfsPulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes vpfsPulse{0%,100%{opacity:.6}50%{opacity:1}}
.vpfs.is-touched .vpfs-hint{opacity:0;transition:opacity .4s}
@media(max-width:680px){.vpfs{height:min(64vh,460px);border-radius:0 0 24px 24px;height:44px}}
@media(prefers-reduced-motion:reduce){.vpfs-before{filter:blur(0)}.vpfs-hint{animation:none}}

/* ───────── 2. CARTA SNELLEN (familia) ─────────
   Las líneas empiezan borrosas y se enfocan en cascada al entrar. */
.snellen-chart{background:#fff;border:1px solid var(--borde);border-radius:24px;padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px);text-align:center;box-shadow:0 24px 60px rgba(36,21,40,.07);max-width:680px;margin:0 auto;position:relative;overflow:hidden}
.snellen-chart::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:5px;border-radius:0 0 6px 6px;background:var(--morado)}
.snellen-chart .sc-line{font-family:var(--f-display);font-weight:700;color:var(--tinta);line-height:1.25;letter-spacing:.16em;filter:blur(8px);opacity:.35;transition:filter .7s cubic-bezier(.16,1,.3,1),opacity .7s ease}
.snellen-chart.is-clear .sc-line{filter:blur(0);opacity:1}
.snellen-chart .sc-line:nth-child(1){font-size:clamp(30px,6vw,52px)}
.snellen-chart .sc-line:nth-child(2){font-size:clamp(24px,4.6vw,40px)}
.snellen-chart .sc-line:nth-child(3){font-size:clamp(18px,3.4vw,30px)}
.snellen-chart .sc-line:nth-child(4){font-size:clamp(14px,2.4vw,22px)}
.snellen-chart .sc-line:nth-child(5){font-size:clamp(11px,1.8vw,16px);color:var(--acero)}
.snellen-chart.is-clear .sc-line:nth-child(1){transition-delay:0s}
.snellen-chart.is-clear .sc-line:nth-child(2){transition-delay:.18s}
.snellen-chart.is-clear .sc-line:nth-child(3){transition-delay:.36s}
.snellen-chart.is-clear .sc-line:nth-child(4){transition-delay:.54s}
.snellen-chart.is-clear .sc-line:nth-child(5){transition-delay:.72s}
.snellen-foot{margin-top:26px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--morado);opacity:0;transition:opacity .6s ease 1s}
.snellen-chart.is-clear .snellen-foot{opacity:1}
@media(prefers-reduced-motion:reduce){.snellen-chart .sc-line{filter:none;opacity:1}.snellen-foot{opacity:1}}

/* ───────── 3. CONTADOR DE IMPACTO (empresas) ─────────
   Cifras de bienestar que cuentan hacia arriba al entrar al viewport. */
.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:0 auto}
.impact-stat{background:#fff;border:1px solid var(--borde);border-radius:22px;padding:34px 28px;text-align:center;box-shadow:0 18px 48px rgba(36,21,40,.06);position:relative;overflow:hidden}
.impact-stat::after{content:"";position:absolute;inset:auto -30% -50% auto;width:140px;height:140px;border-radius:999px;background:radial-gradient(circle,rgba(145,23,191,.07),transparent 65%)}
.impact-num{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,5vw,56px);line-height:1;letter-spacing:-.03em;color:var(--morado);display:flex;align-items:baseline;justify-content:center;gap:2px}
.impact-num .suffix{font-size:.5em;font-weight:700;color:var(--morado-light)}
.impact-label{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--acero)}
.impact-stat strong{color:var(--tinta)}
@media(max-width:760px){.impact-grid{grid-template-columns:1fr;gap:16px}}

/* ───────── 4. MOSAICO DE ESCALA (aliados) ─────────
   Grilla que se puebla al hacer scroll: "miles de afiliados". */
.scale-mosaic{position:relative;max-width:1000px;margin:0 auto}
.scale-tiles{display:grid;grid-template-columns:repeat(16,1fr);gap:9px}
.scale-tile{aspect-ratio:1;border-radius:999px;opacity:0;transform:scale(.4);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.scale-mosaic.is-on .scale-tile{opacity:1;transform:scale(1)}
.scale-tile.t-a{background:linear-gradient(135deg,#9117BF,#B44FD4)}
.scale-tile.t-b{background:var(--arena-dark)}
.scale-tile.t-c{background:linear-gradient(135deg,#FFA000,#FFC766)}
.scale-tile.t-d{background:var(--morado-soft)}
.scale-tile.t-e{background:linear-gradient(135deg,#007FFF,#5FB0FF)}
.scale-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.scale-center-inner{background:rgba(255,251,235,.94);backdrop-filter:blur(8px);border:1px solid rgba(145,23,191,.18);border-radius:22px;padding:26px 40px;text-align:center;box-shadow:0 24px 60px rgba(36,21,40,.16);opacity:0;transform:scale(.92);transition:opacity .6s ease .5s,transform .6s cubic-bezier(.16,1,.3,1) .5s}
.scale-mosaic.is-on .scale-center-inner{opacity:1;transform:scale(1)}
.scale-center-inner .big{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em;color:var(--morado);line-height:1}
.scale-center-inner .small{margin-top:8px;font-size:14.5px;color:var(--acero);max-width:280px}
@media(max-width:760px){.scale-tiles{grid-template-columns:repeat(10,1fr);gap:7px}.scale-center-inner{padding:20px 26px}}
@media(prefers-reduced-motion:reduce){.scale-tile{opacity:1;transform:none}.scale-center-inner{opacity:1;transform:none}}

/* ───────── Realce de scroll-focus existente: subtítulo bajo el caption ───────── */
.focus-caption h2{font-family:var(--f-display);font-weight:600;color:#fff;font-size:clamp(22px,2.8vw,34px);line-height:1.16;letter-spacing:-.02em;max-width:620px;text-shadow:0 2px 18px rgba(0,0,0,.34);margin-top:12px}
.focus-caption p{color:rgba(255,255,255,.88);font-size:16px;max-width:480px;margin-top:12px;text-shadow:0 1px 10px rgba(0,0,0,.3)}

/* Overlay para crossfade dual (antes → despues) en scroll-focus */
.focus-stage .focus-img-overlay{position:absolute;inset:-3% 0;width:100%;height:106%;object-fit:cover;object-position:center 32%;opacity:0;z-index:2;pointer-events:none;will-change:opacity,transform}
.focus-stage .focus-img-overlay + .focus-caption,.focus-stage .focus-img + .focus-img-overlay ~ .focus-caption{z-index:3}