/* 00-tokens.css — только :root переменные, цвета, тени, радиусы */
:root {

/* Текст */
--текст-темный0 : #3E2723 ;
--текст-темный1:  #5c3d29 ;
--текст-темный2:  #7a4f35 ;
--текст-темный3:  #8C5A3C ;
   
--текст-светлый0: #E6D3C3;
--текст-светлый1: #d8b38f;
--текст-светлый2: #a9845e;

/* Фоны */
--фон-темный0: #1e1613;
--фон-темный1: #2B1F1B;
--фон-темный2: #31231f;
--фон-темный3: #38241e;
--фон-темный4: #422d26;
--фон-темный5: #493029;

--фон-светлый4: #8d5330;
--фон-светлый3: #906042;
--фон-светлый2: #aa8975;
--фон-светлый1: #D6B8A2;
--фон-светлый0: #f4eae2;  

--фон-градиент: linear-gradient(135deg, #E6D3C3 0%, #8B5E3C 50%, #4A2F27 100%);

/* Базовые */
--белый: #FFFFFF;
  --тень: 0 5px 14px rgba(0,0,0,0.55);
  --тень-при-наведении: 0 4px 12px rgba(0,0,0,0.45);
  --скругление: 10px;
  --скругление-маленькое: 5px;
  --переход: all 0.3s ease;
}


/* =========================================================
   HEADER / NAV (ХЕДЕР)
   ========================================================= */

   /* HEADER menu: remove default list bullets */
.шапка .меню-навигации {
  list-style: none;
  margin: 0;
  padding: 0;
}

.шапка .меню-навигации li::marker {
  content: "";
}

.шапка {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: var(--фон-темный0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.навигация {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position:relative;
  /* padding: 8px 0; */
}

.логотип {
  display: flex;
  align-items: center;
}

.логотип-изображение {
  margin-top: 5px;
  height: 50px;
  width: auto;
  transform:scale(2.5);
}

.меню-навигации {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
    position:absolute;
  left:48%;
  transform:translateX(-50%);
}

.ссылка-навигации {
  font-weight: 600;
  font-size: 16px;
  color: var(--фон-светлый1);
  position: relative;
  white-space: nowrap;
}

.ссылка-навигации::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--фон-светлый3);
  transition: var(--переход);
}

.ссылка-навигации:hover::after { width: 100%; }
.ссылка-навигации:hover { color: var(--фон-светлый3); }

.ссылка-навигации.активная {
  color: var(--фон-светлый3);
  font-weight: 600;
}

.ссылка-навигации.активная::after { width: 100%; }

.правая-часть-навигации {
  display: flex;
  align-items: center;
  gap: 20px;
}

.иконки-соцсетей {
  display: flex;
  gap: 17px;
}

.иконки-соцсетей a {
  font-size: 24px;
  color: var(--текст-светлый2);
}

.иконки-соцсетей a:hover {
  color: var(--фон-темный3);
  transform: scale(1.5);
}

.выбор-языка {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.выбор-языка .язык {
  background: none;
  border: none;
  padding: 4px 6px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--фон-светлый1);
  cursor: pointer;
  border-radius: 6px;
  line-height: 1;
  transition: var(--переход);
}

.выбор-языка .язык::after {
  content: "/";
  margin-left: 6px;
  color: var(--текст-светлый2);
}

.выбор-языка .язык:last-child::after { content: ""; }

.выбор-языка .язык:hover {
  background: var(--текст-светлый0);
  color: var(--фон-темный3);
}

.выбор-языка .язык.активный {
  background: var(--текст-светлый0);
  color: var(--фон-темный3);
}

.кнопка-мобильного-меню {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.кнопка-мобильного-меню span {
  width: 25px;
  height: 3px;
  background: var(--фон-светлый3);
  border-radius: 2px;
  transition: var(--переход);
}

/* Разрешаем overflow, чтобы выпадашки/меню не обрезались */
.header,
header {
  overflow: visible;
}

/* ---------------------------
   HEADER: mobile behaviour
   --------------------------- */

@media (max-width: 768px) {
 
  
  .меню-навигации {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--белый);
    flex-direction: column;
    padding: 20px;
    box-shadow: var(--тень);
  }

  .меню-навигации.активное { display: flex; }
  .правая-часть-навигации { display: none; }
}

@media (max-width: 1200px) {
  .меню-навигации { gap: 16px; }
  .ссылка-навигации { font-size: 14px; }
}

/* Мобильное выезжающее меню (<=820px) */
@media (max-width: 820px) {
  .кнопка-мобильного-меню {
    position: relative;
    z-index: 1102;
    display: inline-flex;
    margin-right: 0px;
  }

  .меню-навигации {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    height: 100dvh;
    width: min(88vw, 360px);
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 18px 18px;
    padding-left: 18px;
    padding-right: 58px;
    background: rgba(255, 255, 255, 0.96);
    border-left: 1px solid rgba(155, 123, 184, 0.3);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2, .9, .2, 1);
    z-index: 1101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.menu-open .меню-навигации { transform: translateX(0); }

  .меню-навигации .ссылка-навигации {
    font-size: 18px;
    padding: 10px 6px;
    width: 100%;
  }

  .меню-навигации .ссылка-навигации::after { display: none; }

  .mobile-menu-extras .иконки-соцсетей {
    display: flex;
    gap: 16px;
  }

  .mobile-menu-extras .иконки-соцсетей a { font-size: 26px; }

  .mobile-menu-extras .выбор-языка {
    display: flex;
    gap: 6px;
  }

  .mobile-menu-extras .выбор-языка .язык {
    font-size: 16px;
    padding: 8px 10px;
  }

  body.menu-open { overflow: hidden; }

  /* В шапке оставляем только бургер справа */
  .правая-часть-навигации {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-left: auto;
   
  }

  .правая-часть-навигации .иконки-соцсетей,
  .правая-часть-навигации .выбор-языка {
    display: none !important;
  }

  .меню-навигации{
pointer-events:auto !important;
z-index:1101 !important;
}

.кнопка-мобильного-меню{
z-index:1102 !important;
}

/* направление всегда выше декоративных элементов */

.секция-навигация-направлений{ position:relative; z-index:2; }
.кнопки-направлений{ position:relative; z-index:3; }
.кнопка-направления{ position:relative; z-index:4; }
}

.секция-направление{
scroll-margin-top:calc(var(--высота-шапки) + 12px);
}


/* =========================================================
   INSTAGRAM + TELEGRAM (ИНСТА БЛОК + TG QR)
   ========================================================= */

.секция-инстаграм {
  padding: 40px 0;
}


.карточка-инстаграм {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr 170px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px solid var(--фон-светлый1);
    background: var(--фон-темный2);
  overflow: hidden;
}


.иконка-инстаграм {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.иконка-инстаграм i {
  font-size: 92px;
      color: var(--текст-светлый2);
  /* -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.55); */
}

.содержимое-инстаграм {
  text-align: center;
  justify-self: center;
}

.содержимое-инстаграм h3 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
      color: var(--текст-светлый2);
}

.содержимое-инстаграм p {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
      color: var(--текст-светлый0);
  opacity: 0.95;
}

.инстаграм-ник{
  font-size: 11px;
  font-weight:700;
  letter-spacing:0.04em;
      color:var(--текст-светлый1);
}

.qr-код-инстаграм {
  justify-self: end;
  text-align: center;
}

.qr-код-инстаграм span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--фон-светлый3);
}

.qr-код-инстаграм .qr-изображение{
  text-align: center;
  width:130px;
  height:130px;
  object-fit:contain;
}

/* =========================================================
   TELEGRAM CTA — same design as Instagram card (desktop only)
   ========================================================= */

.секция-присоединяйся {
  padding: 40px 0;
}

/* делаем карточку TG визуально = карточке Instagram */
.карточка-присоединяйся {
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  align-items: center;
  padding: 36px 60px;
  border-radius: 20px;
  border: 1px solid var(--фон-светлый1);
   background: var(--фон-темный1);
  overflow: hidden;
}

/* левая иконка */
.иконка-телеграм {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.иконка-телеграм img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  /* чуть “воздушности”, чтобы ощущалось как большая иконка */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.10));
}

/* центр: текст */
.содержимое-присоединяйся {
  text-align: center;
  justify-self: center;
}

.содержимое-присоединяйся h3 {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  color: var(--текст-светлый2); /* как у инсты — единый стиль */
}



.содержимое-присоединяйся .tg-текст {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--текст-светлый0);

}

/* справа: QR (у тебя уже есть базовые правила, но дополним позиционирование как у инсты) */
.карточка-присоединяйся .qr-код-телеграм {
  justify-self: end;
  text-align: center;
}

/* если захочешь подпись под QR — сразу готово */
.карточка-присоединяйся .qr-код-телеграм span {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
 color: var(--фон-светлый3);
}

.qr-код-телеграм {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.qr-код-телеграм .qr-изображение {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.qr-код-телеграм span {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.95;
}

/* =========================================================
   Instagram + Telegram — MOBILE (<=820px)
   QR слева, текст справа/по центру, без больших иконок
   ========================================================= */

/* =========================================================
   Instagram + Telegram — MOBILE (<=820px)
   Clean, no duplicates, bigger card, smaller outer gaps
   ========================================================= */
@media (max-width: 820px) {

  /* секции: убираем лишний “воздух” и даем карточке ширину */
  .секция-инстаграм,
  .секция-присоединяйся {
    padding: 20px 0px; /* было 40px 0 — компактнее */
  }

  /* .секция-инстаграм .контейнер,
  .секция-присоединяйся .контейнер {
    padding-left: 0px;   
    padding-right: 30px !important;
  } */

  /* карточки: шире/крупнее и одинаково для IG + TG */
  .карточка-инстаграм,
  .карточка-присоединяйся {
    display: grid;
    grid-template-columns: 100px 1fr;  /* QR | текст */
    column-gap: 20px;
    align-items: center;

    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;

    padding: 10px 10px;    /* больше внутренние отступы */
    border-radius: 5px;
  }

  /* на мобиле скрываем большие иконки */
  .иконка-инстаграм,
  .иконка-телеграм {
    display: none !important;
  }

  /* QR: без трансформов, просто нормальное выравнивание */
.qr-код-инстаграм,
.карточка-присоединяйся .qr-код-телеграм {
  grid-column: 1;
  grid-row: 1;
  justify-self: center !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

  .qr-код-инстаграм img,
  .qr-код-телеграм .qr-изображение {
    width: 84px !important;
    height: 84px !important;
    object-fit: contain;
    border-radius: 4px;
  }

  .qr-код-инстаграм span,
  .карточка-присоединяйся .qr-код-телеграм span {
    display: none;
    margin-top: 3px;
    font-size: 1px ;
    font-weight: 200;
    padding: 10px 6px 10px 10px;
    
    
  }

.инстаграм-ник{
  font-size: 7px !important;
  font-weight: 600;
  text-align: center;
  width: auto;
  margin: 3px 0 0;
}

  /* текст */
  .содержимое-инстаграм,
  .содержимое-присоединяйся {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    text-align: center;
  }

  .содержимое-инстаграм h3 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
  }

  .содержимое-инстаграм p {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-transform: uppercase;
    opacity: 0.95;
  }

  .карточка-присоединяйся .содержимое-присоединяйся h3 {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.1;
  }

  .карточка-присоединяйся .tg-текст {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.25;
    text-transform: uppercase;
    opacity: 0.95;
  }
}

/* =========================================================
   FOOTER (final, no duplicates)
   ========================================================= */

:root{
  --footer-bg: #FBF3FA;
}

/* футер: фон + отступы */
.подвал{
  background: var(--фон-темный0);
  margin-top: 18px;
  padding: 28px 0 calc(56px + env(safe-area-inset-bottom));
}

/* верхняя строка: линия + заголовок + кнопка рядом */
.подвал .заголовок-секции{
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
  margin-bottom: 38px;
}

.подвал .линия-секции{
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: var(--фон-светлый1);
  flex: 0 0 auto;
}

.подвал .название-секции{
  margin: 0;
  font-size: 32px;           /* как на index */
  line-height: 1.1;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--фон-светлый1);
  white-space: nowrap;
}

/* кнопка возле заголовка (не вправо) */
.подвал .заголовок-секции .кнопка{
  margin-left: 18px;
  flex: 0 0 auto;
}

/* pill style кнопки */
.подвал .кнопка-основная{
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;

  background: var(--фон-светлый3) !important;
  color: var(--текст-светлый0) !important;
  border: none !important;
  padding: 16px 22px !important;

  box-shadow: var(--тень-мягкая) !important;
  transform: none !important;
    /* как на 1 фото: центр и uppercase */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;

}

/* контакты: меньше иконки и текст */
.подвал .контактная-информация{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.подвал .элемент-контакта{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--текст-светлый1);
  text-decoration: none;
}

.подвал .элемент-контакта i{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--текст-светлый2);
  color: var(--основной-свеилый);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: transparent;
}

.подвал .элемент-контакта span{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* соцсети: больше отступ сверху (между контактами и соцсетями) */
.подвал .ссылки-соцсетей{
  margin-top: 40px;          /* вертикальный отступ от контактов */
  display: flex;
  justify-content: center;
  gap: 40px;                 /* расстояние IG vs TG */
  flex-wrap: wrap;
}

.подвал .ссылки-соцсетей a{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--текст-светлый1);
  text-decoration: none;
}

/* убрать кружки у соц-иконок */
.подвал .ссылки-соцсетей a i{
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  padding: 0;
  font-size: 28px;
  color: var(--текст-светлый2);
  transition: var(--переход);
}

.подвал .ссылки-соцсетей a:hover{
  color: var(--фон-светлый3);
}

.подвал .ссылки-соцсетей a:hover i{
  transform: scale(1.06);
}
/* =========================================================
   FOOTER — MOBILE (<= 820px)
   Layout like reference: title row / icons row / gradient button
   ========================================================= */
@media (max-width: 820px){

  .подвал{
    padding: 28px 0 34px;
  }

  .подвал .контейнер{
    display: flex !important;
    flex-direction: column !important;
    gap: 26px !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* верхняя строка: только линия + заголовок */
  .подвал .заголовок-секции{
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  .подвал .линия-секции{
    width: 36px !important;
    height: 4px !important;
    margin: 0 !important;
  }

  .подвал .название-секции{
    font-size: 20px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  /* КЛЮЧЕВОЕ: кнопка не должна жить в header-row */
  .подвал .заголовок-секции .кнопка{
    display: none !important;
  }

  /* если кнопка стоит отдельным элементом в футере */
  .подвал > .контейнер > .кнопка,
  .подвал .контейнер > .кнопка-основная,
  .подвал .footer-cta,
  .подвал .join-btn{
    display: flex !important;
    width: 100% !important;
    min-height: 84px !important;
    align-items: center !important;
    justify-content: center !important;
    order: 3 !important;

    border-radius: 999px !important;
    padding: 18px 24px !important;
    font-size: 18px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    background: linear-gradient(90deg, #c79cc7 0%, #9272bb 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* блок иконок */
  .подвал .содержимое-подвала{
    order: 2 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .подвал .контактная-информация,
  .подвал .ссылки-соцсетей{
    display: contents !important;
  }

  .подвал .элемент-контакта,
  .подвал .ссылки-соцсетей a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
  }

  .подвал .элемент-контакта span{
    display: none !important;
  }

  .подвал .элемент-контакта i,
  .подвал .ссылки-соцсетей a i{
    width: auto !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    color: var(--фон-светлый3) !important;
  }
}



/* =========================================================
   HEADER — Mobile burger panel overrides (<= 820px)
   Purpose:
   - panel width control
   - clean inner padding
   - hide IG/TG in burger
   - push languages a bit lower
   - keep links aligned
   ========================================================= */

@media (max-width: 820px){

  /* Burger button: no accidental horizontal shifts */
  .кнопка-мобильного-меню{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Burger panel: width + padding (single source of truth) */
  .меню-навигации{
    /* TUNE HERE */
    --burger-width: min(80vw, 400px);
    background-color: var(--фон-темный2);

    --burger-pad-top: 4px;
    --burger-pad-right: 10px;
    --burger-pad-bottom: 18px;
    --burger-pad-left: 26px;

    width: var(--burger-width) !important;
    padding: var(--burger-pad-top)
             var(--burger-pad-right)
             var(--burger-pad-bottom)
             var(--burger-pad-left) !important;
  }

  /* Links: use panel padding (no extra inner left/right) */
  .меню-навигации .ссылка-навигации{
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: var(--фон-темный2);
  }

  /* Extras block inside burger: full width, no extra padding */
  .mobile-menu-extras{
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hide IG/TG icons inside burger */
  .mobile-menu-extras .иконки-соцсетей{
    display: none !important;
  }

  /* Push languages slightly lower */
  .mobile-menu-extras .выбор-языка{
    margin-top: 18px;
  }
}