/* slides.css — v0.8 «ведомый скролл» (только html.k-slides; без JS и при reduced-motion страница обычная).
   Каждый слайд — ровно экран (100svh): сверху поле под шапку (--hdr), снизу под капсулу телефона (--cap).
   Внутри размеры зависят и от высоты: --k (0,55…1) ставит js/kit/slides.js fit() так, чтобы слайд влез; мелкий текст
   не ниже 14 px и цели касания не ниже 44 px держит max(). Деление слайда (.is-split) и скрытие второстепенного
   (.fit-hidden) — там же. Ход между слайдами — slides.js (ПК) или CSS scroll-snap (телефон, lite: html.k-snap). */

html.k-slides { --k: 1; --hdr: 56px; --cap: 80px; --fs-label: .875rem; }   /* --k наследуется; fit() ставит его на слайд или половину */                 /* телефон: полоса 56, капсула 12 + 56 + 12; подписи 14 px */
@media (min-width: 900px) { html.k-slides { --hdr: 70px; --cap: 20px; } }
/* низкий ландшафт телефона: капсулу прячем (навигация — в полосе шапки «Escribime» и жестом), иначе слайду остаётся ≈250 px */
@media (max-width: 899px) and (max-height: 520px) { html.k-slides { --cap: 12px; } html.k-slides .capsule { display: none; } }
html.k-slides.k-snap { scroll-snap-type: y mandatory; }
/* v2.0 телефон: «оболочка без прокрутки документа» (html.k-shell, head-скрипт; сенсор без мыши). Документ ровно в экран и не
   прокручивается — прокручивается body (position: fixed, свой скролл; ход ведёт slides.js через env.js sc). Safari не прячет
   и не показывает адресную строку при свайпах: высота окна постоянна, капсула (fixed от низа + safe-area) не прыгает.
   Высоты слайдов — var(--vu) = 1 % высоты оболочки (head-скрипт и resize в env.js), а не svh. */
html.k-shell { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.k-shell body { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; }
html.k-shell.k-snap { scroll-snap-type: none; }
html.k-shell.k-snap body { scroll-snap-type: y mandatory; }
html.k-shell:is(.k-focus, .lb-open) body { overflow-y: hidden; }   /* просмотр фото / фокус серии: страница под слоем стоит */
.sl-stop { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html.k-slides.k-snap .sl-stop { scroll-snap-align: start; scroll-snap-stop: always; }
html.k-slides main > section { scroll-margin-top: 0; }

/* ---------- общий каркас слайда ---------- */
html.k-slides :where(.precios, .precios__a, .precios .calc, .manifest, .manifest__a, .manifest .como, .hs__item, .air) {   /* :where — без веса, частные правила ниже перекрывают */
  box-sizing: border-box; height: 100vh; height: calc(100 * var(--vu, 1svh)); overflow: hidden;
  padding: calc(var(--hdr) + 12px * var(--k)) var(--gut) calc(var(--cap) + 12px * var(--k));
  display: flex; flex-direction: column; justify-content: safe center; margin: 0;
  contain: layout;   /* подгонка слайда пересчитывает раскладку только внутри него (замер в fit() дешёвый) */
}
html.k-slides :where(.precios, .precios__a, .precios .calc, .manifest, .manifest__a, .manifest .como, .air) > * { flex-shrink: 0; }   /* не сжимать кнопки и строки: излишек должен быть виден fit() */
html.k-slides .is-split { height: auto !important; padding: 0 !important; display: block !important; overflow: visible !important; }
html.k-slides .fit-hidden { display: none !important; }
html.k-fitting * { transition: none !important; }
html.k-fitting .hs__plate--static, html.k-fitting .hs__main img { transform: none !important; }

/* ---------- 1. герой: текст и пауза над капсулой, кегль ужимается по высоте ---------- */
html.k-slides .hero__text { bottom: calc(var(--cap) + 16px * var(--k)); }
@media (min-width: 900px) { html.k-slides .hero__text { bottom: calc(var(--cap) + 36px * var(--k)); } }
html.k-slides .hero__pause { bottom: calc(var(--cap) + 16px * var(--k)); }
@media (min-width: 900px) { html.k-slides .hero__pause { bottom: calc(var(--cap) + 36px * var(--k)); } }
html.k-slides .hero__title { font-size: max(30px, calc(var(--fs-h1) * var(--k))); }
html.k-slides .hero__sub { margin-top: calc(20px * var(--k)); }
html.k-slides .hero__cta { margin-top: calc(24px * var(--k)); }
html.k-slides .hero__cta .btn { height: max(44px, calc(54px * var(--k))); }
/* низкий ландшафт телефона: окошко С3 как на ПК (строка — окошко 16:9 — строка), а не узкое вертикальное */
@media (max-width: 899px) and (max-height: 520px) {
  html.k-slides .slotline { padding: var(--hdr) var(--gut) var(--cap); }
  html.k-slides .slotline__p { font-size: min(9vw, calc(12 * var(--vu, 1svh))); line-height: .92; }
  html.k-slides .sl-g { display: block; text-align: center; }
  html.k-slides .slot, html.k-slides:not([data-c3="small"]) .slot { aspect-ratio: 16 / 9; width: min(62vw, calc((calc(100 * var(--vu, 1svh)) - 2.08 * min(9vw, calc(12 * var(--vu, 1svh))) - 40px - var(--hdr) - var(--cap)) * 1.78)); margin: .12em auto; }
  html.k-slides:not([data-c3="small"]) .slot img { object-position: 50% 50%; }
}

/* ---------- 2. цены + калькулятор ---------- */
html.k-slides #precios { justify-content: safe center; }
html.k-slides #precios > .wrap { width: 100%; }
html.k-slides .precios__h { font-size: max(28px, calc(var(--fs-h2) * var(--k))); }
html.k-slides .plist { margin-top: calc(32px * var(--k)); }
html.k-slides .plist li { padding: calc(16px * var(--k)) 0; }
html.k-slides .plist h3 { font-size: max(20px, calc(clamp(1.4rem, .6rem + 2.5vw, 2.75rem) * var(--k))); }
html.k-slides .plist .p { font-size: max(18px, calc(var(--fs-price) * var(--k))); }
html.k-slides .calc { margin-top: calc(32px * var(--k)); padding-top: calc(24px * var(--k)); }
html.k-slides .calc h3 { font-size: max(22px, calc(clamp(1.8rem, 1rem + 2.4vw, 3rem) * var(--k))); }
html.k-slides .calc fieldset { margin-top: calc(20px * var(--k)); }
html.k-slides .calc legend, html.k-slides .calc__mes label { margin-bottom: calc(10px * var(--k)); }
html.k-slides .seg span { height: max(44px, calc(48px * var(--k))); padding: 0 max(14px, calc(18px * var(--k))); }
html.k-slides .calc select { height: max(44px, calc(48px * var(--k))); }
html.k-slides .calc__mes { margin-top: calc(20px * var(--k)); }
/* телефон: месяц в строку с подписью, чипы компактнее (14 px, поля 12) */
@media (max-width: 899px) {
  html.k-slides .calc__mes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  html.k-slides .calc__mes label { margin: 0; flex: none; }
  html.k-slides .calc__mes select { flex: 1 1 140px; min-width: 0; padding-right: 34px; }
  html.k-slides .seg { gap: 6px; }
  html.k-slides .seg span { font-size: 14px; padding: 0 12px; }
}
html.k-slides .total { margin-top: calc(24px * var(--k)); gap: calc(10px * var(--k)) 18px; }
html.k-slides .total__v { font-size: max(24px, calc(clamp(2rem, 1rem + 3vw, 3.5rem) * var(--k))); }
html.k-slides .calc .btn { margin-top: calc(20px * var(--k)); height: max(44px, calc(54px * var(--k))); }
/* ПК от 900 px: цены слева, калькулятор справа (одним слайдом) */
@media (min-width: 900px) {
  html.k-slides .precios__g { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); align-items: center; }
  html.k-slides .precios__g .calc { margin-top: 0; border-top: 0; padding-top: 0; }
}
/* поделено: цены — один слайд, калькулятор — второй */
html.k-slides #precios.is-split .precios__g { display: block; max-width: none; }
html.k-slides #precios.is-split .precios__a, html.k-slides #precios.is-split .calc { max-width: 1120px; margin: 0 auto; border-top: 0;
  padding: calc(var(--hdr) + 12px * var(--k)) var(--gut) calc(var(--cap) + 12px * var(--k)); }
html.k-slides #precios:not(.is-split) :is(.precios__a, .calc) { height: auto; padding: 0; display: block; overflow: visible; }
/* низкий ландшафт: цены карточками в три колонки, калькулятор — колонками (что / сколько / месяц, итог, кнопка) */
@media (max-height: 520px) and (min-width: 560px) {
  html.k-slides .plist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
  html.k-slides .plist li { grid-template-columns: 1fr; align-content: start; border-bottom: 1px solid var(--paper-24); }
  html.k-slides .plist .p { grid-row: auto; grid-column: 1; align-self: start; }
  html.k-slides .calc { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0 20px; align-content: center; }
  html.k-slides .calc > h3 { grid-column: 1 / -1; }
  html.k-slides .calc__mes, html.k-slides .total, html.k-slides .calc .btn { grid-column: 3; }
  html.k-slides .calc fieldset:nth-of-type(1) { grid-column: 1; grid-row: 2 / span 3; }
  html.k-slides .calc fieldset:nth-of-type(2) { grid-column: 2; grid-row: 2 / span 3; }
  html.k-slides .calc__mes { grid-row: 2; } html.k-slides .total { grid-row: 3; } html.k-slides .calc .btn { grid-row: 4; justify-self: start; }
  html.k-slides .total__v { font-size: max(22px, calc(2rem * var(--k))); }
}

/* ---------- 3. манифест + «Cómo trabajo» ---------- */
html.k-slides #manifiesto { padding-left: var(--gut); padding-right: var(--gut); }
html.k-slides .manifest__t { font-size: max(22px, calc(var(--fs-manifest) * var(--k))); }
html.k-slides .manifest__by { margin-top: calc(28px * var(--k)); }
html.k-slides .como { margin-top: calc(48px * var(--k)); }
html.k-slides .como__h { font-size: max(22px, calc(clamp(1.8rem, 1rem + 2.4vw, 3rem) * var(--k))); }
html.k-slides .como__g { margin-top: calc(20px * var(--k)); gap: calc(24px * var(--k)); }
html.k-slides .como h4 { font-size: max(18px, calc(1.5rem * var(--k))); }
@media (min-width: 640px) { html.k-slides .como__g { grid-template-columns: repeat(3, 1fr); gap: calc(32px * var(--k)); } }
html.k-slides #manifiesto:not(.is-split) :is(.manifest__a, .como) { height: auto; padding: 0; display: block; overflow: visible; }
html.k-slides #manifiesto.is-split .como { margin-top: 0; max-width: none; }

/* ---------- 4. Historias одним полем (v0.9): одна сцена на экран, серии сменяются на месте ----------
   Кадры серий лежат друг на друге (absolute), видимость и наплыв ведёт series-stage.js (mode 'step'); плашка одна — живая
   (название, подпись, «Ver la historia», счётчик 1 / 4, ряд серий). Жест внутри сцены листает серии (slides.js, шаги группы).
   Без JS и при reduced-motion (класса k-slides нет) — обычный список серий. */
html.k-slides .hs { height: 100vh !important; height: calc(100 * var(--vu, 1svh)) !important; position: relative; overflow: hidden; }
html.k-slides .hs__sticky { position: absolute !important; inset: 0; height: auto !important; overflow: clip !important; }
html.k-slides .hs__item { position: absolute !important; inset: 0 !important; display: block !important; margin: 0; padding: 0; }
html.k-slides .hs__item > figure { position: absolute; inset: 0; height: auto; margin: 0; }
@media (hover: hover) { html.k-near-hs .hs__item > figure { will-change: opacity, transform; } }   /* v1.0: слои кадров серий — только пока Historias рядом (main.js) */   /* постоянные слои: наплыв без пересборки */
html.k-slides .hs__item + .hs__item > figure { visibility: hidden; }   /* до скрипта видна первая серия; дальше инлайн-стили series-stage */
@media (hover: hover) { html.k-near-hs .hs__main img { will-change: transform; } }   /* встречный зум 1,04→1 — слой заранее, начало смены не ждёт растра */
html.k-slides .hs__side { display: none; }
@media (min-width: 900px) {
  html.k-slides .hs__item > .hs__main { right: 40%; }
  html.k-slides .hs__item > .hs__side { display: block; left: auto; width: 40%; }
}
html.k-slides .hs__plate--static { display: none !important; }
html.k-slides .hs__plate--live { display: block !important; position: absolute; z-index: 5; margin: 0; left: var(--gut); right: var(--gut); top: auto; bottom: calc(var(--cap) + 4px); width: auto; translate: none;
  padding: calc(22px * var(--k)) calc(24px * var(--k)); }
@media (min-width: 900px) {
  html.k-slides .hs__plate--live { left: 60%; right: auto; top: auto; width: min(560px, 46vw); translate: -50% 0; bottom: calc(var(--cap) + calc(7 * var(--vu, 1svh)) * var(--k)); padding: calc(28px * var(--k)) calc(32px * var(--k)); }
}
html.k-slides .hs__plate--live .hs__title { font-size: max(30px, calc(var(--fs-plate) * var(--k))); padding-right: 64px; }   /* место под счётчик 1 / 4 */
html.k-slides .hs__plate--live .hs__open { margin-top: calc(10px * var(--k)); }
html.k-slides .hs__plate--live .hs__nav { margin-top: calc(6px * var(--k)); flex-wrap: wrap; overflow: visible; gap: 0 16px; padding: 0; }
html.k-slides .hs__plate--live .hs__nav button { letter-spacing: .04em; }
html.k-slides .hs__plate--live .hs__ind { display: none; }   /* ряд переносится на 2 строки — подчёркивание по offsetLeft врёт; активная серия — цветом и счётчиком */
/* v2.0: кнопки серий ‹ › по краям кадра (плоское стекло, 48 px), серии листаются вбок; поле серий — только вертикальная прокрутка браузера */
html.k-slides .hs { touch-action: pan-y; }
.hs__arr { display: none; }
html.k-slides .hs__arr { display: grid; place-items: center; position: absolute; z-index: 6; top: calc(var(--hdr) + (100% - var(--hdr) - var(--cap)) * .38); width: 48px; height: 48px; margin-top: -24px; border-radius: 999px;
  background: var(--glass-bg); border: var(--glass-line); color: var(--paper); transition: opacity .2s; }
html.k-slides .hs__arr svg { width: 22px; height: 22px; }
html.k-slides .hs__arr--prev { left: 10px; } html.k-slides .hs__arr--next { right: 10px; }
@media (min-width: 900px) { html.k-slides .hs__arr { top: 50%; } html.k-slides .hs__arr--prev { left: 20px; } html.k-slides .hs__arr--next { right: 64px; } }
html.k-slides .hs__arr[aria-disabled="true"] { opacity: .35; }
html.k-slides .hs__arr:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
html.k-slides .hs__plate--live .hs__nav button[aria-current] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.hs__pos { position: absolute; top: calc(16px * var(--k)); right: calc(18px * var(--k)); margin: 0; font-size: var(--fs-label); letter-spacing: .08em; color: var(--paper-80); font-variant-numeric: lining-nums tabular-nums; }
@media (min-width: 900px) { .hs__pos { top: calc(22px * var(--k)); right: calc(26px * var(--k)); } }

/* ---------- 8. Sobre mí ---------- */
html.k-slides #sobre-mi { position: relative; min-height: 0; }
@media (min-width: 900px) {
  html.k-slides #sobre-mi { display: block; padding: 0; }
  html.k-slides .air__field { position: absolute; inset: 0; }
  /* --y (0…132 в разметке) раскладывается по высоте слайда между шапкой и низом; ширина кадра × --k */
  html.k-slides .air__it, html.k-slides .air__it:nth-child(n) { width: calc(var(--w) * .72 * var(--k)); left: min(var(--x), 100% - var(--w) * .72 * var(--k));
    top: calc(var(--hdr) + 8px + var(--y) / 132 * (calc(100 * var(--vu, 1svh)) - var(--hdr) - var(--cap) - 16px - var(--w) * 1.08 * var(--k))); }
  html.k-slides .air__col { top: calc(var(--hdr) + (calc(100 * var(--vu, 1svh)) - var(--hdr) - var(--cap)) / 2); translate: 0 -50%; padding: calc(22px * var(--k)) calc(26px * var(--k)); }
}
html.k-slides .air__col h2 { font-size: max(28px, calc(var(--fs-h2) * var(--k))); }
html.k-slides .air__col p { margin-top: calc(16px * var(--k)); }
@media (max-width: 899px) {
  html.k-slides .air__col { margin: 0; max-width: none; }
  html.k-slides .air__field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: calc(20px * var(--k)); }
  html.k-slides .air__it, html.k-slides .air__it:nth-child(n) { width: auto; }
  html.k-slides .air__it figure { aspect-ratio: 1; }
  html.k-slides .air__it img { height: 100%; object-fit: cover; }
}
/* v2.3 телефон стоя (решение Дениса 08.10): вместо сетки мелких квадратов — веер из 5 крупных кадров внахлёст (3 сверху, 2 ниже),
   поле занимает всё, что осталось под текстом; кадр 3:4 по меньшему из ширины и высоты поля (cq*). Вход — air-field.js: стопка → веер.
   Наклон — свойство rotate на обёртке (transform фигуры ведёт GSAP, translate — choreo). */
@media (max-width: 899px) and (max-aspect-ratio: 1/1) {
  html.k-slides .air__field { display: block; position: relative; flex: 1 0 calc(230px * var(--k)); margin-top: calc(14px * var(--k)); container-type: size; }
  html.k-slides .air__it:nth-child(2), html.k-slides .air__it:nth-child(3), html.k-slides .air__it:nth-child(5) { display: none; }
  html.k-slides .air__it, html.k-slides .air__it:nth-child(n) { --cw: min(42cqw, 46cqh); position: absolute; width: var(--cw);
    left: calc(var(--cx) * 1cqw - var(--cw) / 2); top: calc(var(--cy) * 1cqh - var(--cw) * 2 / 3); rotate: var(--r); }
  html.k-slides .air__it figure { aspect-ratio: 3 / 4; box-shadow: 0 6px 18px rgb(40 30 20 / .18); }
  html.k-slides .air__it img { height: 100%; object-fit: cover; }
  html.k-slides .air__it:nth-child(1) { --cx: 23; --cy: 35; --r: -5deg; z-index: 1; }
  html.k-slides .air__it:nth-child(8) { --cx: 51; --cy: 33; --r: 2deg; z-index: 2; }
  html.k-slides .air__it:nth-child(4) { --cx: 78; --cy: 36; --r: 5deg; z-index: 1; }
  html.k-slides .air__it:nth-child(6) { --cx: 34; --cy: 66; --r: -3deg; z-index: 3; }
  html.k-slides .air__it:nth-child(7) { --cx: 67; --cy: 65; --r: 3deg; z-index: 4; }
  html.k-slides .air__it:nth-child(6) img { object-position: 50% 100%; }   /* пара на холме — внизу кадра */
}
@media (max-width: 899px) and (min-aspect-ratio: 4/3) { html.k-slides #sobre-mi { flex-direction: row; align-items: center; gap: 20px; } html.k-slides .air__field { flex: 1; margin: 0; grid-template-columns: repeat(4, 1fr); } html.k-slides .air__col { flex: 1.2; } }

/* ---------- 9. контакты + подвал — один последний слайд ---------- */
html.k-slides .contacto { box-sizing: border-box; min-height: calc(calc(100 * var(--vu, 1svh)) - var(--foot-h, 0px)); display: flex; flex-direction: column; justify-content: safe center;
  padding: calc(var(--hdr) + 8px * var(--k)) var(--gut) calc(16px * var(--k)); }
html.k-slides .contacto h2 { font-size: max(28px, calc(var(--fs-h2) * var(--k))); }
html.k-slides .contacto ul { margin: calc(24px * var(--k)) 0; }
html.k-slides .contacto .btn { height: max(44px, calc(54px * var(--k))); }
html.k-slides .foot { padding: calc(24px * var(--k)) var(--gut) calc(var(--cap) + 8px); }
html.k-slides .foot .wm__t { font-size: min(var(--wm-size, 12vw), calc(calc(15 * var(--vu, 1svh)) * var(--k))); }
html.k-slides .foot__links { margin-top: calc(14px * var(--k)); }
html.k-slides .foot__small { font-size: 14px; }

/* ---------- индикатор слайдов (ПК, справа) ---------- */
.sl-dots { display: none; }
@media (min-width: 900px) and (min-height: 560px) {
  html.k-slides .sl-dots { display: flex; flex-direction: column; position: fixed; z-index: 65; right: 8px; top: 50%; translate: 0 -50%; margin: 0; padding: 4px 0; list-style: none; border-radius: 999px; }   /* стекло — base.css */
  html.k-slides .sl-dots button { width: 44px; height: 44px; display: grid; place-items: center; }   /* v0.9: 44×44 (было 44×36) */
  html.k-slides .sl-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px rgb(247 245 240 / .75); transition: transform .3s cubic-bezier(.65, 0, .35, 1), background-color .3s; }
  html.k-slides .sl-dots button[aria-current]::before { background: var(--paper); transform: scale(1.4); }
  html.k-slides .sl-dots button:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }
}

/* очень узкий телефон (<360): плашка «Sitio de ejemplo» в полосе шапки не помещается рядом с именем и «Escribime» —
   прячем её там (пометка «ejemplo» остаётся у цены героя, у цен, в калькуляторе и в подвале) */

/* вход: точки индикатора не поверх занавеса; счётчик фиксированной высоты (смена цифр не сдвигает раскладку, CLS 0) */
html.intro .sl-dots { visibility: hidden; }
.intro__count { height: 1.12em; width: 3.3ch; overflow: clip; display: flex; justify-content: flex-end; }
.intro__count .k-slot__c { width: 1ch; text-align: center; }   /* ячейка цифры фиксированной ширины (пустая ведущая тоже) */
.intro__count .k-slot__d.is-out { right: 0; }   /* уходящая цифра на том же месте, что была (без сдвига по x) */