/* General Styles */
*,
*::before,
*::after {
  box-sizing: border-box; /* Incluye el padding y el border en el ancho total */
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding-top: 80px; /* Ajusta según la altura del header */
  background-color: #fff;
  color: #333;
  min-height: 100vh; /* Asegura que el contenido ocupe al menos toda la altura de la pantalla */
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Evita el desbordamiento horizontal */
}

/* Header */
header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.logo {
  height: 60px;
  color: #3339F1;
}

/* Menú por defecto: visible en pantallas grandes (PC, laptops) */
.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  margin-right: 30px;
}

.menu a {
  text-decoration: none;
  color: #3339F1;
  font-size: 1.1em;
}

/* Efecto hover */
.menu a {
  text-decoration: none;
  color: #3339F1;
  font-size: 1.1em;
  font-family: 'Poppins', sans-serif;
  padding: 5px 10px; /* Agregar padding para separar el texto */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}

/* Efecto hover */
.menu a:hover {
  color: #FFF; /* Color de texto al hacer hover */
  background-color: #3339F1; /* Fondo al pasar el ratón */
  border-radius: 5px; /* Bordes redondeados para los enlaces */
}


/* Ocultar el menú hamburguesa por defecto */
.hamburger {
  display: none;
}

/* ... estilos globales ... */
.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Media Query para pantallas pequeñas (smartphones y tablets) */
@media screen and (max-width: 768px) {
  /* Mostrar el icono hamburguesa en dispositivos con pantallas pequeñas */
  .hamburger {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 20px;
    background-color: transparent;
    position: relative;
  }
  
  /* Crear las tres capas del icono hamburguesa */
  .hamburger ._layer {
    width: 100%;
    height: 4px;
    background-color: #3339F1;
    position: absolute;
    left: 0;
  }
  .hamburger ._layer.-top { top: 0; }
  .hamburger ._layer.-mid { top: 8px; }
  .hamburger ._layer.-bottom { top: 16px; }
  
  /* Estilo del menú de navegación en pantallas pequeñas (oculto por defecto) */
  #menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    width: 100%;  /* Aseguramos que ocupe toda la pantalla */
    max-height: 0; /* Ocultar el menú inicialmente */
    overflow: hidden; /* Ocultamos el contenido que no se vea */
    transition: max-height 0.3s ease; /* Animación para el desplazamiento */
  }
  
  /* Mostrar el menú cuando tenga la clase active */
  #menu.active {
    display: block;
    max-height: 500px; /* Establecemos una altura máxima para el menú */
  }
  
  /* Forzar que el menú se muestre verticalmente */
  .menu {
    display: block;
  }
  
  /* Hacer que las opciones del menú se alineen verticalmente */
  .menuppal {
    display: block;
    text-align: center;
  }
  
  .menuppal ul {
    padding: 0;
    margin: 0;
  }
  
  .menuppal li {
    margin: 10px 0;
  }
  
  .menuppal a {
    color: #3339F1;
    font-size: 1.3em;
    display: block;
    text-align: center;
  }
}

/* Main */
.portada {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px; /* Agrega espacio superior */
  flex-grow: 1; /* Asegura que el contenido principal ocupe el espacio disponible */
  margin-bottom: 50px; /* Añade un margen inferior para separar del footer */
}

.contenedor {
  display: flex;
  width: 100%;
  max-width: 1200px; /* Reduce el ancho máximo del contenedor */
  height: 100%;
  padding: 0 20px; /* Reduce el espacio de los lados */
  gap: 10px; /* Añade espacio entre los elementos en la portada */
  overflow-x: hidden; /* Asegura que no haya desbordamiento horizontal */
}

.contenido {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea a la izquierda por defecto en pantallas grandes */
  justify-content: center; /* Centra el contenido verticalmente */
  padding: 20px;
  text-align: left; /* Alinea el texto a la izquierda en pantallas grandes */
}

.imagen {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Ajuste en los márgenes y el espacio entre el contenido y la imagen */
@media (min-width: 800px) {  /* Solo se aplica a pantallas grandes */
  .contenedor {
    gap: 40px; /* Separa más el contenido de la imagen */
  }
}

/* Ajuste del tamaño de la imagen en pantallas grandes (PC) */
@media (min-width: 1024px) { /* Esto se aplica a pantallas de 1024px de ancho o más */
  .imagen img {
    width: 95%; /* Ajusta el tamaño al 70% del contenedor en pantallas grandes */
    height: auto; /* Mantiene la proporción de la imagen */
  }
}

/* Responsive para tabletas */
@media (max-width: 1024px) {
  .contenedor {
    flex-direction: row;  /* Mantiene los elementos en fila (no se apilan) */
    justify-content: space-between; /* Separa el contenido y la imagen */
    gap: 20px; /* Añadir espacio entre la imagen y el contenido */
  }

  .contenido {
    width: 48%; /* Reducir el ancho del contenido para que haya espacio suficiente */
    text-align: left;
  }

  .imagen {
    width: 48%; /* Reducir el tamaño de la imagen para evitar superposición */
  }

  .imagen img {
    width: 100%; /* Ajusta la imagen para que no se desborde */
    height: auto;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .contenedor {
    flex-direction: column;
    align-items: center; /* Centra todo el contenido en pantallas pequeñas */
  }
  
  .contenido {
    width: 100%;
    align-items: center; /* Centra el contenido horizontalmente en móviles */
    text-align: center; /* Centra el texto en pantallas pequeñas */
  }

  .imagen {
    width: 100%;
    text-align: center; /* Centra la imagen */
  }

  /* Ajuste del tamaño de la imagen */
  .imagen img {
    width: 100%; /* Asegura que la imagen se ajuste correctamente */
    height: auto;
  }
}

/* Título */
h1 {
  font-size: 2.5em;
  color: #3339F1;
  line-height: 1.2;
  margin-bottom: 0px; /* Reduce el espacio debajo del título */
}

/* Descripción (p) */
p {
  font-size: 1.2em;
  max-width: 600px;
  line-height: 1.4;
  margin-top: 0; /* Elimina cualquier margen superior si lo hay */
}

.btn-whatsapp {
  display: inline-block;
  margin-top: 0px;
  padding: 15px 25px;
  background-color: #3339F1;
  color: #fff;
  text-decoration: none;
  font-weight: normal;
  border-radius: 15px;
}


/* Flechas de navegación (izquierda y derecha) */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  padding: 10px;
  cursor: pointer;
  z-index: 1003;
  transition: background-color 0.3s ease;
}

/* Triángulo izquierdo (apunta hacia la izquierda) */
.carousel-arrow.left::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-right: 10px solid #3339F1; /* Triángulo apuntando a la izquierda */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Triángulo derecho (apunta hacia la derecha) */
.carousel-arrow.right::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid #3339F1; /* Triángulo apuntando a la derecha */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Posiciones de las flechas */
.carousel-arrow.left {
  left: 20px; /* Posición de la flecha izquierda */
}

.carousel-arrow.right {
  right: 20px; /* Posición de la flecha derecha */
}

/* Estilos generales para el carrusel */
.carousel-container {
  position: relative;
  background-color: #f7f7f7; /* Fondo claro */
  padding: 50px 0 100px; /* Espaciado arriba, abajo con 100px */
  text-align: center; /* Todo centrado */
  scroll-margin-top: 60px; /* Ajusta este valor según la altura del menú */
}

.carousel-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.carousel-slide {
  display: none; /* Ocultar todos los slides por defecto */
  max-width: 800px; /* Limitar el ancho de cada slide */
  margin: 20px auto; /* Centrado con espacio */
}

/* Solo mostrar el slide activo */
.carousel-slide.active {
  display: block;
}

.carousel-slide h2 {
  font-size: 2.5rem;
  color: #3339F1; /* Color del título */
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
}

.carousel-slide p {
  font-size: 1.2rem;
  color: #333; /* Color del texto */
  line-height: 1.6;
  margin-bottom: 30px;
}

/* Botón CTA */
.carousel-cta .cta-btn {
  background-color: #3339F1;
  color: #fff;
  padding: 15px 25px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 15px;
  transition: background-color 0.3s ease;
}

.carousel-cta .cta-btn:hover {
  background-color: #2691e7; /* Color más oscuro al pasar el ratón */
}

/* Estilos para los puntos de navegación */
.carousel-dots {
  text-align: center;
  margin-top: 20px;
}

.carousel-dots .dot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #3339F1; /* Color azul de los puntos */
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.carousel-dots .dot.active {
  background-color: #2691e7; /* Color más oscuro cuando el punto está activo */
}

/* Estilo de las animaciones */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.carousel-slide.active {
  animation: fadeIn 1s ease-in-out;
}

/* Responsivo: Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  .carousel-slide h2 {
    font-size: 1.8rem; /* Reducir tamaño del título en móvil */
  }

  .carousel-slide p {
    font-size: 1rem; /* Reducir tamaño del párrafo en móvil */
  }

  .carousel-arrow {
    font-size: 1rem; /* Reducir tamaño de las flechas */
  }

  .carousel-arrow.left::before,
  .carousel-arrow.right::before {
    border-left: 8px solid #3339F1; /* Reducir tamaño de los triángulos */
    border-right: 8px solid #3339F1;
  }

  .carousel-container {
    padding: 30px 0 60px; /* Ajustar espaciado */
  }

  .carousel-slide {
    max-width: 90%; /* Aumentar el ancho máximo en móviles */
  }
}


/* Sección de Servicios */
#servicios {
  background-color: #fff;
  padding: 20px 20px;
  text-align: center;
  scroll-margin-top: 60px; /* Ajusta este valor según la altura del menú */
}

.titulo-servicios {
  font-size: 2.5em;
  color: #3339F1;
  margin-bottom: 0px;
}

.descripcion-servicios {
  font-size: 1.2em;
  color: #333;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

.servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas en PC */
  gap: 20px;
}

.servicio {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Sombra más visible */
  transition: transform 0.3s ease-in-out;
}

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

.imagen-servicio {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.nombre-servicio {
  font-size: 1.5em;
  color: #3339F1;
  margin-top: 15px;
}

.descripcion-servicio {
  font-size: 1em;
  color: #555;
  margin-top: 10px;
  line-height: 1.5;
}

/* Responsivo: Tablets (2 columnas) */
@media (max-width: 1024px) {
  .servicios {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsivo: Celulares (1 columna) */
@media (max-width: 600px) {
  .servicios {
    grid-template-columns: 1fr;
  }
}

/* Contacto */
#contacto {
  background-color: #f7f7f7;
  padding: 40px 20px; /* Aumentado el padding superior e inferior para más espacio */
  text-align: center;
  scroll-margin-top: 60px; /* Ajusta este valor según la altura del menú */
}

.titulo-contacto {
  font-size: 2.5rem; /* Usar rem para mejor escalabilidad */
  color: #3339F1;
  margin-bottom: 20px; /* Añadido un margen inferior para mayor separación */
  font-family: 'Poppins', sans-serif; /* Fuente más clara y moderna */
}

.descripcion-contacto {
  font-size: 1.2rem; /* Asegura que el texto sea legible */
  color: #333;
  max-width: 800px;
  margin: 0 auto 40px auto; /* Centrado horizontal y margen inferior */
  line-height: 1.6;
}

.contacto {
  background-color: #f7f7f7;
  padding: 30px 20px; /* Más espacio dentro del contenedor */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más visible */
  transition: transform 0.3s ease-in-out;
  max-width: 100%; /* Asegura que el contenedor no se salga del área visible */
  margin: 0 auto; /* Centrado */
}

/* Botón CTA */
.contacto-cta .cta-btn {
  background-color: #3339F1;
  color: #fff;
  padding: 15px 25px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 15px;
  transition: background-color 0.3s ease;
  font-weight: normal; /* Agregar esta línea para quitar la negrita */
}


.contacto:hover {
  transform: scale(1.05); /* Efecto de ampliación suave al pasar el ratón */
}

/* Media Queries para hacerlo responsive */
@media (max-width: 768px) {
  .titulo-contacto {
    font-size: 2rem; /* Ajusta el tamaño del título en pantallas más pequeñas */
  }

  .descripcion-contacto {
    font-size: 1rem; /* Ajusta el tamaño del párrafo en pantallas más pequeñas */
    margin-bottom: 20px; /* Reduce el margen inferior */
  }

  .contacto {
    padding: 20px 15px; /* Ajusta el padding en pantallas más pequeñas */
  }
}

@media (max-width: 480px) {
  .titulo-contacto {
    font-size: 1.8rem; /* Ajuste mayor para dispositivos más pequeños */
  }

  .descripcion-contacto {
    font-size: 0.9rem; /* Ajuste para mejorar la legibilidad */
  }

  .contacto {
    padding: 15px 10px; /* Ajusta el padding para pantallas aún más pequeñas */
  }
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: #222;
  color: #fff;
  position: relative;
  margin-top: 50px;
  width: 100%; /* Asegura que el footer ocupe todo el ancho disponible */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  display: flex;
  justify-content: center;
  align-items: center;
}

footer p {
  margin: 0;
  font-size: 1rem;
}

footer a {
  color: #D4AF34; /* Color dorado */
  text-decoration: none;
}

/* Media Queries */
@media (max-width: 768px) {
  footer p {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  footer p {
    font-size: 1rem;
  }
}