/*
 * Base compartida: tokens, reset, tipografía, botones, header y utilidades.
 * La usan la portada (css/portada.css) y la aplicación (css/app.css).
 * Mantener estables los nombres de clases y tokens.
 */
/* ---------- Nohemi (pantallas del diagnóstico) ---------- */
@font-face{ font-family:'Nohemi'; src:url('../fonts/Nohemi-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nohemi'; src:url('../fonts/Nohemi-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nohemi'; src:url('../fonts/Nohemi-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nohemi'; src:url('../fonts/Nohemi-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
/* ---------- Pixelify Sans (título de la portada) e IBM Plex Mono (texto base) ----------
   Alojadas en fonts/ (licencia OFL, ver fonts/LEEME.txt): la página no espera a Google Fonts.
   Subconjuntos latin y latin-ext, con los mismos unicode-range que usa Google. */
@font-face{ font-family:'Pixelify Sans'; src:url('../fonts/PixelifySans-Bold-latin.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Pixelify Sans'; src:url('../fonts/PixelifySans-Bold-latin-ext.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Regular-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Regular-latin-ext.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Medium-latin.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-Medium-latin-ext.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-SemiBold-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/IBMPlexMono-SemiBold-latin-ext.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root{
  --bg:#EEEFEC; --bg-2:#E6E7E3; --paper:#F7F8F5; --white:#FFFFFF;
  --ink:#0A0A0A; --ink-2:#2B2B29; --muted:#6A6B67; --line:#D5D6D1; --line-2:#BFC0BB;
  --ok:#1E6B35; --bad:#A3261E;
  --font-pixel:'Pixelify Sans', 'Courier New', monospace;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans:'Nohemi', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --gutter:clamp(30px, 2.4vw, 48px); --radius:2px; --header-h:98px;
}

@media (max-width: 699px){
  :root{ --gutter:20px; --header-h:72px; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
}

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, figure, blockquote{ margin:0; }
ol, ul{ padding:0; }
img, svg, canvas, video{ display:block; max-width:100%; }
a{ color:inherit; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }

::selection{ background:var(--ink); color:var(--white); }

/* Contrato: la portada solo se ve en la vista "landing". */
body:not([data-view="landing"]) #landing{ display:none; }

/* ---------- Utilidades ---------- */
.pixel{
  font-family:var(--font-pixel);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0;
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:38px;
  padding:0 22px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.btn--primary{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}
.btn--primary:hover{ background:var(--ink-2); border-color:var(--ink-2); }
.btn--primary:disabled:hover,
.btn--primary[aria-disabled="true"]:hover{ background:var(--ink); border-color:var(--ink); }

.btn--ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn--ghost:hover{ background:var(--ink); color:var(--white); }
.btn--ghost:disabled:hover,
.btn--ghost[aria-disabled="true"]:hover{ background:transparent; color:var(--ink); }

.btn--link{
  padding:0 2px;
  border:0;
  background:none;
  color:var(--ink);
  gap:14px;
}
.btn--link::after{
  content:"";
  width:6px;
  height:6px;
  margin-top:1px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.btn--link:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}
.btn--link:hover::after{ transform:translateX(3px) rotate(45deg); }
.btn--link:active{ transform:none; }

/* ---------- Header y logo ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--header-h);
  padding:0 32px 0 var(--gutter);
}

.logo{
  display:inline-flex;
  flex:none;
  width:26px;
  height:26px;
  color:var(--ink);
  text-decoration:none;
}
.logo svg{ width:100%; height:100%; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}