/* Для детей: аптечные склянки цветных микстур.
   Занятие - склянка со своей микстурой (малиновая, травяная, кобальтовая) и своей пробкой; текст занятия - на её этикетке:
   цветная сигнальная полоса и рамка в цвет микстуры, строки-подписи на линейках. Фото - карточки веером внахлёст, расходятся под
   курсором и пальцем, по нажатию - просмотр на весь экран. Движение (микстура наливается, веер раскладывается) - js/deti.js.
   Без скриптов и при prefers-reduced-motion склянки полные, веер разложен. Общие файлы не тронуты. */
.pg-deti .kid{--mix:#a5182e;--mix-d:#6b0d1f;--mix-l:#dd6074;--glass:rgba(241,232,210,.36)}
.pg-deti .kid[data-kind=travy]{--mix:#2f7a3a;--mix-d:#174d27;--mix-l:#7cc281}
.pg-deti .kid[data-kind=kvest]{--mix:#2443a8;--mix-d:#132468;--mix-l:#7d99ec}
.pg-deti .sec-kids{overflow-x:hidden;overflow-x:clip}
.pg-deti .kids{gap:clamp(46px,7vw,100px)}
.pg-deti .kid{gap:30px;align-items:center}

/* ---------- склянка ---------- */
.kid-fl{position:relative;width:100%;max-width:500px;min-width:0;margin:0 auto}
.kid-top{position:relative;line-height:0}
.kid-top svg{display:block;width:100%;height:auto;overflow:visible}
.kid-top path,.kid-top rect,.kid-top circle{vector-effect:non-scaling-stroke}
.fl-g{fill:rgba(241,232,210,.06);stroke:var(--glass);stroke-width:2}
.fl-s1{stop-color:var(--mix-d)}.fl-s2{stop-color:var(--mix)}.fl-s3{stop-color:var(--mix-l)}
.fl-lq{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--ks,1))}
.fl-men{fill:none;stroke:var(--mix-l);stroke-width:2;opacity:var(--ks,1)}
.fl-lip{fill:#2b2218;stroke:var(--glass);stroke-width:2}
.fl-cork{fill:#b98b52;stroke:#6b4a1c;stroke-width:1.5}
.fl-cork-l{fill:none;stroke:#7d5a2a;stroke-width:1.2;opacity:.65}
.fl-stop{fill:rgba(241,232,210,.14);stroke:rgba(241,232,210,.55);stroke-width:2}
.fl-hl{fill:none;stroke:rgba(255,244,214,.4);stroke-width:3;stroke-linecap:round}
.kid-body{position:relative;margin-top:-1px;padding:8px 13px 22px;border:2px solid var(--glass);border-top:0;border-radius:0 0 20px 20px/0 0 16px 16px;background:rgba(241,232,210,.05)}
.kid-body::before{content:"";position:absolute;inset:0;border-radius:0 0 18px 18px/0 0 14px 14px;      /* микстура за стеклом */
  background:linear-gradient(to top,var(--mix-d) 0,var(--mix-d) 24px,transparent 46px),linear-gradient(90deg,var(--mix-d) 0%,var(--mix) 9%,var(--mix-l) 15%,var(--mix) 24%,var(--mix) 80%,var(--mix-d) 100%);
  -webkit-clip-path:inset(calc((1 - var(--kb,1)) * 100%) 0 0 0);clip-path:inset(calc((1 - var(--kb,1)) * 100%) 0 0 0)}
.kid-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13px;border-radius:0 0 18px 18px/0 0 14px 14px;background:linear-gradient(rgba(10,6,2,0),rgba(10,6,2,.42))}      /* толстое дно */

/* ---------- этикетка ---------- */
.pg-deti .kid-t{position:relative;z-index:1;margin:0;padding:34px 20px 26px;font-size:1.04rem;line-height:1.58;
  background:radial-gradient(ellipse 50% 26% at 3% 99%,rgba(74,50,22,.12),transparent 62%),linear-gradient(176deg,#f2e6c6 0%,#e9dab3 60%,#e0d0a4 100%);
  box-shadow:0 0 0 1px rgba(20,12,4,.35),0 5px 10px rgba(10,6,2,.4)}
.pg-deti .kid-t::before{content:"";position:absolute;inset:7px;border:2px solid var(--mix-d);outline:1px solid var(--mix-d);outline-offset:-6px;pointer-events:none}      /* рамка, напечатанная краской в цвет микстуры */
.pg-deti .kid-t::after{content:"";position:absolute;left:7px;right:7px;top:7px;height:10px;background:var(--mix);pointer-events:none}      /* сигнальная полоса */
.pg-deti .kid-t>*{position:relative;max-width:none}
.pg-deti .kid-h{padding-top:6px;text-align:center;font-family:var(--serif);font-weight:600;font-size:clamp(1.62rem,6.2vw,2.1rem);line-height:1.08;color:#160d04}
.pg-deti .kid-h::after{content:"";display:block;width:92px;height:9px;margin:13px auto 0;
  background:radial-gradient(circle,var(--mix) 3.4px,transparent 4px) 50% 50%/9px 9px no-repeat,linear-gradient(var(--mix-d),var(--mix-d)) 0 50%/36px 1px no-repeat,linear-gradient(var(--mix-d),var(--mix-d)) 100% 50%/36px 1px no-repeat}
/* строки-подписи - на линейках этикетки; подпись напечатана краской микстуры */
.pg-deti .kid-facts{margin-top:14px;font-size:18px;line-height:34px;color:#1c1206;background:linear-gradient(transparent 33px,rgba(74,47,20,.36) 33px) 0 0/100% 34px}
.pg-deti .kid-facts strong{font-weight:700;color:var(--mix-d)}
.pg-deti .kid-t .act{margin-top:1.2em}
.pg-deti .kid-t a.btn.ink{display:block;padding:15px 16px;text-align:center;background:var(--mix);border-color:var(--mix-d);color:#f6ecd4;letter-spacing:.18em;transition:background .3s,border-color .3s}
.pg-deti .kid-t a.btn.ink:hover{background:var(--mix-d);border-color:var(--mix-d);color:#f6ecd4}

/* ---------- фото: карточки веером ---------- */
.pg-deti .kid-ph{position:relative;display:block;width:100%;max-width:540px;margin:0 auto;padding:0;overflow:visible;scroll-snap-type:none}
.pg-deti .kid-ph::before{content:"";display:block;padding-top:108%}      /* высота стопки: карточки стоят абсолютно */
.pg-deti .kid-ph .ph{position:absolute;left:var(--x);top:var(--y);z-index:1;display:block;width:55%;padding:6px;border:0;background:#efe6cf;box-shadow:0 0 0 1px rgba(20,12,4,.3),0 10px 18px rgba(0,0,0,.55);cursor:zoom-in;
  transform:translate(calc(var(--sx) * (1 - var(--o,1)) + var(--dx,0px)),calc(var(--sy) * (1 - var(--o,1)) + var(--dy,0px))) rotate(calc(var(--r0) * (1 - var(--o,1)) + var(--r) * var(--o,1) * var(--tilt,1))) scale(var(--sc,1))}
.pg-deti .kid-ph .ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.pg-deti .kid-ph.ready .ph{transition:transform .38s cubic-bezier(.2,.7,.2,1),box-shadow .38s}
.pg-deti .kid-ph .ph.on{z-index:6;--tilt:0;--sc:1.07;box-shadow:0 0 0 1px rgba(20,12,4,.3),0 18px 28px rgba(0,0,0,.6)}
/* стопка внахлёст два на два: телефон и узкая колонка */
.pg-deti .kid-ph .ph:nth-child(1){--x:1%;--y:0%;--r:-5deg;--r0:-3deg;--sx:39%;--sy:48%}
.pg-deti .kid-ph .ph:nth-child(2){--x:44%;--y:5%;--r:4deg;--r0:2.5deg;--sx:-39%;--sy:38%}
.pg-deti .kid-ph .ph:nth-child(3){--x:0%;--y:46%;--r:3.5deg;--r0:-1.5deg;--sx:41%;--sy:-42%}
.pg-deti .kid-ph .ph:nth-child(4){--x:44%;--y:49%;--r:-4.5deg;--r0:4deg;--sx:-39%;--sy:-48%}

/* ---------- форма внизу страницы: бланк с тремя красками микстур ---------- */
.pg-deti .sec-form .frm{position:relative;padding-top:40px}
.pg-deti .sec-form .frm::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:10px;background:linear-gradient(90deg,#a5182e 0 33.33%,#2f7a3a 33.33% 66.66%,#2443a8 66.66% 100%)}
.pg-deti .sec-form .frm::after{content:"";position:absolute;inset:8px;border:1px solid rgba(74,47,20,.5);pointer-events:none}
.pg-deti .sec-form .frm>*{position:relative;z-index:1}

@media (min-width:700px){
  .pg-deti .kid-body{padding:10px 22px 28px}
  .pg-deti .kid-t{padding:40px 30px 30px}
  .pg-deti .kid-t::before{inset:9px}
  .pg-deti .kid-t::after{left:9px;right:9px;top:9px}
  .pg-deti .sec-form .frm{padding-top:46px}
}
@media (min-width:900px){
  .pg-deti .kid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px)}
  .pg-deti .kid:nth-child(even) .kid-t{order:0}
  .pg-deti .kid:nth-child(even) .kid-fl{order:2}
  .pg-deti .kid-facts{font-size:19px;line-height:36px;background-size:100% 36px;background-image:linear-gradient(transparent 35px,rgba(74,47,20,.36) 35px)}
}
@media (min-width:1200px){
  .pg-deti .kid{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(40px,4.4vw,72px)}
  .pg-deti .kid:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,520px)}
  .kid-fl{max-width:520px}
  .pg-deti .kid-t{padding:44px 40px 34px}
}
@media not all{
  .pg-deti .kid-ph .ph{transition:none}
  .pg-deti .kid-ph .ph.on{--tilt:1;--sc:1}
}