/* Reset y estilos generales */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f4f4f4;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Header */
header {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #222;
  transform: scaleX(1.5); /* Escala horizontalmente */
  /* transform: scale(1.2);  Escala uniformemente */
  transform-origin: left; /* Opcional:  Asegura que la escala comienza desde la izquierda */
}

.logo img {
  height: 90px;
  margin-right: 10px;
}

nav ul.menu {
  display: flex;
}

nav ul.menu li {
  margin: 0 15px;
}

nav ul.menu li a {
  color: #000000;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

nav ul.menu li a:hover {
  color: #014e9e;
}

.hamburger {
  display: none;
  cursor: pointer;
  font-size: 1.5em;
  color: #555;
}

/* Hero Section */

.hero {
  background: url("../img/fondo_de_inicio.jpg") center/cover no-repeat; /* Ruta correcta */
  color: #fff;
  text-align: center;
  padding: 100px 0;
  position: relative; /* Importante para el posicionamiento relativo */
}

.hero-content {
  background-color: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad y el color */
  padding: 20px;
  border-radius: 10px;
  display: inline-block; /* Ocupa solo el ancho del contenido */
  width: auto; /* Ancho automático */
  max-width: 80%; /* Ancho máximo (ajusta según tu diseño) */
  margin: 0 auto; /* Centrar horizontalmente */
  position: relative;
  color: white;
  text-align: center; /* Centra el texto dentro del contenedor */
}

/* Si tienes la capa semitransparente (::before), asegúrate de que también se ajuste */
.hero-content::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: inherit; /* Hereda el color de fondo del .hero-content */
  border-radius: inherit; /* Hereda los bordes redondeados */
  z-index: -1;
}

.hero h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  display: inline-block; /* Ocupa solo el ancho del contenido */
  width: auto; /* Ancho automático */
  max-width: 100%; /* Evita desbordamiento */
}

.hero p {
  font-size: 1.2em;
  margin-bottom: 30px;
  position: relative; /* Para el z-index si lo necesitas */
  z-index: 1;
}

/* --- NUEVO ESTILO: Para la clase .slogan-secundario --- */
.hero-content .slogan-secundario {
  font-size: 1.4em; /* Un poco más grande para resaltar */
  color: #f8d34d; /* Color amarillo/dorado que contrasta y atrae la vista */
  margin-top: 10px;
  margin-bottom: 25px; /* Más espacio para separarlo del botón */
  font-weight: 600; /* Más grosor para que sea más legible y prominente */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ligera sombra para mayor legibilidad sobre el fondo */
}
/* --- FIN NUEVO ESTILO --- */

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  position: relative; /* Para el z-index si lo necesitas */
  z-index: 1;
}

/* Productos Section */
.productos {
  padding: 80px 0;
  text-align: center;
}

.productos h2,
.nosotros h2,
.contacto h2 {
  font-size: 2em;
  margin-bottom: 30px;
  color: #222;
}

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.producto {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex; /* Habilita Flexbox para el contenedor del producto */
  flex-direction: column; /* Organiza los elementos internos en columna */
}

.producto:hover {
  transform: translateY(-5px);
}

.producto img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.producto h3 {
  margin: 15px 0;
  padding: 0 15px;
  font-size: 1.2em;
}

.producto p {
  padding: 0 15px;
  margin-bottom: 15px;
  color: #777;
}

.producto .btn-secondary {
  display: block; /* Asegura que el botón ocupe todo el ancho */
  width: 100%;
  text-align: center;
  padding: 10px 0;
  border-radius: 0 0 10px 10px;
  margin-top: auto; /* Empuja el botón hacia la parte inferior */
}

/* Nosotros Section */
.nosotros {
  background: url("../img/FONDO NOSOTROS.jpg") center/cover no-repeat; /* Fondo para Nosotros */
  padding: 80px 0;
  text-align: center;
  color: #fff; /* Asegúrate de que el texto sea legible */
  position: relative; /* Necesario para la capa */
  font-size: 1.3em; /* Agrega esta línea para agrandar la letra */
}

/* Estilos para el contenedor principal de Misión y Visión */
.mision-vision-container {
  display: grid;
  grid-template-columns: 1fr; /* Una columna por defecto */
  gap: 20px; /* Espacio entre las secciones */
  margin-top: 40px; /* Espacio desde el párrafo "Nosotros" */
  background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente */
  padding: 20px;
  border-radius: 10px;
  width: 80%; /* O un valor en píxeles, o max-width */
  max-width: 800px; /* Ancho máximo opcional */
  margin: 20px auto; /* Centrar horizontalmente y dar espacio */
  text-align: left;
  position: relative; /* Para el z-index si lo necesitas */
}

/* Estilos para cada sección (Misión y Visión) */
.mision-container,
.vision-container {
  /* Quitamos el fondo individual, ya está en el contenedor principal */
  background-color: transparent;
  color: inherit; /* Hereda el color del contenedor principal */
  padding: 20px; /* Añadimos padding individual */
  border-radius: 10px; /* Añadimos bordes redondeados individual */
  text-align: left;
  transition: transform 0.3s ease, opacity 0.3s ease; /* Añadimos la transición */
  opacity: 0.9; /* Hacemos un poco transparente al inicio */
  transform: translateY(10px); /* Los movemos un poco hacia abajo al inicio */
}

/* Estilos para los títulos (Misión y Visión) */
.mision-container h3,
.vision-container h3 {
  font-size: 1.2em; /* Aumentamos el tamaño del título */
  margin-bottom: 10px;
  border-bottom: 2px solid #fff; /* Línea debajo del título */
  padding-bottom: 5px;
  font-weight: bold; /* Hacemos el título más grueso */
}

.mision-container p,
.vision-container p {
  font-size: 0.8em; /* Aumentamos el tamaño del párrafo */
  line-height: 1.6; /* Aumentamos el espaciado entre líneas */
}

/* Animación */
.mision-container.visible,
.vision-container.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Responsive Design (para pantallas más grandes, dos columnas) */
@media (min-width: 768px) {
  .mision-vision-container {
    grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas más anchas */
  }
}
/* Contacto Section */
.contacto {
  padding: 80px 0;
}

.contacto .container {
  max-width: 960px; /* Ajusta el ancho máximo del contenedor si es necesario */
}

.contacto-wrapper {
  display: flex; /* Usamos flexbox para alinear el formulario y la imagen */
  align-items: center; /* Centra verticalmente el formulario y la imagen */
  justify-content: center; /* Centra horizontalmente el contenido dentro del wrapper */
  gap: 40px; /* Espacio entre el formulario y la imagen */
}

.formulario-contacto {
  flex: 1; /* El formulario ocupará la mitad del espacio disponible */
  max-width: 400px; /* Ancho máximo del formulario */
  margin: 0 auto; /* Centra el formulario si ocupa menos del ancho máximo */
}

.formulario-contacto form {
  margin: 0; /* Elimina el margen que podría tener el formulario directamente */
}

.imagen-contacto {
  flex: 1; /* La imagen ocupará la mitad del espacio disponible */
  max-width: 600px; /* Ancho máximo de la imagen */
}

.imagen-contacto img {
  display: block; /* Evita espaciado extra debajo de la imagen */
  width: 140%; /* La imagen se ajusta al ancho de su contenedor */
  height: auto; /* Mantiene la proporción de la imagen */
  border-radius: 10px; /* Opcional: bordes redondeados para la imagen */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: sombra para la imagen */
}

/* Ajustes para pantallas más pequeñas (opcional) */
@media (max-width: 768px) {
  .contacto-wrapper {
    flex-direction: column; /* Apila el formulario y la imagen en pantallas pequeñas */
    align-items: center; /* Centra los elementos */
    text-align: center; /* Centra el texto dentro del formulario */
  }

  .formulario-contacto {
    max-width: 100%; /* El formulario ocupa todo el ancho en pantallas pequeñas */
    margin-bottom: 30px; /* Añade espacio debajo del formulario */
  }

  .imagen-contacto {
    max-width: 80%; /* Reduce el ancho de la imagen en pantallas pequeñas */
  }
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: inherit;
}

.form-group textarea {
  resize: vertical;
}

/* Footer */
footer {
  background-color: #222;
  color: #fff;
  padding: 40px 20px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  text-align: center;
}

.footer-container h4 {
  margin-bottom: 10px;
  color: #f8d34d;
  font-weight: 600;
}

.footer-menu ul {
  list-style: none;
  padding: 0;
}

.footer-menu li {
  margin: 5px 0;
}

.footer-menu a,
.footer-social a,
.footer-legal a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 5px;
}

.footer-menu a:hover,
.footer-social a:hover,
.footer-legal a:hover {
  color: #f8d34d;
  text-decoration: underline;
}

.footer-copy {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid #444;
  padding-top: 15px;
  font-size: 13px;
  color: #aaa;
}

/* Responsive Design */
@media (max-width: 768px) {
  nav ul.menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  }

  nav ul.menu.active {
    display: flex;
  }

  nav ul.menu li {
    margin: 10px 0;
  }

  .hamburger {
    display: block;
  }

  .hero h1 {
    font-size: 2em;
  }

  .productos-grid {
    grid-template-columns: 1fr;
  }
}

/* Estilos para el Modal de Imagen */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Se mantiene en su lugar incluso al hacer scroll */
  z-index: 1; /* Se muestra por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Alto completo */
  overflow: auto; /* Habilita el scroll si la imagen es muy grande */
  background-color: rgba(0, 0, 0, 0.9); /* Fondo negro con opacidad */
}

.modal-content {
  display: block;
  margin: 10% auto; /* Ajusta el margen superior para centrar verticalmente */
  width: 80%;
  max-width: 700px;
  max-height: 80%;
  object-fit: contain; /* Asegura que la imagen completa sea visible */
}

#caption-modal {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px; /* Ajusta según sea necesario */
}

.modal-content,
#caption-modal {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.cerrar-modal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

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

/* Ajustes para pantallas más pequeñas */
@media (max-width: 500px) {
  .modal-content {
    width: 95%;
    max-height: 90%;
  }
  #caption-modal {
    width: 95%;
  }
}
.pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.centrado {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.derecha {
  margin-left: auto;
  padding-right: 20px;
}

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

.social-btn {
  width: 30px;
  height: 30px;
  border: none;
  color: white;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
}

.social-btn:hover {
  transform: scale(1.1);
}
.facebook {
  background-color: #3b5998;
}
.instagram {
  background: radial-gradient(
    circle at 30% 30%,
    #fdf497 0%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.whatsapp {
  background-color: #25d366;
}

.beneficios {
  background-color: #fdf8f4; /* beige suave */
  padding: 60px 20px;
  text-align: center;
}

.beneficios h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #333;
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.beneficio {
  background-color: #ffffff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.beneficio:hover {
  transform: translateY(-5px);
}

.beneficio i {
  font-size: 2.5rem;
  color: #ba895d;
  margin-bottom: 15px;
}

.beneficio h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #222;
}

.beneficio p {
  font-size: 1rem;
  color: #555;
}

.proceso {
  background-color: #fdf8f4; /* beige suave */
  padding: 60px 20px;
  text-align: center;
}

.proceso h2 {
  font-size: 2.2rem;
  margin-bottom: 50px;
  color: #333;
}

.proceso-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.paso {
  background-color: #f9f9f9;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.paso:hover {
  transform: translateY(-5px);
}

.numero-paso {
  display: inline-block;
  background-color: #ba895d;
  color: white;
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.paso h3 {
  font-size: 1.3rem;
  color: #222;
  margin-bottom: 10px;
}

.paso p {
  font-size: 1rem;
  color: #555;
}
nav .social-buttons {
  display: flex;
  gap: 15px;
  margin-left: 20px;
  align-items: center;
}
.mensaje-exito {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 5px;
  margin-top: 15px;
  text-align: center;
}

.mensaje-error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 5px;
  margin-top: 15px;
  text-align: center;
}