:root{color-scheme:dark;--bg:#000;--ink:#fff;--soft:#B4B4C4;--blue:#6400ff;--vt:#6400ff;--sun:#fff;--rose:#6400ff;--card:#0D0D12;--line:#2A2A36;--d:'Poppins','Arial Black',sans-serif;--b:'Instrument Sans',system-ui,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:110px;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--b)}
a{color:inherit}
:focus-visible{outline:3px solid var(--vt);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--d);line-height:1.1;margin:0;letter-spacing:-.025em}
section{padding:88px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;margin-bottom:32px}
.hero{padding:64px 0 80px}
.hero h1{color:var(--blue);font-size:clamp(2.3rem,9vw,6.5rem);overflow-wrap:anywhere;font-weight:800;margin:0 0 8px}
.role{font:500 clamp(1.2rem,3vw,1.7rem)/1.3 var(--d);margin:0 0 6px}
.sub{color:var(--soft);margin:0 0 28px}
.lead{max-width:56ch;font-size:1.2rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-radius:20px;overflow:hidden}
.tile{padding:28px 24px 32px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.tile b{font:800 1.6rem var(--d)}
.tile span{font-size:.95rem}
.t1{background:var(--blue);color:#fff}.t2{background:#fff;color:#000}.t3{background:var(--rose);color:#000}
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.about p{margin:0 0 18px;max-width:60ch}
.stat{font:800 clamp(3rem,8vw,5.5rem)/1 var(--d);color:var(--vt)}
.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.skills h3{font-size:1.3rem;font-weight:800;padding-bottom:12px;margin-bottom:14px;border-bottom:4px solid var(--blue)}
.skills div:nth-child(2) h3{border-color:var(--sun)}.skills div:nth-child(3) h3{border-color:var(--rose)}.skills div:nth-child(4) h3{border-color:var(--ink)}
ul{list-style:none;margin:0;padding:0}li{padding:4px 0;color:var(--soft)}
.job{display:grid;grid-template-columns:200px 1fr;gap:12px 32px;padding:26px 0;border-top:1px solid var(--line)}
.job:first-of-type{border-top:0}
.job time{color:var(--soft);font-size:.95rem}
.job h3{font-size:1.35rem;font-weight:800;margin-bottom:6px}
.job small{display:block;color:var(--soft);font-size:.98rem;margin-bottom:8px}
.job p{margin:0;max-width:62ch}
.block{margin-bottom:64px}
.block h3{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin-bottom:6px}
.tags{color:var(--soft);margin:0 0 10px;font-weight:500}
.block>p{max-width:58ch;margin:0 0 22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.slot{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;text-align:center;padding:16px;color:var(--soft);font-size:.95rem;background:var(--card)}
.slot.v{aspect-ratio:16/9}
.case h4{font:800 1.15rem var(--d);margin:14px 0 8px}.case dl{margin:0}.case dt{font-weight:600;font-size:.9rem;margin-top:8px}.case dd{margin:0;color:var(--soft);font-size:.95rem}
header{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;z-index:5;pointer-events:none}
nav{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;margin:0 auto;gap:22px;padding:7px 7px 7px 26px;background:rgba(13,13,18,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;font-size:.92rem;font-weight:500}
nav .mark{font:700 1.2rem var(--d);text-decoration:none}nav .mark i{font-style:normal;color:var(--vt)}
nav .links{display:flex;gap:26px}nav .links a{text-decoration:none;color:var(--soft);white-space:nowrap}nav .links a:hover{color:#fff}
.navbtn{background:var(--blue);color:#fff;text-decoration:none;font-weight:600;padding:11px 22px;border-radius:999px;white-space:nowrap}.navbtn:hover{filter:brightness(1.15)}
.eyebrow{display:block;font:600 .8rem var(--d);letter-spacing:.14em;text-transform:uppercase;color:var(--vt);margin:0 0 28px}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font:500 .78rem var(--d);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
.hi{font:500 clamp(1.1rem,3vw,1.5rem) var(--d);color:var(--soft);margin:0 0 6px}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;max-width:860px;gap:clamp(12px,2vw,24px);margin:8px auto 0}
.tabs .tab{grid-column:span 2;padding:18px 12px;text-align:center;white-space:nowrap}
.tabs .tab:nth-child(4){grid-column:2/4}.tabs .tab:nth-child(5){grid-column:4/6}
@media(max-width:600px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}.tabs .tab,.tabs .tab:nth-child(4),.tabs .tab:nth-child(5){grid-column:auto;padding:14px 8px;white-space:normal}.tabs .tab:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}}
.tab{font:600 1rem var(--d);color:#fff;background:transparent;border:1.5px solid var(--blue);border-radius:999px;padding:18px 36px;cursor:pointer;transition:background .2s}
.tab:hover,.tab.on{background:var(--blue)}
.cdesc{max-width:62ch;margin:0 0 52px;font-size:1.1rem}
.card{display:block;text-decoration:none;color:inherit}
.thumb{position:relative;aspect-ratio:4/3;border:2px dashed var(--line);border-radius:18px;background:var(--card);display:grid;place-items:center;text-align:center;padding:12px;color:var(--soft);font-size:.95rem;overflow:hidden}
.thumb.v{aspect-ratio:16/9}
.thumb::after{content:"";position:absolute;inset:0;background:var(--blue);opacity:0;transition:opacity .25s}
.card:hover .thumb::after,.card:focus-visible .thumb::after{opacity:.55}
.card h3{font-size:1.25rem;font-weight:800;margin:16px 0 4px}
.card p{margin:0;font-size:.95rem}
#detalle{display:none;padding-top:140px;border-bottom:0}
.det #detalle{display:block}
.det main>section:not(#detalle){display:none}
#detalle h1{font-size:clamp(2rem,6vw,4rem);margin:0 0 10px}
.back{display:inline-block;margin-bottom:28px;color:var(--soft);text-decoration:none;font-weight:500}.back:hover{color:#fff}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:36px 0}
.dgrid h4{font:600 .8rem var(--d);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 8px}.dgrid p{margin:0;color:var(--soft)}
@media(max-width:820px){.dgrid{grid-template-columns:1fr}}
@media(max-width:520px){.tab{padding:14px 22px}}
.btns .btn{margin-top:0}
.btn2{display:inline-block;padding:14px 26px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;font-weight:600}.btn2:hover{border-color:var(--vt)}
.scroll{display:block;margin-top:56px;font:500 .78rem var(--d);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-decoration:none}
.hero{padding-top:150px!important}
@media(max-width:760px){nav{gap:16px;padding:6px 6px 6px 20px;font-size:.88rem}nav .links{gap:16px}.navbtn{padding:10px 18px}}
.btn{display:inline-block;margin-top:22px;padding:14px 24px;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600}
.btn:hover{filter:brightness(1.1)}
.contact .lead{margin-bottom:28px}
.contact a.big{display:flex;align-items:center;gap:.5em;font:400 clamp(1.025rem,3.2vw,1.875rem) var(--d);text-decoration:none;padding:8px 0;overflow-wrap:anywhere}
.contact a.big .ci{display:inline-grid;place-items:center;flex:0 0 auto;width:1.9em;height:1.9em;border-radius:50%;border:1px solid rgba(100,0,255,.5);background:rgba(100,0,255,.12);font-size:.8em;font-style:normal;color:#fff;transition:background .3s,box-shadow .3s}
.contact a.big:hover .ci{background:#6400ff;box-shadow:0 0 24px rgba(100,0,255,.7)}
.contact a.big span{min-width:0}
.contact a.big:hover{color:var(--vt)}
footer{padding:28px 0;color:var(--soft);font-size:.9rem}
@media(max-width:820px){.tiles,.grid,.about{grid-template-columns:1fr}.skills{grid-template-columns:1fr 1fr}.job{grid-template-columns:1fr}section{padding:64px 0}}
@media(max-width:480px){.skills{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Fondo, resplandor y animaciones ===== */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(65% 45% at 50% 0%,rgba(100,0,255,.20),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.btn,.btn2,.tab,.navbtn,.skills>div,.dgrid>div{position:relative;overflow:hidden;transition:box-shadow .3s,border-color .3s,background .3s,filter .3s}
.btn:hover,.navbtn:hover,.tab:hover,.tab.on{box-shadow:0 0 0 1px rgba(100,0,255,.9),0 0 30px rgba(100,0,255,.65)}
.btn2:hover{box-shadow:0 0 22px rgba(100,0,255,.5)}
.skills>div{padding:26px 24px 22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.skills>div:hover{border-color:var(--blue);box-shadow:0 0 34px rgba(100,0,255,.35)}
.card:hover .thumb{border-color:var(--blue);box-shadow:0 0 40px rgba(100,0,255,.5)}
.thumb{transition:box-shadow .3s,border-color .3s}
.btn::before,.btn2::before,.tab::before,.navbtn::before,.skills>div::before,.thumb::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(170px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 65%)}
.btn:hover::before,.btn2:hover::before,.tab:hover::before,.navbtn:hover::before,.skills>div:hover::before,.card:hover .thumb::before{opacity:1}
.skills>div::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(100,0,255,.28),transparent 65%)}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease,box-shadow .3s,border-color .3s}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ===== Herramientas ===== */
.about{align-items:center}
.tools-title{font:700 1.35rem var(--d);margin:0 0 30px}
.tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,2.6vw,28px);max-width:560px}
.tool{position:relative;isolation:isolate;aspect-ratio:1;border-radius:24%;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tool:nth-child(even){--r:6deg}
.tool::before{content:"";position:absolute;left:-8%;right:-8%;bottom:-20%;height:65%;border-radius:50%;background:var(--g);filter:blur(22px);opacity:.5;z-index:-1;transition:opacity .35s,filter .35s}
.tool img{position:relative;display:block;width:100%;height:100%;border-radius:24%;box-shadow:0 14px 24px -10px rgba(0,0,0,.6)}
.tool>i{position:absolute;inset:0;z-index:2;border-radius:24%;pointer-events:none;background:radial-gradient(90% 62% at 50% 104%,var(--c) 0%,transparent 72%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%);mix-blend-mode:screen;opacity:.9;transition:opacity .35s}
.tool::after{content:"";position:absolute;inset:0;z-index:3;border-radius:24%;pointer-events:none;padding:1.5px;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.18) 35%,rgba(255,255,255,.06) 65%,rgba(255,255,255,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tool:hover,.tool:focus-visible{transform:translateY(-8px) rotate(var(--r,-6deg)) scale(1.08)}
.tool:hover::before,.tool:focus-visible::before{opacity:.85;filter:blur(26px)}
.tool:hover>i,.tool:focus-visible>i{opacity:1}
@media(max-width:520px){.tools{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.tool,.tool::before{transition:none}.tool:hover,.tool:focus-visible{transform:none}}

/* ===== Detalle Social media ===== */
.sdet{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:center}
.sdet h1{color:var(--blue);font-size:clamp(2.6rem,8vw,5.5rem);line-height:1;margin:0 0 24px;overflow-wrap:anywhere}
.pill{display:inline-block;background:var(--blue);color:#fff;font:600 1rem var(--d);padding:8px 24px;border-radius:999px;margin:0 0 20px;box-shadow:0 0 24px rgba(100,0,255,.45)}
.stext p{max-width:46ch;margin:0 0 14px;color:var(--ink)}
.stools{display:flex;gap:20px;flex-wrap:wrap;margin-top:4px}
.tool.sm{width:56px;flex:none}
.tool.sm::before{filter:blur(14px)}
.smock .thumb{aspect-ratio:4/5;border-radius:28px}
@media(max-width:820px){.sdet{grid-template-columns:1fr}}

/* ===== Proyectos desplegables ===== */
.ppanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1)}
.ppanel.open{grid-template-rows:1fr}
.ppanel>.pin{min-height:0;overflow:hidden;padding:0 44px 52px;margin:0 -44px -52px}
@media(max-width:1240px){.ppanel>.pin{padding:0 20px 52px;margin:0 -20px -52px}}
.proj{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,72px);align-items:center;padding:56px 12px 24px;animation:pup .7s both}
.proj+.proj{border-top:1px solid var(--line);margin-top:32px}
@keyframes pup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ptitle{color:var(--blue);font:800 clamp(2.2rem,6.5vw,4.6rem)/1 var(--d);letter-spacing:-.025em;margin:0 0 24px;overflow-wrap:anywhere}
.proj p{max-width:46ch;margin:0 0 14px;color:var(--ink)}
.pmedia .thumb{aspect-ratio:4/5;border-radius:28px}
.pmedia .thumb.v{aspect-ratio:16/9}
@media(max-width:820px){.proj{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.proj{animation:none}.ppanel{transition:none}}

/* ===== Visor 3D del folleto ===== */
.proj.wide{grid-template-columns:1fr;gap:36px;align-items:start}
.fb{width:100%;max-width:1000px;margin:0 auto;outline:none}
.fb:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:24px}
.fbstage{position:relative;overflow:hidden;display:grid;place-items:center;aspect-ratio:1.75/1;border:1px solid var(--line);border-radius:24px;background:radial-gradient(70% 60% at 50% 105%,rgba(100,0,255,.28),transparent 70%),var(--card);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.fbstage.zoomed{touch-action:none;cursor:move}
.fbzoom{width:94%;transform-origin:center;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.fb.port .fbbook{aspect-ratio:1.396/1}
.fb.port .fbzoom{width:72%}
.fbbook{position:relative;width:100%;aspect-ratio:2/1;perspective:2600px;transition:transform .9s cubic-bezier(.645,.045,.355,1)}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.645,.045,.355,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.face.pf{border-radius:2px 8px 8px 2px}
.face.pb{transform:rotateY(180deg);border-radius:8px 2px 2px 8px}
.face::after{content:"";position:absolute;inset:0;pointer-events:none}
.face.pf::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 9%)}
.face.pb::after{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,0) 9%)}
.face img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fbbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.fbbar button{font:600 .95rem var(--d);color:#fff;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;min-width:44px;height:44px;padding:0 16px;cursor:pointer;transition:box-shadow .3s,border-color .3s}
.fbbar button:hover:not(:disabled){border-color:var(--blue);box-shadow:0 0 22px rgba(100,0,255,.5)}
.fbbar button:disabled{opacity:.35;cursor:default}
.fbl{min-width:150px;text-align:center;font:600 .95rem var(--d)}
.fbz{min-width:52px;text-align:center;color:var(--soft);font-size:.9rem}
.fbsep{width:1px;height:26px;background:var(--line);margin:0 6px}
.proj .fbhint{max-width:none;margin:14px 0 0;color:var(--soft);font-size:.9rem;text-align:center}
@media(max-width:640px){.fbstage{aspect-ratio:1/1.05}.fbl{min-width:120px}}
@media(prefers-reduced-motion:reduce){.leaf,.fbbook,.fbzoom{transition:none}}

.ptitle.long{color:#fff;font-size:clamp(1.9rem,4.8vw,3.3rem);line-height:1.08}
.proj.wide .ptext p{max-width:72ch}
.vslot{width:100%;max-width:1000px;margin:0 auto}.vslot+.vslot{margin-top:28px}.eyebrow.psub{color:#b08cff}
.ring{--w:300px;--p:1600px;position:relative;width:100%}
.ringwrap{width:100%;max-width:1200px;margin:0 auto}
.shead{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.shead .ptext{width:100%;min-width:0}
.proj.wide .shead .ptext p{max-width:none}
.vcar{position:relative;width:100%;max-width:1000px;margin:0 auto;padding:0 64px 34px}
.vview{overflow:hidden;border-radius:20px}
.vtrack{display:flex;transition:transform .6s cubic-bezier(.22,.8,.24,1)}
.vitem{flex:0 0 100%;min-width:0}
.vnav{position:absolute;top:calc(50% - 17px);width:48px;height:48px;margin-top:-24px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;display:grid;place-items:center;cursor:none;transition:background .3s,box-shadow .3s,transform .3s}
.vnav:hover{background:#6400ff;box-shadow:0 0 28px rgba(100,0,255,.7);transform:scale(1.08)}
.vnav.prev{left:0}.vnav.next{right:0}
.vdots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px}
.vdots button{width:30px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.2);cursor:none;transition:background .3s,width .3s}
.vdots button.on{background:#6400ff;width:44px;box-shadow:0 0 12px rgba(100,0,255,.8)}
@media(max-width:700px){.vcar{padding:0 0 34px}.vnav{top:calc(50% - 17px);width:40px;height:40px;margin-top:-20px;background:rgba(0,0,0,.55)}.vnav.prev{left:8px}.vnav.next{right:8px}}
@media(hover:none),(pointer:coarse){.vnav,.vdots button{cursor:pointer}}
.egrid:not(.estory) img,img.clk{cursor:zoom-in;transition:transform .35s cubic-bezier(.22,.8,.24,1),box-shadow .35s}
.egrid:not(.estory) img:hover,img.clk:hover{transform:translateY(-4px);box-shadow:0 0 50px rgba(100,0,255,.35)}
.egrid:not(.estory) img:focus-visible,img.clk:focus-visible{outline:2px solid #6400ff;outline-offset:3px}
.lbx{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:3vmin;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;cursor:zoom-out}
.lbx.on{opacity:1;visibility:visible;transition:opacity .3s}
.lbx img{max-width:94vw;max-height:94vh;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 0 80px rgba(100,0,255,.35);transform:scale(.92);transition:transform .35s cubic-bezier(.22,.8,.24,1)}
.lbx.on img{transform:none}
html.lbo{overflow:hidden}
.pgrid{display:grid;grid-template-columns:1fr 1.125fr 1.125fr;grid-template-rows:auto auto;gap:clamp(12px,2vw,24px);max-width:1000px;margin:0 auto clamp(12px,2vw,24px)}
.pgrid img,.pbanner{width:100%;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 40px rgba(100,0,255,.12);background:#0b0b10}
.pgrid .gp1{grid-column:1;grid-row:1;aspect-ratio:1/1;object-fit:cover}.pgrid .gp2{grid-column:1;grid-row:2;aspect-ratio:1/1;object-fit:cover}
.pgrid .gs1{grid-column:2;grid-row:1/3;height:100%;object-fit:cover}.pgrid .gs2{grid-column:3;grid-row:1/3;height:100%;object-fit:cover}
.pbanner{max-width:1000px;margin:0 auto;aspect-ratio:2/1;object-fit:cover}
@media(max-width:640px){.pgrid{grid-template-columns:1fr 1fr;max-width:480px}.pgrid .gp1{grid-column:1;grid-row:1}.pgrid .gp2{grid-column:2;grid-row:1}.pgrid .gs1{grid-column:1;grid-row:2;height:auto;aspect-ratio:9/16}.pgrid .gs2{grid-column:2;grid-row:2;height:auto;aspect-ratio:9/16}}
.egrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin:0 auto 24px;max-width:1000px}
.egrid img,.egrid video{width:100%;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 40px rgba(100,0,255,.12);background:#0b0b10}
.egrid img{aspect-ratio:1/1;object-fit:cover}.egrid video{aspect-ratio:9/16;object-fit:cover}
.estory{margin-bottom:0}
@media(max-width:640px){.egrid{grid-template-columns:1fr;max-width:420px}}
.avhead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:36px}
.avhead{grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr)}.avhead .ptitle{font-size:clamp(1.9rem,3.6vw,3rem);white-space:nowrap}@media(max-width:700px){.avhead .ptitle{white-space:normal}}.avhead .ptext{min-width:0}.avhead .ptext p{max-width:none}
.avbox{border:1px solid rgba(100,0,255,.4);border-radius:24px;padding:24px 26px;background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 40px rgba(100,0,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}
.avbox h4{font:600 1rem var(--d);color:#b08cff;margin:0 0 18px}
.avrow{padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}.avrow:first-of-type{border-top:0;padding-top:0}
.avrow small{display:block;font-size:.8rem;color:rgba(255,255,255,.55);margin-bottom:6px}
.avrow b{font:600 1.05rem var(--d);color:#fff}
.avrow .stools{margin-top:8px;gap:14px}
@media(max-width:860px){.avhead{grid-template-columns:1fr}}
.iaflow{margin-top:8px}

.iahero{margin-bottom:clamp(40px,6vw,72px)}.vslot.iahero{max-width:none}

.pgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:18px}
.pc{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pc .sn{font:600 clamp(2.4rem,4.4vw,3.6rem)/1 var(--d);color:#b08cff;margin-bottom:16px}
.pc h5{font:600 clamp(1.2rem,2vw,1.6rem) var(--d);margin:0 0 12px;color:#fff}
.pc p{margin:0;color:rgba(255,255,255,.75);line-height:1.7}
.pc-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(24px,4vw,56px);align-items:center}
.pc-end{align-items:center}.pc-end .sn{margin-bottom:12px}.pc-end h5{margin:0}
.pc-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.pc-m figure{margin:0;min-width:0}.pc-m img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:60% 50%;border-radius:14px}
.pc-m figcaption{margin-top:10px;font-size:.85rem;color:rgba(255,255,255,.6);text-align:center}
@media(max-width:860px){.pgrid2{grid-template-columns:1fr}.pc-wide{grid-template-columns:1fr}}
@media(max-width:520px){.pc-m{gap:8px}.pc-m figcaption{font-size:.75rem}}

.totabs{position:fixed;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);z-index:60;display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(20,10,40,.55);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);color:#fff;font:600 .92rem var(--d);cursor:pointer;box-shadow:0 0 30px rgba(100,0,255,.35),inset 0 1px 0 rgba(255,255,255,.18);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s,background .25s,box-shadow .25s}
.totabs.on{opacity:1;transform:none;pointer-events:auto}
.totabs:hover,.totabs:focus-visible{background:#6400ff;box-shadow:0 0 38px rgba(100,0,255,.8)}
.totabs svg{width:18px;height:18px;transition:transform .25s}.totabs:hover svg{transform:translateY(-3px)}
@media(max-width:600px){.totabs{padding:12px 16px 12px 13px;font-size:.85rem}}
.proj{scroll-margin-top:96px}
.mpgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:18px}
.mpc{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(16px,2vw,24px);background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;gap:18px;min-width:0}
.mpc .vcar{max-width:none;padding:0 0 34px}
.mpc .vnav{z-index:3;width:40px;height:40px;margin-top:-20px;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.4)}.mpc .vnav:hover{background:#6400ff}.mpc .vnav.prev{left:10px}.mpc .vnav.next{right:10px}
.mpv{padding-bottom:34px}.mpv .pvid{display:block;width:100%;border-radius:20px}
.mplink{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font:600 .95rem var(--d);color:#fff;text-decoration:none;padding:12px 22px;border-radius:999px;border:1.5px solid rgba(100,0,255,.7);transition:background .25s,box-shadow .25s}
.mplink:hover,.mplink:focus-visible{background:#6400ff;box-shadow:0 0 28px rgba(100,0,255,.6)}
.mplink svg{transition:transform .25s}.mplink:hover svg{transform:translateX(4px)}
@media(max-width:860px){.mpgrid{grid-template-columns:1fr}}

.pgrid2.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-m.mos{grid-template-columns:.9fr 1fr;grid-template-rows:auto auto;align-items:stretch}
.pc-m.mos figure{min-height:0}.pc-m.mos img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.pc-m.mos .m1,.pc-m.mos .m2{grid-column:1}.pc-m.mos .m1 img,.pc-m.mos .m2 img{aspect-ratio:16/9}
.pc-m.mos .m3{grid-column:2;grid-row:1/3}
.mpgrid.one{grid-template-columns:1fr}

.audgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:8px}
.aud{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:clamp(20px,2.4vw,30px);background:rgba(255,255,255,.04);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;gap:18px;min-width:0;transition:border-color .3s,box-shadow .3s}
.aud.on{border-color:rgba(100,0,255,.7);box-shadow:0 0 44px rgba(100,0,255,.22),inset 0 1px 0 rgba(255,255,255,.08)}
.aud .an{font:600 clamp(2rem,3.2vw,2.6rem)/1 var(--d);color:#6400ff}
.aud .ak{display:block;font:500 .8rem var(--d);color:rgba(255,255,255,.55);margin-bottom:6px}
.aud h5{font:600 clamp(1.1rem,1.6vw,1.35rem) var(--d);margin:0;color:#fff}
.aud .ar{display:flex;align-items:center;gap:16px}
.aplay{flex:none;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(100,0,255,.8);background:#6400ff;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 26px rgba(100,0,255,.5);transition:transform .25s,box-shadow .25s}
.aplay:hover,.aplay:focus-visible{transform:scale(1.08);box-shadow:0 0 38px rgba(100,0,255,.8)}
.aplay svg{width:22px;height:22px}.aplay .ip{display:none}.aud.pl .aplay .ia{display:none}.aud.pl .aplay .ip{display:block}
.awave{flex:1;min-width:0;height:56px;display:flex;align-items:center;gap:2px;cursor:pointer;touch-action:none}
.awave i{flex:1;border-radius:2px;background:rgba(255,255,255,.22);min-height:4px;transition:background .15s}
.awave i.f{background:#6400ff}
.aud.pl .awave i.f:last-of-type{box-shadow:0 0 8px #6400ff}
.atime{display:flex;justify-content:space-between;font:500 .82rem var(--d);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
@media(max-width:1000px){.audgrid{grid-template-columns:1fr}.aud{flex-direction:column}}
.mpc .fbwrap{margin:0}
@media(max-width:1000px){.pgrid2.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.pgrid2.c3 .pc:nth-child(3){grid-column:1/-1}}
@media(max-width:860px){.pgrid2.c3{grid-template-columns:1fr}}
.psteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);border-top:1px solid rgba(255,255,255,.1);padding-top:clamp(24px,3vw,36px);margin-top:10px}
.pstep .sn{font:600 clamp(2.4rem,4.4vw,3.6rem)/1 var(--d);color:transparent;-webkit-text-stroke:1.5px rgba(100,0,255,.9);margin-bottom:14px}
.pstep h5{font:600 clamp(1.1rem,1.6vw,1.35rem) var(--d);margin:0 0 12px;color:#fff}
.pstep p{margin:0;color:rgba(255,255,255,.75);line-height:1.65;font-size:.95rem}
@media(max-width:1100px){.psteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.psteps{grid-template-columns:1fr}}
.egrid.bocetos{max-width:none;margin:14px 0 0}.egrid.bocetos figure{margin:0}.egrid.bocetos img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;display:block}
.egrid.bocetos figcaption{margin-top:10px;font-size:.85rem;color:rgba(255,255,255,.55);text-align:center}
@media(max-width:640px){.egrid.bocetos{max-width:none}}
.slot{position:relative;display:grid;place-items:center;text-align:center;padding:14px;border:1.5px dashed rgba(176,140,255,.45);border-radius:16px;background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);font-size:.85rem;line-height:1.4;min-width:0}
.slot b{display:block;font:600 .9rem var(--d);color:#b08cff;margin-bottom:4px}
.iahero{aspect-ratio:16/9;margin-bottom:clamp(40px,6vw,72px)}
.iah{display:flex;align-items:baseline;gap:14px;margin:0 0 6px}
.iah h4{font:600 1rem var(--d);color:#b08cff;margin:0}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:clamp(24px,4vw,56px);padding:clamp(28px,4vw,48px) 0;border-top:1px solid rgba(255,255,255,.1)}
.step .sn{font:600 clamp(2.4rem,5vw,4rem)/1 var(--d);color:transparent;-webkit-text-stroke:1.5px rgba(100,0,255,.9);margin-bottom:14px}
.step h5{font:600 clamp(1.25rem,2.2vw,1.65rem) var(--d);margin:0 0 12px;color:#fff}
.step p{margin:0;color:rgba(255,255,255,.75);line-height:1.65}
.smedia{display:grid;gap:clamp(8px,1.5vw,18px);align-content:start}
.smedia.g3{grid-template-columns:repeat(3,1fr)}.smedia.g2{grid-template-columns:repeat(2,1fr)}.smedia.g4{grid-template-columns:repeat(4,1fr)}
.smedia.g3 .slot,.smedia.g4 .slot{aspect-ratio:1/1}.smedia.g2 .slot{aspect-ratio:4/3}
.smedia figure{margin:0;min-width:0}.smedia figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}.smedia figcaption{margin-top:8px;font-size:.85rem;color:rgba(255,255,255,.55);text-align:center}
.smedia .wide{grid-column:1/-1;aspect-ratio:16/7}
.smedia .slot.prompt{aspect-ratio:auto;min-height:110px;text-align:left;place-items:start;font-family:ui-monospace,Menlo,monospace}
@media(max-width:860px){.step{grid-template-columns:1fr}.smedia.g4{grid-template-columns:repeat(2,1fr)}}

.bgrid{display:grid;gap:clamp(8px,1.5vw,18px);grid-template-columns:452fr 454fr 453fr;grid-template-rows:267fr 67fr 205fr 231fr;grid-template-areas:"a b c" "a d e" "a d f" "g g g";aspect-ratio:1367/781;width:100%}
.bgrid figure{margin:0;overflow:hidden;border-radius:12px;min-width:0;min-height:0}
.bgrid img{display:block;width:100%;height:100%;object-fit:cover}
.bgrid .b-a{grid-area:a}.bgrid .b-b{grid-area:b}.bgrid .b-c{grid-area:c}.bgrid .b-d{grid-area:d}.bgrid .b-e{grid-area:e}.bgrid .b-f{grid-area:f}.bgrid .b-g{grid-area:g}
.bgrid.bg-yl{grid-template-columns:842fr 838fr 276fr 277fr 256fr;grid-template-rows:410fr 218fr 382fr;grid-template-areas:"a b d d d" "a c d d d" "a c e f g";aspect-ratio:2503/1010}
.bgrid.bg-sl{grid-template-columns:711fr 1821fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"a d" "b d" "c d";aspect-ratio:2532/1151}
.stbox{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:0 0 auto}
.stbox .stools{justify-content:flex-start}
.stbox .pill{margin:0 0 12px}
@media(max-width:700px){.stbox{align-items:flex-start}}
.rstage{position:relative;height:calc(var(--w)*1.42);perspective:var(--p);perspective-origin:50% 42%;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;outline:none;opacity:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(#000 80%,transparent);mask-composite:intersect}
.rstage.drag{cursor:grabbing}
.rstage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(46% 14% at 50% 72%,rgba(100,0,255,.28),rgba(100,0,255,0) 72%)}
.rstage:focus-visible{box-shadow:inset 0 0 0 2px #6400ff}
.rtrack{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.rslot{position:absolute;left:50%;top:42%;width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);transform-style:preserve-3d;pointer-events:auto;visibility:hidden}
.rcard{position:absolute;inset:0;transform-style:preserve-3d}
.rface{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;opacity:var(--o,1)}
.rfront{transform:translateZ(4px);box-shadow:0 40px 60px -38px #000,0 14px 26px -18px rgba(0,0,0,.6)}
.rfront img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rshade{position:absolute;inset:0;pointer-events:none}
.rback{transform:rotateY(180deg) translateZ(4px);background:radial-gradient(120% 80% at 50% 115%,rgba(100,0,255,.6),rgba(100,0,255,.08) 55%,transparent 75%),linear-gradient(160deg,#150a33,#07041a 60%,#04020f);border:1px solid rgba(100,0,255,.45)}
.redge{display:none;position:absolute;top:20px;bottom:20px;left:50%;width:8px;margin-left:-4px;background:linear-gradient(#f2f0fa,#c9c3e3 60%,#aaa3cc);backface-visibility:hidden;opacity:var(--o,1)}
.redge.rl{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.redge.rr{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.rmirror{position:absolute;left:0;right:0;top:calc(100% + 12px);height:46%;overflow:hidden;pointer-events:none;border-radius:20px 20px 0 0;opacity:calc(var(--o,1)*.28);-webkit-mask-image:linear-gradient(rgba(0,0,0,.7),transparent 62%);mask-image:linear-gradient(rgba(0,0,0,.7),transparent 62%)}
.rmirror img{position:absolute;left:0;top:0;width:100%;height:var(--w);transform:scaleY(-1);object-fit:cover;display:block}
.rdots{display:flex;justify-content:center;margin-top:-6px}
.rdots button{width:40px;height:30px;padding:0 5px;display:grid;align-items:center;background:none;border:0}
.rdots button span{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;transition:background .3s}
.rdots button:hover span{background:rgba(255,255,255,.35)}
.rdots button[aria-current="true"] span{background:rgba(255,255,255,.3)}
.rdots button i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6400ff,#b08cff);transform-origin:0 50%;transform:scaleX(0)}
.rsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.car{position:relative;width:100%;aspect-ratio:1/1;border-radius:28px;overflow:hidden;background:#0b0b12;border:1px solid var(--line);touch-action:pan-y;user-select:none;outline:none}
.car:focus-visible{box-shadow:0 0 0 2px #6400ff}
.cartrack{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.25,1)}
.cartrack img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cardots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.cardots button{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.45);transition:all .35s}
.cardots button.on{width:26px;background:#fff}
@media(prefers-reduced-motion:reduce){.cartrack{transition:none}}.vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);width:100%;max-width:1000px;margin:0 auto}.pvid.vert{aspect-ratio:9/16;border-radius:20px}@media(max-width:640px){.vrow{grid-template-columns:1fr;max-width:340px;gap:20px}}.pvid{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:24px;outline:none}.vslot .thumb{aspect-ratio:16/9;border-radius:24px}
.fbwrap{width:100%;max-width:1000px;margin:0 auto}
.fbwrap+.fbwrap{margin-top:64px}
.proj.wide .fbwrap .fb{margin:0}

/* ===== Puntero y aura ===== */
@media(hover:hover) and (pointer:fine){
 html,html *,html *::before,html *::after{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='28' viewBox='0 0 275 303'%3E%3Cpath d='M38 50 L243 132 L155 170 L118 256 Z' fill='%231a1a1a' stroke='white' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3,auto!important}
 .aura{position:fixed;left:0;top:0;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;pointer-events:none;z-index:8;opacity:0;transition:opacity .4s;background:radial-gradient(circle,rgba(100,0,255,.26) 0%,rgba(100,0,255,.12) 35%,transparent 68%);mix-blend-mode:screen;will-change:transform}
 .aura.on{opacity:1}
}
@media not all and (hover:hover) and (pointer:fine){.aura{display:none}}
@media(prefers-reduced-motion:reduce){.aura{transition:none}}