/* =====================================================================
   Общие части сайта (окно 6, 29.10; владелец: «меню очень страшно выглядит», «кнопки не отцентрованы», «нет названия в шапке»,
   «когда тянешь страницу — не наш цвет», «язык — одним нажатием»). Подключается после site.css на всех страницах (layout).
   Только токены /vendor/aw-tokens.css; движение — transform/opacity, «меньше движения» — без движения (в конце файла).
   ===================================================================== */

/* Цвет страницы и при «оттяжке» сверху/снизу (iOS Safari, Chrome Android) — фон у html, в site.css (у body фона нет, иначе он закрывает .page-fx) */

/* ---------- Кнопки: одна высота у сплошных и контурных, подпись и кружок ровно по центру ---------- */
/* контурная кнопка на 2 px выше сплошной (рамка 1 px сверху и снизу) — выравниваем, кружок на том же отступе справа */
.btn-ghost { padding-top: 5px; padding-bottom: 5px; padding-right: 7px; }
.btn-ghost.btn-sm { padding-top: 3px; padding-bottom: 3px; padding-right: 5px; }
.btn-ghost.btn-plain { padding-right: 24px; }
/* подпись — по центру строки (у Manrope текст в строке чуть выше середины) */
.btn > span:not(.ic), .btn > .rp-btn-t { line-height: 1.2; padding-top: 1px; }
/* Телефон: кнопки одной группы — столбиком одной ширины; подпись по центру кнопки, кружок прижат справа на равном отступе
   (раньше каждая кнопка была своей ширины и центровалась отдельно — подписи и кружки стояли вразнобой) */
@media (max-width: 599px) {
    main :is(.hero-cta, .sx-cta) { flex-direction: column; align-items: stretch; }
    main :is(.hero-cta, .sx-cta) > .btn { position: relative; width: 100%; max-width: none; justify-content: center; text-align: center; white-space: normal; padding-left: 56px; padding-right: 56px; }
    main :is(.hero-cta, .sx-cta) > .btn > .ic { position: absolute; top: 0; bottom: 0; right: 6px; margin: auto 0; }
    main :is(.hero-cta, .sx-cta) > .btn-ghost > .ic { right: 5px; }
    main :is(.hero-cta, .sx-cta) > .btn-plain { padding-left: 24px; padding-right: 24px; }
    main :is(.hero-cta, .sx-cta) > .dv-play { padding-left: 56px; }
    main :is(.hero-cta, .sx-cta) > .dv-play > .dv-play-ic { position: absolute; top: 0; bottom: 0; left: 6px; margin: auto 0; }
}

/* ---------- Шапка: логотип и название «ANOTHER WORLD» — и на узком телефоне ---------- */
.nav-logo { gap: 10px; }
.nav-logo img { flex: none; }
.nav-logo span { letter-spacing: 0.08em; }
/* под названием — город клуба, техно-подписью (моно, как eyebrow): «VR MURCIA» / «VR ALICANTE» (владелец 29.10) */
.brand-name { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-name small { font-family: var(--aw-font-mono); font-weight: 500; font-size: 0.64em; letter-spacing: 0.28em; color: var(--aw-accent-soft); }
@media (max-width: 479px) {
    .nav-logo span { display: inline-flex; font-size: 0.74rem; letter-spacing: 0.05em; }
    .nav-logo .brand-name small { font-size: 0.74em; letter-spacing: 0.2em; }
    .nav { padding-left: 12px; }
    .nav-right { gap: 6px; }
    /* «Reservar» в шапке телефона — без кружка-стрелки: иначе не помещается рядом с названием (ES); бронь есть и в нижней панели */
    .nav-right .btn-sm { width: auto; padding: 0 16px; gap: 0; }
    .nav-right .btn-sm .ic { display: none; }
}
/* самые узкие телефоны (320–359 px): всё в одну строку внутри «таблетки» */
@media (max-width: 359px) {
    .nav { gap: 8px; padding-right: 6px; }
    .nav-logo { gap: 7px; }
    .nav-logo img { width: 22px; height: 22px; }
    .nav-logo span { font-size: 0.64rem; letter-spacing: 0.02em; }
    .nav-logo .brand-name small { letter-spacing: 0.14em; }
    .nav-right .btn-sm { padding: 0 13px; }
    .nav-right .nav-ico { width: 38px; height: 38px; }
}

/* планшет и узкий ПК (768–1023): ссылки разделов — только с 1024, где пропадает бургер; иначе шапка шире экрана, «Reservar» и бургер
   уходят за край (ревизор 29.10, iPad книжкой). До 1024 — логотип, «Reservar», бургер (все разделы — в меню) */
@media (max-width: 1023px) { .nav-links { display: none; } }

/* нижняя плашка телефона «Experiencia VR · 45 min»: в одну строку (ревизор 29.10: «min» уходила на 2-ю строку на 360–390) */
.mbar-txt { min-width: 0; }
.mbar-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 389px) { .mbar-txt b { font-size: 0.9rem; } }
@media (max-width: 339px) { .mbar-txt b { font-size: 0.8rem; } }

/* ---------- Переключатель языка: одно нажатие — другой язык (web/chrome.js), вся «таблетка» — кнопка ---------- */
.lang { cursor: pointer; transition: background-color var(--aw-dur-fast) var(--aw-ease-out); }
.lang:hover { background: rgba(255, 255, 255, 0.09); }
.lang a { min-height: 34px; display: inline-grid; place-items: center; }
.lang a[aria-current="true"] { pointer-events: none; }   /* текущий язык не ссылка «на себя»: нажатие ловит вся таблетка */

/* ---------- Мобильное меню: на весь экран, крупные пункты, появление лесенкой ---------- */
dialog.msheet { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; inset: 0; }
dialog.msheet::backdrop { background: rgba(5, 5, 7, 0.86); backdrop-filter: none; -webkit-backdrop-filter: none; }
dialog.msheet[open] { animation: msheet-in var(--aw-dur-base) var(--aw-ease-out) both; }
@keyframes msheet-in { from { opacity: 0; } }
dialog.msheet .sheet-in { display: flex; flex-direction: column; height: 100%; max-height: none; border-radius: 0; border: 0;
    padding: calc(84px + env(safe-area-inset-top)) clamp(20px, 6vw, 48px) calc(24px + env(safe-area-inset-bottom));
    background: radial-gradient(120% 60% at 100% 0%, rgba(255, 59, 78, 0.16), transparent 60%), radial-gradient(90% 50% at 0% 100%, rgba(255, 59, 78, 0.08), transparent 60%), #0b0b0d;
    box-shadow: none; }
/* название клуба сверху (как в шапке), ведёт на главную */
dialog.msheet .msheet-brand { position: absolute; top: calc(26px + env(safe-area-inset-top)); left: clamp(20px, 6vw, 48px); display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
    margin-top: -9px; font-family: var(--aw-font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.08em; color: var(--aw-text); }
dialog.msheet .sheet-x { top: calc(16px + env(safe-area-inset-top)); right: clamp(14px, 5vw, 40px); width: 46px; height: 46px; }
dialog.msheet .msheet-nav { margin: 0 0 24px; }
dialog.msheet .msheet-nav > :is(a, button) { position: relative; padding: 14px 40px 14px 0; font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.1; letter-spacing: var(--aw-tracking-display);
    border-bottom: 1px solid var(--aw-line); }
dialog.msheet .msheet-nav > a::after { content: '→'; position: absolute; right: 2px; top: 50%; translate: 0 -50%; font-family: var(--aw-font-body); font-size: 1.2rem; color: var(--aw-accent-soft);
    transition: transform var(--aw-dur-fast) var(--aw-ease-out); }
dialog.msheet .msheet-nav > a:active::after { transform: translateX(4px); }
dialog.msheet .msheet-h { margin: 22px 0 10px; }
dialog.msheet .msheet-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--aw-line); }
dialog.msheet .msheet-sub a { display: flex; align-items: center; min-height: 52px; padding: 12px 14px; font-size: 1.02rem; font-weight: 600; border-radius: 16px;
    background: var(--aw-surface-2); border: 1px solid var(--aw-line-strong); transition: background-color var(--aw-dur-fast) var(--aw-ease-out); }
dialog.msheet .msheet-sub a:active { background: var(--aw-surface-3); }
dialog.msheet .msheet-contact { margin: auto 0 14px; padding-top: 16px; }
dialog.msheet .msheet-contact .btn { justify-content: center; position: relative; padding-left: 16px; padding-right: 52px; }
dialog.msheet .msheet-contact .btn > .ic { position: absolute; top: 0; bottom: 0; right: 6px; margin: auto 0; }
dialog.msheet .lang { align-self: flex-start; }
dialog.msheet .msheet-contact .ms-book { grid-column: 1 / -1; min-height: 58px; font-size: 1.06rem; }
/* появление пунктов лесенкой */
dialog.msheet[open] :is(.msheet-nav > *, .msheet-sub > a, .msheet-contact, .lang) { animation: msheet-item 420ms var(--aw-ease-out) both; }
dialog.msheet[open] .msheet-nav > :nth-child(1) { animation-delay: 40ms; }
dialog.msheet[open] .msheet-nav > :nth-child(2) { animation-delay: 80ms; }
dialog.msheet[open] .msheet-nav > :nth-child(3) .msheet-sub, dialog.msheet[open] .msheet-nav > :nth-child(3) { animation-delay: 110ms; }
dialog.msheet[open] .msheet-sub > a:nth-child(2) { animation-delay: 150ms; }
dialog.msheet[open] .msheet-sub > a:nth-child(3) { animation-delay: 180ms; }
dialog.msheet[open] .msheet-sub > a:nth-child(4) { animation-delay: 210ms; }
dialog.msheet[open] .msheet-sub > a:nth-child(n+5) { animation-delay: 240ms; }
dialog.msheet[open] .msheet-nav > :nth-child(n+4) { animation-delay: 260ms; }
dialog.msheet[open] .msheet-contact { animation-delay: 300ms; }
dialog.msheet[open] .lang { animation-delay: 340ms; }
@keyframes msheet-item { from { opacity: 0; transform: translateY(14px); } }

/* ---------- ПК: «Eventos» — панель появляется мягко, плитки приподнимаются ---------- */
@media (min-width: 1024px) {
    .nav-links .dd-tile { transition: transform var(--aw-dur-base) var(--aw-ease-out); }
    .nav-links .dd-tile:hover { transform: translateY(-3px); }
    /* пять плиток (с «Niños») — в один ряд */
    .dd-panel:has(.dd-tile:nth-child(5)) { width: 740px; }
    .dd-grid:has(.dd-tile:nth-child(5)) { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Списки с иконками: активный пункт по прокрутке (окно 6, 29.10; владелец: «по мере списка поля подсвечивались, и заново
   проигрывалась анимация значка») — web/chrome.js ставит .is-on пункту у центра экрана (и по нажатию); один на список.
   .ilist — главная «Qué es» / «Para quién», Empresas, Cumpleaños; .dv-tips — советы Niños; .sx-icons — плитки «места».
   Вид — как при наведении: плашка, красная иконка, яркий заголовок; движение — transform / opacity. Лёгкий режим и «меньше движения» — без анимации */
.ilist li, .dv-tips > li, .sx-icons > li { transition: background-color 0.45s var(--aw-ease-out), transform 0.5s var(--aw-ease-out), opacity 0.45s var(--aw-ease-out); }
.ilist li.is-on { background: rgba(255, 59, 78, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 59, 78, 0.22); }
.ilist li.is-on b { color: var(--aw-accent-soft); }
.ilist li.is-on .why-ico { background: var(--aw-accent); border-color: var(--aw-accent); box-shadow: 0 10px 24px -10px var(--aw-accent-glow); }
.ilist li.is-on .why-ico svg { stroke: #fff; }
.ilist li.is-on .why-ico, .dv-tips > li.is-on .dv-tip-ic, .sx-icons > li.is-on .sx-ic { animation: ilist-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes ilist-pop { 40% { transform: scale(1.14) rotate(-6deg); } }
/* своё движение иконки — как при наведении (site.css), заново при каждой активации */
.ilist li.is-on [data-ic="clock"] svg :nth-child(2) { animation: ic-tick 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.ilist li.is-on [data-ic="group"] svg :nth-child(1) { animation: ic-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ilist li.is-on [data-ic="group"] svg :nth-child(2) { animation: ic-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s; }
.ilist li.is-on [data-ic="pad"] svg { animation: ic-wiggle 0.6s ease-in-out; }
.ilist li.is-on [data-ic="star"] svg { animation: ic-spin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ilist li.is-on [data-ic="gift"] svg :nth-child(3) { animation: ic-hop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ilist li.is-on [data-ic="shield"] svg :nth-child(2) { animation: ic-draw 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.ilist li.is-on [data-ic="heart"] svg { animation: ic-beat 1.2s ease-in-out; }
@keyframes ic-pop { 40% { transform: scale(1.45); } }
@keyframes ic-wiggle { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes ic-spin { from { transform: rotate(-144deg) scale(0.6); } }
@keyframes ic-hop { 40% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes ic-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.dv-tips > li.is-on, .sx-icons > li.is-on .sx-core { background: rgba(255, 59, 78, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 59, 78, 0.22); }
.dv-tips > li.is-on .dv-tip-ic, .sx-icons > li.is-on .sx-ic { background: var(--aw-accent); color: #fff; }
.dv-tips > li.is-on p, .sx-icons > li.is-on .sx-icon > span { color: #fff; }
.lite :is(.ilist li.is-on .why-ico, .ilist li.is-on .why-ico svg, .ilist li.is-on .why-ico svg *, .dv-tips > li.is-on .dv-tip-ic, .sx-icons > li.is-on .sx-ic) { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    dialog.msheet[open], dialog.msheet[open] * { animation: none !important; }
    :is(.ilist li.is-on .why-ico, .dv-tips > li.is-on .dv-tip-ic, .sx-icons > li.is-on .sx-ic) { animation: none !important; }
    .nav-links .dd-tile:hover { transform: none; }
}