@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Archivo+Expanded:wght@600;700&family=Fredoka:wght@500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#0a0a0b;color:#e8e6e1;font-family:'Archivo',sans-serif;overflow-x:hidden}
.scroll-track{height:500vh;pointer-events:none}
a{color:#e8e6e1;text-decoration:none}
a:hover{color:#fff}
.galaxy-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
/* 1) FONDO + 2) LUZ */
.spotlight{position:fixed;top:-30vh;left:50%;transform:translateX(-50%);width:140vmin;height:150vmin;pointer-events:none;background:radial-gradient(ellipse 50% 42% at 50% 38%,rgba(226,221,211,0.2) 0%,rgba(226,221,211,0.1) 35%,transparent 72%)}
/* LightRays: contenedor limitado a la zona del anillo, con máscara suave (sin bordes) */
.portfolio-card-rays{position:fixed;top:0;left:50%;transform:translateX(-50%);width:74vmin;height:46vh;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 52% 92% at 50% 0%,#000 30%,transparent 76%);mask-image:radial-gradient(ellipse 52% 92% at 50% 0%,#000 30%,transparent 76%)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:0.5;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='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 3) ANILLO — centrado por construcción: stage ocupa todo el viewport, ring en su centro exacto */
/* Piso: superficie oscura sugerida + pool de luz donde cae el spotlight */
.floor{position:fixed;left:0;right:0;bottom:0;height:55vh;pointer-events:none;background:linear-gradient(to bottom,rgba(228,222,210,0) 0%,rgba(228,222,210,0.02) 45%,rgba(228,222,210,0.045) 100%)}
.floor-pool{position:fixed;left:50%;bottom:-16vh;transform:translateX(-50%);width:130vmin;height:46vh;pointer-events:none;background:radial-gradient(ellipse 48% 50% at 50% 50%,rgba(228,222,210,0.16) 0%,rgba(228,222,210,0.07) 45%,transparent 76%)}
/* Sombra suave del conjunto sobre el piso (posición/escala la controla el scroll) */
.ground-shadow{position:fixed;left:50%;top:0;width:340px;height:56px;margin-left:-170px;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.22) 55%,transparent 78%);filter:blur(12px);will-change:transform,opacity}
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px;perspective-origin:50% 50%;transform:translateY(-24vh)}
.ring{position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateZ(-1560px) rotateX(-4deg);will-change:transform}
.card{cursor:pointer;position:absolute;left:-186px;top:-252px;width:372px;height:504px;border-radius:24px;background:radial-gradient(130% 90% at 50% 0%,color-mix(in oklab,var(--tint) 55%,transparent) 0%,transparent 66%),linear-gradient(160deg,color-mix(in oklab,var(--tint) 18%,rgba(255,255,255,0.08)),rgba(255,255,255,0.04));border:1px solid color-mix(in oklab,var(--tint) 62%,rgba(255,255,255,0.16));box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 24px color-mix(in oklab,var(--tint) 26%,transparent);backface-visibility:visible;transform-style:preserve-3d;contain:layout paint style}
/* Sombras proyectadas de cada tarjeta en el piso (posicionadas por JS con la misma perspectiva) */
.floor-shadows{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.fsh{filter:blur(7px);position:absolute;left:50%;top:50%;width:100px;height:34px;margin:-17px 0 0 -50px;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.18) 65%,transparent 80%);will-change:transform,opacity}
.ci{contain:layout paint;position:relative;width:372px;height:504px;transform-origin:0 0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-radius:24px;backface-visibility:hidden;padding:26px 24px 30px;background:linear-gradient(168deg,color-mix(in oklab,var(--tint) 40%,#0e0e11) 0%,color-mix(in oklab,var(--tint) 12%,#0b0b0d) 48%,#0a0a0c 100%)}
.ci-glow{position:absolute;left:50%;top:-38%;width:140%;height:78%;transform:translateX(-50%);background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in oklab,var(--tint) 62%,transparent) 0%,transparent 70%);pointer-events:none}
.ci-shot{position:relative;flex:1 1 auto;width:100%;min-height:0;margin-bottom:18px;background:none;border:0;border-radius:0;box-shadow:none}
.ci-type{align-items:center;justify-content:center;gap:18px}
.ci-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;filter:brightness(1.02) saturate(1.15) contrast(1.04) drop-shadow(0 18px 40px rgba(0,0,0,0.5))}
.ci-foot{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;text-align:left;padding-top:20px;border-top:1px solid color-mix(in oklab,var(--tint) 38%,transparent)}
.ci-desc{grid-column:1 / -1;font-size:16px;line-height:1.35;font-weight:400;letter-spacing:0.01em;color:rgba(255,255,255,0.62);text-wrap:pretty}
.ci-logo{width:56px;height:56px;border-radius:14px;flex:none;object-fit:contain;background:color-mix(in oklab,var(--tint) 22%,transparent);padding:4px;box-shadow:0 8px 28px color-mix(in oklab,var(--tint) 55%,transparent)}
.ci-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Panel de proyecto (click en tarjeta) */
.project-panel{position:fixed;top:50%;right:5vw;transform:translateY(-50%) translateX(24px);width:min(340px,82vw);padding:28px 30px 30px;border-radius:14px;background:linear-gradient(165deg,rgba(22,22,26,0.92),rgba(14,14,17,0.92));border:1px solid color-mix(in oklab,var(--tint,#b3a7d6) 35%,rgba(255,255,255,0.14));box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 60px color-mix(in oklab,var(--tint,#b3a7d6) 12%,transparent);opacity:0;visibility:hidden;transition:opacity 0.5s ease,transform 0.5s ease,visibility 0.5s;z-index:6}
.project-panel.open{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
.pp-close{position:absolute;top:10px;right:14px;background:none;border:none;color:#8d8a83;font-size:26px;line-height:1;cursor:pointer;padding:6px}
.pp-close:hover{color:#fff}
.pp-cat{font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:color-mix(in oklab,var(--tint,#b3a7d6) 75%,#fff 15%);margin-bottom:6px}
.pp-name{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:22px;font-weight:600;color:#f2f0eb}
.pp-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pp-logo{width:46px;height:46px;border-radius:11px;object-fit:contain;flex:none}
.pp-actions{display:flex;gap:20px;flex-wrap:wrap}
.pp-app{display:inline-block;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:color-mix(in oklab,var(--tint,#b3a7d6) 80%,#fff 15%);border-bottom:1px solid color-mix(in oklab,var(--tint,#b3a7d6) 50%,transparent);padding-bottom:3px}
.pp-app:hover{color:#fff}
.pp-blurb{font-size:14px;line-height:1.6;color:#b8b5ae;margin-bottom:18px}
.pp-link{display:inline-block;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:color-mix(in oklab,var(--tint,#b3a7d6) 80%,#fff 15%);border-bottom:1px solid color-mix(in oklab,var(--tint,#b3a7d6) 50%,transparent);padding-bottom:3px}
.pp-link:hover{color:#fff}
/* Visor de proyecto a pantalla completa */
.project-viewer{position:fixed;inset:0;z-index:20;background:rgba(6,6,8,0.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity 0.4s ease,visibility 0.4s;display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.pv-shell{position:relative;display:flex;width:100%;height:100%;max-width:1320px;border-radius:18px;overflow:hidden;background:rgba(10,10,12,0.92);border:1px solid rgba(255,255,255,0.12);box-shadow:0 50px 140px rgba(0,0,0,0.7);transform:scale(0.97);transition:transform 0.4s cubic-bezier(.2,.8,.2,1)}
.project-viewer.open .pv-shell{transform:scale(1)}
.pv-info{flex:none;width:300px;overflow:hidden;padding:30px 24px 26px;display:flex;flex-direction:column;gap:20px;border-right:1px solid rgba(255,255,255,0.08);background:linear-gradient(170deg,color-mix(in oklab,var(--tint,#b3a7d6) 12%,#101013) 0%,#0c0c0e 70%);overflow-y:auto}
.pv-head{display:flex;align-items:center;gap:14px;flex:none}
.pv-scrollarea{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent;-webkit-mask-image:linear-gradient(#000 92%,transparent 100%);mask-image:linear-gradient(#000 92%,transparent 100%)}
.pv-scrollarea::-webkit-scrollbar{width:5px}
.pv-scrollarea::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:3px}
.pv-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pv-tags li{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(232,230,225,0.72);border:1px solid color-mix(in oklab,var(--tint,#b3a7d6) 34%,rgba(255,255,255,0.14));border-radius:999px;padding:5px 11px}
.pv-actions{display:flex;flex-direction:column;gap:8px;flex:none;padding-top:18px}
.pv-tab{text-align:left;font-family:inherit;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(232,230,225,0.6);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:9px;padding:12px 14px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.pv-tab:hover{color:#fff;background:rgba(255,255,255,0.08)}
.pv-tab.on{color:#fff;background:color-mix(in oklab,var(--tint,#b3a7d6) 22%,transparent);border-color:color-mix(in oklab,var(--tint,#b3a7d6) 55%,transparent)}
.pv-visit{flex:none;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:color-mix(in oklab,var(--tint,#b3a7d6) 80%,#fff 15%)}
.pv-logo{width:44px;height:44px;border-radius:11px;object-fit:contain;flex:none}
.pv-cat{font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:color-mix(in oklab,var(--tint,#b3a7d6) 75%,#fff 15%);margin-bottom:4px}
.pv-name{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:19px;font-weight:600;color:#f2f0eb}
.pv-blurb{font-size:14px;color:rgba(232,230,225,0.82);line-height:1.6}
.project-viewer.open ~ .nav{opacity:0;pointer-events:none}
.pv-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:baseline}
.pv-meta dt{font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(232,230,225,0.4);white-space:nowrap}
.pv-meta dd{font-size:12px;line-height:1.45;color:rgba(232,230,225,0.8)}
.pv-detail{font-size:12.5px;line-height:1.6;color:rgba(232,230,225,0.56);padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
.pv-body{position:relative;flex:1;min-width:0;overflow:hidden}
.pv-frame{position:absolute;top:50%;left:50%;transform-origin:50% 50%;border:0;background:#fff;display:none}
.project-viewer.app .pv-frame{display:block}
.project-viewer.app .pv-scroll{display:none}
.project-viewer.open{opacity:1;visibility:visible}
.pv-scroll{position:absolute;inset:0;overflow-y:auto;padding:34px 34px 46px;display:flex;flex-direction:column;gap:26px;align-items:center}
.pv-scroll img{width:100%;max-width:1000px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);box-shadow:0 30px 80px rgba(0,0,0,0.65);display:block}
.pv-close{position:absolute;top:14px;right:16px;z-index:22;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:50%;width:44px;height:44px;color:#c9c6bf;font-size:24px;line-height:1;cursor:pointer}
.pv-close:hover{color:#fff;background:rgba(255,255,255,0.12)}
.ci-name{font-size:26px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.92);line-height:1.2}
.ci-cat{font-size:14px;font-weight:500;letter-spacing:0.24em;text-transform:uppercase;color:color-mix(in oklab,var(--tint) 90%,#ffffff 10%);opacity:1}
.card:nth-child(1){transform:rotateY(0.000deg) translateZ(672px)}
.card:nth-child(2){transform:rotateY(45.000deg) translateZ(672px)}
.card:nth-child(3){transform:rotateY(90.000deg) translateZ(672px)}
.card:nth-child(4){transform:rotateY(135.000deg) translateZ(672px)}
.card:nth-child(5){transform:rotateY(180.000deg) translateZ(672px)}
.card:nth-child(6){transform:rotateY(225.000deg) translateZ(672px)}
.card:nth-child(7){transform:rotateY(270.000deg) translateZ(672px)}
.card:nth-child(8){transform:rotateY(315.000deg) translateZ(672px)}
/* 4) TÍTULO — capa delante del anillo, mismo centro */
.hero{perspective:1100px;perspective-origin:50% 42%;position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none;transform:translateY(7vh);will-change:transform,opacity,filter}
.kicker{font-size:12px;letter-spacing:0.55em;font-weight:400;color:#8d8a83;text-transform:uppercase;text-indent:0.55em}
.title-3d{position:relative;text-align:center}
.title{position:relative;z-index:3;font-family:'Fredoka','Archivo',sans-serif;font-weight:700;font-size:clamp(70px,12.5vw,190px);line-height:0.95;letter-spacing:0.005em;color:transparent;--shim-spread:130px;background-image:linear-gradient(90deg,transparent calc(50% - var(--shim-spread)),rgba(255,255,255,0.3),transparent calc(50% + var(--shim-spread))),repeating-linear-gradient(0deg,rgba(0,0,0,0.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,0.05) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2a2b2e 0%,#151618 55%,#0b0c0d 100%);background-size:250% 100%,auto,auto,auto;background-repeat:no-repeat,repeat,repeat,repeat;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(255,255,255,0.14));animation:titleShimmer 9s linear infinite}
@keyframes titleShimmer{from{background-position:100% center,0 0,0 0,0 0}to{background-position:0% center,0 0,0 0,0 0}}
.t-ext{display:none}
@keyframes shimmer{from{background-position:100% center}to{background-position:0% center}}
/* 5) PALABRAS ALREDEDOR — decorativas, posicionadas absolutas, no afectan el layout central */
/* Navbar flotante */
.nav{position:fixed;top:24px;left:32px;z-index:30;display:flex;flex-direction:column;align-items:center;padding:11px 22px;border-radius:999px;border:1px solid #333;background:rgba(31,31,31,0.55);backdrop-filter:blur(8px);width:auto;max-width:calc(100% - 2rem);transition:border-radius .01s}
.nav.open{border-radius:18px}
.nav-row{display:flex;align-items:center;gap:28px}
.nav-logo{position:relative;width:20px;height:20px;background:none;border:0;cursor:pointer;flex:none}
.nav-logo span{position:absolute;width:6px;height:6px;border-radius:50%;background:#e6e4df;opacity:.8;transition:opacity .25s,transform .25s}
.nav-logo span:nth-child(1){top:0;left:50%;transform:translateX(-50%)}
.nav-logo span:nth-child(2){left:0;top:50%;transform:translateY(-50%)}
.nav-logo span:nth-child(3){right:0;top:50%;transform:translateY(-50%)}
.nav-logo span:nth-child(4){bottom:0;left:50%;transform:translateX(-50%)}
.nav-logo:hover span{opacity:1}
.nav-links{display:flex;align-items:center;gap:22px}
.nlink{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:13px;display:block;height:20px;overflow:hidden}
.nlink-in{display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nlink-in span{display:block;height:20px;line-height:20px;color:#b8b5ae}
.nlink-in span:last-child{color:#fff}
.nlink:hover .nlink-in{transform:translateY(-20px)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-ghost{font-family:inherit;font-size:12px;padding:8px 14px;border-radius:999px;border:1px solid #333;background:rgba(31,31,31,0.62);color:#c9c6bf;cursor:pointer;transition:color .2s,border-color .2s}
.nav-ghost:hover{color:#fff;border-color:rgba(255,255,255,0.5)}
.nav-glowwrap{position:relative}
.nav-glowwrap::before{content:'';position:absolute;inset:-8px;border-radius:999px;background:#f1efe9;opacity:.35;filter:blur(14px);pointer-events:none;transition:opacity .3s,filter .3s,inset .3s}
.nav-glowwrap:hover::before{opacity:.55;filter:blur(20px);inset:-12px}
.nav-primary{position:relative;z-index:1;font-family:inherit;font-size:12px;font-weight:500;padding:8px 16px;border-radius:999px;border:0;color:#0a0a0b;background:linear-gradient(135deg,#f4f2ec,#c9c6bf);cursor:pointer;transition:filter .2s}
.nav-primary:hover{filter:brightness(1.08)}
.nav-burger{display:none;width:30px;height:30px;background:none;border:0;color:#c9c6bf;cursor:pointer}
.nav-burger svg{width:22px;height:22px}
.nav-drop{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .3s ease,opacity .3s ease,padding-top .3s ease}
.nav.open .nav-drop{max-height:260px;opacity:1;pointer-events:auto;padding-top:14px}
.nlink-m{font-family:inherit;font-size:15px;background:none;border:0;color:#c9c6bf;padding:11px;cursor:pointer;text-align:center;border-radius:10px}
.nlink-m:hover{color:#fff;background:rgba(255,255,255,0.06)}
@media (max-width:720px){.nav-links{display:none}.nav-burger{display:flex;align-items:center;justify-content:center}.nav{left:16px;right:16px;width:auto;max-width:none}.nav-row{width:100%;justify-content:space-between;gap:14px}}
/* Hoja About / Work / Contact */
.sheet{position:fixed;inset:0;z-index:31;display:flex;align-items:center;justify-content:center;padding:6vh 5vw;background:rgba(6,6,8,0.55);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
.sheet.open{opacity:1;visibility:visible}
.sheet-card{position:relative;width:min(680px,100%);max-height:100%;overflow-y:auto;padding:44px 46px 46px;border-radius:18px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(170deg,#131316 0%,#0b0b0d 70%);box-shadow:0 50px 140px rgba(0,0,0,0.7);transform:translateY(14px) scale(.98);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sheet.open .sheet-card{transform:none}
.sheet-close{position:absolute;z-index:6;top:14px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#c9c6bf;font-size:22px;line-height:1;cursor:pointer}
.sheet-close:hover{color:#fff;background:rgba(255,255,255,0.12)}
.sh-pane{display:none}
.sh-pane.on{display:block}
.sh-kicker{font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:#8d8a83;margin-bottom:10px}
.sh-title{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:34px;font-weight:600;color:#f2f0eb;margin-bottom:14px}
.sh-lead{font-size:16px;line-height:1.65;color:rgba(232,230,225,0.78);max-width:52ch}
.sh-list,.sh-links,.sh-work{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:26px}
.sh-list li{display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
.sh-list b{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#b3a7d6;font-weight:500}
.sh-list span{font-size:14px;line-height:1.6;color:rgba(232,230,225,0.66)}
.sh-form{display:flex;flex-direction:column;gap:14px;margin-top:26px;max-width:52ch}
.shf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shf-field{display:flex;flex-direction:column;gap:6px}
.shf-field>span{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:#8d8a83}
.shf-field input,.shf-field textarea{font-family:inherit;font-size:14px;color:#f2f0eb;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);border-radius:10px;padding:11px 13px;outline:none;resize:vertical}
.shf-field input:focus,.shf-field textarea:focus{border-color:rgba(179,167,214,0.7);background:rgba(255,255,255,0.07)}
.shf-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.shf-send{position:relative;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#f5f5f5;background:rgba(255,255,255,0.03);border:0;border-radius:999px;padding:14px 30px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 8px 24px rgba(0,0,0,0.25);transition:transform .2s ease,opacity .2s ease}
.shf-send:hover{transform:translateY(-1px)}
.shf-send:disabled{opacity:0.5;cursor:default;transform:none}
.shf-note{font-size:13px;line-height:1.5;color:rgba(232,230,225,0.6)}
.shf-note.ok{color:#8fb3a3}
.shf-note.bad{color:#d9a8b8}
.shf-note a{color:inherit;text-decoration:underline}
@media (max-width:560px){.shf-row{grid-template-columns:1fr}}
.sh-links li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
.sh-links a{font-size:18px;color:#f2f0eb}
.sh-links a:hover{color:#b3a7d6}
.sh-todo{font-size:16px;color:rgba(232,230,225,0.42);border-bottom:1px dashed rgba(255,255,255,0.2)}
.sh-list b{color:#8d8a83}
.sh-links span{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#8d8a83}
.sh-work{gap:8px}
.sh-work button{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:inherit;text-align:left;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:11px;padding:14px 16px;cursor:pointer;transition:background .2s,border-color .2s}
.sh-work button:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.16)}
.sh-work b{font-size:15px;font-weight:500;color:#f2f0eb}
.sh-work span{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#8d8a83}
/* Morphing category bajo el título — blur + threshold SVG (efecto gooey del componente) */
.morphing-category{position:relative;width:min(92vw,760px);height:52px;margin-top:2px;overflow:visible;text-align:center;filter:url(#morph-threshold) blur(0.5px)}
.morph-filters{position:absolute;width:0;height:0;pointer-events:none}
.morph-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:'Fredoka','Archivo',sans-serif;font-size:clamp(21px,2.4vw,36px);font-weight:600;letter-spacing:-0.02em;text-indent:0;color:#fff;text-transform:uppercase;will-change:opacity,filter;transform:translateZ(0)}

/* Toggle del ambiente sonoro */
.sound-toggle{position:relative;z-index:1;display:flex;align-items:flex-end;gap:3px;height:34px;padding:0 12px;border-radius:999px;background:rgba(20,20,24,0.55);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(10px);cursor:pointer;transition:border-color .25s,background .25s}
.sound-toggle:hover{border-color:rgba(255,255,255,0.3);background:rgba(28,28,34,0.7)}
.sound-toggle .sb{width:2px;height:7px;border-radius:2px;background:rgba(232,230,225,0.45);margin-bottom:12px;transition:background .3s}
.sound-toggle.on .sb{background:#e8e6e1;animation:sbeat 2.6s ease-in-out infinite}
.sound-toggle.on .sb:nth-child(2){animation-duration:3.4s;animation-delay:-.5s}
.sound-toggle.on .sb:nth-child(3){animation-duration:2.1s;animation-delay:-1.1s}
.sound-toggle.on .sb:nth-child(4){animation-duration:3.9s;animation-delay:-1.7s}
@keyframes sbeat{0%,100%{height:5px}50%{height:15px}}
@media (max-width:720px){.sound-dock{right:14px;bottom:14px}.sound-dock:hover .sound-vol,.sound-dock:focus-within .sound-vol{width:96px}}


.pv-expand{position:absolute;top:14px;right:70px;z-index:22;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:50%;width:44px;height:44px;color:#c9c6bf;cursor:pointer;transition:color .2s,background .2s}
.pv-expand:hover{color:#fff;background:rgba(255,255,255,0.12)}
.pv-expand svg{width:19px;height:19px}
.pv-expand .pvx-in{display:none}
.project-viewer.wide .pv-expand .pvx-in{display:block}
.project-viewer.wide .pv-expand .pvx-out{display:none}
.pv-info{transition:width .32s ease,opacity .24s ease,padding .32s ease}
.project-viewer.wide .pv-info{width:0;padding-left:0;padding-right:0;opacity:0;border-right:0;pointer-events:none}
.pv-shell{transition:transform .5s cubic-bezier(.2,.8,.25,1),max-width .32s ease,border-radius .32s ease}
.project-viewer.wide .pv-shell{max-width:100%;border-radius:0}

.scroll-cue{margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:12px;justify-content:center;pointer-events:none;animation:scCueIn 1.2s 1.6s ease both}
.sc-drop{position:relative;display:block;width:44px;height:48px;animation:scShell 7s cubic-bezier(.4,0,.5,1) infinite}
.sc-drop::before{content:"";position:absolute;left:50%;top:2px;width:1px;height:30px;margin-left:-0.5px;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.18) 55%,rgba(255,255,255,0.05));pointer-events:none}
.sc-bead{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,0.95),0 0 18px rgba(190,225,255,0.75),0 0 34px rgba(140,200,255,0.4);animation:scFall 7s cubic-bezier(.45,0,.35,1) infinite}
.sc-ring{position:absolute;left:50%;top:34px;width:8px;height:8px;margin-left:-4px;border-radius:50%;border:2px solid rgba(255,255,255,0.95);box-shadow:0 0 12px rgba(170,215,255,0.5);opacity:0;animation:scRipple 7s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes scFall{0%{transform:translateY(-2px) scaleY(.7);opacity:0}6%{opacity:1}17%{transform:translateY(27px) scaleY(1.8) scaleX(.65);opacity:1}21.5%{transform:translateY(35px) scaleY(.35) scaleX(1.6);opacity:0}100%{transform:translateY(35px);opacity:0}}
@keyframes scRipple{0%,18.5%{transform:scale(.3);opacity:0}21.5%{opacity:1}33%,100%{transform:scale(4.4);opacity:0}}
@keyframes scCueIn{from{opacity:0}to{opacity:1}}
@keyframes scCuePulse{0%,22%{opacity:1}48%{opacity:.15}66%{opacity:.15}88%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sc-bead,.sc-ring{animation:none}.sc-bead{transform:translateY(12px)}.scroll-cue{animation:scCueIn 1.2s 1.6s ease both}}

.ab-name{position:relative;display:flex;flex-wrap:wrap;gap:0.34em;font-family:'Archivo Expanded','Archivo',sans-serif;font-size:clamp(34px,5vw,46px);font-weight:600;line-height:1.1;color:#f6f4ef;margin-bottom:18px;user-select:none}
.focus-word{position:relative;filter:blur(5px);transition:filter .6s ease}
.focus-word.active{filter:blur(0)}
.ab-sol{font-weight:400;background:linear-gradient(96deg,#f2f0eb,#9a95cf 45%,#6f7fd8);-webkit-background-clip:text;background-clip:text;color:transparent}
.focus-frame{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:transform .6s cubic-bezier(.2,.8,.25,1),width .6s cubic-bezier(.2,.8,.25,1),height .6s,opacity .4s}
.focus-frame .corner{position:absolute;width:11px;height:11px;border:2px solid rgba(155,150,210,0.9);border-radius:2px;filter:drop-shadow(0 0 5px rgba(140,150,240,0.7))}
.focus-frame .tl{top:-9px;left:-9px;border-right:none;border-bottom:none}
.focus-frame .tr{top:-9px;right:-9px;border-left:none;border-bottom:none}
.focus-frame .bl{bottom:-9px;left:-9px;border-right:none;border-top:none}
.focus-frame .br{bottom:-9px;right:-9px;border-left:none;border-top:none}
@media (prefers-reduced-motion:reduce){.focus-word{filter:none}.focus-frame{display:none}}

.ab-lead{font-size:19px;line-height:1.55;max-width:44ch;text-wrap:pretty;background-image:linear-gradient(120deg,#a9a6a0 0%,#a9a6a0 35%,#ffffff 50%,#a9a6a0 65%,#a9a6a0 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:abShine 5s linear infinite}
@keyframes abShine{0%{background-position:150% center}70%,100%{background-position:-50% center}}
@media (prefers-reduced-motion:reduce){.ab-lead{animation:none;background-position:-50% center}}
.ab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:30px 0 4px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);border-radius:12px;overflow:hidden}
.ab-stats div{display:flex;flex-direction:column;gap:5px;padding:18px 16px;background:linear-gradient(170deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012))}
.ab-stats b{font-family:'Archivo Expanded','Archivo',sans-serif;font-size:26px;font-weight:600;color:#f2f0eb;line-height:1}
.ab-stats span{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(232,230,225,0.45);line-height:1.4}
.ab-list{list-style:none;display:flex;flex-direction:column;gap:2px;margin-top:26px}
.ab-list li{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,0.07);transition:padding-left .25s ease,border-color .25s ease}
.ab-list li:hover{padding-left:8px;border-color:rgba(255,255,255,0.18)}
.ab-list b{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:#8d8a83;font-weight:500}
.ab-list span{font-size:15px;line-height:1.6;color:rgba(232,230,225,0.72);text-wrap:pretty}
.ab-note{margin-top:26px;padding-left:16px;border-left:1px solid rgba(255,255,255,0.16);font-size:14px;line-height:1.6;color:rgba(232,230,225,0.5);max-width:52ch}
@media (max-width:560px){.wk-inner{grid-template-columns:1fr}.wk-side{text-align:left;align-items:flex-start}.ab-stats{grid-template-columns:1fr}.ab-list li{grid-template-columns:1fr;gap:6px}}

.ab-name{overflow:hidden}
.sp-char{display:inline-block;will-change:transform,opacity}
.ab-name em .sp-char{background-image:linear-gradient(96deg,#f2f0eb,#9a95cf 45%,#6f7fd8);background-size:6ch 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes spChar{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sp-char{animation:none!important;opacity:1!important;transform:none!important}}

.bl-text{display:flex;flex-wrap:wrap;gap:0 0.28em}
.bl-word{display:inline-block;will-change:transform,filter,opacity}
@keyframes blWord{0%{filter:blur(10px);opacity:0;transform:translateY(-50px)}50%{filter:blur(5px);opacity:.5;transform:translateY(5px)}100%{filter:blur(0);opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bl-word{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}}

.shiny-text{background-image:linear-gradient(120deg,#a9a6a0 0%,#a9a6a0 35%,#ffffff 50%,#a9a6a0 65%,#a9a6a0 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:abShine 5s linear infinite}
@media (prefers-reduced-motion:reduce){.shiny-text{animation:none;background-position:-50% center}}

.shf-send.no-fx{background:#e8e6e1;color:#14131a}
.shf-fx{position:absolute;inset:-20px;pointer-events:none;z-index:1}
.shf-fx canvas{display:block;width:100%;height:100%}
.shf-label{position:relative;z-index:2}
.shf-send:active{transform:scale(0.97)}

.sp-text{overflow:hidden}
.sp-char{display:inline-block;will-change:transform,opacity}
.sp-char.sp-sp{width:0.3em}
@keyframes spChar{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sp-char{animation:none!important;opacity:1!important;transform:none!important}}

.sh-work{gap:10px}
.wk{border:1px solid color-mix(in oklab,var(--tint) 34%,rgba(255,255,255,0.08));border-radius:14px;overflow:hidden;background:linear-gradient(168deg,color-mix(in oklab,var(--tint) 9%,rgba(255,255,255,0.02)),rgba(255,255,255,0.012));transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.wk:hover{border-color:color-mix(in oklab,var(--tint) 62%,transparent);box-shadow:0 0 20px color-mix(in oklab,var(--tint) 18%,transparent)}
.wk.open{border-color:color-mix(in oklab,var(--tint) 78%,transparent);box-shadow:0 0 28px color-mix(in oklab,var(--tint) 26%,transparent),inset 0 1px 0 rgba(255,255,255,0.05)}
.sh-work .wk-head{width:100%;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:16px 18px;background:none;border:0;font-family:inherit;text-align:left;cursor:pointer}
.sh-work .wk-head b{font-size:15px;font-weight:500;color:#f2f0eb}
.sh-work .wk-head span{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:color-mix(in oklab,var(--tint) 78%,#ffffff 12%)}
.wk-caret{width:7px;height:7px;border-right:1.5px solid rgba(255,255,255,0.45);border-bottom:1.5px solid rgba(255,255,255,0.45);transform:rotate(45deg) translateY(-2px);transition:transform .35s cubic-bezier(.2,.8,.25,1)}
.wk.open .wk-caret{transform:rotate(-135deg) translateY(-2px)}
.wk-body{height:0;overflow:hidden;cursor:pointer;transition:height .42s cubic-bezier(.2,.8,.25,1)}
.wk-inner{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start;padding:2px 18px 18px}
.wk-side{display:flex;flex-direction:column;gap:10px;text-align:right;align-items:flex-end}
.wk-shot{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center top;border-radius:10px;border:1px solid color-mix(in oklab,var(--tint) 34%,rgba(255,255,255,0.1))}
.wk-desc{margin:0;font-size:14px;line-height:1.55;color:rgba(232,230,225,0.66);text-wrap:pretty}
.wk-go{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:color-mix(in oklab,var(--tint) 85%,#ffffff 10%)}


.ab-stats span.tt{display:inline-block;white-space:pre-wrap;min-height:1.4em}
.tt-cur{margin-left:0.2em;display:inline-block;animation:ttBlink 1s steps(1) infinite}
@keyframes ttBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tt-cur{display:none}}

.intro-veil{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,rgba(18,18,21,0.88) 0%,#08080a 62%);backdrop-filter:blur(60px) saturate(0.35);-webkit-backdrop-filter:blur(60px) saturate(0.35);opacity:1;transition:opacity 5.2s cubic-bezier(.35,.05,.2,1),backdrop-filter 5.2s cubic-bezier(.35,.05,.2,1),-webkit-backdrop-filter 5.2s cubic-bezier(.35,.05,.2,1)}
.intro-veil.lift{opacity:0;backdrop-filter:blur(0) saturate(1);-webkit-backdrop-filter:blur(0) saturate(1)}
html.intro .hero{opacity:0}
.hero{transition:opacity 2.8s ease 2s}
html.introdone .hero{transition:none}
@media (prefers-reduced-motion:reduce){.intro-veil{display:none}html.intro .hero{opacity:1}}

.sc-word{animation:scGlow 7s cubic-bezier(.45,0,.35,1) infinite;font-family:'Archivo',sans-serif;font-size:9px;font-weight:500;letter-spacing:0.4em;text-transform:uppercase;color:rgba(232,230,225,0.34);text-indent:0.4em}

@keyframes scShell{0%,21%{opacity:1}44%,100%{opacity:0}}
@keyframes scGlow{0%{opacity:0;color:rgba(232,230,225,0.12);text-shadow:none;filter:blur(2px)}6%{opacity:1;filter:blur(0)}17%{opacity:1;color:rgba(255,255,255,0.95);text-shadow:0 0 12px rgba(190,225,255,0.6);filter:blur(0)}22%{opacity:1;color:rgba(255,255,255,0.95);text-shadow:0 0 16px rgba(190,225,255,0.75);filter:blur(0)}44%{opacity:0;color:rgba(255,255,255,0.95);text-shadow:0 0 16px rgba(190,225,255,0.4);filter:blur(3px)}44.1%,100%{opacity:0;color:rgba(232,230,225,0.12);text-shadow:none;filter:blur(2px)}}

.sound-dock{position:fixed;right:22px;bottom:20px;z-index:40;display:flex;align-items:center;gap:0}
.sound-vol{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:22px;margin:0;background:transparent;cursor:pointer;transition:width .32s cubic-bezier(.2,.8,.25,1),opacity .28s ease,margin .32s ease;pointer-events:none}
.sound-dock:hover .sound-vol,.sound-dock:focus-within .sound-vol{width:132px;opacity:1;margin-right:10px;pointer-events:auto}
.sound-vol::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0.75) var(--vfill,20%),rgba(255,255,255,0.16) var(--vfill,20%))}
.sound-vol::-moz-range-track{height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0.75) var(--vfill,20%),rgba(255,255,255,0.16) var(--vfill,20%))}
.sound-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#e8e6e1;box-shadow:0 0 10px rgba(255,255,255,0.45)}
.sound-vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#e8e6e1;box-shadow:0 0 10px rgba(255,255,255,0.45)}

/* Visor de proyecto en telefono: se apila y el app ocupa casi toda la pantalla */
@media (max-width:860px){
.project-viewer{padding:0;align-items:stretch}
.pv-shell{flex-direction:column;max-width:100%;border-radius:0;border:0}
.pv-info{width:100%;flex:none;padding:14px 16px 12px;gap:10px;border-right:0;border-bottom:1px solid rgba(255,255,255,0.08)}
.pv-head{padding-right:60px;gap:10px}
.pv-logo{width:34px;height:34px;border-radius:9px}
.pv-name{font-size:16px}
.pv-cat{font-size:9px;letter-spacing:0.24em}
.pv-scrollarea{max-height:22vh;-webkit-mask-image:none;mask-image:none;gap:12px}
.project-viewer.app .pv-scrollarea{display:none}
.pv-actions{flex-direction:row;gap:8px;padding-top:0}
.pv-tab{flex:1;text-align:center;font-size:10.5px;letter-spacing:0.08em;padding:12px 6px;white-space:nowrap}
.pv-visit{padding-top:2px}
.pv-body{flex:1;min-height:0}
.pv-scroll{padding:16px 14px 28px;gap:16px}
.pv-scroll img{max-width:100%}
.pv-expand{display:none}
.pv-close{top:10px;right:12px;width:40px;height:40px}
.project-viewer.wide .pv-info{width:100%;padding:14px 16px 12px;opacity:1;pointer-events:auto;border-right:0}
}