/* Carta · Elsa Bakery & Lunch (versión 14: primero se lee).
   Llega mucha gente mayor que no usa el teléfono para pedir: la carta se abre para LEER, con letra grande, alto
   contraste y seis secciones ordenadas como la carta de elsabakery.cl. Pedir desde la mesa es opcional
   (html[data-pedir]); «Letra grande» sube toda la escala (html.letra-grande).
   base.css pone tokens, tipografía, .boton, .acciones, .chip, diálogos y .aparece; aquí solo lo propio de la carta.
   Todo el movimiento es transform/opacity; reducido = sin desplazamientos; sin JS = todo visible. */

:root {
  --caja: max(var(--margen), calc((100vw - 1080px) / 2));
}

/* Letra grande: toda la escala de la carta sube un 20 %. La barra de abajo mantiene su tamaño para no partirse. */
html.letra-grande {
  --t-nota: 1.125rem;                                       /* 18 */
  --t-texto: clamp(1.275rem, 1.25rem + 0.1vw, 1.35rem);     /* 20 → 22 */
  --t-entrada: clamp(1.575rem, 1.44rem + 0.57vw, 1.95rem);  /* 25 → 31 */
  --t-titulo: clamp(2.4rem, 1.83rem + 2.97vw, 4.5rem);
}
html.letra-grande .acciones,
html.letra-grande .dialogo { font-size: 1.0625rem; }

/* ---------- Tapa: el logo de Elsa se escribe sobre el rojo de la marca ----------
   El logo es una máscara (img/logo-elsa-1024.webp) pintada en papel, como .escena__logo del inicio.
   Capa tenue (siempre visible desde el primer fotograma) + capa llena que barre de izquierda a derecha:
   el contenedor entra desde -100 % y la tinta desde +100 %, así la tinta queda quieta y solo avanza el borde.
   Todo con transform; sin JS o con movimiento reducido, el logo está entero y quieto. */

.tapa {
  --p: 0;
  position: relative;
  overflow: hidden;
  background: var(--rojo);
  color: var(--papel);
  isolation: isolate;
}

.tapa__texto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: clamp(440px, 60svh, 620px);
  padding: max(16px, env(safe-area-inset-top)) var(--caja) 28px;
  opacity: calc(1 - var(--p, 0) * 0.85);
}

.tapa__arriba {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  font-size: var(--t-nota);
  line-height: 1.4;
}
.tapa__marca { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.tapa__mesa { font-weight: 600; }

.tapa__centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 4svh, 36px);
}

.tapa__logo {
  display: none;
  position: relative;
  width: min(74vw, 340px);
  aspect-ratio: 2 / 1;
  transform: translate3d(0, calc(var(--p, 0) * -28px), 0);
}
.tapa__logo-base,
.tapa__logo-tinta {
  position: absolute;
  inset: 0;
  background: var(--papel);
  -webkit-mask: url("img/logo-elsa-1024.webp") center / contain no-repeat;
  mask: url("img/logo-elsa-1024.webp") center / contain no-repeat;
}
.tapa__logo-base { opacity: 0.28; }
.tapa__logo-barrido { position: absolute; inset: 0; overflow: hidden; }

.tapa__abajo { max-width: 34rem; }

/* ---------- Escenario: la insignia de Elsa cae, choca y se asienta ----------
   En el teléfono ocupa todo el ancho (las paredes son los bordes de la pantalla) y va entre la marca y el título:
   la insignia nunca pasa por encima de texto ni botones (overflow: hidden). En escritorio es la columna derecha.
   Sin JS o con movimiento reducido: quieta en el suelo, centrada, con un giro leve.
   Con física (data-fisica, carta.js): arriba a la izquierda y carta.js escribe translate3d() rotate() en un solo elemento. */
.tapa__escenario {
  --ancho-insignia: clamp(140px, min(45vw, 23svh), 210px); /* ~45 % del ancho en iPhone; en pantallas bajas deja aire para saltar */
  position: relative;
  height: clamp(250px, 46svh, 430px);
  margin-inline: calc(var(--caja) * -1);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.tapa__insignia {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: var(--ancho-insignia);
  aspect-ratio: 640 / 836;
  transform: translate3d(-50%, 0, 0) rotate(-3deg);
  cursor: pointer;
  touch-action: manipulation; /* tocar la relanza; arrastrar sigue moviendo la página */
  -webkit-touch-callout: none;
}
.tapa__insignia img { width: 100%; height: 100%; pointer-events: none; }
.tapa__escenario[data-fisica] .tapa__insignia { left: 0; top: 0; bottom: auto; }
.tapa__escenario[data-mueve] .tapa__insignia { will-change: transform; }

/* Sombra de contacto en el suelo: carta.js la mueve con la insignia y la achica cuando sube. */
.tapa__sombra {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--ancho-insignia) * 0.86);
  height: 16px;
  margin-left: calc(var(--ancho-insignia) * -0.43);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 4 8 / 0.55), rgb(60 4 8 / 0)); /* taste-skill-ignore: sombra de contacto de un objeto que cae */
  opacity: 0.9;
  pointer-events: none;
}
.tapa__escenario[data-fisica] .tapa__sombra { left: 0; margin-left: 0; transform-origin: 50% 50%; }

/* Antes de que corra carta.js la insignia espera arriba, fuera de la vista (no hay salto de abajo hacia arriba). */
@media (prefers-reduced-motion: no-preference) {
  .js .tapa__escenario:not([data-fisica]):not([data-quieta]) .tapa__insignia { transform: translate3d(-50%, -140vh, 0); }
  .js .tapa__escenario:not([data-fisica]):not([data-quieta]) .tapa__sombra { opacity: 0; }
}
.tapa__fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }

.tapa__titulo {
  font-size: var(--t-tapa);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.tapa__titulo span { display: inline-block; }

.tapa__lema { margin-top: 14px; font-size: var(--t-texto); line-height: 1.5; max-width: 30ch; }
.tapa__hoy { margin-top: 8px; font-size: var(--t-texto); font-weight: 600; line-height: 1.4; max-width: 36ch; }

.boton.letra { min-height: 48px; }

@media (prefers-reduced-motion: no-preference) {
  .tapa__logo { animation: logo-asienta 0.9s var(--ease-salida) both; }
  .tapa__logo-barrido { animation: barre-fuera 1s cubic-bezier(0.65, 0, 0.35, 1) 0.08s both; }
  .tapa__logo-tinta { animation: barre-dentro 1s cubic-bezier(0.65, 0, 0.35, 1) 0.08s both; }
  .tapa__titulo span { animation: tapa-sube 0.6s var(--ease-salida) both; }
}
/* scale y rotate van aparte del transform: no pisan el desplazamiento ligado al scroll. */
@keyframes logo-asienta { from { scale: 0.94; rotate: -2deg; } to { scale: 1; rotate: 0deg; } }
@keyframes barre-fuera { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes barre-dentro { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
@keyframes tapa-sube { from { transform: translate3d(0, 0.3em, 0); } to { transform: none; } }

@media (min-width: 900px) {
  .tapa__arriba { justify-content: flex-start; }
  .tapa__texto { padding-right: calc(var(--caja) + clamp(320px, 30vw, 440px)); }
  .tapa__escenario {
    --ancho-insignia: clamp(190px, 15vw, 230px);
    position: absolute;
    top: 84px; /* debajo de la barra de acciones, que en escritorio va arriba a la derecha */
    bottom: 28px; /* el suelo, alineado con el final del texto: la insignia no toca el borde de la tapa */
    right: var(--caja);
    width: clamp(300px, 28vw, 420px);
    height: auto;
    margin: 0;
  }
  .tapa__logo { display: block; width: clamp(380px, 34vw, 500px); }
}

/* ---------- Marca de agua: el logo, casi invisible, detrás de las secciones ----------
   Fijo al centro de la pantalla y por debajo de todo (z-index -1): la tapa roja y el índice lo tapan,
   y asoma solo sobre el papel de la carta. Rojo al 4,5 %: el texto conserva su contraste. */
.carta::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(88vw, 900px);
  aspect-ratio: 2 / 1;
  background: var(--rojo);
  opacity: 0.045;
  transform: translate3d(-50%, -50%, 0) rotate(-8deg);
  -webkit-mask: url("img/logo-elsa-1024.webp") center / contain no-repeat;
  mask: url("img/logo-elsa-1024.webp") center / contain no-repeat;
  pointer-events: none;
}
@media (min-width: 900px) {
  .carta::before { left: calc(50% + 120px); }
}

/* ---------- Índice: seis botones grandes, todos a la vista ---------- */

.indice-ancla { height: 1px; margin-bottom: -1px; } /* taste-skill-ignore: marcador invisible para detectar el scroll */

.indice {
  position: relative;
  z-index: 30;
  padding: 16px var(--caja);
  background: var(--papel);
}

.indice__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pestana {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.3em;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: var(--radio);
  background: var(--papel-2);
  color: var(--tinta);
  font-size: var(--t-texto);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-suave), color 0.2s var(--ease-suave);
}
.pestana__hoy { color: var(--rojo-hondo); }
.pestana:focus-visible { outline-offset: 2px; }
.pestana:active { background: var(--rosa); color: var(--rojo-hondo); }
@media (hover: hover) { .pestana:hover { background: var(--rosa); } }

/* En escritorio el índice se queda arriba al bajar, en una sola fila. */
@media (min-width: 900px) {
  .indice { position: sticky; top: 0; padding-right: calc(var(--margen) + 380px); transition: background-color 0.2s var(--ease-suave); }
  .indice[data-fijo] { background: var(--papel-2); }
  .indice__fila { grid-template-columns: repeat(6, auto); justify-content: start; }
  .pestana { min-height: 48px; font-size: var(--t-nota); }
  .pestana[aria-current="true"] { background: var(--tinta); color: var(--papel); }
  .indice[data-fijo] .pestana:not([aria-current]) { background: var(--papel); }
}

/* ---------- Modo: leer o pedir ---------- */

.modo { padding: 0 var(--caja); }
.modo__caja {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: var(--radio);
  background: var(--papel-2);
}

.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: var(--t-entrada);
  font-family: var(--fuente-titulo);
  text-align: left;
  cursor: pointer;
}
.interruptor__pista {
  flex: none;
  position: relative;
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: var(--tinta-2);
  transition: background-color 0.2s var(--ease-suave);
}
.interruptor__bola {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--papel);
  transition: transform 0.2s var(--ease-salida);
}
.interruptor[aria-checked="true"] .interruptor__pista { background: var(--rojo); }
.interruptor[aria-checked="true"] .interruptor__bola { transform: translateX(24px); }
.interruptor:focus-visible { outline-offset: 4px; }

.modo__ayuda { font-size: var(--t-texto); line-height: 1.45; }
.modo .boton--texto { justify-self: start; margin-left: -4px; }
html:not([data-pedir]) [data-solo-ver] { display: none; }

/* ---------- Secciones ---------- */

.carta { padding: 0 var(--caja); }

.familia {
  --arriba: calc(var(--seccion) * 0.6);
  padding-top: var(--arriba);
  scroll-margin-top: 8px;
}
@media (min-width: 900px) {
  .familia { scroll-margin-top: 80px; }
}

.familia__titulo { font-size: var(--t-titulo); line-height: 1.02; letter-spacing: -0.02em; }
.familia__hoy {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: var(--radio);
  background: var(--rojo);
  color: var(--papel);
  font-family: var(--fuente);
  font-size: var(--t-nota);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}
.familia__lema { margin-top: 8px; font-size: var(--t-texto); }

@media (min-width: 900px) {
  .familia { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.8fr); column-gap: 64px; }
  .familia__cabeza { position: sticky; top: 104px; align-self: start; }
}

.lista { display: grid; margin-top: 16px; }
@media (min-width: 900px) { .lista { margin-top: 0; } }

/* ---------- Plato: nombre y precio grandes; la descripción en tinta, para leer sin esfuerzo ---------- */

.plato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nombre precio"
    "desc   desc"
    "extra  extra"
    "pedir  pedir";
  column-gap: 16px;
  padding: 14px 0;
}
.plato + .plato { border-top: 1px dotted rgb(107 79 75 / 0.35); } /* taste-skill-ignore: guía de lectura entre platos, como en la carta impresa */

.plato__nombre {
  grid-area: nombre;
  align-self: baseline;
  font-family: var(--fuente-titulo);
  font-size: var(--t-entrada);
  font-synthesis: none;
  line-height: 1.2;
}
.plato__precio { grid-area: precio; align-self: baseline; font-size: var(--t-entrada); line-height: 1.2; }
.plato__desc { grid-area: desc; margin-top: 4px; font-size: var(--t-texto); line-height: 1.45; }
.plato__extra { grid-area: extra; margin-top: 4px; font-size: var(--t-texto); font-weight: 600; color: var(--rojo-hondo); }

/* Lo de pedir solo aparece con el modo pedir encendido. Los botones siguen en la página (ocultos) para la prueba automática. */
.plato__pedir { grid-area: pedir; display: none; }
html[data-pedir] .plato__pedir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
html[data-pedir] .plato__extra { display: none; }

.en-pedido { font-size: var(--t-nota); font-weight: 600; line-height: 1.4; color: var(--rojo-hondo); }

/* ---------- Agregar: «Agregado» con check ~1,2 s y vuelta ---------- */

.boton.agregar {
  display: grid;
  place-items: center;
  min-width: 120px;
  min-height: 48px;
  padding: 0 16px;
  background: var(--rojo);
  color: var(--papel);
  font-size: var(--t-texto);
}
.agregar > span { grid-area: 1 / 1; transition: opacity 0.2s var(--ease-suave); }
.agregar__ok { display: inline-flex; align-items: center; gap: 6px; opacity: 0; }
.agregar__ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.boton.agregar:active { background: var(--rojo-hondo); transform: scale(0.96); }
@media (hover: hover) { .boton.agregar:hover { background: var(--rojo-hondo); } }
.boton.agregar[data-ok] { background: var(--rojo-hondo); }
.agregar[data-ok] > span { transition-duration: 0.16s; }
.agregar[data-ok] .agregar__txt { opacity: 0; }
.agregar[data-ok] .agregar__ok { opacity: 1; }

/* ---------- Barra inferior: «Pide atención» y «Pedir desde mi mesa» / «Ver mi pedido» ---------- */

.acciones .boton { min-width: 0; padding-inline: 14px; }
html:not([data-pedir]) #abrir-pedido { display: none; }
html[data-pedir] #activar-pedir { display: none; }
#activar-pedir { background: var(--rojo); color: var(--papel); }

#barra-pedido { display: inline-block; }
.pedido__lleno { display: none; }
.pedido__n { display: inline-block; font-variant-numeric: tabular-nums; }
#barra-total { font-variant-numeric: tabular-nums; }

.acciones .pedido-boton:has([data-lleno]) { background: var(--rojo); color: var(--papel); }
.acciones .pedido-boton:has([data-lleno]):active { background: var(--rojo-hondo); }
@media (hover: hover) { .acciones .pedido-boton:has([data-lleno]):hover { background: var(--rojo-hondo); } }
#barra-pedido[data-lleno] .pedido__lleno { display: inline; }

/* Con el modo pedir activo en teléfono, el botón de la izquierda queda con timbre + «Atención» para que «Mi pedido · N · $total» quepa. */
@media (max-width: 429px) {
  html[data-pedir] .acciones__larga { display: none; }
  html[data-pedir] .acciones__corta { display: inline; }
}
#abrir-pedido { white-space: nowrap; }
@media (max-width: 359px) {
  .acciones .boton { font-size: var(--t-nota); padding-inline: 10px; }
}
@media (min-width: 900px) {
  .acciones .boton { padding-inline: 22px; }
  /* Arriba a la derecha pasa sobre la tapa roja: el rojo hondo lo separa del fondo y sigue siendo rojo sobre el papel. */
  #activar-pedir { background: var(--rojo-hondo); }
  #activar-pedir:active { background: var(--tinta); }
}
@media (min-width: 900px) and (hover: hover) {
  #activar-pedir:hover { background: var(--tinta); }
}

/* ---------- Encargos y pie ---------- */

.aviso-js { padding: 24px 0; font-size: var(--t-texto); }
.aviso-js a { color: var(--rojo-hondo); font-weight: 600; }

.encargos { display: grid; gap: 10px; justify-items: start; padding-top: calc(var(--seccion) * 0.75); }
.encargos__titulo { font-size: var(--t-titulo); line-height: 1.02; letter-spacing: -0.02em; }
.encargos__texto { font-size: var(--t-texto); max-width: 34ch; }
.encargos .boton--texto { margin-left: -4px; font-size: var(--t-texto); }

/* Dos botones grandes: escribir (rojo, el principal) y llamar (papel tostado). Iconos funcionales de trazo. */
.encargos__botones {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 36rem;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .encargos__botones { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.boton.encargos__boton {
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px;
  font-size: var(--t-texto);
  white-space: normal;
  text-align: left;
}
.encargos__boton[hidden] { display: none; }
.boton.encargos__boton--llamar { background: var(--papel-2); color: var(--rojo-hondo); }
.boton.encargos__boton--llamar:active { background: var(--rosa); }
@media (hover: hover) { .boton.encargos__boton--llamar:hover { background: var(--rosa); } }
.encargos__boton:focus-visible { outline-color: var(--tinta); outline-offset: 3px; }
.encargos__fono { font-size: var(--t-nota); color: var(--tinta-2); font-variant-numeric: tabular-nums; }

.pie {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: calc(var(--seccion) * 0.75) var(--caja) 40px;
}
.pie__logo { width: min(70%, 260px); height: auto; margin-bottom: 12px; }
.pie__direccion { font-size: var(--t-texto); }
.pie__nota { color: var(--tinta-2); font-size: var(--t-nota); }
.pie .boton--texto { margin: 6px 0 0 -4px; }

.lineas { margin: 0; }
#enviar-pedido { flex: 1 1 100%; }
#nota-atencion { margin: 0 0 20px; }

/* ---------- Entradas (IntersectionObserver en carta.js) ----------
   Títulos: cada palabra sube detrás de su propia máscara (overflow), escalonada.
   Platos: primero el nombre, después el precio; la descripción entre medio. Máx. 0,45 s por elemento.
   Sin JS (.js falta) o con movimiento reducido no hay estado oculto: todo visible y quieto. */

.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* aire para tildes y colas de la Young Serif, sin mover la línea */
  padding: 0.1em 0.02em 0.16em;
  margin: -0.1em -0.02em -0.16em;
}
.palabra > span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .js .entra .palabra > span {
    transition: transform 0.55s var(--ease-salida);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js .entra:not(.visto) .palabra > span { transform: translate3d(0, 112%, 0); }

  .js .plato.entra > * {
    transition: opacity 0.4s var(--ease-suave), transform 0.45s var(--ease-salida);
    transition-delay: calc(min(var(--d, 0), 6) * 50ms + 70ms);
  }
  .js .plato.entra > .plato__nombre { transition-delay: calc(min(var(--d, 0), 6) * 50ms); }
  .js .plato.entra > .plato__precio { transition-delay: calc(min(var(--d, 0), 6) * 50ms + 140ms); }
  .js .plato.entra:not(.visto) > * { opacity: 0; transform: translate3d(0, 10px, 0); }
  .js .plato.entra:not(.visto) > .plato__precio { transform: translate3d(8px, 0, 0); }

  .js .encargos > .entra:not(.encargos__titulo) {
    transition: opacity 0.4s var(--ease-suave), transform 0.45s var(--ease-salida);
    transition-delay: calc(min(var(--d, 0), 6) * 60ms);
  }
  .js .encargos > .entra:not(.encargos__titulo):not(.visto) { opacity: 0; transform: translate3d(0, 12px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tapa__logo, .tapa__titulo span { transform: none; }
  .boton.agregar:active, .boton.encargos__boton:active { transform: none; }
  .interruptor__bola { transition: none; }
}

/* Mientras carta.js arma la carta (tras la tapa), el bloque de abajo no se pinta: así no hay saltos de diseño (CLS 0).
   Si el script tardara más de 3 s, el script del <head> la muestra igual. */
.js:not(.lista) :is(.indice, .modo, .carta) { visibility: hidden; }