/* 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}
/* 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,.mk-bh canvas,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{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),background-color var(--dur-2) var(--ease)}
.bar.is-solid{background:var(--surface-0)}
.bar.is-hidden{transform:translateY(-100%)}
.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)}}
.menu-btn{padding:.5rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--step--1);font-weight:500;color:var(--ink-strong);background:var(--surface-0)}
.menu{position:fixed;inset:4rem 0 auto 0;z-index:var(--z-menu);display:grid;gap:var(--space-s);max-height:calc(100svh - 4rem);overflow-y:auto;overscroll-behavior:contain;padding:var(--space-l) var(--gutter) var(--space-xl);background:var(--surface-1);border-bottom:1px solid var(--line-2)}
.menu[hidden]{display:none}
.menu a{display:block;color:var(--ink-strong);text-decoration:none}
.menu .big{font-size:var(--step-3);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.menu .mono{margin-top:var(--space-s)}
/* móvil apaisado: los cinco enlaces y el correo caben sin desplazar */
@media (max-height:30em){.menu{gap:var(--space-xs);padding-block:var(--space-s)}.menu .big{font-size:var(--step-2)}}
@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) .menu-btn{display:none}
  html:not(.js) .menu[hidden]{display:flex;flex-wrap:wrap;gap:.35rem var(--space-s);flex-basis:100%;position:static;padding:0;background:none;border:0}
  html:not(.js) .menu .big{font-size:var(--step-0);font-weight:500;letter-spacing:0}
  html:not(.js) .menu .mono{margin:0}
  /* 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}}
}