/* ============================================================
   Para Crianças — хаб детского раздела (только pt).
   Яркая, добрая, детская страница в фирменном стиле Gelimo.
   Секции: hero, ценности, 3 карточки игр, блок родителей,
   финальный блок. Мобайл: карточки в один столбец.
   ============================================================ */

:root {
  --kids-blue: #02528a;
  --kids-ink: #0c1f2c;
  --kids-cores: #ff7a59;
  --kids-numeros: #21b6c9;
  --kids-alfabeto: #f7b500;
}

/* ---------- Хлебные крошки (в hero, белым по тёмному) ---------- */
.kids-hero-crumbs {
  font-size: 14px;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.72);
}
.kids-hero-crumbs a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.kids-hero-crumbs a:hover { text-decoration: underline; }
.kids-hero-crumbs span { margin: 0 8px; }
.kids-hero-crumbs span[aria-current] { margin: 0; color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   HERO
   ============================================================ */
.kids-hero {
  position: relative;
  overflow: hidden;
  padding: 130px 0 90px;
  background-color: #02528a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kids-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg, rgba(4, 30, 58, 0.74) 0%, rgba(4, 30, 58, 0.48) 45%, rgba(4, 30, 58, 0.28) 100%);
}
.kids-hero .container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.kids-hero-content { color: #fff; }
.kids-hero h1 {
  color: #fff;
  margin: 14px 0 18px;
  line-height: 1.05;
}
.kids-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 19px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 0 28px;
}
.kids-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.kids-pill-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--kids-alfabeto);
}

/* Визуал: маскот + плавающие буквы/цифры/цвета */
.kids-hero-visual {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kids-hero-blob {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  background: rgba(255, 255, 255, 0.14);
  animation: kids-blob 9s ease-in-out infinite;
}
@keyframes kids-blob {
  0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
  50% { border-radius: 55% 45% 42% 58% / 55% 58% 42% 45%; }
}
.kids-hero-mascot {
  position: relative;
  z-index: 2;
  max-width: 260px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}
.kids-chip {
  position: absolute;
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  animation: kids-float 5s ease-in-out infinite;
}
.kids-chip.c1 { top: 4%;  left: 6%;  background: var(--kids-cores);   animation-delay: 0s; }
.kids-chip.c2 { top: 12%; right: 2%; background: var(--kids-numeros); animation-delay: .6s; }
.kids-chip.c3 { bottom: 16%; left: 0;  background: var(--kids-alfabeto); color: var(--kids-ink); animation-delay: 1.2s; }
.kids-chip.c4 { bottom: 4%; right: 10%; background: #5ac36a; animation-delay: 1.8s; }
@keyframes kids-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-hero-blob, .kids-chip { animation: none; }
}

/* ============================================================
   Общие секции
   ============================================================ */
.kids-section { padding: 80px 0; }
.kids-section .container { max-width: var(--_ui---container--max-width, 1240px); margin: 0 auto; padding: 0 24px; }
.kids-section h2 { color: var(--kids-ink); margin: 0 0 20px; }
.kids-lead { font-size: 18px; line-height: 1.6; color: #33475a; max-width: 820px; }
.kids-lead p { margin: 0 0 16px; }
.kids-lead p:last-child { margin-bottom: 0; }

.kids-values { background: #f4f8fb; }

/* ============================================================
   Карточки трёх игр
   ============================================================ */
.kids-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.kids-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(12, 31, 44, 0.08);
  box-shadow: 0 10px 26px rgba(12, 31, 44, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.kids-card:hover,
.kids-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(12, 31, 44, 0.16);
  outline: none;
}
.kids-card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.kids-card:hover .kids-card-media { transform: scale(1.04); }
.kids-card--cores   .kids-card-media { background-color: #ff8a5c; }
.kids-card--numeros .kids-card-media { background-color: #23a8bf; }
.kids-card--alfabeto .kids-card-media { background-color: #f7b500; }
.kids-card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.kids-card-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.kids-card--cores   .kids-card-tag { color: var(--kids-cores); }
.kids-card--numeros .kids-card-tag { color: var(--kids-numeros); }
.kids-card--alfabeto .kids-card-tag { color: #d99400; }
.kids-card-body h3 { color: var(--kids-ink); margin: 0 0 10px; font-size: 22px; }
.kids-card-body p { color: #52606d; font-size: 15.5px; line-height: 1.5; margin: 0 0 20px; }
.kids-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--kids-blue);
}
.kids-card-cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.kids-card:hover .kids-card-cta svg { transform: translateX(4px); }

/* ============================================================
   Блок для родителей
   ============================================================ */
.kids-parents {
  background: linear-gradient(135deg, #02528a 0%, #013a63 100%);
  color: #fff;
}
.kids-parents h2 { color: #fff; }
.kids-parents .kids-lead { color: rgba(255, 255, 255, 0.9); }

/* ============================================================
   Финальный блок
   ============================================================ */
.kids-final { background: #f4f8fb; text-align: center; }
.kids-final .container { max-width: 900px; }
.kids-final h2 { color: var(--kids-ink); }
.kids-final .kids-lead { margin: 0 auto 30px; text-align: center; }
.kids-final-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.kids-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 8px 18px rgba(12, 31, 44, 0.14);
}
.kids-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(12, 31, 44, 0.22); }
.kids-btn--cores   { background: linear-gradient(135deg, #ff9a6b, #ff6f91); }
.kids-btn--numeros { background: linear-gradient(135deg, #2ec5d3, #1f8ed1); }
.kids-btn--alfabeto { background: linear-gradient(135deg, #ffd166, #f7a400); color: var(--kids-ink); }

/* ---------- Внутренние ссылки (каталог / главная) ---------- */
.kids-internal {
  min-height: 220px;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kids-internal .container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.kids-internal p { color: #52606d; font-size: 15px; }
.kids-internal a { color: var(--kids-blue); font-weight: 600; text-decoration: none; }
.kids-internal a:hover { text-decoration: underline; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 991px) {
  .kids-hero { padding: 120px 0 70px; }
  .kids-hero .container { grid-template-columns: 1fr; text-align: center; }
  .kids-hero-lead { margin-left: auto; margin-right: auto; }
  .kids-hero-visual { min-height: 300px; order: -1; margin-bottom: 10px; }
  .kids-cards { grid-template-columns: 1fr; }
  .kids-section { padding: 60px 0; }
}
@media (max-width: 600px) {
  .kids-hero h1 { font-size: 32px; }
  .kids-hero-mascot { max-width: 200px; }
  .kids-chip { width: 46px; height: 46px; font-size: 22px; }
}