/* ============================================================================
   INK FIRE · menú overlay, cursor y páginas interiores
   ========================================================================== */

/* ── botón Menú / Cerrar ──────────────────────────────────────────────── */
.menubtn{
  display:flex;align-items:center;gap:.75rem;
  background:none;border:0;padding:0;cursor:pointer;color:var(--cream);
}
.menubtn__t{transition:opacity .3s}
.menubtn__t--x{position:absolute;opacity:0;pointer-events:none}
.menubtn__i{position:relative;width:26px;height:14px;display:block}
.menubtn__i i{
  position:absolute;left:0;right:0;height:1px;background:var(--cream);
  transition:transform .4s cubic-bezier(.16,1,.3,1), width .4s;
}
.menubtn__i i:first-child{top:4px}
.menubtn__i i:last-child{top:10px}
.is-menu .menubtn__t{opacity:0}
.is-menu .menubtn__t--x{opacity:1;position:static}
.is-menu .menubtn__i i:first-child{transform:translateY(3px) rotate(45deg)}
.is-menu .menubtn__i i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* ── overlay ──────────────────────────────────────────────────────────── */
.menu{
  position:fixed;inset:0;z-index:45;background:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .5s, visibility .5s;
  display:flex;align-items:center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:6.5rem 0 3rem;                 /* deja libre la cabecera */
}
.is-menu .menu{opacity:1;visibility:visible}
.menu__grid{width:100%;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:end;margin-block:auto}

.menu__list{list-style:none;margin:0;padding:0;text-align:right;grid-column:2}
.menu__list > li{overflow:hidden}
.menu__list > li > a,
.menu__sub a{
  display:block;font-family:var(--sans);font-weight:300;
  color:rgba(243,238,228,.62);text-decoration:none;
  transition:color .3s, transform .3s;
}
.menu__list > li > a{
  font-size:clamp(2rem,1rem + 3.6vw,4.25rem);line-height:1.18;letter-spacing:-.02em;
  transform:translateY(105%);
}
.is-menu .menu__list > li > a{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) var(--d,0ms), color .3s}
.menu__list > li > a:hover,.menu__sub a:hover{color:var(--cream)}

.menu__has{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.menu__has > a{flex:0 0 auto}
.menu__has .menu__sub{flex:0 0 100%}
.menu__toggle{
  background:none;border:0;padding:0 0 0 .6rem;color:var(--champagne);
  font-family:var(--mono);font-size:.75rem;cursor:pointer;vertical-align:middle;
  transition:transform .3s;display:inline-block;
}
.menu__has.is-open .menu__toggle{transform:rotate(45deg)}
.menu__sub{
  list-style:none;margin:0;padding:0;text-align:right;
  max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1);
}
.menu__has.is-open .menu__sub{max-height:16rem}
.menu__sub a{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.45rem 0;color:var(--muted);
}

.menu__aside{grid-column:1;grid-row:1;max-width:22rem;color:rgba(243,238,228,.72);font-size:.9375rem}
.menu__aside .mono{color:var(--champagne);margin:1.5rem 0 .25rem}
.menu__aside p{margin:0 0 .25rem}
.menu__aside a{border-bottom:1px solid transparent;transition:border-color .3s}
.menu__aside a:hover{border-bottom-color:var(--champagne)}
.menu__social{display:flex;gap:1rem;flex-wrap:wrap}

/* ── cursor ───────────────────────────────────────────────────────────── */
@media (pointer:fine){
  .has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary,
  .has-cursor input,.has-cursor select,.has-cursor textarea{cursor:none}
  .cursor{
    position:fixed;top:0;left:0;z-index:200;pointer-events:none;
    width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
    background:rgba(243,238,228,.1);backdrop-filter:blur(2px);
    display:grid;place-items:center;
    transition:width .3s,height .3s,margin .3s,background .3s,opacity .3s;
    will-change:transform;
  }
  .cursor::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--cream)}
  .cursor.is-link{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(235,220,169,.16)}
  .cursor.is-hidden{opacity:0}
}
@media (pointer:coarse){.cursor{display:none}}

/* ── páginas interiores ───────────────────────────────────────────────── */
.page-inner .inner{padding-top:5.5rem}
.page-inner .section:first-child{padding-top:clamp(3rem,7vw,6rem)}

/* ── filtros del portafolio ───────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.filters__b{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:999px;
  background:none;color:var(--muted);cursor:pointer;transition:all .3s;
}
.filters__b:hover{color:var(--cream);border-color:var(--cream)}
.filters__b.is-on{background:var(--champagne);border-color:var(--champagne);color:var(--ink)}
.work__grid--port{grid-template-columns:repeat(3,1fr)}
.work__grid--port .card video{aspect-ratio:3/4;height:auto;min-height:0}
.work__grid--port .card--tall{grid-row:auto}
.port__empty{color:var(--muted);padding:3rem 0;max-width:46ch}
@media (max-width:1024px){.work__grid--port{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.work__grid--port{grid-template-columns:1fr}}

@media (max-width:900px), (max-height:620px){
  .menu{align-items:flex-start}
  .menu__grid{grid-template-columns:1fr;gap:2rem}
  .menu__list,.menu__aside{grid-column:1}
  .menu__list{grid-row:1}
  .menu__aside{grid-row:2;max-width:none}
  .menu__list > li > a{font-size:clamp(1.75rem,1rem + 4vw,3rem)}
  .menu__aside .mono{margin-top:1rem}
}