/* ============================================================
   Pequeños Angelitos - Paleta Pastel
   Autor: Andres Alfonso
   Descripción:
   Hoja de estilos principal para el sitio web de Pequeños Angelitos.
   Contiene estilos con una paleta de colores suaves, estética infantil
   y elementos modernos basados en Bootstrap 5.
   ============================================================ */


/* ===================== SECCIÓN GENERAL ===================== */

/* --- Configuración global del cuerpo de la página --- */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif; /* Fuente moderna y legible */
  background-color: #EAF7FC;           /* Fondo azul pastel muy claro */
  color: #333;                         /* Color de texto principal */
}

/* ===================== NAVBAR ===================== */

/* --- Barra de navegación principal --- */
.navbar {
  background-color: #6EC1E4 !important; /* Azul celeste del logo */
}

/* --- Marca / nombre de la clínica en el navbar --- */
.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.5px; /* Espaciado ligero entre letras */
}

/* --- Enlaces del menú --- */
.nav-link {
  color: #fff !important;             /* Texto blanco sobre el fondo azul */
  transition: color 0.3s ease;        /* Transición suave al pasar el mouse */
}

/* --- Estado activo o hover de los enlaces --- */
.nav-link:hover,
.nav-link.active {
  color: #F7A8B8 !important;          /* Rosa pastel para resaltar */
}

/* ===================== SECCIÓN HERO ===================== */

/* --- Sección principal de bienvenida --- */
.hero {
  background: linear-gradient(to bottom right, #EAF7FC, #FFFFFF); /* Degradado suave celeste-blanco */
  min-height: 60vh;                    /* Altura mínima de 60% del viewport */
  display: flex;                       /* Centrado vertical y horizontal */
  align-items: center;
  justify-content: center;
  text-align: center;                  /* Centrado del texto */
}

/* --- Título principal del hero --- */
.hero h1 {
  color: #6EC1E4;                      /* Azul celeste principal */
}

/* --- Subtítulo o texto complementario --- */
.hero p {
  color: #555;                         /* Gris oscuro, buena legibilidad */
}

/* ===================== BOTÓN DE WHATSAPP EN HERO ===================== */

/* --- Estilo del botón "Agendar cita" (versión WhatsApp) --- */
.btn-success {
  background-color: #25d366 !important; /* Verde oficial de WhatsApp */
  border: none;
  transition: transform 0.3s ease;      /* Efecto de aumento al pasar el mouse */
}

/* --- Animación al pasar el mouse sobre el botón --- */
.btn-success:hover {
  transform: scale(1.05);              /* Pequeño zoom */
}

/* ===================== CONTENIDO PRINCIPAL ===================== */

/* --- Contenedores de secciones (acerca de, contacto, etc.) --- */
section {
  background: #FFFFFF;                 /* Fondo blanco para contraste */
  border-radius: 15px;                 /* Bordes redondeados suaves */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  padding: 2rem;                       /* Espaciado interno uniforme */
}

/* ===================== FOOTER ===================== */

/* --- Pie de página --- */
footer {
  background-color: #6EC1E4;           /* Azul celeste consistente con la marca */
  color: white;                        /* Texto blanco */
  text-align: center;                  /* Centrado horizontal del texto */
  padding: 1rem;                       /* Espaciado vertical */
  font-size: 0.9rem;                   /* Tamaño de fuente más pequeño */
  letter-spacing: 0.5px;               /* Espaciado ligero para claridad */
}

/* enlaces del footer igual a los del navbar */
footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
  animation: color-cycle 8s infinite alternate;
}
footer a:hover,
footer a:active {
  /* start a faster cycle on hover */
  animation: color-cycle 1.5s infinite alternate;
  text-decoration: none;
  transform: scale(1.08);
}

/* Estilos para los iconos sociales dentro del footer */
.footer-social a {
  color: #ffffff;                      /* iconos blancos */
  font-size: 1.25rem;                  /* tamaño del icono */
  transition: color 0.2s ease, transform 0.15s ease;
}

.footer-social a:hover {
  color: #F7A8B8;                      /* rosa pastel en hover */
  transform: translateY(-3px);
}
.footer-center a:hover {
  color: #F7A8B8;                      /* rosa pastel en hover */
  transform: translateY(-3px);
}

/* Asegura que el footer se muestre bien en pantallas pequeñas */
@media (max-width: 576px) {
  footer {
    text-align: center;
  }
  .footer-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
  }
}

/* ===================== BOTÓN FLOTANTE DE WHATSAPP ===================== */

/* --- Contenedor circular flotante --- */
.btn-whatsapp-float {
  position: fixed;                     /* Fijo en pantalla */
  width: 60px;
  height: 60px;
  bottom: 25px;                        /* Separación inferior */
  right: 25px;                         /* Separación derecha */
  background-color: #25d366;           /* Verde de WhatsApp */
  border-radius: 50%;                  /* Forma circular */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra elegante */
  display: flex;                       /* Centrar icono */
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: pulse 2s infinite;        /* Animación de pulso */
  z-index: 1000;                       /* Encima de otros elementos */
}

/* --- Imagen del ícono de WhatsApp dentro del botón --- */
.btn-whatsapp-float img {
  width: 32px;
  height: 32px;
}

/* --- Efecto al pasar el mouse sobre el botón --- */
.btn-whatsapp-float:hover {
  transform: scale(1.1);               /* Zoom sutil */
  box-shadow: 0 0 15px rgba(37, 211, 102, 0.8); /* Resplandor verde */
}

/* --- Animación "pulse" para el botón flotante --- */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ===================== TARJETAS DE "MÁS INFORMACIÓN" ===================== */

/* --- Contenedor de las tarjetas informativas --- */
.card {
  border: none;                        /* Sin borde por defecto */
  background: #FFFFFF;                 /* Fondo blanco */
  border-top: 5px solid #F7A8B8;       /* Franja superior rosa pastel */
  border-radius: 15px;                 /* Bordes suaves */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación al hover */
}
/* --- Tarjetas de servicios: imagen de fondo común --- */
.service-card {
  background: url("../img/fondocards.jpeg") center/cover no-repeat;
  background-color: transparent; /* no añadir color de fondo extra */
  color: #fff; /* asegurar texto legible */
}
.service-card .card-body {
  background: transparent; /* quitar opacidad para ver la imagen limpia */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6); /* mejora legibilidad sobre el fondo */
}
/* --- Efecto de elevación al pasar el mouse --- */
.card:hover {
  transform: translateY(-5px);         /* Eleva ligeramente la tarjeta */
  box-shadow: 0 6px 15px rgba(110, 193, 228, 0.3); /* Sombra azulada */
}

/* --- Título de las tarjetas --- */
.card-title {
  color: #6EC1E4;                      /* Azul del logo */
  font-weight: 600;
}

/* ===================== FORMULARIOS DE CONTACTO ===================== */

/* --- Etiquetas de campos de formulario --- */
form label {
  font-weight: 500;
  color: #6EC1E4;                      /* Azul celeste */
}

/* --- Efecto de foco en campos de texto ---
.form-control:focus {
  border-color: #F7A8B8;               
  box-shadow: 0 0 5px rgba(247, 168, 184, 0.5); 
} */

/* ===================== RESPONSIVE DESIGN ===================== */

/* --- Adaptaciones para pantallas pequeñas (móviles) --- */
@media (max-width: 576px) {

  /* Botón de WhatsApp más pequeño en móvil */
  .btn-whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }

  .btn-whatsapp-float img {
    width: 28px;
    height: 28px;
  }

  /* Reducir padding de secciones en pantallas pequeñas */
  section {
    padding: 1.5rem;
  }
}