/* ============================================================
   NOGUI · Design Tokens · v1.0 (referencia congelada)
   Cruce V1 (marco claro editorial) × V2 (anclas oscuras)
   Regla de oro: los colores NUNCA cambian por breakpoint.
   Las media queries reacomodan espacio, no repintan.
   ============================================================ */

:root{
  /* Diseño claro ÚNICO e intencional. Sin tema oscuro: NOGUI es papel, siempre.
     En cada HTML debe ir también: <meta name="color-scheme" content="light only"> */
  color-scheme: light only;

  /* ---- Paleta de marca ---- */
  --teal:  #006D77;   /* color de acción */
  --cyan:  #00B4C4;   /* acción sobre oscuro, acentos vivos */
  --amber: #F0A030;   /* subrayados y micro-acentos, nunca superficies */
  --terra: #CC7040;   /* acento cálido, extremo bajo de la escala DHI */
  --coral: #FF6B6B;   /* reservado: solo estados de error */
  --ink:   #0B2E33;   /* estructura, texto, anclas oscuras */

  /* ---- Superficies ---- */
  --paper:      #F3F2ED;              /* fondo general */
  --surface:    #FFFFFF;              /* tarjetas y paneles */
  --ink-deep:   #0E4249;              /* punto medio del gradiente oscuro */
  --grad-dark:  linear-gradient(165deg, var(--ink) 0%, var(--ink-deep) 75%, var(--teal) 140%);

  /* ---- Texto ---- */
  --text:        var(--ink);
  --text-body:   #33484c;
  --text-muted:  #4a5c5f;
  --text-on-dark:        #F2F7F6;
  --text-on-dark-soft:   rgba(242,247,246,.8);
  --text-ticker: #DCEDEE;

  /* ---- Tipografía ---- */
  --font-display: 'Fraunces', serif;
  --font-body:    'Instrument Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --fs-h1: clamp(34px, 4.8vw, 56px);
  --fs-h2: 26px;
  --fs-h3: 19px;
  --fs-body: 16px;
  --fs-small: 13.5px;
  --fs-mono: 11px;        /* etiquetas mono: siempre uppercase + letter-spacing .14em+ */

  /* ---- Espaciado y forma ---- */
  --space-page-x: 48px;   /* mobile: 20px */
  --radius-card: 13px;
  --radius-btn: 10px;
  --border-strong: 1.5px solid var(--ink);
  --border-card: 1.5px solid rgba(11,46,51,.85);
  --shadow-card: 0 2px 0 rgba(11,46,51,.18);
  --shadow-card-hover: 0 4px 0 rgba(11,46,51,.22);

  /* ---- Nav ---- */
  --nav-h: 56px;          /* barra fina; antes 72px aprox */
}

/* ============================================================
   Base
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--text);
  font-size:var(--fs-body);
}
a:focus-visible, button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

h1{font-family:var(--font-display);font-weight:540;font-size:var(--fs-h1);line-height:1.1}
h1 mark{background:linear-gradient(transparent 66%, rgba(0,180,196,.35) 66%);color:inherit}
h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2)}
h3{font-family:var(--font-display);font-weight:560;font-size:var(--fs-h3);line-height:1.25}

.kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);
}

/* ============================================================
   Componentes
   ============================================================ */

/* --- Botones --- */
.btn{
  display:inline-block;padding:11px 22px;border-radius:var(--radius-btn);
  font-weight:700;font-size:14px;text-decoration:none;border:none;cursor:pointer;
}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:#005a63}
.btn-on-dark{background:var(--cyan);color:var(--ink)}
.btn-ghost{
  background:none;color:var(--ink);font-weight:700;font-size:14.5px;
  text-decoration:none;border-bottom:2px solid var(--amber);
  padding:0 0 2px;border-radius:0;
}
.btn-ghost:hover{color:var(--teal)}

/* --- Nav (fina, se esconde al bajar, reaparece al subir) --- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:var(--nav-h);padding:0 var(--space-page-x);
  background:var(--paper);border-bottom:var(--border-strong);
  transition:transform .28s ease;
}
.nav.hidden{transform:translateY(-100%)}
.logo{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text);text-decoration:none}
.logo .px{display:inline-block;width:8px;height:8px;background:var(--teal);margin-right:7px;vertical-align:1px}
.menu{display:flex;gap:22px;font-size:14px;font-weight:600}
.menu a{color:var(--text);text-decoration:none}
.menu a:hover{color:var(--teal)}
.menu a.new{color:var(--teal);border-bottom:2px solid var(--amber);padding-bottom:1px}
.nav .btn{padding:8px 16px}

/* --- Hamburguesa + drawer lateral (≤900px) --- */
.burger{
  display:none;background:none;border:var(--border-strong);border-radius:8px;
  width:40px;height:40px;cursor:pointer;position:relative;
}
.burger span{position:absolute;left:9px;right:9px;top:19px;height:2px;background:var(--ink)}
.burger span::before, .burger span::after{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(320px,85vw);z-index:60;
  background:var(--ink);color:var(--text-on-dark);
  transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;gap:6px;padding:24px;
}
.drawer.open{transform:translateX(0)}
.drawer a{
  color:var(--text-on-dark);text-decoration:none;font-weight:600;font-size:17px;
  padding:13px 10px;border-bottom:1px solid rgba(242,247,246,.12);
}
.drawer a:hover{color:var(--cyan)}
.drawer a.new{color:var(--cyan)}
.drawer .btn{margin-top:18px;text-align:center}
.drawer-close{
  align-self:flex-end;background:none;border:1px solid rgba(242,247,246,.35);
  color:var(--text-on-dark);border-radius:8px;width:36px;height:36px;
  font-size:16px;cursor:pointer;margin-bottom:8px;
}
.overlay{
  position:fixed;inset:0;background:rgba(11,46,51,.45);z-index:50;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.overlay.show{opacity:1;pointer-events:auto}

/* --- Ticker Señal (ancla oscura 1, NO fija) --- */
.ticker{
  background:var(--ink);color:var(--text-ticker);
  padding:10px var(--space-page-x);font-size:var(--fs-small);
  display:flex;gap:14px;align-items:center;
}
.ticker .tag{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.16em;color:var(--cyan);white-space:nowrap}
.ticker a{color:var(--text-ticker);text-decoration:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ticker a b{color:#fff;font-weight:600;border-bottom:1px solid var(--cyan)}
.ticker a:hover b{color:var(--cyan)}

/* --- Tarjetas de entradas (estables, aprobadas) --- */
.card{
  background:var(--surface);border:var(--border-card);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-card);transition:.15s;
  text-decoration:none;color:var(--text);display:block;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.card h3{padding:10px 18px 6px}
.card p{font-size:var(--fs-small);line-height:1.55;color:var(--text-muted);padding:0 18px 20px}
.chip{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border-radius:6px;margin:16px 0 0 18px;
}
.chip-essay{background:rgba(0,109,119,.10);color:var(--teal)}
.chip-video{background:rgba(0,180,196,.14);color:#00707c}
.chip-guide{background:rgba(204,112,64,.12);color:var(--terra)}

/* --- Banda oscura (ancla 2: manifiesto y similares) --- */
.band-dark{background:var(--grad-dark);color:var(--text-on-dark);padding:76px var(--space-page-x)}
.band-dark .kicker{color:var(--cyan)}

/* --- Footer (ancla 3) --- */
.footer{
  background:var(--ink);color:var(--text-on-dark-soft);
  padding:38px var(--space-page-x);font-size:var(--fs-small);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.footer a{color:var(--text-on-dark-soft);text-decoration:none}
.footer a:hover{color:var(--cyan)}

/* --- Escala DHI --- */
.dhi-bar{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--terra) 0%,var(--amber) 38%,var(--cyan) 70%,var(--teal) 100%)}

/* ============================================================
   Responsive: mismo color, distinto espacio
   ============================================================ */
@media (max-width:900px){
  :root{--space-page-x:20px}
  .menu, .nav > .btn{display:none}   /* menú pasa al drawer */
  .burger{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav, .drawer, .overlay, .card{transition:none}
  .card:hover{transform:none}
}