/* Nikoflor — v3, the split stage (2026-10-17). Tokens from the design system; layout, motion and copy in SPEC.md.
   Phone first; the split arrives at 1000px wide when the window is wider than 5:4. */

:root {
  /* colour — theme "dia" */
  --cal: #fbf7f1;
  --cal-hondo: #f3eadf;
  --linea: #e5d8cc;
  --tinta: #2b1d21;
  --tinta-suave: #6b565b;
  --vino: #5e2e3c;
  --teja: #a04e2c;
  --arena: #e9be86;
  --hoja: #45633f;
  --azul: #2342a8;
  /* spacing, radius, focus */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --radius-full: 9999px;
  --focus-ring: 0 0 0 2px #fbf7f1, 0 0 0 4px #2342a8;
  /* type: two faces, five sizes */
  --font-serif: "Young Serif", Georgia, "Times New Roman", serif;
  --font-sans: Archivo, "Helvetica Neue", Arial, sans-serif;
  --t-small: 15px;
  --t-body: 18px;
  --t-lead: 24px;
  --t-head: clamp(30px, 1.9vw + 16px, 52px);
  --t-display: clamp(44px, 3.4vw + 22px, 92px);
  /* layout */
  --header-h: 56px;
  --stage-w: 60%;
  --pad: clamp(24px, 3.4vw, 64px);
  --measure: 46ch;
  --section-y: clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { margin: 0; background: var(--cal); }
body { color: var(--tinta); font: 400 var(--t-body)/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
h2 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; /* taste-skill-ignore: the focus ring is a state, not a resting shadow */ }
main { padding-top: var(--header-h); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: var(--pad); top: -100px; z-index: 20; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); background: var(--cal); color: var(--vino); font: 600 var(--t-small)/1 var(--font-sans); text-decoration: none; }
.skip:focus-visible { top: 8px; }

/* ── the awning ─────────────────────────────────────────────────────────── */
.awning { position: fixed; z-index: 10; inset: 0 0 auto; height: var(--header-h); background: var(--vino); color: var(--cal); }
/* the valance: half-discs of diameter space-3 hanging under the bar — the first of two scallops */
.awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none;
  background: radial-gradient(circle at 12px 0, var(--vino) 11.5px, transparent 12.5px) left top / 24px 12px repeat-x; /* taste-skill-ignore: the awning's scallops, drawn */ }
.awning-bar { height: 100%; padding-inline: var(--pad); display: flex; align-items: center; gap: var(--space-2); }
.wordmark { font: 700 var(--t-body)/1 var(--font-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.clock { min-width: 3.6em; padding: 7px 10px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--cal) 14%, var(--vino)); font: 600 var(--t-small)/1 var(--font-sans); font-variant-numeric: tabular-nums; text-align: center; }
.nav { margin-left: auto; display: flex; gap: clamp(16px, 2vw, 32px); }
.nav a { font: 500 var(--t-small)/20px var(--font-sans); text-decoration: none; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.nav a:hover { text-decoration-line: underline; }
.awning-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: var(--radius-full); background: var(--cal); color: var(--vino); font: 600 var(--t-small)/1 var(--font-sans); text-decoration: none; transition: transform 200ms ease, background-color 200ms ease; }
.awning-cta:hover { background: var(--cal-hondo); transform: translateY(-1px); }
.awning-cta:active { transform: translateY(1px) scale(.98); transition-duration: 80ms; }
@media (max-width: 999px) { .nav { display: none; } .awning-cta { margin-left: auto; } }
@media (max-width: 480px) {
  .awning-bar { gap: 10px; }
  .wordmark { font-size: 16px; font-stretch: 112%; letter-spacing: .12em; }
  .clock { min-width: 3.2em; padding: 6px 8px; }
  .awning-cta { padding: 0 14px; }
}

/* ── the stage ──────────────────────────────────────────────────────────── */
.read { position: relative; z-index: 1; }
.stage { position: relative; z-index: 2; height: min(100vw, 52svh); overflow: hidden; background: var(--tinta); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; visibility: hidden; }
.stage img[data-key="m1"] { visibility: visible; }
.stage img:not([data-key^="m"]) { display: none; }  /* phone: only the morning stays on the stage */

/* ── 1 · la mañana ──────────────────────────────────────────────────────── */
.step { padding: var(--space-4) var(--pad); display: grid; align-content: start; gap: var(--space-2); }
.step--first { padding-top: var(--space-3); }
/* phone, with script: the frame and its line are pinned together for six short screens of scroll and change in place —
   nothing ever scrolls underneath the picture. Without script the steps simply follow the first frame. */
.js .manana { height: calc(100svh - var(--header-h) + 6 * 50svh); }
.js .pin { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; }
.js .stage { flex: none; }
.js .steps { position: relative; flex: 1; overflow: hidden; }
.js .step { position: absolute; inset: 0; padding-top: var(--space-3); visibility: hidden; }
.js .step.is-on, .js .steps:not(.is-live) .step--first { visibility: visible; }
@media (min-width: 600px) and (max-width: 999px) { .js .stage { height: min(100vw, 60svh); } }
@media (max-height: 700px) and (max-width: 999px) {
  .js .stage { height: min(100vw, 46svh); }
  .cue { display: none; }
}
.line, .h2 { font: 400 var(--t-head)/1.08 var(--font-serif); letter-spacing: -0.015em; color: var(--tinta); max-width: 20ch; }
.support, .body { max-width: var(--measure); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: var(--radius-full); font: 600 var(--t-body)/1 var(--font-sans); text-decoration: none; transition: transform 200ms ease, background-color 200ms ease; }
.btn:active { transform: translateY(1px) scale(.98); transition-duration: 80ms; }
.btn--vino { background: var(--vino); color: var(--cal); }
.btn--vino:hover { background: color-mix(in oklab, var(--vino) 86%, var(--tinta)); transform: translateY(-1px); }
.btn--cal { background: var(--cal); color: var(--vino); }
.btn--cal:hover { background: var(--cal-hondo); transform: translateY(-1px); }
.cue { font: 600 var(--t-small)/1.4 var(--font-sans); color: var(--tinta-suave); }
.cue::after { content: " ↓"; }

/* ── the reading panels ─────────────────────────────────────────────────── */
.panel { padding: var(--section-y) var(--pad); display: grid; align-content: center; gap: var(--space-3); }
.panel--vino { background: var(--vino); color: var(--cal); }
.panel--vino .h2, .panel--vino .display { color: var(--cal); }
.panel--hondo { background: var(--cal-hondo); }
/* phone: each later scene opens its section, edge to edge */
.inline-photo { margin: calc(-1 * var(--section-y)) calc(-1 * var(--pad)) var(--space-2); overflow: hidden; }
.inline-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* 2 · the printed sheet — its top and bottom edges carry the second and last scallops */
.sheet { position: relative; margin-block: 12px; padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 44px); background: var(--cal); color: var(--tinta); text-align: center; }
.sheet::before, .sheet::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; }
.sheet::before { bottom: 100%; background: radial-gradient(circle at 12px 100%, var(--cal) 11.5px, transparent 12.5px) center bottom / 24px 12px repeat-x; /* taste-skill-ignore: the scalloped paper, drawn */ }
.sheet::after { top: 100%; background: radial-gradient(circle at 12px 0, var(--cal) 11.5px, transparent 12.5px) center top / 24px 12px repeat-x; /* taste-skill-ignore: the scalloped paper, drawn */ }
.sheet-title { font: 400 var(--t-lead)/1.2 var(--font-serif); }
.sheet-note { margin-top: var(--space-1); font: 400 var(--t-small)/1.45 var(--font-sans); color: var(--tinta-suave); }
.sheet-group { margin-top: var(--space-4); }
.sheet-group h3 { margin-bottom: var(--space-2); font: 400 var(--t-lead)/1.2 var(--font-serif); color: var(--vino); }
.sheet-group ul { display: grid; gap: var(--space-2); max-width: 26rem; margin-inline: auto; text-align: left; }
.sheet-group b { display: block; font: 600 var(--t-body)/1.35 var(--font-sans); }
.sheet-group span { display: block; font: 400 var(--t-small)/1.45 var(--font-sans); color: var(--tinta-suave); }
.sheet-hours { margin-top: var(--space-4); font: 600 var(--t-small)/1.5 var(--font-sans); }

/* 3 · las azules */
.h2--azul { color: var(--azul); }
.statement { font: 400 var(--t-lead)/1.3 var(--font-serif); max-width: 22ch; }
.textlink { justify-self: start; font: 600 var(--t-body)/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: text-underline-offset 200ms ease; }
.textlink::after { content: " →"; }
.textlink:hover { text-underline-offset: 8px; }

/* ── 4 · entrega: full width, over the stage ────────────────────────────── */
.full { position: relative; z-index: 3; }
.entrega { padding-bottom: var(--section-y); background: var(--arena); color: var(--tinta); }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.entrega-grid { display: grid; gap: var(--space-4); padding: clamp(48px, 6vw, 96px) var(--pad) 0; }
.entrega-text { display: grid; align-content: start; gap: var(--space-3); }
.h2--big { font-size: var(--t-display); line-height: 1; letter-spacing: -0.02em; max-width: 15ch; }
@media (max-width: 520px) { .h2--big { font-size: var(--t-head); line-height: 1.08; } }
.slip { position: relative; justify-self: start; width: 100%; max-width: 30rem; padding: 32px 28px 0; background: var(--cal); font: 400 16px/1.5 var(--font-sans); font-variant-numeric: tabular-nums; }
/* the receipt's torn edge */
.slip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none;
  background: conic-gradient(from -45deg at 50% 100%, var(--cal) 90deg, transparent 0) center top / 16px 8px repeat-x; /* taste-skill-ignore: the slip's torn edge, drawn */ }
.slip h3 { margin-top: 28px; font: 700 16px/1.4 var(--font-sans); }
.slip h3:first-child { margin-top: 0; }
.slip dl > div { display: flex; align-items: baseline; gap: 8px; padding-top: 10px; }
.slip dt { flex: none; }
.slip .dots { flex: 1; min-width: 16px; height: 4px; align-self: center; background: radial-gradient(circle, var(--tinta-suave) 1.5px, transparent 2px) left center / 8px 4px repeat-x; /* taste-skill-ignore: leader dots on a printed slip */ }
.slip dd { flex: none; color: var(--tinta-suave); text-align: right; }
.slip-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 28px -28px 0; padding: 10px 28px; background: var(--tinta); color: var(--cal); font: 600 var(--t-small)/1.3 var(--font-sans); }
/* a narrow slip: the value wraps under its line, as on a printed receipt */
@media (max-width: 520px) {
  .slip { padding-inline: 22px; }
  .slip dl > div { display: grid; gap: 0; }
  .slip .dots { display: none; }
  .slip dd { text-align: left; }
  .slip-total { flex-direction: column; align-items: flex-start; gap: 2px; margin-inline: -22px; padding: 12px 22px; }
}

/* ── 5 · visítanos ──────────────────────────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--t-body)/1.4 var(--font-sans); }
.status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-suave); }
.status[data-open="yes"]::before { background: var(--hoja); }
.status[data-open="no"]::before { background: var(--teja); }
.facts { display: grid; gap: var(--space-3); margin-top: var(--space-1); }
.facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-2); }
.facts dt { font: 600 var(--t-small)/1.75 var(--font-sans); color: var(--tinta-suave); }
.facts a { text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ── 6 · the close ──────────────────────────────────────────────────────── */
.display { font: 400 var(--t-display)/1 var(--font-serif); letter-spacing: -0.02em; max-width: 9ch; }
.tel { font: 500 var(--t-body)/1.4 var(--font-sans); color: var(--cal); text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ── the footer: the name, in the shop's own lettering ──────────────────── */
.foot { display: grid; background: var(--tinta); color: var(--cal); }
.foot-photo { overflow: hidden; }
.foot-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.foot-side { padding: clamp(48px, 6vw, 96px) var(--pad); display: grid; align-content: start; gap: var(--space-4); }
.foot-mark { font: 700 var(--t-body)/1 var(--font-sans); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }
.foot-nav { display: grid; gap: 10px; }
.foot-nav a { justify-self: start; font: 700 var(--t-head)/1.1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; transition: transform 250ms ease, color 250ms ease; }
.foot-nav:hover a { color: color-mix(in oklab, var(--cal) 62%, var(--tinta)); }
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--cal); transform: translateX(12px); }
.foot-blocks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); font: 400 var(--t-small)/1.6 var(--font-sans); }
.foot-blocks a { text-underline-offset: 4px; }
.foot-line { font: 400 var(--t-lead)/1.3 var(--font-serif); max-width: 22ch; }
.foot-legal { font: 400 var(--t-small)/1.4 var(--font-sans); color: color-mix(in oklab, var(--cal) 70%, var(--tinta)); }

/* ── desktop: the split ─────────────────────────────────────────────────── */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .stage, .js .stage { position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--stage-w); height: auto; z-index: 0; }
  .stage img:not([data-key^="m"]) { display: block; }
  .pin, .steps, .js .pin, .js .steps { display: contents; }
  .js .manana { height: auto; }
  .read { margin-left: var(--stage-w); }
  .inline-photo { display: none; }
  .step, .js .step { position: static; visibility: visible; min-height: 56svh; align-content: center; padding-block: var(--space-4); }
  .step--first, .js .step--first { min-height: calc(100svh - var(--header-h)); padding-top: calc(var(--space-4) + 12px); padding-bottom: var(--space-4); }
  .step--last, .js .step--last { min-height: calc(100svh - var(--header-h)); }
  .panel { min-height: calc(100svh - var(--header-h)); }
  .entrega-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-3); align-items: start; }
  .entrega-text { grid-column: 1 / 6; }
  .slip { grid-column: 7 / 12; }
  .foot { grid-template-columns: var(--stage-w) 1fr; min-height: calc(100svh - var(--header-h)); }
  .foot-photo img { height: 100%; aspect-ratio: auto; }
}

/* ── motion: bound to scroll position, nothing where unsupported ────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .sheet.rise, .slip.rise { animation-name: lift; }
    .inline-photo img, .band img { animation: shutter linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .foot-photo img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { transform: translateY(48px); } to { transform: none; } }
@keyframes shutter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .btn, .awning-cta, .foot-nav a, .textlink { transition: none; }
  .btn:hover, .btn:active, .awning-cta:hover, .awning-cta:active, .foot-nav a:hover { transform: none; }
}