body {
  font-family: 'Oswald', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  margin-top: 0px;
}

/* Sección de Bienvenida */
#bienvenida-servicios {
  position: relative;
  background-image: url('../img/servicios2.webp'); /* Asegúrate de cambiar la ruta por la de tu imagen */
  background-attachment: fixed; /* Efecto Parallax */
  background-size: cover;
  background-position: center;
  height: 95vh; /* Ajusta la altura de la sección según lo que necesites */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Color del texto */
  text-align: left; /* Por defecto, alineamos el texto a la izquierda */
  padding: 0 20px; /* Añadimos algo de padding para que no quede pegado a los bordes */
}

.bienvenida-p{
  color: white;  
}

#bienvenida-servicios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Sombra oscura sobre la imagen */
  z-index: 1; /* Asegura que la capa oscura esté debajo del texto */
}

#bienvenida-servicios h2 {
  font-size: 42px; /* Tamaño grande del título */
  font-weight: bold;
  margin: 0;
  z-index: 2; /* Asegura que el texto esté por encima de la imagen */
}

#bienvenida-servicios p {
  font-size: 18px;
  width: 60%; /* Ajusta el ancho del párrafo según lo necesites */
  line-height: 1.6;
  z-index: 2; /* Asegura que el texto esté por encima de la imagen */
}

/* Sección de Servicios */
#servicios {
  background-color: #f4f4f4;
  padding: 50px 20px;
  text-align: center;
}

.titulo-servicios {
  font-size: 42px; /* Tamaño grande */
  font-weight: bold;
  color: #333;
  margin: 10px;
  text-align: left;
  padding-left: 10%; /* Ajusta el espacio desde la izquierda */
}

.descripcion {
  font-size: 18px;
  width: 60%;
  margin: 50px auto 40px;
  line-height: 1.6;
  color: #555;
}

/* Grid de las tarjetas */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
  gap: 30px;
  justify-items: center;
}

/* Estilo de cada tarjeta */
.servicio-card {
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* Cambiar cursor a mano */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Capa de superposición oscura */
.servicio-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Oscurece la imagen */
  z-index: 1;
}

/* Título y descripción sobre la imagen */
.servicio-card h3,
.servicio-card p {
  position: relative;
  z-index: 2; /* Asegura que el texto esté sobre la capa de la imagen */
}

.servicio-card:hover {
  transform: translateY(-10px); /* Desplazamiento hacia arriba */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra más intensa al hacer hover */
}

.servicio-card:hover .overlay {
  background: rgba(0, 0, 0, 0.2); /* Hace la capa más clara al pasar el cursor */
}

/* Estilos del texto en las tarjetas */
.servicio-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: bold;
}

.servicio-card p {
  font-size: 16px;
  color: #ccc; /* Texto en un tono claro para contrastar con el fondo oscuro */
}

/* Botón de Contacto */
.boton-contacto {
  margin-top: 40px;
}

.btn-contacto {
  background-color: #5e4b8b;
  color: white;
  padding: 12px 30px;
  border-radius: 5px;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.btn-contacto:hover {
  background-color: #4a3a71;
}

/* Sección de Cierre o Despedida */
#despedida-servicios {
  position: relative;
  background-image: url('../img/servicios2.webp'); /* Usa la misma imagen de parallax */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  text-align: center;
  color: white;
}

#despedida-servicios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Sombra oscura sobre la imagen */
  z-index: 1;
}

#despedida-servicios .container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

#despedida-servicios h2 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

#despedida-servicios p {
  font-size: 18px;
  line-height: 1.6;
}

/* Estilos para la animación de fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

/* Cuando la sección es visible en la pantalla */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para la ventana modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Máxima prioridad */
}

.modal-content {
  background: white;
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 600px;
  border-radius: 10px;
  position: relative;
}

.modal-body {
  display: flex;
  align-items: center;
}

.modal-body img {
  width: 200px;
  height: auto;
  border-radius: 10px;
  margin-right: 20px;
}

.modal-text {
  text-align: left;
}

.close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 25px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {  
  #bienvenida-servicios {
    text-align: center; /* Centra el texto en pantallas pequeñas */
    padding: 0 20px; /* Añadimos padding para el contenedor */
  }

  #bienvenida-servicios p {
    text-align: justify; /* Justifica el texto en pantallas pequeñas */
    margin-left: auto; /* Desplaza hacia la derecha */
    margin-right: auto; /* Añadido para asegurar que se mantenga centrado */
    width: 90%; /* Ajusta el ancho del párrafo para que se acomode bien */
  }

  .servicios-grid {
      grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
  }

  .titulo-servicios {   
    margin: 0px;    
  }

  .descripcion {
    width: 80%;
    margin: 0px auto 20px;
  }

  .modal-body img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    margin-right: 20px;
  }
  
}