/* base.css — сброс, кнопки, шапка (полоса), нижняя капсула телефона (PLAN.md §2 «Шапка», С9). */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scrollbar-gutter: stable; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* clip, не hidden: sticky в Safari */
/* фон страницы при смене секций — два фиксированных слоя, перелив opacity на композиторе (bg-luca.js, опция layers):
   переход background-color у <html> перерисовывал весь экран каждый кадр 3 с */
.r-bgl { display: none; }   /* v1.4: фон страницы один (--paper на <html>) — слои перелива не нужны (были 2 полноэкранных фиксированных слоя) */
html:not(.js) .r-bgl { display: none; }
html:not(.js) [data-bg] { background: var(--paper); }
body { margin: 0; color: var(--vino); font: 400 var(--fs-body)/1.55 var(--sans); overflow-x: clip; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* v2.0 телефон: серая квадратная подсветка тапа Safari (по умолчанию у ссылок, кнопок и <label> вкладок меню) — убрана;
   обводка фокуса — только с клавиатуры (:focus-visible), от касания её нет; кнопки без вида кнопки Safari */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, input, select, summary { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
button { -webkit-appearance: none; appearance: none; }
/* v2.0: без зума двойным тапом (двойной тап по кнопке увеличивал страницу), щипок остаётся; без pull-to-refresh и «резинки» Safari */
html, body, a, button, label, input, select, summary, .k-scroller { touch-action: manipulation; }
html, body { overscroll-behavior: none; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
[role="list"] { list-style: none; padding: 0; }
.fx-bg { background-color: var(--bg); }
/* перелив фона полосы — только пока она у экрана (класс ставит main.js по IO): невидимые переходы тоже перерисовывали каждый кадр */
.fx-bg.is-near { transition: background-color var(--t-luca) var(--ease-luca); }
/* заголовки .fx-fg — цвет своей секции (наследуется: vino, в Cocina monte), без перелива color: любой идущий переход цвета текста
   (их было ≈12 на странице, включая невидимые) давал перерисовку каждый кадр 3 с, на телефоне ×4 CPU — кадры по 50 мс.
   Конечный цвет тот же, что давал --fg; тёмный текст на любом светлом фоне перелива ≥9:1 */
.fx-fg { color: inherit; }
.num { font-variant-numeric: lining-nums tabular-nums; }

.skip { position: fixed; z-index: 100; left: var(--gut); top: 8px; padding: 12px 16px; background: var(--vino); color: var(--cal); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem; white-space: nowrap; }
@media (min-width: 900px) { .btn { height: 56px; } }
.btn--cal { background: var(--cal); color: var(--vino); }
.btn--vino { background: var(--vino); color: var(--cal); }
.btn--rojo { background: var(--rojo); color: var(--cal); }   /* Pulcinella: главное действие (бронь, доставка) — красный их дверей */
.btn--line { border: 1px solid currentColor; }
.btn svg, .r-pill svg, .capsule__wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color var(--t-ui), color var(--t-ui); }
  .btn--cal:hover { background: #fff; }
  .btn--vino:hover { background: #000; }
  .btn--rojo:hover { background: var(--rojo-h); }
  .btn--line:hover { background: var(--cal); color: var(--vino); border-color: var(--cal); }
}
.tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: .04em; border: 1px solid currentColor; padding: 5px 8px 4px; line-height: 1; border-radius: 4px; white-space: nowrap; }
.r-link { color: var(--rojo); display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---------- стекло (v1.5: плоское): одно оформление для всех плавающих кнопок и капсул, без смен по состоянию или слайду ----------
   Решение владельца 05.10: размытие (backdrop-filter) не видно глазом, а стоит GPU на каждом кадре видео и прокрутки — его нет.
   Тонировка rgba(carbon .8), граница 1 px rgba(255,255,255,.18), лёгкая тень; текст cal.
   Контраст cal на самом ярком пикселе под стеклом (белый): .8·carbon + .2·белый = #43403D → 9,6:1 (расчёт). */
:root { --glass-bg: rgb(23 18 14 / .8); --glass-line: rgb(255 255 255 / .18); --glass-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.glass, .r-bar__nav ul, .r-pill, .r-num, .capsule, .r-dots, .r-pause {
  background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); color: var(--cal); }

/* ---------- шапка: полоса на всю ширину ----------
   v1.1: сама полоса прозрачная, на ней стеклянные пилюли (имя, ссылки, «Reservá», номер слайда) — одинаковые на всех слайдах;
   data-theme (nav.js) на вид больше не влияет. */
.r-bar { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: var(--hdr); padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--cal); pointer-events: none; }
.r-bar > * { pointer-events: auto; }
/* фон светлой полосы — пара слоёв .r-bar__bg, их переливает bg-luca.js (mirrors) тем же твином opacity, что и фон страницы
   (на композиторе; переход background-color у ::before перерисовывал шапку каждый кадр 3 с). ::before — только линия снизу */
.r-bar__bg { display: none; }   /* v1.1: фона полосы нет (слои bg-luca для шапки не показываются) */
.r-bar__brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; border-radius: 999px; }
.r-bar__name { font: 400 20px/1 "Gloock", "Gloock name fb", Georgia, serif; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
/* Pulcinella: знак в шапке — их логотип картинкой (SVG, #1E1A17 на прозрачном), без подложки (06.10: стекло у знака снято — только
   надпись). Цвет — по теме шапки (data-theme ставит main.js по блоку под шапкой): над видео и тёмным блоком «El horno» — белый
   (filter), на светлых слайдах — свой тёмный; смена 250 мс. Читаемость над видео — затемнение сверху кадра (sections.css), не подложка.
   Ширина задаётся здесь: не уже 150 px — волосяные штрихи букв на телефоне иначе пропадают. Высота — по пропорции файла (1530 × 547 → 150 × 54) */
.r-logo { display: block; height: auto; max-width: none; }
.r-logo--bar { width: 150px; transition: filter .25s cubic-bezier(.4, 0, .2, 1); }
.r-bar[data-theme="dark"] .r-logo--bar { filter: brightness(0) invert(1); }
.r-bar__brand:has(.r-logo--bar) { padding: 0; height: 58px; }
.r-bar__nav { display: none; }
.r-bar__nav ul { display: flex; gap: 28px; padding: 0 16px; }
.r-bar__nav a { text-decoration: none; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; min-height: 44px; }
.r-bar__nav a[aria-current]::after { transform: scaleX(1); }
.r-pill { display: none; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: .9375rem; font-weight: 500; white-space: nowrap; }
.r-bar__brand, .r-bar__nav ul { padding: 0 14px; border-radius: 999px; }
.r-bar__nav ul { padding: 0 18px; }
@media (max-width: 899px) { .r-bar .tag { font-size: 14px; padding: 4px 6px 3px; } }
@media (min-width: 900px) {
  .r-bar__nav { display: block; position: absolute; left: 50%; translate: -50% 0; }
  .r-bar__nav ul { margin: 0; }
  .r-pill { display: inline-flex; }
}
@media (min-width: 900px) and (max-width: 1099px) { .r-bar__nav ul { gap: 20px; } }
/* без JS шапка стоит над героем и уезжает с ним */
html:not(.js) .r-bar { position: absolute; }

/* ---------- нижняя капсула телефона (<900): «Carta», «Horario», сегмент «Reservar» (Pulcinella 06.10: ведёт на слайд брони) ----------
   появляется один раз, когда лист Visitanos дошёл до середины экрана (класс is-on), чтобы на первом экране не было двух одинаковых кнопок */
.capsule { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 420px; height: var(--bar);
  border-radius: 999px; display: flex; align-items: center; gap: 4px; padding: 0 5px 0 14px; }
.capsule a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.capsule a:not(.capsule__wa) { padding: 0 9px; }
.capsule a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.capsule__wa { background: var(--rojo); color: var(--cal); border-radius: 999px; padding: 0 16px; gap: 8px; margin-left: auto; height: 46px; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; }
html.js .capsule:not(.is-on) { visibility: hidden; }
html:not(.js) .capsule { display: none; }
@media (min-width: 900px) { .capsule { display: none !important; } }
@media (max-width: 359px) { .capsule { padding-left: 8px; } .capsule a:not(.capsule__wa) { padding: 0 6px; font-size: 14px; letter-spacing: 0; } .capsule__wa { padding: 0 12px; } }

/* v0.9 первый заход: Gloock-знаки без замены шрифта (класс f-ok ставит head-скрипт после загрузки Gloock) */
html.js:not(.f-ok) :is(.r-wm, .r-bar__name) { visibility: hidden; }