/* ============================================================
   HUNGER · propuesta B — «Papel y jungla»
   Base: reset, tokens y tipografía.

   La paleta NO se inventó: cada valor está medido de material
   propio del restaurante (ver brief.md §3). Aquí se invierte el
   reparto respecto a la propuesta A — el hueso de sus servilletas
   pasa a ser el suelo, y el verde de su plafón se reserva para las
   dos secciones que de verdad son noche.
   ============================================================ */

/* ---------- reset acotado ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
/* `height: auto` NO es decorativo. Las <img> llevan atributos width/height para
   reservar sitio y evitar saltos de layout; sin esta línea, ese `height` gana al
   `aspect-ratio` de la hoja y cada tarjeta sale de una altura distinta según la
   foto que le tocó. Las que necesitan otra altura la declaran después. */
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- tokens ---------- */
:root {
  /* superficie */
  --papel:      #EDE7DB;   /* su hueso #E8E2D6 (servilletas y vajilla), 3% más claro */
  --papel-hondo:#E3DBCB;   /* la misma tela en sombra: bandas y separadores */
  --jungla:     #1C2A17;   /* verde botella medido de sus bancas y su plafón */
  --jungla-hondo:#131D10;  /* el mismo verde bajo la luz de vela */
  --tinta:      #1D1A11;   /* el café-negro de sus sombras de interior */

  /* tinta y marca */
  --oro:        #C6AE60;   /* 49% de los píxeles opacos de su logo */
  --oro-hondo:  #6E5B23;   /* el oro, bajado hasta que pasa AA sobre las DOS superficies
                              claras: 5,36:1 sobre el papel y 4,79:1 sobre el papel hondo.
                              A #8A7433 se quedaba en 3,30 y el medidor lo cantaba. */
  --oro-placa:  #8A7433;   /* el oro medio, solo para trazo y relleno, nunca para letra */

  /* texto secundario, ya mezclado. Un color-mix con `transparent` computa como
     alfa y el medidor de contraste lo lee como 1,20:1 donde hay 6,20:1: se
     acaba calibrando contra un número falso. Aquí van planos. */
  --tinta-suave: #605C52;  /* 5,41:1 sobre papel · 4,84:1 sobre papel hondo */
  --hueso-suave: #C3C1B4;  /* 8,33:1 sobre jungla */
  --hueso-tenue: #B7B6A8;  /* 7,37:1 sobre jungla */
  --pie-suave:   #9F9A8F;  /* 6,20:1 sobre tinta */
  --laton:      #D1B586;   /* la luz de vela de su salón */
  --hueso:      #E8E2D6;
  --terracota:  #883F34;   /* su sillería de terciopelo */
  --llama:      #FC8213;   /* medido de la lumbre de su Josper */
  --brasa:      #CE5A0F;

  /* tipografía
     La marca real de Hunger NO es una didone fina: su logotipo es una sans
     condensada ultra-bold sobre verde. Por eso el nombre va en Anton —que es
     lo más cercano disponible— y la didone se reserva para los titulares de
     sección, con peso 600 en vez de 500: a 500 las astas se deshilachaban y
     el titular se leía como si estuviera medio borrado. */
  --marca:   'Anton', 'Oswald', 'Archivo Black', Impact, sans-serif;
  --display: 'Bodoni Moda', 'Bodoni MT', Didot, Georgia, serif;
  --texto:   'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, sans-serif;

  /* siete tamaños. Ni uno más — la disciplina es la mitad del efecto */
  --t-rotulo:  0.75rem;                                /* 12px versalitas: por debajo el medidor lo marca y en teléfono cuesta leerlo */
  --t-menudo:  0.8125rem;                              /* 13px */
  --t-cuerpo:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);/* 16–17px */
  --t-guia:    clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --t-nicho:   clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem);
  --t-titulo:  clamp(2.375rem, 1.6rem + 3.7vw, 5.25rem);
  --t-portada: clamp(3.25rem, 1.9rem + 6.6vw, 8.5rem);

  /* ritmo */
  --medida: 38.75rem;      /* 620px: la medida de texto del brief */
  --ancho:  75rem;         /* 1200px */
  --canal:  clamp(1.25rem, 4vw, 3.5rem);
  --aire:   clamp(4.5rem, 3rem + 6vw, 9rem);
}

/* ---------- página ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-cuerpo);
  font-weight: 420;              /* Jost 400 es muy fina sobre papel claro */
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;               /* clip, no hidden: hidden mata view() */
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;              /* 500 se veía deshilachado; 600 aguanta el trazo fino */
  line-height: 1.06;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* ---------- utilidades ---------- */
.lienzo { width: min(100% - var(--canal) * 2, var(--ancho)); margin-inline: auto; }
.medida { max-width: var(--medida); }

.rotulo {
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 600;              /* los rótulos en versalitas necesitan cuerpo */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* foco visible siempre — se hereda de la propuesta A porque ahí funcionó */
:focus-visible {
  outline: 2px solid var(--llama);
  outline-offset: 3px;
  border-radius: 2px;
}

.saltar {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 200; background: var(--tinta); color: var(--hueso);
  padding: 0.75rem 1.25rem; text-decoration: none;
  font-size: var(--t-menudo); letter-spacing: 0.1em; text-transform: uppercase;
  transition: translate 0.2s ease-out;
}
.saltar:focus { translate: -50% 0; }