/* ==========================================================================
   Tortillicas de la Ama — sistema visual (v2)
   Tokens en :root para que colores/tipos se puedan ajustar desde un solo
   sitio (y, en WordPress, desde theme.json / Customizer más adelante).
   ========================================================================== */

/* Tipografías auto-alojadas (19-sep-2026) — antes se cargaban desde Google
   Fonts (`<link>` a fonts.googleapis.com/fonts.gstatic.com en el `<head>` de
   cada página); ahora se sirven desde este mismo dominio
   (`assets/fonts/`) para que el navegador no haga ninguna petición a
   servidores de Google (ver `cookies.html`). Mismas familias/pesos/estilo
   de siempre, mismo aspecto visual — cada peso pedido (Bitter 500/600/700/
   800, Inter 400/500/600/700) usaba en Google Fonts el mismo archivo
   variable subyacente por familia+estilo (Bitter normal, Bitter italic,
   Inter normal — 3 archivos en total, comprobado byte a byte al
   descargarlos: las 4 URLs de pesos de "Bitter normal" en la hoja de Google
   apuntaban al mismo .woff2, y las 4 de "Inter" también), así que aquí se
   reutilizan esos mismos 3 archivos auto-alojados con una declaración
   `@font-face` por peso exacto — igual que hacía la hoja de Google, solo
   que el archivo ya no viene de un servidor de terceros. Un único subset
   "latin" (cubre todo lo que este sitio necesita: vocales acentuadas, ñ,
   ¿¡, el símbolo €, comillas y guiones tipográficos) — se ha descartado a
   propósito el resto de subsets (cyrillic, greek, vietnamese...) que Google
   Fonts también servía y esta web nunca ha necesitado, para no pedir más
   peso del imprescindible. */
@font-face{
  font-family: 'Bitter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/bitter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Bitter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/bitter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Bitter'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/bitter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Bitter'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('../fonts/bitter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Bitter'; font-style: italic; font-weight: 500;
  font-display: swap; src: url('../fonts/bitter-italic-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Bitter'; font-style: italic; font-weight: 600;
  font-display: swap; src: url('../fonts/bitter-italic-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/inter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/inter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/inter-normal-var.woff2') format('woff2');
}
@font-face{
  font-family: 'Inter'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/inter-normal-var.woff2') format('woff2');
}

:root{
  /* Siempre claro: sin esto, los modos oscuros automáticos del navegador/móvil
     invierten fondos y logo. La web solo tiene su estética crema/beige. */
  color-scheme: light;

  /* Paleta de marca (del logo real) */
  --cream:        #FBF8F3;
  --cream-deep:   #F5EFE5;
  --paper:        #FFFDF9;
  --maroon:       #55151A;
  --maroon-deep:  #3A0D10;
  --red-mantel:   #B32B26;
  --red-mantel-deep:#8C1F1C;
  --gold:         #E08A1E;
  --gold-deep:    #B96B12;
  --ink:          #2C1B14;
  --ink-soft:     #6E5B4F;
  --line:         rgba(58, 13, 16, 0.14);

  /* Tipografía: slab con carácter (rótulo de mercado/obrador) + sans de trabajo */
  --font-display: 'Bitter', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-s: 8px;
  --radius-m: 14px;

  --shadow-card: 0 1px 2px rgba(58,13,16,.06), 0 18px 40px -22px rgba(58,13,16,.4);
  --shadow-photo: 0 30px 60px -26px rgba(30,8,9,.5);

  --ease: cubic-bezier(.22,.68,.14,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

/* ---------- Reset base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--cream); color-scheme: light; }
/* Offset de anclas: cualquier salto a una de estas secciones implica
   recorrer más de 24px de scroll, así que .site-header YA está en su
   estado .is-scrolled (más bajo) en el momento exacto en que se completa
   el salto — tanto si el salto es una animación en la misma página como si
   es el posicionamiento inicial del navegador al cargar otra página con
   #hash (el evento scroll se dispara igual). Por eso el offset se ajusta a
   la altura CORTA real del header (mobile: 10px*2 + logo 56px = 76px) más
   un margen de aire moderado, no a la alta — así el título aterriza
   inmediatamente debajo del header, sin hueco de sobra. */
#inicio, #tortillas, #como-pedir, #contacto{ scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg{ display: block; }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--maroon); color: var(--cream); padding: 12px 18px;
  border-radius: var(--radius-s); transition: top .25s var(--ease);
}
.skip-link:focus{ top: 12px; }
:focus-visible{ outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ---------- Layout helpers ---------- */
.container{ max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
section{ position: relative; }

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red-mantel-deep);
}
.eyebrow::before{ content: ''; width: 22px; height: 2px; background: currentColor; opacity: .7; }

.section-head h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--maroon-deep); margin-top: 12px; text-wrap: balance;
}
.section-head p{ margin-top: 16px; color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.btn svg{ width: 18px; height: 18px; flex: none; }
.btn-primary{
  background: var(--gold); color: var(--maroon-deep);
  box-shadow: 0 14px 30px -12px rgba(224,138,30,.65);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(224,138,30,.8); background: var(--gold-deep); }
.btn-outline{ border: 1.5px solid var(--maroon-deep); color: var(--maroon-deep); background: transparent; }
.btn-outline:hover{ background: var(--maroon-deep); color: var(--cream); transform: translateY(-2px); }
.btn-outline.on-dark{ border-color: rgba(251,243,230,.5); color: var(--cream); }
.btn-outline.on-dark:hover{ background: var(--cream); color: var(--maroon-deep); }
.btn-light{ background: var(--paper); color: var(--maroon-deep); box-shadow: var(--shadow-card); }
.btn-light:hover{ transform: translateY(-2px); }

/* ==========================================================================
   HEADER — logo grande, sin caja, sin wordmark
   ========================================================================== */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 18px 0;
  transition: padding .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
  color: var(--maroon-deep);
  background: rgba(251, 248, 243, .96);
  backdrop-filter: blur(10px) saturate(1.2);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-scrolled{
  padding: 10px 0;
  box-shadow: 0 8px 30px -18px rgba(58,13,16,.2);
}

.brand{ display: block; flex: none; line-height: 0; }
.brand img{
  height: 76px; width: auto; object-fit: contain;
  transition: height .4s var(--ease);
}
.site-header.is-scrolled .brand img{ height: 56px; }

.main-nav{ display: none; }
.main-nav ul{ display: flex; align-items: center; gap: 36px; }
.main-nav a{
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  position: relative; padding-bottom: 4px;
  opacity: .68; transition: opacity .3s var(--ease-soft);
}
.main-nav a.is-active{ opacity: 1; }
.main-nav a::after{
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gold-deep); transition: right .35s var(--ease-soft);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ right: 0; }

.header-actions{ display: flex; align-items: center; gap: 10px; }
.header-actions .btn{ display: none; padding: 12px 22px; font-size: .9rem; }

.cart-btn{
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent;
}
.cart-btn svg{ width: 20px; height: 20px; color: var(--maroon-deep); }
.cart-badge{
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--gold); color: var(--maroon-deep); font-size: .68rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--cream);
}
.cart-badge[hidden]{ display: none; }

.nav-toggle{
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent; flex: none;
}
.nav-toggle span{ width: 18px; height: 2px; background: var(--maroon-deep); border-radius: 2px; transition: transform .35s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* El header (z-index 100) sigue pintado ENCIMA de este overlay (z-index 99)
   cuando el menú está abierto — el padding-top tiene que despejar su altura
   real (mobile sin scroll: 18px*2 + logo 76px = 112px) más el safe-area del
   notch/isla, si no el primer enlace queda pegado justo bajo el header en
   vez de tener aire de verdad. padding-bottom hace lo mismo con la home
   indicator de iOS. overflow-y:auto es red de seguridad en pantallas muy
   bajas (nunca debería recortar contenido). */
.mobile-menu{
  position: fixed; inset: 0; z-index: 99;
  background: var(--maroon-deep); color: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(112px + env(safe-area-inset-top, 0px) + 24px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  clip-path: circle(2% at calc(100% - 42px) 42px);
  transition: clip-path .6s var(--ease);
  pointer-events: none;
}
.mobile-menu.is-open{ clip-path: circle(150% at calc(100% - 42px) 42px); pointer-events: auto; }
.mobile-menu ul{ display: flex; flex-direction: column; gap: 6px; }
.mobile-menu ul a{
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 700;
  padding: 10px 0; display: inline-block; opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.mobile-menu.is-open ul a{ opacity: 1; transform: translateY(0); }
.mobile-menu.is-open li:nth-child(1) a{ transition-delay: .12s; }
.mobile-menu.is-open li:nth-child(2) a{ transition-delay: .18s; }
.mobile-menu.is-open li:nth-child(3) a{ transition-delay: .24s; }
.mobile-menu.is-open li:nth-child(4) a{ transition-delay: .3s; }
.mobile-menu-foot{ margin-top: 40px; opacity: 0; transition: opacity .5s .4s var(--ease-soft); }
.mobile-menu.is-open .mobile-menu-foot{ opacity: 1; }
.mobile-menu-foot .btn-primary{ padding: 14px 24px; }

/* ==========================================================================
   HERO — mesa real, luminosa, como en el boceto original
   ========================================================================== */
.hero{ padding: 116px 0 0; overflow: hidden; position: relative; }
/* Velo cálido muy sutil detrás de todo el hero — ayuda a que texto y foto se
   perciban como un mismo lienzo en vez de dos bloques con fondos distintos
   (solo mobile; en desktop la composición aprobada no se toca, ver 880px). */
.hero::before{
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  inset: -6% -30% auto -30%; height: 62%;
  background: radial-gradient(ellipse at 50% 25%, rgba(224,138,30,.09), transparent 72%);
}
/* padding-bottom (mobile solamente, reseteado a 880px): reserva de espacio
   en el flujo normal para que `.hero-grid` sea lo bastante alto como para
   contener a `.hero-photo` (position:absolute) sin que `.hero{overflow:
   hidden}` la recorte por abajo — ver `.hero-photo` para el porqué de la
   superposición. */
.hero-grid{ position: relative; z-index: 1; padding-bottom: 190px; }
.hero-copy{ position: relative; z-index: 3; max-width: 84%; }

/* Dos líneas claras (envío vs. recogida) en vez de un único renglón
   ambiguo — mismo componente/badge, radio menos extremo que el pill de
   999px para que una cápsula de 2 líneas no se lea rara, resto del
   tratamiento (fondo, sombra, color) intacto. */
.hero-badge{
  display: inline-flex; align-items: flex-start; gap: 9px;
  padding: 10px 16px; border-radius: var(--radius-m); background: var(--paper); box-shadow: var(--shadow-card);
  font-size: .82rem; letter-spacing: .01em; color: var(--red-mantel-deep);
  opacity: 0; animation: fade-up .8s var(--ease-soft) forwards; animation-delay: .3s;
}
.hero-badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); flex: none; margin-top: 6px; }
.hero-badge-lines{ display: flex; flex-direction: column; gap: 2px; }
.hero-badge-lines strong{ font-weight: 700; }
.hero-badge-lines span{ font-weight: 600; opacity: .8; }

.hero-copy h1{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.3rem, 5.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em;
  color: var(--maroon-deep); margin-top: 18px; text-wrap: balance;
}
.hero-copy h1 em{ font-style: italic; font-weight: 600; color: var(--red-mantel-deep); display: block; }
.reveal-line{ overflow: hidden; display: block; }
.reveal-line span{ display: block; transform: translateY(112%); animation: line-up .9s var(--ease-soft) forwards; animation-delay: var(--d, 0s); }
@keyframes line-up{ to{ transform: translateY(0); } }

.hero-lede{
  margin-top: 20px; font-size: 1.1rem; color: var(--ink-soft); max-width: 42ch;
  opacity: 0; animation: fade-up .8s var(--ease-soft) forwards; animation-delay: .45s;
}
.hero-ctas{
  margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  opacity: 0; animation: fade-up .8s var(--ease-soft) forwards; animation-delay: .6s;
}
/* La foto queda detrás de las CTAs (ver .hero-photo) — "Ver la carta" ya es
   opaco (relleno sólido) y no necesita nada, pero "Cómo pedir" es un botón
   outline con el centro transparente: sin un fondo propio, el texto podría
   perder contraste según qué parte de la foto quede justo detrás. Un fondo
   crema casi opaco garantiza legibilidad perfecta sin más (reseteado a
   transparente en escritorio, donde este botón nunca queda sobre la foto). */
.hero-ctas .btn-outline{ background: rgba(251,248,243,.92); }
@keyframes fade-up{ from{ opacity: 0; transform: translateY(16px); } to{ opacity: 1; transform: translateY(0); } }

/* 20-sep-2026 — hero mobile, tercera vuelta, siguiendo el boceto del
   cliente: la vuelta anterior tapaba casi toda la foto con un degradado
   crema demasiado largo (82% de la caja) y usaba la foto panorámica del
   hero (2043×770) forzada a 4/3, lo que ya recortaba la mitad del encuadre
   por los lados. Ahora, SOLO en mobile (ver `<source media>` en el html),
   se reutiliza `tortilla-boletus-jamon.webp` — la misma foto de producto de
   la Carta, ya en proporción 4/3 real — así la caja `aspect-ratio:4/3` de
   abajo NO recorta nada: se ve el archivo completo, plato entero incluido.
   El degradado se reduce a un roce muy corto (30% de la caja, opacidad
   máxima .55) solo para que el final del texto no choque en seco contra la
   foto — el resto (70% de la caja, todo el plato) queda sin ningún velo,
   nítido y a color real. */
.hero-photo{
  position: absolute; z-index: 1; overflow: hidden;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  top: 405px; aspect-ratio: 4/3;
}
/* 18-sep-2026 (cuarta vuelta) — la línea horizontal evidente entre el crema
   de fondo y la foto no era la posición/tamaño (eso ya estaba aprobado y no
   se toca aquí): era que el degradado arrancaba en rgba(...,.55), no en
   opacidad 1. Un salto de "100% crema de fondo" a "55% crema / 45% foto" en
   el mismo píxel de borde ES la línea. Ahora arranca en opacidad 1 (idéntico
   al fondo, cero salto perceptible) y se desvanece a transparente en un
   tramo MUY corto (12% de la caja) — antes llegaba hasta el 30%, tapando
   casi un tercio del plato con un velo; ahora el resto (88%) queda con la
   comida sin ningún velo. */
.hero-photo::before{
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  inset: 0; height: auto;
  background: linear-gradient(180deg, rgba(251,248,243,1) 0%, rgba(251,248,243,0) 12%);
}
.hero-photo img{
  width: 100%; height: 100%; display: block; border-radius: 0;
  object-fit: cover; object-position: 50% 50%;
}
/* 18-sep-2026 (octava vuelta) — vueltas anteriores le habían dado a este CTA
   primero un naranja propio y luego el mismo `--gold` pero con texto blanco;
   ambas veces quedaba distinto al resto de CTA principales "Ver la carta"
   del sitio, y el texto blanco sobre `--gold` no cumple contraste accesible.
   Se prioriza accesibilidad + coherencia sobre la web: este botón ya NO
   tiene ninguna regla propia de color/sombra, así que hereda sin más el
   `.btn-primary` de siempre (fondo `--gold`, texto `--maroon-deep` — el
   mismo par que ya cumple contraste en todos los demás CTA principales del
   sitio, sombra cálida y hover/focus incluidos). Ningún tono nuevo. */
/* El H1 envuelve en menos líneas a partir de ~400-420px de ancho (más sitio
   por línea con el mismo tamaño de letra), así que el bloque de texto
   termina bastante más arriba — con los valores de arriba (pensados para el
   H1 de 4 líneas de 375-390px) quedaba un hueco vacío grande entre la foto
   y "La Ama". Este breakpoint intermedio ajusta `top`/`padding-bottom` al
   H1 más corto (probado en 430px) sin tocar nada por encima de 880px. */
@media (min-width: 400px) and (max-width: 879px){
  .hero-grid{ padding-bottom: 250px; }
  .hero-photo{ top: 320px; }
}

/* ==========================================================================
   Reveal on scroll (JS añade .is-visible)
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-stagger > *{ opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-soft), transform .7s var(--ease-soft); }
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .15s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .25s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .35s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .45s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .55s; }

/* ==========================================================================
   LA AMA — editorial foto + texto (sustituye al bloque "intro" de iconos)
   ========================================================================== */
.ama{ padding: 36px 0 36px; overflow: hidden; }
.ama .container{ display: grid; gap: 26px; }
.ama-text{ order: 0; }
.ama-photo{ position: relative; order: 1; margin-inline: calc(-1 * var(--gutter)); }
/* Mobile: recorte 4/3 (antes 4/5, más vertical) — menos scroll antes de
   "Mis tortillas" sin perder la foto ni su encuadre (object-position se
   encarga de mantener las manos centradas). Desktop recupera 4/5 (880px). */
.ama-photo .frame{
  position: relative; overflow: hidden; aspect-ratio: 4/3;
}
.ama-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.ama-text .lede{
  margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--maroon-deep); line-height: 1.4; text-wrap: balance;
}
.ama-text p{ margin-top: 14px; font-size: .98rem; color: var(--ink-soft); max-width: 52ch; }
.ama-text p strong{ color: var(--maroon-deep); font-weight: 600; }
.ama-tags{
  margin-top: 18px; font-size: .84rem; letter-spacing: .01em; color: var(--ink-soft);
}

/* ==========================================================================
   TORTILLAS DESTACADAS — lista editorial tipo carta, no e-commerce
   ========================================================================== */
.dishes{ padding: 56px 0 64px; }
.dishes-head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

.dishes-grid{
  margin-top: 44px; display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.dish{
  display: flex; align-items: center; gap: 22px;
  padding-block: 26px; border-bottom: 1px solid var(--line);
}
.dish .frame{
  display: block; flex: none; width: 104px; aspect-ratio: 1/1;
  border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card);
}
.dish .frame img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-soft);
}
.dish:hover .frame img{ transform: scale(1.06); }
.dish-body{ flex: 1 1 auto; min-width: 0; }
.dish-caption{
  margin-top: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.dish-caption h3{ font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--maroon-deep); }
.dish-caption .amount{ font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--red-mantel-deep); white-space: nowrap; }
.dish-desc{ margin-top: 4px; color: var(--ink-soft); font-size: .94rem; }
.dish-order{
  margin-top: 8px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 700; color: var(--maroon-deep);
}
.dish-order svg{ width: 13px; height: 13px; transition: transform .3s var(--ease); }
.dish:hover .dish-order svg{ transform: translateX(3px); }

.dishes-foot{ margin-top: 40px; display: flex; justify-content: center; }
.dishes-foot .btn{ padding: 17px 36px; font-size: 1.02rem; }

/* ==========================================================================
   MÁS QUE UNA TORTILLA — foto + texto real en HTML (legible, responsive,
   accesible, indexable). Mobile: foto primero (presencia), texto debajo,
   apilados de verdad (nunca la composición de escritorio reducida). Desktop:
   texto a la izquierda, foto a la derecha — ver media query 880px.
   ========================================================================== */
/* Mobile: sin padding-top — la foto (primer hijo, a sangre) arranca justo
   en el borde de la sección, así no queda una franja del fondo cream-deep
   visible por encima suyo antes de que empiece la imagen (se veía como un
   borde/marco pegado a la foto). El aire para el texto lo da el gap de
   .mesa-layout de siempre. Desktop no tenía este problema (foto no a
   sangre) y mantiene su padding simétrico en el media query de 880px. */
.mesa{ padding: 0 0 40px; background: var(--cream-deep); }
.mesa-layout{ display: flex; flex-direction: column; gap: 24px; }
.mesa-photo{ order: 1; margin-inline: calc(-1 * var(--gutter)); }
.mesa-photo img{
  width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover;
}
.mesa-copy{ order: 2; }
.mesa-copy h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.16; letter-spacing: -.01em;
  color: var(--maroon-deep); margin-top: 10px; text-wrap: balance;
}
.mesa-copy p{ margin-top: 14px; color: var(--ink-soft); font-size: 1rem; max-width: 54ch; }

/* ==========================================================================
   CÓMO PEDIR — flujo conectado (no infografía de tarjetas)
   ========================================================================== */
.steps{ padding: 36px 0 36px; }
/* Mobile: 2 columnas desde el principio (antes 1 sola columna, con 4 pasos
   apilados era mucho scroll sin aportar nada) y numerales más pequeños —
   compacta la sección sin apretarla (ver 620px para más aire, 880px para
   4 columnas). */
.steps-flow{
  margin-top: 26px; display: grid; gap: 22px 20px; grid-template-columns: repeat(2, 1fr);
}
.step-num{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; line-height: 1; color: var(--gold-deep);
}
.step h3{ margin-top: 10px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--maroon-deep); }
.step p{ margin-top: 4px; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; max-width: 46ch; }

.steps-info{
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
}
.info-grid{ display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.info-box{
  padding: 18px 20px; border-radius: var(--radius-m); background: var(--paper);
  box-shadow: var(--shadow-card);
}
.info-label{
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-mantel-deep);
}
.info-label svg{ width: 15px; height: 15px; flex: none; }
.info-main{ margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--maroon-deep); }
.info-price{ display: inline-block; margin-top: 6px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }

.steps-note{
  margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; color: var(--ink-soft);
}
.steps-note-hours{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--red-mantel-deep);
}
.steps-note-hours svg{ width: 15px; height: 15px; flex: none; }
.steps-note-lead{
  margin-top: 6px; font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; color: var(--maroon-deep); line-height: 1.35;
}
/* Chip discreto (19-sep-2026): la regla de antelación es la más importante
   de las tres líneas de esta nota, así que lleva un poco más de peso visual
   que un texto suelto — pero sigue siendo una sola línea con los mismos
   colores de marca, no un banner ni un rediseño de la sección. */
.steps-note-badge{
  display: inline-block; margin-top: 8px; padding: 6px 14px;
  border-radius: 999px; background: var(--cream-deep);
  border: 1px solid var(--line);
}
.steps-note-alt{ font-size: .92rem; line-height: 1.5; }
.steps-note-alt a{ font-weight: 700; color: var(--maroon-deep); text-decoration: underline; text-underline-offset: 2px; }
.steps-note-monday{ color: var(--red-mantel-deep); }

/* ==========================================================================
   ASÍ LLEGA A TU MESA — foto real del packaging + texto, sin card ni marco:
   la propia caja (estampado de cuadros + logo) ya aporta identidad, así que
   la sección no necesita decoración añadida encima.
   ========================================================================== */
.delivery{ padding: 56px 0 60px; }
.delivery-grid{ display: flex; flex-direction: column; gap: 28px; }
/* Mobile: texto primero, foto después — el usuario entiende qué va a ver
   antes de encontrarse la fotografía (orden invertido respecto al DOM, que
   se queda igual; desktop ignora esto y sigue el orden natural del grid,
   ver 880px). */
.delivery-photo{ order: 2; }
.delivery-copy{ order: 1; }
.delivery-photo img{ width: 100%; height: auto; display: block; border-radius: 12px; }
.delivery-copy{ max-width: 560px; }
.delivery-copy h2{
  font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; margin-top: 14px; text-wrap: balance;
}
.delivery-copy p{ margin-top: 16px; color: var(--ink-soft); font-size: 1.06rem; max-width: 46ch; }

/* ==========================================================================
   CTA FINAL — el único momento oscuro, justo antes del footer
   ========================================================================== */
.cta-final{ position: relative; overflow: hidden; padding: 72px 0; text-align: center; background: var(--maroon-deep); }
.cta-final .container{ position: relative; z-index: 2; max-width: 560px; margin-inline: auto; }
.cta-final .eyebrow{ color: var(--gold); }
.cta-final .eyebrow::before{ background: var(--gold); }
.cta-final h2{
  font-family: var(--font-display); font-weight: 800; color: var(--paper);
  font-size: clamp(1.9rem, 3.2vw, 2.4rem); line-height: 1.12; margin-top: 14px; text-wrap: balance;
}
.cta-final p{ margin-top: 16px; font-size: 1.05rem; color: rgba(251,243,230,.82); }
.cta-final .hero-ctas{ animation: none; opacity: 1; margin-top: 30px; flex-direction: column; align-items: center; justify-content: center; }
/* 18-sep-2026 (quinta vuelta) — "WhatsApp para hoy o dudas" heredaba sin
   querer el relleno crema casi opaco de `.hero-ctas .btn-outline` (pensado
   para el botón "Cómo pedir" sobre la foto del hero mobile, no para este
   botón sobre fondo granate) por reutilizar la misma clase `.hero-ctas`.
   Mismo botón, mismas dimensiones/radio/área clicable/icono/texto/enlace:
   corrección solo neutraliza ese relleno filtrado (vuelve a `transparent`,
   el valor por defecto de `.btn-outline` que este botón ya debería tener) sin
   tocar nada más: el borde crema semitransparente y el texto/icono en crema
   ya los pone `.btn-outline.on-dark` de siempre, así que no hace falta
   redefinirlos aquí — solo estaban invisibles porque el relleno filtrado los
   tapaba por completo. */
.cta-final .btn-outline.on-dark{
  background: transparent;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--maroon-deep); color: rgba(251,243,230,.75); padding: 0 0 22px; position: relative; border-top: 1px solid rgba(251,243,230,.14); }
.footer-top{ padding: 32px 0 28px; display: grid; gap: 22px; border-bottom: 1px solid rgba(251,243,230,.14); }
.footer-col h3{ font-family: var(--font-display); color: var(--cream); font-size: .84rem; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.footer-col ul{ display: grid; gap: 6px; font-size: .85rem; }
.footer-col a:hover{ color: var(--cream); }
.footer-col .muted{ color: rgba(251,243,230,.55); }
/* Dirección de recogida → Google Maps: mismo color/tamaño que el resto del
   texto "muted" (no debe destacar ni parecer un botón), solo un subrayado
   punteado discreto que indique que es pulsable; al pasar el ratón se
   aclara igual que el resto de enlaces del footer (`.footer-col a:hover`). */
.footer-address-link{
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: rgba(251,243,230,.45); text-underline-offset: 3px;
}
.footer-address-link:hover{ text-decoration-color: currentColor; }
.footer-bottom{
  padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: .8rem; color: rgba(251,243,230,.5);
}
/* Enlaces a las páginas legales (19-sep-2026) — mismo tamaño/color muted que
   el resto de `.footer-bottom`, sin cambiar su estructura de 2 columnas. */
.footer-legal-links a{ color: inherit; text-decoration: none; }
.footer-legal-links a:hover{ color: rgba(251,243,230,.85); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 620px){
  .steps-flow{ grid-template-columns: repeat(2, 1fr); gap: 40px 48px; }
  /* Sin la columna de marca, Contacto y Recogida/horario quedan como 2
     columnas equilibradas — no queda hueco de la tercera columna eliminada. */
  .footer-top{ grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 640px; }
}

@media (min-width: 880px){
  .main-nav{ display: block; }
  .header-actions .btn{ display: inline-flex; }
  .nav-toggle{ display: none; }

  /* Logo con más presencia de marca en desktop (era el mismo tamaño que en
     mobile) — el header sigue limpio, solo crece un poco de alto. */
  .brand img{ height: 100px; }
  .site-header.is-scrolled .brand img{ height: 68px; }

  /* Igual que en mobile: header ya .is-scrolled cuando el salto termina
     (10px*2 + logo 68px = 88px de alto real), + margen de aire moderado. */
  #inicio, #tortillas, #como-pedir, #contacto{ scroll-margin-top: 108px; }

  /* El hero cierra con aire real (24px) antes de La Ama, en vez de que la
     imagen termine justo donde empieza la siguiente sección — pero poco,
     para que el paso de una sección a otra se sienta continuo (ver .ama
     padding-top, que aporta el resto de la respiración). */
  .hero{ padding: 150px 0 24px; }
  .hero::before{ display: none; }
  /* Desde el 18-sep-2026 .hero-copy y .hero-photo (antes solo mobile) son el
     hero real en todos los anchos. Rehecho el 19-sep-2026: la primera
     versión metía la foto en una tarjeta enmarcada (radio + sombra) igual
     que `.ama-photo` — correcto en columnas, pero leía como "dos bloques"
     (texto | tarjeta) en vez de una sola composición. Ahora la foto no
     lleva marco: sangra hasta el borde derecho del viewport (se sale del
     `.container` a propósito, técnica de "bleed" editorial) y un
     degradado en su borde izquierdo la funde con el crema de fondo — así
     no hay una frontera vertical dura entre texto y foto, aunque siguen
     siendo dos elementos HTML normales en un grid de 2 columnas. */
  .hero-grid{ display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; column-gap: 0; padding-bottom: 0; }
  .hero-copy{ grid-column: 1; grid-row: 1; max-width: 92%; position: relative; z-index: 3; padding-bottom: 0; }
  .hero-ctas .btn-outline{ background: transparent; }
  /* 18-sep-2026 (cuarta vuelta) — causa raíz del encuadre roto: la altura
     llevaba un valor fijo (`clamp(380px,38vw,520px)`) independiente del
     ancho real de la foto (que aquí sí varía mucho, por el "bleed" hasta el
     borde del viewport). Con esa altura fija, la caja resultante quedaba
     bastante más estrecha que la proporción real del archivo (2043×770,
     ~2,65:1) — por ejemplo ~1,5:1 en un escritorio normal — y `cover` tiene
     que recortar TODO ese sobrante de ancho para rellenar la caja, lo que se
     comía buena parte del mantel de la izquierda y el lado derecho donde
     está la pala. Arreglo: en vez de una altura fija, `aspect-ratio:
     2043/770` (la proporción NATIVA exacta del archivo) — la caja adopta
     automáticamente la altura correcta para lo ancho que sea, así `cover`
     ya no tiene nada que recortar. */
  /* 18-sep-2026 (quinta vuelta) — con el crop ya resuelto, la foto quedaba
     confinada a su propia columna (1.2fr de 2.2, ~54,5% del ancho) y, al ser
     ahora más baja (altura ligada al ancho por el aspect-ratio), se leía
     pequeña y separada del texto por un hueco grande — exactamente "TEXTO |
     vacío | FOTO". La foto en sí ya trae mantel/espacio vacío a su propia
     izquierda (parte de la composición original), así que la solución no es
     agrandar recortando, sino dejar que la foto ocupe TODO el ancho del
     grid (`grid-column: 1 / -1`, las dos columnas) en vez de solo la suya:
     de este modo se pinta también por detrás de la columna de texto,
     aprovechando ese espacio negativo ya existente en el archivo para
     fusionarse con el contenido (el degradado de `::before` ya se encarga de
     aclararla bajo el texto), mientras `.hero-copy` sigue en su columna de
     siempre y por encima (z-index) sin moverse. Al ser más ancha, la altura
     (ligada por aspect-ratio) crece también de forma natural — vuelve a un
     rango similar al de antes de este arreglo (~380–520px en escritorios
     normales), sin reintroducir ningún recorte. */
  .hero-photo{
    position: relative; top: auto; left: auto; right: auto;
    grid-column: 1 / -1; grid-row: 1;
    margin: 0; overflow: hidden; border-radius: 0; box-shadow: none;
    aspect-ratio: 2043 / 770; height: auto;
    /* Saca la foto del padding del .container y la lleva hasta el borde
       derecho real del viewport, sea cual sea su ancho (con .container ya
       centrado y limitado a 1280px, esto es "gutter + mitad del sobrante
       fuera del container"). */
    margin-right: calc(-1 * (var(--gutter) + (100vw - min(100vw, var(--container))) / 2));
  }
  .hero-photo::before{
    inset: 0; height: auto;
    /* El tramo de desvanecido tiene que cubrir SIEMPRE la columna de texto,
       y esa columna es una fracción del ancho de la foto que varía con el
       viewport (la foto ahora ocupa las dos columnas + bleed, y el bleed
       crece con el ancho de pantalla): en un escritorio estrecho (~880px) el
       texto ocupa ~43% del ancho de la foto; en uno muy ancho baja a ~34%.
       Antes el desvanecido terminaba al 36%, que en escritorios estrechos
       dejaba el final del texto ya sobre la foto sin ninguna capa de por
       medio. Ahora llega hasta el 50%, con margen de sobra en todos los
       casos. */
    background: linear-gradient(90deg, var(--cream) 0%, rgba(251,248,243,.92) 18%, rgba(251,248,243,0) 50%);
  }
  .hero-photo img{
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
    filter: saturate(.95) brightness(1.02);
  }
  /* 18-sep-2026 (séptima vuelta) — ya no hace falta un reset aquí: el CTA
     del hero usa el mismo tratamiento en escritorio y en mobile (ver regla
     base, fuera de cualquier media query), tal como se pidió. */

  /* padding-top bajo a propósito: la foto nueva de La Ama ya aporta
     identidad e impacto por sí sola, así que la sección no necesita aire
     extra arriba para "asentarse" — y ese padding corto es lo que hace que
     la transición Hero → La Ama se sienta continua (ver .hero padding). */
  .ama{ padding: 16px 0 72px; }
  .ama .container{ grid-template-columns: 1.05fr 1fr; align-items: center; gap: 72px; }
  .ama-photo{ order: 0; margin-inline: 0; }
  /* Sin panel de color ni comilla editorial detrás: la foto real (manos
     rompiendo un huevo, delantal de cuadros) ya tiene identidad de sobra;
     añadir decoración encima la hacía parecer una plantilla en vez de una
     fotografía de verdad. El marco se mantiene igual (mismo .frame,
     aspect-ratio 4/5) para poder sustituirlo más adelante por el mini loop
     en vídeo sin tocar esta sección. */
  .ama-photo .frame{
    border-radius: var(--radius-m); box-shadow: var(--shadow-photo); aspect-ratio: 4/5;
  }

  .dishes{ padding: 84px 0 88px; }
  /* En vez de una lista de filas a todo el ancho del contenedor (dejaba una
     franja enorme de espacio vacío a la derecha del texto en pantallas
     anchas), tarjetas en columna: la foto pasa a ser un bloque grande
     arriba (misma foto/recorte de siempre, solo presentada más grande) y
     el texto debajo — reserva de sitio pensada para cuando lleguen las
     fotos definitivas con un encuadre más alejado. */
  .dishes-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    border-top: none;
  }
  .dish{
    flex-direction: column; align-items: stretch; gap: 0;
    padding-block: 0; border-bottom: none;
    background: var(--paper); border-radius: var(--radius-m); box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .dish .frame{
    width: 100%; aspect-ratio: 4/3; border-radius: 0; box-shadow: none;
  }
  .dish-body{ padding: 22px 24px 26px; }

  .steps{ padding: 84px 0 76px; }
  .steps-flow{ grid-template-columns: repeat(4, 1fr); gap: 36px; }
  .step-num{ font-size: 2.6rem; }

  /* Las 2 tarjetas van centradas como conjunto, y la información adicional
     (horario/antelación/WhatsApp) pasa a un renglón debajo, claramente
     secundario — antes vivía en una tercera columna lateral que dejaba un
     hueco absurdo junto a las tarjetas. */
  .steps-info{ display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .info-grid{ grid-template-columns: repeat(2, 280px); }
  .steps-note{ margin-top: 0; max-width: 46ch; }
  .steps-note-alt a{ white-space: nowrap; }

  /* Foto ~58% del ancho, texto al lado centrado verticalmente respecto a
     ella (no "perdido" abajo) — sin card, sin sombra, sin marco: la imagen
     se apoya en su propio ancho y proporción natural, sin recortar. */
  .delivery{ padding: 96px 0 100px; }
  .delivery-grid{
    display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 64px;
  }
  .delivery-photo{ order: 0; }
  .delivery-copy{ order: 0; max-width: none; }
  .delivery-copy h2{ font-size: clamp(1.9rem, 2.8vw, 2.5rem); margin-top: 16px; }
  .delivery-copy p{ font-size: 1.1rem; }

  /* Editorial: texto a la izquierda (sin dejarlo vacío, ~40% del ancho con
     peso real), foto grande a la derecha — orden invertido respecto a mobile
     vía flex `order`, mismo marcado. */
  .mesa{ padding: 96px 0; }
  .mesa-layout{ flex-direction: row; align-items: center; gap: 64px; }
  .mesa-photo{ order: 2; flex: 1 1 58%; margin-inline: 0; }
  .mesa-photo img{ border-radius: var(--radius-m); box-shadow: var(--shadow-photo); }
  .mesa-copy{ order: 1; flex: 0 0 auto; width: 38%; }
  .mesa-copy h2{ font-size: clamp(2rem, 2.6vw, 2.5rem); }
  .mesa-copy p{ font-size: 1.08rem; }
}

/* ==========================================================================
   PÁGINA CARTA — la carta arranca directamente bajo el header, sin hero ni
   foto protagonista: el primer viewport ya muestra tortillas, precio y
   Añadir. Reutiliza tokens/patrones de arriba (eyebrow, .frame, .btn,
   .info-box, .reveal). Sin sombras artificiales ni cards sobredimensionadas.
   ========================================================================== */
#tortillas, #acompanar{ scroll-margin-top: 96px; }

/* ---------- Placeholder neutro para fotos pendientes: fácil de sustituir por
   un <img> real más adelante, sin tocar el resto del marcado. ---------- */
.photo-placeholder{
  width: 100%; height: 100%; padding: 10px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(135deg, var(--cream-deep), var(--paper));
}
.photo-placeholder span{
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: .76rem; letter-spacing: .01em; color: var(--gold-deep); opacity: .85;
}

/* ---------- Tortillas: rejilla compacta, sin sombra, borde fino. Cada
   tarjeta resuelve foto + nombre + descripción corta + precio + Añadir en
   muy poco espacio vertical. La sección de tortillas es la primera bajo el
   header — el padding-top solo deja el aire justo para despejarlo. ---------- */
.products{ padding: 100px 0 8px; }
.products-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.products-head h1, .products-head h2{
  font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep);
  font-size: clamp(1.5rem, 2.8vw, 1.9rem); margin-top: 6px;
}
.products-head p{ color: var(--ink-soft); font-size: .92rem; }

.product-grid{ margin-top: 22px; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.product-card{
  border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
}
.product-photo{ display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep); }
.product-photo img{ width: 100%; height: 100%; object-fit: cover; }
.product-body{ padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.product-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.product-head h3{ font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--maroon-deep); }
.product-head .amount{ font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--red-mantel-deep); white-space: nowrap; }
.product-desc{ color: var(--ink-soft); font-size: .8rem; line-height: 1.4; flex: 1 1 auto; }
/* Mobile: en columna para que "Añadir" tenga área táctil cómoda a todo el
   ancho y "Ver tortilla" nunca se vea forzado a partirse en 2 líneas por
   falta de sitio junto al botón (ver override en fila a partir de 620px). */
.product-actions{ margin-top: 10px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.product-link{
  font-size: .8rem; font-weight: 700; color: var(--maroon-deep); opacity: .7;
  white-space: nowrap; text-align: center; padding-block: 6px;
}
.product-link:hover{ opacity: 1; text-decoration: underline; text-underline-offset: 2px; }

.add-btn{
  padding: 12px 16px; min-height: 44px; font-size: .86rem; width: 100%; justify-content: center;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.add-btn.is-added{ background: var(--gold); border-color: var(--gold); color: var(--maroon-deep); }

/* ---------- Para acompañar: 4 productos. Rehecho el 19-sep-2026 con las
   fotos definitivas nuevas (ya con encuadre y margen correctos de origen,
   no hace falta ningún truco de CSS para "crear aire"): cuadrícula propia
   de 2 columnas fija (1 en mobile), independiente de `.product-grid`
   (que va a 3 en la carta de tortillas) porque aquí el cliente quiere
   explícitamente 2×2 siempre en escritorio, nunca 3+1. object-fit vuelve a
   ser `cover` normal (como en las tortillas) porque el aspect-ratio de la
   caja coincide con el de la foto (1/1, igual que el archivo fuente), así
   que cover no recorta nada — no es necesario `contain` ni relleno. ---------- */
.accompany-grid{ grid-template-columns: 1fr; }
.accompany-grid .product-photo{ aspect-ratio: 1/1; }
.accompany-grid .product-photo img{ object-fit: cover; object-position: 50% 50%; }

/* ---------- Ayuda / WhatsApp: canal secundario, no la compra principal ---------- */
.help-bar{ padding: 28px 0 48px; }
.help-card{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); padding: 18px 22px;
}
.help-card-text{ display: flex; align-items: flex-start; gap: 12px; }
.help-card-text svg{ width: 20px; height: 20px; color: var(--gold-deep); flex: none; margin-top: 2px; }
.help-card-text strong{ display: block; font-family: var(--font-display); color: var(--maroon-deep); font-size: .96rem; }
.help-card-text span{ display: block; margin-top: 2px; color: var(--ink-soft); font-size: .86rem; }

/* ==========================================================================
   PÁGINA VER TORTILLA — ficha individual, composición editorial: foto
   grande, nombre, descripción, precio, Añadir. Distinta a propósito de la
   Carta (que es densa y sin foto protagonista).
   ========================================================================== */
.product-detail{ padding: 108px 0 40px; }
.product-detail-grid{ display: grid; gap: 22px; }
.back-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; font-weight: 700; color: var(--maroon-deep); opacity: .7;
}
.back-link svg{ width: 16px; height: 16px; }
.back-link:hover{ opacity: 1; }
.product-detail-copy h1{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--maroon-deep); margin-top: 10px;
}
.product-detail-copy .lede{ margin-top: 14px; font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; }
.detail-price-row{ margin-top: 22px; display: flex; align-items: center; gap: 18px; }
.detail-price-row .amount{ font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--red-mantel-deep); white-space: nowrap; }
.product-detail-photo .frame{
  position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: var(--radius-m);
  box-shadow: var(--shadow-photo);
}
.product-detail-photo .frame img{ width: 100%; height: 100%; object-fit: cover; }

/* La carta completa reutiliza .products/.accompany tal cual (mismo marcado
   que carta.html), pero aquí van DEBAJO de la ficha de producto en vez de
   ser lo primero de la página — su padding-top grande (pensado para
   despejar el header fijo) sobra aquí. */
.product-detail + .products{ padding-top: 32px; }

@media (min-width: 620px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .accompany-grid{ grid-template-columns: repeat(2, 1fr); }
  /* Con más ancho por tarjeta, botón + enlace vuelven a caber en una fila. */
  .product-actions{ flex-direction: row; align-items: center; justify-content: space-between; }
  .add-btn{ width: auto; }
}

@media (min-width: 880px){
  .products{ padding: 128px 0 8px; }
  .product-grid{ gap: 20px; }

  .accompany{ padding: 32px 0 8px; }
  /* 19-sep-2026 — bug reportado: en escritorio `.accompany-grid` heredaba
     `repeat(2, 1fr)` a lo ancho de TODO `.container` (mismo ancho que
     `.product-grid`, que reparte ese ancho en 3), así que cada tarjeta de
     acompañamiento salía mucho más ancha que una de tortilla — justo lo que
     el cliente reportó como "demasiado grandes". El pedido es explícito:
     mismo ancho de tarjeta que `.product-grid` (3 columnas, gap 20px) pero
     en una cuadrícula 2×2 fija, sin estirar las tarjetas para rellenar el
     ancho sobrante. La fórmula `calc((200% - 20px) / 3)` da el ancho exacto
     de 2 columnas + 1 gap DE ESE MISMO grid de 3 columnas (200% = 2× el
     ancho del contenedor, que es lo mismo que ve `.product-grid`; se resta
     un gap de 20px —igual al de `.product-grid`— y se reparte entre 3), así
     que cada columna resultante mide exactamente lo mismo que una columna
     de `.product-grid`, sea cual sea el ancho real del contenedor — no es
     una aproximación visual, es la misma cuenta matemática. 20-sep-2026:
     el cliente pidió centrar el bloque 2×2 en el espacio sobrante (la
     primera versión lo dejaba alineado a la izquierda, sin `margin`) —
     `margin-inline:auto` centra el grid (ya con ancho fijo, no 100%) dentro
     de `.container`, sin afectar al ancho de las tarjetas. */
  .accompany-grid{ gap: 20px; width: calc((200% - 20px) / 3); margin-inline: auto; }

  #tortillas, #acompanar{ scroll-margin-top: 108px; }

  .help-bar{ padding: 36px 0 64px; }

  .product-detail{ padding: 132px 0 56px; }
  .product-detail-grid{ grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; }
  .product-detail + .products{ padding-top: 48px; }
}

/* ==========================================================================
   CARRITO (drawer global, disponible en Home y Carta) + UPSELL
   ========================================================================== */
.cart-overlay{ position: fixed; inset: 0; z-index: 150; background: rgba(58,13,16,.35); }
.cart-panel{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 151; width: min(420px, 100%);
  background: var(--paper); box-shadow: -20px 0 50px -20px rgba(30,8,9,.35);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .4s var(--ease);
}
.cart-panel.is-open{ transform: translateX(0); }
.cart-panel-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.cart-panel-head h3{ font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep); font-size: 1.12rem; }
.cart-panel-head button{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); color: var(--maroon-deep); font-size: 1.1rem; line-height: 1; }
.cart-items{ flex: 1 1 auto; overflow-y: auto; padding: 6px 22px; }
.cart-empty{ padding: 32px 4px; text-align: center; color: var(--ink-soft); font-size: .92rem; }
.cart-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-row-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-row-info strong{ font-family: var(--font-display); color: var(--maroon-deep); font-size: .95rem; }
.cart-row-info span{ color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.cart-row-qty{ display: flex; align-items: center; gap: 6px; flex: none; }
.cart-row-qty button{
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--maroon-deep); font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cart-row-qty span{ min-width: 20px; text-align: center; font-weight: 600; color: var(--maroon-deep); }
.cart-panel-foot{ padding: 16px 22px 22px; border-top: 1px solid var(--line); }
.cart-total{ display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep); font-size: 1.05rem; margin-bottom: 12px; }
.cart-total span{ white-space: nowrap; }
.cart-panel-foot .btn{ width: 100%; justify-content: center; }
.cart-panel-foot .btn:disabled{ opacity: .5; pointer-events: none; }

.modal-overlay{
  position: fixed; inset: 0; z-index: 160; background: rgba(58,13,16,.4);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.modal-overlay[hidden]{ display: none; }
.modal-overlay.is-open{ opacity: 1; pointer-events: auto; }
.modal-card{
  width: 100%; max-width: 440px; background: var(--paper);
  border-radius: var(--radius-m) var(--radius-m) 0 0; padding: 26px 22px 24px; position: relative;
  transform: translateY(30px); transition: transform .35s var(--ease-soft);
  box-shadow: var(--shadow-photo);
}
.modal-overlay.is-open .modal-card{ transform: translateY(0); }
.modal-close{ position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); color: var(--maroon-deep); }
.modal-card h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--maroon-deep); margin-top: 6px; }
.upsell-items{ margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.upsell-item{
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--cream); text-align: center;
}
.upsell-item img{ width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-s); }
.upsell-item span{ font-size: .74rem; color: var(--maroon-deep); font-weight: 600; line-height: 1.3; }
.upsell-item.is-added{ border-color: var(--gold); background: var(--cream-deep); }
.modal-card > .btn{ margin-top: 16px; width: 100%; justify-content: center; }

@media (min-width: 620px){
  .modal-overlay{ align-items: center; padding: 24px; }
  .modal-card{ border-radius: var(--radius-m); }
}

/* ==========================================================================
   CHECKOUT — mobile-first: un único flujo por pasos, formulario legible,
   acciones siempre accesibles abajo. Reutiliza tokens/patrones del resto
   del sitio (.eyebrow, .btn, .radius-m, .shadow-card) sin inventar estilos
   nuevos de marca.
   ========================================================================== */
.checkout{ padding: 108px 0 60px; min-height: 55vh; }
.checkout-container{ max-width: 640px; }
.checkout .back-link{ margin-bottom: 18px; }
.checkout-title{
  font-family: var(--font-display); font-weight: 800; color: var(--maroon-deep);
  font-size: clamp(1.7rem, 4.4vw, 2.2rem); margin-top: 10px;
}

.checkout-empty{ padding: 40px 0; text-align: center; }
.checkout-empty h1{ font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.6rem; margin-top: 10px; }
.checkout-empty p{ margin-top: 10px; color: var(--ink-soft); }
.checkout-empty .btn{ margin-top: 22px; }

.checkout-progress{ margin-top: 24px; display: flex; gap: 6px; }
.checkout-progress-step{ flex: 1 1 auto; height: 4px; border-radius: 999px; background: var(--line); transition: background .3s var(--ease); }
.checkout-progress-step.is-done{ background: var(--gold-deep); }
.checkout-progress-step.is-active{ background: var(--gold); }
.checkout-step-label{ margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }

.checkout-panel[hidden]{ display: none; }
.checkout-panel{ margin-top: 24px; }
.checkout-subhead{
  font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep); font-size: 1.15rem;
}

.checkout-field{ margin-top: 16px; }
.checkout-field label{ display: block; font-weight: 700; font-size: .86rem; color: var(--maroon-deep); margin-bottom: 6px; }
.checkout-optional{ font-weight: 400; color: var(--ink-soft); }
.checkout-field input, .checkout-field select{
  width: 100%; padding: 13px 14px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); font: inherit; font-size: 1rem; background: var(--paper); color: var(--ink);
  min-height: 48px;
}
.checkout-field input:focus, .checkout-field select:focus{ border-color: var(--gold-deep); outline: none; }
.checkout-error{ margin-top: 6px; font-size: .82rem; color: var(--red-mantel-deep); font-weight: 600; }
.checkout-hint{ margin-top: 6px; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); }

/* Calle + número en la misma fila en pantallas con espacio; en mobile caen
   en columna igual que el resto de campos del formulario. */
.checkout-address-row{ display: flex; gap: 12px; }
.checkout-address-row .checkout-field{ flex: 1 1 auto; }
.checkout-address-row .checkout-field-narrow{ flex: 0 0 100px; }
@media (max-width: 480px){
  .checkout-address-row{ flex-direction: column; }
  .checkout-address-row .checkout-field-narrow{ flex: 1 1 auto; }
}

.checkout-radio-group{ display: grid; gap: 12px; margin-top: 18px; }
.checkout-radio-card{
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  border: 1.5px solid var(--line); border-radius: var(--radius-m); background: var(--paper); cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.checkout-radio-card input{ margin-top: 3px; accent-color: var(--gold-deep); flex: none; width: 18px; height: 18px; }
.checkout-radio-card svg{ width: 20px; height: 20px; color: var(--gold-deep); flex: none; margin-top: 1px; }
.checkout-radio-card.is-selected{ border-color: var(--gold-deep); background: var(--cream-deep); }
.checkout-radio-card[hidden]{ display: none; }
.checkout-radio-card-body{ flex: 1 1 auto; min-width: 0; }
.checkout-radio-card-body strong{ display: block; font-family: var(--font-display); color: var(--maroon-deep); font-size: 1rem; }
.checkout-radio-card-body span{ display: block; margin-top: 2px; font-size: .86rem; color: var(--ink-soft); }
.checkout-radio-card-price{ flex: none; font-weight: 700; color: var(--red-mantel-deep); white-space: nowrap; }

.checkout-today-alert{
  margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-m);
  background: var(--cream-deep); border: 1px solid var(--line);
}
.checkout-today-alert p{ font-size: .9rem; color: var(--ink-soft); }
.checkout-today-alert p + p{ margin-top: 4px; }
.checkout-today-alert .btn{ margin-top: 12px; }

.checkout-actions{
  position: sticky; bottom: 0; z-index: 5; margin-top: 28px; padding: 14px 0 4px;
  display: flex; gap: 12px; background: linear-gradient(180deg, transparent, var(--cream) 35%);
}
.checkout-actions .btn{ flex: 1 1 auto; justify-content: center; }
.checkout-actions .btn:disabled{ opacity: .5; pointer-events: none; }

.checkout-summary-list{ margin-top: 14px; border-top: 1px solid var(--line); }
.checkout-summary-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink-soft);
}
.checkout-summary-row strong{ color: var(--maroon-deep); font-weight: 700; white-space: nowrap; }
.checkout-summary-total{
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--maroon-deep);
}
.checkout-summary-total span{ white-space: nowrap; }
.checkout-summary-details{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.checkout-summary-detail{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .88rem; color: var(--ink-soft);
}
.checkout-summary-edit{ flex: none; font-size: .78rem; font-weight: 700; color: var(--maroon-deep); opacity: .75; text-decoration: underline; text-underline-offset: 2px; padding: 4px; }
.checkout-summary-edit:hover{ opacity: 1; }

/* Política de cancelación (19-sep-2026): una sola línea discreta entre el
   resumen y el pago — texto pequeño, color muted, sin caja ni icono, para no
   competir visualmente con el total ni con el paso de pago. */
.checkout-cancel-note{ margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.checkout-payment{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Checkbox de aceptación legal (19-sep-2026) — obligatorio antes de poder
   pagar (ver checkout.js: el botón de pago comprueba este checkbox además
   de un método de pago seleccionado). Checkbox nunca premarcado en el
   HTML a propósito. */
.checkout-legal-accept{
  margin-top: 18px; display: flex; align-items: flex-start; gap: 10px;
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft); cursor: pointer;
}
.checkout-legal-accept input{ margin-top: 3px; accent-color: var(--gold-deep); flex: none; width: 18px; height: 18px; }
.checkout-legal-accept a{ color: var(--maroon-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.checkout-confirmation{ padding: 40px 0; text-align: center; }
.checkout-confirmation h1{ font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.8rem; margin-top: 10px; }
.checkout-confirmation p{ margin-top: 10px; color: var(--ink-soft); }
.checkout-confirmation-ref{ font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--maroon-deep); }
.checkout-confirmation-save{ font-size: .84rem; }
.checkout-confirmation .checkout-summary{ margin-top: 24px; text-align: left; }
.checkout-confirmation-special{
  margin-top: 20px; margin-bottom: 24px; padding-top: 18px; border-top: 1px solid var(--line); text-align: left;
}
.checkout-confirmation-special .checkout-subhead{ text-align: left; }
.checkout-confirmation-special p{ margin-top: 6px; font-size: .88rem; }
.checkout-confirmation-special .btn{ margin-top: 12px; }

.checkout-payment-failed{ padding: 40px 0; text-align: center; }
.checkout-payment-failed h1{ font-family: var(--font-display); color: var(--maroon-deep); font-size: 1.6rem; margin-top: 10px; }
.checkout-payment-failed p{ margin-top: 10px; color: var(--ink-soft); }
.checkout-payment-failed .checkout-actions{ position: static; background: none; margin-top: 24px; flex-wrap: wrap; justify-content: center; }

@media (min-width: 620px){
  .checkout-payment-failed .checkout-actions .btn{ flex: 0 0 auto; min-width: 180px; }
}

@media (min-width: 620px){
  .checkout-radio-group{ grid-template-columns: 1fr 1fr; }
  .checkout-actions{ position: static; background: none; padding: 0; margin-top: 32px; }
  .checkout-actions .btn{ flex: 0 0 auto; min-width: 160px; }
  .checkout-actions .btn-primary{ margin-left: auto; }
}

@media (min-width: 880px){
  .checkout{ padding: 140px 0 80px; }
}

/* ==========================================================================
   PÁGINAS LEGALES — Privacidad, Condiciones de Compra, Cookies (19-sep-2026).
   Contenido denso y de lectura (no venta), por eso una columna estrecha
   centrada en vez del ancho completo del resto del sitio, con jerarquía
   tipográfica simple (h1/h2/párrafo) reutilizando los mismos tokens de
   marca. El Aviso Legal no está aquí a propósito: sigue sin publicarse
   (falta el dato registral, ver NOTES.md) — ver legal-prep/.
   ========================================================================== */
.legal{ padding: 132px 0 80px; }
.legal-container{ max-width: 720px; margin-inline: auto; }
.legal h1{
  font-family: var(--font-display); font-weight: 800; color: var(--maroon-deep);
  font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1.15;
}
.legal-updated{ margin-top: 8px; color: var(--ink-soft); font-size: .86rem; }
.legal h2{
  font-family: var(--font-display); font-weight: 700; color: var(--maroon-deep);
  font-size: 1.2rem; margin-top: 40px;
}
.legal p, .legal li{ color: var(--ink-soft); font-size: 1rem; line-height: 1.65; margin-top: 12px; }
.legal ul{ list-style: disc; padding-left: 22px; }
.legal strong{ color: var(--maroon-deep); }
.legal a{ color: var(--maroon-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 880px){
  .legal{ padding: 156px 0 96px; }
}

/* ===== Banner de consentimiento de cookies (Analytics opcional) ===== */
[data-cookie-banner]{
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 640px; margin: 0 auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-card);
  padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
[data-cookie-banner] p{ flex: 1 1 260px; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
[data-cookie-banner] a{ color: var(--maroon-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions{ display: flex; gap: 10px; flex: none; }
.cookie-banner-actions .btn{ padding: 10px 16px; font-size: .88rem; }


/* Aviso de carrito actualizado (cart.js → syncCartWithCatalog): visible y
   persistente hasta que el cliente pulsa «Entendido». */
.cart-notice{
  position: fixed; z-index: 9999; left: 12px; right: 12px; top: 12px; max-width: 520px; margin: 0 auto;
  background: var(--paper); color: var(--ink); border: 2px solid var(--maroon); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 10px 30px rgba(58,13,16,.28); font-size: .95rem;
}
.cart-notice strong{ display:block; color: var(--maroon-deep); margin-bottom: 6px; }
.cart-notice ul{ margin: 0 0 12px; padding-left: 18px; }
.cart-notice li{ margin: 3px 0; }
.cart-notice .btn{ width: 100%; }