/* sections.css — блоки страницы сверху вниз (PLAN.md §2). Конечное состояние = вид без JS и при reduced;
   раскладка под движение (липкие сцены, высоты) — в scenes.css только под html.k-motion / html.intro. */

.r-h2 { font: 400 var(--fs-h2)/1 var(--serif); letter-spacing: -.005em; padding-top: .06em; }
.r-h3 { font: 500 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--rojo); margin-bottom: 14px; }   /* метка — красный акцент, 5,9:1 */
.r-mute { color: var(--mute); }
.wrap { max-width: 1360px; margin: 0 auto; }
/* якоря: цель под фиксированной шапкой (и без JS; с JS отступ считает anchor-scroll.js); фокус на секции после перехода — без рамки от мыши */
main section[id] { scroll-margin-top: var(--hdr); }
main section[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---------- 0. вход: знак Pulcinella — их логотип картинкой (виден после декодирования: is-ready, intro-fade.js) ---------- */
.r-wm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .24em; margin: 0;
  font: 400 var(--fs-intro)/.9 var(--serif); letter-spacing: -.01em; color: var(--vino); white-space: nowrap; font-kerning: none; }
.r-wm { font-family: "Gloock", "Gloock caps fb", Georgia, serif; }
.r-wm__h { display: inline-block; padding-top: .14em; height: 1.16em; line-height: 1; }   /* высота задана: от метрик шрифта не зависит (первый заход без сдвига) */   /* тильда «Ñ» в капсе не режется */
@media (max-width: 899px) { .r-wm { flex-direction: column; gap: 0; } }
.r-wm__logo { width: min(66vw, 340px, 90svh); }   /* 06.10: SVG 1530 × 713; телефон ≈2/3 ширины (на 390 — 257 × 120 px), ПК ≈36vw и не шире 620 px */
@media (min-width: 900px) { .r-wm__logo { width: min(36vw, 620px, 90svh); } }
html.intro #intro .r-wm__logo:not(.is-ready) { visibility: hidden; }

/* ---------- 1. герой: видео на весь экран, липкий (лист Visitanos наезжает) ---------- */
.r-escena { position: relative; }
/* датчик «герой виден»: половина экрана — видео встаёт на паузу, как только лист закрыл половину героя (v0.8: декодирование
   ролика под листом стоило кадров на CPU×4) */
.r-hero__vis { position: absolute; top: 0; left: 0; width: 1px; height: 50vh; height: 50svh; pointer-events: none; }
.r-hero { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; overflow: clip; color: var(--cal); }
.hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--carbon); }
.hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media video { z-index: 0; }
/* v1.3: filter держит видео в обычной композиции GPU, а не в аппаратном оверлее DirectComposition (Chrome на Windows):
   в оверлее цепочка кадров видео пересоздавалась (CreateDecodeSwapChain 4 раза за проход) и презент ждал 50–190 мс —
   57–71 кадр >33 мс за проход по слайдам в окне Chrome. С filter: 5–6 (только на входе). Цвет не меняется */
:is(html:not(.k-shell), html.k-vf) :is(.hero__media video, .r-fuego__media video) { filter: brightness(1); }
/* v2.0: на телефоне (k-shell) filter не ставится — это лекарство от оверлея DirectComposition Chrome на Windows. На Android filter
   выводит видео из аппаратного слоя (SurfaceControl) в обычную композицию GPU — каждый кадр ролика перерисовывается (эмулятор:
   средний кадр свайпа 27 мс с filter). ?vf=1 — вернуть filter для сравнения */
.hero__poster { z-index: 1; }
/* затемнение (carbon) в px от низа: текст героя привязан к низу в px. Сверху тень под шапкой.
   Видео 01 у низа ярко-оранжевое (решётка на углях): под мелким текстом ≥ .62 даёт cal ≥4,5:1 даже на белом пикселе */
.r-hero__shade { position: absolute; inset: 0; z-index: 2; --sb: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(to bottom, rgb(23 18 14 / .45) 0, transparent 140px),
    linear-gradient(to top, rgb(23 18 14 / .78) 0, rgb(23 18 14 / .68) calc(260px + var(--sb)), rgb(23 18 14 / .6) calc(480px + var(--sb)), rgb(23 18 14 / .3) calc(580px + var(--sb)), transparent calc(660px + var(--sb))); }   /* v2.0: телефон не темнее ПК (было .80/.72/.58 до 680 px — «серое» видео) */
@media (min-width: 900px) {
  .r-hero__shade { background: linear-gradient(to bottom, rgb(23 18 14 / .45) 0, transparent 140px); }
  .r-hero__shade::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgb(23 18 14 / .78) 0, rgb(23 18 14 / .68) 260px, rgb(23 18 14 / .6) 480px, rgb(23 18 14 / .3) 580px, transparent 660px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(7 / 12 * 100%), rgb(0 0 0 / .35) 88%); mask-image: linear-gradient(to right, #000 calc(7 / 12 * 100%), rgb(0 0 0 / .35) 88%); }
}
.r-veil { position: absolute; inset: 0; z-index: 3; background: var(--carbon); opacity: 0; pointer-events: none; }
.hero__text { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .hero__text { right: auto; width: calc(7 / 12 * 100%); bottom: 56px; } }
.hero__title { font: 400 var(--fs-h1)/1.02 var(--serif); letter-spacing: -.005em; max-width: 13em; }
.r-hero__status { margin-top: 18px; font-weight: 500; font-size: 1.125rem; font-variant-numeric: lining-nums tabular-nums; }
/* v0.8: статус считает JS — до этого строка невидима (место уже занято), затем появляется один раз; на телефоне место под 2 строки
   («Cerrado ahora. Abrimos el miércoles a las 19:30.» переносится): иначе замена текста растила блок и H1 прыгал вверх на 28 px */
html.js .r-hero__status:not(.is-set) { visibility: hidden; }
@media (max-width: 899px) { .r-hero__status { min-height: calc(2 * 1.55em); } }
.hero__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 899px) { .hero__cta { padding-right: 56px; } .hero__cta .btn { flex: 1 1 auto; } }
/* пауза видео (WCAG 2.2.2): своя тёмная подложка — видна на любом кадре */
.r-pause { position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--cal); }
.r-pause svg { width: 16px; height: 16px; }
.r-pause .i-play, .r-pause[data-state="paused"] .i-pause { display: none; }
.r-pause[data-state="paused"] .i-play { display: block; }
.hero__pause { right: var(--gut); bottom: calc(28px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .hero__pause { bottom: 56px; } }
.r-hero__status a { color: inherit; font-weight: 500; text-underline-offset: 4px; }   /* понедельник: «Consultanos por WhatsApp» */
html:not(.js) .r-pause { display: none; }   /* без JS видео нет — кнопке нечего делать */
/* Pulcinella 06.10, ПК (≥900): герой как в шаблоне — горизонтальный ролик 1920 × 1080 на весь экран (object-fit: cover, по центру),
   затемнение слева 7/12 и сверху под шапкой, H1 и кнопки поверх (рамка 9:16 справа снята — решение владельца) */

/* ---------- 2. Visitanos: лист поверх огня ---------- */
/* Pulcinella 06.10: лист разобран на два слайда — «Reservá» (section.r-reserva: форма + «Dónde») и «Horario» (.r-sheet#horario: статус,
   часы, feriados; за ним подвал). Порядок один на телефоне и ПК (Денис 06.10): La carta → Reservá → El horno …, по DOM */
.r-reserva { padding: 56px var(--gut) 72px; }
@media (min-width: 900px) { .r-reserva { padding: 72px var(--gut) 48px; } .r-reserva .r-sheet__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.r-sheet { position: relative; z-index: 2; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 56px var(--gut) 72px; }
.r-sheet__g { display: grid; gap: 48px; max-width: 1360px; margin: 0 auto; }
@media (min-width: 900px) { .r-sheet { padding: 72px var(--gut) 48px; } .r-sheet__g { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
/* лист «Horario» — одна колонка: на ПК статус слева, таблица часов справа */
@media (min-width: 900px) {
  .r-sheet .r-sheet__g { grid-template-columns: minmax(0, 1fr); }
  .r-sheet .r-sheet__c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-content: start; }
  .r-sheet .r-status { grid-column: 1; grid-row: 1 / span 3; }
  .r-sheet .r-sheet__c > :not(.r-status) { grid-column: 2; }
}
html:not(.js) .r-sheet .r-sheet__c > :not(.r-status) { grid-column: 1 / -1; }   /* без JS статуса нет — таблица на всю ширину */
.r-status { margin: 0 0 32px; }
.r-status__t { display: block; font: 400 var(--fs-status)/1 var(--serif); padding-top: .08em; }
.r-status__d[hidden] { display: none; }
.r-status__t a { color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: .12em; }
.r-status__d { display: block; margin-top: 8px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
html:not(.js) .r-status { display: none; }   /* без JS статус не считается — видна таблица часов */
.r-hours li { padding: 5px 0; color: var(--mute); }
.r-hours b { font-weight: 500; color: var(--vino); }
.r-hours li[aria-current] { color: var(--vino); font-weight: 500; }
.r-hours a, .r-sheet__p a { color: var(--rojo); font-weight: 500; text-underline-offset: 4px; }
/* ссылки внутри строки текста: цель касания ≥44 px (строка 24,8 + 2 × 10), высота строки та же (отрицательный margin) */
.r-hours a, .r-sheet__p a, .r-hero__status a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.r-hours__fer { margin-top: 10px; color: var(--mute); }
.r-where { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--serif); }
/* Pulcinella 06.10: «Cómo llegar» и телефон — одной строкой (переносится), телефон перенесён из формы в «Dónde» */
.r-where__go { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
.r-where__tel { color: var(--mute); }
.r-where__tel a { color: var(--rojo); font-weight: 500; display: inline-block; padding: 10px 0; }
.r-sheet__p { margin-top: 20px; max-width: 34ch; }   /* Pulcinella: 20 (было 14) — цели касания ссылок двух строк подряд (44 px) не перекрываются */
.r-sheet__p a { font-weight: 500; text-underline-offset: 4px; }
.r-sheet__p[hidden] { display: none; }
/* бронь: три поля */
.r-res__f { display: grid; gap: 16px; }
.r-res__row { border: 0; padding: 0; margin: 0; min-width: 0; }
.r-res label, .r-res legend { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: 8px; padding: 0; }
.r-res select { width: 100%; height: 48px; padding: 0 44px 0 16px; border-radius: 12px; border: 1px solid rgb(30 26 23 / .35); font-size: 1rem; color: var(--vino); -webkit-appearance: none; appearance: none;
  background: var(--cal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E1A17' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.r-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.r-seg legend { width: 100%; }
.r-seg label { position: relative; margin: 0; }
.r-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.r-seg span { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border: 1px solid rgb(30 26 23 / .35); border-radius: 999px; font-weight: 500; }
.r-seg input:checked + span { background: var(--vino); color: var(--cal); border-color: var(--vino); }
.r-seg input:disabled + span { opacity: .4; text-decoration: line-through; }
.r-seg input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 3px; }
.r-res__go { margin-top: 24px; }
html:not(.js) .r-res__f { display: none; }   /* без JS: кнопка с базовым текстом */

/* ---------- 3. La carta: меню-документ ---------- */
.r-carta { padding: 12vh var(--gut) 10vh; }
.r-carta__head { display: grid; gap: 28px; max-width: 1360px; margin: 0 auto; }
.r-carta__lead { margin-top: 20px; max-width: 46ch; }
.r-carta__intro .r-mute { margin-top: 10px; }
.r-carta__img { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: #d8c6a6; }
.r-carta__in, .r-carta__in img { width: 100%; height: 100%; }
.r-carta__img img { object-fit: cover; }
@media (min-width: 900px) {
  .r-carta { padding-top: 48px; }   /* лист Visitanos сразу переходит в карту: раньше 88 + 12vh ≈ 200 px пустоты */
  .r-carta__head { grid-template-columns: 7fr 5fr; align-items: end; gap: 56px; }
  .r-carta__img { aspect-ratio: 16 / 10; }   /* v0.8: шапка карты ниже — меню раньше в экране */
}
.r-menu { max-width: 1360px; margin: 40px auto 0; }
/* вкладки — видимые пилюли, переносятся на 2-ю строку; без прокрутки, без липкости, без переходов (смена в том же кадре) */
.r-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 18px; border-bottom: 1px solid color-mix(in srgb, var(--vino) 14%, transparent); }
.r-filter__tabs { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.r-tab { position: relative; display: inline-flex; }
.r-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.r-tab span { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--vino) 30%, transparent); border-radius: 999px;
  font-weight: 500; font-size: .9375rem; color: var(--vino); cursor: pointer; white-space: nowrap; }
.r-tab input:checked + span { background: var(--vino); border-color: var(--vino); color: var(--cal); }
.r-tab input:focus-visible + span { outline: 2px solid var(--vino); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .r-tab input:not(:checked) + span:hover { border-color: var(--vino); } }
.r-count { color: var(--mute); font-size: .9375rem; white-space: nowrap; }
/* телефон: вкладки в 2 строки на всю ширину (растягиваются), список вертикальный */
@media (max-width: 899px) {
  .r-filter { gap: 10px; padding-bottom: 14px; }
  .r-filter__tabs { gap: 6px; width: 100%; }
  .r-tab { flex: 1 1 auto; }
  .r-tab span { width: 100%; padding: 0 6px; font-size: .875rem; }   /* 360 px: 4 + 3 вкладки в 2 строки (текст 451 px + поля 6 + рамки; вкладки растягиваются) */
}
.r-menu__list { margin-top: 4px; }
.m-group[hidden], .m-item[hidden] { display: none !important; }   /* v2.4: сетка позиции (display: grid в slides.css и ≥1200 px) перебивала hidden — вкладка «Para compartir» показывала всё */
.m-group { padding-top: 36px; }   /* отступ группы — padding, не margin: в колонках ПК margin у верха колонки съедается, колонки вставали вразнобой */
.m-group__h { font: 400 var(--fs-group)/1.05 var(--serif); padding-top: .06em; break-after: avoid; }
.m-group ul { margin-top: 14px; }
.m-group li + li { margin-top: 22px; }
.m-item { break-inside: avoid; }
.m-item__top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.m-item__n { font: 400 var(--fs-dish)/1.15 var(--serif); padding-top: .06em; min-width: 0; margin: 0; }   /* в разделах с подзаголовками название — h5 (сброс в base.css только h1–h4) */
.m-item__p { font-weight: 500; font-size: var(--fs-price); white-space: nowrap; flex: none; }
.m-item__d { margin-top: 4px; color: var(--mute); font-size: var(--fs-desc); line-height: 1.45; }
.m-item__tag { margin-top: 6px; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--vino) 78%, transparent); }
/* Pulcinella: вводная вкладки (пиццы, пасты), подзаголовок раздела внутри вкладки (Cervezas, Ensaladas…), строка-примечание без цены
   (гарниры, pasta sin gluten). Отступы — padding (в колонках margin у верха колонки съедается; страницы menu-pages.js — тоже) */
.m-lead { padding-top: 10px; color: var(--mute); font-size: var(--fs-desc); line-height: 1.4; break-after: avoid; }
.m-sub { padding-top: 28px; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); break-after: avoid; }
.m-note { padding-top: 16px; color: var(--mute); font-size: var(--fs-desc); line-height: 1.4; break-inside: avoid; }
/* две цены пиццы: entera, под ней мелко «Personal Gs. …» (на ПК в слайде — две колонки цен с шапкой, slides.css) */
.m-item__e { display: block; }
.m-item__pp { display: block; font-size: var(--fs-label); font-weight: 400; color: var(--mute); text-align: right; }
.m-item__pp:empty { display: none; }
.m-colh { display: none; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; contain: strict; }
/* ПК: меню-документ в колонках целиком (без внутреннего скролла); позиции компактно: название · цена справа, описание строкой */
@media (min-width: 900px) {
  .r-menu__list { columns: 2; column-gap: 64px; margin-top: 0; }
  .m-group { padding-top: 28px; }
  .m-group__h { font-size: 1.75rem; }
  .m-group ul { margin-top: 10px; }
  .m-group li + li { margin-top: 13px; }
  .m-item__n { font-size: 1.25rem; }
  .m-item__p { font-size: 1.0625rem; }
  .m-item__d { margin-top: 2px; font-size: .9375rem; line-height: 1.4; }
  /* строка 1: название · «Para compartir» · цена; строка 2: описание на всю ширину колонки */
  .m-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n t p" "d d d"; column-gap: 14px; align-items: baseline; }
  .m-item__top { display: contents; }
  .m-item__n { grid-area: n; }
  .m-item__p { grid-area: p; }
  .m-item__d { grid-area: d; }
  .m-item__tag { grid-area: t; margin: 0; font-size: .875rem; white-space: nowrap; }
}
@media (min-width: 1280px) { .r-menu__list { column-gap: 64px; } .m-item__d { font-size: .90625rem; } }   /* 14,5 px: самое длинное описание (89 знаков) — в одну строку на 1440 */
.r-empty { padding: 48px 0; color: var(--mute); }
.r-empty[hidden] { display: none; }
.r-carta__cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* низ меню: страницы «‹ 1 / 4 ›» (menu-pages.js; без JS их нет) и кнопки брони / доставки */
.r-menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 56px; }
.m-pager { display: flex; align-items: center; gap: 4px; }
.m-pager[hidden] { display: none; }
.m-pager.is-one { visibility: hidden; }   /* одна страница: место то же (деление считалось с ним) */
.m-pager__b { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; font: 400 1.5rem/1 var(--sans); cursor: pointer; }
.m-pager__b span { margin-top: -.12em; }
/* смена страницы не должна трогать раскладку предков списка: колонки (multicol) Chrome раскладывает заново при любой раскладке
   выше них (CPU×4: +15–25 мс на смену текста «2 / 4» или opacity кнопки). Поэтому крайняя кнопка — цветом (не opacity),
   номер страницы — в блоке contain: strict фиксированного размера (граница перераскладки) */
.m-pager__b[aria-disabled="true"] { color: color-mix(in srgb, currentColor 35%, transparent); border-color: color-mix(in srgb, currentColor 12%, transparent); cursor: default; }
.m-pager__b:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .m-pager__b:not([aria-disabled="true"]):hover { border-color: currentColor; } }
.m-pager__n { min-width: 4.5em; text-align: center; font-weight: 500; font-size: .9375rem; }
.m-pager__box { display: block; position: relative; width: 4.5em; height: 1.5em; line-height: 1.5; contain: strict; }   /* и видимый номер, и текст для чтения экрана — внутри */
/* без JS фильтр — радио + :has (с JS модуль сам ставит hidden; правила выключены); вкладка — весь свой раздел списком */
html:not(.js) .r-menu:has(#f-pizzas:checked) .m-group:not([data-cat="pizzas"]),
html:not(.js) .r-menu:has(#f-pastas:checked) .m-group:not([data-cat="pastas"]),
html:not(.js) .r-menu:has(#f-risottos:checked) .m-group:not([data-cat="risottos"]),
html:not(.js) .r-menu:has(#f-entradas:checked) .m-group:not([data-cat="entradas"]),
html:not(.js) .r-menu:has(#f-carnes:checked) .m-group:not([data-cat="carnes"]),
html:not(.js) .r-menu:has(#f-bebidas:checked) .m-group:not([data-cat="bebidas"]),
html:not(.js) .r-menu:has(#f-vinos:checked) .m-group:not([data-cat="vinos"]) { display: none; }
html:not(.js) .r-count { display: none; }

/* ---------- 4. Fuego: тёмный скруглённый блок со столбом огня (конечный вид без движения) ---------- */
.r-fuego { position: relative; padding: 6vh 4vw; }
.r-fuego__block { position: relative; background: var(--carbon); color: var(--cal); border-radius: 32px; overflow: hidden; display: grid; gap: 28px; padding: 0 0 40px; }
.r-fuego__col { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.r-fuego__media { position: absolute; inset: 0; }
.r-fuego__media img, .r-fuego__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-fuego__media video { z-index: 0; }
.r-fuego__poster { z-index: 1; }
.r-fuego__shade { display: none; }
.r-fuego__txt { padding: 0 24px; display: grid; gap: 10px; }
.r-fuego__l { font: 400 var(--fs-fire)/1.02 var(--serif); }
.nw { white-space: nowrap; }   /* «300 °C.» не рвётся (строки огня разбиты на слова — неразрывный пробел там не держит) */
.r-fuego__p { margin-top: 14px; color: var(--cal-80); max-width: 34ch; }
.r-fuego__pause { right: 16px; top: 16px; }
@media (max-width: 899px) { .r-fuego__col { width: 100%; max-width: 729px; justify-self: center; } }   /* ролик телефона 540 — не больше ×1,35 */
@media (min-width: 900px) {
  .r-fuego__block { grid-template-columns: minmax(0, 40%) 1fr; align-items: center; padding: 0; gap: 0; }
  .r-fuego__col { aspect-ratio: 9 / 16; max-height: 88vh; }
  .r-fuego__txt { padding: 48px 6vw; }
}

/* ---------- 5. Cocina: кадр-текстура рядом с текстом (без движения — стопка «кадр + текст») ---------- */
.r-cocina { padding: 12vh 0 10vh; color: var(--vino); }   /* Pulcinella: зелёный не текст — только триколор */
.r-cocina__h, .r-cocina__lead { padding: 0 var(--gut); max-width: calc(1360px + 2 * var(--gut)); margin: 0 auto; }
.r-cocina__lead { margin-top: 14px; }
.r-swap { display: grid; gap: 0; margin-top: 40px; }
.r-swap__frame { display: contents; }
.r-shot { grid-row: var(--r); margin: 0 var(--gut); border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: #c9ccb4; }
.r-shot__in { width: 100%; height: 100%; }
.r-shot img { width: 100%; height: 100%; object-fit: cover; }
.r-step { grid-row: var(--r); padding: 22px var(--gut) 56px; }
.r-step__h { font: 400 var(--fs-step)/1.02 var(--serif); padding-top: .06em; }
.r-step p { margin-top: 12px; max-width: 36ch; font-size: 1.125rem; }
/* ПК (v0.8): три кадра с подписями в ряд, один экран — без липкой рамки и шагов по 80svh */
@media (min-width: 900px) {
  .r-swap { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; max-width: calc(1360px + 2 * var(--gut)); margin: 40px auto 0; padding: 0 var(--gut); }
  .r-shot { grid-row: 1; grid-column: var(--rs); margin: 0; aspect-ratio: 4 / 3; }
  .r-step { grid-row: 2; grid-column: var(--rs); padding: 22px 0 0; }
  .r-step p { font-size: 1.0625rem; }
}

/* ---------- 6. Письмо ---------- */
.r-historia { padding: 12vh var(--gut); }
@media (min-width: 900px) { .r-historia { padding: 10vh var(--gut); } }
.r-letter { display: grid; gap: 36px; max-width: 1360px; margin: 0 auto; }
.r-letter__img { order: -1; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: #d9cdbd; }
.r-letter__in { width: 100%; height: 100%; }
.r-letter__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }   /* Pulcinella: в широкой полосе (планшет) — лицо, а не середина кадра */
/* абзац письма без .fx-fg: цвет постоянный vino (= BG.cal.fg), без перехода. Перелив color 3 с у абзаца из ~60 слов
   пересчитывал и перерисовывал каждое слово каждый кадр (телефон ×4 CPU: пачка кадров по 50 мс). Тёмный текст на любом
   светлом фоне перелива salvia → cal держит ≥9:1, поэтому мгновенный цвет безопасен */
.r-letter__h { font: 400 var(--fs-h2)/1 var(--serif); padding-top: .06em; margin-bottom: .5em; }
.r-letter__p { font: 400 var(--fs-letter)/1.2 var(--serif); max-width: 30ch; color: var(--vino); }
.r-letter__by { margin-top: 28px; color: var(--mute); }
@media (min-width: 900px) {
  .r-letter { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
  .r-letter__img { order: 0; position: sticky; top: 96px; aspect-ratio: 1 / 1; }
}
html.lite.k-reduced .r-letter__img { position: static; }   /* lite с загрузки: ничего не липнет (кроме шапки); живой переход раскладку не трогает */

/* ---------- 7. La casa: знак + кадры (без движения — статично) ---------- */
.r-casa { position: relative; padding: 10vh 0 10vh; }
@media (min-width: 900px) { .r-casa { padding: 8vh 0 8vh; } }
.r-casa__wm { position: relative; z-index: 5; padding: 0 var(--gut); }
.wm { font: 400 100px/.9 var(--serif); color: var(--vino); text-align: center; }
.wm__logo { margin: 0 auto; width: min(100%, 560px); }   /* знак La casa — их логотип; в слайде размер по высоте (slides.css) */
.r-casa__field { position: relative; height: 150svh; margin-top: 24px; }
.r-it { position: absolute; left: var(--xm); top: calc(var(--ym) * .7svh); width: var(--wm); }
.r-it[data-pc-only] { display: none; }
.r-it figure { overflow: hidden; border-radius: 12px; }
.r-it img { width: 100%; height: auto; }
.r-it[data-z="1"] { z-index: 1; } .r-it[data-z="2"] { z-index: 2; } .r-it[data-z="3"] { z-index: 3; }
@media (min-width: 900px) {
  .r-casa__field { height: calc(30svh + 380px); }   /* v0.8: кадры в один экран под знаком (было 175svh с липким знаком) */
  .r-it { left: min(var(--x), 100% - var(--w)); top: calc(var(--y) * 1svh); width: var(--w); }
  .r-it[data-pc-only] { display: block; }
}
.r-casa__cap { position: relative; z-index: 5; max-width: 560px; padding: 0 var(--gut); margin-top: 24px; }
.r-casa__cap b { font-weight: 500; }

/* ---------- 8. подвал (блок vino) ---------- */
.r-foot { position: relative; background: var(--vino); color: var(--cal); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 56px var(--gut) calc(104px + env(safe-area-inset-bottom)); }
/* триколор — одна тонкая деталь на весь сайт: полоса 3 × 72 px у верхнего края подвала (зелёный / белый / красный) */
.r-foot::before { content: ""; position: absolute; top: 0; left: var(--gut); width: 72px; height: 3px;
  background: linear-gradient(90deg, var(--monte) 0 33.33%, #fff 33.33% 66.66%, var(--rojo) 66.66% 100%); }
@media (min-width: 900px) { .r-foot { padding: 72px var(--gut) 40px; } }
.r-foot__g { display: grid; gap: 36px; max-width: 1360px; margin: 0 auto; }
@media (min-width: 900px) { .r-foot__g { grid-template-columns: repeat(3, 1fr); gap: 56px; } }
.r-foot__h { font: 400 1.75rem/1.1 var(--serif); margin-bottom: 12px; }
.r-foot p { color: var(--cal-80); }
.r-foot .r-link { color: var(--cal); }
.r-foot__nav { max-width: 1360px; margin: 48px auto 0; }
.r-foot__nav ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.r-foot__nav a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.r-foot__small { max-width: 1360px; margin: 16px auto 0; font-size: var(--fs-label); }