*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Poppins', sans-serif;
  background:#fff;
  color:#222;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}

header{
  background:#0d7c3d;
  padding:15px 0;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  width:180px;
}

nav{
  display:flex;
  gap:20px;
}

nav a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
}

.btn-whatsapp{
  background:#d81b72;
  color:#fff;
  padding:12px 20px;
  border-radius:10px;
  text-decoration:none;
}

.hero{
  padding:70px 0;
  background:linear-gradient(to bottom,#fff,#fff6f9);
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.hero h1{
  font-size:60px;
  line-height:1.1;
  color:#0d7c3d;
}

.hero h1 span{
  color:#d81b72;
}

.hero p{
  margin:25px 0;
  font-size:20px;
}

.hero-buttons{
  display:flex;
  gap:15px;
}

.btn-green,.btn-pink{
  padding:14px 24px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}

.btn-green{
  background:#0d7c3d;
  color:#fff;
}

.btn-pink{
  background:#d81b72;
  color:#fff;
}

.hero-image img{
  width:100%;
}

section{
  padding:70px 0;
}

h2{
  margin-bottom:30px;
  color:#0d7c3d;
  font-size:38px;
}

.gallery-grid,
.cards,
.method-grid,
.plan-grid,
.uniform-grid,
.testimonial-grid{
  display:grid;
  gap:20px;
}

.gallery-grid{
  grid-template-columns:repeat(4,1fr);
}

.gallery-grid img{
  width:100%;
  border-radius:15px;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.hours-box{
  background:#fff0f7;
  padding:30px;
  border-radius:20px;
  border:2px solid #d81b72;
}

.cards{
  grid-template-columns:repeat(3,1fr);
}

.card{
  background:#fff;
  padding:25px;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
  font-weight:600;
}

.method-grid{
  grid-template-columns:repeat(3,1fr);
}

.method-card{
  background:#fff;
  padding:30px;
  border-radius:20px;
  border-top:5px solid #ff7a00;
}

.plan-grid{
  grid-template-columns:repeat(3,1fr);
}

.plan-card{
  background:#fff;
  padding:35px;
  border-radius:20px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.featured{
  border:3px solid #d81b72;
}

.plan-card h4{
  color:#ff7a00;
  font-size:32px;
  margin:20px 0;
}

.plan-card ul{
  margin-left:20px;
}

.uniform-grid{
  grid-template-columns:repeat(2,1fr);
}

.uniform-card{
  background:#fff;
  border-radius:20px;
  padding:30px;
  text-align:center;
  border:2px solid #0d7c3d;
}

.uniform-card img{
  width:100%;
  max-width:300px;
}

.testimonial-grid{
  grid-template-columns:repeat(3,1fr);
}

.testimonial{
  background:#fff;
  padding:25px;
  border-radius:15px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}

footer{
  background:#0d7c3d;
  color:#fff;
  padding:50px 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.footer-logo{
  width:160px;
  margin-bottom:15px;
}

@media(max-width:900px){

.hero-grid,
.about-grid,
.plan-grid,
.method-grid,
.cards,
.uniform-grid,
.gallery-grid,
.testimonial-grid,
.footer-grid{
  grid-template-columns:1fr;
}

.hero h1{
  font-size:40px;
}

nav{
  display:none;
}

}

/* Subtítulo dos planos (faixa etária) */
.plan-sub {
  font-size: 0.85rem;
  color: #666;
  margin: -8px 0 10px 0;
}

/* === Cartão Kids Bronze === */
.plan-bronze {
  border: 3px solid #cd7f32;
  box-shadow: 0 4px 12px rgba(140, 90, 43, 0.25);
}

.flag-bronze {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.35))
          drop-shadow(-1px -1px 1px rgba(255,235,200,0.6));
}

/* Preço anual dos planos */
.plan-anual {
  font-size: 0.9rem;
  color: #555;
  margin: -6px 0 12px 0;
  line-height: 1.5;
}

.plan-destaque {
  color: #cd7f32;
  font-weight: bold;
}

/* === Cartão Kids Prata === */
.plan-prata {
  border: 3px solid #a8a8b0 !important;
  box-shadow: 0 4px 12px rgba(120, 120, 130, 0.30);
}

.flag-prata {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.30))
          drop-shadow(-1px -1px 1px rgba(255,255,255,0.8));
}

.plan-destaque-prata {
  color: #7c7c82;
  font-weight: bold;
}

/* === Cartão Kids Ouro === */
.plan-ouro {
  border: 3px solid #d4af37;
  box-shadow: 0 4px 14px rgba(201, 151, 31, 0.35);
}

.flag-ouro {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto 12px auto;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.30))
          drop-shadow(-1px -1px 1px rgba(255,245,200,0.8));
}

.plan-destaque-ouro {
  color: #a67c11;
  font-weight: bold;
}