/* base.css — сброс, кнопки, шапка (угловая навигация ≥900 / полоса телефона) и нижняя капсула (<900), PLAN.md §2, С9. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }   /* clip, не hidden: sticky в Safari */
/* v2.0: без серой подсветки тапа (iOS Safari, Chrome и Samsung Internet на Android): фокус с клавиатуры — :focus-visible ниже */
html { -webkit-tap-highlight-color: transparent; }
/* v2.0: двойной тап не увеличивает страницу (iPhone Дениса: два быстрых тапа по кнопкам героя — зум до 259×446), щипок для
   доступности остаётся (manipulation = прокрутка + щипок, без двойного тапа); тап срабатывает без ожидания второго.
   :where — без веса: свои touch-action у просмотра фото (.lb none) и ленты фокуса (pan-y / pan-x) сильнее */
:where(html, body, a, button, label, select, [role="button"], figure, .capsule, .corner) { touch-action: manipulation; }
/* без «оттягивания» страницы и обновления жестом вниз (Safari, Chrome Android): и при обычной прокрутке документа */
@media (hover: none) { html, body { overscroll-behavior-y: none; } }
body { margin: 0; background: var(--milk); color: var(--ink); font: 500 var(--fs-body)/1.55 var(--sans); overflow-x: clip; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; }
[role="list"] { list-style: none; margin: 0; padding: 0; }

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

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: 999px; text-decoration: none; font-size: 1rem; white-space: nowrap; }
@media (min-width: 900px) { .btn { height: 56px; } }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--line { border: 1px solid currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color var(--t-ui), color var(--t-ui); }
  .btn--paper:hover { background: var(--milk); }
  .btn--line:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
}
.tag { font-size: max(14px, var(--fs-label)); text-transform: uppercase; letter-spacing: .08em; border: 1px solid currentColor; padding: 4px 8px 3px; line-height: 1; }

/* ---------- шапка ---------- */
.corner { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: var(--bar); padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); border-bottom: 1px solid transparent; }   /* тема меняется мгновенно: на переходе 0,3 с цвет текста и фон проходили через середину и контраст падал до ≈1:1 */
.corner { color: var(--paper); }   /* текст шапки всегда на стекле */
.corner__brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.corner__name { font: 500 20px/1 var(--serif); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.corner__right { display: flex; align-items: center; gap: 32px; }
.corner__links { display: none; gap: 24px; }
.corner__links a { text-decoration: none; font-size: max(14px, var(--fs-label)); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; min-height: 44px; }
.corner__links a[aria-current]::after { transform: scaleX(1); }
.pill { display: none; align-items: center; height: 44px; padding: 0 20px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-size: max(14px, var(--fs-label)); text-transform: uppercase; letter-spacing: .08em; }
.corner__wa { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-size: max(14px, var(--fs-label)); text-transform: uppercase; letter-spacing: .08em; }

/* капсулы под именем и под ссылками; поля съедены отрицательным полем (текст стоит там же, где без капсулы) */
.corner__brand, .corner__right { border-radius: 999px; }
/* v0.9 «всегда стекло» (решение Дениса 04.10): шапка, капсула телефона и точки слайдов — одно оформление во всех состояниях
   и на всех слайдах, тема секции фон больше не меняет. Тонировка — см. v1.0 ниже. */
/* v1.0 «плоское стекло» (решение Дениса 05.10: разницы с размытием не видно, а размытие поверх видео и движения стоило
   ≈75 % GPU-времени перехода — design/ligereza/AUDIT.md): тонировка .8 без backdrop-filter, везде и всегда одинаково.
   paper на ней против чисто белого пикселя под стеклом — 8,4:1. */
:root { --glass-bg: rgb(28 27 24 / .8); --glass-line: 1px solid rgb(255 255 255 / .18); --glass-shadow: 0 4px 18px rgb(0 0 0 / .14); }
.corner__brand, .corner__right, .capsule, .sl-dots { background: var(--glass-bg); border: var(--glass-line); box-shadow: var(--glass-shadow); }

/* телефон: полоса шапки получает фон по теме секции под ней (над видео прозрачная, под текстом капсулы), чтобы не наезжать на текст */
@media (max-width: 899px) {
  .corner .tag { display: none; }   /* v0.9: чип «Sitio de ejemplo» на телефоне был 10 px; пометка «ejemplo» остаётся у цены героя, в ценах, калькуляторе и подвале */
  .corner__brand, .corner__right { padding: 4px 10px; margin: 0 -10px; }   /* 4 px сверху и снизу: постоянное подчёркивание «Escribime» (тач) внутри капсулы */
}
/* v2.0: на тач-экране постоянное подчёркивание .k-ul у «Escribime» в капсуле шапки читалось белой полоской у нижнего края
   капсулы (iPhone Дениса, WebKit 320–430: линия 1 px paper на 2 px ниже текста). Кнопка и так в капсуле — подчёркивание не нужно */
@media (hover: none) { .corner__wa.k-ul::after { content: none; } }
/* без JS тема не переключается: шапка остаётся над героем и уезжает с ним */
html:not(.js) .corner { position: absolute; color: var(--paper); }
/* ПК: шапка от верхней кромки (ссылки на прежних 20 px), над молочными секциями и плоскостью цен — с фоном, чтобы слова,
   кадры и цены не проходили под ссылками; над видео и сериями прозрачная, как на телефоне */
@media (min-width: 900px) {
  .corner { top: 0; height: auto; padding: 16px var(--gut) 6px; border: 0; pointer-events: none; }   /* ссылки на прежних 20 px: 16 + 4 поля капсулы */
  .corner > * { pointer-events: auto; }
  .corner__links, .pill { display: flex; }
  .corner__wa { display: none; }
  /* капсулы под именем и под группой ссылок (фон — общий блок выше) */
  .corner__brand, .corner__right { padding: 4px 16px; margin: 0 -16px; }
  .corner__right { padding-right: 4px; margin-right: -4px; }
}

/* ---------- капсула (<900) ---------- */
.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: 2px; padding: 0 5px 0 10px; color: var(--paper); }   /* фон — стекло (блок шапки выше), без смены по теме */
.capsule a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 14px; letter-spacing: 0; white-space: nowrap; }   /* v0.9: 14 px (было 11–12 px капсом) */
.capsule a:not(.capsule__wa) { padding: 0 7px; }
.capsule a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.capsule__wa { background: var(--paper); color: var(--ink); border-radius: 999px; padding: 0 14px; gap: 6px; margin-left: auto; height: 44px; }   /* светлая кнопка на тёмном стекле — одинаково видна на любом слайде */
.capsule__wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media (min-width: 900px) { .capsule { display: none; } }
@media (max-width: 409px) { .capsule { padding-left: 6px; } .capsule a:not(.capsule__wa) { padding: 0 5px; } .capsule__wa { padding: 0 12px; gap: 5px; } }
/* узкие телефоны: у «Escribime» остаётся знак WhatsApp (44×44), подпись — для скринридера; ссылки разделов 14 px */
@media (max-width: 379px) { .capsule__wa { padding: 0; width: 44px; } .capsule__wa .capsule__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .capsule__wa svg { width: 22px; height: 22px; } }