/* ==========================================================================
   Redesign, octubre 2026: header con navegación en píldoras de colores,
   proyectos apilados como carpetas, archivo con efecto ojo de pez y confeti.
   Se carga después de style.css y personality.css y solo sobrescribe.
   ========================================================================== */

:root{
  --nav-red:#ed372b;--nav-yellow:#c08c00;--nav-blue:#2278ea;--nav-green:#197346;
  --pill-h:32px;
}
html{scroll-padding-top:40px}
body{overflow-x:clip}

/* ---------- Header: arriba del todo, sin fondo, no acompaña al scroll ---------- */
.header{
  position:absolute;top:0;left:0;right:0;z-index:40;
  background:transparent!important;border:0!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:20px 4vw!important;gap:6px!important;flex-wrap:nowrap!important;
  align-items:center!important;pointer-events:none;
}
.header>*{pointer-events:auto}
.header .brand{margin-right:auto}
.header nav{
  order:0!important;width:auto!important;margin:0!important;
  display:flex;align-items:center;justify-content:flex-end!important;gap:6px!important;
}
.header nav a,.header .cursor-sound,.header .language{
  --c:var(--nav-red);
  height:var(--pill-h);width:auto;min-width:0;flex:0 0 auto;
  display:inline-flex!important;align-items:center;justify-content:center;
  border-radius:999px;border:1.5px solid var(--c)!important;color:var(--c)!important;
  background:transparent!important;
  font:700 12px/1 var(--body)!important;letter-spacing:.01em;white-space:nowrap!important;
  padding:0 15px!important;margin:0!important;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s,color .2s;
}
.header nav a:after{display:none!important}
.header nav a .ui-icon{display:none}
.header nav a:nth-child(1){--c:var(--nav-red)}
.header nav a:nth-child(2){--c:var(--nav-yellow)}
.header nav a:nth-child(3){--c:var(--nav-blue)}
.header nav a:nth-child(4){--c:var(--nav-green)}
.header .cursor-sound{--c:var(--nav-red);gap:0!important}
.header .cursor-sound svg{display:none}
.header .cursor-sound[aria-pressed=false]{border-style:dashed!important;opacity:.8}
.header .language{--c:var(--nav-blue)}
.header .cursor-sound,.header .language{padding:0 12px!important}

.header nav a:hover,.header nav a:focus-visible,
.header .cursor-sound:hover,.header .language:hover{
  background:var(--c)!important;color:#fff!important;transform:translateY(-1px) scale(1.06);
}
.header nav a:nth-child(2):hover,.header nav a:nth-child(2):focus-visible{color:var(--ink)!important}
.header nav a:active,.header .cursor-sound:active,.header .language:active{transform:scale(.95)}

/* Sobre el hero oscuro, colores más vivos */
.header.on-dark{--nav-red:#ff5b4f;--nav-yellow:#ffcf25;--nav-green:#3fc275;--nav-blue:#5ea2ff}

/* El hero ocupa toda la pantalla bajo el header */
.hero.hero-background{--hero-header-height:0px!important}
.hero.hero-background .hero-copy{padding-top:70px}
main:not(:has(.hero)){padding-top:80px}

@media (max-width:700px){
  :root{--pill-h:28px}
  .header{flex-wrap:wrap!important;padding:14px 4vw!important;row-gap:8px!important;column-gap:5px!important}
  .header .brand{order:0}
  .header .cursor-sound,.header .language{order:1}
  .header nav{order:2!important;width:100%!important;justify-content:flex-end!important;gap:5px!important;flex-wrap:wrap;row-gap:5px}
  .header nav a,.header .cursor-sound,.header .language{font-size:11px!important;padding:0 11px!important}
  .hero.hero-background .hero-copy{padding-top:96px}
  main:not(:has(.hero)){padding-top:100px}
}
@media (prefers-reduced-motion:reduce){
  .header nav a,.header .cursor-sound,.header .language{transition:none}
  .header nav a:hover{transform:none}
}

/* ---------- Proyectos: carpetas apiladas, todas a la vista ---------- */
.projects .project-grid{
  --stack-h:clamp(440px,68vh,700px);
  display:flex!important;align-items:flex-end;gap:0!important;
  grid-template-columns:none!important;
  height:calc(var(--stack-h) + 40px);padding-top:40px;
}
.projects .project-card{
  position:relative;flex:1 1 0;min-width:0;height:var(--stack-h);
  padding:24px!important;box-sizing:border-box;
  display:flex!important;flex-direction:column;justify-content:flex-end;
  border-radius:24px;
  transition:flex-grow .6s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.projects .project-card+.project-card{margin-left:-26px}
.projects .project-card:nth-child(1){z-index:5}
.projects .project-card:nth-child(2){z-index:4}
.projects .project-card:nth-child(3){z-index:3}
.projects .project-card:nth-child(4){z-index:2}
.projects .project-card:nth-child(5){z-index:1}
/* Pestaña de carpeta, escalonada como en un archivador */
.projects .project-card:before{
  content:'';position:absolute;top:-17px;width:42%;height:30px;border-radius:13px 13px 0 0;
  background:var(--card-color);left:calc(18px + var(--tab,0) * 1%);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.projects .project-card:nth-child(2){--tab:14}
.projects .project-card:nth-child(3){--tab:28}
.projects .project-card:nth-child(4){--tab:10}
.projects .project-card:nth-child(5){--tab:24}
.projects .project-card .project-image{
  position:absolute!important;inset:0;aspect-ratio:auto!important;
  border-radius:24px;overflow:hidden;background:var(--card-color,#222);
  box-shadow:16px 0 30px -18px rgba(20,24,30,.55);
}
.projects .project-card .project-image img,
.projects .project-card .project-image video{
  width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;
}
.projects .project-card .project-image:after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%);
}
.projects .still-count{top:16px!important;bottom:auto!important;right:16px!important;z-index:2}
.projects .project-number{left:16px!important;top:16px!important;width:36px!important;height:36px!important;font-size:12px!important;z-index:2}
.projects .project-card h3,
.projects .project-card>p,
.projects .project-card .project-meta{
  position:relative;z-index:2;color:#fff!important;margin:0!important;max-width:none!important;
}
.projects .project-card h3{
  font-size:clamp(20px,1.9vw,32px)!important;line-height:1.08!important;padding-right:1.1em;
  transition:opacity .25s,font-size .5s cubic-bezier(.2,.8,.2,1);
}
.projects .project-card>p,.projects .project-card .project-meta{
  max-height:0;opacity:0;overflow:hidden;min-width:300px;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .5s;
}
.projects .project-card>p{font-size:15px!important;line-height:1.45!important;max-width:460px!important}
.projects .project-card .project-meta{color:rgba(255,255,255,.75)!important}

/* La carpeta abierta: crece, sube, enseña subtítulo y reproduce su vídeo */
.projects .project-card.is-open{flex-grow:3.4;transform:translateY(-14px);z-index:10}
.projects .project-card.is-open:before{transform:translateY(-4px)}
.projects .project-card.is-open h3{font-size:clamp(28px,2.6vw,44px)!important}
.projects .project-card.is-open>p{max-height:140px;opacity:1;margin-top:12px!important;transition-delay:0s,.18s,0s}
.projects .project-card.is-open .project-meta{max-height:40px;opacity:1;margin-top:14px!important;transition-delay:0s,.22s,0s}
.projects .project-grid:has(.is-open) .project-card:not(.is-open){filter:brightness(.82) saturate(.8)}
.projects .project-grid:has(.is-open) .project-card:not(.is-open) h3{opacity:0}
.projects .project-card:hover h3{color:#fff!important}

/* Móvil: las carpetas se apilan en vertical y se abren con un toque */
@media (hover:none),(max-width:700px){
  .projects .project-grid{flex-direction:column;align-items:stretch;height:auto;padding-top:20px}
  .projects .project-card{flex:none;height:118px;transition:height .55s cubic-bezier(.2,.8,.2,1),filter .4s}
  .projects .project-card+.project-card{margin-left:0;margin-top:-14px}
  .projects .project-card.is-open{height:min(64svh,560px);transform:none}
  .projects .project-card:before{top:-12px;height:24px;width:34%}
  .projects .project-card h3{font-size:24px!important}
  .projects .project-card.is-open h3{font-size:30px!important}
  .projects .project-card>p,.projects .project-card .project-meta{min-width:0}
  .projects .project-grid:has(.is-open) .project-card:not(.is-open) h3{opacity:1}
  .projects .project-number{width:30px!important;height:30px!important;font-size:11px!important}
}
@media (prefers-reduced-motion:reduce){
  .projects .project-card,.projects .project-card h3{transition:none}
}

/* ---------- Archivo: ojo de pez, la obra señalada crece a su formato ---------- */
.work-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
@media (max-width:900px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:600px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}
.work-title,.work-sub,.work-type{display:none!important}
.work-art{border-radius:18px!important}
.work-card:hover img,.work-card:hover video{transform:none!important}
.work-item .sound-toggle{width:24px!important;height:24px!important;top:8px!important;right:8px!important;padding:5px!important;opacity:.85;box-shadow:none!important}
.work-item .sound-toggle svg{width:13px!important;height:13px!important}

/* Modo ojo de pez (lo activa redesign.js con ratón): pistas en px animables */
.work-grid.fisheye{
  grid-template-columns:var(--fx-cols)!important;grid-template-rows:var(--fx-rows);grid-auto-rows:auto;
  transition:grid-template-columns .55s cubic-bezier(.2,.8,.2,1),grid-template-rows .55s cubic-bezier(.2,.8,.2,1);
}
.work-grid.fisheye .work-item,.work-grid.fisheye .work-card,.work-grid.fisheye .work-art{height:100%;min-height:0}
.work-grid.fisheye .work-art img,.work-grid.fisheye .work-art video{width:100%;height:100%;aspect-ratio:auto!important;object-fit:cover}
.work-grid.fisheye .work-item{
  width:var(--s,100%);height:var(--s,100%);place-self:center;
  transition:width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),filter .4s;
}
.work-grid.fisheye .work-item.is-focus{width:100%;height:100%}
.work-grid.fisheye.has-focus .work-item:not(.is-focus){filter:saturate(.75) brightness(.92)}
.work-grid.fisheye .work-item.is-focus .work-art{box-shadow:0 26px 60px -24px rgba(20,24,30,.55)}
@media (prefers-reduced-motion:reduce){.work-grid.fisheye{transition:none}}

/* ---------- Confeti ---------- */
.confetti-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}