/* ══════════════════════════════════════════════════════════════
   DEPTH — capa visual: profundidad, glassmorphism, sombras, motion.
   Se carga DESPUES de main.css y solo sobrescribe. JS: js/depth.js
   ══════════════════════════════════════════════════════════════ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-fp:cubic-bezier(.77,0,.175,1);
  --g-bg:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 55%,rgba(255,255,255,.02));
  --g-bg-solid:rgba(18,18,22,.72);
  --g-line:rgba(255,255,255,.13);
  --g-line-hi:rgba(255,255,255,.28);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.02);
  --sh-1:0 1px 2px rgba(0,0,0,.45),0 6px 16px -6px rgba(0,0,0,.6);
  --sh-2:0 2px 4px rgba(0,0,0,.4),0 14px 30px -10px rgba(0,0,0,.7),0 40px 80px -30px rgba(0,0,0,.8);
  --sh-3:0 4px 8px rgba(0,0,0,.35),0 24px 48px -12px rgba(0,0,0,.75),0 70px 120px -40px rgba(0,0,0,.9);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --blur-glass:blur(22px) saturate(165%);
}

/* ── Film grain global (muy sutil, solo transform) ── */
body::after{
  content:"";position:fixed;inset:-60px;z-index:190;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.045;
  animation:dpGrain 1.1s steps(5) infinite;
}
@keyframes dpGrain{
  0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-22px,14px,0)}40%{transform:translate3d(18px,-26px,0)}
  60%{transform:translate3d(-12px,30px,0)}80%{transform:translate3d(28px,8px,0)}100%{transform:translate3d(0,0,0)}
}

/* ── Focus visible ── */
:focus:not(:focus-visible){outline:none;}
:focus-visible{outline:2px solid rgba(255,255,255,.92);outline-offset:3px;}
.pitem:focus-visible,.ext-card:focus-visible{outline-offset:4px;}
.dot:focus-visible{outline-offset:4px;border-radius:50%;}

/* ══════════════════════════════════════════════
   NAV — barra de cristal flotante (pill)
   ══════════════════════════════════════════════ */
nav,nav.solid{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
nav::before{
  content:"";position:absolute;inset:.45rem 1.1rem;z-index:-1;border-radius:99px;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,28,34,.62),rgba(12,12,16,.5));
  border:1px solid var(--g-line);
  box-shadow:var(--g-hi),0 10px 30px -10px rgba(0,0,0,.8),0 30px 60px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  opacity:0;transform:translate3d(0,-10px,0) scale(.97);
  transition:opacity .6s var(--ease-out),transform .8s var(--ease-out);
}
nav.solid::before{opacity:1;transform:none;}
.nav-logo{transition:opacity .2s;}
.nav-logo:hover{opacity:.7;}
.nav-r a{position:relative;padding:4px 0;}
.nav-r a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);}
.nav-r a:hover::after{transform:scaleX(1);transform-origin:left;}
.lang-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid var(--g-line) !important;box-shadow:var(--g-hi);
}
.lang-btn:hover{border-color:var(--g-line-hi) !important;background:rgba(255,255,255,.12);}

/* ── Mobile menu glass ── */
.mob-menu{
  background:rgba(6,6,10,.55);
  -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%);
}
.mob-menu.open a{animation:dpMobIn .7s var(--ease-out) both;}
.mob-menu.open a:nth-child(2){animation-delay:.06s;}
.mob-menu.open a:nth-child(3){animation-delay:.12s;}
.mob-menu.open .lang-btn{animation:dpMobIn .7s var(--ease-out) .18s both;}
@keyframes dpMobIn{from{opacity:0;transform:translate3d(0,24px,0);}}

/* ── Dots: capsula de cristal ── */
.dots{
  padding:12px 8px;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--g-hi),var(--sh-1);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
}
.dot{background:rgba(255,255,255,.28);}
.dot:hover{background:rgba(255,255,255,.6);}
.dot.on{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.75);}

/* ══════════════════════════════════════════════
   TRANSICIONES DE SECCION CON PROFUNDIDAD
   (sincronizadas con #fp: .95s cubic-bezier(.77,0,.175,1))
   ══════════════════════════════════════════════ */
.dp .sec{
  transform-origin:50% 50%;
  transition:transform .95s var(--ease-fp),opacity .95s var(--ease-fp);
  backface-visibility:hidden;
}
.dp .sec.is-above{transform:translate3d(0,18vh,0) scale(.88);opacity:.28;}
.dp .sec.is-below{transform:scale(.92);opacity:.4;}

/* Reveal escalonado */
.dp .rv{opacity:0;translate:0 26px;}
.dp .in-view .rv{
  opacity:1;translate:0 0;
  transition-property:opacity,translate,color,background-color,border-color,box-shadow,transform,filter;
  transition-duration:.8s,1.05s,.25s,.25s,.25s,.45s,.5s,.3s;
  transition-timing-function:var(--ease-out);
  transition-delay:calc(var(--rv-i,0) * 55ms + .34s),calc(var(--rv-i,0) * 55ms + .34s),0s,0s,0s,0s,0s,0s;
}
/* tilt de tarjetas lo suaviza JS: sin transicion de transform */
.dp .in-view .pitem.rv,.dp .in-view .ext-card.rv{transition-duration:.8s,1.05s,.25s,.25s,.25s,.45s,0s,.3s;}

/* Fondos con "aire": luz ambiental muy suave */
#s2::before,#s3::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 60% at 50% -10%,rgba(255,255,255,.07),transparent 60%),
             radial-gradient(60% 50% at 100% 110%,rgba(155,59,255,.06),transparent 70%);
}
.s2-wrap,.ab{position:relative;z-index:1;}
@media (min-width:769px){.ab{padding-top:clamp(4.75rem,10vh,6.5rem);}}

/* ══════════════════════════════════════════════
   HERO — escena por capas
   lejos: Voronoi  ·  medio: cristal  ·  cerca: logo
   ══════════════════════════════════════════════ */
#hcv{transform:scale(1.06);transform-origin:50% 50%;}
.hero-depth{position:absolute;inset:0;z-index:2;pointer-events:none;}
.hero-glass{
  position:absolute;overflow:hidden;
  border-radius:clamp(22px,2.6vw,46px);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 42%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 0 -50px 90px -40px rgba(255,255,255,.12),
    0 30px 60px -20px rgba(0,0,0,.75),
    0 80px 160px -40px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(28px) saturate(175%) brightness(1.06);
  backdrop-filter:blur(28px) saturate(175%) brightness(1.06);
  transform-origin:50% 50%;
}
/* grano dentro del cristal */
.hero-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:var(--noise);background-size:160px 160px;opacity:.16;
}
/* reflejo especular que se desplaza con el raton (via --gx/--gy) */
.hero-glass::after{
  content:"";position:absolute;top:-60%;left:-40%;width:90%;height:220%;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 56%,transparent 64%);
  transform:translate3d(var(--gx,0px),var(--gy,0px),0) rotate(8deg);
  pointer-events:none;
}
/* canto iluminado (luz de borde superior-izquierdo) */
.hero-glass-edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.22),transparent 45%),
    radial-gradient(80% 40% at 100% 100%,rgba(255,255,255,.08),transparent 50%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;
}
.hero-glass--main{left:34vw;top:19vh;width:min(54vw,1040px);height:58vh;}
.hero-glass--back{
  right:4vw;top:9vh;width:clamp(160px,20vw,380px);height:clamp(140px,26vh,300px);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  opacity:.75;border-radius:clamp(18px,2vw,34px);
}
.hero-glass--chip{
  left:83vw;top:63vh;width:clamp(70px,8vw,150px);aspect-ratio:1;height:auto;border-radius:50%;
  -webkit-backdrop-filter:blur(18px) saturate(190%) brightness(1.12);backdrop-filter:blur(18px) saturate(190%) brightness(1.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -12px 24px -8px rgba(255,255,255,.18),0 24px 50px -12px rgba(0,0,0,.85);
}
.hero-vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(0,0,0,.6) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.45),transparent 18%);
}

/* logo en primer plano + sombra proyectada separada */
.hero-logo{position:relative;align-self:flex-start;max-width:100%;}
.hero-logo .hero-logo-img{position:relative;z-index:1;filter:drop-shadow(0 0 1px rgba(0,0,0,.6));will-change:transform;}
.hero-logo .hero-logo-shadow{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;
  filter:brightness(0) blur(14px);opacity:.78;
  will-change:transform;pointer-events:none;
}

/* eyebrow + fila inferior: pastillas de cristal */
.hero-ey-wrap{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  padding:7px 15px 7px 11px;margin-bottom:1.5rem;border-radius:99px;
  background:rgba(10,10,14,.32);border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--g-hi),var(--sh-1);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.hero-ey-wrap .hero-ey{margin-bottom:0;color:rgba(255,255,255,.86) !important;}
.hero-ey-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12),0 0 12px rgba(255,255,255,.8);animation:dpBeat 2.4s ease-in-out infinite;}
@keyframes dpBeat{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.75);}}
.hero-bot{align-items:center;}
.hero-sub,.hero-scroll{
  padding:8px 16px;border-radius:99px;
  background:rgba(10,10,14,.32);border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--g-hi),var(--sh-1);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
}
.hero-sub{color:rgba(255,255,255,.88) !important;}
.hero-scroll{animation:none;color:rgba(255,255,255,.8) !important;letter-spacing:.16em;text-transform:uppercase;}
.dp #s1.in-view .hero-scroll.rv{animation:dpFloat 3.2s ease-in-out 1.6s infinite;}
@keyframes dpFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(0,5px,0);}}

/* intro (solo carga) */
.hero-glass--main{animation:dpGlassIn 1.6s var(--ease-out) .15s both;}
.hero-glass--back{animation:dpGlassInSoft 1.8s var(--ease-out) .35s both;}
.hero-glass--chip{animation:dpGlassIn 1.6s var(--ease-out) .55s both;}
@keyframes dpGlassIn{from{opacity:0;scale:.9;}}
@keyframes dpGlassInSoft{from{opacity:0;scale:.94;}to{opacity:.75;}}

/* ══════════════════════════════════════════════
   WORK / LAB
   ══════════════════════════════════════════════ */
/* Tabs: segmentado de cristal con indicador deslizante */
.tabs{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-self:flex-start;
  padding:4px;border:1px solid rgba(255,255,255,.1) !important;border-radius:99px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:var(--g-hi),var(--sh-2);
  margin-bottom:clamp(.5rem,1.2vh,.9rem);
}
.tab{
  position:relative;z-index:1;border:none !important;border-radius:99px;
  padding:clamp(.45rem,1.1vh,.65rem) clamp(1.2rem,2.4vw,2.2rem);
  font-size:clamp(11px,1.15vw,15px);font-weight:700;letter-spacing:.14em;
  transition:color .35s var(--ease-out);
}
.tab.on{color:#fff !important;}
.tab:not(.on):hover{color:rgba(255,255,255,.92) !important;}
.tab-ind{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:99px;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-out);
}
.tabs.is-lab .tab-ind{transform:translate3d(100%,0,0);}

/* Filtros + pager */
.fbtn{
  border:1px solid rgba(255,255,255,.1) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),var(--sh-1);
}
.fbtn:hover{border-color:rgba(255,255,255,.28) !important;transform:translate3d(0,-1px,0);}
.fbtn.on{
  color:#fff !important;border-color:rgba(255,255,255,.34) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px -6px rgba(0,0,0,.9),0 0 22px -6px rgba(255,255,255,.25);
}
.pg-btn{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--sh-1);
}
.pg-btn:hover:not(:disabled){box-shadow:0 0 0 4px rgba(255,255,255,.08),0 10px 24px -8px rgba(255,255,255,.35);}

/* Grid: aire para sombras y elevacion */
.proj-page{gap:clamp(6px,.75vw,12px);padding:6px 2px 14px;}
.proj-grid.paged{overflow:hidden;}
@supports (overflow:clip){.proj-grid.paged{overflow-x:clip;overflow-y:visible;}}

/* Tarjetas */
.pitem{
  isolation:isolate;border-radius:10px;
  background:#0b0b0e;
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 8px 20px -10px rgba(0,0,0,.8);
  transform-style:flat;
}
.pitem.is-tilt,.pitem:hover{z-index:3;box-shadow:0 2px 4px rgba(0,0,0,.4),0 22px 40px -14px rgba(0,0,0,.9),0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);}
.pitem-bg{border-radius:inherit;overflow:hidden;}
/* borde de luz interior */
.pitem-bg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14);
}
/* brillo especular que sigue al cursor (solo transform) */
.pitem::after,.ext-card::after{
  content:"";position:absolute;left:0;top:0;width:150%;aspect-ratio:1;z-index:4;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.2),rgba(255,255,255,.05) 45%,transparent 70%);
  transform:translate3d(calc(var(--px,50%) - 50%),calc(var(--py,50%) - 50%),0);
  opacity:0;transition:opacity .45s var(--ease-out);
  mix-blend-mode:soft-light;
}
.pitem.is-tilt::after,.ext-card.is-tilt::after{opacity:1;}

/* overlay → panel de cristal con desenfoque progresivo */
.pover{
  z-index:2;
  background:linear-gradient(to top,rgba(8,8,12,.62) 0%,rgba(8,8,12,.28) 45%,rgba(8,8,12,0) 75%);
  transition:opacity .45s var(--ease-out);
}
.pover::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:72%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 45%,transparent);mask-image:linear-gradient(to top,#000 45%,transparent);
}
.pitem:hover .pover::before{-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);}
.pover > *{position:relative;}
.pover .pclient,.pover .pname,.pover .ptags{transform:translate3d(0,10px,0);transition:transform .6s var(--ease-out);}
.pitem:hover .pover .pclient,.pitem:hover .pover .pname,.pitem:hover .pover .ptags{transform:none;}
.pover .pname{transition-delay:.03s;}.pover .ptags{transition-delay:.06s;}
.pover .ptag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);}
.cbadge{
  z-index:3;-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 10px -4px rgba(0,0,0,.8);
}
.cadv{background:rgba(40,0,4,.42);}
.cmus{background:rgba(20,16,48,.42);}
.cpro{background:rgba(40,24,4,.42);}

/* Skeleton shimmer → fade/scale-in */
.sk{background-color:#0c0c10;}
.sk::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:100%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.075) 50%,transparent 80%);
  animation:dpShimmer 1.5s ease-in-out infinite;
}
@keyframes dpShimmer{from{transform:translate3d(-100%,0,0);}to{transform:translate3d(100%,0,0);}}
.ext-card.sk > .pcv{position:relative;}
.sk.is-loaded::before{animation:none;opacity:0;transition:opacity .4s;}
.dp .sk .pcv{opacity:0;scale:1.08;transition:opacity .7s var(--ease-out),scale 1.3s var(--ease-out),transform .6s var(--ease-out);}
.dp .sk .pcv.is-loaded{opacity:1;scale:1;}
.pitem:hover .pitem-bg img{transform:scale(1.06);}

/* Lab */
.ext-card{
  isolation:isolate;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.9);
}
.ext-card.is-tilt,.ext-card:hover{z-index:3;border-color:rgba(255,255,255,.22);box-shadow:0 4px 8px rgba(0,0,0,.4),0 30px 60px -18px rgba(0,0,0,.95),0 0 40px -12px rgba(255,255,255,.12);}
.ext-card-ov{z-index:2;}
.ext-card-play{transition:transform .6s var(--ease-out);}
.ext-card:hover .ext-card-play{transform:translate(-50%,-55%) scale(1.1);}
.ext-card-play svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));}

/* ══════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════ */
.ab-sector{
  position:relative;border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -12px rgba(0,0,0,.85),0 40px 70px -30px rgba(0,0,0,.8);
  transition:filter .2s,transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.ab-sector::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 32%,rgba(255,255,255,0) 50%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -24px 40px -24px rgba(0,0,0,.35);
}
.ab-sector.has-vid::before{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%);}
.ab-sector:hover{transform:translate3d(0,-5px,0);box-shadow:0 2px 4px rgba(0,0,0,.4),0 26px 50px -14px rgba(0,0,0,.9),0 60px 100px -40px rgba(0,0,0,.9);}
.ab-cap,.ab-tool{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--sh-1);
}
.ab-cap:hover{transform:translate3d(0,-2px,0);border-color:rgba(255,255,255,.3) !important;}
.ab-headline{text-shadow:0 18px 40px rgba(0,0,0,.6);}

/* ══════════════════════════════════════════════
   CONTACT — tarjeta de cristal sobre el Voronoi
   ══════════════════════════════════════════════ */
#ccv{opacity:.55;}
.c-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  width:min(100%,980px);
  padding:clamp(1.75rem,5vh,3.5rem) clamp(1.25rem,5vw,4.5rem) clamp(1.5rem,4vh,2.75rem);
  border-radius:clamp(22px,2.5vw,36px);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 45%,rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -40px 80px -50px rgba(255,255,255,.12),var(--sh-3);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  overflow:hidden;
}
.c-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:var(--noise);background-size:160px;opacity:.12;}
.c-card > *{position:relative;}
.c-email{transition:opacity .2s,text-shadow .4s;text-shadow:0 10px 30px rgba(0,0,0,.5);}
.c-email:hover{opacity:.85;text-shadow:0 0 30px rgba(255,255,255,.35);}
.c-links{margin-bottom:clamp(1.25rem,4vh,2.5rem);}
.c-link{
  text-decoration:none;display:inline-block;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--sh-1);
}
a.c-link:hover{color:#fff !important;border-color:rgba(255,255,255,.4) !important;transform:translate3d(0,-2px,0);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 26px -10px rgba(0,0,0,.9),0 0 24px -8px rgba(255,255,255,.3);}
span.c-link{cursor:default;opacity:.55;}
.avail{color:#3ee0a8;padding:6px 14px;border-radius:99px;background:rgba(29,158,117,.1);border:1px solid rgba(29,158,117,.28);box-shadow:0 0 30px -10px rgba(29,158,117,.6);}
.adot{box-shadow:0 0 10px #1D9E75;}

/* ══════════════════════════════════════════════
   MODALES — desenfoque de la pagina + paneles de cristal
   ══════════════════════════════════════════════ */
#modal-ov,#ext-ov{
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  transition:background .45s var(--ease-out),-webkit-backdrop-filter .45s var(--ease-out),backdrop-filter .45s var(--ease-out);
}
#modal-ov.open,#ext-ov.open{
  background:rgba(4,4,8,.66);
  -webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);
}
#modal,#ext-modal{
  padding:clamp(8px,.9vw,14px);max-height:98vh;
  border-radius:clamp(16px,1.6vw,26px);
  background:linear-gradient(150deg,rgba(40,40,48,.55),rgba(14,14,18,.6));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 100px -20px rgba(0,0,0,.9);
  transform:translate3d(0,30px,0) scale(.95);
  transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);
}
#modal-ov.open #modal,#ext-ov.open #ext-modal{transform:none;}
#modal-media-wrap,#ext-vid-wrap{box-shadow:0 20px 50px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);}
#modal-info{padding-right:clamp(2.5rem,3.2vw,3.25rem);}
#ext-info{padding-right:clamp(2.5rem,3.2vw,3.25rem);}
#modal-close,#ext-close,.mgal-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.2);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -6px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
}
#modal-close,#ext-close{top:12px;right:12px;width:38px;height:38px;font-size:15px;transition:transform .4s var(--ease-out),background .2s;}
#modal-close:hover,#ext-close:hover{background:rgba(255,255,255,.26);transform:rotate(90deg);}
.mgal-nav:hover{background:rgba(255,255,255,.24);}
.m-tag{background:rgba(255,255,255,.05);}
.m-behance,.ext-ig{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),var(--sh-1);
}
.ext-full-btn{box-shadow:0 10px 30px -8px rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.12);}
.m-thumb{box-shadow:0 4px 10px -4px rgba(0,0,0,.8);}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (hover:none){
  .pitem .pover{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.25) 55%,transparent 80%);}
  .pover .pclient,.pover .pname,.pover .ptags{transform:none;}
  .pitem::after,.ext-card::after{display:none;}
}
@media (max-width:900px){
  .hero-glass--main{left:24vw;width:70vw;}
}
@media (max-width:768px){
  nav::before{inset:.4rem .6rem;}
  .dots{padding:9px 5px;}
  .hero-glass--main{left:14vw;top:37vh;width:80vw;height:30vh;}
  .hero-glass--back{right:-6vw;top:12vh;width:44vw;height:17vh;}
  .hero-glass--chip{left:5vw;top:63vh;width:20vw;}
  .hero-bot{gap:8px;}
  .hero-sub,.hero-scroll{padding:7px 12px;}
  .hero-logo .hero-logo-shadow{filter:brightness(0) blur(9px);}
  #modal,#ext-modal{padding:8px;}
  #modal-info,#ext-info{padding-right:.5rem;}
  #modal-close,#ext-close{top:14px;right:14px;z-index:20;}
  .c-card{padding:1.75rem 1.1rem 1.4rem;}
  .tab{padding:.45rem 1.25rem;}
}
@media (max-width:480px){
  .hero-sub{font-size:10px !important;letter-spacing:.12em;}
  .hero-scroll{font-size:9px;}
  .c-links{gap:6px;}
}

/* ══════════════════════════════════════════════
   FALLBACKS — sin backdrop-filter
   ══════════════════════════════════════════════ */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  nav::before{background:rgba(14,14,18,.94);}
  .mob-menu{background:rgba(0,0,0,.96);}
  .dots{background:rgba(20,20,24,.85);}
  .hero-glass{background:linear-gradient(150deg,rgba(40,40,48,.7),rgba(10,10,14,.6));}
  .hero-ey-wrap,.hero-sub,.hero-scroll{background:rgba(10,10,14,.75);}
  .c-card{background:rgba(12,12,16,.86);}
  #modal-ov.open,#ext-ov.open{background:rgba(0,0,0,.92);}
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — sin tilt/parallax/stagger; fundidos simples
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  body::after{animation:none;}
  .dp .sec,.dp .sec.is-above,.dp .sec.is-below{transform:none !important;transition:opacity .4s ease;}
  .dp .rv{translate:none;}
  .dp .in-view .rv{transition-delay:0s !important;transition-duration:.4s !important;}
  .hero-glass,.hero-glass--chip,.hero-glass--back,.hero-ey-dot,.hero-scroll{animation:none !important;}
  #hcv,.hero-glass,.hero-logo-img{transform:none !important;}
  .sk::before{animation:none;}
  .dp .sk .pcv{scale:1;transition:opacity .4s;}
  .pover .pclient,.pover .pname,.pover .ptags{transform:none;transition:none;}
  .ab-sector:hover,.fbtn:hover,.ab-cap:hover,a.c-link:hover{transform:none;}
  #modal,#ext-modal{transform:none !important;transition:opacity .3s;}
  .mob-menu.open a,.mob-menu.open .lang-btn{animation:none;}
}
.ab-eyebrow{font-weight:400;}
.mob-menu.open ~ .dots{opacity:0;pointer-events:none;}

/* Email en una sola línea dentro de la tarjeta de contacto */
@media (min-width:481px){
  .c-email{font-size:clamp(14px,2.5vw,46px);white-space:nowrap;word-break:normal;}
}
@media (max-width:480px){
  .c-email{font-size:clamp(12px,4.6vw,20px);word-break:normal;overflow-wrap:anywhere;}
}

/* Móvil: tarjetas Work más limpias — solo el título, sin tapar la imagen */
@media (max-width:600px){
  .pitem .pover{padding:.55rem .6rem;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.2) 42%,transparent 62%) !important;}
  .pitem .pover::before{display:none;}
  .pover .pclient,.pover .ptags{display:none;}
  .pover .pname{font-size:12px !important;line-height:1.15;margin:0;}
}
@media (max-width:480px){
  .c-email{font-size:4.05vw;white-space:nowrap;overflow-wrap:normal;}
}

/* ══════════════════════════════════════════════
   VIDRIO A PANTALLA COMPLETA (Home + Contacto)
   El Voronoi queda detrás como luz difusa.
   Desactivar: añadir ?glass=off a la URL.
   ══════════════════════════════════════════════ */
.glass-full{
  position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 45%,rgba(255,255,255,.015) 70%,rgba(255,255,255,.05));
  -webkit-backdrop-filter:blur(30px) saturate(175%) brightness(1.06);
  backdrop-filter:blur(30px) saturate(175%) brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -120px 160px -80px rgba(255,255,255,.06);
}
/* grano del vidrio */
.glass-full::before{content:"";position:absolute;inset:0;background-image:var(--noise);background-size:160px 160px;opacity:.14;}
/* reflejo especular lento */
.glass-full-sheen{
  position:absolute;top:-50%;left:-30%;width:70%;height:200%;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 49%,rgba(255,255,255,.02) 56%,transparent 63%);
  transform:rotate(8deg);animation:dpSheen 14s ease-in-out infinite alternate;
}
@keyframes dpSheen{from{translate:-10% 0;}to{translate:130% 0;}}
/* los paneles flotantes sobran con el vidrio completo */
.glass-full ~ .hero-depth .hero-glass--main,
.glass-full ~ .hero-depth .hero-glass--back{display:none;}
/* el Voronoi ya va difuminado: canvas a opacidad plena en contacto */
#ccv{opacity:.9;}
/* modo comparación */
html.glass-off .glass-full{display:none;}
html.glass-off .hero-glass--main,html.glass-off .hero-glass--back{display:block;}
html.glass-off #ccv{opacity:.55;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #hcv,#ccv{filter:blur(30px) saturate(1.6);}
}
@media (prefers-reduced-motion:reduce){.glass-full-sheen{animation:none;}}

/* Contraste del vidrio completo: negros profundos, neón intacto */
.glass-full{
  background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,0) 45%,rgba(255,255,255,0) 75%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(30px) saturate(185%) contrast(1.45) brightness(.92);
  backdrop-filter:blur(30px) saturate(185%) contrast(1.45) brightness(.92);
}
.glass-full::before{opacity:.22;mix-blend-mode:overlay;}
.glass-full{
  background:none;
  -webkit-backdrop-filter:blur(30px) saturate(190%) contrast(1.6) brightness(.9);
  backdrop-filter:blur(30px) saturate(190%) contrast(1.6) brightness(.9);
}
.glass-full::before{opacity:.045;mix-blend-mode:normal;}

/* Home: líneas blancas más presentes (menos difusión, más brillo) */
#s1 .glass-full{
  -webkit-backdrop-filter:blur(20px) saturate(175%) contrast(1.55) brightness(1.08);
  backdrop-filter:blur(20px) saturate(175%) contrast(1.55) brightness(1.08);
}

/* About: la columna nunca crece por el titular (evita bucle al estrechar la ventana) */
.ab-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.ab-left,.ab-right{min-width:0;}
.ab-headline{max-width:100%;}
@media (max-width:768px){.ab-top{grid-template-columns:minmax(0,1fr);}}

/* Móvil: Work en 2×4 (8 por página) */
@media (max-width:600px){
  .proj-page{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:6px !important;}
  .pitem{aspect-ratio:16/10 !important;}
}

/* ══════════════════════════════════════════════
   LOGO 3D — cara blanca + extrusión oblicua (proyección paralela, como el original)
   Dirección/longitud del original: 33px izq · 29px abajo sobre 1269px de ancho.
   ══════════════════════════════════════════════ */
.logo3d .logo3d-obj{position:relative;display:block;will-change:transform;
  --dx:-2.6%;--dy:6.29%;}               /* 33/1269 · 29/461 */
.logo3d .hero-logo-img{position:relative;z-index:1;filter:none;will-change:auto;}
.logo3d-stack{position:absolute;inset:0;pointer-events:none;}
.logo3d-layer{
  position:absolute;inset:0;
  -webkit-mask:url(../assets/logo3d/face.webp) center/100% 100% no-repeat;
          mask:url(../assets/logo3d/face.webp) center/100% 100% no-repeat;
  background:var(--c,#000);
  transform:translate(calc(var(--dx) * var(--t)),calc(var(--dy) * var(--t)));
}
/* sombra suave proyectada sobre el vidrio */
.logo3d .hero-logo-shadow{filter:brightness(0) blur(22px);opacity:.55;}

/* Sin reflejo diagonal sobre el vidrio a pantalla completa */
.glass-full-sheen{display:none !important;animation:none !important;}

/* ══ Work: desenfoque progresivo al hover (copia desenfocada + máscara degradada, aparece con fundido) ══ */
.pover::before{display:none !important;}           /* sustituye al backdrop-filter con corte recto */
.pitem-bg .pcv-blur{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  filter:blur(14px) saturate(1.15) brightness(.85);
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 28%,rgba(0,0,0,.6) 50%,transparent 78%);
          mask-image:linear-gradient(to top,#000 0%,#000 28%,rgba(0,0,0,.6) 50%,transparent 78%);
  opacity:0;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .4s;
}
.pitem:hover .pitem-bg .pcv-blur,.pitem:focus-visible .pitem-bg .pcv-blur{opacity:1;}
@media (hover:none){.pitem-bg .pcv-blur{display:none;}}
@media (prefers-reduced-motion:reduce){.pitem-bg .pcv-blur{transition:none;}}