*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --page:#F1F1EF;--panel:#FFFFFF;--text:#000000;--sub:#55555A;--line:rgba(0,0,0,.16);--chip:#E6E6E2;--ok:#17633A;--warn:#8A4B00;
  --red:#EC3323;--lime:#D2FB52;--paper:#FCFCFB;--ink:#000000;--grey:#6B6B70;--accent:#1616F0;--background-end:#D8D8DA;
  --f:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;--s:'Newsreader','Iowan Old Style','Palatino Linotype',Georgia,serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page:#000000;--panel:#171717;--text:#F3F3F1;--sub:#ABABB0;--line:rgba(255,255,255,.2);--chip:#2B2B2B;--ok:#7FD6A0;--warn:#F0B35C}}
:root[data-theme="dark"]{--page:#000000;--panel:#171717;--text:#F3F3F1;--sub:#ABABB0;--line:rgba(255,255,255,.2);--chip:#2B2B2B;--ok:#7FD6A0;--warn:#F0B35C}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--page);color:var(--text);font:400 16px/1.5 var(--f);-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button,label.btn,a{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.noscript{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;background:var(--paper);color:var(--ink);font:600 18px/1.4 var(--f);text-align:center}

/* ---------- página ---------- */
.top{padding:10px 4px 0}
.top h1{font:300 36px/1 var(--s);letter-spacing:-.02em}
.top p{color:var(--sub);margin-top:6px;max-width:52ch}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:12px 12px 72px;max-width:1240px;margin:0 auto}
@media(min-width:900px){.layout{grid-template-columns:442px minmax(0,1fr);column-gap:44px;row-gap:22px;padding:16px 16px 80px}.top{grid-column:2;padding:6px 0 0}.stage{grid-column:1;grid-row:1/span 2;position:sticky;top:calc(16px + env(safe-area-inset-top,0px));align-self:start}#notes{grid-column:2}}
.stage{background:var(--lime);color:var(--ink);padding:14px 14px 16px;border-radius:26px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:12px}
.seg button{min-height:44px;border:1.5px solid var(--ink);background:transparent;font:500 14px/1 var(--f);color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
#wrap{position:relative;width:100%}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid currentColor;background:transparent;font:500 14px/1 var(--f)}
.btn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cap{font:400 13px/1.3 var(--f);margin-left:auto}

/* ---------- móvil ---------- */
#phone{position:absolute;top:8px;left:0;width:390px;height:var(--H);--H:844px;--cy:380px;transform-origin:0 0;border-radius:46px;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--f);box-shadow:0 0 0 8px #fff,0 26px 50px -24px rgba(0,0,0,.5);isolation:isolate}
.island{position:absolute;top:12px;left:50%;margin-left:-55px;width:110px;height:32px;border-radius:18px;background:var(--ink);z-index:30}
.screen{position:absolute;inset:0}
.hl{outline:2px dashed var(--red)!important;outline-offset:5px}
#menu .hl,#intro .hl{outline-color:var(--ink)!important}
#hlbox{position:absolute;left:22px;right:22px;top:calc(var(--cy) - 190px);height:380px;border:2px dashed var(--red);z-index:7;pointer-events:none;visibility:hidden}
#hlbox.on{visibility:visible}

/* intro */
#intro{z-index:20;background:var(--red)}
.tick{position:absolute;left:24px;right:12px;top:var(--cy);margin-top:-20px;font:300 37px/1 var(--f);letter-spacing:-.03em;white-space:nowrap}
#skip{position:absolute;right:18px;bottom:26px;min-height:44px;min-width:88px;padding:0 18px;border:0;background:var(--ink);color:#fff;font:500 15px/1 var(--f)}

/* home */
#home{z-index:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#home::-webkit-scrollbar{display:none}
.track{position:relative}
.pin{position:sticky;top:0;height:var(--H);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;background:radial-gradient(120% 90% at 50% 42%,#fff 0,#fff 46%,#ECECED 78%,var(--background-end) 100%)}
.scene{position:absolute;inset:0;perspective:900px;perspective-origin:50% var(--cy);pointer-events:none}
.rig{position:absolute;left:50%;top:var(--cy);width:0;height:0;transform-style:preserve-3d;--lw:0}
.tile{position:absolute;left:-50px;top:-62.5px;width:100px;height:125px;background-color:#D9D9DB;background-position:50% 50%;background-repeat:no-repeat;background-size:calc(100% + var(--lw)*26%) calc(100% + var(--lw)*26%)}
.tile::after{content:"";position:absolute;inset:0;opacity:var(--lw);background:radial-gradient(circle 54px at 50% 44%,rgba(255,255,255,.24) 0,rgba(255,255,255,0) 34%,rgba(0,0,0,0) 60%,rgba(0,0,0,.42) 100%)}
.tile.red{background:var(--red)}
.tile.red span{position:absolute;left:9px;right:8px;top:50px;font:300 13px/1.05 var(--f);letter-spacing:-.02em;overflow:hidden}
.nav{position:absolute;left:0;right:0;top:0;padding:52px 18px 4px;background:radial-gradient(120% 90% at 50% 42%,#fff 0,#fff 46%,#ECECED 78%,var(--background-end) 100%) 0 0/100% var(--H) no-repeat;display:flex;justify-content:space-between;align-items:center;z-index:8;font:500 15px/1 var(--f)}
#sect{display:flex;gap:16px}
#menuBtn{min-height:44px;min-width:44px;padding:0 0 0 14px;border:0;background:none;font:500 15px/1 var(--f)}
.ov{position:absolute;inset:0;z-index:6;visibility:hidden;pointer-events:none}
.ov.on{visibility:visible}
.ov a,.ov button{pointer-events:auto}
.foot{position:absolute;left:18px;right:18px;bottom:26px;border-top:1px solid var(--ink);padding-top:10px}
.ov0 .txt{position:absolute;left:18px;right:18px;bottom:26px}
.name{font:300 54px/.96 var(--s);letter-spacing:-.03em;overflow-wrap:anywhere}
.disc{font:italic 300 21px/1.25 var(--s);margin-top:10px}
.meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--ink);margin-top:16px;padding-top:9px;font:500 13px/1.3 var(--f)}
.meta span:last-child{color:var(--grey);font-weight:400;text-align:right}
.lab{position:absolute;top:var(--ry);margin-top:-8px;font:600 13px/1.2 var(--f);max-width:76px}
.lab.l{left:16px}.lab.r{right:16px;text-align:right}
.head{font:300 38px/1 var(--s);letter-spacing:-.02em;overflow-wrap:anywhere}
.deckrow{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:8px}
.see{flex:none;min-height:44px;padding:0 14px;border:0;background:var(--ink);color:#fff;font:500 13px/1 var(--f)}
.hit{position:absolute;left:100px;width:190px;top:calc(var(--ry) - 100px);height:200px;border:0;background:transparent}
.ov2 .bio{margin-top:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ov2 .see{margin-top:14px}
.deck{font:italic 300 17px/1.3 var(--s)}
.folio{font:500 13px/1.3 var(--f);white-space:nowrap}
.kick{font:600 13px/1.2 var(--f)}
.bio{font:300 21px/1.3 var(--s);margin-top:8px;overflow-wrap:anywhere}
.mail{display:block;font:italic 300 29px/1.1 var(--s);letter-spacing:-.01em;color:var(--ink);margin-top:8px;overflow-wrap:anywhere}
a.mail{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.up{margin-top:16px;min-height:44px;padding:0 16px;border:0;background:var(--ink);color:#fff;font:500 15px/1 var(--f)}

/* fichas: proyecto y sobre mí */
#page{position:absolute;inset:0;z-index:10;background:var(--paper);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#page::-webkit-scrollbar{display:none}
.pbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:52px 18px 4px;background:var(--paper);font:500 15px/1 var(--f)}
.pbar button{min-height:44px;padding:0 14px 0 0;border:0;background:none;font:500 15px/1 var(--f)}
.pbody{padding:0 18px 44px}
.tic{visibility:hidden}.tic.in{visibility:visible}
.pbody img{display:block;width:100%;height:auto}
.pbody .r45{aspect-ratio:4/5;object-fit:cover}
.pbody .phero{width:calc(100% + 36px);margin:0 -18px 16px}
.clip{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:#D9D9DB}
.clip b{position:absolute;left:8px;top:8px;padding:4px 7px;background:var(--ink);color:#fff;font:500 12px/1 var(--f)}
.flip{position:absolute;inset:0;background-repeat:no-repeat;background-size:1000% 100%;animation:flip 1.25s steps(10) infinite alternate}
@keyframes flip{to{background-position:111.112% 0}}
.rm .flip{animation:none}
.tile .flip{visibility:hidden;animation-play-state:paused}
.tile.playing .flip{visibility:visible;animation-play-state:running}
.fly{position:absolute;z-index:11;background-size:cover;background-position:50% 50%;pointer-events:none}
.pbody h2{font:300 46px/.98 var(--s);letter-spacing:-.025em;margin-top:8px;overflow-wrap:anywhere}
.pdeck{font:italic 300 21px/1.25 var(--s);margin-top:10px}
.pmeta{border-top:1px solid var(--ink);margin-top:22px}
.pmeta div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--ink);font:500 13px/1.3 var(--f)}
.pmeta dd{text-align:right}
.ptext{font:300 21px/1.3 var(--s);margin-top:20px;overflow-wrap:anywhere}
.pgal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px;align-items:start}
.pgal .w{grid-column:1/-1}.pgal .o{grid-column:2}
.pnext{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--ink);background:none;margin-top:30px;padding:12px 0 0;min-height:44px}
.pnext span{display:block;font:600 13px/1.2 var(--f)}
.pnext b{display:block;font:300 38px/1 var(--s);letter-spacing:-.02em;margin-top:8px}
.vid{position:relative;margin:0 -18px 16px;aspect-ratio:4/5;background:var(--ink);color:#fff;display:grid;place-items:center}
.play{position:relative;width:72px;height:72px;border:1.5px solid #fff;border-radius:50%}
.play::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #fff}
.vid figcaption{position:absolute;left:18px;right:18px;bottom:16px;font:400 13px/1.4 var(--f)}
.psub{font:600 13px/1.2 var(--f);margin-top:30px}
.pcli{list-style:none;border-top:1px solid var(--ink);margin-top:10px}
.pcli button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%;min-height:58px;padding:12px 0;border:0;border-bottom:1px solid var(--ink);background:none;text-align:left;font:300 30px/1 var(--s);letter-spacing:-.02em}
.pcli button span{font:500 13px/1 var(--f);letter-spacing:0;white-space:nowrap}
.pbody .mail{margin-top:10px}

/* menú */
#menu{position:absolute;inset:0;z-index:12;background:var(--red);padding:52px 18px 0}
#menu .bar{display:flex;justify-content:space-between;align-items:center;font:500 15px/1 var(--f)}
#closeMenu{min-height:44px;padding:0 0 0 14px;border:0;background:none;font:500 15px/1 var(--f)}
#menu ul{list-style:none;margin-top:calc(var(--cy) - 230px)}
#menu li button{display:flex;align-items:center;width:100%;min-height:68px;border:0;background:none;text-align:left;font:300 38px/1 var(--f);letter-spacing:-.02em;visibility:hidden}
#menu li button.in{visibility:visible}
#menu li button{border-top:1px solid var(--ink)}#menu li:last-child button{border-bottom:1px solid var(--ink)}
#menu li button span:first-child{width:74px;padding-left:4px}
#menu li button span:last-child{font:300 42px/1 var(--s);letter-spacing:-.02em}

/* ---------- notas ---------- */
#notes section{border-top:1px solid var(--text);padding:18px 0 30px}
#notes h2{font:300 30px/1.08 var(--s);letter-spacing:-.015em;margin-bottom:10px}
#notes p{max-width:62ch;margin-bottom:10px}
#notes .sub{color:var(--sub);font-size:14px}
.fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:14px 0}
.fields label{display:block;font:500 14px/1.3 var(--f)}
.fields input,.fields textarea{display:block;width:100%;margin-top:6px;min-height:44px;padding:10px 12px;border:1.5px solid var(--text);background:var(--panel);border-radius:0;font:400 16px/1.3 var(--f)}
.fields textarea{min-height:76px;resize:vertical}
.fields .wide{grid-column:1/-1}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.map>div{padding:10px 8px 10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.map>div:nth-child(odd){color:var(--sub)}
.sw{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0 14px;max-width:460px}
.sw div{font-size:12px;line-height:1.35}
.sw i{display:block;aspect-ratio:1;border:1px solid var(--line);margin-bottom:5px}
.cr{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.ok{color:var(--ok)}.warn{color:var(--warn)}
.specs{display:grid;gap:8px;margin-top:6px}
.spec{padding:16px 14px 12px;color:var(--ink)}
.spec small{display:block;font:400 12px/1.4 var(--f);margin-top:12px}
.pats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:14px}
.pat .demo{height:120px;display:grid;place-items:center;background:#fff;color:var(--ink);overflow:hidden}
.pat h3{font:600 15px/1.3 var(--f);margin:10px 0 2px}
.pat p{font-size:14px;line-height:1.45;color:var(--sub)}
.dtic{background:var(--red)!important;font:300 26px/1 var(--f);letter-spacing:-.02em}
.dst{position:relative;width:104px;height:92px}
.dst i{position:absolute;left:0;top:0;width:34px;height:42px;background:var(--ink);animation:dst 3.4s cubic-bezier(.65,0,.35,1) infinite alternate}
.dst i:nth-child(1){--x0:0px;--y0:0px;--x1:35px;--y1:2px;--r:-6deg}
.dst i:nth-child(2){--x0:70px;--y0:0px;--x1:35px;--y1:26px;--r:5deg;background:var(--red)}
.dst i:nth-child(3){--x0:0px;--y0:50px;--x1:6px;--y1:42px;--r:9deg;background:var(--grey)}
.dst i:nth-child(4){--x0:70px;--y0:50px;--x1:64px;--y1:44px;--r:-8deg}
@keyframes dst{0%,18%{transform:translate(var(--x0),var(--y0));clip-path:inset(4px 0 4px 0 round 17px)}82%,100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r));clip-path:inset(0 0 0 0 round 0px)}}
.dgw{perspective:420px}
.dgi{position:relative;width:0;height:0;transform-style:preserve-3d;animation:dgi 10s linear infinite}
.dgi i{position:absolute;left:-11px;top:-15px;width:22px;height:30px;background:var(--ink);transform:rotateY(calc(var(--k)*45deg)) translateZ(44px)}
.dgi i:nth-child(3n){background:var(--red)}
@keyframes dgi{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.rm .dst i,.rm .dgi{animation:none}
.grp{font:600 14px/1.3 var(--f);margin:18px 0 2px}
.row{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 0;min-height:44px}
.row b{display:block;font:500 16px/1.35 var(--f)}
.row span{display:block;font-size:14px;line-height:1.45;color:var(--sub)}
.row em{font-style:normal;display:inline-block;margin-top:5px;padding:2px 8px;background:var(--chip);color:var(--text);font-size:13px}
@media(hover:hover){.row:hover b{text-decoration:underline;text-underline-offset:4px}}
.list{list-style:none;border-top:1px solid var(--line)}
.list li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.list li b{font-weight:500;white-space:nowrap}
ul.plain{padding-left:18px;max-width:62ch}
ul.plain li{margin-bottom:6px}

/* ---------- acabado ---------- */
#phone{text-rendering:optimizeLegibility}
.nav,.pbar,#menu .bar{font:500 13px/1 var(--f);letter-spacing:.005em}
#menuBtn,.pbar button,#closeMenu{font:500 13px/1 var(--f)}
#sect{gap:12px;font-variant-numeric:tabular-nums}
#prog{position:absolute;left:18px;right:18px;top:99px;height:1px;background:rgba(0,0,0,.16);z-index:8;pointer-events:none}
#prog i{display:block;height:100%;background:var(--ink);transform-origin:0 0;transform:scaleX(0)}
.lab{font:500 12px/1.2 var(--f);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kick,.psub{font:500 12px/1.2 var(--f);letter-spacing:.01em}
.meta,.pmeta div{font:500 12px/1.3 var(--f)}
#pFolio{font-variant-numeric:tabular-nums}
.name,.head,.pbody h2,.pnext b{text-wrap:balance}
.bio,.ptext,.pdeck,.deck,.disc{text-wrap:pretty}
.see,.up,#skip{flex:none;min-height:44px;min-width:0;padding:0;margin-top:0;border:0;background:none;color:var(--ink);font:500 13px/1 var(--f);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ov2 .see{margin-top:6px}
.up{margin-top:8px}
#skip{right:18px;bottom:18px}
.ifoot{position:absolute;left:18px;bottom:18px;height:44px;display:flex;align-items:center;font:500 13px/1 var(--f)}
.clip b{font:500 11px/1 var(--f);padding:4px 6px}
.pin::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#shade{position:absolute;left:50%;top:0;width:280px;height:34px;margin-left:-140px;background:radial-gradient(closest-side,rgba(0,0,0,.2),rgba(0,0,0,0));pointer-events:none;opacity:0}
.top h1{font:300 34px/1 var(--s)}
.stage{border-radius:20px;padding:12px 12px 14px}
.seg{gap:0}
.seg button{border:1px solid var(--ink);font:500 13px/1 var(--f);margin-left:-1px}
.seg button:first-child{margin-left:0}
.btn{border:1px solid currentColor;font:500 13px/1 var(--f);padding:0 14px}
#fullBtn{background:var(--ink);color:#fff;border-color:var(--ink)}
.cap{font-size:12px}
/* fichas con texto */
.mail{font-size:22px;line-height:1.15}
.pmeta div{align-items:baseline}.pmeta dt{flex:none;max-width:46%}.pmeta dd{text-wrap:balance}
.pedu{list-style:none;border-top:1px solid var(--ink);margin-top:10px}
.pedu li{padding:11px 0;border-bottom:1px solid var(--ink);font:300 19px/1.25 var(--s)}
.pgap{height:10px}
.psec{font:300 30px/1.05 var(--s);letter-spacing:-.02em;margin-top:34px;padding-top:14px;border-top:1px solid var(--ink);text-wrap:balance}
.psec+.pdeck{margin-top:8px;font-size:19px}
.ptext+.ptext{margin-top:14px}
.pnote{font:500 12px/1.3 var(--f);color:var(--grey);margin-top:24px}
.pcli button{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;font-size:27px;line-height:1.02;padding:14px 0}
.pcli button span{white-space:normal;font:500 12px/1.3 var(--f);color:var(--grey)}
.dtic{font-size:22px}
/* pantalla completa: el móvil ocupa toda la ventana, sin maqueta ni notas */
body.full{overflow:hidden}
body.full .stage{position:fixed;inset:0;width:100%;height:100%;align-self:stretch;z-index:100;border-radius:0;padding:0;background:var(--ink)}
body.full .seg,body.full .ctrls,body.full .island{display:none}
body.full #wrap{position:absolute;inset:0;height:auto!important}
body.full #phone{top:0;border-radius:0;box-shadow:none}
#exitFull{position:fixed;z-index:110;top:env(safe-area-inset-top,0px);left:50%;transform:translateX(-50%);min-height:44px;padding:0 14px;border:0;background:none;color:var(--ink);font:500 12px/1 var(--f);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}

/* ---------- sobre mí: anillo de imágenes con la especialidad en el centro ---------- */
.rlab{position:absolute;left:50%;top:var(--st,300px);width:150px;transform:translate(-50%,-50%);text-align:center}
.rlab b{display:block;font:700 16px/1.02 var(--f);letter-spacing:-.035em;text-wrap:balance}
.rlab span{display:block;margin-top:6px;font:500 11px/1 var(--f);font-variant-numeric:tabular-nums;color:var(--grey)}
/* ---------- tinta en lugar de rojo, y presentación en negrita ---------- */
:root{--red:var(--ink)}
#intro,#menu,.tile.red,.dtic{color:#fff}
#skip,#menu .bar,#closeMenu,#menu li button{color:#fff}
#menu li button{border-top-color:rgba(255,255,255,.45)}
#menu li:last-child button{border-bottom-color:rgba(255,255,255,.45)}
#menu .hl,#intro .hl{outline-color:#fff!important}
.tile.red span{font-weight:600;letter-spacing:-.03em}
.tick{left:22px;right:22px;top:calc(var(--cy) - 62px);margin-top:0;font:700 52px/.92 var(--f);letter-spacing:-.045em;white-space:normal}
.name{font:700 50px/.92 var(--f);letter-spacing:-.045em}
.pbody h2.pname{font:700 46px/.92 var(--f);letter-spacing:-.045em}
.dtic{font-weight:700;letter-spacing:-.04em}
.dst i:nth-child(2),.dgi i:nth-child(3n){background:var(--grey)}
#exitFull{color:#fff;mix-blend-mode:difference}

/* ---------- inicio: solo los nombres, en negrita, sobre el mismo papel que el resto ---------- */
#intro{color:var(--ink);background:radial-gradient(120% 90% at 50% 42%,#fff 0,#fff 46%,#ECECED 78%,var(--background-end) 100%)}
#intro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#skip{color:var(--ink)}
#intro .hl{outline-color:var(--accent)!important}
.flyname{z-index:21;background:none;color:var(--ink);transform-origin:0 0;margin:0}
.tile.red{background-color:#fff;background-size:contain;background-position:50% 50%}

/* ---------- archivador con pestañas ---------- */
.sc2{pointer-events:none}
#binder{position:absolute;left:50%;top:0;width:0;height:0;transform-style:preserve-3d;visibility:hidden}
#binder .leaf{pointer-events:none}
#binder.live .tab,#binder.live .leaf.act .face{pointer-events:auto}
.leaf{position:absolute;left:0;top:-106px;width:160px;height:212px;transform-origin:0 50%;transform-style:preserve-3d}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#F1F0EA 50% 50%/cover no-repeat;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);color:var(--ink);font-family:var(--f)}
.face.bk{transform:rotateY(180deg)}
.face::before{content:"";position:absolute;top:9px;bottom:9px;left:4px;width:5px;z-index:2;background:radial-gradient(circle,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 1.5px,rgba(0,0,0,0) 2px) 0 0/5px 14px repeat-y}
.face.bk::before{left:auto;right:4px}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.16),rgba(0,0,0,0) 15%)}
.face.bk::after{background:linear-gradient(to left,rgba(0,0,0,.16),rgba(0,0,0,0) 15%)}
.face[data-k]{cursor:pointer}
.cv{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 16px}
.cv b{font:700 12px/1.15 var(--f);letter-spacing:.14em;text-transform:uppercase;margin:10px 0 6px}
.cv i{font:500 7px/1 var(--f);font-style:normal;letter-spacing:.04em;margin-bottom:10px}
.cv .ln{display:block;width:100%;border-top:1px solid rgba(0,0,0,.35)}
.ix{padding:16px 16px 12px 12px}
.ix b{display:block;font:700 15px/1 var(--f);letter-spacing:-.03em}
.ix ol{list-style:none;margin-top:10px;font:500 8px/1.7 var(--f)}
.dv .n{position:absolute;left:18px;top:14px;font:700 40px/1 var(--f);letter-spacing:-.05em}
.dv .t{position:absolute;left:18px;right:10px;bottom:26px;font:700 17px/1 var(--f);letter-spacing:-.035em}
.dv .c{position:absolute;left:18px;bottom:12px;font:500 8px/1 var(--f)}
.tx{padding:16px 14px 12px 18px}
.tx .c{display:block;font:500 8px/1 var(--f)}
.tx .d{display:block;font:300 13px/1.22 var(--s);margin-top:9px}
.en .n{position:absolute;left:18px;top:16px;font:700 17px/1 var(--f);letter-spacing:-.035em}
.en .d{position:absolute;left:18px;right:10px;bottom:12px;font:500 7px/1.4 var(--f);overflow-wrap:anywhere}
.tab{position:absolute;left:158px;width:15px;height:19px;border:0;padding:0;border-radius:0 5px 5px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.tab::after{content:"";position:absolute;inset:-3px -16px -3px -14px}
.rings{position:absolute;left:-5px;top:-98px;width:10px;height:196px;background:repeating-linear-gradient(to bottom,#B9B9BD 0,#E6E6E8 1.5px,#9A9A9F 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 14px);transform:translateZ(18px);pointer-events:none}

/* ---------- una sola voz: títulos en grotesca negrita, texto corrido en serif; sumario sobre papel ---------- */
.head{font:700 33px/.95 var(--f);letter-spacing:-.045em;padding-top:12px}
.pbody h2{font:700 42px/.94 var(--f);letter-spacing:-.045em}
.psec{font:700 26px/1 var(--f);letter-spacing:-.04em}
.pnext b{font:700 32px/.95 var(--f);letter-spacing:-.045em}
.pcli button{font:700 22px/1 var(--f);letter-spacing:-.035em;gap:6px}
#menu{background:radial-gradient(120% 90% at 50% 42%,#fff 0,#fff 46%,#ECECED 78%,var(--background-end) 100%);color:var(--ink)}
#menu .bar,#closeMenu,#menu li button{color:var(--ink)}
#menu li button{border-top-color:var(--ink);min-height:74px;align-items:baseline;padding-top:16px}
#menu li:last-child button{border-bottom-color:var(--ink)}
#menu li button span:first-child{width:46px;padding-left:0;font:500 13px/1 var(--f);letter-spacing:0;font-variant-numeric:tabular-nums}
#menu li button span:last-child{font:700 40px/1 var(--f);letter-spacing:-.045em}
#menu .hl{outline-color:var(--ink)!important}
.hit{left:76px;width:238px;top:calc(var(--ry) - 124px);height:248px}
.lab{max-width:58px}

.aud{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;margin-top:20px;padding:12px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.aud .play{grid-row:1/span 2;width:44px;height:44px;border-color:var(--ink)}
.aud .play::after{left:17px;top:12px;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--ink)}
.aud b{font:700 17px/1.1 var(--f);letter-spacing:-.03em}
.aud .an{font:500 12px/1.3 var(--f);color:var(--grey)}
.pembed{position:relative;margin-top:22px;width:100%;aspect-ratio:16/9;background:#111;overflow:hidden}
.pembed iframe{display:block;width:100%;height:100%;border:0}
.pembed.audio{aspect-ratio:auto;height:152px;background:transparent}
.pembed.link{aspect-ratio:auto;min-height:58px;padding:8px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:transparent;display:flex;align-items:center}

/* nombre del proyecto sobre cada portada del rollo */
.tile .tag{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;display:none;text-align:center;color:#fff;white-space:nowrap;text-shadow:0 0 1.5px rgba(0,0,0,.6),0 0 6px rgba(0,0,0,.5)}
.rig.roll .tile .tag{display:block}

/* ---------- rollo con portadas grandes y foto en Sobre mí ---------- */
.mrow{display:flex;justify-content:space-between;gap:12px;font:500 12px/1 var(--f);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.head{padding-top:10px}
.hit{left:45px;width:300px;top:calc(var(--ry) - 165px);height:330px}
.me{margin:0 -18px 18px}
.me img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%}
.navr{display:flex;align-items:center}
#langBtn{min-height:44px;min-width:44px;padding:0 4px 0 10px;border:0;background:none;color:inherit;font:500 13px/1 var(--f)}
.mlang{position:absolute;left:18px;bottom:26px;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:500 13px/1 var(--f);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
body.clean{background:#E9E9EA}
body.clean .layout>:not(.stage){display:none!important}
body.clean #exitFull{display:none!important}
body.clean .stage{background:#E9E9EA}

/* ---------- clientes ---------- */
.seerow{display:flex;gap:22px;align-items:center}
#menu li button{min-height:66px;padding-top:13px}
.pcl li{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;border-bottom:1px solid var(--ink)}
.pcl li button{border-bottom:0;flex:1;min-width:0}
.pcl .ig{flex:none;min-height:44px;display:flex;align-items:center;padding-bottom:6px;font:500 12px/1 var(--f);color:var(--ink);text-underline-offset:4px}

/* ---------- referencias nuevas: tipografía grande en línea, párrafos que se encienden, texto que se descifra ---------- */
.pstm{margin-top:16px;font:700 24px/1.1 var(--f);letter-spacing:-.04em;color:#BDBDC2;text-wrap:pretty}
.pstm.on{color:var(--ink)}
.psrv{margin-top:10px;font:700 31px/1.07 var(--f);letter-spacing:-.045em}
.psrv b{font-weight:700}
.psrv i{font:italic 300 33px/1 var(--s);letter-spacing:-.025em}
.cwall{position:relative;margin:20px -18px 0;padding:24px 18px 26px;min-height:440px;overflow:hidden}
.cbg{position:absolute;inset:-40px;background:50% 50%/cover no-repeat;filter:blur(24px);opacity:0}
.cbg.on{opacity:.62}
.cnames{position:relative;font:700 35px/1.05 var(--f);letter-spacing:-.045em;color:var(--ink)}
.cn{cursor:pointer}
.cn.on{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.cinfo{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:26px;padding-top:10px;border-top:1px solid var(--ink);min-height:58px}
.cinfo .cl{display:flex;flex-direction:column;gap:6px}
.cinfo .r{font:italic 300 20px/1.2 var(--s)}
.cinfo a{font:500 13px/1 var(--f);color:var(--ink);text-underline-offset:4px}

/* ---------- tablet y escritorio: la misma web, con más aire ---------- */
#phone{width:var(--W,390px)}
.hit{left:50%;margin-left:calc(-150px*var(--k,1));width:calc(300px*var(--k,1));top:calc(var(--ry) - 165px*var(--k,1));height:calc(330px*var(--k,1))}
#phone.tab .nav,#phone.wide .nav,#phone.tab .pbar,#phone.wide .pbar,#phone.tab #menu,#phone.wide #menu{padding-left:var(--m);padding-right:var(--m)}
#phone.tab .foot,#phone.wide .foot,#phone.tab .ov0 .txt,#phone.wide .ov0 .txt,#phone.tab #prog,#phone.wide #prog,#phone.tab .tick,#phone.wide .tick{left:var(--m);right:var(--m)}
#phone.tab .ifoot,#phone.wide .ifoot,#phone.tab .mlang,#phone.wide .mlang{left:var(--m)}
#phone.tab #skip,#phone.wide #skip{right:var(--m)}
#phone.tab .pbody,#phone.wide .pbody{max-width:var(--col);margin-left:auto;margin-right:auto}
#phone.wide .foot,#phone.wide .ov0 .txt{right:auto;width:var(--fw);bottom:34px}
#phone.wide #menu ul{max-width:720px}
#phone.wide .mail{font-size:20px}
#phone.wide .ifoot,#phone.wide #skip{bottom:26px}