/* ==========================================================================
   EL ESPECIAL i-DOC — scrollytelling
   Portado de `04-cyberpunk/08-especial-idoc.html`.
   ========================================================================== */

/* ---------- PORTADA INMERSIVA ---------- */
.pf-idoc__cover{
	position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
	overflow:hidden;border-bottom:1px solid var(--pf-linea);
}
.pf-idoc__cover-img{position:absolute;inset:0}
.pf-idoc__cover-img img{width:100%;height:100%;object-fit:cover;max-height:none;filter:none}
.pf-idoc__cover-img::after{
	content:"";position:absolute;inset:0;z-index:3;
	background:linear-gradient(to top,var(--pf-negro) 6%,rgba(10,10,10,.72) 40%,
		rgba(10,10,10,.35) 74%,rgba(10,10,10,.6) 100%);
}
.pf-idoc__cover-img .pf-gl-a,
.pf-idoc__cover-img .pf-gl-b{
	position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;
}
.pf-idoc__cover-img .pf-gl-a{background:var(--pf-logo-verde);animation:pf-pulso-a 13s infinite steps(1)}
.pf-idoc__cover-img .pf-gl-b{background:var(--pf-logo-magenta);animation:pf-pulso-b 13s infinite steps(1)}

.pf-idoc__cover-c{position:relative;z-index:4;width:100%;padding-bottom:clamp(3rem,8vh,6rem)}
.pf-idoc__chip{
	display:inline-flex;align-items:center;gap:.5rem;background:var(--pf-k);color:var(--pf-sobre-k);
	font-family:var(--pf-mono);font-weight:600;font-size:.62rem;letter-spacing:.2em;
	text-transform:uppercase;padding:.34rem .7rem;margin-bottom:1.2rem;
}
.pf-idoc__chip::before{content:"";width:6px;height:6px;background:currentColor;animation:pf-par .9s step-end infinite}
.pf-idoc__t{
	font-family:var(--pf-display);font-size:clamp(2.6rem,9vw,7rem);color:#fff;
	line-height:.94;letter-spacing:-.03em;text-transform:uppercase;max-width:16ch;
}
.pf-idoc__deck{
	font-family:var(--pf-cond);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.7rem);
	line-height:1.3;color:var(--pf-tinta);max-width:46ch;margin-top:1.2rem;
}
.pf-idoc__firma{
	display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.6rem;
	font-family:var(--pf-mono);font-size:.72rem;color:var(--pf-tinta-2);
}
.pf-idoc__firma b{color:var(--pf-k-cl);font-weight:500}

.pf-idoc__hud{position:absolute;top:calc(52px + 1rem);left:0;right:0;z-index:3;pointer-events:none}
.pf-idoc__hud .pf-wrap{
	display:flex;justify-content:space-between;font-family:var(--pf-mono);font-size:.6rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--pf-tinta-3);
}
.pf-idoc__scroll{
	position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:4;
	font-family:var(--pf-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--pf-tinta-2);display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.pf-idoc__scroll i{
	width:1px;height:34px;background:linear-gradient(var(--pf-k),transparent);display:block;
	animation:pf-baja 1.8s ease-in-out infinite;
}
@keyframes pf-baja{
	0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}
	50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ---------- INTRO ---------- */
.pf-idoc__intro{padding:clamp(3rem,9vw,7rem) 0}
.pf-idoc__intro-t{max-width:40rem;margin:0 auto;text-align:center}
.pf-idoc__intro-t .pf-kick{margin-bottom:1rem;display:block}
.pf-idoc__intro-t p{
	font-family:var(--pf-cond);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);
	line-height:1.28;color:#fff;
}
.pf-idoc__intro-t p b{color:var(--pf-k-cl);font-weight:700}

/* ---------- SCROLLYTELLING ---------- */
.pf-scrolly{position:relative}
.pf-scrolly__grid{display:grid;grid-template-columns:1fr}
@media (min-width:900px){ .pf-scrolly__grid{grid-template-columns:1.1fr .9fr} }
.pf-scrolly__vis{
	position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;
	background:radial-gradient(120% 90% at 50% 40%,#0e0e10,#060607);overflow:hidden;order:0;
}
.pf-scrolly__vis::before{
	content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
	background:linear-gradient(var(--pf-linea) 1px,transparent 1px) 0 0/100% 60px,
	           linear-gradient(90deg,var(--pf-linea) 1px,transparent 1px) 0 0/60px 100%;
	-webkit-mask:radial-gradient(70% 70% at 50% 45%,#000,transparent);
	        mask:radial-gradient(70% 70% at 50% 45%,#000,transparent);
}
.pf-scrolly__hud{
	position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--pf-mono);font-size:.6rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--pf-tinta-3);
}
.pf-scrolly__hud b{color:var(--pf-k-cl)}
.pf-scrolly__pasos{order:1;padding:0 clamp(1rem,3vw,2.4rem)}
.pf-paso{
	min-height:96svh;display:flex;flex-direction:column;justify-content:center;
	max-width:34rem;margin:0 auto;
}
.pf-paso__num{font-family:var(--pf-mono);font-size:.68rem;letter-spacing:.2em;color:var(--pf-k-cl);margin-bottom:.9rem}
.pf-paso h3{
	font-family:var(--pf-display);font-size:clamp(1.5rem,3.4vw,2.4rem);text-transform:none;
	color:#fff;line-height:1.05;margin-bottom:1rem;letter-spacing:-.02em;
}
.pf-paso p{color:var(--pf-tinta-2);font-size:1.04rem;line-height:1.7}
.pf-paso p b{color:var(--pf-tinta)}

/* --- la consola que se enciende por fases (la visual fija) -------------- */
.pf-idoc__consola{
	position:relative;z-index:2;width:min(90%,460px);
	border:1px solid var(--pf-linea-f);background:var(--pf-blanco);
	box-shadow:0 0 0 1px rgba(0,214,200,.10), var(--pf-glow);
}
.pf-idoc__consola-cab{
	display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;
	border-bottom:1px solid var(--pf-linea);font-family:var(--pf-mono);font-weight:600;
	font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-k-cl);
}
.pf-idoc__consola-b{padding:.8rem 1rem 1rem}
.pf-idoc__fase{
	display:grid;grid-template-columns:2rem 1fr auto;gap:.8rem;align-items:baseline;
	padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.07);
	opacity:.28;transition:opacity .45s,transform .45s;
}
.pf-idoc__fase i{font-style:normal;font-family:var(--pf-mono);font-size:.68rem;color:var(--pf-tinta-3)}
.pf-idoc__fase em{font-style:normal;font-family:var(--pf-body);font-size:.92rem;color:var(--pf-tinta)}
.pf-idoc__fase s{text-decoration:none;font-family:var(--pf-mono);font-size:.66rem;color:var(--pf-tinta-3)}
/* la fase activa se enciende */
.pf-scrolly[data-paso="1"] .pf-f1,
.pf-scrolly[data-paso="2"] .pf-f2,
.pf-scrolly[data-paso="3"] .pf-f3,
.pf-scrolly[data-paso="4"] .pf-f4{opacity:1;transform:translateX(4px)}
.pf-scrolly[data-paso="1"] .pf-f1 i,
.pf-scrolly[data-paso="2"] .pf-f2 i,
.pf-scrolly[data-paso="3"] .pf-f3 i,
.pf-scrolly[data-paso="4"] .pf-f4 i{color:var(--pf-k)}
.pf-scrolly[data-paso="1"] .pf-f1 s,
.pf-scrolly[data-paso="2"] .pf-f2 s,
.pf-scrolly[data-paso="3"] .pf-f3 s,
.pf-scrolly[data-paso="4"] .pf-f4 s{color:var(--pf-k-cl)}
/* las fases ya recorridas quedan tenues pero visibles */
.pf-scrolly[data-paso="2"] .pf-f1,
.pf-scrolly[data-paso="3"] .pf-f1,.pf-scrolly[data-paso="3"] .pf-f2,
.pf-scrolly[data-paso="4"] .pf-f1,.pf-scrolly[data-paso="4"] .pf-f2,.pf-scrolly[data-paso="4"] .pf-f3{opacity:.6}

.pf-idoc__barra{
	height:12px;background:#000;border:1px solid var(--pf-linea);margin-top:1rem;overflow:hidden;
}
.pf-idoc__barra i{
	display:block;height:100%;width:0;background:var(--pf-k);
	box-shadow:0 0 14px rgba(0,214,200,.6);transition:width 1.6s cubic-bezier(.2,.8,.2,1);
}
.pf-scrolly[data-paso="4"] .pf-idoc__barra i{width:var(--pct)}
.pf-idoc__consola-pie{
	font-family:var(--pf-mono);font-size:.62rem;color:var(--pf-tinta-2);margin-top:.5rem;
}

/* ---------- MOMENTO DE CITA ---------- */
.pf-idoc__cita{
	position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
	border-top:1px solid var(--pf-linea);border-bottom:1px solid var(--pf-linea);
}
.pf-idoc__cita-img{position:absolute;inset:-12% 0;will-change:transform}
.pf-idoc__cita-img img{width:100%;height:100%;object-fit:cover;max-height:none;filter:none}
.pf-idoc__cita-img::after{content:"";position:absolute;inset:0;background:rgba(6,6,7,.62)}
.pf-idoc__cita-c{position:relative;z-index:3;width:100%}
.pf-idoc__cita q{
	quotes:none;display:block;font-family:var(--pf-display);font-weight:400;text-transform:none;
	font-size:clamp(1.8rem,5vw,4rem);line-height:1.06;letter-spacing:-.02em;color:#fff;max-width:20ch;
}
.pf-idoc__cita cite{
	font-style:normal;display:block;margin-top:1.4rem;font-family:var(--pf-mono);
	font-size:.76rem;color:var(--pf-k-cl);
}
.pf-idoc__cita cite s{text-decoration:none;color:var(--pf-tinta-2);display:block;margin-top:.2rem}

/* ---------- DATO ---------- */
.pf-idoc__dato{
	padding:clamp(3rem,9vw,7rem) 0;text-align:center;border-bottom:1px solid var(--pf-linea);
}
.pf-idoc__dato .pf-kick{margin-bottom:1rem;display:block}
.pf-idoc__cifra{
	font-family:var(--pf-display);font-style:normal;font-size:clamp(4rem,18vw,13rem);
	line-height:.82;letter-spacing:-.04em;color:#fff;display:block;
	text-shadow:0 0 40px rgba(0,214,200,.28);
}
.pf-idoc__dato p{
	font-family:var(--pf-mono);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
	color:var(--pf-tinta-2);margin-top:1.4rem;
}

/* ---------- GALERÍA HORIZONTAL ---------- */
.pf-horiz{overflow:hidden;background:#060607;position:relative}
.pf-horiz__track{display:flex;will-change:transform}
.pf-panel{
	position:relative;flex:0 0 100vw;height:100svh;display:flex;align-items:flex-end;overflow:hidden;
}
.pf-panel__img{position:absolute;inset:0}
.pf-panel__img img{width:100%;height:100%;object-fit:cover;max-height:none;filter:none}
.pf-panel__img::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(to top,rgba(6,6,7,.94),rgba(6,6,7,.15) 60%,transparent);
}
.pf-panel__c{position:relative;z-index:3;padding:clamp(1.6rem,5vw,4rem);max-width:44rem}
.pf-panel__num{
	font-family:var(--pf-mono);font-size:.66rem;letter-spacing:.2em;color:var(--pf-k-cl);
	margin-bottom:.8rem;display:block;
}
.pf-panel h3{
	font-family:var(--pf-display);font-size:clamp(1.6rem,4vw,3rem);text-transform:none;
	color:#fff;line-height:1.04;margin-bottom:.8rem;letter-spacing:-.02em;
}
.pf-panel p{color:var(--pf-tinta-2);max-width:42ch;line-height:1.65}
.pf-panel--intro{
	align-items:center;background:radial-gradient(120% 90% at 30% 40%,#0e0e10,#060607);
}
.pf-panel--intro .pf-panel__c{max-width:32rem}
.pf-horiz__hud{position:absolute;top:calc(52px + 1rem);left:0;right:0;z-index:5;pointer-events:none}
.pf-horiz__hud .pf-wrap{
	display:flex;justify-content:space-between;font-family:var(--pf-mono);font-size:.6rem;
	letter-spacing:.16em;text-transform:uppercase;color:var(--pf-tinta-3);
}
.pf-horiz__hud b{color:var(--pf-k-cl)}
/* móvil / sin GSAP: se apila (el pin horizontal es incómodo al tacto) */
.pf-apila .pf-horiz__track{flex-direction:column}
.pf-apila .pf-panel{flex-basis:auto;height:auto;min-height:80svh}

/* ---------- CODA EN LIENZO CLARO ---------- */
.pf-idoc__coda{
	background:var(--pf-lectura);color:var(--pf-tinta-cl);padding:clamp(3rem,8vw,6rem) 0;
	--pf-tinta:var(--pf-tinta-cl);--pf-tinta-2:var(--pf-tinta-cl-2);--pf-tinta-3:var(--pf-tinta-cl-3);
}
.pf-idoc__coda .pf-kick{color:var(--pf-k-os);margin-bottom:.8rem;display:block}
.pf-idoc__coda-in{max-width:var(--pf-medida);margin:0 auto}
.pf-idoc__coda h2{
	font-family:var(--pf-display);font-size:clamp(1.8rem,4.4vw,3rem);color:var(--pf-tinta-cl);
	text-transform:none;line-height:1.02;margin-bottom:1.2rem;letter-spacing:-.02em;
}
.pf-idoc__coda p{font-size:1.06rem;line-height:1.74;color:var(--pf-tinta-cl-2);margin-bottom:1.05rem}
.pf-idoc__coda .pf-idoc__entrada{font-size:1.2rem;color:var(--pf-tinta-cl)}
.pf-idoc__coda blockquote{
	border-left:5px solid var(--pf-k-os);padding-left:1.1rem;margin:1.6rem 0;
	font-family:var(--pf-cond);font-weight:700;font-size:1.25rem;line-height:1.35;
	color:var(--pf-tinta-cl);font-style:normal;
}
.pf-idoc__creditos{
	max-width:var(--pf-medida);margin:2rem auto 0;padding-top:1.4rem;
	border-top:1px solid rgba(0,0,0,.14);
	display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;
	font-family:var(--pf-mono);font-size:.72rem;color:var(--pf-tinta-cl-3);
}
.pf-idoc__creditos b{
	color:var(--pf-tinta-cl);display:block;font-family:var(--pf-body);font-size:.8rem;
	margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.08em;
}
.pf-idoc__creditos i{font-style:normal;color:var(--pf-k-os)}

@media (prefers-reduced-motion: reduce){
	.pf-idoc__cover-img .pf-gl-a,.pf-idoc__cover-img .pf-gl-b,
	.pf-idoc__scroll i,.pf-idoc__chip::before{animation:none}
}