/* ══════════════════════════════════════════════════════════════════════════
   LOS ARBOLITOS · hoja única
   Los tokens salen de identidad.md, y todos los contrastes de ahí están
   medidos, no estimados.

   LA REGLA DE LA LUZ
   El sitio amanece en lino y anochece en olivo. Al cruzar NO se reescriben
   los colores: se reapunta a qué miran las variables. Y el sello se cambia,
   porque el ámbar sobre lino da 1.31:1 y la bugambilia sobre olivo 1.33:1.
   ══════════════════════════════════════════════════════════════════════════ */

@layer base, componentes, utilidades;

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* DÍA — el estado por defecto */
  --papel:        #F3EDE4;   /* base */
  --superficie:   #DED4CB;   /* el lino del logotipo, 84% de su área */
  --tinta:        #474836;   /* el olivo del trazo · 8.03:1 sobre papel */
  /* Calibrado contra la superficie MÁS OSCURA (#DED4CB), no contra el papel:
     el #6B6A55 aprobaba en la hoja (4.73 sobre papel) y reprobaba en pantalla
     (3.77 sobre las tarjetas). Ahora: 4.72 sobre superficie · 5.93 sobre papel. */
  --tinta-suave:  #5C5B48;
  --sello:        #890010;   /* bugambilia del muro de Juriquilla · 8.71:1 */
  --sello-tinta:  #F3EDE4;   /* texto encima del sello */
  --borde:        rgb(71 72 54 / .16);
  --sombra:       rgb(71 72 54 / .10);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Escala: ratio 1.25 en el cuerpo, saltos mayores solo en titulares */
  --t-micro: .75rem;
  --t-mini:  .875rem;
  --t-base:  1.0625rem;
  --t-lead:  1.1875rem;
  --t-h3:    clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  --t-h2:    clamp(1.75rem, 1.25rem + 2.2vw, 2.9rem);
  --t-h1:    clamp(2.5rem, 1.6rem + 4.2vw, 5rem);

  --e-1: .5rem;  --e-2: 1rem;   --e-3: 1.5rem;  --e-4: 2rem;
  --e-5: 3rem;   --e-6: 4rem;   --e-7: 6rem;    --e-8: 8rem;

  --radio: 3px;              /* el logo no tiene una sola curva: radios mínimos */
  --curva: cubic-bezier(.2, .7, .3, 1);
  --duro:  240ms;
  --lento: 420ms;

  --ancho:  74rem;
  --lectura: 34rem;          /* columna estrecha: el plano da 475px */
}

/* NOCHE — se reapunta, no se reescribe */
[data-luz="noche"] {
  --papel:       #242617;
  --superficie:  #2E3020;
  --tinta:       #EFE7DA;    /* 12.54:1 */
  --tinta-suave: #A8A38C;    /* 6.07:1 */
  --sello:       #D6BA4F;    /* el ámbar de los nichos de la barra · 8.06:1 */
  --sello-tinta: #242617;
  --borde:       rgb(239 231 218 / .18);
  --sombra:      rgb(0 0 0 / .40);
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* clip y NO hidden: hidden crea un contenedor de scroll y deja
       muertas las animaciones de view() sin dar ningún error */
    overflow-x: clip;
  }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: var(--t-base);
    line-height: 1.65;
    overflow-x: clip;
    /* la costura entre luces es un UMBRAL: el color cambia de golpe en el
       borde de una sección. Un degradado recto pasa por gris y sale humo. */
    transition: background-color var(--lento) var(--curva);
  }

  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-wrap: balance;
    margin: 0;
  }
  h1 { font-size: var(--t-h1); }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); line-height: 1.2; }

  p { margin: 0 0 var(--e-2); text-wrap: pretty; }
  /* los titulares llevan margin:0 para que la rejilla mande; el aire lo pone
     el párrafo que viene detrás */
  :is(h1, h2, h3) + p,
  :is(h1, h2, h3) + .botonera,
  :is(h1, h2, h3) + ul { margin-top: var(--e-2); }
  h2 + .carta-nota { margin-top: var(--e-1); }

  a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--sello);
    outline-offset: 3px;
    border-radius: 2px;
  }

  img { max-width: 100%; height: auto; display: block; }

  ::selection { background: var(--sello); color: var(--sello-tinta); }
}

@layer componentes {

  /* ── Estructura ──────────────────────────────────────────────────────── */
  .franja { padding-inline: var(--e-3); }
  .caja   { max-width: var(--ancho); margin-inline: auto; }
  .lectura { max-width: var(--lectura); }

  section { padding-block: var(--e-6); }
  /* [data-luz] y NO section[data-luz]: el <footer> llevaba el atributo, tomaba
     los tokens de noche y se quedaba con el fondo de día. Texto claro sobre
     claro, 2.18:1, y ninguna captura de la primera pantalla lo mostraba. */
  [data-luz] { background: var(--papel); color: var(--tinta); }

  /* ── Rótulo de sección: la tercera voz ───────────────────────────────── */
  .rotulo {
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    margin: 0 0 var(--e-2);
    display: flex; align-items: center; gap: var(--e-2);
  }
  .rotulo::after {
    content: ""; flex: 1; height: 1px; background: var(--borde);
  }

  /* ── El asterisco: el reloj del sitio ────────────────────────────────── */
  /* Son las dos únicas piezas del logotipo que no son árbol. De día leen
     como destellos de sol; de noche, como estrellas. */
  .aster {
    display: inline-block;
    width: 1em; height: 1em;
    color: var(--sello);
    vertical-align: -.1em;
    animation: gira-aster 38s linear infinite;
  }
  .aster svg { width: 100%; height: 100%; display: block; }
  .aster--lento { animation-duration: 61s; animation-direction: reverse; }

  @keyframes gira-aster {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
  }

  /* ── Botones ─────────────────────────────────────────────────────────── */
  .btn {
    /* text-box-trim clava los titulares pero recorta el área táctil:
       aquí NO se usa. El aire viene del padding. */
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5em;
    min-height: 3rem; padding: .85rem 1.6rem;
    font-family: var(--sans);
    font-size: var(--t-mini);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--sello);
    border-radius: var(--radio);
    background: var(--sello);
    color: var(--sello-tinta);
    cursor: pointer;
    transition: background-color var(--duro) var(--curva),
                color var(--duro) var(--curva),
                translate var(--duro) var(--curva);
  }
  .btn:hover { translate: 0 -2px; background: transparent; color: var(--sello); }

  .btn--linea { background: transparent; color: var(--tinta); border-color: var(--borde); }
  .btn--linea:hover { border-color: var(--tinta); background: transparent; color: var(--tinta); }

  .botonera { display: flex; flex-wrap: wrap; gap: var(--e-2); }

  /* ── Cabecera ────────────────────────────────────────────────────────── */
  /* La barra NO es fija: una barra fija tapa el CTA del héroe y falsea
     cualquier medición de contraste contra el fondo. Ocupa su hueco. */
  .cabecera {
    background: var(--papel); color: var(--tinta);
    padding-block: var(--e-3);
    border-bottom: 1px solid var(--borde);
  }
  .cabecera .caja {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-3); flex-wrap: wrap;
  }
  .marca { display: flex; align-items: center; gap: .7rem; text-decoration: none;
           padding-block: .2rem; min-height: 44px; }
  /* El logotipo va como MÁSCARA y no como imagen: así se pinta con
     currentColor y cruza de la luz de día a la de noche sin un segundo
     archivo ni una regla más. */
  .marca__logo {
    flex: none;
    width: 52px; height: 42px;
    background-color: currentColor;
    -webkit-mask: url("img/logo-mascara.png") center / contain no-repeat;
            mask: url("img/logo-mascara.png") center / contain no-repeat;
  }
  .marca b {
    font-family: var(--sans); font-weight: 600;
    font-size: var(--t-mini); letter-spacing: .18em; text-transform: uppercase;
  }
  .menu { display: flex; gap: 0 .9rem; flex-wrap: wrap; align-items: center; }
  /* La zona táctil se agranda con padding y NO con inline-flex: un contenedor
     flex convierte cada palabra en un ítem y se come los espacios del texto. */
  .menu a {
    display: inline-block;
    /* el padding lateral existe para las palabras cortas: «Tula» mide 36 px
       de ancho y sin él la zona táctil se queda por debajo de 44 */
    padding: .78rem .45rem;
    margin-inline: -.45rem;
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    white-space: nowrap;
    color: var(--tinta-suave);
    transition: color var(--duro) var(--curva);
  }
  .menu a:hover, .menu a[aria-current] { color: var(--tinta); }

  /* ── Héroe ───────────────────────────────────────────────────────────── */
  .heroe { padding-block: var(--e-6) var(--e-7); }
  .heroe__rejilla {
    display: grid; gap: var(--e-5);
    grid-template-columns: 1fr;
    align-items: center;
  }
  .heroe__lema {
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--sello);
    margin: 0 0 var(--e-3);
  }
  .heroe h1 { margin-bottom: var(--e-3); }
  .heroe__entrada { font-size: var(--t-lead); color: var(--tinta-suave); max-width: 32rem; }

  /* La foto ligeramente torcida, como pegada en un álbum.
     Es la mitad del carácter y cuesta dos reglas. */
  .torcida {
    rotate: -1.4deg;
    box-shadow: 0 18px 40px -18px var(--sombra);
    border-radius: var(--radio);
    overflow: hidden;
    /* la caja tiene que contener el efecto: un giro que se sale agranda el
       scrollWidth igual que un inset negativo */
    margin-inline: 2%;
  }
  .torcida--otra { rotate: 1.1deg; }
  .torcida img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
  .torcida--ancha img { aspect-ratio: 16 / 10; }

  /* ── Los tres momentos ───────────────────────────────────────────────── */
  .momentos { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
  .momento {
    /* min-width: 0 en las dos direcciones: sin esto, un hijo ancho
       ensancha la celda y corta el texto sin dejar barra de scroll */
    min-width: 0;
    padding: var(--e-4);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
  }
  .momento h3 { margin-bottom: var(--e-1); }
  .momento .hora {
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .16em; color: var(--sello); text-transform: uppercase;
    display: block; margin-bottom: var(--e-2);
  }
  .momento p { color: var(--tinta-suave); margin: 0; }

  /* ── El umbral: donde el sitio cambia de luz ─────────────────────────── */
  /* Sin degradado. El borde entre las dos secciones ES la costura. */
  .umbral { padding-block: var(--e-6); text-align: center; }
  .umbral__frase {
    font-family: var(--serif);
    font-size: var(--t-h3);
    color: var(--tinta-suave);
    max-width: 30rem; margin-inline: auto;
  }
  .umbral__astros {
    display: flex; justify-content: center; align-items: center;
    gap: var(--e-5); margin-bottom: var(--e-3);
    font-size: 1.8rem;
  }

  /* ── Sucursales: cada local con su propia animación ──────────────────── */
  /* Es el patrón que se hereda: la referencia le da a cada sucursal su
     propio keyframe. Aquí Juriquilla amanece y Tula se enciende. */
  .sucursales { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
  .sucursal {
    min-width: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--superficie);
    position: relative;
  }
  .sucursal__foto { position: relative; }
  .sucursal__foto img { aspect-ratio: 16 / 11; object-fit: cover; width: 100%; }
  .sucursal__cuerpo { padding: var(--e-4); }
  .sucursal__sitio {
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .2em; text-transform: uppercase; color: var(--sello);
    margin: 0 0 var(--e-1);
  }
  .sucursal h3 { margin-bottom: var(--e-2); }
  .sucursal dl { margin: 0 0 var(--e-3); display: grid; gap: .4rem; }
  .sucursal dt {
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
  }
  .sucursal dd { margin: 0 0 .6rem; }

  /* JURIQUILLA · amanece: una banda de luz que crece de abajo a arriba.
     Es la sucursal del desayuno y del pan francés. */
  .sucursal--juriquilla .sucursal__foto::after {
    content: ""; position: absolute; inset: auto 0 0 0;
    height: 12%;
    background: linear-gradient(to top, rgb(214 186 79 / .55), transparent);
    animation: amanece-juriquilla 9s var(--curva) infinite alternate;
    pointer-events: none;
  }
  @keyframes amanece-juriquilla {
    from { height: 8%;  opacity: .45; }
    to   { height: 46%; opacity: .95; }
  }

  /* TULA · se enciende: un halo cálido que late desde el centro.
     Es la madre, la de la cena y la celebración. 24 años de diferencia. */
  .sucursal--tula .sucursal__foto::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60% 60% at 50% 62%, rgb(214 186 79 / .40), transparent 70%);
    animation: enciende-tula 7s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes enciende-tula {
    from { opacity: .25; scale: .92; }
    to   { opacity: .85; scale: 1.04; }
  }

  /* ── Platillos ───────────────────────────────────────────────────────── */
  .platos { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
  .plato { min-width: 0; }
  .plato img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border-radius: var(--radio); }
  .plato h3 { margin: var(--e-2) 0 .2rem; }
  .plato .precio {
    font-family: var(--mono); font-size: var(--t-mini);
    color: var(--sello); letter-spacing: .04em;
  }
  .plato p { color: var(--tinta-suave); font-size: var(--t-mini); margin-top: .4rem; }

  /* ── La carta ────────────────────────────────────────────────────────── */
  .carta-grupo { margin-bottom: var(--e-6); }
  .carta-grupo > h2 { margin-bottom: var(--e-1); }
  .carta-nota {
    font-family: var(--mono); font-size: var(--t-micro);
    color: var(--tinta-suave); letter-spacing: .06em;
    line-height: 1.6; margin-bottom: var(--e-3);
  }
  .platillos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
  .platillo { min-width: 0; border-bottom: 1px solid var(--borde); padding-bottom: var(--e-2); }
  .platillo__cabeza {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--e-2); flex-wrap: wrap;
  }
  .platillo__nombre {
    font-family: var(--sans); font-weight: 600;
    font-size: var(--t-base); letter-spacing: .04em; text-transform: uppercase;
    min-width: 0;
  }
  .platillo__precio {
    font-family: var(--mono); font-size: var(--t-mini);
    color: var(--sello); white-space: nowrap;
  }
  .platillo__desc { font-size: var(--t-mini); color: var(--tinta-suave); margin: .3rem 0 0; }

  .opciones { list-style: none; margin: .6rem 0 0; padding: 0;
              display: grid; gap: .3rem; }
  .opciones li {
    display: flex; justify-content: space-between; gap: var(--e-2);
    font-size: var(--t-mini); color: var(--tinta-suave);
    border-bottom: 1px dotted var(--borde); padding-bottom: .25rem;
  }
  .opciones .p { font-family: var(--mono); color: var(--sello); white-space: nowrap; }

  /* ── Aviso de dato pendiente: el hueco sellado ───────────────────────── */
  .sellado {
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    padding: var(--e-3);
    background: var(--superficie);
    font-size: var(--t-mini);
    color: var(--tinta-suave);
  }
  .sellado b { color: var(--tinta); }

  /* ── Contacto ────────────────────────────────────────────────────────── */
  .contactos { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
  .contacto { min-width: 0; padding: var(--e-4); border: 1px solid var(--borde);
              border-radius: var(--radio); }
  .contacto h3 { margin-bottom: var(--e-2); }
  .contacto p { color: var(--tinta-suave); font-size: var(--t-mini); }

  /* ── Pie ─────────────────────────────────────────────────────────────── */
  .pie { border-top: 1px solid var(--borde); padding-block: var(--e-6) var(--e-5); }
  .pie__rejilla { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
  .pie p { margin-bottom: 0; }
  .pie a { color: var(--tinta-suave); text-decoration: none;
           display: inline-block; padding-block: .7rem; }
  .pie a:hover { color: var(--tinta); text-decoration: underline; }
  .pie small { color: var(--tinta-suave); font-size: var(--t-micro); font-family: var(--mono); }

  /* ── Cinta de propuesta ──────────────────────────────────────────────── */
  /* La cinta avisa de qué es esto, pero no compite con el héroe: es un
     apunte al margen, no un anuncio. */
  .propuesta {
    background: var(--superficie); color: var(--tinta-suave);
    /* hereda la luz de la página: en una página nocturna no puede quedarse
       un recorte de papel pegado arriba */
    border-bottom: 1px solid var(--borde);
    font-family: var(--mono); font-size: var(--t-micro);
    letter-spacing: .02em; text-align: center;
    padding: .1rem var(--e-2);
    margin: 0;
    line-height: 1.4;
  }
  .propuesta .larga { display: none; }
  .propuesta a { color: var(--sello); display: inline-block; padding: .95rem .4rem; }
}

@layer utilidades {
  .centro { text-align: center; margin-inline: auto; }
  .apagado { color: var(--tinta-suave); }
  .oculto-visual {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ── El corte, en rem y una sola vez ────────────────────────────────────── */
/* 900px = 56.25rem. Un override en px sale del orden de los @media y deja
   que las variantes menores le ganen en todo el sitio. */
@media (min-width: 56.25rem) {
  @layer componentes {
    .franja { padding-inline: var(--e-5); }
    .menu { gap: 0 var(--e-3); }
    .heroe { padding-block: var(--e-5) var(--e-6); }
    .menu a { letter-spacing: .14em; padding-inline: .55rem; margin-inline: -.55rem; }
    .propuesta { letter-spacing: .06em; }
    .propuesta .larga { display: inline; }
    section { padding-block: var(--e-7); }
    .heroe__rejilla { grid-template-columns: 1.05fr .95fr; gap: var(--e-6); }
    .momentos      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sucursales    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platos        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contactos     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pie__rejilla  { grid-template-columns: 1.4fr 1fr 1fr; }
    .platillos     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); }
    body { font-size: var(--t-lead); }
  }
}

/* ── Entradas ligadas al scroll, sin una línea de JavaScript ────────────── */
/* El contenido NUNCA depende de JS para verse: si el navegador no soporta
   animation-timeline, el @supports no se aplica y todo queda visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @layer componentes {
      .entra {
        animation: entra-suave linear both;
        animation-timeline: view();
        /* entry a entry: mezclar entry con cover borra el contenido ya
           rebasado, y en bloques altos reparte el fundido por media pantalla */
        animation-range: entry 5% entry 40%;
      }
      @keyframes entra-suave {
        from { opacity: 0; translate: 0 14px; }
        to   { opacity: 1; translate: 0 0; }
      }
    }
  }
}

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