/* =====================================================================
   Набор секций для страниц сайта (окно 6, 29.10; описание — docs/design/sections.md).
   Вместо однообразного «H2 + фото + серый текст»: сцена (фото с текстом поверх), bento (фото + текст + факты),
   липкое фото, факты крупными цифрами, плитки с иконками, вступление по центру на фоне фото.
   Эталон — главная и /es/r/: тёмное стекло, двойная рамка, один красный акцент. Только токены /vendor/aw-tokens.css.
   Появление — классы .rv / .d1–.d4 главной (site.js); параллакс фото — CSS (animation-timeline), без скрипта.
   Движение — только transform / opacity / scale / translate; «меньше движения» — без движения (в конце файла).
   Телефон (до 1024 px) — всё в один столбец, фото сверху, текст под ним; без горизонтальной прокрутки.
   ===================================================================== */

/* ---------- Текст секций: крупный и светлый, строка ≤ 60 знаков (контраст ≈ 13:1 на фоне страницы) ---------- */
.sx-text { max-width: 60ch; margin: 0 0 1em; font-size: 1.125rem; line-height: 1.65; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; overflow-wrap: break-word; }
.sx-text:last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .sx-text { font-size: 1.1875rem; } }
.sx-text b { color: var(--aw-text); }
.sx-close { margin: 6px 0 20px; font-family: var(--aw-font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: var(--aw-tracking-display); }
.sx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sx-cta .btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.2; }

/* ---------- Фото секции: параллакс при прокрутке (как .duo-img главной) и лёгкое приближение при наведении ---------- */
.sx-photo { position: relative; overflow: hidden; background: #111; isolation: isolate; }
.sx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--aw-ease-out); }
@media (hover: hover) and (pointer: fine) { .sx-photo:hover img { scale: 1.05; } }
@supports (animation-timeline: view()) {
    .sx-photo img { scale: 1.12; animation: sx-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @media (hover: hover) and (pointer: fine) { .sx-photo:hover img { scale: 1.17; } }
    @keyframes sx-par { from { translate: 0 -4%; } to { translate: 0 4%; } }
}
/* живой ролик поверх фото (MEDIA…blocks[i].v): без параллакса и приближения — кадр уже подобран, края не срезаем; играет на экране (site.js, data-inview) */
.sx-photo .sx-vid, .wh-photo .sx-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-intro-media .sx-vid { opacity: 0.6; filter: saturate(0.85); }   /* как фото вступления — приглушён */

/* ---------- Двойная рамка: «стекло в оправе», как .shell/.core главной ---------- */
.sx-tile { position: relative; min-width: 0; padding: 6px; border-radius: 30px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--aw-line); }
.sx-core { height: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), #0e0e11;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08); }
.sx-pad { padding: 28px 24px; }
@media (min-width: 1024px) { .sx-pad { padding: 40px 40px; } }

/* ===================== 1. Сцена: фото во всю ширину контейнера, текст поверх на градиенте ===================== */
/* <div class="sx-stage [sx-stage--end] rv"><div class="sx-photo sx-stage-media"><img></div><div class="sx-stage-body">…</div></div> */
.sx-stage { position: relative; display: grid; border-radius: 30px; overflow: hidden; border: 1px solid var(--aw-line-strong); background: #0e0e11; box-shadow: var(--aw-shadow-card); }
.sx-stage-media { aspect-ratio: 4 / 3; }
.sx-stage-media:has(.sx-vid) { aspect-ratio: 16 / 9; }   /* ролик сцены 16:9: на телефоне все люди в кадре целиком */
.sx-stage-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, #0e0e11); }
.sx-stage-body { position: relative; z-index: 1; padding: 4px 22px 28px; }
@media (min-width: 1024px) {
    .sx-stage { min-height: clamp(520px, 70vh, 720px); align-items: end; }
    .sx-stage-media { position: absolute; inset: 0; aspect-ratio: auto; }
    .sx-stage-media::after { background: linear-gradient(90deg, rgba(12, 12, 14, 0.94) 0%, rgba(12, 12, 14, 0.78) 34%, rgba(12, 12, 14, 0.15) 66%, transparent 80%),
        linear-gradient(0deg, rgba(12, 12, 14, 0.7), transparent 45%); }
    .sx-stage-body { max-width: 600px; padding: 56px; }
    /* текст справа */
    .sx-stage--end .sx-stage-body { justify-self: end; }
    .sx-stage--end .sx-stage-media::after { background: linear-gradient(270deg, rgba(12, 12, 14, 0.94) 0%, rgba(12, 12, 14, 0.78) 34%, rgba(12, 12, 14, 0.15) 66%, transparent 80%),
        linear-gradient(0deg, rgba(12, 12, 14, 0.7), transparent 45%); }
}

/* ===================== 2. Bento: большое фото + текст + факты + кнопка ===================== */
/* <div class="sx-bento"><div class="sx-tile sx-b-photo"><div class="sx-core sx-photo"><img></div></div>
       <div class="sx-tile sx-b-text"><div class="sx-core sx-pad">…</div></div><div class="sx-facts">…</div></div> */
.sx-bento { display: grid; gap: 14px; }
.sx-b-photo .sx-core { aspect-ratio: 4 / 3; }
/* ПК: фото всегда 4:3 (кадр целиком), факты — под фото и растягиваются до высоты текста, текст — во всю высоту рядом.
   Раньше фото тянулось на высоту текста и фактов — узкая полоса (571×866 при 1220 px), из кадра 4:3 оставалась середина
   (владелец 29.10: «кадр плохо подобран» — видна рука, лица срезаны). До 1200 px колонка фото узкая — bento столбиком, как на планшете */
@media (min-width: 1200px) {
    .sx-bento { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; }
    .sx-b-photo { grid-column: 1; grid-row: 1; }
    .sx-bento > .sx-facts { grid-column: 1; grid-row: 2; }
    .sx-b-text { grid-column: 2; grid-row: 1 / span 2; }
    .sx-bento > .sx-facts .sx-fact { align-content: center; }   /* высокие плитки: цифра и подпись вместе, по центру (ревизор 29.10: «между ними пусто») */
    /* фото справа: колонки явно */
    .sx-bento--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .sx-bento--rev .sx-b-photo, .sx-bento--rev > .sx-facts { grid-column: 2; }
    .sx-bento--rev .sx-b-text { grid-column: 1; }
}

/* ===================== 3. Факты крупными цифрами ===================== */
/* <ul class="sx-facts"><li class="sx-tile"><div class="sx-core sx-fact"><b>2–12</b><span>jugadores</span></div></li>…</ul> */
.sx-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sx-facts .sx-tile { padding: 5px; border-radius: 26px; }
.sx-fact { display: grid; align-content: start; gap: 6px; padding: 18px 14px; border-radius: 21px; }
.sx-fact b { font-family: var(--aw-font-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(1.5rem, 6.2vw, 2.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--aw-text); white-space: nowrap; }
.sx-fact b em { font-style: normal; color: var(--aw-accent); }
.sx-fact span { font-size: 0.86rem; line-height: 1.3; color: rgba(255, 255, 255, 0.72); overflow-wrap: break-word; }
.sx-fact span strong { display: block; margin-bottom: 2px; font-size: 1rem; font-weight: 600; color: var(--aw-text); }   /* Familias (владелец 31.10): слово под цифрой — жирно, ниже мелкая подпись */
/* на телефоне в три колонки слова подписи не помещаются (320–479: «jugador-es», «recomend-ada») — плитки строками: цифра слева, подпись справа */
.sx-facts--2l .sx-fact { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) {
    .sx-facts--2l { grid-template-columns: minmax(0, 1fr); }
    .sx-facts--2l .sx-fact { grid-template-columns: 4.2em minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 14px 16px; }
    .sx-facts--2l .sx-fact > * { justify-self: start; text-align: left; }
}
@media (min-width: 1024px) { .sx-fact { padding: 24px 22px; } .sx-fact span { font-size: 0.95rem; } }
/* длинные значения («30,40 €»): на телефоне 2 колонки, последняя плитка — на всю ширину (окно 4, Cumpleaños) */
@media (max-width: 599px) {
    .sx-facts--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sx-facts--wide > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ===================== 4. Липкое фото: фото стоит, пока листается текст (ПК) ===================== */
/* <div class="sx-sticky"><div class="sx-tile sx-sticky-media"><div class="sx-core sx-photo"><img></div></div><div class="sx-sticky-body">…</div></div> */
.sx-sticky { display: grid; gap: 24px; }
.sx-sticky + * { margin-top: var(--aw-space-7); }   /* следующий блок раздела (сетка игр на Amigos) — не вплотную к фото (владелец 29.10: «блоки вплотную») */
/* то же после сцены и после вступления без фото (pages.css обнуляет ему отступ снизу): сетка игр и карточки не вплотную
   (владелец 31.10, Amigos «¡Todos contra el juego!» → игры, Niños «¿Desde qué edad…?» → карточки: «расстояние между блоками») */
:is(.sx-stage, .sx-intro:not(:has(.sx-intro-media)):not(.pv-gphero *)) + * { margin-top: var(--aw-space-7); }
.sx-sticky-media .sx-core { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
    .sx-sticky { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: 64px; align-items: start; }
    .sx-sticky-media { position: sticky; top: 110px; }
    .sx-sticky-media .sx-core { aspect-ratio: 4 / 5; }
    .sx-sticky--rev .sx-sticky-media { order: 2; }
    /* full — кадр 4:3 целиком, без вертикальной обрезки 4:5 (Amigos «Equipo contra equipo»: на фото владельца четверо во всю ширину — 31.10) */
    .sx-sticky--full .sx-sticky-media .sx-core { aspect-ratio: 4 / 3; }
    /* …и крупно: колонка фото шире текста, фото и текст по центру по высоте (владелец 31.10: «очень маленькое фото» — было ~540×400 рядом с текстом) */
    .sx-sticky--full { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; }
    .sx-sticky--full .sx-sticky-media .sx-core { aspect-ratio: 5 / 4; }   /* по высоте — как текст рядом; с краёв кадра 4:3 уходит по ~3 %, все в кадре */
}

/* ===================== 5. Плитки с иконками (место, удобства, правила) ===================== */
/* <ul class="sx-icons"><li class="sx-tile"><div class="sx-core sx-icon">[svg]<span>Parking gratuito</span></div></li>…</ul> */
.sx-icons { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.sx-icons .sx-tile { padding: 5px; border-radius: 24px; }
.sx-icon { display: grid; gap: 12px; align-content: start; padding: 18px 16px; border-radius: 19px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.sx-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--aw-accent-soft); background: var(--aw-accent-10); border: 1px solid var(--aw-accent-25); }
.sx-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-icon small { display: block; margin-top: 2px; font-weight: 400; font-size: 0.86rem; color: rgba(255, 255, 255, 0.68); }

/* ===================== 6. Место: фото + текст + плитки с иконками ===================== */
/* <div class="sx-place"><div class="sx-tile sx-place-media"><div class="sx-core sx-photo"><img></div></div><div class="sx-place-body">…<ul class="sx-icons">…</ul></div></div> */
.sx-place { display: grid; gap: 24px; }
.sx-place-media .sx-core { aspect-ratio: 16 / 11; }
@media (min-width: 1024px) {
    .sx-place { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
    .sx-place--rev .sx-place-media { order: 2; }
    .sx-icons { margin-top: 26px; }
}
@media (max-width: 1023px) { .sx-place-body .sx-icons { margin-top: 22px; } }

/* ===================== 7. Вступление по центру на фоне фото (перед карточками) ===================== */
/* <div class="sx-intro"><div class="sx-intro-media sx-photo"><img></div><div class="sx-intro-body rv">eyebrow, H2, текст, кнопки</div></div> */
.sx-intro { position: relative; display: grid; justify-items: center; text-align: center; margin-bottom: 36px; padding: 48px 0 8px; isolation: isolate; }
/* Фото растворяется в фон страницы со всех сторон — прямоугольно, без круга (владелец 29.10: «сверху головы обрезаны — пусть расплывается»,
   потом — «очень сильное круглое сияние»): две линейные маски (по бокам и сверху-снизу) пересекаются. Под фото — свой нейтрально-тёмный слой:
   красная «жидкость» фона (.page-fx) не просвечивает сквозь детей и не даёт пятна-прожектора; видна только у самых краёв, где фото уже растворилось.
   Фото приглушено, под текстом — лёгкое нейтральное затемнение (::after), текст читается без яркого круга */
.sx-intro-media { position: absolute; inset: 0 0 auto; z-index: -1; height: 100%; border-radius: 30px; background: #0f0f12;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 26%, #000 70%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(transparent, #000 26%, #000 70%, transparent);
    mask-composite: intersect; }
.sx-intro-media img { opacity: 0.6; filter: saturate(0.85); }
/* фон страницы (красная «жидкость») вокруг блока — приглушён нейтрально-тёмным, края растворены: блок не горит прожектором.
   По бокам — не дальше края экрана (calc(50% - 50vw)), иначе на телефоне страница шире экрана и ездит вбок */
.sx-intro::before { content: ''; position: absolute; inset: -14% max(-8%, calc(50% - 50vw)); z-index: -2; pointer-events: none; background: radial-gradient(closest-side, rgba(15, 15, 18, 0.78), rgba(15, 15, 18, 0.5) 60%, transparent); }
.sx-intro-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 42% at 50% 56%, rgba(12, 12, 14, 0.62), rgba(12, 12, 14, 0.2) 70%, transparent); }
.sx-intro-body { max-width: 760px; }
.sx-intro .head { justify-items: center; margin-bottom: 16px; }
.sx-intro .sx-text { margin-inline: auto; }
.sx-intro .sx-cta { justify-content: center; }
@media (min-width: 1024px) { .sx-intro { padding: 56px 0 24px; margin-bottom: 48px; } }   /* сверху 56 (было 96): с отступом секции давало пустую полосу ~200 px (владелец 29.10) */

/* ===================== 8. Плитки-разделы: несколько коротких разделов сеткой ===================== */
/* вместо нескольких «H2 + текст» подряд; у плитки может быть id (якорь из карточек) */
/* <div class="sx-cards"><article class="sx-tile rv d1" id="…"><div class="sx-core sx-pad sx-card"><h2 class="sx-card-h">…</h2><p class="sx-text">…</p><div class="sx-cta">…</div></div></article>…</div> */
.sx-cards { display: grid; gap: 14px; }
@media (min-width: 768px) { .sx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-card { display: flex; flex-direction: column; gap: 12px; }
.sx-card-h { margin: 0 0 4px; font-family: var(--aw-font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.1; letter-spacing: var(--aw-tracking-display); }
.sx-card .sx-text { margin: 0; font-size: 1.05rem; }
.sx-card .sx-cta { margin-top: auto; padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
    .sx-photo img { animation: none; scale: 1; transition: none; }
    .sx-photo:hover img { scale: 1; }
}

/* ---------- Окно 6, 29.10: отступ после первого экрана (.g-hero) — ритм главной (.hero4 + .section 40 px) ----------
   Владелец (Familias): «тут очень большой разрыв» — после hero шёл обычный отступ раздела 140 px (ПК) / 96 px (телефон) + низ hero:
   пустая полоса 150–180 px. Hero и так растворяется в фон (градиент снизу) — следующий блок встаёт вплотную к этому растворению.
   Направления, Empresas, Cumpleaños, страницы игр */
.g-hero + .section { padding-top: 32px; }
@media (min-width: 1024px) { .g-hero + .section { padding-top: 48px; } }
/* Видимый зазор «низ первого экрана → верх следующего заголовка» — как на главной (~67 px телефон / ~89 px ПК), владелец 29.10
   («та же история» на Niños): у вступления по центру сразу под первым экраном свой верхний отступ не нужен — отступа секции хватает.
   Первый экран без фото (.section.first: подарочная карта, Dónde estamos, Familias / Amigos Аликанте) — тот же ритм вместо 96 / 140 px */
:is(.g-hero, .section.first) + .section > .sx-intro:first-child { padding-top: 0; }
.section.first + .section { padding-top: 64px; }
@media (min-width: 1024px) { .section.first + .section { padding-top: 80px; } }

/* ---------- Окно 6, 29.10: подарочная карта ----------
   «Un regalo para cada ocasión» (страница карты): ролики в карточках (web/gift-occ.js) — поверх кадра-постера; текст шире и без пустоты снизу.
   Баннер «Regala una aventura» (главная): на телефоне и планшете ролик со шлемом и бантом — отдельной полосой сверху, целиком и светлее,
   текст и кнопка ниже на тёмном фоне карточки (владелец: «этот видос очень плохо отображается на телефоне» — шлем был за текстом и в тени) */
.pv-occ .sx-core { display: flex; flex-direction: column; }
.pv-occ .sx-pad { flex: 1; padding: 20px 22px 24px; }
.pv-occ .occ-vid { pointer-events: none; }
@media (max-width: 767px) {
    .gift { padding-top: calc(75% + 4px); }
    .gift-bg { inset: 0 0 auto; height: auto; aspect-ratio: 4 / 3; }
    .gift-bg video { object-position: 82% 55%; filter: brightness(0.92) contrast(1.05); }
    .gift-bg::after { background: linear-gradient(180deg, rgba(11, 11, 14, 0) 55%, rgba(11, 11, 14, 0.7) 82%, #0b0b0e 100%); }
}