/* ═══════════════════════════════════════════════════════════════════════════
   LA JALISCIENSE · sistema
   Paleta medida sobre las fotos reales del negocio (investigacion/paleta.mjs).
   Corte unico en 56.25rem (900px), en rem — nunca en px.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, base, componentes, secciones, utilidades;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
  ul[class], ol[class] { list-style: none; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
}

@layer base {
  :root {
    /* ── noche: el negro CALIDO de su propia fachada, no un gris neutro ── */
    --noche:      #100E0D;
    --noche-2:    #191716;
    --carbon:     #241F1C;
    --madera:     #43352D;
    --madera-2:   #73604A;

    /* ── papel: medido en su sello de Instagram ── */
    --papel:      #F6ECDB;
    --papel-2:    #C9B79E;
    --papel-3:    #9C8B76;

    /* ── los rojos ── */
    --rojo:       #E03131;   /* las letras canal de JALISCIENSE */
    --rojo-hondo: #8E2B1E;   /* la cabeza de res del sello */
    --brasa:      #C1441A;   /* el adobo de la cazuela */

    /* ── el acento de luz: el brillo de la grasa del taco dorado ── */
    --guajillo:   #E8A33D;
    --guajillo-2: #F2C572;
    --cilantro:   #8FA85C;

    --sombra-honda: 0 2.4rem 5rem -1.2rem rgb(0 0 0 / .8);
    --filete: 1px solid color-mix(in srgb, var(--papel) 14%, transparent);

    /* ── escala fluida, calibrada al corte unico ── */
    /* piso en 12,5px: por debajo de 12 no se lee en un telefono */
    --paso--2: clamp(.782rem, .76rem + .09vw, .83rem);
    --paso--1: clamp(.833rem, .8rem + .17vw, .93rem);
    --paso-0:  clamp(1rem, .95rem + .25vw, 1.15rem);
    --paso-1:  clamp(1.2rem, 1.11rem + .45vw, 1.46rem);
    --paso-2:  clamp(1.44rem, 1.29rem + .74vw, 1.86rem);
    --paso-3:  clamp(1.73rem, 1.49rem + 1.18vw, 2.37rem);
    --paso-4:  clamp(2.07rem, 1.71rem + 1.82vw, 3.02rem);
    --paso-5:  clamp(2.49rem, 1.94rem + 2.75vw, 3.84rem);

    --ancho: 76rem;
    --canal: clamp(1.25rem, 4vw, 3.5rem);

    color-scheme: dark;
    /* La marca ES oscura: no hay version clara. El fondo se declara aqui y
       el contraste se mide contra ESTA superficie, no contra blanco. */
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--noche);
    color: var(--papel);
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: var(--paso-0);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3 {
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.012em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  ::selection { background: var(--guajillo); color: var(--noche); }

  /* Anillo de foco de doble capa: se ve sobre el negro y sobre el papel. */
  :focus-visible {
    outline: 2px solid var(--noche);
    outline-offset: 0;
    box-shadow: 0 0 0 4px var(--guajillo);
    border-radius: .2rem;
  }
}

@layer utilidades {
  .envoltura {
    width: min(100% - var(--canal) * 2, var(--ancho));
    margin-inline: auto;
  }
  .solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .anton { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; }
  .tabular { font-variant-numeric: tabular-nums; }
}