/* Bloquear el desplazamiento horizontal en toda la página */
body {
  overflow-x: hidden;
}

/* Asegurarse de que el HTML también no permita el desplazamiento horizontal */
html {
  overflow-x: hidden;

}

/* Resetear márgenes y rellenos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Oswald', sans-serif;
  background-color: #ffffff;
  color: #333;
}

/* Header */
header {
  background-color: transparent; /* Transparente por defecto */
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

/* Cuando se hace scroll, cambiar el color del fondo */
header.scrolled {
  background-color: #3A86FF; /* Azul vibrante cuando se hace scroll */
}

/* Navegación */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Logo */
nav .logo img {
  height: 50px; /* Ajustar el tamaño del logo */
  width: auto; /* Mantener la proporción del logo */
}

nav .nav-links {
  display: flex;
  list-style: none;
}

nav .nav-links li {
  margin: 0 15px;
}

/* Estilo para los enlaces de navegación */
nav .nav-links a {
  text-decoration: none;
  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  transition: color 0.3s ease, transform 0.2s ease;
}

/* Agregar hover a los enlaces */
nav .nav-links a:hover {
  color: #FFB800;
  transform: none; /* Eliminado el efecto de escala */
}

/* Fondo para el enlace de "Contacto" */
nav .nav-links li a[href="#contact"] {
  background-color: #FFB800;
  padding: 10px 20px; /* Añadir algo de espacio alrededor del texto */
  border-radius: 5px; /* Bordes redondeados si deseas */
  color: #000; /* Asegura que el texto sea blanco */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cambiar el color del fondo y del texto al hacer hover */
nav .nav-links li a[href="#contact"]:hover {
  background: linear-gradient(10deg, #FFB800, #FFB800, #3A86FF);
  color: #fff; /* Cambiar el texto a negro en hover para contraste */
}

/* Menú y icono para móviles */
/* Menú y icono para móviles */
.menu-icon {
  color: #FFB800;
  display: none; /* Inicialmente oculto en pantallas grandes */
  cursor: pointer;
}

.menu-icon .bar {
  width: 30px;
  height: 3px;
  margin: 5px;
  background-color: #FFB800; /* Color de las barras */
}

/* Estilo para los enlaces del menú responsive */
@media screen and (max-width: 768px) {
  .menu-icon {
    display: block; /* Mostrar el icono en pantallas pequeñas */
    color: #FFB800;
  }

  .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro con 70% de opacidad */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(100%); /* Ocultar menú fuera de la vista */
    transition: transform 0.3s ease;
    z-index: 10;
    gap: 40px; /* Espacio entre los elementos del menú */
  }

  .nav-links.active {
    transform: translateX(0); /* Mostrar menú cuando tenga la clase 'active' */
  }

  /* Cambiar color de los textos de los enlaces en el menú responsive */
  .nav-links a {
    font-family: 'Poppins', sans-serif; /* Cambiar la fuente */
    color: #fff !important; /* Color del texto a #3A86FF */
    text-decoration: none;
    font-size: 24px;
    transition: color 0.3s ease; /* Suavizar la transición del color */
  }

  /* Efecto hover con color #FFB800 */
  .nav-links a:hover {
    color: #3A86FF !important; /* Asegurarse de que el hover funcione */
  }
}

/* Menú responsive */
#menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* Asegura que el menú esté por encima del contenido */
  display: none; /* Oculto por defecto */
  background-color: transparent; /* Fondo transparente */
  border: none;                  /* Eliminar borde */
  box-shadow: none;              /* Eliminar sombra */
}

#menu.show {
  display: block; /* Cuando el menú está abierto, mostrarlo */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro con opacidad */
  filter: blur(5px); /* Desenfoca el contenido detrás del menú */
}

/* Elementos con animación */
[data-aos] {
  opacity: 1 !important; /* Asegura que los elementos no estén ocultos */
  visibility: visible !important; /* Asegura que sean visibles */
  position: relative; /* Evita que los elementos estén fuera del flujo */
}

/* Sección Hero */
.hero {
  background-image: url('../images/hero-bg.jpg'); /* Asegúrate de que la ruta de la imagen sea correcta */
  background-size: cover; /* Asegura que la imagen cubra toda la sección */
  background-position: center; /* Centra la imagen tanto horizontal como verticalmente */
  color: #fff;
  text-align: center;
  display: flex; /* Usamos flexbox para centrar el contenido */
  flex-direction: column; /* Alineamos los elementos de arriba a abajo */
  justify-content: center; /* Centra el contenido verticalmente */
  padding: 100px 20px; /* Ajusta el relleno según necesites */
  min-height: 900px; /* Puedes ajustar la altura mínima según el contenido */
  height: 100vh; /* Asegura que la sección hero ocupe toda la pantalla */
}

/* Contenido dentro de la hero */
.hero-content {
  max-width: 900px; /* Limita el ancho del contenido */
  margin: 0 auto; /* Centra el contenido horizontalmente */
  padding: 20px;
}

.hero-content h1 {
  font-family: "Poppins", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 70px;
}

.hero-content p {
  font-family: "Gidugu", sans-serif;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.hero .btn {
  background-color: #3A86FF;
  padding: 15px 30px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 15px;
  transition: background-color 0.3s;
}

.hero .btn:hover {
  background-color: #FFB800;
}

/* Sección CTA */
.cta-button {
  background-color: #FFB800;
  padding: 12px 20px;
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.cta-button:hover {
  background-color: #ff9900;
}

/* Quienes somos? */
/* Contenedor principal */
.row-container {
  display: flex; /* Las columnas estarán en fila */
  flex-wrap: nowrap; /* Evita que las columnas se apilen en pantallas grandes */
  max-width: 1200px; /* Ajusta según el diseño deseado */
  margin: 0 auto; /* Centra el contenedor */
  gap: 20px; /* Espaciado entre columnas */
  align-items: center; /* Alinea verticalmente los elementos */
  margin-top: 50px;
}

/* Columna de Texto */
.text-column {
  flex: 1; /* Ocupa el espacio disponible proporcionalmente */
  padding: 20px;
  margin-right: 100px;
  text-align: center;
}

.text-column h1 {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 40px; /* Ajusta el tamaño de la fuente aquí */
  color: #3A86FF;
  margin-bottom: 10px; /* Añade espacio debajo del h1 */
}

.text-column p {
  margin-bottom: 30px;
  font-size: 20px; /* Ajusta el tamaño de la fuente aquí */
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
}

/* Columna de Imagen */
.image-column {
  flex: 1; /* Ocupa el espacio disponible proporcionalmente */
  display: flex;
  justify-content: center; /* Centra horizontalmente la imagen */
  align-items: center; /* Centra verticalmente la imagen */
  margin-left: 100px;
}

/* Imagen dentro de la columna */
.image-column img {
  max-width: 100%; /* Ajusta el tamaño máximo */
  height: auto; /* Mantiene la proporción */
}

/* Diseño Responsive */
@media (max-width: 768px) {
  .row-container {
    flex-direction: column; /* Las columnas se apilan en pantallas pequeñas */
    align-items: center; /* Centra las columnas en el contenedor */
    gap: 20px; /* Espacio entre el texto y la imagen */
  }

  .text-column, .image-column {
    flex: 1 1 100%; /* Cada columna ocupa todo el ancho */
    max-width: 100%;
    text-align: center; /* Centra el texto en pantallas pequeñas */
    margin-right: 0; /* Elimina el margen derecho en pantallas pequeñas */
    margin-left: 0; /* Elimina el margen izquierdo en pantallas pequeñas */
  }

  .image-column img {
    max-width: 80%; /* Ajusta el tamaño de la imagen para que no ocupe todo el ancho */
    height: auto;
  }
}

.tiendas-container {
  display: flex;
  justify-content: space-between; /* Distribuye las imágenes con espacio entre ellas */
  align-items: center; /* Alinea verticalmente las imágenes al centro */
  margin-bottom: 60px;
  margin-top: 60px;
}

.image-item {
  flex: 1;
  text-align: center; /* Centra la imagen dentro de su contenedor */
}

.image-item img {
  max-width: 100%; /* Hace que las imágenes sean responsivas y se ajusten al tamaño del contenedor */
  height: auto; /* Mantiene la proporción original de las imágenes */
}


/* Estilos para los planes */
/* Estilo para la sección de servicios */
#services {
  background: linear-gradient(45deg, #ffb800, #3A86FF, #ffb800);
  background-size: 400% 400%; /* Aumenta el tamaño del gradiente para crear el movimiento */
  animation: gradientMovement 5s ease infinite; /* Animación que mueve el gradiente */
  padding: 60px 20px;
  text-align: center;
}

/* Animación para mover el gradiente */
@keyframes gradientMovement {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Títulos y descripción */
#services h2 {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffb800;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombreado sutil */
}

#services p {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 1.2rem;
  margin-bottom: 40px;
  color: #1a1a1a;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Sombreado para mayor legibilidad */
}

.services-container {
  display: flex;
  justify-content: space-around;
  gap: 30px;
  flex-wrap: wrap;
}

.service-item {
  background-color: #fff;
  padding: 30px;
  width: 30%;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Centra todo el contenido */
}

.service-item h3 {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #3A86FF;
}

.service-item p {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}

.service-item ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.service-item ul li {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 10px;
}

.service-item:hover {
  transform: translateY(-10px); /* Eleva el servicio al pasar el mouse */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Efecto de elevación más pronunciado */
}

/* Botón de plan */
.plan-button {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  background-color: #ffb800;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.plan-button:hover {
  background-color: #0056b3;
}

.service-item ul li {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 10px;
  position: relative; /* Necesario para el posicionamiento del separador */
  padding-right: 10px; /* Espacio adicional para evitar que el texto se superponga con el separador */
}

/* Estilo para los elementos de la lista */
.service-item ul li {
  font-family: 'Oswald', sans-serif; /* Cambia la fuente aquí */
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 20px; /* Aumenta el margen entre los puntos */
  padding-bottom: 25px; /* Aumenta el espacio debajo del texto */
  border-bottom: 1px solid #0056b3; /* Cambia el color de la línea a rojo oscuro */
}

/* El último item de la lista no tendrá la línea */
.service-item ul li:last-child {
  border-bottom: none;
}

/* Responsividad */
@media (max-width: 768px) {
  .service-item {
    width: 100%; /* Los planes se apilan en pantallas pequeñas */
    margin-bottom: 20px;
  }
}

/* MIS TRABAJOS */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px;
}

/* Estilos de la cuadrícula de portafolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Tamaño más grande de columnas */
  gap: 20px;
  margin-top: 40px;
}

/* Elementos individuales de portafolio */
.portfolio-item {
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s ease;
  cursor: pointer;
  background: #f9f9f9;
  display: flex;
  flex-direction: column;
  height: 350px;
}

/* Hover en la tarjeta */
.portfolio-item:hover {
  transform: scale(1.05) rotate(3deg); /* Animación de escala y rotación */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
  filter: brightness(1.1); /* Aumentar el brillo */
}

/* Logo del cliente */
.portfolio-logo {
  padding: 15px;
  text-align: center;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.portfolio-item:hover .portfolio-logo {
  opacity: 1; /* Aparece el logo al hacer hover */
}

.portfolio-logo img {
  max-width: 180px;
  transition: transform 0.3s ease-in-out, filter 0.3s ease;
}

/* Hover para el logo */
.portfolio-logo img:hover {
  transform: scale(1.1); /* Zoom suave */
  filter: grayscale(80%) contrast(150%); /* Efecto de grises y alto contraste */
}

/* Descripción de la experiencia del cliente */
.portfolio-description {
  font-size: 1rem;
  color: #333;
  text-align: center;
  padding: 20px;
  font-weight: 600;
  line-height: 1.5;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.portfolio-item:hover .portfolio-description {
  opacity: 1;
  transform: translateY(-10px); /* Deslizar hacia arriba al hacer hover */
}

/* Imagen del proyecto */
.portfolio-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.3s ease;
}

/* Capa oscura sobre la imagen con efecto de zoom */
.portfolio-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Capa oscura */
  z-index: 2;
}

/* Zoom en la imagen con capa oscura más intensa al hacer hover */
.portfolio-item:hover .portfolio-image img {
  transform: scale(1.1); /* Aumento en la imagen */
  filter: brightness(0.7); /* Oscurecer la imagen */
}

.portfolio-item:hover .portfolio-image::before {
  background: rgba(0, 0, 0, 0.5); /* Aumentar la opacidad de la capa oscura */
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
  .portfolio-item {
    height: auto; /* Ajustar altura en pantallas pequeñas */
    padding-top: 80%; /* Hacer que las tarjetas sean cuadradas en dispositivos pequeños */
  }

  .portfolio-logo img {
    max-width: 160px; /* Reducir tamaño del logo en pantallas pequeñas */
  }

  .portfolio-description {
    font-size: 0.9rem; /* Ajustar el tamaño del texto */
  }
}

/* CONTACTO */
/* Estilo de la sección contacto */
.contact-form-container {
  background-image: url('../images/contact-bg.jpg'); /* Ruta de la imagen de fondo */
  background-size: cover; /* Asegura que la imagen cubra toda la sección */
  background-position: center; /* Centra la imagen */
  background-attachment: fixed; /* Hace que la imagen no se mueva con el scroll */
  color: #fff;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box; /* Asegura que el padding se incluya en el cálculo del ancho total */
}

/* Contenido del formulario */
.contact-form-content {
  background: transparent; /* Elimina el fondo para ver la imagen de fondo */
  padding: 20px;
  box-shadow: none; /* Elimina cualquier sombra si la hubiera */
  border-radius: 0;
  text-align: center; /* Centra el texto del formulario */
  width: 100%;
  max-width: 800px; /* Ajusta el ancho máximo del formulario */
}

/* Títulos */
.contact-form-content h2 {
  margin-bottom: 30px;
  font-size: 5em;
  color: #fff;
}

.contact-form-content p {
  margin-bottom: 50px;
  font-size: 1.1em;
  color: #fff;
}

/* Formulario */
.contact-form-content form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre los campos */
}

/* Contenedor para los campos de Nombre y Teléfono */
.contact-form-content .name-phone-container {
  display: flex;
  justify-content: space-between; /* Espacia los campos en línea */
  gap: 15px; /* Espacio entre los campos */
}

.contact-form-content label {
  color: #fff; /* Color del texto de los labels */
  font-size: 1.1em;
  text-align: left;
}

/* Estilo para los inputs y textarea */
.contact-form-content input,
.contact-form-content textarea {
  width: 100%;
  padding: 8px;
  font-size: 1em;
  border: none;
  border-bottom: 1px solid #424242; /* Línea debajo de los campos */
  background: transparent; /* Fondo transparente para ver la imagen */
  color: #fff; /* Color del texto de los campos */
  margin-bottom: 10px;
  transition: border-color 0.3s ease;
}

/* Placeholder (texto dentro de las cajas) */
.contact-form-content input::placeholder,
.contact-form-content textarea::placeholder {
  color: #aaa; /* Color suave para el texto del placeholder */
  font-style: italic; /* Estilo en cursiva para el placeholder */
}

/* Estilo cuando el input o textarea tiene foco (cuando el usuario hace clic en ellos) */
.contact-form-content input:focus,
.contact-form-content textarea:focus {
  border-color: #FFB800; /* Cambia el color de la línea al hacer foco */
  outline: none; /* Elimina el borde de enfoque por defecto */
}

/* Estilo para el botón */
.contact-form-content button {
  padding: 12px 20px;
  background-color: #3A86FF;
  color: #fff;
  font-size: 1.2em;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 25px; /* Redondear los bordes del botón */
  width: 100%; /* Asegura que el botón ocupe todo el ancho disponible */
}

.contact-form-content button:hover {
  background-color: #FFB800; /* Cambio de color al pasar el mouse */
}

/* Estilo para la caja de mensaje */
.contact-form-content textarea {
  width: 100%;
  padding: 8px;
  font-size: 1em; /* Igual que los otros campos */
  border: none;
  border-bottom: 1px solid #424242; /* Línea debajo del campo */
  background: transparent; /* Fondo transparente para que se vea la imagen */
  color: #fff; /* Color del texto */
  margin-bottom: 10px;
  transition: border-color 0.3s ease;
  height: 150px; /* Ajusta la altura para que se vea más grande */
  resize: none; /* Evita que el usuario redimensione la caja */
}

/* Placeholder (texto dentro de las cajas) */
.contact-form-content textarea::placeholder {
  color: #aaa; /* Color suave para el texto del placeholder */
  font-style: italic; /* Estilo en cursiva para el placeholder */
}

/* Estilo cuando el textarea tiene foco (cuando el usuario hace clic en él) */
.contact-form-content textarea:focus {
  border-color: #FFB800; /* Cambia el color de la línea al hacer foco */
  outline: none; /* Elimina el borde de enfoque por defecto */
}




/* Estilos generales para el footer */
.footer {
  background-color: #000; /* Fondo oscuro */
  color: #fff; /* Texto blanco */
  padding: 40px 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Contenedor principal del footer */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap; /* Permite que los elementos se acomoden en varias líneas en pantallas pequeñas */
}

/* Estilo para cada sección dentro del footer */
.footer-logo img {
  max-width: 150px;
}

/* Estilo para las secciones */
.footer-contact,
.footer-links,
.footer-social {
  width: 30%; /* Ajusta el ancho de cada sección */
  padding: 10px;
}

/* Estilo para los títulos */
h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

/* Lista de enlaces y contacto */
ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin-bottom: 8px;
}

ul li a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}

ul li a:hover {
  color: #FFB800; /* Resaltar enlaces */
}

/* Estilo para las redes sociales */
.footer-social ul {
  display: flex;
  gap: 15px;
}

.footer-social a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #FFB800;
}

/* Estilo para el pie de página */
.footer-bottom {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  margin-top: 20px;
}

.footer-bottom p {
  margin: 0;
}

/* Media Query para pantallas más pequeñas */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Cambia la dirección de los elementos a columna */
    align-items: center; /* Centra los elementos */
  }

  .footer-contact,
  .footer-links,
  .footer-social {
    width: 100%; /* Hace que cada sección ocupe el 100% del ancho en pantallas pequeñas */
    text-align: center; /* Centra el texto */
    margin-bottom: 20px; /* Espacio entre las secciones */
  }

  .footer-logo img {
    max-width: 120px; /* Ajusta el tamaño del logo */
  }
}

/* Media Query para pantallas muy pequeñas (móviles) */
@media (max-width: 480px) {
  .footer {
    font-size: 12px; /* Reduce el tamaño de la fuente en pantallas muy pequeñas */
  }
}