/*////////////////// Audifonos /////////////////////*/

.hero-audifonos {
position: relative;
  height: 40vh;
  overflow: hidden;
  padding: 0 0 30px 0;
}

.hero-audifonos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-audifonos .rexton {
position: absolute;
width: 480px;
height: auto;
top:120px;
left: 0;
display: block;
}
.rexton-mb {
display: none;
}

.hero-audifonos-titulo {
position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--heading-color);
  color: #fff;
  padding: 0.8rem 3rem;
  border-radius: 20px;
  white-space: nowrap;
}

.hero-audifonos-titulo h2 {
  color: #fff;
  margin: 0;
}

.audifonos .tipo-audifono {
  padding: 30px 5%;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  flex-direction: row;
  gap: 60px;
  overflow: hidden;
  align-items: center;
}
.audifonos .tipo-audifono-img {
  flex: 0 0 180px;
  display: flex;
  justify-content: center;
  align-items: center; /*centra vertical*/
}

.audifonos .tipo-audifono-content {
  flex: 1 1 auto;
  max-width: 760px;
  text-align: left;
}

.audifonos .tipo-audifono-content h2 {
  margin-top: 0;
  margin-bottom: 18px;
}

.audifonos .tipo-audifono-content p {
  margin-bottom: 28px;
  line-height: 1.5;
}
.audifonos .tipo-audifono-content .btn {
  display: inline-block;
  min-width: 220px;
  text-align: center;
}

.audifonos-accesorios{
  padding: 30px 0;
  margin-bottom: 50px;
}

/* Ajustes para tablets y móviles. */
@media (max-width: 767.98px) {

.hero-audifonos .rexton {
display: none;
}
.rexton-mb {
  display: inline-block;
  width: 90%;
}

.audifonos .tipo-audifono {
    flex-direction: column;
    gap: 25px;
    padding: 0 3% 50px 3%;
}

.audifonos .tipo-audifono-img {
    flex-basis: auto;
    width: 100%;
  }

.audifonos .tipo-audifono-content {
    max-width: 100%;
    text-align: center;
  }

  .audifonos .tipo-audifono-content .btn {
    width: 100%;
    min-width: 0;
    max-width: 320px;
  }
}


/*--------------------------------------------------------------
# Carrusel de accesorios
--------------------------------------------------------------*/

/* Evita desbordamientos dentro de la columna de Bootstrap. */
.audifonos-accesorios .col-lg-8 {
  min-width: 0;
}

/* Contenedor principal del carrusel. */
.audifonos-accesorios .swiper {
  width: 100%;
  overflow: hidden;

  /* Espacio reservado para los indicadores inferiores. */
  padding-bottom: 55px;
}

/* Contenedor de todos los slides. */
.audifonos-accesorios .swiper-wrapper {
  height: auto;
  align-items: stretch;
}

/* Cada slide individual. */
.audifonos-accesorios .swiper-slide {
  height: auto;
  display: flex;
}

/* Tarjeta completa del accesorio. */
.audifonos-accesorios .accesorio-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: transparent;
}

/* Imagen del accesorio. */
.audifonos-accesorios .accesorio-card-img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: contain;
  object-position: center;
}

/* Título situado debajo de la imagen. */
.audifonos-accesorios .accesorio-card-titulo {
  display: block;
  width: 100%;

  /* Línea superior observada en la referencia. */
  border-top: 1px solid #dee2e6;

  /* Espaciado entre la línea y el texto. */
  padding: 20px 10px 0;

  /* Elimina márgenes heredados potencialmente problemáticos. */
  margin: 0;

  /* Estilos visuales. */
  color: var(--heading-color);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;

  /* Garantiza que no quede oculto por otros estilos. */
  opacity: 1;
  visibility: visible;
}

/* Posición de la paginación. */
.audifonos-accesorios .swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  width: 100%;
  margin: 0;
  text-align: center;
}

/* Indicadores inactivos. */
.audifonos-accesorios .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px !important;
  background-color: #edf1f8;
  opacity: 1;
}

.audifonos-accesorios .swiper-pagination-bullet-active {
  background-color: var(--heading-color);
}

@media (max-width: 767.98px) {
  /* Reduce la altura de la imagen. */
  .audifonos-accesorios .accesorio-card-img {
    height: 230px;
  }

  .audifonos-accesorios .accesorio-card-titulo {
    font-size: 26px;
  }
}


/*///////////////// AUDÍFONOS DETALLE ////////////////////////*/

.audifonos .audifono-detalle-01,
.audifonos .audifono-detalle-02 {
  display: flex;                      /* Coloca imagen y contenido en la misma fila. */
  align-items: stretch;               /* Hace que ambos bloques ocupen la misma altura. */
  gap: 0;                             /* Evita espacios entre las dos mitades. */
  padding: 0;                         /* Permite que la división quede centrada. */
  border-bottom: 1px solid #dee2e6;   /* Agrega la línea horizontal inferior. */
  overflow: hidden; 
  margin: 0;                  /* Evita desbordamientos. */
}

.audifonos .audifono-detalle-01 {
  flex-direction: row;                /* Imagen a la izquierda y texto a la derecha. */
}

.audifonos .audifono-detalle-02 {
  flex-direction: row-reverse;        /* Texto a la izquierda e imagen a la derecha. */
}

.audifonos .audifono-det-img {
  flex: 0 0 50%;                      /* Ocupa exactamente la mitad del ancho. */
  display: flex;                      /* Permite centrar la imagen. */
  justify-content: center;            /* Centra horizontalmente la imagen. */
  align-items: center;                /* Centra verticalmente la imagen. */
  padding: 45px 40px;                 /* Agrega espacio alrededor de la imagen. */
  box-sizing: border-box;             /* Incluye el padding dentro del 50 %. */
}

.audifonos .audifono-detalle-01 .audifono-det-img {
  border-right: 1px solid #dee2e6;    /* Línea divisoria a la derecha de la imagen. */
  border-left: 0;                     /* Evita una segunda línea divisoria. */
}

.audifonos .audifono-detalle-02 .audifono-det-img {
  border-right: 0;                    /* Elimina la línea derecha heredada. */
}
.audifonos .audifono-detalle-02 .audifono-det-content {
  border-right: 1px solid #dee2e6;    /* Línea divisoria a la derecha de la imagen. */
}

.audifonos .audifono-det-img img {
  display: block;                     /* Elimina el espacio inferior de las imágenes inline. */
  width: 85%;                        /* Adapta la imagen al espacio disponible. */
  max-width: 325px;                   /* Limita el tamaño máximo de la imagen. */
  height: auto;                       /* Mantiene la proporción original. */
  object-fit: contain;                /* Evita que la imagen sea recortada. */
}

.audifonos .audifono-det-content {
  flex: 0 0 50%;                      /* Ocupa la otra mitad del bloque. */
  display: flex;                      /* Permite centrar verticalmente el contenido. */
  flex-direction: column;             /* Coloca título y texto uno debajo del otro. */
  justify-content: center;            /* Centra verticalmente el contenido. */
  padding: 45px 65px;                 /* Agrega espacio interior. */
  box-sizing: border-box;             /* Incluye el padding dentro del 50 %. */
  text-align: left;                   /* Alinea el contenido hacia la izquierda. */
}

.audifonos .audifono-det-content h2 {
  margin-top: 0;                      /* Elimina el margen superior predeterminado. */
  margin-bottom: 18px;                /* Separa el título del texto. */
}

.audifonos .audifono-det-content p {
  margin-bottom: 0;                   /* Elimina el margen inferior innecesario. */
  line-height: 1.5;                   /* Mejora la lectura del contenido. */
}

@media (max-width: 767.98px) {
  .audifonos .audifono-detalle-01,
  .audifonos .audifono-detalle-02 {
    flex-direction: column;           /* Coloca la imagen arriba y el texto abajo. */
  }

  .audifonos .audifono-det-img {
    flex: 0 0 auto;                   /* Elimina la división del 50 % de escritorio. */
    width: 100%;                      /* Ocupa todo el ancho disponible. */
    padding: 30px 20px;               /* Reduce el espacio interior. */
    border-left: 0 !important;        /* Elimina la línea vertical izquierda. */
    border-right: 0 !important;       /* Elimina la línea vertical derecha. */
    border-bottom:  0 !important; /* Agrega una división horizontal. */
  }

  .audifonos .audifono-det-img img {
    max-width: 260px;                 /* Reduce el tamaño de la imagen en móviles. */
  }

  .audifonos .audifono-det-content {
    flex: 0 0 auto;                   /* Elimina la división del 50 % de escritorio. */
    width: 100%;                      /* Ocupa todo el ancho disponible. */
    padding: 30px 25px;               /* Reduce el espacio interior del contenido. */
  }
.audifonos .audifono-detalle-02 .audifono-det-content {
  border-right: none
}
}

.audifonos-categoria {
  display: flex;                      /* Coloca el párrafo y el botón en la misma fila. */
  align-items: center;                /* Centra verticalmente ambos elementos. */
  justify-content: space-between;     /* Lleva el texto a la izquierda y el botón a la derecha. */
  gap: 1.5rem;                        /* Deja separación entre el texto y el botón. */
  border: 1px solid #223874;          /* Mantiene el borde actual. */
  border-radius: 25px;                /* Mantiene las esquinas redondeadas. */
  padding: 35px;                      /* Mantiene el espacio interno. */
  margin-bottom: 50px;                /* Mantiene la separación inferior. */
}

.audifonos-categoria p {
  flex: 0 1 85%;                      /* El texto ocupa hasta el 85% del contenedor. */
  margin: 0;                          /* Elimina el margen inferior predeterminado del párrafo. */
}

.audifonos-categoria .btn {
  flex: 0 0 auto;                     /* El botón conserva el ancho necesario para su contenido. */
  white-space: nowrap;                /* Evita que el texto del botón se corte en dos líneas. */
}

@media (max-width: 767.98px) {
  .audifonos-categoria {
    flex-direction: column;           /* Coloca el texto arriba y el botón debajo. */
    align-items: center;              /* Centra horizontalmente ambos elementos. */
    text-align: center;               /* Centra el texto dentro del contenedor. */
    gap: 1.25rem;                     /* Separa el párrafo del botón. */
    padding: 25px;                    /* Reduce el espacio interno en mobile. */
  }

  .audifonos-categoria p {
    flex: 0 0 auto;                   /* Elimina el ancho del 85% en mobile. */
    width: 100%;                      /* Hace que el texto use todo el ancho disponible. */
    text-align: center;               /* Centra específicamente el párrafo. */
  }

  .audifonos-categoria .btn {
    width: 100%;                      /* Hace que el botón ocupe todo el ancho disponible. */
    max-width: 320px;                 /* Evita que el botón sea demasiado ancho. */
    white-space: normal;              /* Permite que el texto baje de línea si fuera necesario. */
  }
}


/*///////////////// LISTADO DE ACCESORIOS ////////////////////////*/

.accesorios-list {
  border-top: 1px solid #dee2e6; 
  margin-bottom: 50px; 
}

.accesorios-list .accesorio {
  min-height: 420px;                         /* Mantiene una altura pareja entre todas las cajas. */
  display: flex;                             /* Activa Flexbox dentro de cada caja. */
  flex-direction: column;                    /* Coloca imagen, título y botón verticalmente. */
  align-items: center;                       /* Centra horizontalmente el contenido. */
  justify-content: flex-start;               /* Comienza el contenido desde la parte superior. */
  padding: 35px 30px 40px;                  /* Define el espacio interior de cada caja. */
  border-right: 1px solid #dee2e6;           /* Agrega la división vertical entre cajas. */
  border-bottom: 1px solid #dee2e6;          /* Agrega la división horizontal entre filas. */
  box-sizing: border-box;                    /* Incluye padding y bordes dentro del ancho. */
  text-align: center;                        /* Centra el título y el contenido textual. */
}

.accesorios-list .accesorio:nth-child(3n) {
  border-right: 0;                           /* Elimina el borde derecho en las cajas 3, 6, 9, etc. */
}

.accesorios-list .accesorio img {
  display: block;                            /* Elimina el espacio inferior propio de imágenes inline. */
  width: 100%;                               /* Permite que la imagen se adapte al ancho disponible. */
  max-width: 320px;                          /* Limita el ancho máximo de cada producto. */                         /* Unifica la altura visual de todas las imágenes. */
  object-fit: contain;                       /* Muestra la imagen completa sin recortarla. */
  object-position: center;                   /* Centra la imagen dentro del espacio definido. */
}

.accesorios-list .accesorio h2 {
  margin: 0;                          /* Separa el título del botón. */
  color: var(--heading-color);               /* Usa el color principal definido por la plantilla. */
  font-size: 34px;                           /* Aproxima el tamaño de la referencia. */
  font-weight: 600;                          /* Da presencia visual al nombre del accesorio. */
  line-height: 1.2;                          /* Evita demasiado espacio si el título ocupa dos líneas. */
}

.accesorios-list .accesorio-btn {
  width: 56px;                               /* Define un botón circular de ancho fijo. */
  height: 56px;                              /* Define un botón circular de alto fijo. */
  margin-top: auto;                          /* Empuja el botón hacia la parte inferior de la caja. */
  padding: 0;                                /* Elimina el padding rectangular de Bootstrap. */
  display: inline-flex;                      /* Permite centrar el signo dentro del botón. */
  align-items: center;                       /* Centra verticalmente el signo más. */
  justify-content: center;                   /* Centra horizontalmente el signo más. */
  border-radius: 50%;                        /* Convierte el botón en un círculo. */
  font-size: 27px;                           /* Define el tamaño del signo más. */
  font-weight: 500;                          /* Mejora la visibilidad del signo más. */
  line-height: 1;                            /* Evita desplazamientos verticales del signo. */
  box-shadow: 0 2px 3px rgb(0 0 0 / 18%);   /* Agrega la sombra suave visible en la referencia. */
}

.accesorios-list .accesorio-btn:hover {
  box-shadow: inset 1px 2px 3px 0px rgba(0, 0, 0, 0.20);
  color: #223874;
  background: #E2EDFF;  
  border: solid 1px #fff;
}

@media (max-width: 767.98px) {
.accesorios-list .accesorio {
  border-right: none;
}
}

/*///////////////// MODAL DE ACCESORIOS ////////////////////////*/

.accesorio-modal .modal-content {
  overflow: hidden;                              /* Respeta las esquinas redondeadas. */
  background-color: #fff;                        /* Define el fondo blanco. */
  border: 0;                                     /* Elimina el borde predeterminado. */
  border-radius: 28px;                           /* Redondea las esquinas. */
  box-shadow: 0 4px 8px rgb(0 0 0 / 22%);        /* Agrega una sombra suave. */
}

.accesorio-modal .modal-header {
  position: relative;                            /* Permite posicionar el botón de cierre. */
  display: flex;                                 /* Activa Flexbox. */
  justify-content: center;                       /* Centra el título horizontalmente. */
  align-items: center;                           /* Centra los elementos verticalmente. */
  min-height: 76px;                              /* Mantiene una altura estable. */
  padding: 20px 65px;                            /* Reserva espacio para título y cierre. */
  border-bottom: 1px solid #dee2e6;              /* Agrega la línea divisoria. */
}

.accesorio-modal .modal-title {
  margin: 0;                                     /* Elimina márgenes predeterminados. */
  color: var(--heading-color);                   /* Usa el color principal del sitio. */
  font-size: 1.7rem;                               /* Define el tamaño del título. */
  font-weight: 600;                              /* Resalta el título. */
  line-height: 1.25;                             /* Mantiene una altura compacta. */
  text-align: center;                            /* Centra el texto. */
}

.accesorio-modal .accesorio-modal-cerrar {
  position: absolute;                            /* Posiciona el cierre independientemente. */
  top: 45px;
  color:#223874;                                      /* Lo ubica en el centro vertical. */
  right: 28px;                                   /* Lo separa del borde derecho. */
  width: 18px;                                   /* Define el ancho. */
  height: 18px;                                  /* Define el alto. */
  padding: 0;                                    /* Elimina padding predeterminado. */
  transform: translateY(-50%);                   /* Corrige el centrado vertical. */
  background-size: 14px;                         /* Ajusta el tamaño de la cruz. */
  opacity: 1;                                    /* Mantiene la cruz visible. */
  box-shadow: none;                              /* Elimina sombras de foco. */
}

.accesorio-modal .accesorio-modal-cerrar:focus {
  box-shadow: none;                              /* Elimina el resplandor de Bootstrap. */
}

.accesorio-modal .modal-body {
  padding: 30px 55px 42px;                       /* Define el espacio interior. */
  color: var(--default-color);                   /* Usa el color general del texto. */
  font-size: 1.1rem;                               /* Define el tamaño del cuerpo. */
  line-height: 1.45;                             /* Mejora la legibilidad. */
  text-align: left;                              /* Alinea el contenido a la izquierda. */
}

.accesorio-modal .modal-body p {
  margin: 0 0 18px;                              /* Separa los párrafos. */
}

.accesorio-modal .accesorio-modal-subtitulo {
  margin-top: 4px;                               /* Agrega separación superior. */
  margin-bottom: 14px;                           /* Separa el subtítulo de la lista. */
  font-weight: 500;                              /* Resalta el subtítulo. */
}

.accesorio-modal .modal-body ul {
  margin: 0;                                     /* Elimina márgenes predeterminados. */
  padding-left: 20px;                            /* Reserva espacio para las viñetas. */
}

.accesorio-modal .modal-body li {
  margin-bottom: 3px;                            /* Separa ligeramente los elementos. */
  padding-left: 3px;                             /* Separa el texto de la viñeta. */
}

.accesorio-modal .modal-body li:last-child {
  margin-bottom: 0;                              /* Elimina el espacio del último elemento. */
}

@media (max-width: 767.98px) {
  .accesorio-modal .modal-dialog {
    margin: 20px 15px;                           /* Separa el modal de los bordes de pantalla. */
  }

  .accesorio-modal .modal-content {
    border-radius: 22px;                         /* Reduce el radio en mobile. */
  }

  .accesorio-modal .modal-header {
    min-height: 70px;                            /* Reduce la altura del encabezado. */
    padding: 18px 55px 18px 25px;                /* Reserva espacio para el cierre. */
  }


  .accesorio-modal .accesorio-modal-cerrar {
    right: 22px;                                 /* Ajusta la posición del cierre. */
  }

  .accesorio-modal .modal-body {
    padding: 25px 25px 32px;                     /* Reduce el padding lateral. */                       /* Reduce ligeramente el texto. */
  }
}