/* dish.css — the dish pages (/dishes/, /es/platos/). Mobile first.
   Loaded by these pages alone, on top of v2.css (nav, footer, buttons, fonts).
   Each page sets its own palette on .dish: --d-bg, --d-ink, --d-accent, --d-accent-2. */

.dish {
  --d-soft: color-mix(in srgb, var(--d-accent) 9%, var(--d-bg));
  --d-rule: color-mix(in srgb, var(--d-ink) 14%, transparent);
  --d-gutter: 1.25rem;
  background: var(--d-bg);
  color: var(--d-ink);
  font-family: var(--font-body);
  overflow-x: clip;
}
.dish h1, .dish h2, .dish h3 {
  font-family: var(--font-display);
  font-variant-ligatures: none;
  font-weight: 400;
  color: var(--d-ink);
  letter-spacing: 0;
}
.dish h2 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.15; margin: 0 0 1rem; }
.dish h3 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .4rem; }
.dish p { line-height: 1.7; margin: 0 0 1rem; color: inherit; }
/* Boston Angel carries swash ligatures and contextual alternates that turn
   "st" and "ss" into flourishes: off wherever the display face is used here */
.dish h1, .dish h2, .dish h3, .d-number strong, .fold-count, .clock-days, .d-pair figcaption,
.d-tap b, .swipe figcaption b, .spots-out b, .d-review blockquote, .more b {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "swsh" 0;
}
@media (max-width: 768px) {
  /* v2.css shows the fixed order bar up to 768px; the hero has to end above it */
  .dish { --d-barh: calc(66px + env(safe-area-inset-bottom, 0px)); }
}
.dish a { color: inherit; }
.d-wrap { padding: 0 var(--d-gutter); max-width: 40rem; margin: 0 auto; }
.d-sec { padding: 3.25rem 0; }
.d-sec + .d-sec { border-top: 1px solid var(--d-rule); }
.d-lead { font-size: 1.125rem; }

/* ── buttons ─────────────────────────────────────────────── */
.dish .d-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.25rem; border-radius: 14px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  background: var(--d-accent); color: #fff; border: 1.5px solid var(--d-accent);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dish .d-btn--ghost { background: transparent; color: var(--d-ink); border-color: currentColor; }
.dish .d-btn:focus-visible, .d-tap:focus-visible { outline: 3px solid var(--d-accent-2); outline-offset: 2px; }
@media (hover: hover) {
  .dish .d-btn:hover { background: var(--d-ink); border-color: var(--d-ink); color: #fff; }
}

/* ── hero ─────────────────────────────────────────────────── */
.dh { position: relative; }
.dh h1 {
  font-size: clamp(2.6rem, 11.5vw, 4.4rem);
  line-height: 1.3;
  margin: 0;
}
.dh-sub { font-size: 1.05rem; line-height: 1.9; margin: 0 0 1rem; }
.dh-btns { display: grid; gap: .6rem; }

/* bleed: the photo fills the first screen, the copy sits on it in three zones */
.dh--bleed {
  min-height: calc(100svh - var(--d-navh, 72px));
  display: flex;
}
.dh--bleed picture, .dh--bleed .dh-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.dh--bleed .dh-photo { object-fit: cover; object-position: var(--d-focus, 50% 50%); }
.dh--bleed::before {
  /* veil by zones: soft at the top for the title, clear in the middle, denser low */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--veil-top) 0%, transparent 30%,
              transparent 40%, var(--veil-low) 62%, var(--veil-low) 100%);
}
.dh--light { --veil-top: rgba(247, 240, 225, .4); --veil-low: rgba(247, 240, 225, .9); color: var(--d-ink); }
.dh--dark  { --veil-top: rgba(20, 16, 10, .38);  --veil-low: rgba(20, 16, 10, .8);  color: #fff; }
.dh--dark .dh-sub { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dh--dark h1 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 22px rgba(0,0,0,.35); }
.dh--light h1 { text-shadow: 0 1px 1px rgba(255,255,255,.6), 0 3px 18px rgba(247,240,225,.9); }
.dish .dh--dark .d-btn--ghost { color: #fff; }
.dh-text {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.9rem var(--d-gutter) calc(1.5rem + var(--d-barh, 0px));
}

/* stage: a landscape photo is never cropped to a strip — it keeps its shape */
.dh--stage { padding: 1.9rem 0 calc(1.5rem + var(--d-barh, 0px)); }
.dh--stage .dh-top { padding: 0 var(--d-gutter); }
.dh--stage figure { margin: 1.1rem 0; }
/* edge to edge, no gaps: a 4:3 window onto the photo, cropped around its focus point.
   Square and portrait photos used to be shown whole at 30svh, which left them small
   with empty space on both sides. */
.dh--stage .dh-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 30svh;
  object-fit: cover; object-position: var(--d-focus, 50% 50%); display: block; }
.dh--stage .dh-low { padding: 0 var(--d-gutter); }

/* a landscape photo leaves less room: on phones the stage keeps one button, and on
   short screens drops the line under the title rather than push the button under the bar */
@media (max-width: 768px) {
  .dh--stage .d-btn--ghost { display: none; }
}
@media (max-width: 768px) and (max-height: 720px) {
  .dh--stage .dh-sub { display: none; }
  .dh--stage .dh-photo { max-height: 26svh; }
}

@media (min-width: 900px) {
  .dh--bleed, .dh--stage {
    min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center;
    gap: 3rem; max-width: 76rem; margin: 0 auto; padding: 3.5rem 2rem;
  }
  .dh--bleed::before { display: none; }
  .dh--bleed picture, .dh--bleed .dh-photo { position: static; }
  .dh--bleed .dh-photo { height: min(78vh, 46rem); border-radius: 22px; }
  .dh--bleed, .dh--dark { color: var(--d-ink); }
  .dh--dark h1, .dh--light h1 { color: var(--d-ink); text-shadow: none; }
  .dish .dh--dark .d-btn--ghost { color: var(--d-ink); }
  .dh--bleed picture { order: 2; }
  .dh-text, .dh--stage .dh-top, .dh--stage .dh-low { padding: 0; }
  .dh-text { justify-content: center; gap: 2.5rem; }
  .dh--stage figure { grid-row: span 2; order: 2; margin: 0; }
  .dh--stage .dh-photo { border-radius: 22px; max-height: none; aspect-ratio: auto; object-fit: fill; }
  .dh-btns { grid-template-columns: 1fr 1fr; max-width: 30rem; }
}

/* ── the short answer ─────────────────────────────────────── */
.d-answer p { font-size: 1.125rem; }
.d-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1.5rem 0 0; }
.d-facts div { background: var(--d-soft); border-radius: 14px; padding: .9rem 1rem; }
.d-facts dt { font-size: .85rem; color: color-mix(in srgb, var(--d-ink) 70%, transparent); margin: 0 0 .2rem; }
.d-facts dd { margin: 0; font-weight: 600; line-height: 1.35; }

/* ── one big number ───────────────────────────────────────── */
.d-number { text-align: center; }
.d-number strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5.5rem, 34vw, 10rem); line-height: 1; color: var(--d-accent);
}
.d-number span { display: block; max-width: 20rem; margin: .5rem auto 0; font-size: 1.05rem; }

/* ── fold: how lamination multiplies layers ───────────────── */
.fold-dough {
  height: 9.5rem; border-radius: 18px; margin: 1.5rem 0 1rem;
  background: repeating-linear-gradient(to bottom,
    var(--d-accent-2) 0 calc(var(--h) / 2), #F2D9A6 calc(var(--h) / 2) var(--h));
  transition: background .5s ease;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.08);
}
.fold-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fold-count { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--d-accent); }
.fold-note { min-height: 3.4rem; margin: .9rem 0 0; }

/* ── side by side (croissant / cornetto) ──────────────────── */
.d-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.d-pair figure { margin: 0; }
.d-pair img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 14px; display: block; }
.d-pair figcaption { font-family: var(--font-display); font-size: 1.4rem; margin: .5rem 0 .25rem; }
.d-pair ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; line-height: 1.5; }
.d-pair li { padding: .45rem 0; border-top: 1px solid var(--d-rule); }

/* ── compare slider ───────────────────────────────────────── */
.cmp { position: relative; border-radius: 18px; overflow: hidden; margin: 1.5rem 0 .75rem; touch-action: pan-y; }
.cmp img { display: block; width: 100%; height: auto; }
.cmp-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; }
.cmp-knob {
  position: absolute; top: 50%; left: var(--x, 50%); width: 2.75rem; height: 2.75rem;
  transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--d-ink);
  display: grid; place-items: center; font-size: 1.1rem; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cmp-tag { position: absolute; bottom: .75rem; padding: .3rem .7rem; border-radius: 10px; background: rgba(255,255,255,.9); font-size: .9rem; font-weight: 600; pointer-events: none; }
.cmp-tag--a { left: .75rem; } .cmp-tag--b { right: .75rem; }

/* ── choose (cup / brioche) ───────────────────────────────── */
.choose-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.d-tap {
  appearance: none; border: 2px solid transparent; background: var(--d-soft);
  border-radius: 16px; padding: .5rem .5rem .8rem; text-align: left; color: inherit;
  font: inherit; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.d-tap img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 11px; display: block; margin-bottom: .6rem; }
.d-tap b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.d-tap[aria-pressed="true"] { border-color: var(--d-accent); background: #fff; }
.choose-out { margin-top: 1rem; min-height: 6rem; }

/* ── bars ─────────────────────────────────────────────────── */
.bars { margin: 1.5rem 0 0; display: grid; gap: 1.4rem; }
.bar-q { font-weight: 600; margin: 0 0 .5rem; }
.bar { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .75rem; margin: .35rem 0; font-size: .95rem; }
.bar i { display: block; height: 1.1rem; border-radius: 6px; background: var(--d-accent); width: 0; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar--b i { background: color-mix(in srgb, var(--d-ink) 30%, transparent); }
.is-in .bar i { width: var(--w); }
.bar small { grid-column: 2; color: color-mix(in srgb, var(--d-ink) 70%, transparent); margin-top: -.15rem; }

/* ── fermentation clock ───────────────────────────────────── */
.clock { background: var(--d-ink); color: var(--d-bg); border-radius: 20px; padding: 1.5rem 1.25rem; margin-top: 1.25rem; }
.clock p { margin: 0; }
.clock-days { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.2; margin: .4rem 0 .8rem !important; color: #fff; }
.clock-track { position: relative; height: .75rem; border-radius: 6px; background: rgba(255,255,255,.15); margin: 1.25rem 0 .5rem; }
.clock-track i { position: absolute; top: 0; bottom: 0; left: 40%; right: 0; border-radius: 6px; background: var(--d-accent-2); }
.clock-scale { display: flex; justify-content: space-between; font-size: .85rem; opacity: .8; }

/* ── carousel (the four pinse) ────────────────────────────── */
.swipe {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: .75rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--d-gutter) .5rem;
  margin: 1.25rem calc(var(--d-gutter) * -1) 0; scrollbar-width: none;
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * { scroll-snap-align: start; }
.swipe figure { margin: 0; }
.swipe img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; display: block; }
.swipe figcaption { padding: .6rem .1rem 0; }
.swipe figcaption b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; display: block; }
.swipe figcaption span { font-size: .95rem; line-height: 1.5; display: block; }
.swipe figcaption em { font-style: normal; font-weight: 600; color: var(--d-accent); }
@media (min-width: 900px) { .swipe { grid-auto-columns: 30%; } }

/* ── hotspots ─────────────────────────────────────────────── */
.spots { position: relative; margin: 1.25rem 0 .75rem; }
.spots img { width: 100%; height: auto; display: block; border-radius: 18px; }
.spot {
  position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: transparent; display: grid; place-items: center;
}
.spot::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.45), 0 2px 8px rgba(0,0,0,.35); transition: transform .2s ease; }
.spot[aria-pressed="true"]::before { background: var(--d-accent); transform: scale(1.25); }
.spots-out { min-height: 5.5rem; background: var(--d-soft); border-radius: 14px; padding: 1rem 1.1rem; }
.spots-out b { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; display: block; margin-bottom: .2rem; }
.spots-out p { margin: 0; }

/* ── strip of real photos ─────────────────────────────────── */
.strip figure { margin: 0; }
.strip img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; }
.strip figcaption { font-size: .9rem; padding-top: .45rem; line-height: 1.45; }

/* ── the maker ────────────────────────────────────────────── */
.maker { display: grid; gap: 1rem; }
.maker img { width: 100%; height: auto; border-radius: 18px; display: block; }
@media (min-width: 720px) { .maker { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ── inside / allergens ───────────────────────────────────── */
.d-panels { display: grid; gap: .75rem; }
@media (min-width: 720px) { .d-panels { grid-template-columns: 1fr 1fr; } }
.d-panel { background: var(--d-soft); border-radius: 16px; padding: 1.15rem 1.25rem; }
.d-panel h3 { font-size: 1.3rem; }
.d-panel p { margin: 0; }
.d-panel ul { margin: 0; padding: 0 0 0 1.1rem; line-height: 1.7; }

/* ── review ───────────────────────────────────────────────── */
.d-review blockquote {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.35;
}
.d-review figcaption { margin-top: 1rem; font-size: .95rem; }
.d-review + .d-review { margin-top: 2.25rem; }

/* ── faq ──────────────────────────────────────────────────── */
.d-faq details { border-bottom: 1px solid var(--d-rule); }
.d-faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-weight: 600; line-height: 1.45; min-height: 44px;
}
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after { content: "+"; position: absolute; right: .25rem; top: 1rem; font-size: 1.4rem; line-height: 1; color: var(--d-accent); }
.d-faq details[open] summary::after { content: "–"; }
.d-faq details p { margin: 0 0 1.2rem; }

/* ── visit ────────────────────────────────────────────────── */
.d-visit { background: var(--d-ink); color: var(--d-bg); }
.d-visit h2 { color: #fff; }
.d-visit img { width: 100%; height: auto; border-radius: 18px; display: block; margin: 0 0 1.5rem; }
.d-visit dl { display: grid; gap: .9rem; margin: 0 0 1.5rem; }
.d-visit dt { opacity: .75; font-size: .9rem; }
.d-visit dd { margin: 0; font-size: 1.1rem; }
.dish .d-visit .d-btn { background: var(--d-bg); color: var(--d-ink); border-color: var(--d-bg); }
.dish .d-visit .d-btn--ghost { background: transparent; color: var(--d-bg); border-color: currentColor; }

/* ── more dishes ──────────────────────────────────────────── */
.more a { text-decoration: none; }
.more img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
.more b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.25; padding-top: .5rem; }

.d-crumb { font-size: .9rem; padding: .9rem var(--d-gutter) 0; max-width: 76rem; margin: 0 auto; }
.d-crumb a { text-decoration: none; opacity: .8; }

/* ── reveal on scroll ─────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .bar i, .fold-dough { transition: none; }
}

/* ── pour (affogato): the espresso goes in from the top ───── */
.pour { position: relative; border-radius: 18px; overflow: hidden; margin: 1.5rem 0 1rem; }
.pour img { display: block; width: 100%; height: auto; }
.pour-after { position: absolute; inset: 0; clip-path: inset(0 0 calc(100% - var(--p, 0%)) 0); }
.pour-after img { height: 100%; object-fit: cover; }
.pour.is-pouring .pour-after { transition: clip-path 1.8s cubic-bezier(.45,.05,.3,1); }
.pour-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pour-state { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }

/* ── coffee clock: what an Italian would order now ────────── */
.cc { background: var(--d-ink); color: var(--d-bg); border-radius: 20px; padding: 1.4rem 1.25rem 1.25rem; margin-top: 1.25rem; }
.cc-time { font-family: var(--font-display); font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1.1; color: #fff; margin: 0 0 .2rem !important; }
.cc-pick { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; color: var(--d-accent-2); margin: 1rem 0 .4rem !important; }
.cc input[type=range] { width: 100%; margin: 1.1rem 0 .25rem; accent-color: var(--d-accent-2); height: 2.75rem; }
.cc-scale { display: flex; justify-content: space-between; font-size: .85rem; opacity: .75; }

/* ── quiz (croissants) ────────────────────────────────────── */
.quiz { margin-top: 1.25rem; }
.quiz-q { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; margin: 0 0 .9rem !important; }
.quiz-a { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.quiz-a .d-btn { min-height: 3.5rem; }
.quiz-steps { display: flex; gap: .35rem; margin-bottom: 1rem; }
.quiz-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--d-rule); }
.quiz-steps i.on { background: var(--d-accent); }
.quiz-res { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center; background: var(--d-soft); border-radius: 16px; padding: .75rem; }
.quiz-res img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.quiz-res b { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; display: block; line-height: 1.2; }
.quiz-res p { margin: .3rem 0 0; font-size: .95rem; line-height: 1.5; }
.quiz-again { margin-top: .75rem; background: none; border: 0; padding: .6rem 0; font: inherit; color: var(--d-accent); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* ── oven status + timeline (sfogliatella) ────────────────── */
.oven { display: flex; align-items: center; gap: .9rem; background: var(--d-soft); border-radius: 16px; padding: 1rem 1.1rem; margin-top: 1.25rem; }
.oven i { flex: none; width: .85rem; height: .85rem; border-radius: 50%; background: var(--d-accent); }
.oven.is-off i { background: color-mix(in srgb, var(--d-ink) 35%, transparent); }
.oven p { margin: 0; font-weight: 600; line-height: 1.45; }
.tl { list-style: none; margin: 1.75rem 0 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--d-rule); }
.tl li { position: relative; padding: 0 0 1.6rem; }
.tl li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--d-bg); border: 2px solid var(--d-accent); }
.tl b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.tl span { display: block; font-size: .85rem; color: color-mix(in srgb, var(--d-ink) 70%, transparent); margin-bottom: .2rem; }
.tl p { margin: .2rem 0 0; }

/* ── countdown (zeppole) ──────────────────────────────────── */
.count { text-align: center; background: var(--d-ink); color: var(--d-bg); border-radius: 20px; padding: 1.6rem 1.25rem; margin-top: 1.25rem; }
.count strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(5rem, 30vw, 8rem); line-height: 1; color: var(--d-accent-2); }
.count p { margin: .5rem auto 0; max-width: 22rem; }

.quiz-q, .cc-time, .cc-pick, .pour-state, .quiz-res b, .tl b, .count strong {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "swsh" 0;
}
@media (prefers-reduced-motion: reduce) { .pour.is-pouring .pour-after { transition: none; } }

/* ═════════════════════════════════════════════════════════════
   Desktop. The phone layout is one column; from 1000px each section
   becomes two: the heading and its lead sit left (and stay in view while
   the module scrolls past), the content takes the wider right column.
   ═════════════════════════════════════════════════════════════ */
.d-row + .d-row { margin-top: 2.25rem; }
.d-stack .d-head, .d-split .d-head { margin-bottom: 1.25rem; }

@media (min-width: 900px) {
  .dh h1 { font-size: clamp(3.4rem, 4.6vw, 4.8rem); line-height: 1.15; }
  .dh-sub { font-size: 1.15rem; max-width: 34rem; }
  .dh-btns { grid-template-columns: auto auto; justify-content: start; max-width: none; }
  .dish .d-btn { white-space: nowrap; padding: 0 1.6rem; }
}

@media (min-width: 1000px) {
  .d-wrap { max-width: 76rem; padding: 0 3rem; }
  .d-sec { padding: 6rem 0; }
  .dish h2 { font-size: clamp(2.5rem, 3.3vw, 3.4rem); }
  .dish p { font-size: 1.0625rem; }
  .d-lead, .d-answer .d-lead { font-size: 1.2rem; }

  .d-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: start; }
  .d-split .d-head { position: sticky; top: calc(var(--d-navh, 72px) + 2.5rem); margin: 0; }
  .d-stack .d-head { max-width: 44rem; margin-bottom: 2.5rem; }

  .d-story .d-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
  .d-story .d-row h2 { margin: 0; }
  .d-row + .d-row { margin-top: 3.5rem; }

  .d-facts { gap: 1rem; margin: 0; }
  .d-facts div { padding: 1.5rem 1.6rem; border-radius: 18px; }
  .d-facts dd { font-size: 1.25rem; }

  /* carousels become rows of cards: nothing hides off-screen on a desktop */
  .d-stack .swipe {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible; margin: 0; padding: 0; gap: 1.5rem;
  }
  .d-stack .swipe.more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-stack .swipe figcaption b, .more b { font-size: 1.5rem; }

  .d-wrap:has(> .d-review + .d-review) { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
  .d-review + .d-review { margin-top: 0; }
  .d-review blockquote { font-size: clamp(2rem, 2.6vw, 2.6rem); }
  .d-wrap > .d-review:only-child { max-width: 52rem; }

  .maker { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4.5rem; }
  .maker img { aspect-ratio: 16 / 10; object-fit: cover; }
  .d-panels { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .d-panel { padding: 1.6rem 1.8rem; }

  .d-visit .d-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: center; }
  .d-visit-photo img { height: min(38rem, 80vh); object-fit: cover; margin: 0; }
  .d-visit .dh-btns { grid-template-columns: auto auto; justify-content: start; }

  .d-pair { gap: 1.5rem; }
  .choose-opts { gap: 1.25rem; }
  .d-number strong { font-size: 11rem; }
}

/* The module figures are <p> elements too: restate their sizes at .dish p strength, or the
   desktop body size (.dish p) shrinks the big numbers to paragraph text. */
.dish .fold-count { font-size: 2.4rem; line-height: 1; margin: 0; }
.dish .clock-days { font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.2; }
.dish .cc-time { font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1.1; }
.dish .cc-pick { font-size: 1.6rem; line-height: 1.25; }
.dish .quiz-q { font-size: 1.6rem; line-height: 1.25; }
.dish .pour-state { font-size: 1.5rem; margin: 0; }
@media (min-width: 1000px) {
  .dish .fold-count { font-size: 3rem; }
  .dish .clock-days { font-size: 3rem; }
  .dish .cc-time { font-size: 4rem; }
  .dish .cc-pick, .dish .quiz-q { font-size: 1.9rem; }
  .fold-dough { height: 12rem; }
}

.d-panel:only-child { grid-column: 1 / -1; }

/* ── choose, text-only variant (schiacciata fillings) ─────── */
.choose-opts.is-text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choose-opts.is-text .d-tap { text-align: center; padding: 1rem .5rem; min-height: 3.5rem; }
.choose-opts.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choose-opts.is-three .d-tap b { font-size: 1.15rem; }

/* ── box builder (cookies) ────────────────────────────────── */
.box { margin-top: 1.25rem; display: grid; gap: .6rem; }
.box-row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .9rem; align-items: center; background: var(--d-soft); border-radius: 16px; padding: .6rem .75rem .6rem .6rem; }
.box-row img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.box-row b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "swsh" 0; }
.box-row span { font-size: .9rem; }
.box-step { display: flex; align-items: center; gap: .35rem; }
.box-step button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--d-ink); background: transparent; color: var(--d-ink); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.box-step output { min-width: 1.5rem; text-align: center; font-weight: 600; }
.box-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--d-ink); color: var(--d-bg); border-radius: 16px; padding: 1rem 1.2rem; margin-top: .4rem; }
.dish .box-total p { margin: 0; }
.dish .box-sum { font-family: var(--font-display); font-size: 2rem; color: #fff; }

/* ── cake planner ─────────────────────────────────────────── */
.plan { background: var(--d-ink); color: var(--d-bg); border-radius: 20px; padding: 1.4rem 1.25rem; margin-top: 1.25rem; }
.dish .plan-day { font-family: var(--font-display); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.15; color: #fff; margin: .3rem 0 .6rem; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "swsh" 0; }
.dish .plan p { margin-bottom: .4rem; }
@media (min-width: 1000px) { .dish .plan-day { font-size: 3.4rem; } }

/* Desktop stage hero: title and line+buttons stacked on the left, the whole photo on the
   right across both rows. Auto-placement had put the buttons beside the title. */
@media (min-width: 900px) {
  .dh--stage { grid-template-rows: auto auto; row-gap: 2rem; }
  .dh--stage .dh-top { grid-column: 1; grid-row: 1; align-self: end; }
  .dh--stage .dh-low { grid-column: 1; grid-row: 2; align-self: start; }
  .dh--stage figure { grid-column: 2; grid-row: 1 / span 2; order: 0; align-self: center; }
}

/* landscape photos in a carousel keep a landscape frame */
.swipe.is-wide img { aspect-ratio: 4 / 3; }
.d-stack .swipe.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── cups (espresso bar): what is in each drink ───────────── */
.cups-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.25rem; }
.cups-tabs .d-tap { padding: .55rem .9rem; min-height: 2.75rem; border-radius: 999px; text-align: center; }
.cups-stage { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: center; margin-top: 1.25rem; }
.cup {
  position: relative; height: 9rem; border: 3px solid var(--d-ink); border-top: 0;
  border-radius: 0 0 2.4rem 2.4rem; overflow: hidden; display: flex; flex-direction: column-reverse;
  background: var(--d-bg);
}
.cup::after { content: ""; position: absolute; right: -1.6rem; top: 1.6rem; width: 1.3rem; height: 2.6rem; border: 3px solid var(--d-ink); border-left: 0; border-radius: 0 1.3rem 1.3rem 0; }
.cup i { display: block; width: 100%; transition: height .5s cubic-bezier(.2,.7,.2,1); }
.cup .l-esp { background: #5B3A22; }
.cup .l-milk { background: #E9D9BD; }
.cup .l-foam { background: #FFFDF7; }
.cup .l-water { background: #9C7A5B; }
.cups-key { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; margin: .4rem 0 0; }
.cups-key span::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--k); border: 1px solid var(--d-rule); }
.dish .cups-name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; margin: 0 0 .3rem; }
@media (prefers-reduced-motion: reduce) { .cup i { transition: none; } }

/* ── breakfast builder ────────────────────────────────────── */
.bf-row { margin-top: 1.1rem; }
.dish .bf-row > p { font-weight: 600; margin: 0 0 .5rem; }
.bf-opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.bf-opts .d-tap { padding: .55rem .85rem; min-height: 2.75rem; border-radius: 999px; }
.bf-total { margin-top: 1.25rem; background: var(--d-ink); color: var(--d-bg); border-radius: 18px; padding: 1.2rem 1.25rem; }
.dish .bf-sum { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; color: #fff; margin: 0 0 .3rem; }
.dish .bf-say { margin: 0; }

/* ── next tray (pizza al taglio) ──────────────────────────── */
.tray { background: var(--d-ink); color: var(--d-bg); border-radius: 20px; padding: 1.4rem 1.25rem; margin-top: 1.25rem; }
.dish .tray-next { font-family: var(--font-display); font-size: clamp(2.2rem, 10vw, 3rem); line-height: 1.15; color: #fff; margin: .3rem 0 .6rem; }
.tray-times { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.tray-times span { padding: .3rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); font-size: .9rem; }
.tray-times span.is-next { background: var(--d-accent-2); border-color: var(--d-accent-2); color: var(--d-ink); font-weight: 600; }
.tray-times span.is-past { opacity: .45; text-decoration: line-through; }

.cups-name, .bf-sum, .tray-next {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "swsh" 0;
}

/* ── hub: /dishes/ and /es/platos/ ───────────────────────── */
.hub-top { padding: 2.25rem 0 .5rem; }
.hub-top .d-wrap { max-width: 76rem; }
.hub-top h1 { font-size: clamp(2.4rem, 10vw, 4.2rem); line-height: 1.2; margin: 0 0 .9rem; }
.hub-top .d-lead { max-width: 38rem; }
.hub-sec { padding: 2.25rem 0; }
.hub-sec .d-wrap { max-width: 76rem; }
.hub-sec h2 { font-size: clamp(1.8rem, 7.5vw, 2.6rem); }
.hub-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1rem; }
@media (min-width: 720px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2rem 1.5rem; } }
.hub-grid a { display: block; text-decoration: none; }
.hub-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; display: block; }
.hub-grid b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
  line-height: 1.25; padding-top: .55rem; overflow-wrap: anywhere;
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0, "swsh" 0; }
.hub-grid em { display: block; font-style: normal; font-size: .95rem; opacity: .75; padding-top: .2rem; }
.dish .hub-menu { display: inline-flex; }
@media (hover: hover) { .hub-grid a:hover b { text-decoration: underline; text-underline-offset: .18em; } }