:root{
  --yellow:#FFD93D;
  --blue:#4D96FF;
  --green:#6BCB77;
  --orange:#FF8C42;
  --text:#4A4A4A;
  --white:#FFFFFF;
  --muted:#F5F7FB;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --radius: 18px;
  --max: 1120px;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  color:var(--text);
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width:100%;
  overflow-x:hidden; /* ✅ evita scroll horizontal */
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.section{padding:72px 0;}
.section.compact{padding:48px 0;}

.grid{display:grid; gap:22px;}
.grid > *{min-width:0;} /* ✅ evita desbordes dentro de grids */

.two{grid-template-columns: 1.2fr .8fr;}
.two.reversed{grid-template-columns: .8fr 1.2fr;}
.three{grid-template-columns: repeat(3, minmax(0, 1fr));}

.center{text-align:center}

/* Helper: 2 columnas (desktop/tablet) → 1 columna (móvil) */
.grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* UI */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-weight:600;
  font-size:14px;
  flex-wrap:wrap;              /* ✅ permite romper línea */
  justify-content:center;      /* ✅ centrado en mobile */
  text-align:center;
}
.badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  font-weight:600;
  font-size:13px;
  white-space:nowrap;          /* ✅ evita que se parta raro */
}

.h1{font-family:Fredoka, system-ui; font-size:46px; line-height:1.05; margin:12px 0;}
.h2{font-family:Fredoka, system-ui; font-size:34px; line-height:1.15; margin:0 0 12px;}
.h3{font-family:Fredoka, system-ui; font-size:22px; margin:0 0 10px;}
.lead{font-size:18px; line-height:1.55; margin:10px 0 0;}
.muted{color:#6b7280}
.kicker{letter-spacing:.08em; text-transform:uppercase; font-weight:700; font-size:12px; opacity:.95}

.card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
}
.card.soft{
  box-shadow:none;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.9);
}
.card.hover{
  transition:transform .2s ease, box-shadow .2s ease;
}
.card.hover:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  font-weight:700;
  border:0;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  max-width:100%;              /* ✅ evita overflow */
}
.btn:active{transform:translateY(1px);}
.btn.primary{background:var(--green); color:#fff;}
.btn.secondary{background:var(--orange); color:#fff;}
.btn.ghost{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28);}
.btn.full{width:100%;}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.icons{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
  justify-content:center; /* ✅ mobile friendly */
}
.icon-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-weight:600;
  font-size:14px;
  max-width:100%;
}
.icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:18px;
  background:rgba(255,255,255,.25);
}

/* HERO */
.hero{
  min-height:86vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(0deg, rgba(77,150,255,.74), rgba(77,150,255,.74)),
    url("../img/hero.jpg");
  background-size:cover;
  background-position:center;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero .container{padding-top:40px; padding-bottom:40px;}
.hero .sub{
  font-size:18px;
  line-height:1.6;
  max-width:720px;
  margin:10px auto 0;
}
.hero .cta{margin-top:18px; justify-content:center;}
.hero .note{margin-top:14px; font-size:14px; opacity:.95;}

/* Placeholders / images */
.img-ph{
  border-radius: var(--radius);
  background: linear-gradient(
    135deg,
    rgba(77,150,255,.12),
    rgba(107,203,119,.12)
  );
  padding: 14px;
  display: flex;
}

.img-ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
}

/* Ajuste fino SOLO para tutorías */
.section .img-ph img{
  object-position: center 20%;
}


/* Feature cards */
.feature{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.feature .bubble{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  flex:0 0 auto;
}
.b-yellow{background:rgba(255,217,61,.25)}
.b-blue{background:rgba(77,150,255,.18)}
.b-green{background:rgba(107,203,119,.22)}
.b-orange{background:rgba(255,140,66,.22)}
.feature p{margin:0; color:#6b7280}

/* Summer section */
.summer{background:linear-gradient(180deg, rgba(255,217,61,.22), rgba(255,217,61,.08));}
.summer .meta{display:grid; gap:8px; margin:12px 0 16px;}
.meta .line{display:flex; gap:10px; align-items:center; font-weight:600;}
.dot{width:10px; height:10px; border-radius:50%;}
.dot.blue{background:var(--blue)}
.dot.green{background:var(--green)}
.dot.orange{background:var(--orange)}
.dot.yellow{background:var(--yellow)}

/* Age cards */
.age-card .top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.age-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  background:rgba(0,0,0,.05);
}

/* Safety */
.safety{background:linear-gradient(180deg, rgba(77,150,255,.14), rgba(77,150,255,.06));}
.checklist{display:grid; gap:10px; margin-top:14px;}
.check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.05);
}
.check .tick{
  width:26px;
  height:26px;
  border-radius:9px;
  background:rgba(107,203,119,.25);
  display:grid;
  place-items:center;
  font-weight:900
}

/*Location*/
.hero-location{
  margin-top:12px;
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  opacity:.9;
}

.location .card iframe{
  border-radius:18px;
}

.location .feature p{
  margin:6px 0 0;
}

/* FAQ */
.faq{background:#fff;}
.accordion{display:grid; gap:12px; max-width:860px; margin:0 auto;}
.acc-item{border-radius:16px; border:1px solid rgba(0,0,0,.08); overflow:hidden; background:#fff;}
.acc-btn{
  width:100%;
  text-align:left;
  padding:16px 16px;
  border:0;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:700;
}
.acc-btn span{color:var(--blue)}
.acc-panel{
  display:none;
  padding:0 16px 16px;
  color:#6b7280;
  line-height:1.55;
}
.acc-item.open .acc-panel{display:block;}
.acc-item.open .chev{transform:rotate(45deg);}

/* Final CTA */
.cta-final{
  background:linear-gradient(180deg, rgba(107,203,119,.95), rgba(107,203,119,.88));
  color:#fff;
}
.cta-final .card{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20); box-shadow:none;}
.cta-final .h2{color:#fff}

/* Footer */
footer{padding:26px 0; background:#0f172a; color:#cbd5e1;}
footer .row{justify-content:space-between}
footer a{color:#cbd5e1; text-decoration:underline; text-decoration-color:rgba(203,213,225,.35);}

/* WhatsApp floating */
.wa-float{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--green);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  z-index:999;
  transition:transform .12s ease;
}
.wa-float:hover{transform:translateY(-2px)}
.pulse{
  position:absolute;
  inset:0;
  border-radius:16px;
  animation:pulse 1.6s infinite;
  border:2px solid rgba(255,255,255,.35);
  pointer-events:none;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.9}
  70%{transform:scale(1.25); opacity:0}
  100%{opacity:0}
}

/* ======================
   Responsive: Tablet
   ====================== */
@media (max-width: 920px){
  .two, .two.reversed{grid-template-columns:1fr;}
  .three{grid-template-columns: repeat(2, minmax(0, 1fr));} /* ✅ 3 cards -> 2 */
  .h1{font-size:40px}
  .h2{font-size:30px}
  .section{padding:58px 0;}
  .img-ph{min-height:340px}
}

/* ======================
   Responsive: Mobile
   ====================== */
@media (max-width: 520px){
  .h1{font-size:34px}
  .h2{font-size:28px}
  .lead{font-size:16px}
  .section .img-ph{
    min-height: 260px;
  }

 /* ✅ Tutorías: simetría SOLO en desktop */
@media (min-width: 921px){

  /* Estira ambas columnas a la misma altura */
  #tutorias .two.reversed{
    align-items: stretch;
  }

  /* La caja de imagen ocupa la altura completa de la fila */
  #tutorias .img-ph{
    height: 100%;
    min-height: 520px; /* ajusta 500–560 si quieres más/menos alto */
    display: flex;
  }

  /* La imagen llena el contenedor */
  #tutorias .img-ph img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: calc(var(--radius) - 6px);
  }

  /* Columna de texto se comporta como "columna" y empuja botones abajo */
  #tutorias .tutorias-col{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #tutorias .tutorias-actions{
    margin-top: auto; /* 🔥 esto es lo que te da la simetría visual */
  }
}



  /* Botones apilados */
  .btn{width:100%; white-space:normal;} /* ✅ permite salto de línea en texto */
  .hero{min-height:88vh}

  /* Chips en columna (sin desbordar) */
  .icon-item{width:100%; justify-content:flex-start;}

  /* Grid helpers */
  .grid-2{grid-template-columns:1fr;}    /* ✅ 2 -> 1 */

  /* Cards por edad: 2 -> 1 */
  .three{grid-template-columns:1fr;}

  /* Footer */
  footer .row{flex-direction:column; align-items:flex-start}
}