/* ============================================================
   promo.css — библиотека блоков промо-страниц (конструктор), v1.
   Подключается ПОСЛЕ os.css страницами, которые печёт
   os_mind/tools/promo_bake.py. Голос — как у дверей сайта:
   космос, песок в территории выбора, типографика дверей.
   Контент-страница держит только содержание, форма живёт здесь.
   ============================================================ */

body.promo{background:var(--kosmos);color:var(--pesok);
  font-family:var(--shrift);font-weight:300;font-size:17px;line-height:1.8;
  margin:0;padding:4.6rem 0 0}
body.promo *{box-sizing:border-box}
body.promo a{color:var(--zoloto);text-decoration:none}

/* --- слои-секции: космос (базовый), глубже, песок --- */
.sloi{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:clamp(3rem,8vw,5.5rem) 1.4rem;margin:0}
.sloi.glubzhe{background:var(--kosmos-glub)}
.sloi.peskom{background:linear-gradient(180deg,var(--pesok),var(--pesok-glub));
  color:#5c534b}
.uzkoe{max-width:36em;width:100%}
.uzkoe p{margin:0}
.uzkoe p+p{margin-top:1rem}

/* --- типографика дверей --- */
.metka{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--zoloto);opacity:.8;margin:0 0 1.2rem;
  animation:mercanie 34s ease-in-out infinite}
.peskom .metka{color:var(--zoloto-temn);opacity:1}
h1{font-weight:700;font-size:clamp(1.6rem,4.4vw,2.3rem);color:#F1E7D4;
  margin:0 0 .6rem;line-height:1.25}
h2{font-weight:500;font-size:1.35rem;color:#EBDCC2;margin:0 0 1.1rem;line-height:1.4}
.peskom h2{color:#3a332d}
.stroka{font-size:1.2rem;letter-spacing:.04em;line-height:1.8;
  color:var(--dym-sinij);max-width:28em;margin:0}
.melko{font-size:.9rem;letter-spacing:var(--vozduh);text-transform:lowercase}

/* --- герой: первый экран --- */
.geroi{min-height:calc(100svh - 4.6rem);justify-content:center;
  text-align:center;gap:1.6rem}
.geroi .stroka{margin:0 auto}
.tri{width:84px;height:auto;display:block;
  animation:dyhanie var(--vdoh) ease-in-out infinite,
            dyhanie-svet var(--vdoh) ease-in-out infinite}
.tri line{stroke:var(--zoloto);stroke-width:7.1;stroke-linecap:round}
.logo-dyshit{width:76px;height:auto;display:block;
  animation:dyhanie var(--vdoh) ease-in-out infinite}
.obl{width:min(320px,70vw);aspect-ratio:1/1;object-fit:cover;
  border:1px solid rgba(242,203,142,.35);border-radius:10px;
  box-shadow:0 0 70px rgba(245,217,160,.14)}
.tema{font-size:.95rem;letter-spacing:.06em;color:var(--dym-sinij);
  animation:mercanie 29s ease-in-out infinite}
.tema b{font-weight:400;color:var(--zoloto)}
.data{font-size:.9rem;letter-spacing:.08em;color:var(--pesok)}
.schet{font-size:.8rem;letter-spacing:.2em;text-transform:lowercase;
  color:var(--dym-sinij);min-height:1em}
.fakty{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;
  font-size:.92rem;letter-spacing:.05em;color:var(--dym-sinij)}
.fakty span{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.fakty svg{width:13px;height:15px;color:var(--zoloto);opacity:.8}

/* --- зов: главная кнопка героя --- */
.zov{display:inline-flex;flex-direction:column;align-items:center;gap:.6rem;
  color:var(--zoloto);transition:color .4s}
.zov:hover{color:var(--persik3)}
.zov .fraza{font-size:1.1rem;letter-spacing:.05em;opacity:.92}
.zov-ramka{display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1rem 2.4rem;border:1px solid var(--zoloto);border-radius:2rem;
  color:var(--zoloto);font-size:1.05rem;letter-spacing:.04em;
  transition:background .5s,color .5s}
.zov-ramka:hover{background:var(--zoloto);color:var(--kosmos)}
.cherv{opacity:.65}
.cherv path{stroke:currentColor;stroke-width:1;stroke-linecap:round;fill:none}
.besplatno{font-size:.82rem;color:var(--dym-sinij)}

/* --- состав встреч и расписание --- */
.sostav{list-style:none;margin:.4rem 0 0;padding:0}
.sostav li{display:flex;gap:1rem;align-items:baseline;padding:.55rem 0}
.sostav svg{width:13px;height:15px;flex:0 0 13px;color:var(--zoloto);
  animation:veter 23s ease-in-out infinite}
.raspisanie{margin-top:1.8rem;padding:1.2rem 1.4rem;border-radius:1rem;
  background:rgba(255,244,220,.05);font-size:.92rem;line-height:1.9}
.raspisanie b{font-weight:400;color:#E0D3BC}

/* --- созвездие тем --- */
.sozvezdie{text-align:center}
.sozvezdie svg.nebo{width:100%;max-width:560px;height:auto;margin:1rem auto 0;display:block}
.podpis{min-height:1.8em;margin-top:.8rem;font-size:.95rem;color:var(--zoloto);
  letter-spacing:.05em;animation:mercanie 26s ease-in-out infinite}
.zv{cursor:pointer}
.zv circle.telo{fill:var(--dym-sinij);opacity:.7;transition:opacity .25s,fill .25s}
.zv:hover circle.telo{opacity:1;fill:var(--zoloto)}
.zv-nova circle.telo{fill:var(--persik3);opacity:1}

/* --- экран с фрагментом --- */
.ekran{position:relative;width:100%;max-width:40em;margin-top:1.2rem;
  aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;
  background:rgba(0,0,0,.3);border:1px solid rgba(242,203,142,.18);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.ekran video{width:100%;height:100%;object-fit:cover;display:none}
.ekran .pusk{display:flex;flex-direction:column;align-items:center;gap:.8rem;
  color:var(--zoloto);font-size:.9rem;letter-spacing:.06em;text-align:center}
.ekran .krug{width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(242,203,142,.55);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  animation:dyhanie-svet var(--vdoh) ease-in-out infinite}
.ekran:hover .krug{background:rgba(242,203,142,.12)}
.golosa{margin-top:1.2rem;font-style:italic;color:var(--dym-sinij)}

/* --- цитаты голосом ДэДэ --- */
.citata{margin:1.6rem 0 0;padding-left:1.3rem;
  border-left:1px solid rgba(242,203,142,.35);
  font-style:italic;color:#D8CDBB;line-height:1.9}
.citata .kto{display:block;margin-top:.5rem;font-style:normal;
  font-size:.8rem;letter-spacing:.12em;text-transform:lowercase;
  color:var(--dym-sinij);opacity:.85}

/* --- для кого: две колонки --- */
.dvoe{display:grid;gap:2rem;margin-top:.6rem}
@media(min-width:620px){.dvoe{grid-template-columns:1fr 1fr}}
.dvoe h3{font-weight:400;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 .9rem}
.dvoe .da h3{color:var(--zoloto)}
.dvoe .net h3{color:var(--dym-sinij);opacity:.85}
.dvoe ul{list-style:none;font-size:.94rem;line-height:1.85;margin:0;padding:0}
.dvoe li{padding:.35rem 0}
.dvoe li::before{content:'— ';opacity:.5}

/* --- три страха / коротко и честно --- */
.strah{margin-bottom:1.5rem}
.strah b{color:var(--pesok);font-weight:500;display:block;margin-bottom:.25rem}
.peskom .strah b{color:#3a332d}

/* --- дорожка --- */
.dorozhka{display:flex;align-items:center;justify-content:center;gap:.7rem;
  flex-wrap:wrap;font-size:1.05rem;margin-bottom:2rem}
.dorozhka b{color:#3a332d;font-weight:500}
.dorozhka .strelka{color:var(--zoloto-temn)}

.zov-pesok{display:inline-block;margin-top:.4rem;padding:.95rem 2.2rem;
  background:var(--persik3);color:#2b2320;border-radius:2rem;font-size:1rem;
  transition:background .4s}
.zov-pesok:hover{background:var(--persik4)}

/* --- тарифы на песке --- */
.tarify{margin-top:1.4rem;display:grid;gap:.7rem}
.tarif{display:flex;justify-content:space-between;align-items:baseline;
  padding:1rem 1.3rem;border-radius:1rem;
  background:rgba(255,252,246,.45);font-size:.97rem}
.tarif b{font-weight:400;color:#3a332d}
.tarif .cena{color:var(--zoloto-temn);white-space:nowrap}
.zachet{margin-top:.9rem;font-size:.82rem;color:#6b6157}

/* --- заявка на песке --- */
.zayavka{max-width:26em;width:100%;margin-top:2rem;
  background:rgba(255,252,246,.6);border-radius:1rem;
  padding:1.3rem 1.4rem;font-size:.85rem}
.zayavka p{margin:0 0 .8rem;color:#6b6157}
.zayavka input[type=text]{display:block;width:100%;margin-bottom:.6rem;
  background:rgba(255,255,255,.7);border:none;outline:none;
  border-radius:.6rem;padding:.6em .95em;
  font-family:var(--shrift);font-weight:300;font-size:.85rem;color:#3a332d}
.zayavka label{display:flex;gap:.55em;align-items:flex-start;
  font-size:.74rem;color:#6b6157;margin:.5rem 0 1rem;line-height:1.5}
.zayavka label a{color:var(--zoloto-temn);text-decoration:underline}
.zayavka .knopka{width:100%;border:none;border-radius:.6rem;cursor:pointer;
  background:var(--persik3);color:#2b2320;
  font-family:var(--shrift);font-weight:400;font-size:.9rem;
  letter-spacing:.06em;padding:.8em;transition:background .25s}
.zayavka .knopka:hover{background:var(--persik4)}
.zayavka .knopka:disabled{opacity:.6;cursor:default}
.otvet{margin-top:.8rem;font-size:.8rem;color:var(--zoloto-temn);min-height:1.2em}

/* --- тихий ход вглубь и реквизиты --- */
.gluboko{text-align:center;padding:2.5rem 1.4rem}
.gluboko p{font-size:.8rem;color:var(--dym-sinij);opacity:.85;margin:0}
.gluboko a{margin:0 .4rem;white-space:nowrap}
.rekvizity{text-align:center;padding:0 1.4rem 2rem;background:var(--kosmos);
  font-size:.78rem;line-height:2;color:var(--dym-sinij)}
.rekvizity p{margin:0}
.rekvizity .ip{font-size:.68rem;opacity:.65}

/* --- дыхание и покой --- */
@keyframes dyhanie{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.045);opacity:1}}
@keyframes dyhanie-svet{
  0%,100%{filter:drop-shadow(0 0 14px rgba(242,203,142,.3))}
  50%{filter:drop-shadow(0 0 36px rgba(242,203,142,.6))}}
@keyframes mercanie{
  0%,100%{opacity:.55}40%{opacity:.85}70%{opacity:.3}}
@keyframes veter{
  0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@media(prefers-reduced-motion:reduce){
  body.promo *{animation:none!important}}