/* Asegura que el body y html ocupen toda la altura de la ventana */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column; /* Configura los hijos del body en una columna */
    font-family: Arial, sans serif;
}

/* Contenedor principal que envuelve el contenido */
main {
    flex: 1; /* Empuja el footer hacia abajo si el contenido es insuficiente */
    background: linear-gradient(to bottom, black, white); /* Degradado de negro a blanco */
    min-height: 100vh; /* Asegura que ocupe al menos la altura de la ventana */
    padding: 20px; /* Espaciado interno */
    color: lightgray; /* Color de texto que contraste con el fondo */
}

header {
    background-image: url("pexels-pixabay-4158.webp");
    background-size: cover; /* Asegura que la imagen cubra todo el área */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que se repita */
    background-color: rgba(0, 0, 0, 0.3); /* Negro con opacidad del 30% */
    background-blend-mode: overlay; /* Mezcla la imagen con el color */
    color: lightgray; /* Para que el texto sea visible sobre la imagen */
    padding: 50px; /* Ajusta el espacio interno */
    text-align: center;
    position: relative;
    height: 280px; /* Define la altura del header */
    display: flex;
    flex-direction: column; /* Ordenar los elementos en columna */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */

}

/* Capa semitransparente */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Negro con opacidad del 50% */
    z-index: 1;
}

/* Contenido del header encima de la superposición */
.logo-container, .nav-menu {
    position: relative;
    z-index: 2;
}


.nav-menu {
    position: absolute;
    top: 5px; /* Más cerca del borde superior */
    right: 20px; /* Ajusta el espaciado lateral */
    display: flex;
    gap: 15px; /* Espaciado entre "Nosotros" y "Contacto" */
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #00c6ff; /* Cambia de color al pasar el cursor */
}

.nav-menu li {
  list-style-type: none; /* Elimina los puntos */
}


html {
  scroll-behavior: smooth;
}

.logo-container {
    display: flex;
    align-items: center;
    flex-direction: column; /* Logo, h1 y h3 en columna */
}

.logo {
    border-radius: 50%;
    width: 150px; /* Ajusta el tamaño de tu logo */
    height: 150px; /* Ajusta el tamaño de tu logo */
    margin-right: 10px;
}

h1 {
    display: inline-block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra negra suave */
    font-size: 4rem; /* Incrementa el tamaño de la fuente */
    margin: 0; /* Elimina el margen por defecto */
    text-align: center; /* Centra el texto */
}

.slogan {
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 5px #fff, 0 0 10px rgba(255, 0, 255, 0.6), 0 0 15px rgba(255, 0, 255, 0.4);
  animation: neonColors 3s infinite alternate;
}

@keyframes neonColors {
  
  25% {
    color: #00ffff;
    text-shadow: 0 0 3px #00ffff, 0 0 8px rgba(0, 255, 255, 0.5), 0 0 12px rgba(0, 255, 255, 0.3);
  }
}



.desempeno {
    padding: 50px 20px;
    text-align: center;
    background: linear-gradient(to bottom, white, #f0f0f0); /* Fondo degradado */
    color: #333;
}

.desempeno h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #000;
}

.servicios {
    display: flex;
    flex-wrap: wrap; /* Por si la pantalla es muy pequeña */
    justify-content: space-between;
    gap: 20px;
}

.servicio {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: calc(20% - 20px); /* Cinco tarjetas en una fila */
    text-align: center;
    padding: 20px;
    transition: transform 0.3s;
    flex-direction: column;
    justify-content: space-between;
    height: 300px; /* Altura fija para todas las tarjetas */
}

.servicio:hover {
    transform: scale(1.05);
}

.servicio img {
    width: 100%;
    height: 100px; /* Altura fija para las imágenes */
    object-fit: cover; /* Recorta la imagen proporcionalmente */
    border-radius: 10px;
    margin-bottom: 10px;
}

.servicio h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #007bff;
}

.servicio p {
    font-size: 0.9rem;
    color: #555;
    margin-top: auto; /* Para alinear el contenido inferior */
}

.descuento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 20px; /* Ajusta según sea necesario */
  margin-bottom: 20px;
}

.descuento img {
  width: 100px; /* Tamaño de la imagen */
  height: auto;
  object-fit: contain; /* Asegura que la imagen no se deforme */
  margin-bottom: 10px;
}

.descuento p {
  font-size: 1rem; /* Ajusta el tamaño del texto */
  color: #333; /* Ajusta el color del texto según tu diseño */
  font-weight: bold;
}


.medios-pago {
  margin-top: 20px;
}

.medios-pago p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #555; /* Ajusta el color según el diseño */
  margin-bottom: 10px;
}

.logos {
  display: flex;
  gap: 15px; /* Espaciado entre los logos */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.logos img {
  width: 60px; /* Tamaño de los logos */
  height: auto;
}

.logos img[alt="Mercado Pago"] {
  width: 100px; /* Ajusta el tamaño solo para este logo */
  height: auto;
}

.informacion-container {
  display: flex;
  flex-direction: column; /* Asegura que estén una debajo de otra */
  align-items: center; /* Centra horizontalmente */
  justify-content: center; /* Centra verticalmente si el contenedor tiene altura suficiente */
  gap: 20px; /* Añade espacio entre las tarjetas */
  padding: 20px; /* Espacio alrededor de las tarjetas */
}

.informacion-card {
  width: 90%; /* Controla el tamaño de las tarjetas */
  max-width: 400px; /* Limita el tamaño en pantallas grandes */
  margin: 0 auto; /* Asegura el centrado horizontal */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Opcional: sombra para destacar */
}

.informacion {
  display: flex;
  gap: 20px; /* Espaciado entre columnas */
  justify-content: space-between;
  flex-wrap: wrap; /* Permite que las tarjetas pasen a la siguiente línea en pantallas pequeñas */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tarjeta {
  flex: 1; /* Asegura que las columnas tengan el mismo ancho */
  background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco con algo de transparencia */
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destacar las tarjetas */
  padding: 20px;
  text-align: center;
  min-width: 280px; /* Tamaño mínimo para evitar que las tarjetas se rompan */
}

.tarjeta:hover {
  border: 2px solid #007bff;
}

.tarjeta img {
  display: block; /* Asegura que la imagen se comporte como bloque */
  margin: 50px auto 15px auto; /* Centra la imagen y agrega un margen inferior */
  width: 150px; /* Ajusta el tamaño de la imagen */
  height: auto; /* Mantiene la proporción de la imagen */
}


.tarjeta h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #333;
}

.tarjeta p {
  font-size: 1rem;
  color: #555;
  margin: 0;
}

.redes-sociales {
  display: flex;
  justify-content: center;
  gap: 15px; /* Espaciado entre los íconos */
  margin-top: 90px;
  align-items: center; /* Alinea verticalmente las imágenes */
}

.redes-sociales img {
  width: 80px; /* Tamaño uniforme de las imágenes */
  height: 80px; /* Tamaño uniforme de las imágenes */
  border-radius: 60%; /* Convierte las imágenes en círculos */
  object-fit: cover; /* Asegura que la imagen se recorte y se ajuste al círculo */
  margin: 0 10px; /* Espaciado entre las imágenes */
  border: 2px solid #fff; /* Añade un borde blanco para un diseño más limpio */
  transition: transform 0.3s;
}

.redes-sociales img:hover {
  transform: scale(1.1); /* Efecto de agrandamiento al pasar el mouse */
}



.whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 3;
}

.whatsapp img {
    width: 60px; /* Ajusta el tamaño de tu icono de WhatsApp */
    height: 60px; /* Ajusta el tamaño de tu icono de WhatsApp */
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp img:hover {
  transition: transform 0.3s;
  transform: scale(1.2);
}

.whatsapp {
  animation: neonGreen 2s infinite alternate;
}

@keyframes neonGreen {
  0% {
    filter: drop-shadow(0 0 3px #00ff00) drop-shadow(0 0 5px rgba(0, 255, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 6px #00ff66) drop-shadow(0 0 10px rgba(0, 255, 102, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 3px #006600) drop-shadow(0 0 8px rgba(0, 102, 0, 0.6));
  }
}


.nosotros {
  background-image: url('pexels-athena-2825352.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  border-radius: 10px;
  max-width: 1200px;
  margin: 30px auto;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.nosotros::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6); /* Oscurece el fondo */
  z-index: 1;
  border-radius: 10px;
}

.nosotros * {
  position: relative;
  z-index: 2;
}

.nosotros h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #00c6ff;
}

.nosotros p {
  font-size: 1.3rem;
  line-height: 1.8;
  margin-bottom: 30px;
}

.nosotros ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
}

.nosotros li {
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 10px;
  color: #fff;
}

.nosotros li:hover {
  color: #00c6ff; /* Mismo color que los íconos al pasar el mouse */
  transition: color 0.3s ease-in-out; /* Transición suave */
}


.icon {
  display: inline-flex; /* Asegura que los íconos respeten la alineación */
  justify-content: center;
  align-items: center;
  width: 50px; /* Tamaño uniforme para los íconos */
  height: 50px;
  background-color: rgba(255, 255, 255, 0.2); /* Fondo con transparencia */
  border-radius: 50%; /* Hace los íconos circulares */
  margin-top: 10px; /* Añade espacio superior entre los íconos y otros elementos */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.icon svg {
  width: 24px;
  height: 24px;
  fill: #fff; /* Color de los íconos */
}

.icon:hover {
  transform: scale(1.1); /* Efecto de zoom al pasar el ratón */
  background-color: rgba(0, 198, 255, 0.5); /* Cambia el color de fondo */
}




iframe {
    width: 100%;
    height: 300px; /* Ajusta la altura de tu mapa de Google */
    border: 0;
    margin-top: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
}







/*Responsive*/

/* Estilos para dispositivos móviles (hasta 768px de ancho) */
@media (max-width: 768px) {
    .servicios {
        flex-direction: row; /* Cambia a filas en pantallas grandes */
        flex-wrap: wrap; /* Permite que las tarjetas pasen a la siguiente línea si es necesario */
        justify-content: space-evenly; /* Distribuye las tarjetas de manera uniforme */
        align-items: flex-start; /* Quita el centrado vertical */
        min-height: auto; /* Elimina la altura mínima */
    }

     .tarjeta {
        width: 100%; /* Asegura que ocupe el ancho completo */
        margin-bottom: 15px; /* Espaciado entre las tarjetas */
    }    

    .servicio {
        width: calc(20% - 20px); /* Cinco tarjetas en fila en pantallas grandes */
        max-width: none; /* Sin límite de ancho */
        height: 300px; /* Fija la altura para diseño uniforme */
    }

    .nav-menu {
        flex-direction: column;
        gap: 10px;
        align-items: flex-end; /* Centra los enlaces en móviles */
    }

    .nav-menu a {
        font-size: 0.9rem; /* Reduce el tamaño de las fuentes */
    }

    h1 {
        font-size: 2.5rem; /* Ajusta el tamaño del título */
    }

    .logo {
        width: 120px; /* Reduce el tamaño del logo */
        height: 120px;
    }

    .nosotros {
        padding: 20px; /* Reduce los márgenes internos */
        font-size: 1rem; /* Ajusta el tamaño de fuente */
    }

    .nosotros h2 {
        font-size: 2rem;
    }

    iframe {
        height: 200px; /* Ajusta la altura del mapa en móviles */
    }

    .redes-sociales img {
        width: 50px;
        height: 50px;
    }

    .whatsapp img {
        width: 50px;
        height: 50px;
    }
}

/* Estilos para tablets (768px a 1024px de ancho) */
@media (max-width: 1024px) {
    .servicio {
        width: calc(50% - 20px); /* Muestra dos tarjetas por fila */
    }

    .nav-menu {
        gap: 10px;
    }

    .redes-sociales img {
        width: 60px;
        height: 60px;
    }
}

/* Ajustes para pantallas pequeñas (hasta 480px de ancho) */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem; /* Reduce aún más el tamaño del título */
    }

    .slogan {
        font-size: 1.2rem; /* Ajusta el tamaño del texto del eslogan */
    }

    .logo {
        width: 100px;
        height: 100px;
    }

    .nosotros p {
        font-size: 0.9rem; /* Ajusta el texto descriptivo */
    }

    .redes-sociales img, 
    .whatsapp img {
        width: 40px;
        height: 40px;
    }

    .medios-pago p {
        font-size: 1rem;
    }
}