/* ============================= */
/* SLIDER */
/* ============================= */

/* Estilos base del carrusel */
.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  .banner {
    height: 50vh; /* Ajusta según lo que necesites */
  }

  .banner img {
    object-fit: cover; /* Asegura que se mantenga bien encuadrada */
    object-position: center; /* Centra la imagen */
  }
} 

/* También puedes ajustar más si tu banner tiene textos u overlays */
@media (max-width: 480px) {
  .banner {
    height: 40vh;
  }
}


.slider {
    position: relative; /* Posición relativa para el contenedor */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100vh; /* Altura igual al viewport */
    overflow: hidden; /* Oculta el contenido que se desborda */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    background-color: var(--font-color);
}

.slide {
    position: absolute; /* Posición absoluta para las diapositivas */
    width: 100%; /* Ocupa el 100% del ancho */
    height: 100%; /* Ocupa el 100% de la altura */
    display: flex; /* Usa flexbox para alinear elementos */
    align-items: center; /* Centra verticalmente */
    justify-content: space-around; /* Distribuye el espacio */
    opacity: 0; /* Inicialmente invisible */
    transition: opacity 0.5s ease-in-out; /* Transición suave */
}

.slide.active {
    opacity: 1; /* Hace visible la diapositiva activa */
}

.content {
    max-width: 500px; /* Ancho máximo del contenido */
}

.content h2 {
    font-size: 3rem; /* Tamaño del título */
}

.slide {
    background-image: url('../img/banner/que-es-hosting.jpg');
    background-size: cover;        /* Ajusta la imagen al tamaño del contenedor */
    background-position: center;   /* Centra la imagen */
    background-repeat: no-repeat;  /* Evita que se repita */
}

#slide2 {
    background-image: url('../img/banner/dominio-hosting.jpg');
    object-fit: cover; /* Asegura que se mantenga bien encuadrada */
    object-position: center; /* Centra la imagen */
}

#slide3 {
    background-image: url('../img/banner/web-hosting.webp');
    object-fit: cover; /* Asegura que se mantenga bien encuadrada */
    object-position: center; /* Centra la imagen */
}

.indicators {
    position: absolute; /* Posición absoluta para los indicadores */
    bottom: 20px; /* Distancia desde el fondo */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para centrar */
}

.dot {
    width: 12px; /* Ancho del punto */
    height: 12px; /* Altura del punto */
    margin: 0 5px; /* Margen entre puntos */
    background: var(--color-segundario); /* Fondo blanco */
    display: inline-block; /* Muestra en línea */
    border-radius: 50%; /* Forma circular */
    opacity: 0.5; /* Transparencia inicial */
    cursor: pointer; /* Cambia el cursor al pasar */
}

.dot.active {
    background: var(--color-primario); /* Cambia el color del punto activo */
    opacity: 1; /* Hace visible el punto activo */
}