/*
 * menu.css — PH Studio (v0.2.54, lab)
 * Menú principal tras un botón hamburguesa a la derecha, en todas las páginas. La nav en fila y el selector de idioma
 * de la cabecera se ocultan; ambos viven ahora en el panel.
 */
header .navlinks, header .nav-right{ display:none !important; }

.menu-btn{
  position:fixed; top:clamp(16px,2.2vh,24px); right:clamp(16px,2.2vw,32px); z-index:620;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:rgba(11,10,12,0.72); color:var(--ink);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .4s cubic-bezier(.32,.72,0,1), transform .4s cubic-bezier(.32,.72,0,1);
}
.menu-btn:hover{ border-color:var(--accent); }
.menu-btn:active{ transform:scale(.96); }
.menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.menu-btn-lines{ position:relative; width:20px; height:10px; display:block; }
.menu-btn-lines i{
  position:absolute; left:0; width:100%; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .55s cubic-bezier(.32,.72,0,1), top .55s cubic-bezier(.32,.72,0,1);
}
.menu-btn-lines i:first-child{ top:0; }
.menu-btn-lines i:last-child{ top:8.5px; }
.menu-open .menu-btn-lines i:first-child{ top:4.25px; transform:rotate(45deg); }
.menu-open .menu-btn-lines i:last-child{ top:4.25px; transform:rotate(-45deg); }

.site-menu{
  position:fixed; inset:0; z-index:610; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(96px,14vh,140px) clamp(24px,6vw,96px) clamp(28px,5vh,48px);
  background:rgba(11,10,12,0.94); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.76,0,.24,1);
}
.site-menu[hidden]{ display:none; }
.menu-open .site-menu{ clip-path:inset(0 0 0 0); }

.sm-links{ list-style:none; }
.sm-links li{ overflow:hidden; border-bottom:1px solid var(--line); }
.sm-links a{
  display:flex; align-items:baseline; gap:clamp(16px,2vw,28px); padding:clamp(8px,1.4vh,14px) 0;
  font-family:var(--font-display); font-weight:400; font-size:clamp(38px,6.4vw,92px); line-height:1.05; letter-spacing:-0.03em;
  color:var(--ink); transform:translateY(105%);
  transition:transform .8s cubic-bezier(.32,.72,0,1), color .35s ease;
  transition-delay:calc(var(--i) * 55ms + 200ms), 0s;
}
.sm-links a .mono{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; color:var(--ink-dim); transition:color .35s ease; }
.sm-links a:hover, .sm-links a:focus-visible{ color:var(--accent); outline:none; }
.sm-links a:hover .mono{ color:var(--accent); }
.menu-open .sm-links a{ transform:none; }

.sm-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  opacity:0; transform:translateY(12px); transition:opacity .6s ease .5s, transform .6s cubic-bezier(.32,.72,0,1) .5s;
}
.menu-open .sm-foot{ opacity:1; transform:none; }
.sm-lang{ display:flex; align-items:center; gap:18px; }
.sm-lang > .mono{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-dim); }
.site-menu .lang-switch{ display:flex !important; gap:6px; }
.site-menu .lang-opt{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:100px; border:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; color:var(--ink); opacity:1;
  transition:border-color .3s ease, background .3s ease, color .3s ease;
}
.site-menu .lang-opt:hover{ border-color:var(--ink-dim); }
.site-menu .lang-opt.is-active{ background:var(--accent); border-color:var(--accent); color:#0B0A0C; }
.sm-mail{ font-size:12px; letter-spacing:0.06em; color:var(--ink-dim); border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .3s ease, border-color .3s ease; }
.sm-mail:hover{ color:var(--accent); border-color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .site-menu, .sm-links a, .sm-foot, .menu-btn-lines i{ transition:none; }
}

/* ===== v0.2.56: tres líneas; panel lateral a la derecha; idioma junto a los enlaces ===== */
.menu-btn-lines{ height:12px; }
.menu-btn-lines i:nth-child(1){ top:0; }
.menu-btn-lines i:nth-child(2){ top:5.25px; transition:opacity .3s ease, transform .55s cubic-bezier(.32,.72,0,1); }
.menu-btn-lines i:nth-child(3){ top:10.5px; }
.menu-open .menu-btn-lines i:nth-child(1){ top:5.25px; transform:rotate(45deg); }
.menu-open .menu-btn-lines i:nth-child(2){ opacity:0; transform:scaleX(0); }
.menu-open .menu-btn-lines i:nth-child(3){ top:5.25px; transform:rotate(-45deg); }

.site-menu{
  left:auto; width:min(560px, 100%); justify-content:flex-start;
  padding:clamp(96px,13vh,128px) clamp(28px,3.5vw,56px) clamp(28px,5vh,48px);
  border-left:1px solid var(--line); background:rgba(11,10,12,0.96);
  clip-path:inset(0 0 0 100%);
}
.menu-open .site-menu{ clip-path:inset(0 0 0 0); }
/* velo sobre el resto de la página */
.menu-veil{ position:fixed; inset:0; z-index:605; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity .6s ease; }
.menu-open .menu-veil{ opacity:1; pointer-events:auto; }
.sm-links a{ font-size:clamp(36px,4.2vw,60px); }
.sm-foot{ margin-top:clamp(28px,4.5vh,44px); flex-direction:column; align-items:flex-start; gap:18px; }

/* v0.2.88: en móvil, logo, botón del menú, contenido y footer comparten el mismo margen lateral (20 px) en todo el sitio */
@media (max-width:860px){
  header .wrap, .wrap{ padding-left:20px !important; padding-right:20px !important; }
  header .logo-mark{ margin-left:0; }
  .menu-btn{ right:20px; top:16px; }
  footer .foot-grid{ flex-direction:row !important; justify-content:space-between; align-items:center; text-align:left !important; gap:12px; }
  footer .foot-links{ display:flex; gap:14px; }
}

/* v0.2.142 (Pablo): el panel negro del menú cubre toda la ventana (antes panel lateral de 560 px + velo al 50 %) */
.site-menu{
  left:0; width:100%; border-left:0; background:rgba(11,10,12,0.98);
  padding-left:clamp(24px,8vw,140px); padding-right:clamp(24px,8vw,140px); justify-content:center;
}
.sm-links a{ font-size:clamp(40px,6vw,88px); }

/* v0.2.143 (Pablo): franja superior un poco más alta y botón del menú centrado en ella; menú abierto con los items a la derecha y más pequeños */
header.is-scrolled{ padding-top:31px; padding-bottom:31px; }   /* franja ~85 px (antes 67) */
.menu-btn{ top:16px; }                                          /* (85 − 52) / 2 */
.site-menu:not([hidden]){ display:grid; justify-content:end; align-content:center; } /* una columna del ancho del item más largo, pegada a la derecha */
.site-menu > .sm-nav, .site-menu > .sm-foot{ width:auto; }
@media (max-width:860px){ .site-menu:not([hidden]){ justify-content:start; } }
.sm-links a{ font-size:clamp(34px,4vw,56px); }

/* ===== v0.2.157 (Pablo): menú tipo catalinvintila.design =====
   Botón: dos líneas, magnético (menu.js), al acercar el cursor aparece un anillo y las líneas pasan a esmeralda.
   Panel .ph-menu: rejilla de bloques esmeralda que entra en orden aleatorio; contenido en negro, hover en blanco.
   Las reglas antiguas de .site-menu / .sm-* / .menu-veil quedan sin uso. */
.menu-btn{ background:rgba(11,10,12,0.55); border-color:transparent; overflow:visible;
  transition:border-color .35s ease, background .35s ease; }
.menu-btn::before{ content:''; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--ink);
  opacity:0; transform:scale(.6); transition:opacity .35s ease, transform .45s cubic-bezier(.32,.72,0,1); pointer-events:none; }
.menu-btn.is-near::before, .menu-btn:focus-visible::before{ opacity:1; transform:scale(1); }
.menu-btn:hover{ border-color:transparent; }
.menu-btn-lines{ width:22px; height:8px; }
.menu-btn-lines i{ height:1.5px; transition:transform .45s cubic-bezier(.32,.72,0,1), top .45s cubic-bezier(.32,.72,0,1), background .3s ease; }
.menu-btn-lines i:nth-child(1){ top:0; }
.menu-btn-lines i:nth-child(2){ top:6.5px; opacity:1; transform:none; }
.menu-btn.is-near .menu-btn-lines i{ background:var(--accent); }
.menu-open .menu-btn-lines i:nth-child(1){ top:3.25px; transform:rotate(45deg); }
.menu-open .menu-btn-lines i:nth-child(2){ top:3.25px; opacity:1; transform:rotate(-45deg); }
/* con el menú abierto: botón y logo en negro sobre el esmeralda; el anillo pasa a negro */
.menu-open .menu-btn{ background:transparent; color:#0B0A0C; }
.menu-open .menu-btn::before{ border-color:#0B0A0C; }
.menu-open .menu-btn.is-near .menu-btn-lines i{ background:#fff; }
.menu-open header{ z-index:615; background:transparent !important; border-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.menu-open header .logo-mark svg, .menu-open header .logo-mark svg use{ fill:#0B0A0C !important; stroke:#0B0A0C !important; transition:fill .3s ease .25s; }

.ph-menu{ position:fixed; inset:0; z-index:610; }
.ph-menu[hidden]{ display:none; }
.mn-px{ position:absolute; inset:0; display:grid; }
.mn-px i{ background:var(--accent); opacity:0; transition:opacity .06s linear; }
.menu-px .mn-px i{ opacity:1; }
.mn-inner{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  padding:clamp(96px,12vh,120px) clamp(32px,3.5vw,64px) 26px calc(clamp(40px,5vw,72px) + 2.5vw); color:#0B0A0C;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.menu-ready .mn-inner{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.mn-grid{ flex:1; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(24px,4vw,80px); align-content:center; }
.mn-nav{ display:flex; flex-direction:column; }
.mn-nav a{ display:flex; align-items:baseline; gap:clamp(12px,2vw,26px); padding:clamp(4px,1vh,12px) 0; width:max-content; max-width:100%;
  opacity:0; transform:translateY(40px); transition:opacity .5s ease, transform .7s cubic-bezier(.32,.72,0,1); }
.menu-ready .mn-nav a{ opacity:1; transform:none; }
.menu-ready .mn-nav a:nth-child(2){ transition-delay:.06s; } .menu-ready .mn-nav a:nth-child(3){ transition-delay:.12s; } .menu-ready .mn-nav a:nth-child(4){ transition-delay:.18s; }
.mn-nav small{ font-size:12px; letter-spacing:0.08em; opacity:.6; transition:opacity .3s ease, color .3s ease; }
.mn-nav b{ display:inline-block; font-family:var(--font-display); font-weight:500; font-size:clamp(44px,7vw,108px); line-height:1.02; letter-spacing:-0.035em;
  transition:transform .5s cubic-bezier(.32,.72,0,1), color .3s ease; }
.mn-nav a:hover b, .mn-nav a:focus-visible b{ transform:translateX(clamp(10px,1.8vw,26px)); color:#fff; }
.mn-nav a:hover small, .mn-nav a:focus-visible small{ opacity:1; color:#fff; }
.mn-nav a:focus-visible{ outline:none; }
.mn-aside{ display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,3.5vh,36px);
  opacity:0; transform:translateY(24px); transition:opacity .5s ease .15s, transform .7s cubic-bezier(.32,.72,0,1) .15s; }
.menu-ready .mn-aside{ opacity:1; transform:none; }
.mn-grp small{ display:block; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; }
.mn-grp a{ display:block; width:max-content; font-size:clamp(15px,1.4vw,19px); font-weight:500; padding:3px 0; color:#0B0A0C; transition:color .3s ease; }
.mn-grp a:hover, .mn-grp a:focus-visible{ color:#fff; outline:none; }
.mn-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#0B0A0C; margin-right:10px; vertical-align:1px; animation:mnPulse 2s ease-in-out infinite; }
@keyframes mnPulse{ 50%{ opacity:.35; } }
.mn-lang .lang-switch{ display:flex !important; gap:6px; }
.mn-lang .lang-opt{ display:inline-flex; padding:7px 14px; border-radius:100px; border:1px solid rgba(11,10,12,.35); font-size:12px; letter-spacing:.08em; color:#0B0A0C; opacity:1; width:auto; }
.mn-lang .lang-opt:hover{ border-color:#0B0A0C; color:#0B0A0C; }
.mn-lang .lang-opt.is-active{ background:#0B0A0C; border-color:#0B0A0C; color:var(--accent); }
.mn-foot{ display:flex; justify-content:space-between; gap:14px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  opacity:0; transition:opacity .5s ease .25s; }
.menu-ready .mn-foot{ opacity:1; }
@media (max-width:760px){
  .mn-inner{ padding:96px 20px 20px; }
  .mn-grid{ grid-template-columns:1fr; align-content:start; gap:34px; overflow:auto; }
  .mn-nav b{ font-size:clamp(40px,12vw,56px); }
}
@media (prefers-reduced-motion: reduce){
  .mn-px i, .mn-inner, .mn-nav a, .mn-aside, .mn-foot, .mn-nav b{ transition:none !important; transform:none !important; }
  .mn-dot{ animation:none; }
}
.mn-nav{ align-items:flex-start; justify-content:center; } /* v0.2.158: anula la regla global nav{align-items:center} del tema */
@media (max-width:760px){ .mn-foot{ flex-direction:column; gap:6px; } } /* v0.2.159 */
.mn-grp a:has(.mn-dot){ max-width:34ch; width:auto; padding-left:18px; text-indent:-18px; } /* v0.2.165: estado en dos líneas con el punto colgado */

/* ===== v0.2.166 (Pablo): transición del menú = panel que sube (sin rejilla de bloques) =====
   Entra desde abajo con el borde superior curvo, que se endereza al llegar; al cerrar sigue subiendo y sale por arriba
   con el borde inferior curvo. El contenido entra escalonado desde abajo una vez el panel está arriba. */
.mn-px{ display:block; background:var(--accent); transform:translateY(101%);
  border-radius:50% 50% 0 0 / 16vh 16vh 0 0;
  transition:transform .76s cubic-bezier(.76,0,.24,1), border-radius .76s cubic-bezier(.76,0,.24,1); }
.mn-px:empty{ }
.menu-px .mn-px{ transform:none; border-radius:0; }
.menu-leaving .mn-px{ transform:translateY(-101%); border-radius:0 0 50% 50% / 0 0 16vh 16vh;
  transition-duration:.68s; }
.mn-nav a{ transform:translateY(70px); transition:opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.menu-ready .mn-nav a:nth-child(2){ transition-delay:.07s; } .menu-ready .mn-nav a:nth-child(3){ transition-delay:.14s; } .menu-ready .mn-nav a:nth-child(4){ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){ .mn-px{ transition:none; } }
/* v0.2.167: con el menú abierto solo el isotipo lleva trazo (como en el original); el wordmark va sin trazo */
.menu-open header .logo-mark svg use[href="#logo-wordmark-path"]{ stroke:none !important; }

/* v0.2.187 (Pablo): vuelve el violeta original (--accent con texto negro). Se retiraron los bloques v0.2.185 (violeta profundo #2E1C6B, texto claro) y v0.2.186 (negro #000). */

/* v0.2.225 (Pablo): microinteracción del isotipo. En hover los 9 segmentos se separan un poco hacia fuera, cada uno con
   distinta distancia y giro (excéntrico), con rebote; al salir vuelven a encajar. Valores por segmento en site-nav.php. */
.logo-mark .lm line{ transform-box:fill-box; transform-origin:center;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--k,0) * 18ms), stroke .3s ease; }
.logo-mark:hover .lm line, .logo-mark:focus-visible .lm line{ transform:translate(var(--tx),var(--ty)) rotate(var(--r)); }
.menu-open header .logo-mark .lm{ stroke:#0B0A0C; }
@media (prefers-reduced-motion: reduce){ .logo-mark .lm line{ transition:none; } .logo-mark:hover .lm line{ transform:none; } }
.logo-mark svg{ overflow:visible; } /* v0.2.226: los segmentos pueden salir de la caja del SVG al separarse */

/* v0.2.227 (Pablo: "se ve desordenado"): expansión regular. Sin giros ni escalonado; todos a la vez, suave, sin rebote. */
.logo-mark .lm line{ transition:transform .45s cubic-bezier(.22,1,.36,1), stroke .3s ease; }
.logo-mark:hover .lm line, .logo-mark:focus-visible .lm line{ transform:translate(var(--tx),var(--ty)); }
.mn-heart{ font-style:normal; color:#000; } /* v0.2.231 */
/* v0.2.260 (Pablo): al expandirse el isotipo, los segmentos pasan al naranja a la vez y con el mismo ritmo; al encajar vuelven al color de origen. */
.logo-mark .lm line{ transition:transform .45s cubic-bezier(.22,1,.36,1), stroke .45s ease; }
.logo-mark:hover .lm line, .logo-mark:focus-visible .lm line{ stroke:var(--accent); }
.menu-open header .logo-mark:hover .lm line, .menu-open header .logo-mark:focus-visible .lm line{ stroke:#0B0A0C; }
@media (prefers-reduced-motion: reduce){ .logo-mark:hover .lm line{ stroke:var(--accent); } }

/* v0.2.275 (Pablo): contenido del menú un poco más arriba (quedaba tendido hacia abajo); fuera el estado (ahora en À propos). */
@media (min-width:761px){ .mn-grid{ margin-bottom:clamp(48px,9vh,110px); } }
/* v0.2.283 (Pablo): menú desplegado en móvil con más aire vertical entre elementos. */
@media (max-width:760px){
  .mn-grid{ gap:52px; }
  .mn-nav a{ padding:9px 0; }
  .mn-aside{ gap:36px; }
  .mn-grp small{ margin-bottom:14px; }
  .mn-grp a{ padding:6px 0; }
  .mn-lang .lang-switch{ margin-top:2px; }
}
@media (max-width:760px){ .mn-nav a{ padding:15px 0; } .mn-grid{ gap:44px; } }
@media (min-width:761px) and (max-width:1180px){ .mn-inner{ padding-left:clamp(40px,5vw,72px); } } /* v0.2.290: alineado con el logo */