/* /juegos/ — первый экран с порталом в миры игр (окно 6, 29.10; владелец: «чёт тут не так с первой картинкой» — кольцо было прижато
   к краю блока и обрезано, блок — тёмный прямоугольник с жёсткими краями). Подключается только на /juegos/ (index.js → gamesPage).
   ПК: портал — фон первого экрана во всю ширину окна, кольцо справа от центра целиком, заголовок и текст слева на затемнении;
   края растворяются в фон страницы (маски сверху и снизу, без рамки). Телефон: кольцо по центру над заголовком.
   Ролик поверх кадра (тот же первый кадр): играет на экране (site.js, data-inview); «меньше движения» и лёгкий режим — кадр. */
.pv-gphero .sx-intro { min-height: clamp(400px, 50vh, 540px); align-content: center; }
.pv-gphero .sx-intro::before { display: none; }   /* общее затемнение вступления (sections.css) не нужно — своё ниже */

.gp-portal { position: absolute; z-index: -1; top: -128px; bottom: -56px; left: calc(50% - 50vw); width: 100vw; pointer-events: none; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); }
/* кадр — в правых ¾ окна (кольцо целиком, не во всю высоту экрана), к левому краю растворяется */
.gp-portal picture, .gp-portal img, .gp-portal-vid { position: absolute; top: 0; bottom: 0; left: 20%; width: 78%; display: block; height: 100%; max-width: none;   /* у video ширина — явно: при auto он берёт свою (1280) */
    object-fit: cover; object-position: 66% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28%, #000 92%, transparent 100%); }
.gp-portal picture img { inset: 0; left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
/* колесо уходит, пока раздаются карточки ленты, и проявляется, когда последняя встала на место (владелец 31.10: «во время
   проигрывания анимации это колесо должно уходить» — оно висело над краем пятой); без JS, в лёгком режиме и при «меньше движения» — сразу на месте; только ПК и планшет */
.gp-portal { transition: opacity var(--aw-dur-slow) var(--aw-ease-out), transform var(--aw-dur-slow) var(--aw-ease-out); }
@media (min-width: 768px) { html:not(.no-js):not(.lite) .pv-gphero:has(.pv-gprail:not(.dealt)) .gp-portal { opacity: 0; } }   /* телефон: кольцо над заголовком, ленту не задевает */
/* и пока карточка ленты выбрана мышью или клавиатурой (game-fx.js → .fx-on): фон — ролик игры на весь экран, колесо уходит вместе с заголовком
   и возвращается с ним (владелец 31.10: «это колесо перекрывает весь видос»); в лёгком режиме — пока играет клип в карточке. Телефон — без этого */
@media (hover: hover) and (pointer: fine) {
    .pv-gphero:has(.game.fx-on) .gp-portal { opacity: 0; transform: scale(0.96); transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
    /* с заголовком уходят и лид, и строка над лентой «7 experiencias … / 1–4 / 7» (владелец 31.10: «этот текст остаётся, непонятно почему») */
    .gw-active .pv-gphero:has(.game.fx-on) :is(.sx-text, .gp-railhead) { opacity: 0; transition: opacity 0.35s ease-out; }
}
/* затемнение под текстом — слева, к кольцу сходит на нет */
.gp-portal::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(13, 13, 16, 0.9) 0%, rgba(13, 13, 16, 0.72) 30%, rgba(13, 13, 16, 0.2) 52%, rgba(13, 13, 16, 0) 64%); }

@media (min-width: 768px) {
    .pv-gphero .sx-intro { justify-items: start; text-align: left; }
    .pv-gphero .sx-intro-body { max-width: min(560px, 46%); }
    .pv-gphero .sx-intro .head { justify-items: start; }
    .pv-gphero .sx-intro .sx-text { margin-inline: 0; }
}

/* планшет и узкий ПК: блок высокий и узкий — кадр сдвинут, чтобы кольцо не срезал правый край */
@media (min-width: 768px) and (max-width: 1099px) {
    .gp-portal picture, .gp-portal img, .gp-portal-vid { object-position: 80% 50%; }
}

/* телефон: кольцо по центру за меткой и заголовком (фоном, не отдельным блоком — карточки ленты остаются на первом экране), под текстом затемнение */
@media (max-width: 767px) {
    .pv-gphero .sx-intro { min-height: 0; padding-top: 24vw; }
    .gp-portal { top: -112px; bottom: auto; height: calc(112px + 24vw + 220px);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 100%); }
    .gp-portal picture, .gp-portal img, .gp-portal-vid { left: 0; width: 100%; object-position: 97% 50%; -webkit-mask-image: none; mask-image: none; }
    .gp-portal picture img { object-position: 97% 50%; }
    .gp-portal::after { background: radial-gradient(90% 46% at 50% 74%, rgba(13, 13, 16, 0.78), rgba(13, 13, 16, 0.2) 70%, transparent), linear-gradient(0deg, rgba(13, 13, 16, 0.85) 0%, rgba(13, 13, 16, 0) 36%); }
    .gp-more { display: none; }
}

/* ---------- Лента «01–07» под первым экраном (владелец 29.10: «непонятно, что есть ещё игры, кроме этих четырёх, и что вниз мотать») ----------
   Первый экран ниже — карточки выше; над лентой «7 experiencias» и «1–4 / 7» (web/juegos-hero.js); на ПК карточки уже — видно 4 и край пятой;
   стрелки — общие (.rail-btn, site.css / site.js); подсказка прокрутки вниз под первым экраном */
/* текст — сверху, под шапкой, как на других страницах (был по центру высоты: без метки-капсулы заголовок съехал вниз — владелец 31.10, /en/games/) */
@media (min-width: 768px) { .pv-gphero .sx-intro { min-height: clamp(300px, 36vh, 400px); padding: 8px 0 4px; align-content: start; } .pv-gphero .sx-intro-body { max-width: min(640px, 54%); } }
.gp-railhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 -18px; }
.gp-count { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; }
.gp-count b { font-family: var(--aw-font-mono); font-weight: 700; font-size: 1.15rem; color: var(--aw-accent); margin-right: 4px; }
.gp-range { margin: 0; flex: none; font-size: 0.86rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.62); }
@media (min-width: 1024px) { .pv-gprail .top-rail { grid-auto-columns: 262px; } }
@media (min-width: 1440px) { .pv-gprail .top-rail { grid-auto-columns: 272px; } }
.pv-gprail .rail-btn { top: 42%; }
.pv-gprail .rail { cursor: grab; }
.pv-gprail .rail.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.pv-gprail .rail.is-drag a { pointer-events: none; }
.pv-gprail img { -webkit-user-drag: none; }

.gp-scroll { display: flex; justify-content: center; margin: 22px 0 0; transition: opacity 0.5s var(--aw-ease-out); }
.gp-scroll span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--aw-font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.gp-scroll span::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--aw-accent); border-bottom: 2px solid var(--aw-accent); transform: rotate(45deg) translateY(-3px);
    animation: gp-nudge 1.6s var(--aw-ease-out) infinite; }
@keyframes gp-nudge { 50% { translate: 0 4px; } }
.gp-scroll.gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gp-scroll span::after { animation: none; } }
.lite .gp-scroll span::after { animation: none; }   /* лёгкий режим — подсказки видны, без движения */

/* ---------- Телефон и планшет (< 1024 px): игры сеткой, без полноэкранных сцен (окно 23, П4 мобильной версии; владелец 5.11 — «всё по рекомендации»,
   docs/design/mobile-redesign/juegos.md, развилка А). ПК не меняется.
   • вместо ленты «01–07» — сетка игр .m-grid2 (2 колонки, 3 — от 768 px): все 7 игр на ≈ 1,5 экрана, с ценой «desde»; фильтр — над сеткой и прячет и плитки (juegos-hero.js);
   • сцены игр — короткие блоки без ролика на фоне: ролик не грузится (display: none — наблюдатель site.js его не видит), игра на телефоне
     показывает свой ролик на своей странице; заголовки и тексты сцен остаются в разметке (SEO); сцена свёрнута — факты, название, цена, «Reservar», остальное по «Ver más»;
   • плитки сценариев — рядом с прокруткой пальцем; точки-меню сцен (22×24 px) не нужны; таблица сравнения — 3 колонки, без прокрутки вбок. */
@media (max-width: 1023px) {
    .pv-gphero { display: flex; flex-direction: column; }
    .pv-gphero > .gp-filter { order: 1; margin: 8px calc(-1 * var(--gut, var(--aw-gutter))) 0; padding: 0 var(--gut, var(--aw-gutter)) 6px; }
    .pv-gphero > .gp-railhead { order: 2; margin: 14px 0 0; }
    .gp-range, .gp-more, .gp-scroll, .pv-gprail .rail-btn { display: none; }

    /* сетка игр — общий компонент (.m-grid2 + .gtile, web/mobile.css, окно 6; разметка — index.js gpTile); лента «01–07» — только ПК */
    .pv-gprail { display: none; }
    .pv-gphero > .gp-grid { order: 3; margin-top: 12px; }
    .gp-grid .gtile.gp-off { display: none; }   /* скрыта фильтром */
    .pv-gphero > .gp-lead-more { order: 4; margin: 20px 0 0; max-width: none; text-align: start; }

    .side.side-gp { display: none; }

    .gstage { --ov: 0px; min-height: 0; margin-top: 0; overflow: visible; display: block; pointer-events: auto; isolation: auto; scroll-margin-top: 76px; }
    .gstage::before, .gstage-media { display: none; }
    .gstage-in { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid var(--hair); }   /* minmax(0) — ряд плиток не раздвигает колонку */
    .gstage-copy, .gstage-list { min-width: 0; }
    .gp-hero + .gstage .gstage-in { border-top: 0; }
    .gstage-kick { margin: 0 0 8px; font-size: 0.76rem; line-height: 1.5; letter-spacing: 0.08em; color: var(--aw-accent-soft); }
    .gstage-title { margin: 0 0 12px; font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1; }
    .gstage-pitch { margin: 0 0 12px; font-size: 1rem; color: rgba(255, 255, 255, 0.84); }
    /* свёрнутая сцена (juegos-hero.js, «Ver más»): факты, название, цена и «Reservar»; остальное — по нажатию, в разметке целиком */
    .gstage.gp-fold :is(.gstage-pitch, .kid-badge, .gstage-price small, .gstage-list, .hero-cta .btn-ghost) { display: none; }
    .gstage.gp-fold .gstage-in { gap: 0; padding-top: 22px; padding-bottom: 22px; }
    .gstage.gp-fold .gstage-title { margin-bottom: 8px; }
    .gstage.gp-fold .gstage-price { margin: 0; }
    .gp-more-btn { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--aw-accent-soft);
        font: 600 0.95rem var(--aw-font-body); cursor: pointer; }
    .gstage-price { margin: 0 0 16px; }
    .gstage-price b { font-size: 1.7rem; }
    .gstage .hero-cta { display: grid; gap: 10px; }
    .gstage .hero-cta .btn { width: 100%; justify-content: center; }
    .gstage .hero-cta .btn-primary { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hair); color: var(--aw-text); box-shadow: none; }   /* красная на экране — одна, в нижней полосе */
    .gstage .hero-cta .btn-primary .ic { background: rgba(255, 255, 255, 0.08); }
    .gstage-list ul { display: grid; grid-auto-flow: column; grid-auto-columns: min(40vw, 190px); grid-template-columns: none; gap: 10px; overflow-x: auto;
        margin: 0 calc(-1 * var(--gut, var(--aw-gutter))); padding: 0 var(--gut, var(--aw-gutter)) 4px; scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gut, var(--aw-gutter)); scrollbar-width: none; overscroll-behavior-x: contain; }
    .gstage-list ul::-webkit-scrollbar { display: none; }
    .gstage-list li { scroll-snap-align: start; }

    #comparar .gp-table { overflow-x: visible; }
    #comparar .gp-table .tiers { min-width: 0; width: 100%; }
    #comparar .gp-table :is(th, td):nth-child(n+4) { display: none; }
}
@media (min-width: 1024px) { .gp-grid { display: none; } }   /* ПК: лента и сцены, как были */

/* Без сдвига вёрстки при загрузке (замер окна 2 после П4: CLS /juegos/ 0,14 на медленной сети, оба клуба). web/pages.css подключается в конце <body>
   и приходит позже первой отрисовки: его общие правила (C3 — вступление без фото: padding 0, margin-bottom 0; отступы ленты и фильтра /juegos/)
   меняли первый экран уже на глазах — заголовок и сетка уезжали вверх на ~100 px. Здесь — те же значения заранее (этот файл грузится до
   первой отрисовки), вид после загрузки прежний */
.pv-gphero .sx-intro { padding: 0; margin-bottom: 0; }
.pv-gprail { margin-top: 6px; }
.pv-gprail .top-rail { padding-top: 38px; }
.pv-gphero .gp-filter { margin-top: 8px; }

/* Окно 6, 11.11 (владелец, iPhone /es/juegos/: заголовок поверх яркого портала читался плохо): на телефоне портал — баннером НАД заголовком,
   его низ гаснет до начала текста; заголовок и подзаголовок — на ровном тёмном фоне. ПК и планшет — как были */
@media (max-width: 767px) {
    .pv-gphero .sx-intro { padding-top: 46vw; }
    .gp-portal { height: calc(112px + 52vw);
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%); }
    .gp-portal picture, .gp-portal img, .gp-portal-vid, .gp-portal picture img { object-position: 50% 50%; }
    .gp-portal::after { background: linear-gradient(0deg, rgba(13, 13, 16, 0.9) 0%, rgba(13, 13, 16, 0) 40%); }
}