/* ========= Base ========= */
body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  line-height: 1.6;
  scroll-behavior: smooth;
}

/* ========= Encabezado ========= */
.mi-header {
  background-color: #04457d;
  color: #fff;
  /* aire para que el logo flotado no pise los textos */
  padding-top: 2.25rem;
  padding-bottom: 2rem;
}
.mi-header h1 { margin-bottom: .25rem; }
.mi-header { position: relative; }

/* Logo flotado dentro del header (arriba a la izquierda) */
.logo-encabezado-float {
  position: absolute;
  top: 14px;
  left: 16px;
  height: 25px;         /* ajustá 50–64 según lo veas */
  width: auto;
}
@media (max-width: 768px) {
  .logo-encabezado-float { height: 52px; top: 10px; left: 12px; }
  .mi-header { padding-top: 3.5rem; } /* extra aire en móvil */
}

/* ========= Navbar ========= */
.navbar { font-weight: 500; }
.navbar-brand { font-weight: 600; color: #04457d; }
.nav-link { color: #04457d !important; }
.nav-link:hover, .nav-link:focus { color: #25a2c3 !important; }
.nav-link.active { color: #25a2c3 !important; font-weight: 600; }

/* ========= Typewriter ========= */
#typewriter {
  font-size: 2rem;
  color: #04457d;
  font-weight: 600;
}

/* ========= Slider (si lo usás) ========= */
.carousel-item img { object-fit: cover; height: 500px; }
@media (max-width: 768px) { .carousel-item img { height: 250px; } }

/* ========= Servicios ========= */
.image-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  height: 250px;
}
.image-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.image-overlay:hover img { transform: scale(1.05); }
.overlay-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(4, 69, 125, 0.7);
  color: #fff;
  padding: .5rem;
  font-weight: 500;
}

/* ========= Sección ¿Qué es el Reformer? (estilos suaves) ========= */
#que-es-reformer h2 { color: #04457d; letter-spacing: .2px; }
#que-es-reformer h5 { color: #04457d; font-weight: 600; }
#que-es-reformer ul { margin: 0; padding-left: 1rem; }
#que-es-reformer ul li { margin-bottom: .45rem; }
.rounded-4 { border-radius: 1rem !important; }

/* ========= Profesores ========= */
.profesor-box {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
  border: 3px solid #04457d;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.profesor-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-title { font-weight: 600; }

/* ========= Precios ========= */
#precios .card h2 { font-size: 2rem; }
#precios .card {
  transition: transform .2s ease, box-shadow .2s ease;
}
#precios .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
#precios .badge {
  font-size: .8rem;
  padding: .5em .8em;
  letter-spacing: .5px;
}

/* ========= Testimonios ========= */
#testimonios .border { border-color: #e0e0e0 !important; }
#testimonios .fst-italic { font-size: 1.1rem; }

/* ========= Formulario ========= */
form .form-control {
  border-radius: 8px;
  border: 1px solid #ccc;
}
form .btn-primary {
  background-color: #04457d;
  border: none;
}
form .btn-primary:hover { background-color: #03335d; }

/* ========= Mapa ========= */
#mapa iframe {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ========= Botón de WhatsApp flotante (si lo usás) ========= */
.float-wpp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  background-color: #25D366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 999;
}
.float-wpp i { margin-top: 16px; }

/* ========= Footer alternativo (si en HTML usás .mi-footer) ========= */
/*
footer.mi-footer { background-color: #04457d; color: #fff; }
footer.mi-footer p { margin: 0; font-size: .9rem; }
*/