/* Seção: Crianças (lista com ícones, aviso, botões e mosaico de fotos) */
.kids { background: var(--fundo, var(--sol)); padding: 124px 0 112px }
.kids-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.kids-free { margin-top: 28px; background: #fff; border-radius: 20px 20px 20px 6px; padding: 16px 20px; color: var(--tinta); font-size: 16px }
.kids-free b { font-family: var(--display); font-weight: 600; color: var(--petroleo) }
.kids-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px }


.kids-list { margin-top: 34px }
.kid { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; border-top: 1.5px solid rgba(38, 70, 81, .18) }
.kid:last-child { border-bottom: 1.5px solid rgba(38, 70, 81, .18) }
.kid .ico { width: 42px; height: 42px; color: var(--petroleo); transition: transform .5s var(--ease) }
.kid:hover .ico { transform: rotate(-10deg) scale(1.12) }
.kid b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--petroleo); display: block; line-height: 1.2 }
.kid span { font-size: 15.5px; line-height: 1.5; display: block; margin-top: 4px; color: var(--tinta) }

/* Fundo escuro escolhido no admin */
.kids.fundo-escuro h2, .kids.fundo-escuro .kid b, .kids.fundo-escuro .kid .ico { color: #fff }
.kids.fundo-escuro .kid span { color: rgba(255, 255, 255, .85) }
.kids.fundo-escuro .kid { border-color: rgba(255, 255, 255, .2) }

.kids-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 230px 200px 230px; gap: 16px }
.kids-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 28px; transition: transform .6s var(--ease) }
.kids-photos img:hover { transform: scale(1.03) rotate(-1deg) }
.kids-photos .k1 { grid-row: 1 / 3; border-radius: 46% 54% 40% 60% / 34% 38% 62% 66% }
.kids-photos .k3 { grid-row: 2 / 4; border-radius: 120px 28px 120px 28px }
.js .float { animation: float 7s ease-in-out infinite }
@keyframes float { 50% { transform: translateY(-10px) } }

/* Mobile */
@container page (max-width: 760px) {
  .kids { padding: 80px 0 80px }
  .kids-grid { grid-template-columns: 1fr; gap: 40px }
  .kids-photos { grid-template-rows: 180px 150px 180px; gap: 10px }
}