/*
  Casa Olmo: web de demostración para restaurante.
  Paleta "bosque de noche": verde casi negro + hueso + ámbar como único acento. Siempre oscura a propósito:
  es la cara de un restaurante de cenas y así no cambia según el móvil de cada persona.
  Radios: fotos y tarjetas 16px, campos 10px, botones en píldora.
*/
:root {
  color-scheme: dark;
  --bg: #0f1712;
  --surface: #16211a;
  --surface-2: #213027;
  --ink: #e7ece4;
  --muted: #a4b2a8;
  --line: rgba(231, 236, 228, 0.13);
  --green: #2c5440;
  --on-green: #eef0e9;
  --accent: #e3a33b;
  --accent-ink: #16241c;
  --radius: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font: "Figtree", ui-sans-serif, system-ui, sans-serif;

  --chat-bg: var(--surface);
  --chat-bubble: var(--surface-2);
  --chat-ink: var(--ink);
  --chat-muted: var(--muted);
  --chat-line: var(--line);
  --chat-accent: var(--accent);
  --chat-accent-ink: var(--accent-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2 { font-family: var(--font-display); text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
@media (max-width: 640px) { .container { padding-inline: 16px; } }

.h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--light { background: rgba(248, 249, 245, 0.16); color: #f8f9f5; box-shadow: inset 0 0 0 1px rgba(248, 249, 245, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: #eeb24f; }
  .btn--light:hover { background: rgba(248, 249, 245, 0.26); }
}

/* Aviso de demo */
.demo-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 16px;
  padding: 10px 16px;
  background: #131316;
  color: #ededE8;
  font-size: 14px;
  text-align: center;
}
.demo-bar a { color: #ff8a66; font-weight: 600; text-underline-offset: 3px; }
.is-embed .demo-bar { display: none; }

/* Navegación */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; text-decoration: none; }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: 4px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 500; text-decoration: none; color: var(--muted); transition: color 160ms ease, background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--ink); background: var(--surface-2); } }
@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav .btn { margin-left: auto; }
}

/* Hero "cartel": el local a pantalla completa con un marco fino, etiquetas pequeñas de imprenta y el titular
   enorme en dos colores (Bricolage estrecha). Las fotos pasan solas con un zoom muy lento; la pizarra del día
   cuelga abajo a la derecha. Al bajar, la foto se encoge hasta quedar enmarcada con esquinas redondas. */
.hero { position: relative; background: var(--bg); }
.hero__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(620px, calc(100svh - 68px - 41px));
  padding-block: 120px 132px;
  overflow: clip;
  background: #0b110d;
}
.hero__slides, .hero__slide, .hero__shade, .hero__steam { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__slides { z-index: -3; }
.hero__slide { object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1200ms ease, transform 9s linear; }
.hero__slide.is-on { opacity: 1; transform: scale(1.02); }
.hero__steam { z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.hero__steam.is-on { opacity: 0.8; }
.hero__shade {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 13, 10, 0.88) 0%, rgba(8, 13, 10, 0.55) 42%, rgba(8, 13, 10, 0.05) 75%),
    linear-gradient(0deg, rgba(8, 13, 10, 0.85) 0%, transparent 45%),
    linear-gradient(180deg, rgba(8, 13, 10, 0.55) 0%, transparent 22%);
}
/* Marco fino de imprenta, metido hacia dentro, con dos esquinas de ámbar */
.hero__frame { position: absolute; inset: 26px; z-index: 0; border: 1px solid rgba(231, 236, 228, 0.22); pointer-events: none; }
.hero__frame::before, .hero__frame::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); }
.hero__frame::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.hero__frame::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.hero__tag {
  position: absolute;
  top: 42px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(231, 236, 228, 0.78);
}
.hero__tag--left { left: 46px; }
.hero__tag--right { right: 46px; }

.hero__copy { position: relative; z-index: 1; }
.hero__kicker { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(231, 236, 228, 0.86); }
.hero__dot { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(227, 163, 59, 0.2); }
.hero__title {
  display: grid;
  font-size: clamp(3.6rem, 11.5vw, 10.5rem);
  font-stretch: 82%;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__l1, .hero__l2 { display: block; overflow: clip; overflow-clip-margin: 0.12em; }
.hero__l1 > span, .hero__l2 > span { display: inline-block; }
.hero__l1 { color: #f4f1e8; }
.hero__l2 { color: var(--accent); margin-left: 0.5em; }
.hero__sub { max-width: 40ch; margin-top: 26px; font-size: 1.1875rem; color: rgba(231, 236, 228, 0.88); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--outline:hover { background: var(--surface-2); } }
.btn--square { border-radius: 4px; padding-inline: 24px 20px; font-weight: 700; letter-spacing: 0.02em; }
.hero__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: var(--accent); }

/* Mandos de las fotos: pie de foto, flechas, contador y pausa */
.hero__ctrl {
  position: absolute;
  right: 46px;
  bottom: 42px;
  left: 46px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
}
.hero__ctrl > * { pointer-events: auto; }
.hero__caption { display: none; margin-right: 14px; max-width: 34ch; text-align: right; font-size: 12px; letter-spacing: 0.06em; color: rgba(231, 236, 228, 0.7); transition: opacity 400ms ease; }
.hero__count { min-width: 64px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-align: center; font-variant-numeric: tabular-nums; color: rgba(231, 236, 228, 0.85); }
.hero__count span { color: var(--accent); }
.hero__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(231, 236, 228, 0.45);
  border-radius: 50%;
  background: rgba(8, 13, 10, 0.35);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.hero__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .hero__btn:hover { background: rgba(231, 236, 228, 0.16); } }
.hero__btn--pause { margin-left: 6px; }

/* La pizarra del día: marco de madera, fondo de pizarra con polvo de tiza y letra a mano */
.chalk {
  position: absolute;
  right: 64px;
  bottom: 112px;
  z-index: 1;
  display: block;
  width: 320px;
  padding: 20px 24px 18px;
  border: 7px solid #6f4e2e;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(90% 70% at 90% 100%, rgba(255, 255, 255, 0.05), transparent 60%),
    #1e2a22;
  color: #f3efe4;
  font-family: "Caveat", cursive;
  text-decoration: none;
  transform: perspective(900px) rotate(-2.5deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.8);
  transition: transform 300ms var(--ease-out);
}
.chalk__title { display: block; font-size: 30px; font-weight: 700; line-height: 1; }
.chalk__title b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.chalk__list { margin-top: 10px; font-size: 22px; font-weight: 600; line-height: 1.22; }
.chalk__list li::before { content: "– "; color: rgba(243, 239, 228, 0.6); }
.chalk__note { display: block; margin-top: 10px; font-family: var(--font); font-size: 13px; color: rgba(243, 239, 228, 0.72); }
.chalk__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: -10px; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--accent); }

/* Entrada: las líneas del cartel suben desde su raya, luego el resto; la pizarra cae colgada */
.js:not(.is-embed) .hero__l1 > span, .js:not(.is-embed) .hero__l2 > span { animation: line-up 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.js:not(.is-embed) .hero__l1 > span { animation-delay: 150ms; }
.js:not(.is-embed) .hero__l2 > span { animation-delay: 300ms; }
@keyframes line-up { from { transform: translateY(105%); } }
.js:not(.is-embed) :is(.hero__kicker, .hero__sub, .hero__ctas, .hero__ctrl, .hero__tag) { animation: fade-up 900ms var(--ease-out) both; animation-delay: 650ms; }
.js:not(.is-embed) .hero__frame { animation: frame-in 1400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }
.js:not(.is-embed) .chalk { animation: chalk-in 1100ms cubic-bezier(0.34, 1.4, 0.64, 1) 900ms backwards; }
@keyframes fade-up { from { opacity: 0; translate: 0 16px; } }
@keyframes frame-in { from { opacity: 0; scale: 1.04; } }
@keyframes chalk-in { from { opacity: 0; transform: perspective(900px) translateY(-60px) rotate(-12deg); } }

@media (min-width: 1280px) { .hero__caption { display: block; } }
@media (max-width: 1100px) {
  .chalk { right: 40px; bottom: 104px; width: 280px; }
  .chalk__list { font-size: 20px; }
}
@media (max-width: 860px) {
  .hero__stage { display: block; min-height: 0; padding-block: 88px 0; }
  .hero__shade { background: linear-gradient(0deg, rgba(8, 13, 10, 0.96) 0%, rgba(8, 13, 10, 0.72) 50%, rgba(8, 13, 10, 0.4) 100%); }
  .hero__frame { inset: 14px; }
  .hero__tag { top: 28px; font-size: 10px; }
  .hero__tag--left { left: 28px; }
  .hero__tag--right { display: none; }
  .hero__title { font-size: clamp(3.4rem, 19vw, 6rem); }
  .hero__l2 { margin-left: 0; }
  .hero__sub { font-size: 1.0625rem; }
  .hero__ctrl { position: relative; inset: auto; margin: 28px 16px 0; padding-bottom: 6px; }
  .hero__caption { display: none; }
  .chalk { position: relative; right: auto; bottom: auto; width: auto; margin: 28px 16px 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity 400ms ease; transform: none !important; }
  .js .hero__l1 > span, .js .hero__l2 > span, .js .hero__kicker, .js .hero__sub, .js .hero__ctas, .js .hero__ctrl, .js .hero__tag, .js .hero__frame, .js .chalk { animation: none !important; }
}

/* ---------- Un día en la casa ----------
   Ordenador con movimiento (.day--live): la pantalla queda fija y los tres momentos se suceden en el mismo sitio,
   con el reloj, el sol que cruza el arco y la luz del fondo cambiando. Sin movimiento o en el móvil: uno debajo de otro. */
.day { position: relative; isolation: isolate; --glow: 227, 163, 59; --glow-a: 0.3; }
.day__pin { position: relative; overflow: clip; padding-block: 112px; }
.day__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at var(--sun-x, 15%) var(--sun-y, 85%), rgba(var(--glow), var(--glow-a)), transparent 70%),
    linear-gradient(rgba(var(--glow), calc(var(--glow-a) * 0.45)), rgba(var(--glow), calc(var(--glow-a) * 0.45))),
    var(--bg);
}
.day__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
@media (min-width: 861px) { .day__head { position: sticky; top: 110px; } }
.day:not(.day--live) .day__dial { display: none; }
.day--live .day__grid { align-items: center; }
.day--live .day__head { position: static; }
.day__intro { max-width: 34ch; margin-top: 18px; color: var(--muted); }
.day__dial { margin-top: 40px; }
.day__arc { width: min(320px, 100%); height: auto; overflow: visible; }
.day__arc path { fill: none; stroke: rgba(231, 236, 228, 0.28); stroke-width: 1.5; stroke-dasharray: 3 7; }
.day__sun { fill: var(--accent); filter: drop-shadow(0 0 14px rgba(227, 163, 59, 0.9)); transition: fill 500ms ease, filter 500ms ease; }
.day.is-night .day__sun { fill: #dfe6f2; filter: drop-shadow(0 0 12px rgba(190, 210, 255, 0.7)); }
.day__clock { margin-top: 6px; font-family: var(--font-display); font-size: clamp(3.4rem, 7vw, 6rem); font-stretch: 75%; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.day__chapters { display: grid; gap: 72px; margin: 0; padding: 0; list-style: none; }
.day__ch { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.day__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface-2); }
.day__photo img { width: 100%; height: 100%; object-fit: cover; }
.day__when { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.day__when span { font-size: 0.5em; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }
.day__note { margin-top: 12px; color: var(--muted); font-size: 15px; }
.day__dishes { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.day__dishes li { display: flex; justify-content: space-between; gap: 16px; font-weight: 500; }
.day__dishes b { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day__go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; font-weight: 600; color: var(--accent); text-underline-offset: 4px; }
/* Tres rayitas bajo el reloj: cuánto del día llevas recorrido */
.day__progress { display: flex; gap: 8px; width: min(320px, 100%); margin-top: 18px; }
.day__progress i { flex: 1; height: 3px; border-radius: 3px; background: rgba(231, 236, 228, 0.16); overflow: hidden; }
.day__progress i::after { content: ""; display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* En vivo: capítulos apilados en el mismo sitio; hero.js los cambia con el scroll */
.day--live .day__pin { height: 100svh; display: grid; align-items: center; padding-block: 72px 32px; }
.day--live .day__chapters { grid-template-areas: "ch"; gap: 0; }
.day--live .day__ch { grid-area: ch; opacity: 0; pointer-events: none; transition: opacity 0s 900ms; }
.day--live .day__ch.is-on, .day--live .day__ch.was-on { opacity: 1; transition-delay: 0s; }
.day--live .day__ch.is-on { pointer-events: auto; }
.day--live .day__photo { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 900ms cubic-bezier(0.77, 0, 0.175, 1); }
.day--live .day__ch.is-on .day__photo { clip-path: inset(0 round var(--radius)); }
.day--live .day__ch.was-on .day__photo { clip-path: inset(0 0 100% 0 round var(--radius)); }
.day--live .day__photo img { transform: scale(1.2); transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1); }
.day--live .day__ch.is-on .day__photo img { transform: scale(1); }
.day--live .day__text > * { opacity: 0; transform: translateY(22px); transition: opacity 400ms ease, transform 600ms var(--ease-out); }
.day--live .day__ch.is-on .day__text > * { opacity: 1; transform: none; transition-delay: calc(300ms + var(--k, 0) * 90ms); }
.day__text > :nth-child(2) { --k: 1; }
.day__text > :nth-child(3) { --k: 2; }
.day__text > :nth-child(4) { --k: 3; }

@media (max-width: 860px) {
  .day { --glow-a: 0.14; --sun-x: 50%; --sun-y: 0%; }
  .day__pin { padding-block: 80px; }
  .day__grid { grid-template-columns: 1fr; gap: 40px; }
  .day__dial { display: none; }
  .day__ch { grid-template-columns: 1fr; gap: 18px; }
  .day__photo { aspect-ratio: 4 / 3; }
}

/* ---------- La comanda sale de la impresora ---------- */
.printer { position: relative; display: grid; justify-items: center; justify-self: center; width: min(100%, 440px); padding-top: 14px; }
.printer__slot {
  position: absolute;
  top: 0;
  left: -22px;
  right: -22px;
  z-index: 2;
  height: 22px;
  border-radius: 8px;
  background: linear-gradient(#2b3a31, #1a241e);
  box-shadow: inset 0 -6px 0 #0b110d, 0 10px 18px -8px rgba(0, 0, 0, 0.7);
}
@media (max-width: 560px) { .printer__slot { left: -6px; right: -6px; } }
.printer__slot::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: #050806; }
html.print-on .printer .ticket.reveal { opacity: 1; transform: none; transition: none; clip-path: inset(100% 0 0 0); translate: 0 -100%; }
html.print-on .printer.is-printed .ticket.reveal { animation: print-out 1700ms steps(14, end) 200ms both, settle 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1900ms both; }
@keyframes print-out {
  from { clip-path: inset(100% 0 0 0); translate: 0 -100%; }
  to { clip-path: inset(0 0 0 0); translate: 0 0; }
}
@keyframes settle {
  from { clip-path: inset(0 0 0 0); translate: 0 0; rotate: 0deg; }
  to { clip-path: inset(-60px); translate: 0 0; rotate: 1.2deg; }
}
@media (prefers-reduced-motion: reduce) {
  .js .printer .ticket.reveal, .js .printer .ticket.reveal.is-in { clip-path: none; translate: none; animation: none; rotate: 1.2deg; }
}

/* ---------- Las polaroids caen desde arriba y la cinta se pega después ---------- */
.js:not(.is-embed) .polaroid.reveal { opacity: 0; transform: translateY(-150px) rotate(calc(var(--r, 0deg) * 6)) scale(1.08); transition: opacity 350ms ease, transform 950ms cubic-bezier(0.34, 1.45, 0.64, 1); transition-delay: calc(var(--d, 0) * 170ms); }
.js:not(.is-embed) .polaroid.reveal.is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.js:not(.is-embed) .polaroid::before { transition: opacity 250ms ease, scale 350ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(750ms + var(--d, 0) * 170ms); }
.js:not(.is-embed) .polaroid.reveal:not(.is-in)::before { opacity: 0; scale: 1.6 1; }
@media (prefers-reduced-motion: reduce) {
  .js .polaroid.reveal { transition: opacity 300ms ease; transform: rotate(var(--r, 0deg)); }
}

/* ---------- La carta, impresa ----------
   Una hoja de papel crema sobre la mesa oscura: las tres partes del día a la vez, con puntos hasta el precio. */
.menu { padding-block: 104px 120px; }
.paper {
  --paper: #efe6d2;
  --paper-ink: #2a2219;
  --paper-muted: #66543f;
  --paper-red: #8a3f12;
  position: relative;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 72px) clamp(24px, 4vw, 44px);
  border-radius: 4px;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(120, 86, 40, 0.1), transparent 70%),
    var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 50px 90px -40px rgba(0, 0, 0, 0.85);
}
.js .paper.reveal { transform: translateY(40px) rotate(-1.4deg); }
.js .paper.reveal.is-in { transform: rotate(-0.35deg); }
.paper ::selection { background: var(--paper-ink); color: var(--paper); }
.paper :focus-visible { outline-color: var(--paper-red); }
.paper__head { text-align: center; padding-bottom: 22px; border-bottom: 4px double rgba(42, 34, 25, 0.5); }
.paper__title { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; }
.paper__jump { display: none; }
.paper__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
.paper__col { padding: 28px 28px 8px; }
.paper__col + .paper__col { border-left: 1.5px dashed rgba(42, 34, 25, 0.3); }
.paper__col:first-child { padding-left: 0; }
.paper__col:last-child { padding-right: 0; }
.paper__section { font-family: "Caveat", cursive; font-size: 38px; font-weight: 700; line-height: 1; color: var(--paper-red); }
.paper__note { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--paper-muted); }
.paper__dishes { display: grid; gap: 16px; margin-top: 22px; }
.paper__line { display: flex; align-items: baseline; gap: 6px; font-weight: 600; line-height: 1.3; }
.paper__dish { min-width: 0; }
.paper__dots { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(42, 34, 25, 0.38); transform: translateY(-4px); }
.paper__price { flex: none; font-variant-numeric: tabular-nums; }
.paper__desc { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--paper-muted); }
.paper__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 28px; padding-top: 16px; border-top: 1.5px dashed rgba(42, 34, 25, 0.3); font-size: 14px; color: var(--paper-muted); }
.paper__sign { font-family: "Caveat", cursive; font-size: 30px; font-weight: 700; color: var(--paper-ink); }
/* Cada columna se "escribe" cuando la hoja aparece */
.js .paper.is-in .paper__col { animation: col-write 900ms var(--ease-out) both; animation-delay: calc(250ms + var(--d, 0) * 140ms); }
@keyframes col-write { from { clip-path: inset(0 0 100% 0); opacity: 0.3; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (max-width: 860px) {
  .menu { padding-block: 64px 80px; }
  .paper__cols { grid-template-columns: 1fr; }
  .paper__col, .paper__col:first-child, .paper__col:last-child { padding: 24px 0 8px; }
  .paper__col + .paper__col { border-left: 0; border-top: 1.5px dashed rgba(42, 34, 25, 0.3); }
  /* Saltos rápidos a cada parte de la carta */
  .paper__jump { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .paper__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(42, 34, 25, 0.08); font-size: 15px; font-weight: 600; text-decoration: none; }
}

/* ---------- La casa: polaroids sujetas con cinta ---------- */
.story { padding-block: 112px; background: var(--green); color: var(--on-green); overflow: clip; }
.story__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.story__copy p { margin-top: 20px; max-width: 46ch; color: rgba(238, 240, 233, 0.86); font-size: 1.0625rem; }
.story__wall { display: flex; justify-content: center; align-items: flex-start; padding: 24px 0 8px; }
.polaroid {
  position: relative;
  flex: 0 1 260px;
  padding: 12px 12px 0;
  background: #f7f2e7;
  box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r, 0deg));
}
.polaroid + .polaroid { margin-left: -36px; }
.polaroid:nth-child(2) { margin-top: 56px; z-index: 1; }
.polaroid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.polaroid__cap { padding: 10px 4px 14px; font-family: "Caveat", cursive; font-size: 23px; font-weight: 600; line-height: 1.1; text-align: center; color: #2a2219; text-wrap: balance; }
/* Cinta de carrocero arriba */
.polaroid::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  translate: -50% 0;
  rotate: -4deg;
  background: rgba(240, 222, 172, 0.72);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.js .polaroid.reveal { transform: translateY(30px) rotate(calc(var(--r, 0deg) * 2.5)); }
.js .polaroid.reveal.is-in { transform: rotate(var(--r, 0deg)); }
@media (hover: hover) and (pointer: fine) {
  .polaroid { transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
  .js .polaroid.reveal.is-in:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 2; }
}
@media (max-width: 860px) {
  .story { padding-block: 72px; }
  .story__grid { grid-template-columns: 1fr; gap: 32px; }
  /* En el móvil, las fotos en fila y se deslizan con el dedo */
  .story__wall { justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 28px 16px 20px; scrollbar-width: none; }
  .story__wall::-webkit-scrollbar { display: none; }
  .polaroid { flex: 0 0 72%; scroll-snap-align: center; }
  .polaroid + .polaroid { margin-left: 0; }
  .polaroid:nth-child(2) { margin-top: 0; }
}

/* ---------- Reservas: la comanda ---------- */
.booking { padding-block: 112px; }
.booking__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.booking__copy p { margin-top: 20px; color: var(--muted); max-width: 40ch; }
.booking__copy a { color: var(--ink); font-weight: 600; }
.ticket {
  --t-ink: #2a2219;
  --t-muted: #66543f;
  color-scheme: light;
  display: grid;
  gap: 18px;
  width: min(100%, 440px);
  justify-self: center;
  padding: 34px 30px 36px;
  background: #f3ecdc;
  color: var(--t-ink);
  /* Bordes de arriba y abajo mordidos, como un tique arrancado del talonario */
  -webkit-mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 50% 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 50% 100% / 20px 51% repeat-x;
          mask: radial-gradient(circle 7px at 50% 0, #0000 97%, #000) 50% 0 / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, #0000 97%, #000) 50% 100% / 20px 51% repeat-x;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}
.js .ticket.reveal { transform: translateY(40px) rotate(4deg); }
.js .ticket.reveal.is-in { transform: rotate(1.2deg); }
.ticket ::selection { background: var(--t-ink); color: #f3ecdc; }
.ticket__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed rgba(42, 34, 25, 0.35); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.ticket__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-muted); }
.field input, .field select {
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid rgba(42, 34, 25, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--t-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
}
.field select option, .field select optgroup { color: #2a2219; background: #f3ecdc; }
.field input:focus, .field select:focus { outline: none; border-bottom-color: #8a3f12; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid #8a3f12; outline-offset: 4px; }
.field [aria-invalid="true"] { border-bottom-color: #a12a12; }
.field__error { color: #a12a12; font-size: 14px; font-weight: 600; }
.field__error:empty { display: none; }
.btn--ink { width: 100%; margin-top: 6px; border-radius: 6px; background: var(--t-ink); color: #f3ecdc; }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover { background: #3d3226; } }
.booking__status { font-weight: 600; }
.booking__status:empty { display: none; }
.booking__status.is-ok { padding: 14px 16px; border: 2px dashed rgba(42, 34, 25, 0.35); border-radius: 6px; }
@media (max-width: 860px) {
  .booking { padding-block: 72px; }
  .booking__inner { grid-template-columns: 1fr; gap: 40px; }
  .ticket { padding: 30px 20px 32px; }
}

/* ---------- Visítanos: la pizarra de la puerta ---------- */
.door { padding-block: 32px 120px; }
.door__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.door__board {
  padding: clamp(26px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border: 12px solid #6f4e2e;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    radial-gradient(90% 70% at 90% 100%, rgba(255, 255, 255, 0.05), transparent 60%),
    #1e2a22;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 40px 70px -35px rgba(0, 0, 0, 0.8);
  color: #f3efe4;
  font-family: "Caveat", cursive;
}
.door__title { font-family: "Caveat", cursive; font-size: clamp(3.2rem, 6vw, 4.75rem); font-weight: 700; line-height: 0.9; }
.door__now { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 6px 14px; border-radius: 999px; background: rgba(243, 239, 228, 0.08); font-family: var(--font); font-size: 15px; font-weight: 600; }
.door__now::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #d96a4a; }
.door__now.is-open::before { background: #7fcf8f; box-shadow: 0 0 0 4px rgba(127, 207, 143, 0.18); }
.door__hours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 28px; margin-top: 24px; }
.door__hours div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 4px 28px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed rgba(243, 239, 228, 0.18); }
.door__hours dt { font-size: 29px; font-weight: 700; line-height: 1.1; }
.door__hours dd { font-size: 26px; font-weight: 600; line-height: 1.15; color: rgba(243, 239, 228, 0.84); }
.door__hours .is-today dt { color: var(--accent); }
.door__hours .is-today dt::after { content: "hoy"; display: inline-block; margin-left: 10px; padding: 0 9px; border: 2px solid currentColor; border-radius: 999px; font-size: 0.62em; line-height: 1.3; vertical-align: 0.2em; }
.door__street { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
.door__info address p:not(.door__street) { margin-top: 6px; color: var(--muted); font-size: 1.0625rem; }
.door__metro { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 600; }
.metro { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d1283a; color: #fff; font-size: 15px; font-weight: 800; }
.door__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.door__actions .btn i { font-size: 19px; }
@media (max-width: 860px) {
  .door { padding-block: 16px 80px; }
  .door__grid { grid-template-columns: 1fr; gap: 36px; }
  .door__hours { grid-template-columns: 1fr; }
  .door__hours div { grid-template-columns: 1fr; }
  .door__actions .btn { flex: 1 1 100%; }
}

/* ---------- Pie: el nombre en grande ---------- */
.footer { padding-block: 24px 112px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__word { font-family: var(--font-display); font-size: clamp(4rem, 15vw, 13rem); font-weight: 700; line-height: 0.85; letter-spacing: -0.05em; white-space: nowrap; color: var(--surface-2); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; color: var(--muted); font-size: 15px; }
.footer__row a { color: var(--ink); }

/* Asistente flotante */
.launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--on-green);
  font: inherit;
  font-weight: 600;
  box-shadow: 0 16px 40px -12px rgba(10, 20, 14, 0.55);
  cursor: pointer;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.launcher i { font-size: 24px; }
.launcher:active { transform: scale(0.96); }
.launcher[aria-expanded="true"] { opacity: 0; transform: scale(0.9); pointer-events: none; }
.launcher { background: var(--accent); color: var(--accent-ink); }

/* .chat (chat.css) pone height: 100%; aquí se sube la especificidad para mandar sobre él */
.assistant-panel.chat,
.assistant-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 61;
  width: min(380px, calc(100vw - 32px));
  height: min(600px, calc(100dvh - 40px));
  border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(10, 20, 14, 0.5);
  transform-origin: bottom right;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), display 220ms allow-discrete;
}
@starting-style {
  .assistant-panel { opacity: 0; transform: scale(0.94) translateY(8px); }
}
.assistant-panel[hidden] { display: none; opacity: 0; transform: scale(0.96) translateY(6px); transition-duration: 150ms; }
@media (max-width: 480px) {
  .assistant-panel.chat { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100dvh - 16px); }
}
/* Aviso de "próximamente": panel corto, a la altura de su contenido */
.assistant-panel.chat.assistant-panel--soon { height: auto; }
.soon { display: grid; justify-items: start; gap: 10px; padding: 24px 20px 22px; }
.soon__icon { font-size: 30px; color: var(--chat-accent); }
.soon__title { font-weight: 700; font-size: 20px; }
.soon p:not(.soon__title) { color: var(--chat-muted); font-size: 15px; line-height: 1.5; }
.soon__action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--chat-accent);
  color: var(--chat-accent-ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

/* Aparición al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Dentro del portafolio (vista previa) se muestra todo sin animación */
.is-embed .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.is-embed { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 300ms ease; }
  .paper__col { animation: none !important; }
  .js .paper.reveal, .js .polaroid.reveal, .js .ticket.reveal { transform: none; }
  .assistant-panel, .launcher { transition: opacity 150ms ease; }
  @starting-style { .assistant-panel { transform: none; } }
}

/* Zonas de toque de 44 px en enlaces de texto (teléfono, barra de demo, logo, pie) sin cambiar cómo se ven */
a[href^="tel:"]:not(.btn), .demo-bar a, .nav .logo, .footer a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
.nav .logo { padding-block: 5px; margin-block: -5px; }

/* Aviso de demo: las reservas son un extra de pago */
.booking__extra {
  margin-top: 14px;
  padding: 8px 12px;
  border: 2px dashed currentColor;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0.85;
}
/* Dentro del escaparate del portafolio no se muestra el botón del asistente (aún no se vende) */
.is-embed .launcher { display: none; }

/* Botón fijo de la demo: lleva a pedir una web así en AtelierWeb */
.demo-cta {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 60;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  max-width: calc(100vw - 40px);
  padding: 8px 18px;
  border-radius: 12px;
  background: #0e3b2e;
  color: #f1efe9;
  font-size: 13px;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 16px 40px -12px rgba(10, 20, 14, 0.55), inset 0 0 0 2px rgba(217, 171, 46, 0.5);
}
.demo-cta strong { color: #d9ab2e; font-size: 16px; }
.is-embed .demo-cta { display: none; }
@media (max-width: 480px) {
  .demo-cta { left: 8px; bottom: 8px; max-width: calc(100vw - 16px); padding: 8px 14px; }
}

/* Portada viva (hero.js): vapor de cocina sobre la foto y titular palabra a palabra */
.hero__img { will-change: transform; }
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .word > span { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .hero__steam { display: none; } }

/* ---------- Movimiento con intención (ronda 1) ----------
   La pizarra de la portada se inclina un poco con el ratón (hero.js). */
.chalk { transform: rotate(-2.5deg) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (hover: hover) and (pointer: fine) {
  .chalk:hover { transform: rotate(-1deg) translateY(-4px) perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

/* Dentro del escaparate del portafolio: todo quieto y en su sitio */
.is-embed .paper, .is-embed .polaroid, .is-embed .ticket { transform: none !important; }
.is-embed .paper__col { animation: none !important; }

/* ---------- Paso de página ----------
   La carta llega como una hoja que se levanta desde la mesa: gira desde su borde de arriba
   y se pone de pie al bajar (atado al scroll donde el navegador lo permite). */
.menu { perspective: 1800px; }
@supports (animation-timeline: view()) {
  .js .paper.reveal {
    opacity: 1;
    transition: none;
    transform-origin: 50% 0;
    animation: page-turn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }
  @keyframes page-turn {
    from { transform: rotateX(-62deg) translateY(60px) scale(0.92); filter: brightness(0.55); }
    to { transform: rotate(-0.35deg); filter: none; }
  }
}
.is-embed .paper, .is-embed .ticket { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .js .paper.reveal, .js .ticket.reveal { animation: none !important; } }

/* La invitación de AtelierWeb no tapa la portada: aparece cuando ya has bajado (hero.js) */
.demo-cta { transition: opacity 300ms ease, translate 300ms var(--ease-out); }
.demo-cta.is-hidden { opacity: 0; translate: 0 12px; pointer-events: none; }

/* ---------- La baraja (baraja.js) ----------
   Los platos son cartas del mismo papel que la carta impresa, apiladas en abanico sobre la mesa oscura.
   La de arriba se arrastra (se inclina hacia donde va) y, si se suelta lejos, sale volando y vuelve al fondo.
   Tocarla le da la vuelta: descripción y precio. Sin JS se ven todas en fila, por delante. */
.deal { padding-block: clamp(72px, 10vw, 128px); overflow: clip; }
.deal__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.deal__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5.6vw, 72px); line-height: 0.95; letter-spacing: -0.02em; font-stretch: 80%; }
.deal__copy > p { max-width: 38ch; color: var(--muted); }
.deal__ctrls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.deal__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.deal__btn:active { transform: scale(0.97); }
.deal__btn--main { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.deal__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) { .deal__btn:not(.deal__btn--main):hover { background: var(--surface-2); } }
.deal__count { margin-top: 18px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }

.deck { --cw: min(340px, 78vw); list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; overflow-x: auto; }
.dcard { flex: 0 0 var(--cw); aspect-ratio: 5 / 7; perspective: 1400px; }
.dcard__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(0.34, 1.3, 0.64, 1); }
.dcard.is-flipped .dcard__in { transform: rotateY(180deg); }
.dcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  border-radius: 10px;
  backface-visibility: hidden;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(50% 50% at 90% 90%, rgba(120, 86, 40, 0.12), transparent 70%),
    #efe6d2;
  color: #2a2219;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(42, 34, 25, 0.12) inset;
}
.dcard__face::after { /* filete de la carta */
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(138, 63, 18, 0.35);
  border-radius: 6px;
  pointer-events: none;
}
.dcard__back { transform: rotateY(180deg); justify-content: space-between; }
.dcard__mid { display: flex; flex-direction: column; gap: 14px; }
.dcard__when { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a3f12; }
.dcard__name { margin: auto 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.015em; font-stretch: 85%; }
.dcard__name--sm { margin: 0; font-size: 24px; }
.dcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.dcard__brand { font-family: "Caveat", cursive; font-size: 24px; color: #66543f; }
.dcard__tag { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #8a3f12; font-variant-numeric: tabular-nums; }
.dcard__desc { margin: 0; font-size: 17px; line-height: 1.45; color: #4b3d2d; }
.dcard__desc--note { font-size: 15px; color: #66543f; }
.dcard__price { margin: 6px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: #8a3f12; }

/* Con JS: las cartas se apilan en abanico; la de arriba se arrastra */
.deck.is-live { position: relative; display: block; overflow: visible; height: calc(var(--cw) * 1.4 + 40px); }
.deck.is-live .dcard {
  position: absolute;
  top: 20px;
  left: 50%;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform 520ms cubic-bezier(0.34, 1.25, 0.64, 1), opacity 300ms ease;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.deck.is-live .dcard.is-top { cursor: grab; }
.deck.is-live .dcard.is-drag { cursor: grabbing; transition: none; }
.deck.is-live .dcard.is-gone { opacity: 0; }
.deck.is-live .dcard.is-hidden { opacity: 0; pointer-events: none; }
.deck.is-live .dcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 12px; }

@media (max-width: 860px) {
  .deal__grid { grid-template-columns: 1fr; }
  .deck.is-live { --cw: min(300px, 74vw); }
}
@media (prefers-reduced-motion: reduce) {
  .dcard__in, .deck.is-live .dcard { transition: none; }
}
.deal__more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.deal__more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.deal__more a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* La invitación de AtelierWeb se aparta mientras se juega con la baraja (baraja.js) */
.demo-cta.is-tucked { opacity: 0; translate: 0 12px; pointer-events: none; }
/* Lo que oye el lector de pantalla al girar o pasar cartas (no se ve) */
.deal__say { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Móvil: las cartas justo debajo del título y los botones debajo de las cartas, todo a la vista */
@media (max-width: 860px) {
  .deal__copy { display: contents; }
  .deal__grid { gap: 0; }
  .deal__title { order: 1; }
  .deal__copy > p:not(.deal__count):not(.deal__more):not(.deal__say) { order: 2; margin: 0 0 4px; }
  .deck.is-live { order: 3; height: calc(var(--cw) * 1.4 + 28px); }
  .deal__ctrls { order: 4; margin-top: 16px; justify-content: center; }
  .deal__count { order: 5; text-align: center; margin-top: 12px; }
  .deal__more { order: 6; justify-content: center; }
}
/* Carta con foto del plato: la foto va pegada arriba, como en una carta de papel; sin foto, la carta queda como siempre */
.dcard__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 14px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(42, 34, 25, 0.16), 0 6px 14px -8px rgba(42, 34, 25, 0.45); pointer-events: none; -webkit-user-drag: none; }
.dcard--photo .dcard__name { margin: 16px 0 auto; font-size: clamp(24px, 2.6vw, 30px); }
/* La invitación apartada tampoco se puede pulsar ni enfocar mientras no se ve */
.demo-cta.is-tucked { visibility: hidden; transition: opacity 300ms ease, translate 300ms var(--ease-out), visibility 0s linear 300ms; }