/* ============================================================================
   SIENTO CIEN ASADOR · Chichimequillas, Querétaro
   ----------------------------------------------------------------------------
   Construido en modo CALCO sobre una referencia de otro mercado. De ella se
   hereda la ARQUITECTURA —orden, pesos, escala corta, aire vertical, cero
   librerías— y nada más. Los colores salen medidos de la papelería del propio
   cliente (ver `identidad.md`).

   La referencia se nombra en el brief del proyecto, no aquí: esta hoja se
   sirve al público y el nombre de un tercero no tiene por qué viajar en ella.

   El dato que gobierna la hoja entera: en su propia pieza gráfica, el acento
   ocupa el 1.9 % de lo que ocupa el fondo. Aquí tampoco ocupa más.
========================================================================== */

/* ── 1 · La voz. Una sola familia, romana e itálica ─────────────────────── */

@font-face {
  font-family: 'Garamond Sitio';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fuentes/ebgaramond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Garamond Sitio';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fuentes/ebgaramond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Garamond Sitio';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fuentes/ebgaramond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Garamond Sitio';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fuentes/ebgaramond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2 · Los tokens. Todos medidos, con su contraste comprobado ─────────── */

:root {
  /* superficie — su lino (matiz 34) subido a L 94. El lino medido intacto,
     #cdc0af, es demasiado oscuro para una página entera: el rojo encima cae a
     3.14:1. Se reserva como campo de bloque. */
  --superficie: #f5f0eb;
  --bloque:     #e9e2d8;
  --lino:       #cdc0af;

  /* tintas — 13.24 y 9.32 contra la superficie */
  --tinta:      #2c261c;
  --tinta-2:    #473e2a;
  --oliva:      #5d533b;   /* medido, intacto. Grafismo y rótulos, no cuerpo */

  /* el acento — medido, intacto. 4.96 AA sobre la superficie */
  --acento:        #ba3b24;
  --acento-fuerte: #a3331f; /* 6.08 — para texto pequeño y para enlaces */

  --borde: rgb(44 38 28 / 0.14);

  /* escala — seis tamaños, de 21 a 12. El titular mayor mide 21 px, como en
     el calco. La jerarquía la carga el aire, no el tamaño. */
  --t-titular: 1.3125rem;  /* 21 */
  --t-entrada: 1.125rem;   /* 18 */
  --t-cuerpo:  1.0625rem;  /* 17 */
  --t-nota:    1rem;       /* 16 */
  --t-rotulo:  0.875rem;   /* 14 */
  --t-meta:    0.75rem;    /* 12 */

  --medida: 46rem;         /* 736 px de columna de lectura */
  --ancho:  50rem;         /* 800 px — el contenedor dominante del calco */

  --paso: 420ms;
  --curva: cubic-bezier(.23, 1, .32, 1);  /* la curva dominante medida */
}

/* ── 3 · Base ───────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;   /* no hay barra fija: sólo aire */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--tinta);
  font-family: 'Garamond Sitio', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-size: var(--t-cuerpo);
  line-height: 1.88;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  /* `clip`, no `hidden`: `hidden` crea un contenedor de scroll y deja las
     animaciones de `view()` congeladas sin dar ningún error. */
  overflow-x: clip;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
p { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

/* `figure` trae `margin: 1em 40px` del navegador. Sin esto, cada foto queda
   80 px más estrecha que el texto que la acompaña y en un teléfono ocupa dos
   tercios del ancho. Se ve en la captura, no en ninguna medición. */
figure { margin: 0; }

/* `height: auto` es obligatorio, no cosmética: los atributos `width`/`height`
   del `<img>` fijan una proporción, y cuando `<picture>` sirve un recorte
   distinto para móvil, esa proporción deforma la imagen. */
img { display: block; max-width: 100%; height: auto; }

a { color: var(--acento-fuerte); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--acento-fuerte);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto-al-contenido {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--superficie);
  padding: .7rem 1.1rem; z-index: 10;
}
.salto-al-contenido:focus { left: 1rem; top: 1rem; }

/* ── 4 · Ritmo ──────────────────────────────────────────────────────────── */

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.columna   { max-width: var(--medida); }

section { padding-block: clamp(3rem, 6vw, 4.75rem); }

.rotulo {
  font-size: var(--t-rotulo);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--oliva);
  line-height: 2.3;
  margin: 0 0 1.6rem;
}

.titular { font-size: var(--t-titular); line-height: 1.25; letter-spacing: .005em; }
.entrada { font-size: var(--t-entrada); line-height: 1.72; }
.nota    { font-size: var(--t-nota); line-height: 2; color: var(--tinta-2); }
.meta    { font-size: var(--t-meta); line-height: 1.7; letter-spacing: .04em; color: var(--tinta-2); }

/* la itálica es de cuentagotas: el nombre del lugar, los nombres de los
   platos y el aviso de servicio. En ningún cuarto sitio. */
.cursiva { font-style: italic; }

/* ── 5 · El gesto propio: la cenefa de tres puntas ──────────────────────────
   No es un adorno del estudio. Está en su papelería: una hoja de tres puntas
   de trazo monolineal alternada con un punto, corriendo de borde a borde.
   Arriba en oliva, abajo en rojo — igual que en su propio cierre de marca.
   Es la ÚNICA línea horizontal del sitio: no hay `hr`, no hay bordes de
   sección. 380 bytes y no depende de JavaScript. */

/* La forma se redibujó MIRANDO la suya a 4×: son tres hojas cerradas —dos
   arcos cada una— que nacen del mismo vértice inferior y se abren en abanico;
   la central va vertical y termina en punta. La primera versión eran tres
   arcos sueltos que no convergían, y en pantalla se leían como un garabato.
   Se ve en la captura, no en ninguna medición. */

.cenefa {
  height: 26px;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 76px 26px;
}
.cenefa--oliva {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='26' viewBox='0 0 76 26'%3E%3Cg fill='none' stroke='%235d533b' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M19 21c-3.6-4.2-3.6-10.4 0-14.6 3.6 4.2 3.6 10.4 0 14.6Z'/%3E%3Cpath d='M19 21c-4.6-1-8.4-4-10.2-8.2 4.6.4 8.7 3.4 10.2 8.2Z'/%3E%3Cpath d='M19 21c4.6-1 8.4-4 10.2-8.2-4.6.4-8.7 3.4-10.2 8.2Z'/%3E%3C/g%3E%3Ccircle cx='57' cy='16.5' r='1.7' fill='%235d533b'/%3E%3C/svg%3E");
}
.cenefa--acento {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='26' viewBox='0 0 76 26'%3E%3Cg fill='none' stroke='%23ba3b24' stroke-width='1.15' stroke-linejoin='round'%3E%3Cpath d='M19 21c-3.6-4.2-3.6-10.4 0-14.6 3.6 4.2 3.6 10.4 0 14.6Z'/%3E%3Cpath d='M19 21c-4.6-1-8.4-4-10.2-8.2 4.6.4 8.7 3.4 10.2 8.2Z'/%3E%3Cpath d='M19 21c4.6-1 8.4-4 10.2-8.2-4.6.4-8.7 3.4-10.2 8.2Z'/%3E%3C/g%3E%3Ccircle cx='57' cy='16.5' r='1.7' fill='%23ba3b24'/%3E%3C/svg%3E");
}

/* ── 6 · La cabecera. No fija, a propósito ─────────────────────────────────
   El calco la mide en 192 px de alto y NO fija. Una barra fija en un sitio de
   tres pantallas se come el 12 % de un teléfono y acaba tapando el botón del
   héroe — que es el fallo que ninguna medición canta. */

.cabecera { padding-block: clamp(2rem, 5vw, 3.4rem) 0; }
.cabecera__fila {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
}
.marca { display: block; text-decoration: none; color: inherit; }
.marca__nombre {
  font-size: var(--t-titular); font-style: italic; line-height: 1.2;
  color: var(--acento-fuerte);
}
.marca__giro {
  display: block; font-size: var(--t-meta);
  letter-spacing: .3em; text-transform: uppercase; color: var(--oliva);
  line-height: 1.6; margin-top: .15rem;
}
.menu { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; font-size: var(--t-rotulo); }
/* La zona táctil se agranda con `padding-block`, NUNCA con `inline-flex`:
   un contenedor flex convierte cada palabra en un ítem y se come el espacio
   entre ellas — «Lamesaabierta». Ya pasó en otro sitio del estudio. */
.menu a {
  display: inline-block;
  color: var(--tinta-2); text-decoration: none; letter-spacing: .07em;
  padding-block: .58rem;        /* 26 + 9 + 9 = 44 px de alto tocable */
}
.menu a:hover, .menu a:focus-visible { color: var(--acento-fuerte); text-decoration: underline; }

/* ── 7 · Botones. Un solo llamado, repetido tres veces ──────────────────── */

.boton {
  display: inline-block;
  font-size: var(--t-rotulo);
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1;
  padding: 1.15rem 1.9rem;       /* ≥ 44 px de alto tocable */
  min-height: 44px;
  background: var(--acento);
  color: var(--superficie);      /* 5.17 sobre el acento */
  text-decoration: none;
  border: 1px solid var(--acento);
  border-radius: 2px;
  transition: background var(--paso) var(--curva), color var(--paso) var(--curva);
}
.boton:hover, .boton:focus-visible {
  background: var(--tinta); border-color: var(--tinta); color: var(--superficie);
}
.boton--linea {
  background: transparent; color: var(--tinta);
  border-color: var(--borde);
}
.boton--linea:hover, .boton--linea:focus-visible {
  background: var(--tinta); border-color: var(--tinta); color: var(--superficie);
}

/* ── 8 · Héroe. Texto antes que foto, a propósito ──────────────────────────
   Los seis sitios del sector abren con foto de platillo. Aquí lo primero que
   se lee responde la pregunta que nadie contesta. */

.heroe { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.heroe__frase {
  font-size: var(--t-titular); line-height: 1.55;
  max-width: 34rem; margin: 0 0 2.2rem;
}
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; }

.heroe__foto { margin-top: clamp(2.5rem, 6vw, 4rem); }
.heroe__foto img { width: 100%; }
.pie-foto { margin-top: .8rem; }

/* ── 9 · Los dos servicios ──────────────────────────────────────────────── */

.servicios {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  margin: 2.4rem 0 0;
  padding: 0; list-style: none;
}
.servicio {
  background: var(--bloque);
  padding: 1.7rem 1.8rem;
  border-radius: 2px;
}
.servicio__nombre {
  font-size: var(--t-entrada); font-style: italic;
  margin: 0 0 .3rem; line-height: 1.4;
}
.servicio__cuando { font-size: var(--t-cuerpo); margin: 0 0 .5rem; }
.servicio__hora {
  font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--oliva); margin: 0 0 .9rem; line-height: 1.9;
}
.servicio__que { font-size: var(--t-nota); line-height: 1.85; color: var(--tinta-2); margin: 0; }

/* ── 10 · La mesa de este fin de semana ────────────────────────────────────
   La pieza editable. Su proporción y su aire vienen de la tarjeta impresa que
   ellos mismos ponen sobre el plato de cada comensal.

   Todo su contenido vive en el bloque `[data-editable]` del HTML: se cambia
   sin tocar una línea de diseño. */

.mesa {
  background: var(--bloque);
  border-radius: 2px;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.4rem, 4vw, 2.6rem);
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
.mesa .cenefa { margin-bottom: 1.6rem; }
.mesa__fecha {
  font-size: var(--t-rotulo); letter-spacing: .18em; text-transform: uppercase;
  color: var(--oliva); margin: 0 0 1.4rem; line-height: 2.1;
}
.mesa__lista { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.mesa__lista li {
  font-size: var(--t-cuerpo); font-style: italic;
  line-height: 1.6; padding: .55rem 0;
}
.mesa__lista li + li { border-top: 1px solid var(--borde); }
.mesa__nota { font-size: var(--t-nota); color: var(--tinta-2); margin: 0; }

/* el aviso de servicio: el bloque que existe porque cancelaron un brunch con
   un día de margen dentro del pie de un video. Sale del flujo si está vacío. */
.aviso {
  margin: 1.6rem auto 0;
  max-width: 34rem;
  border-left: 2px solid var(--acento);
  padding: .1rem 0 .1rem 1.1rem;
  font-size: var(--t-nota); font-style: italic;
  color: var(--tinta-2); text-align: left;
}
.aviso:empty { display: none; }

/* ── 11 · Apartar ───────────────────────────────────────────────────────── */

.apartar__forma {
  display: grid; gap: 1.1rem;
  max-width: 30rem; margin-top: 2rem;
}
.campo { display: grid; gap: .35rem; }
.campo > span {
  font-size: var(--t-rotulo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--oliva); line-height: 1.8;
}
.campo input, .campo select {
  font: inherit; font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 2px;
  padding: .8rem .9rem;
  min-height: 44px;
  width: 100%;
}
.campo input:focus, .campo select:focus { border-color: var(--oliva); }
.apartar__forma .boton { justify-self: start; border: none; cursor: pointer; font-family: inherit; }

.apartar__directo {
  display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: .7rem;
}
.apartar__directo .boton { font-size: var(--t-meta); letter-spacing: .12em; padding-inline: 1.4rem; }

.apartar__promesa {
  margin-top: 1.6rem;
  font-size: var(--t-nota); color: var(--tinta-2);
  max-width: 30rem;
}

/* ── 12 · El lugar ──────────────────────────────────────────────────────── */

.galeria { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2.4rem; }

/* En móvil las fotos de apoyo van de dos en dos, con la primera a lo ancho.
   Apiladas a columna única sumaban 1.400 px por bloque —una pantalla y media
   de fotos secundarias— en un sitio cuyo argumento es lo poco que hace. La
   primera manda el mensaje; las otras dos lo confirman de reojo. */
@media (max-width: 56.2375rem) {
  .galeria--tres, .galeria { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .galeria > figure:first-child, .galeria .ancha { grid-column: 1 / -1; }
  .galeria figure { min-width: 0; }
}
.galeria figure { margin: 0; }
.galeria img { width: 100%; border-radius: 2px; }
.galeria figcaption { margin-top: .7rem; }

/* ── 13 · Pie ───────────────────────────────────────────────────────────── */

.pie { padding-block: clamp(3rem, 7vw, 5rem); }
.pie__rejilla { display: grid; gap: 2.4rem; grid-template-columns: 1fr; margin-top: 2.2rem; }
.pie__bloque h3 {
  font-size: var(--t-rotulo); letter-spacing: .18em; text-transform: uppercase;
  color: var(--oliva); margin: 0 0 .8rem; line-height: 2.1;
}
.pie__bloque p, .pie__bloque address { font-style: normal; margin: 0 0 .3rem; font-size: var(--t-nota); }

/* Los enlaces del pie son navegación, no prosa: se les da los 44 px. El único
   enlace del sitio que se queda por debajo es el de la firma del estudio, que
   vive DENTRO de un párrafo de texto corrido — ahí la propia WCAG 2.5.8 exime
   a los enlaces en línea, y un `inline-block` con relleno vertical partiría
   las líneas del párrafo. Es un falso positivo del detector, no una deuda. */
.pie__bloque p > a:only-child {
  display: inline-block;
  padding-block: .72rem;        /* 21 + 11.5 + 11.5 ≈ 44 px */
}
.pie__legal { margin-top: 3rem; }

/* la firma del estudio: sobria, y no compite con la marca del cliente */
.firma { margin-top: .6rem; }
.firma a { color: var(--tinta-2); }

/* ── 14 · Movimiento ───────────────────────────────────────────────────────
   Cero librerías, como la referencia. Todo con `animation-timeline: view()`.

   Rango `entry 8% entry 62%`: de entrada a entrada. Mezclar `entry` con
   `cover` borra el contenido que ya rebasó la ventana en un bloque alto.

   El contenido NUNCA depende de JavaScript: si el navegador no soporta
   `animation-timeline`, la regla entera se ignora y todo queda visible y
   opaco, que es el estado por defecto del HTML. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .aparece {
      animation: sc-aparece linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 62%;
    }
    @keyframes sc-aparece {
      from { opacity: 0; translate: 0 10px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* ── 15 · El corte. UNO solo, en rem ───────────────────────────────────────
   56.25rem = 900 px. En `rem` y no en px a propósito: Tailwind ordena los
   bloques `@media` por valor numérico y los suyos vienen en rem; uno en px
   sale de la familia y las variantes pequeñas le ganan en todo el sitio.
   Aquí no hay Tailwind, pero la regla del estudio es una sola y se respeta:
   un corte, en rem, para maquetación y para rendimiento. */

@media (min-width: 56.25rem) {
  :root {
    --t-titular: 1.3125rem;   /* 21 px se mantiene: el calco no crece */
  }
  .servicios      { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .galeria        { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .galeria .ancha { grid-column: 1 / -1; }
  .galeria--tres  { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  /* `1fr` es `minmax(auto, 1fr)`: una celda con contenido ancho ensancha su
     carril y descuadra la rejilla en silencio. `min-width: 0` en los dos. */
  .galeria figure { min-width: 0; }
  .pie__rejilla   { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
}

/* Bajo el corte, el titular cae al 90 % — es el factor medido en el plano y
   es lo que evita que una escala tan corta se rompa en teléfono. */
@media (max-width: 56.2375rem) {
  :root { --t-titular: 1.1875rem; }  /* 19 px */
}

/* ── 16 · Presupuesto de GPU en móvil ──────────────────────────────────────
   Heredado de la pieza `capa-movil` del registro: 0 `backdrop-filter`, nada
   de `filter` animado, y sólo `transform`/`opacity`. Este sitio no usa
   ninguno de los efectos caros — la regla queda como guarda, no como parche. */

@media (max-width: 56.2375rem), (hover: none) and (pointer: coarse) {
  * { backdrop-filter: none !important; }
}

@media print {
  .menu, .heroe__acciones, .apartar__forma { display: none; }
  body { background: #fff; color: #000; }
}