/* ==========================================================
   Zumba с Анной — стили сайта.
   Сначала пишем для телефона, потом добавляем большие экраны.
   Всё, что можно поменять глобально, вынесено в переменные ниже.
   ========================================================== */

:root{
  color-scheme: only light;   /* не даём телефону перекрашивать сайт в тёмную тему */
  /* Пять цветов сайта. Поменяли здесь — поменялось везде */
  --ink:    #16111C;   /* тёмный фон и основной текст */
  --ink-2:  #251E30;   /* карточки на тёмном фоне */
  --paper:  #FAEFE7;   /* светлый фон */
  --lime:   #C9F24D;   /* кнопки и акценты на тёмном */
  --berry:  #B3123C;   /* акценты на светлом: ссылки, подчёркивания */

  /* Акценты через переменные: детский раздел меняет только эти две строки */
  --accent:      var(--lime);
  --accent-dark: var(--berry);

  /* Приглушённый текст — это те же два цвета, только тише */
  --ink-mut:   #5B5165;
  --paper-mut: #BCB2C6;

  /* Шкала отступов: всё кратно 8 пикселям */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --radius: 16px;
  --wrap: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.6 Manrope, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:Unbounded, Manrope, sans-serif; font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:0 0 var(--s2); }
h1{ font-size:clamp(30px, 6.2vw, 58px); line-height:1.06; }
h2{ font-size:clamp(26px, 4.6vw, 42px); margin-bottom:var(--s3); }
h3{ font-size:clamp(18px, 2.4vw, 22px); font-weight:600; }
p{ margin:0 0 var(--s2); }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--s3); }
.wrap--narrow{ max-width:760px; }
.muted{ color:var(--ink-mut); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Ссылка для тех, кто ходит по сайту с клавиатуры */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s2); top:var(--s2); z-index:20; background:var(--accent); color:var(--ink); padding:var(--s1) var(--s2); border-radius:8px; }
:focus-visible{ outline:3px solid var(--accent-dark); outline-offset:3px; }

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  background:var(--accent); color:var(--ink);
  font:800 17px/1 Manrope, sans-serif;
  padding:var(--s2) var(--s3); min-height:56px;
  border:0; border-radius:999px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,242,77,.28); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--paper); border:2px solid rgba(255,247,242,.32); }
.btn--ghost:hover{ border-color:var(--accent); box-shadow:none; }
.btn--sm{ min-height:44px; padding:var(--s1) var(--s2); font-size:15px; }
.btn--wide{ width:100%; }

.link{ color:var(--accent-dark); font-weight:600; text-underline-offset:4px; }
.sec--dark .link{ color:var(--accent); }

/* ---------- Шапка ---------- */
.top{ position:sticky; top:0; z-index:10; background:var(--ink); color:var(--paper); }
.top__in{ display:flex; align-items:center; gap:var(--s1); min-height:64px; }
.logo{ font:800 17px/1 Unbounded, sans-serif; text-decoration:none; white-space:nowrap; }
.logo i{ font-style:normal; font-weight:600; font-size:.62em; color:var(--accent); }

.top__tel{ display:none; }
.top .btn{ margin-left:auto; }
.top__in{ flex-wrap:nowrap; }

/* ---------- Первый экран ---------- */
.hero{ background:var(--ink); color:var(--paper); padding:var(--s5) 0 var(--s6); }
.eyebrow{ font:800 13px/1 Manrope,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); }
.hero h1{ margin-bottom:var(--s3); }
.lead{ font-size:clamp(17px,2.1vw,20px); color:var(--paper-mut); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.hero__note{ margin-top:var(--s2); font-size:15px; color:var(--paper-mut); }
.hero__media{ margin-top:var(--s4); }
.hero__media img{ border-radius:var(--radius); width:100%;
  aspect-ratio:4/3; object-fit:cover; object-position:center 76%; }

/* ---------- Полоса фактов ---------- */
.facts{ background:var(--ink); color:var(--paper); padding:var(--s5) 0 var(--s6); }
.facts__grid{ display:grid; gap:var(--s2); }
.fact{ background:var(--ink-2); border-radius:var(--radius); padding:var(--s3); border-top:4px solid var(--accent); }
.fact__k{ font:800 20px/1.2 Unbounded,sans-serif; margin-bottom:var(--s1); }
.fact__v{ margin:0; color:var(--paper-mut); font-size:16px; }

/* ---------- Секции ---------- */
.sec{ padding:var(--s6) 0; }
.sec--paper{ background:#fff; }
.sec--dark{ background:var(--ink); color:var(--paper); }
.sec--dark .muted,.sec--dark .sec__lead{ color:var(--paper-mut); }
.sec__lead{ font-size:clamp(17px,2vw,20px); color:var(--ink-mut); max-width:62ch; margin-bottom:var(--s5); }

/* ---------- Карточки со страхами ---------- */
.cards{ display:grid; gap:var(--s2); }
.card{ background:#fff; border:1px solid rgba(22,17,28,.08); border-radius:var(--radius); padding:var(--s4); }
.sec--paper .card{ background:var(--paper); }
.card h3{ margin-bottom:var(--s2); }
.card p{ font-size:16px; color:var(--ink-mut); }
.card__win{ margin:0; padding-top:var(--s2); border-top:1px solid rgba(22,17,28,.10);
  color:var(--ink); font-weight:600; }
.card__win::before{ content:"→ "; color:var(--accent-dark); font-weight:800; }

/* ---------- Как проходит ---------- */
.kak{ display:grid; gap:var(--s5); }
.steps{ list-style:none; counter-reset:s; margin:0; padding:0; }
.steps > li{ counter-increment:s; position:relative; padding-left:var(--s6); margin-bottom:var(--s4); }
.steps > li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:var(--s5); height:var(--s5); border-radius:50%;
  background:var(--accent); color:var(--ink);
  font:800 20px/48px Unbounded,sans-serif; text-align:center;
}
.steps h3{ margin-bottom:var(--s1); }
.steps p{ margin:0; color:var(--paper-mut); font-size:16px; }
.kak__video{ margin:0; }
.kak__video video{ width:100%; max-width:320px; margin:0 auto; border-radius:var(--radius); background:var(--ink-2); }
.kak__video figcaption{ margin-top:var(--s2); font-size:15px; color:var(--paper-mut); text-align:center; }

/* ---------- Галерея зала ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
.gallery img{ width:100%; border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover;
  transition:transform .2s ease; }
.gallery img:hover{ transform:scale(1.02); }

/* ---------- Тренер ---------- */
.trener{ display:grid; gap:var(--s4); }
.trener__photo{ border-radius:var(--radius); width:100%; aspect-ratio:4/5; object-fit:cover; }
.checks{ list-style:none; margin:0; padding:0; }
.checks li{ position:relative; padding-left:var(--s4); margin-bottom:var(--s3); color:var(--ink-mut); font-size:16px; }
.checks li::before{ content:""; position:absolute; left:0; top:8px; width:12px; height:12px; border-radius:3px; background:var(--accent-dark); }
.checks b{ color:var(--ink); display:block; font-weight:800; }

/* ---------- Расписание ---------- */
.tablewrap{ overflow-x:auto; }              /* на узком экране таблица прокручивается сама, страница — нет */
.sched{ width:100%; min-width:560px; border-collapse:collapse; margin-bottom:var(--s5); }
.sched th,.sched td{ text-align:left; padding:var(--s2); border-bottom:1px solid rgba(22,17,28,.12); vertical-align:top; font-size:16px; }
.sched th{ font:800 13px/1.3 Manrope,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mut); }
.sched tbody tr:hover{ background:rgba(179,18,60,.06); }

.place{ display:grid; gap:var(--s4); }
.place__addr{ font:800 20px/1.4 Unbounded,sans-serif; }

/* ---------- Цены ---------- */
.prices{ display:grid; gap:var(--s2); margin-bottom:var(--s3); }
.price{ background:var(--paper); border:1px solid rgba(22,17,28,.10); border-radius:var(--radius);
  padding:var(--s4); transition:border-color .15s ease; }
.price:hover{ border-color:var(--accent-dark); }
.price__name{ font-weight:800; margin-bottom:var(--s1); }
.price__sum{ font:800 clamp(26px,4vw,34px)/1.1 Unbounded,sans-serif; color:var(--accent-dark); margin-bottom:var(--s1); }
.price__note{ margin:0; font-size:15px; color:var(--ink-mut); }

/* ---------- Вопросы и ответы (без единой строчки JS) ---------- */
details{ border-bottom:1px solid rgba(22,17,28,.14); }
summary{ cursor:pointer; list-style:none; padding:var(--s3) var(--s4) var(--s3) 0; position:relative;
  font:600 18px/1.4 Manrope,sans-serif; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; position:absolute; right:0; top:var(--s3); font-size:26px; line-height:1; color:var(--accent-dark); }
details[open] summary::after{ content:"–"; }
details p{ margin:0 0 var(--s3); color:var(--ink-mut); max-width:62ch; }

/* ---------- Форма ---------- */
.form{ margin-top:var(--s4); }
.field{ margin-bottom:var(--s3); }
.field label{ display:block; font-weight:600; margin-bottom:var(--s1); font-size:16px; }
.field input[type=text],.field input[type=tel],.field select{
  width:100%; min-height:56px; padding:var(--s2);
  background:var(--ink-2); color:var(--paper);
  border:2px solid rgba(255,247,242,.22); border-radius:12px;
  font:400 17px/1.4 Manrope,sans-serif;
}
.field input::placeholder{ color:var(--paper-mut); opacity:.7; }
.field input:focus,.field select:focus{ border-color:var(--accent); outline:none; }
.field input[aria-invalid=true]{ border-color:#FF8FA3; }
.err{ display:block; min-height:0; margin-top:var(--s1); font-size:15px; color:#FF8FA3; }
.field--check{ display:grid; grid-template-columns:auto 1fr; gap:var(--s2); align-items:start; }
.field--check input{ width:24px; height:24px; margin-top:2px; accent-color:var(--accent); }
.field--check label{ margin:0; font-weight:400; font-size:15px; color:var(--paper-mut); }
.field--check .err{ grid-column:1/-1; }
.hp{ position:absolute; left:-9999px; }        /* ловушка для спам-роботов */

.result{ margin-top:var(--s4); background:var(--ink-2); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s3); }
.result--bad{ border-left-color:#FF8FA3; }
.result h3{ margin-bottom:var(--s1); }
.result p{ margin:0; color:var(--paper-mut); }
.result a{ color:var(--accent); }

/* ---------- Подвал ---------- */
.foot{ background:var(--ink); color:var(--paper); padding:var(--s6) 0 var(--s4); }
.foot__in{ display:grid; gap:var(--s4); }
.foot a{ color:var(--paper); text-underline-offset:4px; }
.foot .muted{ color:var(--paper-mut); }
.foot__h{ font:800 13px/1 Manrope,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s2); }
.foot p{ margin-bottom:var(--s1); }
.logo--foot{ margin-bottom:var(--s2); }
.foot__legal{ margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(255,247,242,.16); font-size:14px; }

/* ==========================================================
   ПЛАНШЕТ — от 768 пикселей
   ========================================================== */
@media (min-width:768px){
  .facts__grid{ grid-template-columns:repeat(3,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .gallery{ grid-template-columns:repeat(4,1fr); }
  .prices{ grid-template-columns:repeat(3,1fr); gap:var(--s3); }
  .place{ grid-template-columns:repeat(2,1fr); gap:var(--s5); }
  .foot__in{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); }
  .top__tel{ display:block; margin-left:auto; font-weight:800; text-decoration:none; font-size:15px; }
  .top .btn{ margin-left:0; }
  .sec{ padding:var(--s7) 0; }
  .hero{ padding:var(--s6) 0 var(--s7); }
}

/* ==========================================================
   БОЛЬШОЙ ЭКРАН — от 1024 пикселей
   ========================================================== */
@media (min-width:1024px){
  .hero__in{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center; }
  .hero__media{ margin-top:0; }
  .hero__media img{ aspect-ratio:3/4; object-position:center 60%; }
  .kak{ grid-template-columns:1.3fr .7fr; gap:var(--s6); align-items:start; }
  .trener{ grid-template-columns:.8fr 1.2fr; gap:var(--s6); align-items:start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Текстовая страница (политика) ---------- */
.doc h2{ font-size:clamp(20px,2.6vw,26px); margin-top:var(--s5); }
.doc p{ color:var(--ink-mut); max-width:64ch; }

/* ---------- Полоса с проверяемыми отзывами ---------- */
.proof{ background:var(--ink); color:var(--paper); padding:var(--s5) 0; }
.proof__in{ display:grid; gap:var(--s2); border-left:4px solid var(--accent); padding-left:var(--s3); }
.proof__h{ font-size:clamp(22px,3vw,32px); margin:0 0 var(--s1); }
.proof__text{ margin:0 0 var(--s2); max-width:56ch; font-size:18px; color:var(--paper-mut); }
.proof__links{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:0; }
.proof .link{ color:var(--accent); }

/* ---------- Имя тренера ---------- */
.trener__name{ font:800 clamp(22px,3vw,30px)/1.2 Unbounded,sans-serif; margin-bottom:var(--s1); }

/* ---------- Место под цифру, которую вписывает владелец ---------- */
.todo{ display:inline-block; background:rgba(179,18,60,.10); color:var(--accent-dark);
  font:600 .55em/1.4 Manrope,sans-serif; letter-spacing:.02em; text-transform:uppercase;
  padding:0 8px; border-radius:8px; vertical-align:middle; }
.price__sum .todo{ font-size:.42em; }

/* ---------- Карта ---------- */
.map{ display:block; width:100%; max-width:560px; height:320px; margin-top:var(--s3);
  border:0; border-radius:var(--radius); }

/* ---------- Кнопка внутри секции ---------- */
.steps + .btn, .checks + .btn{ margin-top:var(--s3); }

/* ---------- Расписание на телефоне: карточки вместо таблицы с боковой прокруткой ---------- */
@media (max-width:719px){
  .tablewrap{ overflow:visible; }
  .sched, .sched tbody, .sched tr, .sched td{ display:block; width:auto; min-width:0; }
  .sched thead{ display:none; }
  .sched tr{ background:#fff; border:1px solid rgba(22,17,28,.10); border-radius:var(--radius);
    padding:var(--s2); margin-bottom:var(--s2); }
  .sched td{ border:0; padding:var(--s1) 0; }
  .sched td::before{ content:attr(data-l) ": "; font-weight:800; color:var(--ink-mut);
    font-size:14px; text-transform:uppercase; letter-spacing:.04em; }
  .sched td:first-child::before{ content:""; }
  .sched td:first-child b{ font:800 20px/1.2 Unbounded,sans-serif; }
}

/* Кнопка под блоком «Не подходит это время?» */
.place__cta{ margin-top:var(--s3); }

/* Ошибка поля не должна дёргать вёрстку при появлении */
.err:empty{ display:none; }

/* ==========================================================
   ДЕТСКИЙ РАЗДЕЛ — те же блоки, другой акцент.
   Меняются ровно две переменные, вся вёрстка остаётся общей.
   ========================================================== */
body.kids{
  --accent:      #FFB020;   /* тёплый жёлто-оранжевый вместо лаймового */
  --accent-dark: #C2410C;   /* терракотовый вместо малинового */
}
body.kids .btn:hover{ box-shadow:0 8px 24px rgba(255,176,32,.30); }

/* ---------- Переключатель «Себе / Детям» ---------- */
.switch{ display:flex; gap:2px; background:var(--ink-2); border-radius:999px; padding:3px; }
.switch a{
  display:block; padding:8px var(--s2); border-radius:999px;
  font:600 14px/1 Manrope,sans-serif; text-decoration:none; color:var(--paper-mut);
  white-space:nowrap;
}
.switch a:hover{ color:var(--paper); }
.switch__on{ background:var(--accent); color:var(--ink) !important; }

/* ---------- Пояснительная строка под блоком ---------- */
.note{ font-size:15px; color:var(--ink-mut); border-left:3px solid var(--accent-dark);
  padding-left:var(--s2); margin-top:var(--s3); max-width:62ch; }
.sec--dark .note{ color:var(--paper-mut); border-left-color:var(--accent); }

/* ---------- Цены: выделенная карточка и сетка ---------- */
.price--hi{ border-color:var(--accent-dark); }
.price--hi .price__sum{ color:var(--accent-dark); }

/* ---------- Блок «почему не как в клубе» ---------- */
.why{ margin-top:var(--s5); background:var(--paper); border-radius:var(--radius); padding:var(--s4); }
.why h3{ margin-bottom:var(--s2); }
.checks--tight li{ margin-bottom:var(--s2); }

/* ---------- Галерея на две картинки ---------- */
.gallery--2{ grid-template-columns:repeat(2,1fr); margin-top:var(--s3); }
.gallery--2 img{ aspect-ratio:4/3; }
.vhod{ border-radius:var(--radius); margin-top:var(--s3); width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---------- Картинка вместо видео в блоке «как проходит» ---------- */
.kak__video img{ width:100%; border-radius:var(--radius); }

@media (min-width:768px){
  .cards--3{ grid-template-columns:repeat(3,1fr); }
  .checks--2{ columns:2; column-gap:var(--s5); }
  .checks--2 li{ break-inside:avoid; }
}

/* ==========================================================
   УЗКИЙ ЭКРАН — шапка должна помещаться в 375 пикселей.
   Убираем приписку в логотипе и ужимаем переключатель.
   ========================================================== */
@media (max-width:599px){
  .wrap{ padding:0 var(--s2); }
  .logo{ font-size:15px; }
  .logo i{ display:block; font-size:.72em; margin-top:3px; }   /* «с Анной» — второй строкой, но видно всегда */
  .switch a{ padding:6px 12px; font-size:13px; }
  .btn--sm{ padding:var(--s1) var(--s2); font-size:14px; min-height:40px; }
  .hero__cta .btn{ width:100%; white-space:normal; }
}

/* ---------- Широкое видео (горизонтальная съёмка) ---------- */
.kak__video--wide video{ max-width:none; }

/* ---------- Фото фестиваля в блоке результата ---------- */
.rez__foto{ width:100%; border-radius:var(--radius); margin-bottom:var(--s4);
  aspect-ratio:16/10; object-fit:cover; }

/* ---------- Расписание: день и название программы не разрываем ---------- */
.sched td:first-child b, .sched td:nth-child(2){ white-space:nowrap; }
@media (max-width:719px){
  .sched td:nth-child(2){ white-space:normal; }
}

/* ==========================================================
   КРУГ 3 — блоки по правкам Анны от 31 августа и 22 сентября
   ========================================================== */

/* Вторая строка заголовка на первом экране — тише основной */
.h1__sub{ display:block; margin-top:var(--s2); font-size:.52em; line-height:1.25; font-weight:600; color:var(--accent); }

/* Фото залов под тремя фактами */
.zaly{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); margin-top:var(--s4); }
.zaly figure{ margin:0; }
.zaly img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.zaly figcaption{ margin-top:var(--s1); font-size:14px; color:var(--paper-mut); }
@media (min-width:768px){ .zaly{ grid-template-columns:repeat(4,1fr); gap:var(--s3); } }

/* «Уходите домой: счастливыми, заряженными…» — слова в столбик */
.stolbik{ list-style:none; margin:0; padding:0; color:var(--paper-mut); font-size:16px; line-height:1.7; }

/* Фото с занятий и выступлений: плитка, где каждое фото в своих пропорциях */
.gal__cap{ font:800 13px/1.3 Manrope,sans-serif; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mut); margin-bottom:var(--s3); }
.mosaic{ columns:2; column-gap:var(--s2); }
.mosaic img{ width:100%; margin-bottom:var(--s2); border-radius:var(--radius); break-inside:avoid; }
@media (min-width:768px){ .mosaic{ columns:3; column-gap:var(--s3); } .mosaic img{ margin-bottom:var(--s3); } }
@media (min-width:1024px){ .mosaic{ columns:4; } }

/* Подзаголовки «Постоянное расписание» / «Набор утренних групп» */
.sched__h{ margin:var(--s4) 0 var(--s2); }
.sched{ margin-bottom:var(--s3); }
#raspisanie .place{ margin-top:var(--s5); align-items:start; }
#raspisanie .map{ margin-top:0; }

/* Детская галерея: 9 фото — ровно три ряда по три на большом экране */
@media (min-width:768px){ .gallery--kids{ grid-template-columns:repeat(3,1fr); } }

/* Две таблицы взрослого расписания — одинаковые колонки, чтобы читались как одна сетка */
@media (min-width:720px){
  #raspisanie .sched{ table-layout:fixed; }
  #raspisanie .sched th:nth-child(1){ width:24%; }
  #raspisanie .sched th:nth-child(2){ width:18%; }
  #raspisanie .sched th:nth-child(3){ width:16%; }
}