/* Visuales a hoja completa de cada proyecto */
/* ---- WhatsApp (JM) ---- */
.wa{position:absolute;inset:0;display:flex;flex-direction:column;background:#0b141a}
.wa-head{display:flex;align-items:center;gap:2.6cqw;padding:5cqw 5cqw 3cqw;background:#1f2c34;z-index:2}
.wa-av{width:9cqw;height:9cqw;border-radius:50%;background:linear-gradient(135deg,#e9edef,#b8c1c6);color:#0b141a;display:grid;place-items:center;font-weight:600;font-size:3.2cqw}
.wa-name{display:grid;gap:.5cqw;font-size:3.4cqw;font-weight:500;color:#e9edef}
.wa-name small{font-size:max(11px,2.4cqw);font-weight:400;color:#8696a0;min-height:1.2em}
.wa-name small.typing{color:#25d366}
.wa-body{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 1.5px) 0 0/4cqw 4cqw,#0b141a}
.wa-list{position:absolute;left:0;right:0;bottom:0;padding:3cqw 4cqw 4cqw;display:flex;flex-direction:column;gap:1.8cqw;transition:transform .45s var(--ease)}
.msg{max-width:78%;font-size:max(11px,3cqw);line-height:1.4;padding:1.8cqw 2.6cqw 2.2cqw;border-radius:2.2cqw;color:#e9edef;position:relative;animation:pop .35s var(--ease) both}
.msg time{display:block;text-align:right;font-size:1.9cqw;color:rgba(233,237,239,.55);margin-top:.6cqw}
.msg.in{background:#202c33;align-self:flex-start;border-top-left-radius:.6cqw}
.msg.out{background:#005c4b;align-self:flex-end;border-top-right-radius:.6cqw}
.msg.sys{align-self:center;background:#182229;color:#ffd279;font-family:var(--f-mono);font-size:max(11px,2.2cqw);letter-spacing:.06em;border-radius:999px;padding:1.2cqw 2.6cqw;text-transform:uppercase}
.dots{display:flex;gap:1cqw;padding:2.6cqw 3cqw}
.dots i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#8696a0;animation:bounce 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-1cqw);opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(2cqw) scale(.96)}to{opacity:1;transform:none}}
.wa-input{display:flex;gap:2cqw;padding:2.6cqw 3cqw 4cqw;background:#0b141a}
.wa-input span{flex:1;height:7cqw;border-radius:999px;background:#2a3942}
.wa-input i{width:7cqw;height:7cqw;border-radius:50%;background:#00a884}
/* flujo animado */
.flow{width:100%;height:auto;display:block}
.flow text{font-family:var(--f-mono);font-size:7px;fill:var(--pink)}
.flow .nd{fill:#1d1b18;stroke:rgba(236,228,212,.22)}
.flow .nd.hi{fill:var(--acc);stroke:none}
.flow .nd.hi+text{fill:#0b141a}
.flow path{stroke:rgba(236,228,212,.25);stroke-width:1;fill:none;stroke-dasharray:3 3}
.page.on .flow path{animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-12}}

/* ---- Media Cuadra ---- */
.mc{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#2b6e52,#123326 70%,#0b1f17);display:grid;place-items:center}
.mc::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 6cqw),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 6cqw)}
.phone{position:relative;z-index:1;width:56cqw;aspect-ratio:390/844;border-radius:7cqw;border:1.6cqw solid #0c0c0c;background:#0c0c0c;box-shadow:0 5cqw 9cqw rgba(0,0,0,.55),0 0 0 .4cqw #2a2a2a;overflow:hidden;margin-top:-10cqw}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.phone img:first-child{opacity:1}
.page.on .phone img{animation:cycle3 10.5s infinite}
.page.on .phone img:nth-child(2){animation-delay:3.5s}
.page.on .phone img:nth-child(3){animation-delay:7s}
@keyframes cycle3{0%{opacity:0;transform:scale(1.04)}5%,33%{opacity:1;transform:none}38%,100%{opacity:0}}
.page.on .phone img:first-child{opacity:0}
.mc-pins{position:absolute;inset:0;z-index:6;pointer-events:none}
.pin.b span{bottom:auto;top:115%;transform:translate(var(--sx,-50%),-1.2cqw)}
.pin.b.open span,.pin.b:hover span,.pin.b:focus-visible span{transform:translate(var(--sx,-50%),0)}
.pin{position:absolute;pointer-events:auto;width:7cqw;height:7cqw;margin:-3.5cqw 0 0 -3.5cqw;background:none;border:0;padding:0;display:grid;place-items:center;cursor:pointer}
.pin i{width:3cqw;height:3cqw;border-radius:50%;background:#7fe0b4;box-shadow:0 0 0 0 rgba(127,224,180,.6);animation:ping 2.4s infinite}
.pin.open i,.pin:hover i{background:#fff}
.pin span{position:absolute;left:var(--sl,50%);bottom:115%;width:max-content;max-width:40cqw;transform:translate(var(--sx,-50%),1.2cqw);background:#f4efe6;color:#123326;font-family:var(--f-body);font-size:max(11px,2.6cqw);line-height:1.35;text-align:left;padding:1.5cqw 2.2cqw;border-radius:1.4cqw;box-shadow:0 2cqw 4cqw rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.pin.l span{--sl:0;--sx:0}.pin.r span{--sl:100%;--sx:-100%}
.pin.open span,.pin:hover span,.pin:focus-visible span{opacity:1;transform:translate(var(--sx,-50%),0)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(127,224,180,.55)}80%,100%{box-shadow:0 0 0 5cqw rgba(127,224,180,0)}}

/* ---- Saga de videojuegos (recreación) ---- */
.saga{position:absolute;inset:0;display:flex;flex-direction:column;gap:3.4cqw;padding:9cqw 6cqw 22cqw;background:radial-gradient(ellipse at 50% 0%,#3a1a10,#140c09 60%,#0a0706);color:#f4e9dc}
.saga::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.saga-head{margin:0;font-family:var(--f-mono);font-size:2.6cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.saga-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw}
.saga-tile{position:relative;display:grid;gap:.8cqw;padding:2.6cqw 3cqw;border:1px solid rgba(255,90,42,.28);border-radius:1.6cqw;background:rgba(255,90,42,.06);font-size:max(11px,2.7cqw);line-height:1.3}
.saga-tile:last-child{grid-column:1/-1}
.saga-tile b{font-family:var(--f-mono);font-weight:500;font-size:2.2cqw;color:rgba(244,233,220,.5)}
.page.on .saga-tile{animation:sagaPick 10.5s infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes sagaPick{0%,13%{background:var(--acc);border-color:var(--acc);color:#1a0b06;transform:scale(1.03)}15%,100%{background:rgba(255,90,42,.06);border-color:rgba(255,90,42,.28);color:#f4e9dc;transform:none}}
.saga-dash{margin-top:auto;display:grid;gap:1.6cqw;padding:3cqw;border-radius:1.6cqw;background:rgba(0,0,0,.35);border:1px solid rgba(244,233,220,.12)}
.saga-dash small{font-family:var(--f-mono);font-size:2cqw;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,233,220,.6)}
.saga-bars{display:flex;align-items:flex-end;gap:2cqw;height:14cqw}
.saga-bars i{flex:1;height:var(--h);border-radius:.8cqw .8cqw 0 0;background:linear-gradient(180deg,var(--acc),#a8381a);transform-origin:bottom;transform:scaleY(.15)}
.page.on .saga-bars i{animation:barUp 1s var(--ease) forwards;animation-delay:calc(var(--i) * 120ms + 300ms)}
@keyframes barUp{to{transform:scaleY(1)}}
.txt.more{color:var(--psoft)}

/* ---- Landing recreada ---- */
.lp-site{background:#0c0f16}
.lp{display:grid;gap:9cqw;padding:0 5cqw 9cqw;background:radial-gradient(ellipse at 80% 0%,rgba(79,140,255,.18),transparent 55%),#0c0f16;color:#e6ebf5;font-family:var(--f-body);transform:translateY(0)}
.page.on .lp{animation:siteScroll 22s var(--ease) infinite}
.lp-nav{display:flex;justify-content:space-between;align-items:center;padding-top:4cqw}
.lp-logo{width:14cqw;height:3.4cqw;border-radius:.8cqw;background:linear-gradient(90deg,#e6ebf5 30%,rgba(230,235,245,.35) 30%)}
.lp-btn{display:inline-block;justify-self:start;background:var(--acc);color:#071022;font-weight:600;font-size:2.6cqw;padding:2cqw 3.6cqw;border-radius:1cqw}
.lp-btn.sm{font-size:2cqw;padding:1.2cqw 2.2cqw}
.lp-hero{display:grid;gap:3.4cqw}
.lp-pill{justify-self:start;font-family:var(--f-mono);font-size:1.9cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);border:1px solid rgba(79,140,255,.45);border-radius:999px;padding:.8cqw 2.2cqw}
.lp-h{margin:0;font-family:var(--f-body);font-weight:700;font-size:6.6cqw;line-height:1.08;letter-spacing:-.02em}
.lp-h em{font-style:normal;color:var(--acc)}
.lp-hero p{margin:0;font-size:2.9cqw;line-height:1.5;color:rgba(230,235,245,.7)}
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding-top:3cqw;border-top:1px solid rgba(230,235,245,.12)}
.lp-stats b{display:block;font-size:4cqw;color:var(--acc)}
.lp-stats span,.lp-steps span,.lp-cards span{font-size:2.2cqw;color:rgba(230,235,245,.6);line-height:1.35}
.lp-sec{display:grid;gap:3cqw}
.lp-sec small{font-family:var(--f-mono);font-size:1.9cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.lp-sec h4{margin:0;font-size:4.6cqw;line-height:1.15;font-weight:700}
.lp-quotes{display:grid;gap:2cqw}
.lp-quotes p{margin:0;font-size:2.6cqw;padding:2.4cqw 3cqw;border-radius:1.2cqw;background:rgba(255,255,255,.04);border-left:.6cqw solid var(--acc)}
.lp-steps{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw}
.lp-steps div,.lp-cards div{display:grid;gap:.8cqw;padding:2.6cqw;border-radius:1.2cqw;background:rgba(255,255,255,.04);border:1px solid rgba(230,235,245,.08)}
.lp-steps b{font-family:var(--f-mono);font-size:2.2cqw;color:var(--acc)}
.lp-steps strong,.lp-cards strong{font-size:2.8cqw}
.lp-cards{display:grid;gap:2cqw}
.lp-end{justify-items:center;text-align:center;padding:6cqw 0;border-radius:2cqw;background:linear-gradient(135deg,rgba(79,140,255,.22),rgba(79,140,255,.05))}
.lp-end .lp-btn{justify-self:center}

/* ---- Navegador recreado ---- */
.site{position:absolute;inset:0;display:flex;flex-direction:column;background:#101110}
.chrome{display:flex;align-items:center;gap:1.2cqw;padding:5cqw 4cqw 2.4cqw;background:#1b1c19}
.chrome i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:rgba(255,255,255,.22)}
.chrome span{margin-left:2cqw;flex:1;font-family:var(--f-mono);font-size:2.1cqw;background:rgba(255,255,255,.07);border-radius:999px;padding:.8cqw 2.4cqw;color:rgba(236,228,212,.7)}
.viewport{flex:1;overflow:hidden;position:relative}
/* captura real de un sitio que baja sola y vuelve a subir */
.viewport{container-type:size}
.shot .viewport img{display:block;width:100%;height:auto;transform:translateY(0)}
.page.on .shot .viewport img{animation:siteScroll 22s var(--ease) infinite}
@keyframes siteScroll{0%,8%{transform:translateY(0)}46%,56%{transform:translateY(calc(-100% + 100cqh))}94%,100%{transform:translateY(0)}}

/* ---- Terminal (IA) ---- */
.term{position:absolute;inset:0;background:#0e0d0c;display:flex;flex-direction:column}
.term .chrome{background:#191714}
.term-body{flex:1;padding:4cqw 5cqw 24cqw;font-family:var(--f-mono);font-size:2.55cqw;line-height:1.75;color:#d9d0c1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.term-body p{margin:0;white-space:pre-wrap;word-break:break-word}
.term-body .u{color:#f0d29c}.term-body .s{color:#9d9384}.term-body .ok{color:#8fd19e}.term-body .t{color:#c8a36a}
.caret{display:inline-block;width:1.4cqw;height:2.6cqw;background:#f0d29c;vertical-align:-.4cqw;animation:blink 1s steps(1) infinite}

/* ---- IMDb ---- */
.im{position:absolute;inset:0;background:#0a0a0a;display:flex;flex-direction:column}
.im-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:4cqw;align-content:start}
.poster{position:relative;aspect-ratio:2/3;border-radius:1.2cqw;background:linear-gradient(165deg,var(--c1),var(--c2));overflow:hidden}
.poster::after{content:"";position:absolute;left:12%;right:12%;bottom:22%;height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.25);box-shadow:0 -3cqw 0 -.3cqw rgba(255,255,255,.12)}
.poster b{position:absolute;left:1.4cqw;top:1.4cqw;font-family:var(--f-mono);font-weight:500;font-size:2.2cqw;background:#f5c518;color:#111;padding:.5cqw 1.2cqw;border-radius:.7cqw;transform:scale(0);transform-origin:left top}
.page.on .poster b{animation:badge .5s var(--ease) forwards;animation-delay:calc(var(--i) * 160ms + 500ms)}
@keyframes badge{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}