/* Asume que la altura de la barra de arriba es de 30px */
.main-content {
  margin-top: 150px;
  /* 120px (navbar) + 30px (barra-arriba) */
  transition: margin-top 0.5s ease-in-out;
  /* Misma duraci n que la transici n de tu navbar */
}

.carousel-item img {
  /* ¡Esta es la regla clave! */

  width: 100% !important;
  height: 580px !important;
  /* Ajusta la altura proporcionalmente */

  /* Asegura que ocupe el ancho completo */
  display: block;

  /* Opcional: Recomendado para eliminar posibles espacios inferiores */
}


/* Capa oscura uniforme sobre cada slide */
.carousel-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Color sólido parejo: el 0.5 es la opacidad (ajústalo de 0 a 1) */
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Subir el contenido para que no quede tapado por la capa oscura */
.carousel-caption {
  z-index: 2;
}





.carousel-i em::before {
  display: block;
  width: 100%;
  height: 580px !important;
  left: 0;
  right: 0;
  content: "";
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
}

/*ajusta texto de banners*/
.fs-1,
.fs-4 {
  color: #fff;
  -webkit-text-stroke: 0px #ffff;
  text-shadow: 0px 4px 4px blue;
}

/*********************************************************/
.container #accessToken {
  display: block;
  width: 100px;
  height: 20px;
  background-color: yellow;
}

/* ----------------------------------------------------------- */
/* FUERZA LA TRANSICI N DE DESLIZAMIENTO (SLIDE) */
/* ----------------------------------------------------------- */

/* 1. Define la duraci n del desplazamiento y anula cualquier transici n de opacidad */
#carouselExampleIndicators .carousel-inner .carousel-item {
  /*   VALOR DE DESPLAZAMIENTO: 5 segundos. Ajusta este valor (ej. 0.8s) para ver el efecto.   */
  transition: transform 1s ease-in-out !important;

  /* Asegura que la opacidad no est  siendo animada para fundido */
  opacity: 1 !important;
}

/* 2. Regla clave: Anula expl citamente la transici n de opacidad de las clases de animaci n de Bootstrap 5 */
#carouselExampleIndicators .carousel-inner .carousel-item-next,
#carouselExampleIndicators .carousel-inner .carousel-item-prev,
#carouselExampleIndicators .carousel-inner .active.carousel-item-end,
#carouselExampleIndicators .carousel-inner .active.carousel-item-start {
  /* Mantenemos la opacidad 1 y aseguramos la transici n de transformaci n */
  opacity: 1 !important;
  transition: transform 1s ease-in-out !important;
}

/* 3. Asegura que la transici n de opacidad no est  en la clase activa */
#carouselExampleIndicators .carousel-inner .active {
  opacity: 1 !important;
}

/* 1. Estilo base para todos los indicadores (NO activos) */
.carousel-indicators button[data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;

  background-color: orangered;
  opacity: 0.5;
  border: none;

  /* NUEVO: Margen para separarlos (por ejemplo, 5px a los lados) */
  margin: 0 5px;

  /* NUEVO: Añadir una transición suave para el efecto hover */
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

/* 2. Estilo para el indicador ACTIVO (el punto seleccionado) */
.carousel-indicators .active {
  background-color: orangered;
  opacity: 1;
  /* Totalmente visible */
}

/* 3. NUEVO: Estilo para el efecto HOVER (al pasar el mouse) */
.carousel-indicators button[data-bs-target]:hover {
  background-color: #ff7f50;
  /* Un tono ligeramente diferente de 'coral' para el hover */
  opacity: 0.8;
  /* Se vuelve un poco más visible al pasar el mouse */
}









/* ==========================================================================
   SOLO CARRUSEL: AJUSTE Y ANIMACIÓN (1200px - 1399px)
   ========================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1399px) {

  /* Asume que la altura de la barra de arriba es de 30px */
  .main-content {
    margin-top: 150px;
    /* 120px (navbar) + 30px (barra-arriba) */
    transition: margin-top 0.5s ease-in-out;
    /* Misma duraci n que la transici n de tu navbar */
  }

  .carousel-item img {
    /* ¡Esta es la regla clave! */

    width: 100% !important;
    height: 580px !important;
    /* Ajusta la altura proporcionalmente */

    /* Asegura que ocupe el ancho completo */
    display: block;

    /* Opcional: Recomendado para eliminar posibles espacios inferiores */
  }

}













/******************* PC CHICA / LAPTOP (992px - 1199px) ****************/
@media screen and (min-width: 992px) and (max-width: 1199px) {

  /* 1. AJUSTE DEL MARGEN SUPERIOR */
  /* Como tu navbar de laptop mide 116px, sumamos los 30px de la barra azul = 146px */
  .main-content {
    margin-top: 146px !important;
    transition: margin-top 0.5s ease-in-out;
  }

  /* 2. AJUSTE DE ALTURA DEL CARRUSEL */
  /* En PC usas 580px, para laptop 480px es una medida más equilibrada */
  .carousel-item img,
  .carousel-item::before {
    height: 480px !important;
    object-fit: cover !important;
    /* Mantiene la proporción sin deformar */
    object-position: center;
    /* Centra la imagen si se recorta */
  }

  /* 3. AJUSTE DE TEXTOS (BANNER) */
  .carousel-caption {
    bottom: 20% !important;
    /* Sube un poco el texto para compensar la altura */
  }

  .fs-1 {
    font-size: 3rem !important;
    /* Reducimos ligeramente el título */
  }

  .fs-4 {
    font-size: 1.5rem !important;
    /* Reducimos el subtítulo */
  }
}







/***************CARRUSEL PARA TABLET**************/
@media screen and (min-width: 768px) and (max-width: 991px) {

  /* 1. AJUSTE DEL MARGEN SUPERIOR */
  .main-content {
    margin-top: 110px !important;
    /* Ajustamos para que el carrusel suba un poco */
    transition: margin-top 0.5s ease-in-out;
  }

  /* 2. RECORTE PROPORCIONAL DE LA IMAGEN (EL SECRETO) */
  .carousel-item img {
    width: 100% !important;
    height: 400px !important;
    /* Altura reducida para que no se vea estirado */
    object-fit: cover !important;
    /* Mantiene la proporción recortando los lados */
    object-position: center !important;
    /* Centra el enfoque de la foto */
    display: block;
  }

  /* 4. AJUSTE DE TEXTOS EN BANNER */
  .carousel-caption {
    bottom: 15% !important;
    /* Sube un poco el texto para que luzca centrado */
  }

  .fs-1 {
    font-size: 2.5rem !important;
    /* Un poco más pequeño para tablet */
  }

  .fs-4 {
    font-size: 1.2rem !important;
  }
}










/* ======================================= */
/* 4. CARRUSEL DE MARCAS (Ajuste Definitivo) */
/* ======================================= */

/* 1. SECCIÓN GRIS CLARO (bg-light) - SIN CAMBIOS AQUÍ */
#marcasCarouselSection {
  background-color: #f8f9fa;
  width: 100%;
  margin-top: -50px;
  padding-top: 50px;
}

/* Contenedor Limítrofe (Si necesitas limitar el ancho máximo del contenido) */

/* Título "NUESTRAS MARCAS" - SIN CAMBIOS AQUÍ */
#marcasCarouselSection h3 {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 30px;
  font-size: 28px !important;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
}

.marcas-contenido-limitado {
  max-width: 1200px;
  margin: 0 auto;
}

/* 2. CONTENEDOR DEL SWIPER: HACER FONDO BLANCO DE BORDE A BORDE */
.carrusel-marcas-contenedor {
  /* Establece el fondo BLANCO */
  background-color: #ffffff;

  /* CLAVE 1: Asegura que el contenedor ocupe el ancho completo del viewport */
  max-width: 100%;
  width: 100%;

  /* CLAVE 2: Elimina el margen automático que lo centraba, debe ir de borde a borde */
  margin: 0;

  padding: 20px 0;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  position: relative;
  cursor: pointer;
}

/* Este código es para todas las imágenes dentro de tu carrusel */
.swiper-slide img {
  width: 125px;
  height: 65px;
  /* Pone la imagen en escala de grises por defecto */
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
  object-fit: contain;

  display: block;
  margin: 0 auto;
  cursor: pointer;
}

/* Además, para un buen centrado vertical y horizontal, mantén el flexbox en el slide */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  cursor: pointer;
}

/* Efecto hover: Recupera color y opacidad */
.swiper-slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Estilo y posicionamiento de las flechas de navegación */
.carrusel-marcas-contenedor .swiper-button-prev,
.carrusel-marcas-contenedor .swiper-button-next {
  color: #004488;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 30px;
  height: 30px;
  margin-top: 0;
}

.carrusel-marcas-contenedor .swiper-button-prev {
  left: -25px;
}

.carrusel-marcas-contenedor .swiper-button-next {
  right: -25px;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  #marcasSwiper {
    padding: 0 30px;
  }

  #marcasSwiper img {
    height: 90px;
  }
}








/* ==========================================================================
   FLECHAS DEL CARRUSEL DE MARCAS (1200px - 1399px)
   ========================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1399px) {

  /* 1. Ajuste de las flechas: las metemos al área visible */
  .carrusel-marcas-contenedor .swiper-button-prev {
    left: 20px !important;
    /* Cambiamos de -25px a 20px positivo */
    color: #004488 !important;
  }

  .carrusel-marcas-contenedor .swiper-button-next {
    right: 20px !important;
    /* Cambiamos de -25px a 20px positivo */
    color: #004488 !important;
  }

  /* 2. Aseguramos que se vean sobre el fondo blanco */
  .carrusel-marcas-contenedor .swiper-button-prev,
  .carrusel-marcas-contenedor .swiper-button-next {
    z-index: 10 !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    /* Fondo sutil para que resalten */
    padding: 25px !important;
    /* Aumenta el área de clic */
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  }

  /* 3. Tamaño de la flecha (icono) */
  .carrusel-marcas-contenedor .swiper-button-prev::after,
  .carrusel-marcas-contenedor .swiper-button-next::after {
    font-size: 20px !important;
    /* Ajusta el tamaño de la flecha interna */
    font-weight: bold !important;
  }
}








/******************* MARCAS: LAPTOP (992px - 1199px) ****************/
@media screen and (min-width: 992px) and (max-width: 1199px) {

  /* 1. SECCIÓN Y TÍTULO */
  #marcasCarouselSection {
    margin-top: -30px !important;
    /* Menos espacio negativo que en PC */
    padding-top: 30px !important;
  }

  #marcasCarouselSection h3 {
    font-size: 22px !important;
    /* Reducimos para que armonice con el catálogo */
    margin-bottom: 20px !important;
    padding-top: 10px !important;
  }

  /* 2. CONTENEDOR DEL SWIPER */
  .carrusel-marcas-contenedor {
    padding: 10px 0 !important;
    /* Más compacto verticalmente */
  }

  /* 3. IMÁGENES DE LAS MARCAS */
  .swiper-slide img {
    width: 105px !important;
    margin-top: 10px;
    /* Reducimos de 125px a 105px */
    height: 55px !important;
    /* Reducimos de 65px a 55px */
    opacity: 0.6;
    /* Un poco más sutil en escala de grises */
  }

  .swiper-slide {
    height: 70px !important;
    /* Ajustamos la altura del carril */
  }

  /* 4. FLECHAS DE NAVEGACIÓN */
  /* En laptop el ancho es menor, metemos las flechas un poco más */
  .carrusel-marcas-contenedor .swiper-button-prev {
    left: 10px !important;
    transform: translateY(-50%) scale(0.8) !important;
    /* Flechas más pequeñas */
  }

  .carrusel-marcas-contenedor .swiper-button-next {
    right: 10px !important;
    transform: translateY(-50%) scale(0.8) !important;
  }
}






/***************@MEDIA PARA EL CARRUSEL DE MARCAS CELULAR*****************/

@media screen and (min-width: 768px) and (max-width: 991px) {

  /* 1. DAR ESPACIO INTERNO PARA QUE LAS FLECHAS NO TAPEN LOS LOGOS */
  .carrusel-marcas-contenedor {
    padding: 20px 45px !important;
    /* Aumentamos el padding lateral */
  }

  /* 2. RE-POSICIONAR FLECHAS DENTRO DE LA PANTALLA */
  .carrusel-marcas-contenedor .swiper-button-prev,
  .carrusel-marcas-contenedor .swiper-button-next {
    display: flex !important;
    /* Forzar visibilidad */
    background-color: rgba(255, 255, 255, 0.9) !important;
    /* Fondo blanco para resaltar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    z-index: 100 !important;
  }

  /* Flecha Izquierda: meterla al borde visible */
  .carrusel-marcas-contenedor .swiper-button-prev {
    left: 10px !important;
  }

  /* Flecha Derecha: meterla al borde visible */
  .carrusel-marcas-contenedor .swiper-button-next {
    right: 10px !important;
  }

  /* 3. HACER LOS ICONOS DE LAS FLECHAS MÁS PEQUEÑOS Y CENTRADOS */
  .carrusel-marcas-contenedor .swiper-button-prev::after,
  .carrusel-marcas-contenedor .swiper-button-next::after {
    font-size: 16px !important;
    /* Tamaño del ícono de Swiper */
    font-weight: bold !important;
    color: #004488 !important;
  }

  /* 4. TAMAÑO DE LOGOS EN TABLET */
  .swiper-slide img {
    width: 110px !important;
    /* Un poco más pequeños para que quepan más por fila */
    height: 55px !important;
    opacity: 0.6;
    /* En tablet mejor quitar la opacidad baja para facilitar la vista */

    /* Opcional: mostrar a color para resaltar marcas */
  }
}