/* styles.css */

/* Estilos generales */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('img/fondo.jpg'); /* Ruta a la imagen de fondo */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
  background-repeat: no-repeat; /* Evita que se repita la imagen de fondo */
}

/* Estilos para el encabezado (header) */
header {
  text-align: center;
  background: linear-gradient(45deg, #333, #ff9900); /* Degradado de fondo */
  color: #fff;
  padding: 20px 0;
  font-size: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilos para el logotipo */
img {
  max-width: 100px; /* Ajusta el tamaño del logotipo según tus necesidades */
  height: auto;
  margin-left: 20px; /* Añade espacio entre el título y el logotipo */
}

/* Estilos para la sección del h2 */
.centered-text {
  text-align: center; /* Centra el texto */
  font-size: 18px; /* Tamaño de fuente ajustado */
  color: #333; /* Color del texto */
  margin: 20px 0; /* Espaciado superior e inferior */
}

/* Estilos para el carrusel de mockups */
.carousel-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilos para los botones con degradado */
.gradient-button {
  background: linear-gradient(45deg, #333, #ff9900); /* Degradado de fondo */
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

.image-carousel {
  max-width: 300px;
  overflow: hidden;
  text-align: center; /* Añade este estilo para centrar la imagen */
}

.image-slide {
  display: none;
}

.carousel-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.carousel-description {
  font-size: 16px;
  margin: 10px 0;
  color: #333;
}

/* Resto de estilos (dejados sin cambios) */
/* ... */
/* Estilos generales */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('img/fondo.jpg'); /* Ruta a la imagen de fondo */
  background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
  background-repeat: no-repeat; /* Evita que se repita la imagen de fondo */
}

/* Estilos para el encabezado (header) */
header {
  text-align: center;
  background: linear-gradient(45deg, #333, #ff9900); /* Degradado de fondo */
  color: #fff;
  padding: 20px 0;
  font-size: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilos para el logotipo */
img {
  max-width: 100px; /* Ajusta el tamaño del logotipo según tus necesidades */
  height: auto;
  margin-left: 20px; /* Añade espacio entre el título y el logotipo */
}

/* Estilos para el texto en la sección h2 */
.centered-text {
  text-align: center; /* Centra el texto */
  font-size: 18px; /* Tamaño de fuente ajustado */
  color: #333; /* Color del texto */
  margin: 20px 0; /* Espaciado superior e inferior */
}

/* Estilos para el carrusel de mockups */
.carousel-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Estilos para los botones "Anterior" y "Siguiente" con degradado */
.gradient-button {
  background: linear-gradient(45deg, #333, #ff9900); /* Degradado de fondo */
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
}

/* Estilos para el contenedor del carrusel de imágenes */
.image-carousel {
  max-width: 300px;
  overflow: hidden;
  text-align: center; /* Añade este estilo para centrar la imagen */
}

/* Estilos para las diapositivas de imágenes */
.image-slide {
  display: none;
}

/* Estilos para las imágenes en el carrusel */
.carousel-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Estilos para la descripción del carrusel */
.carousel-description {
  font-size: 16px;
  margin: 10px 0;
  color: #333;
}

/* Resto de estilos (dejados sin cambios) */
/* ... */