/* Generado por wordpress/build_wp.py desde la v2: no editar a mano. */
/* Inicio */

/* Hero: escena de 320vh; tres capas que se relevan con el progreso --p */
#wsi .hero{height:320vh}
#wsi .hero canvas{position:absolute;inset:0}
#wsi .hero__poster img{width:100%;height:100%;object-fit:cover}
#wsi .hero .scene__body{display:grid;place-items:center}
#wsi .hero__layer{grid-area:1/1;display:flex;flex-direction:column;align-items:center;max-width:1100px;transition:opacity 200ms linear}
#wsi .hero__l1{opacity:clamp(0,calc((.22 - var(--p,0)) * 8),1);transform:translateY(calc(var(--p,0) * -120px))}
#wsi .hero__l2{opacity:clamp(0,calc(min(var(--p,0) - .3, .6 - var(--p,0)) * 10),1)}
#wsi .hero__l3{opacity:clamp(0,calc((var(--p,0) - .7) * 8),1)}
#wsi .hero__l1 .kicker{margin-bottom:var(--s3)}
#wsi .hero__sub{margin-top:var(--s3);color:var(--ink);text-align:center}
#wsi .hero__ctas{margin-top:var(--s5);display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center}
#wsi .hero__l2{max-width:26ch}
#wsi .stats{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(24px,7vw,120px);text-align:left}
#wsi .stats dd{display:flex;flex-direction:column;gap:10px}
#wsi .stats .figure{font-size:clamp(64px,9vw,148px)}
#wsi .stats .label{max-width:16ch;letter-spacing:.12em;color:var(--ink)}
#wsi .hero__next{margin-top:var(--s6);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s3);font-size:var(--t-lead);color:var(--ink)}
#wsi .hero__scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:3;opacity:clamp(0,calc((.08 - var(--p,0)) * 14),1)}
#wsi .hero__l2,#wsi .hero__l3{pointer-events:none}
#wsi .hero:is([data-step="7"],[data-step="8"],[data-step="9"]) .hero__l3{pointer-events:auto}
#wsi .hero:is([data-step="7"],[data-step="8"],[data-step="9"]) .hero__l1{pointer-events:none;visibility:hidden}
@media (max-width:640px){
  #wsi .hero{height:260vh}
  #wsi .stats{grid-template-columns:1fr;gap:var(--s3)}
  #wsi .stats dd{flex-direction:row;align-items:baseline;gap:16px}
  #wsi .stats .figure{font-size:72px;min-width:2.2ch}
  #wsi .hero__next{flex-direction:column;font-size:17px}
}

/* Aliados */
#wsi .bar{padding-block:var(--s5);border-block:1px solid var(--line);background:var(--bg-2)} /* taste-skill-ignore: barra de aliados, como la referencia */
#wsi .bar__row{margin-bottom:var(--s3);text-align:center}

/* El caso */
#wsi .caso__grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s6);align-items:center}
#wsi .caso__fig{font-size:clamp(140px,22vw,320px);margin-top:var(--s2);color:var(--gold)}
#wsi .caso__label{margin-top:var(--s3);font-size:var(--t-lead);font-weight:300;max-width:30ch}
#wsi .chips{list-style:none;margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:8px}
#wsi .chips li{padding:8px 14px;font-size:14px;color:var(--muted);background:var(--bg-3)}
#wsi .caso__img{aspect-ratio:4/3}
#wsi .pass{position:absolute;right:20px;top:20px;z-index:2;display:grid;gap:4px;padding:16px 20px 16px 22px;background:var(--gold);color:var(--bg);min-width:200px;
  -webkit-mask:radial-gradient(circle 8px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 8px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat}
#wsi .pass .hud{color:var(--bg)}
#wsi .pass strong{font-family:var(--serif);font-size:26px;font-weight:500;line-height:1}
#wsi .pass span:last-child{font-size:14px}
@media (max-width:900px){#wsi .caso__grid{grid-template-columns:1fr}#wsi .pass{right:12px;top:12px;min-width:0}}

/* La ruta */
#wsi .ruta .h1{margin-bottom:var(--s6);max-width:14ch}
#wsi .ruta .micro{margin-top:var(--s3)}

/* El salto + ecosistema */
#wsi .eco{height:420vh}
#wsi .eco canvas{position:absolute;inset:0}
#wsi .eco__body{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:100px var(--gutter) 120px}
#wsi .eco__a,#wsi .eco__b{grid-area:1/1;max-width:14ch;text-align:center}
#wsi .eco__a{opacity:clamp(0,calc(min(var(--p,0) - .02, .3 - var(--p,0)) * 10),1)}
#wsi .eco__b{opacity:clamp(0,calc(min(var(--p,0) - .34, .56 - var(--p,0)) * 10),1)}
#wsi .eco__cards{grid-area:1/1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);width:min(1080px,100%);opacity:clamp(0,calc((var(--p,0) - .62) * 8),1);transform:translateY(calc((1 - min(1, max(0, (var(--p,0) - .62) * 4))) * 60px))}
#wsi .eco__card{background:rgba(18,56,43,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#wsi .rail{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;display:flex;gap:6px;list-style:none;padding:6px;background:rgba(8,31,24,.6);border:1px solid var(--line)} /* taste-skill-ignore: riel de capítulos, como la referencia */
#wsi .rail li{padding:8px 12px;color:var(--dim);white-space:nowrap}
#wsi .rail li b{color:inherit;font-weight:500}
#wsi .rail li:nth-child(1){color:var(--ink)}
#wsi .eco:is([data-step="2"],[data-step="3"]) .rail li:nth-child(-n+2),#wsi .eco:is([data-step="4"],[data-step="5"]) .rail li:nth-child(-n+3),#wsi .eco:is([data-step="6"],[data-step="7"]) .rail li:nth-child(-n+4),#wsi .eco:is([data-step="8"],[data-step="9"]) .rail li{color:var(--ink)}
@media (max-width:760px){
  #wsi .eco{height:360vh}
  #wsi .eco__cards{grid-template-columns:1fr;gap:var(--s1)}
  #wsi .eco__card{padding:var(--s3)}
  #wsi .eco__card .card__big{margin-top:var(--s1)}
  #wsi .rail{display:none}
}


/* Stages */
#wsi .stages .h1{margin-bottom:var(--s6);max-width:14ch}
#wsi .stages__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
#wsi .stage{display:block}
#wsi .stage .media{aspect-ratio:4/5}
#wsi .stage .hud{margin-top:var(--s3)}
#wsi .stage .h3{margin-top:var(--s1)}
#wsi .stage__l{margin-top:6px;color:var(--muted);font-size:16px}
#wsi .stage:nth-child(2){margin-top:var(--s7)}
@media (max-width:900px){#wsi .stages__grid{grid-template-columns:1fr;gap:var(--s5)}#wsi .stage:nth-child(2){margin-top:0}#wsi .stage .media{aspect-ratio:16/11}}

/* Riders */
#wsi .riders-home .h1{margin-bottom:var(--s6)}
#wsi .passes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
#wsi .pass-card{display:grid;grid-template-columns:2fr 3fr;background:var(--bg-3);min-height:340px}
#wsi .pass-card .media{height:100%;min-height:280px}
#wsi .pass-card__b{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:var(--s4);border-left:1.5px dashed var(--line-2)} /* taste-skill-ignore: perforación de credencial */
#wsi .pass-card__m{color:var(--muted);font-size:15px}
@media (max-width:900px){#wsi .passes{grid-template-columns:1fr}#wsi .pass-card{grid-template-columns:1fr}#wsi .pass-card .media{aspect-ratio:16/10;min-height:0}#wsi .pass-card__b{border-left:0;border-top:1.5px dashed var(--line-2)}}

/* Cierre */
#wsi .cierre{min-height:90svh;display:flex;align-items:center;overflow:hidden}
#wsi .cierre__media{position:absolute;inset:0}
#wsi .cierre__media video{width:100%;height:100%;object-fit:cover}
#wsi .cierre__body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5)}
#wsi .cierre .h1{max-width:16ch}


@media (max-width:640px){#wsi .hero__scroll{display:none}#wsi .micro{max-width:30ch}}

/* Auditoría final: sombra inferior para las cifras y el texto sobre el cielo */
#wsi .hero .scene__shade,#wsi .eco .scene__shade{background:linear-gradient(to top,rgba(8,31,24,.94) 0%,rgba(8,31,24,.55) 38%,rgba(8,31,24,0) 70%),radial-gradient(120% 90% at 50% 45%,rgba(8,31,24,.35) 0%,rgba(8,31,24,.75) 70%,rgba(8,31,24,.95) 100%)} /* taste-skill-ignore: capa X.4 */
#wsi .hero .scene__body{justify-content:flex-end}
#wsi .hero__l3{align-self:end;padding-bottom:6vh}
#wsi .eco{height:360vh}

@media (prefers-reduced-motion:reduce){
  #wsi .hero,#wsi .eco{height:auto}
  #wsi .hero .scene__stick,#wsi .eco .scene__stick{position:relative;height:auto;min-height:100svh;overflow:visible}
  #wsi .hero .scene__body{position:relative;display:flex;flex-direction:column;gap:var(--s6);padding-top:140px;justify-content:center}
  #wsi .hero__layer,#wsi .hero .hero__l1{position:static;opacity:1;transform:none;visibility:visible;pointer-events:auto}
  #wsi .hero__scroll{display:none}
  #wsi .eco__body{position:relative;display:flex;flex-direction:column;gap:var(--s4)}
  #wsi .eco__a,#wsi .eco__b,#wsi .eco__cards{opacity:1;transform:none}
  #wsi .eco .scene__media{background:url(../assets/hf/20-salto.jpg) center/cover}
}