/* ═══════════════════════════════════════════════════════════════════════════
   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, 4.4rem);
    /* NOVENO y ultimo paso. La disciplina del taller son <=9 tamanos: este es
       el noveno, reservado a las voces de marca (letrero, cifras, apertura de
       apartado). No se anade un decimo sin motivo escrito. */
    --paso-6:  clamp(3.2rem, 1.5rem + 8.2vw, 8.2rem);

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

    /* ── ESPACIO · una sola progresion, para que el ritmo vertical exista ──
       El sitio tenia el espaciado a mano seccion por seccion, y por eso habia
       vacios de 400px sin intencion junto a bloques apretados. */
    --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
    --e-5: 1.5rem;  --e-6: 2rem;    --e-7: 3rem;    --e-8: 4rem;
    --e-9: 6rem;    --e-10: 8rem;
    /* aire entre secciones: fluido, pero acotado — el vacio se compone, no sobra */
    --aire: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --aire-corto: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

    /* ── MEDIDA DE LINEA · sin esto el parrafo se estira a 76rem y no se lee ── */
    --medida: 34rem;
    --medida-corta: 26rem;

    /* ── REJILLA EDITORIAL · 12 columnas reales, para componer fuera del eje ── */
    --cols: 12;

    /* ── RADIO · casi recto. El barro no tiene esquinas de 16px ── */
    --r-1: 2px;  --r-2: 4px;  --r-3: 8px;

    /* ── MOVIMIENTO · una sola gramatica, sin libreria ── */
    --t-rapido: 140ms;
    --t-medio: 320ms;
    --t-lento: 620ms;
    --e-salida: cubic-bezier(.22, .61, .36, 1);
    --e-entrada: cubic-bezier(.4, 0, .68, .06);
    --e-suave: cubic-bezier(.33, 1, .68, 1);

    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: -.03em;
    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; }

  /* ── LA REJILLA EDITORIAL ────────────────────────────────────────────────
     12 columnas de verdad. Es lo que permite componer FUERA del eje central:
     un titular que arranca en la 2 y una foto que termina en la 11 no se
     pueden hacer con un contenedor centrado y margenes automaticos. */
  .rejilla {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--e-5);
    width: min(100% - var(--canal) * 2, var(--ancho));
    margin-inline: auto;
  }
  .medida { max-inline-size: var(--medida); }
  .medida-corta { max-inline-size: var(--medida-corta); }

  /* Aire entre secciones, desde el token — no a mano seccion por seccion. */
  .aire { padding-block: var(--aire); }
  .aire-corto { padding-block: var(--aire-corto); }
}

/* ═══════════════ EL FONDO CON CONCEPTO ═══════════════════════════════════
   Palanca 2 del taller. El negro plano es la decision perezosa: aqui el fondo
   es PAPEL DE ESTRAZA en penumbra con el rescoldo del cazo detras.
   Dos capas, las dos en CSS — cero peticiones de imagen, cero KB de textura:
     · el grano, con feTurbulence en un SVG de 180 bytes, al 3.5%;
     · el rescoldo, dos gradientes calidos muy abiertos.
   §23 pide que sea casi subliminal: se mide abajo, no se opina. */
@layer base {
  body { position: relative; isolation: isolate; }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* el rescoldo: no esta centrado a proposito — el fuego esta en la cocina,
       al fondo a la derecha, no en medio de la pagina */
    background:
      radial-gradient(58rem 42rem at 78% 8%, color-mix(in srgb, var(--brasa) 13%, transparent), transparent 62%),
      radial-gradient(48rem 40rem at 12% 88%, color-mix(in srgb, var(--madera) 20%, transparent), transparent 66%);
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
  }

  /* El grano es textura, no ruido visual: en pantallas finas se retira. */
  @media (max-width: 30rem) { body::after { opacity: .022; } }
}