/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }

/* Container */
.container { max-width: 1200px; margin: auto; padding: 1rem; }

/* Header principal que contendrá la navbar y el banner */
header.hero-header {
  position: relative; /* Necesario para que la imagen se posicione correctamente si se desea un overlay */
  width: 100%;
  display: flex; /* Para que la navbar y la imagen se apilen verticalmente */
  flex-direction: column;
  align-items: center; /* Centra horizontalmente si hay espacio */
}

/* Navbar: la barra azul superior */
.navbar {
  width: 100%;
  background-color: #0074d9; /* Color azul fuerte para la barra */
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10; /* Asegura que esté por encima de la imagen */
  display: flex;
  justify-content: center; /* Centra el nav-content */
  align-items: center;
}

/* Contenido de la Navbar (título, menú, WhatsApp) */
.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%; /* Ajusta el ancho para el contenido interno */
  max-width: 1200px;
  margin: 0 auto; /* Centra el contenido si la ventana es más ancha que max-width */
}

/* Título de la óptica dentro de la Navbar */
.navbar h1 { /* Estilo específico para el h1 dentro de la navbar */
  font-size: 1.8rem; /* Tamaño para desktop */
  font-weight: bold;
  color: white; /* Color del texto para la barra azul */
  white-space: nowrap; /* Evita que el texto se rompa */
  margin: 0; /* Elimina márgenes por defecto */
}

/* Imagen del Banner (debajo de la navbar) */
.banner-img {
  width: 100%;
  height: 400px; /* Altura fija para desktop */
  object-fit: cover; /* Recorta la imagen para cubrir el espacio */
  display: block; /* Elimina cualquier espacio extra */
  z-index: 1; /* Asegura que esté por debajo de la navbar si hubiese un overlay */
}

/* Menú */
.menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.menu li a {
  color: white; /* Color del texto del menú en la navbar */
  text-decoration: none;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para mejor contraste */
}

/* Botón WhatsApp */
.btn.whatsapp {
  background-color: #25d366;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.btn:hover { background: #2ecc40; }
.btn.whatsapp:hover { background: #1da34e; }

/* --- MEDIA QUERIES PARA RESPONSIVIDAD --- */

/* Para pantallas más pequeñas (tablets y móviles) */
@media (max-width: 768px) {
  /* Ajustar altura del banner para que sea más compacta */
  .banner-img {
    height: 250px; /* Menor altura para dispositivos móviles */
  }

  /* Ajustes para la barra de navegación en móviles */
  .nav-content {
    flex-direction: column; /* Apilar elementos de la navbar verticalmente */
    align-items: center; /* Centrar los elementos apilados */
    text-align: center;
    width: 100%;
    padding: 0.5rem 0; /* Ajustar padding vertical */
  }

  .navbar h1 {
    font-size: 1.5rem; /* Reducir tamaño de fuente del título en móvil */
    margin-bottom: 0.5rem; /* Espacio debajo del título */
  }

  .menu {
    flex-direction: column; /* Apilar elementos del menú */
    gap: 0.8rem; /* Menor espacio entre ítems del menú */
    margin-top: 0.5rem; /* Espacio entre el título y el menú */
    width: 100%; /* Ocupar todo el ancho */
  }

  .menu li a {
    font-size: 0.9rem; /* Reducir tamaño de fuente del menú */
  }

  .btn.whatsapp {
    margin-top: 1rem; /* Espacio encima del botón WhatsApp */
    width: 80%; /* Hacer el botón más ancho */
  }
}

/* Para pantallas aún más pequeñas (móviles muy pequeños) */
@media (max-width: 480px) {
  .banner-img {
    height: 180px; /* Altura aún más pequeña para pantallas muy pequeñas */
  }

  .navbar h1 {
    font-size: 1.3rem; /* Tamaño de fuente aún más pequeño para el título */
  }

  .navbar {
    padding: 0.8rem 0.5rem; /* Padding aún más reducido */
  }
}

/* --- El resto de tus estilos existentes (asegúrate de que no haya duplicados o conflictos) --- */
/* Limpia las reglas comentadas y duplicadas al final de tu styles.css para evitar conflictos */
/* Por ejemplo, elimina todas las reglas duplicadas para .navbar, .banner-img, etc. */
/* Deja solo las reglas que te proporciono aquí y las que son para el resto del contenido. */


/* Secciones generales */
section { padding: 3rem 0; }
h2 { font-size: 1.8rem; margin-bottom: 1.5rem; text-align: center; }

/* Grid de productos */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.card { background: #f9f9f9; padding: 1.5rem; border-radius: 8px; text-align: center; }
.card img { max-width: 100%; border-radius: 8px 8px 0 0; margin-bottom: .5rem; }

/* Galería */
.gallery { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.gallery img { width: 100%; height: auto; border-radius: 4px; }

/* Footer */
footer {
  background: #0074d9;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
}

/* Sobre Nosotros */
.sobre-nosotros {
  padding: 3rem 1rem;
  background: #f0f8ff;
  text-align: center;
}
.sobre-nosotros h2 {
  color: #0074d9;
  margin-bottom: 1rem;
}
.sobre-nosotros p {
  max-width: 800px;
  margin: auto;
  line-height: 1.8;
  font-size: 1.1rem;
}

/* Contacto */
.contacto {
  padding: 3rem 1rem;
  background-color: #f4f9fc;
  text-align: center;
}
.cards-contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.card-contacto {
  background: white;
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  width: 100%;
}
.icono-contacto {
  width: 50px;
  margin-bottom: 1rem;
}
.card-contacto h3 {
  color: #007bff;
  margin-bottom: 0.5rem;
}
.card-contacto p {
  margin: 0.25rem 0;
}
.btn-contacto {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.btn-contacto.green {
  background-color: #25d366;
}

/* Servicios */
.servicios {
  text-align: center;
  padding: 60px 20px;
  background-color: #f9f9f9;
}
.servicio-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.servicio {
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  transition: transform 0.3s ease;
}
.servicio:hover {
  transform: translateY(-10px);
}
.servicio img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}
.servicio h3 {
  color: #023e8a;
  font-size: 20px;
  margin-bottom: 10px;
}
.servicio p {
  font-size: 16px;
  color: #444;
}

/* ======================================== */
/* ESTILOS DEL MODAL (VENTANA EMERGENTE)    */
/* ======================================== */

/* El fondo oscuro del modal (oculto por defecto) */
.modal {
  display: none; /* Inicia oculto, esto es CLAVE */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  
  /* Centra la imagen cuando está visible */
  justify-content: center;
  align-items: center;
}

/* Clase que se añade con JavaScript para mostrar el modal */
.modal.visible {
  display: flex; /* Se cambia a flex para mostrar y centrar */
}

/* La imagen dentro del modal */
.modal-content {
  display: block;
  max-width: 90%;
  max-height: 90vh;
  animation: zoom 0.4s ease-out; /* Efecto de zoom al aparecer */
}

/* Animación de Zoom */
@keyframes zoom {
  from {transform: scale(0.5); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

/* El botón para cerrar (la 'X') */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close:hover {
  color: #bbb;
}

/* El botón de cerrar (la 'x') */
.close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000; /* Asegura que esté por encima de todo */
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.close:hover {
  color: #ccc;
}

/* Social Media */
.social-media {
  padding: 3rem 1rem;
  background-color: #f9f9f9;
  text-align: center;
}
.social-media h3 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #0074d9;
}
.social-icons a {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: slideUp 0.8s ease forwards;
}
.social-icons img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.social-icons a:hover {
  transform: scale(1.2);
}

/* Galería (subsección) */
.galeria-subseccion {
  margin-bottom: 3rem;
}
.galeria-subseccion h3 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #0074d9;
}

/* Mapa */
.mapa-full {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #eef6fa;
  text-align: center;
}
.mapa-full h2 {
  margin: 0;
  padding: 2rem 1rem 1rem;
  font-size: 1.8rem;
  color: #0074d9;
}
.mapa-full iframe {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}

/* Animaciones */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* Clientes Satisfechos */
.clientes {
  padding: 2rem;
  background-color: #f9f9f9;
  text-align: center;
}
.titulo-seccion {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #007bff;
}
.galeria-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  justify-items: center;
}
.cliente {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 300px;
  transition: transform 0.3s ease;
}
.cliente img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}
.cliente:hover {
  transform: translateY(-5px);
}
.comentario {
  margin-top: 1rem;
  font-style: italic;
  color: #333;
}
.nombre {
  font-weight: bold;
  margin-top: 0.25rem;
  color: #007bff;
}
/* Unificación de imágenes para cards y galería */
.card img,
.gallery img {
  width: 100%;
  height: 250px; /* Establece una altura fija para todas las imágenes */
  object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse, recortando si es necesario */
  border-radius: 6px; /* Mantiene tus bordes redondeados */
}

/* También revisa la sección de servicios si usas un tamaño específico para las imágenes */
.servicio img {
  width: 60px; /* Mantener este tamaño si son iconos pequeños */
  height: 60px;
  object-fit: contain; /* Ajusta la imagen dentro de su contenedor sin recortar */
  margin-bottom: 15px;
}

/* Y las imágenes de clientes satisfechos */
.cliente img {
  width: 100%;
  height: 250px; /* Asegura una altura consistente también aquí */
  object-fit: cover;
  border-radius: 8px;
}

/* Asegúrate de que las imágenes del modal sigan centrándose correctamente */
.modal-content img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain; /* Importante para que la imagen completa se vea en el modal */
  display: block;
  margin: auto; /* Centra la imagen si el modal-content es flex */
  background: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

/* Si tienes la regla .galeria-img también ajusta su altura si aplica a tu galería principal */
.galeria-img {
  width: 100%;
  height: 250px; /* Altura fija para las imágenes de la galería */
  object-fit: cover;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.3s ease;
}