/* base.css · reset, tipografía base, foco, skip, botones, enlaces .u, reduced motion, view transitions, print, barra y menú */
@layer base{
*,*::before,*::after{box-sizing:border-box}
/* color-scheme vive aquí (no en tokens.css) para que el portal, que sólo enlaza tokens.css, no cambie sus controles nativos */
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem;overflow-x:clip;color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{margin:0;min-height:100svh;background:var(--surface-0);color:var(--ink-1);font:400 var(--step-0)/1.55 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;color:var(--ink-strong);font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h3{font-weight:700}
h1 i,h2 i,h3 i,.hero-role i,.brandlink i{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1em;letter-spacing:0}
p{margin:0;text-wrap:pretty;hyphens:auto}
p+p{margin-top:var(--space-s)}
ul,ol,dl,figure,pre{margin:0}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:.18em}
@media (hover:hover){a:hover{color:var(--accent-hover)}}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong{font-weight:600;color:var(--ink-strong)}
time,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono);font-size:var(--step--1);font-weight:400;letter-spacing:.02em;line-height:1.6;color:var(--ink-faint)}
.lead{font-size:var(--step-1);line-height:1.4;max-width:34em}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* foco en dos capas: único outline:none y único box-shadow de todo el CSS */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface-0),0 0 0 4px var(--focus);border-radius:var(--r-sm)}
::selection{background:var(--accent);color:var(--on-accent)}
.skip{position:fixed;top:.75rem;left:.75rem;z-index:var(--z-skip);padding:.55rem .9rem;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;border-radius:var(--r-sm);transform:translateY(-300%)}
.skip:focus{transform:none}
/* botones del sistema (home, 404) */
.btn,.btn-ghost{display:inline-flex;align-items:center;gap:.5em;padding:.8rem 1.35rem;border-radius:var(--r-sm);font-weight:600;line-height:1.2;text-decoration:none;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.btn{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:var(--surface-1);color:var(--ink-1);border:1px solid var(--line-2)}
@media (hover:hover){.btn:hover{background:var(--accent-hover);color:var(--on-accent)}.btn-ghost:hover{color:var(--ink-strong);border-color:var(--line-3)}}
.btn:active,.btn-ghost:active{transform:scale(.98)}
.contact-links{display:flex;flex-wrap:wrap;gap:var(--space-s)}
/* enlace con subrayado que crece de izquierda a derecha (M17) */
.u{position:relative;display:inline-block;color:var(--accent-text);text-decoration:none;padding-bottom:.08em}
.u::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease)}
@media (hover:hover){.u:hover{color:var(--accent-hover)}.u:hover::after{transform:scaleX(1);transform-origin:left}}
.u:focus-visible::after{transform:scaleX(1);transform-origin:left}
.u small{font-size:.85em;color:var(--ink-faint);white-space:nowrap;margin-left:.2em}
/* puntero grueso: los enlaces de texto y «Copiar» alcanzan 44 px sin mover la línea de base */
@media (pointer:coarse){.u,.copy{padding-block:.65rem;margin-block:-.45rem}.u::after{bottom:.65rem}.brandlink{min-height:44px;padding-inline:.5rem;margin-inline:-.5rem}}
/* view transitions (M20) */
@view-transition{navigation:auto}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-old(root){animation:220ms ease-out both vt-out}
::view-transition-new(root){animation:320ms var(--ease) both vt-in}
header.bar{view-transition-name:site-nav}
/* reduced motion: bloque único */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}}
@media print{
  html{color-scheme:light}
  .bar,.skip,.menu,.menu-btn,.preloader,.cursor,.cursor-ring,.marquee,site-footer{display:none}
  .mk-bh img,.portrait img{filter:none}
  a{color:inherit;text-decoration:underline}
  section{break-inside:avoid-page}
}
}
/* barra compartida (home, legales, 404), menú móvil y estados is-solid / is-hidden (antes nav.css) */
@layer components{
.bar{--bar-fade:2.75rem;position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);height:4rem;padding-inline:var(--gutter);color:var(--ink-strong);transition:transform var(--dur-3) var(--ease)}
/* is-solid sin franja: --surface-0 opaco tras la barra que se funde con la página en --bar-fade bajo su borde (máscara, sin
   backdrop-filter). El contenido pasa por debajo sin corte y la barra no se lee como una banda de otro color */
.bar::before{content:"";position:absolute;inset:0 0 calc(-1 * var(--bar-fade)) 0;z-index:-1;pointer-events:none;background:var(--surface-0);opacity:0;transition:opacity var(--dur-3) var(--ease);
  -webkit-mask-image:linear-gradient(to bottom,black 0,black 40%,rgb(0 0 0 / .9) 56%,rgb(0 0 0 / .68) 67%,rgb(0 0 0 / .4) 78%,rgb(0 0 0 / .15) 89%,transparent);
  mask-image:linear-gradient(to bottom,black 0,black 40%,rgb(0 0 0 / .9) 56%,rgb(0 0 0 / .68) 67%,rgb(0 0 0 / .4) 78%,rgb(0 0 0 / .15) 89%,transparent)}
.bar.is-solid::before{opacity:1}
.bar.is-hidden{transform:translateY(calc(-100% - var(--bar-fade)))}
/* al abrir, la barra salta a su sitio: con un transform en curso .bar sería el bloque contenedor de la hoja fija y la recortaría */
.bar.is-open{transition:none}
/* menú abierto: la página de detrás no desplaza (sin Lenis, con reduce, la rueda la movería a ciegas) */
html.menu-open{overflow:clip}
.brandlink{display:inline-flex;align-items:center;gap:.65rem;min-width:0;color:var(--ink-strong);font-weight:600;text-decoration:none;white-space:nowrap}
.brandlink .logo{height:1.3rem;width:auto;aspect-ratio:356/279;color:var(--ink-strong);flex:none}
.brandlink i{color:var(--ink-muted);display:none}
.bar nav{display:none;align-items:center;gap:clamp(1rem,2vw,2rem)}
.bar nav a{color:var(--ink-1);font-size:var(--step--1);font-weight:500;text-decoration:none;padding:.25rem 0;white-space:nowrap}
.bar nav a[aria-current="true"]{color:var(--ink-strong)}
@media (hover:hover){.bar nav a:hover{color:var(--ink-strong)}}
.bar .mail{display:none;color:var(--ink-muted);text-decoration:none}
@media (hover:hover){.bar .mail:hover{color:var(--ink-strong)}}
/* M19 menú móvil. Botón: dos trazos de 2 px (el inferior más corto, alineado a la derecha) que se cruzan en una X al abrir;
   objetivo de 44 × 44 px (addendum §3.11) con el icono alineado ópticamente al margen. Nombre accesible «Menú» (aria-label) */
.menu-btn{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;margin-right:-11px;border-radius:var(--r-pill);color:var(--ink-strong);-webkit-tap-highlight-color:transparent}
.burger{position:relative;display:block;width:22px;height:8px}
.burger span{position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:currentColor;transition:transform .4s var(--ease)}
.burger span:first-child{top:0;transform:translate(0,0) rotate(0) scaleX(1)}
.burger span:last-child{bottom:0;transform:translate(4px,0) rotate(0) scaleX(.6364)}
.menu-btn[aria-expanded="true"] .burger span:first-child{transform:translate(0,3px) rotate(45deg) scaleX(1)}
.menu-btn[aria-expanded="true"] .burger span:last-child{transform:translate(0,-3px) rotate(-45deg) scaleX(1)}
@media (hover:hover){.menu-btn[aria-expanded="false"]:hover .burger span:last-child{transform:translate(0,0) rotate(0) scaleX(1)}}
/* Hoja: ocupa todo el viewport por detrás de la barra (misma --surface-0, sin costura ni borde) y desplaza por dentro si
   no cabe. Con JS entra con un fundido y los enlaces suben escalonados (.is-open); al cerrar sólo se funde. Con reduce, la regla global de base deja todo instantáneo */
/* z-index:-1: vive en el contexto de apilamiento de .bar (antes --z-menu) */
.menu{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-s);overflow-y:auto;overscroll-behavior:contain;padding:calc(4rem + var(--space-l)) var(--gutter) max(var(--space-l),env(safe-area-inset-bottom));background:var(--surface-0)}
.menu[hidden]{display:none}
.menu a{display:block;color:var(--ink-strong);text-decoration:none;-webkit-tap-highlight-color:transparent}
.menu .big{font-size:var(--step-3);font-weight:800;letter-spacing:-.03em;line-height:1.1;padding-block:.1em}
.menu .mono{margin-top:auto;padding-top:var(--space-m);min-height:44px;display:flex;align-items:center;color:var(--ink-muted)}
html.js .menu{opacity:0;transition:opacity var(--dur-2) var(--ease)}
html.js .menu a{opacity:0;transform:translateY(.6rem);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
html.js .bar.is-open .menu{opacity:1;transition-duration:var(--dur-3)}
html.js .bar.is-open .menu a{opacity:1;transform:none;transition-duration:.5s}
.bar.is-open .menu a:nth-child(1){transition-delay:60ms}
.bar.is-open .menu a:nth-child(2){transition-delay:100ms}
.bar.is-open .menu a:nth-child(3){transition-delay:140ms}
.bar.is-open .menu a:nth-child(4){transition-delay:180ms}
.bar.is-open .menu a:nth-child(5){transition-delay:220ms}
.bar.is-open .menu a:nth-child(6){transition-delay:280ms}
/* móvil apaisado: los cinco enlaces y el correo caben sin desplazar */
@media (max-height:30em){.menu{gap:var(--space-xs);padding-top:calc(4rem + var(--space-xs))}.menu .big{font-size:var(--step-2)}.menu .mono{min-height:0;padding-top:var(--space-xs)}}
/* < 40em: sólo el monograma en la barra (el nombre queda para lectores de pantalla); el nombre grande ya está en el hero.
   Monograma a 2,1 rem (≈ 43 × 34 px; enlace ≥ 44 px de alto): aguanta al lado del nombre a 24vw. La hamburguesa crece con él
   (× 1,25: trazos de 2,5 px, 27,5 px de ancho; el objetivo sigue en 44 px) y su margen compensa para que su borde derecho siga
   en el margen de la página: la barra no se inclina hacia el logo */
@media (max-width:39.99em){.brandlink span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.brandlink{min-height:44px}.brandlink .logo{height:2.1rem}.burger{scale:1.25}.menu-btn{margin-right:-8.25px}}
@media (max-width:59.99em){
  /* sin JS el menú es una fila visible dentro de la barra, que deja de estar fija */
  html:not(.js) .bar{position:static;flex-wrap:wrap;height:auto;padding-block:var(--space-xs)}
  html:not(.js) .bar::before,.bar.bar-static::before{display:none}
  html:not(.js) .menu-btn{display:none}
  html:not(.js) .menu[hidden]{display:flex;flex-direction:row;flex-wrap:wrap;gap:.35rem var(--space-s);flex-basis:100%;position:static;z-index:auto;overflow:visible;padding:0;background:none}
  html:not(.js) .menu .big{font-size:var(--step-0);font-weight:500;letter-spacing:0}
  html:not(.js) .menu .mono{margin:0;padding:0;min-height:0;color:var(--ink-strong)}
  /* legales y 404: sin menú; la barra deja de estar fija y los enlaces pasan a una fila bajo la marca */
  .bar.bar-static{position:static;flex-wrap:wrap;height:auto;padding-block:var(--space-s)}
  .bar.bar-static nav{display:flex;flex-wrap:wrap;flex-basis:100%;gap:.35rem var(--space-s)}
}
@media (min-width:60em){
  .bar nav{display:flex}
  .bar .mail{display:inline}
  .menu-btn,.menu{display:none}
}
@media (min-width:72em){.brandlink i{display:inline}}
/* legales y 404 en táctil: enlaces de la fila bajo la marca con objetivo ≥ 44 px */
@media (pointer:coarse){.bar.bar-static nav a{padding-block:.7rem;margin-block:-.45rem}}
}