/* ═══════════════════════════════════════════════════════════════════════════
   EL BALANCE - общият стил на сайта.

   ПОСОКА „БОТАНИЧЕСКИ", избрана на 26.08.2026 измежду три. Кремава хартия,
   маслинено зелено за действие, ръкописен шрифт за ЕДНА дума в заглавието.
   Cormorant Garamond носи заглавията, Onest - текста, Marck Script - акцента.

   ЕДИН ФАЙЛ ЗА ЦЕЛИЯ САЙТ. Досега всяка страница носеше свое копие на
   палитрата: при смяна на един цвят се пипаха четири файла и все някой
   оставаше стар.

   РЪКОПИСНИЯТ ШРИФТ Е ЗА ЕДНА ДУМА. Marck Script е акцент, не текстов шрифт -
   при дълъг ред буквите се раздалечават и четенето става бавно.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,400&family=Marck+Script&family=Onest:wght@300;400;500;600&display=swap');

:root{
  --hartia:#EFEBDD;      /* фонът */
  --byalo:#FBFAF4;       /* повдигнатите повърхности */
  --mastilo:#3A3B32;     /* текстът */
  --mastilo-mek:#5A5C50; /* второстепенният текст */
  --zeleno:#6B8F3D;      /* действието */
  --zeleno-tamno:#55722F;
  --zeleno-tanko:rgba(107,143,61,.26);
  --kafyavo:#4A4238;     /* лентите и печатите */
  --max:1240px;
  --zaglavie:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* Marck Script: елегантен ръкописен с истинска кирилица. Style Script е
     latin-only и падаше на системния cursive; Caveat има кирилица, но е
     по-небрежен. */
  --rakopis:'Marck Script','Segoe Script',cursive;
  /* Onest, а не Manrope: вторият рисува кирилицата с латински форми и
     „движиш" излиза като „gвижиш". */
  --tekst:Onest,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--hartia);color:var(--mastilo);font-family:var(--tekst);
  font-size:17px;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--zeleno);text-decoration:none}
a:hover{color:var(--zeleno-tamno)}
::selection{background:var(--zeleno);color:var(--byalo)}

.g{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2.2rem)}

/* ── Шапката ────────────────────────────────────────────────────────────── */
.top{padding:1.3rem 0}
.top .in{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2.2rem);
  display:flex;align-items:center;gap:1.6rem}
.top .lg{display:flex;align-items:center;gap:.65rem;color:inherit;flex:none}
.top .lg svg{width:24px;height:24px;flex:none}
.top .lg span{font-size:1rem;letter-spacing:.16em;font-weight:500}
.top nav{display:flex;gap:1.9rem;font-size:.8rem;letter-spacing:.12em}
.top nav a{color:var(--mastilo)}
.top nav a:hover{color:var(--zeleno)}
.top .raste{flex:1}
.top .cta{border:1px solid var(--mastilo);color:var(--mastilo);padding:.65rem 1.3rem;
  font-size:.78rem;letter-spacing:.1em;white-space:nowrap}
.top .cta:hover{background:var(--mastilo);color:var(--byalo)}
/* ТЕЛЕФОНЪТ. Досега навигацията изчезваше, а копчето вдясно оставаше и
   излизаше извън екрана - половината текст беше изрязан. Сега лентата се
   пренарежда на два реда: лого горе, връзките отдолу като лента, която се
   плъзга настрани. Копчето с телефона става кръгче с икона, за да не яде
   ширина. */
@media(max-width:880px){
  .top{padding:.9rem 0}
  .top .in{flex-wrap:wrap;gap:.8rem 1rem;row-gap:.9rem}
  .top .lg span{font-size:.92rem;letter-spacing:.14em}
  .top .raste{display:none}
  .top .cta{margin-left:auto;padding:.6rem 1rem;font-size:.72rem;
    letter-spacing:.06em;white-space:nowrap;order:2}
  .top nav{order:3;width:100%;gap:1.1rem;overflow-x:auto;
    padding-bottom:.2rem;-webkit-overflow-scrolling:touch;
    font-size:.72rem;letter-spacing:.1em}
  .top nav::-webkit-scrollbar{height:0}
  .top nav a{white-space:nowrap}
}
/* Под 420px и съкратената лента не се събира: телефонът става само икона. */
@media(max-width:420px){
  .top .cta{font-size:0;padding:.6rem .75rem}
  .top .cta::after{content:"☎";font-size:1.05rem;line-height:1}
}

/* ── Типография ─────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--zaglavie);font-weight:300;line-height:1.1;
  letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:400;line-height:1.35}
.rakopis{font-family:var(--rakopis);color:var(--zeleno);font-weight:400}
.nadpis{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--zeleno);font-weight:500}
.lede{color:var(--mastilo-mek);max-width:44ch;font-size:1.02rem}

/* ── Копчета ────────────────────────────────────────────────────────────── */
/* Минимум 48 пиксела височина: под 44 пръстът не улучва. */
.bt{display:inline-block;background:var(--zeleno);color:var(--byalo);border:0;
  font:inherit;font-size:1rem;letter-spacing:.05em;padding:1.05rem 2.4rem;
  cursor:pointer;text-align:center;min-height:48px;line-height:1.4}
@media(max-width:520px){.bt{display:block;width:100%;padding:1.05rem 1.2rem}}
.bt:hover{background:var(--zeleno-tamno);color:var(--byalo)}
.bt.tanak{background:none;color:var(--mastilo);border:1px solid var(--mastilo);
  padding:.9rem 1.9rem}
.bt.tanak:hover{background:var(--mastilo);color:var(--byalo)}
.bt.byal{background:var(--byalo);color:var(--zeleno)}
.bt.byal:hover{background:#fff;color:var(--zeleno-tamno)}
/* Изключеното копче ПАЗИ контраста си. Дотук фонът ставаше кафяв, а текстът
   на `.tanak` оставаше тъмен - надписът изчезваше в кафявото и копчето
   изглеждаше повредено. Видяно на първия въпрос в анализа, където „Назад"
   няма къде да води. */
.bt[disabled],.bt[data-vzet]{background:var(--kafyavo);border-color:var(--kafyavo);
  color:var(--byalo);cursor:default}
.bt.tanak[disabled]{background:none;border-color:rgba(90,92,80,.35);
  color:var(--mastilo-mek);opacity:.45}
.pod-bt{font-size:.82rem;color:var(--mastilo-mek);letter-spacing:.03em;
  margin-top:.85rem}

/* ── Ленти и печати ─────────────────────────────────────────────────────── */
.lenta{background:var(--kafyavo);color:var(--hartia);padding:1.15rem 0}
.lenta .in{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2.2rem);
  display:flex;gap:clamp(1.4rem,4vw,3.4rem);font-size:.78rem;letter-spacing:.16em;
  flex-wrap:wrap}
/* На телефон четирите думи стават четири реда и лентата изяжда екран. Затова
   се плъзгат настрани в един ред. */
@media(max-width:620px){
  .lenta .in{flex-wrap:nowrap;overflow-x:auto;gap:1.6rem;font-size:.68rem;
    -webkit-overflow-scrolling:touch}
  .lenta .in::-webkit-scrollbar{height:0}
  .lenta .in span{white-space:nowrap}
}
.pechat{width:118px;height:118px;border-radius:50%;background:var(--kafyavo);
  color:var(--hartia);display:grid;place-items:center;text-align:center;
  font-size:.62rem;letter-spacing:.1em;line-height:1.6}

/* ── Карти ──────────────────────────────────────────────────────────────── */
.karta{background:var(--byalo);padding:clamp(1.1rem,2.4vw,1.5rem)}
.reshetka{display:grid;gap:1rem}
@media(min-width:640px){.reshetka.dve{grid-template-columns:1fr 1fr}}
@media(min-width:640px){.reshetka.chetiri{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.reshetka.chetiri{grid-template-columns:repeat(4,1fr)}}
@media(min-width:760px){.reshetka.tri{grid-template-columns:repeat(3,1fr)}}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.dolu{border-top:1px solid var(--zeleno-tanko);padding:2.2rem 0 3rem;
  font-size:.85rem;color:var(--mastilo-mek);letter-spacing:.03em}
.dolu .in{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,3vw,2.2rem);
  display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline}
.dolu .raste{flex:1}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}