:root {

  --bg: #fffafc;

  --surface: #ffffff;

  --surface-soft: #fff2f7;

  --primary: #f28cab;

  --primary-dark: #d96388;

  --secondary: #8ab6e8;

  --accent: #a8d98b;

  --text: #43384a;

  --muted: #75667a;

  --border: rgba(120, 89, 131, 0.14);

  --shadow: 0 20px 50px rgba(219, 120, 153, 0.18);

  --radius: 24px;

  --radius-sm: 18px;

  --container: 1180px;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: "Nunito", sans-serif;

  color: var(--text);

  background:

    radial-gradient(circle at top left, rgba(242, 140, 171, 0.14), transparent 26%),

    radial-gradient(circle at top right, rgba(138, 182, 232, 0.12), transparent 18%),

    var(--bg);

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



button {

  font: inherit;

}



.container {

  width: min(calc(100% - 2rem), var(--container));

  margin: 0 auto;

}



.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(255, 250, 252, 0.88);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.4);

}



.nav {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  padding: 0.75rem 0;

}



.brand {

  width: clamp(170px, 24vw, 260px);

}



.brand img {

  width: 100%;

  border-radius: 16px;

}



.menu {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  justify-content: flex-end;

}



.menu a {

  color: var(--muted);

  font-weight: 700;

  transition: color 0.2s ease;

}



.menu a:hover,

.menu a:focus-visible {

  color: var(--primary-dark);

}



.hero {

  padding: 4.5rem 0 3rem;

}



.hero-grid,

.two-col,

.contact-grid,

.intro-grid {

  display: grid;

  gap: 2rem;

}



.hero-grid {

  grid-template-columns: 1.08fr 0.92fr;

  align-items: center;

}



.hero-copy h1,

.section-heading h2,

.contact-card h2 {

  margin: 0;

  font-family: "Playfair Display", serif;

  line-height: 1.08;

}



.hero-copy h1 {

  font-size: clamp(2.5rem, 5vw, 4.6rem);

  margin-top: 0.75rem;

}



.hero-copy p,

.text-card p,

.service-card p,

.feature-card p,

.contact-card p,

.section-heading p,

.note-box p,

.plan-card li,

.footer-content p {

  color: var(--muted);

  line-height: 1.75;

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  padding: 0.45rem 0.85rem;

  border-radius: 999px;

  background: rgba(242, 140, 171, 0.16);

  color: var(--primary-dark);

  font-weight: 800;

  letter-spacing: 0.02em;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin: 1.75rem 0;

}



.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.95rem 1.35rem;

  border-radius: 999px;

  font-weight: 800;

  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.button:hover,

.button:focus-visible {

  transform: translateY(-2px);

}



.button-primary {

  color: #fff;

  background: linear-gradient(135deg, var(--primary), var(--primary-dark));

  box-shadow: 0 16px 35px rgba(218, 99, 136, 0.28);

}



.button-secondary {

  border: 1px solid var(--border);

  background: rgba(255, 255, 255, 0.84);

}



.hero-points,

.contact-list,

.plan-card ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.hero-points {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.9rem;

}



.hero-points li,

.timeline-item,

.contact-list li,

.plan-card,

.service-card,

.feature-card,

.stat-card,

.text-card,

.map-card,

.contact-card,

.note-box {

  background: rgba(255, 255, 255, 0.82);

  border: 1px solid var(--border);

  box-shadow: var(--shadow);

}



.hero-points li {

  padding: 0.95rem 1rem;

  border-radius: 16px;

  font-weight: 800;

}



.hero-card {

  position: relative;

  padding: 1rem;

  border-radius: 36px;

  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.78));

  border: 1px solid rgba(255,255,255,0.7);

  box-shadow: 0 30px 60px rgba(146, 128, 177, 0.18);

}



.hero-image-wrap {

  position: relative;

  overflow: hidden;

  border-radius: 28px;

}



.hero-main-image {

  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;

  border-radius: 28px;

}



.kids-scene {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

}



.kid-sprite {

  position: absolute;

  width: clamp(34px, 4.6vw, 54px);

  height: auto;

  aspect-ratio: auto;

  object-fit: contain;

  border-radius: 0;

  filter: drop-shadow(0 10px 14px rgba(68, 51, 74, 0.12));

  transform-origin: center bottom;

}



.kid-one {

  left: 10%;

  top: 22%;

  animation: kidFloatOne 4.6s ease-in-out infinite;

}



.kid-two {

  left: 22%;

  bottom: 12%;

  animation: kidFloatTwo 4.1s ease-in-out infinite 0.3s;

}



.kid-three {

  right: 22%;

  bottom: 12%;

  animation: kidFloatThree 4.9s ease-in-out infinite 0.8s;

}



.kid-four {

  right: 10%;

  top: 22%;

  animation: kidFloatFour 4.4s ease-in-out infinite 0.5s;

}



.bee-sprite {

  position: absolute;

  top: 10%;

  left: -10%;

  z-index: 3;

  width: clamp(26px, 3.2vw, 38px);

  height: auto;

  object-fit: contain;

  filter: drop-shadow(0 6px 10px rgba(68, 51, 74, 0.14));

  animation: beeFlyAcross 12s linear infinite;

}



.intro-strip {

  padding-bottom: 1rem;

}



.intro-grid {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.stat-card,

.service-card,

.feature-card,

.text-card,

.contact-card,

.map-card,

.note-box {

  border-radius: var(--radius);

  padding: 1.4rem;

}



.stat-card strong {

  display: block;

  font-size: 1.4rem;

  margin-bottom: 0.45rem;

}



.stat-card span {

  color: var(--muted);

}



.section {

  padding: 5rem 0;

}



.section-soft {

  background: linear-gradient(180deg, rgba(242, 140, 171, 0.08), rgba(138, 182, 232, 0.08));

}



.section-heading {

  max-width: 760px;

  margin-bottom: 2rem;

}



.section-heading h2 {

  margin-top: 0.8rem;

  font-size: clamp(2rem, 4vw, 3.2rem);

}



.two-col {

  grid-template-columns: 1.1fr 0.9fr;

}



.feature-stack,

.ambientamento-plan {

  display: grid;

  gap: 1rem;

}



.feature-card h3,

.service-card h3,

.plan-card h3 {

  margin-top: 0;

  margin-bottom: 0.7rem;

}



.service-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

}



.timeline {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

}



.timeline-item {

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

  padding: 1.15rem 1.2rem;

  border-radius: 20px;

}



.timeline-item strong {

  color: var(--primary-dark);

  font-size: 1.05rem;

}



.note-box {

  margin-top: 1.2rem;

}



.small-note {

  font-size: 0.95rem;

}



.gallery-section .section-heading {

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}



.gallery-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1rem;

}



.gallery-item {

  border: 0;

  padding: 0;

  border-radius: 22px;

  overflow: hidden;

  cursor: pointer;

  background: var(--surface);

  box-shadow: var(--shadow);

  min-height: 220px;

}



.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease, filter 0.35s ease;

}



.gallery-item:hover img,

.gallery-item:focus-visible img {

  transform: scale(1.04);

  filter: saturate(1.05);

}



.gallery-item.wide {

  grid-column: span 2;

}



.gallery-item.tall {

  grid-row: span 2;

}



.contact-grid {

  grid-template-columns: 0.95fr 1.05fr;

  align-items: stretch;

}



.contact-list {

  display: grid;

  gap: 0.85rem;

  margin-top: 1.3rem;

}



.contact-list li {

  padding: 1rem 1.1rem;

  border-radius: 18px;

}



.contact-list a {

  color: var(--primary-dark);

  font-weight: 800;

}



.map-card {

  min-height: 100%;

  padding: 0.75rem;

}



.map-card iframe {

  width: 100%;

  min-height: 100%;

  height: 100%;

  border: 0;

  border-radius: 20px;

}



.site-footer {

  padding: 1.6rem 0 2.4rem;

}



.footer-content {

  padding-top: 1.2rem;

  border-top: 1px solid var(--border);

  text-align: center;

}



.footer-content p:first-child {

  font-weight: 800;

  color: var(--primary-dark);

}



.lightbox {

  position: fixed;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 1rem;

  background: rgba(33, 21, 40, 0.84);

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.25s ease, visibility 0.25s ease;

  z-index: 200;

}



.lightbox.open {

  opacity: 1;

  visibility: visible;

}



.lightbox-figure {

  margin: 0;

  width: min(95vw, 1100px);

  max-height: 90vh;

}



.lightbox-figure img {

  width: 100%;

  max-height: 80vh;

  object-fit: contain;

  border-radius: 24px;

  background: #fff;

}



.lightbox-figure figcaption {

  margin-top: 1rem;

  text-align: center;

  color: #fff;

  font-weight: 700;

}



.lightbox-close {

  position: absolute;

  top: 1rem;

  right: 1rem;

  width: 48px;

  height: 48px;

  border: 0;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);

  color: #fff;

  font-size: 2rem;

  cursor: pointer;

}



@keyframes kidFloatOne {

  0%, 100% { transform: translateY(0) rotate(-4deg); }

  50% { transform: translateY(-8px) rotate(3deg); }

}



@keyframes kidFloatTwo {

  0%, 100% { transform: translateY(0) rotate(2deg) scale(1); }

  40% { transform: translateY(-7px) rotate(-3deg) scale(1.02); }

  70% { transform: translateY(-3px) rotate(2deg) scale(0.99); }

}



@keyframes kidFloatThree {

  0%, 100% { transform: translateY(0) rotate(-2deg); }

  50% { transform: translateY(-8px) rotate(5deg); }

}



@keyframes kidFloatFour {

  0%, 100% { transform: translateY(0) rotate(4deg); }

  50% { transform: translateY(-7px) rotate(-3deg); }

}



@keyframes beeFlyAcross {

  0% {

    transform: translate(-6%, 2%) rotate(8deg);

  }

  15% {

    transform: translate(22vw, 6%) rotate(-4deg);

  }

  30% {

    transform: translate(42vw, 26%) rotate(6deg);

  }

  45% {

    transform: translate(62vw, 10%) rotate(-6deg);

  }

  60% {

    transform: translate(78vw, 30%) rotate(4deg);

  }

  75% {

    transform: translate(56vw, 48%) rotate(-7deg);

  }

  90% {

    transform: translate(24vw, 38%) rotate(6deg);

  }

  100% {

    transform: translate(-6%, 2%) rotate(8deg);

  }

}



@media (max-width: 980px) {

  .hero-grid,

  .two-col,

  .contact-grid,

  .intro-grid,

  .service-grid,

  .timeline,

  .gallery-grid {

    grid-template-columns: 1fr;

  }



  .gallery-item.wide,

  .gallery-item.tall {

    grid-column: auto;

    grid-row: auto;

  }



  .hero-main-image {

    aspect-ratio: 16 / 10;

  }



  .kid-one {

    left: 10%;

    top: 18%;

  }



  .kid-four {

    right: 10%;

    top: 18%;

  }

}



@media (max-width: 760px) {

  .site-header {

    position: static;

  }



  .nav {

    flex-direction: column;

    align-items: flex-start;

  }



  .menu {

    justify-content: flex-start;

  }



  .hero {

    padding-top: 2.5rem;

  }



  .hero-copy h1 {

    font-size: 2.4rem;

  }



  .brand {

    width: min(100%, 260px);

  }



  .hero-points {

    grid-template-columns: 1fr;

  }



  .kid-sprite {

    width: clamp(28px, 8.5vw, 40px);

  }



  .bee-sprite {

    width: clamp(22px, 6vw, 30px);

    animation-duration: 10.5s;

  }



  .kid-one,

  .kid-four {

    top: 18%;

  }



  .kid-two {

    left: 16%;

    bottom: 10%;

  }



  .kid-three {

    right: 16%;

    bottom: 10%;

  }



  .section {

    padding: 4rem 0;

  }

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  .kid-sprite {

    animation: none !important;

  }



  .bee-sprite {

    animation: none !important;

  }



  .gallery-item img,

  .button {

    transition: none;

  }

}