* {

  margin: 0;

  padding: 0;

}



#overlay {

  display: none;

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  background: rgba(0, 0, 0, 0.5);

  z-index: 998;

}



/* Botón de Ver productos */

#showProductsBtnMarca {

  display: none;

  background-color: #efefef; /* azul llamativo */

  color: #000;

  opacity: 0;

  pointer-events: none; /* Evita que el botón sea clickeable cuando está invisible */

  transition: opacity 0.3s ease-in-out; /* Animación de fade */

}



#showProductsBtnMarca.show {

  opacity: 1;

  pointer-events: auto; /* Permite que el botón sea clickeable cuando está visible */

}



/* Botón de Limpiar filtro */

#clearFiltersBtn {

  background-color: #a2121d;

  color: #fff;

  border: 1px solid #ddd;

  opacity: 0;

  pointer-events: none; /* Evita que el botón sea clickeable cuando está invisible */

  transition: opacity 0.3s ease-in-out; /* Animación de fade */

}



#clearFiltersBtn.show {

  opacity: 1;

  pointer-events: auto; /* Permite que el botón sea clickeable cuando está visible */

}



.img-portada-nakamichi {

  background-image: url('https://protech.com.mx/img/portadas/portada-nakamichi.png'); /* Cambia la ruta */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  min-height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 40px 20px;

  color: white;

  position: relative;

}



.img-portada-evox {

  background-image: url('https://protech.com.mx/img/portadas/portada-evox.png'); /* Cambia la ruta */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  min-height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 40px 20px;

  color: white;

  position: relative;

}



.img-portada-rockseries {

  background-image: url('https://protech.com.mx/img/portadas/portada-rockseries.png'); /* Cambia la ruta */

  background-size: cover;

  background-position: center;



  background-repeat: no-repeat;



  min-height: 400px;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  padding: 40px 20px;



  color: white;



  position: relative;



}







.img-portada-audiolabs {



  background-image: url('https://protech.com.mx/img/portadas/portada-audiolabs.png'); /* Cambia la ruta */



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  min-height: 400px;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  padding: 40px 20px;



  color: white;



  position: relative;



}







.img-portada-mtx {



  background-image: url('https://protech.com.mx/img/portadas/portada-mtx.png'); /* Cambia la ruta */



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  min-height: 400px;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  padding: 40px 20px;



  color: white;



  position: relative;



}







.img-portada-treo {



  background-image: url('https://protech.com.mx/img/portadas/portada-treo.png'); /* Cambia la ruta */



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  min-height: 400px;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  padding: 40px 20px;



  color: white;



  position: relative;



}







.img-portada-atomic {



  background-image: url('https://protech.com.mx/img/portadas/portada-atomic.png'); /* Cambia la ruta */



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  min-height: 400px;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  padding: 40px 20px;



  color: white;



  position: relative;



}







#downloadPdfBtn {



    background-color: #a2121d; /* Un color rojo para la descarga */



    color: white;



    border: none;



    margin-left: 53px;



    padding: 10px 15px;



    border-radius: 5px;



    cursor: pointer;



    font-weight: bold;



    transition: background-color 0.3s ease;



}







#downloadPdfBtn:hover {



    background-color: #c82333;



}







.pagination-container-marca {



    display: flex; /* Usa Flexbox para alinear los elementos en una fila */



    justify-content: center; /* Centra los botones y números horizontalmente */



    align-items: center; /* Alinea verticalmente los elementos */



    margin-top: 85px; /* Más espacio superior para separar del contenido */



    margin-bottom: 40px; /* Espacio inferior para la sección */



    padding: 10px; /* Un poco de padding alrededor */



    border-radius: 8px; /* Bordes redondeados */



    gap: 8px; /* Espacio entre los botones y los números */



}







/* --- Estilo para los botones "Anterior" y "Siguiente" --- */



.pagination-btn {



    padding: 12px 20px; /* Más padding para hacerlos más fáciles de clickear */



    background-color: #e9ecef; /* Color primario azul */



    color: #34495e; /* Texto blanco para contraste */



    border: none; /* Sin borde por defecto */



    border-radius: 6px; /* Bordes ligeramente redondeados */



    cursor: pointer; /* Indica que es clickeable */



    font-size: 1em; /* Tamaño de fuente legible */



    font-weight: 600; /* Texto seminegrita */



    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Transiciones suaves */



    min-width: 90px; /* Ancho mínimo para mantener la consistencia */



    text-align: center;



}







.pagination-btn:hover:not(:disabled) {



    background-color: #f1171c; /* Azul más oscuro al pasar el ratón */



    transform: translateY(-2px); /* Pequeño efecto de elevación */



    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al pasar el ratón */



    color: #fff;



}







.pagination-btn:active:not(:disabled) {



    transform: translateY(0); /* Vuelve a su posición original al hacer clic */



    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra más pequeña al hacer clic */



}







.pagination-btn:disabled {



    background-color: #cccccc; /* Gris para botones deshabilitados */



    color: #666666; /* Texto más oscuro para deshabilitado */



    cursor: not-allowed; /* Cursor de "no permitido" */



    opacity: 0.7; /* Ligeramente transparente */



    box-shadow: none; /* Sin sombra cuando está deshabilitado */



    transform: none; /* Sin transformación */



}







/* --- Estilo para los números de página --- */



.pagination-numbers {



    display: flex; /* Usa Flexbox para los números también */



    gap: 5px; /* Espacio entre los números */



    margin: 0 10px; /* Espacio a los lados del grupo de números */



}







.pagination-numbers span {



    padding: 10px 14px;



    background-color: #e9ecef;



    color: #34495e;



    border-radius: 6px;



    cursor: pointer;



    font-size: 1em;



    font-weight: 500;



    transition: background-color 0.3s ease, color 0.3s ease;



    min-width: 35px;



    text-align: center;



    /* --- NUEVO: Estilo para los '...' --- */



    user-select: none; /* Evita que el texto '...' sea seleccionable */



}







.pagination-numbers span.active {



    background-color: #a2121d; /* Color primario azul para la página activa */



    color: white; /* Texto blanco para la página activa */



    font-weight: bold; /* Negrita para la página activa */



    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.3); /* Sombra suave para la página activa */



}







.pagination-numbers span:hover:not(.active) {



    background-color: #1a171780; /* Fondo ligeramente más oscuro al pasar el ratón */



    color: #fff; /* Texto un poco más oscuro al pasar el ratón */



}







.pagination-numbers span.ellipsis {



    background-color: transparent; /* Fondo transparente para los '...' */



    cursor: default; /* No es clickeable */



    padding: 10px 5px; /* Menor padding para que no se vean como números */



    color: #7f8c8d; /* Color más suave */



    font-weight: bold; /* Opción para que se vea más notorio */



}







.pagination-numbers span.ellipsis:hover {



    background-color: transparent; /* No cambia al pasar el ratón */



    color: #7f8c8d;



}







.contact-section {



    padding: 80px 0;



    background-color: #f8f8f8;



}







.contact-container {
    max-width: 90%;
    margin: 10% auto;
    display: flex;
    gap: 40px; /* Espacio entre las dos columnas principales */
    align-items: flex-start; /* Alinea las columnas arriba */
}







/* Columna Izquierda: Información de Contacto */



.contact-info-column {



    flex: 1; 



    background-color: #fff;



    border-radius: 8px;



    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);



    display: flex;



    flex-direction: column; 



    gap: 0;



}







.info-block-link {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 40px 30px; 



    border-bottom: 1px solid #eee;



    text-decoration: none;



    transition: background-color 0.3s;



}







.info-block-link:hover {



    background-color: #f0f0f0;



}







.contact-info-column .info-block-link:nth-last-child(2) {



    border-bottom: none;



}







.info-text-group {



    display: flex;



    flex-direction: column;



    margin-right: 15px;



}







/* Bloque individual de información (Teléfono, Correo, Dirección) */



.info-block {



    padding-bottom: 15px;



    border-bottom: 1px solid #eee;



}







.info-block:last-child {



    border-bottom: none; /* Elimina la línea divisoria del último bloque */



    padding-bottom: 0;



}







.info-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}


.info-content {
    display: block;
    color: #000;
    font-size: 14px;
}


.info-icon {
    font-size: 1.5rem;
    color: #B61216;
    flex-shrink: 0;
}


.social-block {



    padding: 15px 30px; 



}







.info-link {



    display: block; /* Hace que el enlace ocupe toda la línea */



    color: #a1121d; /* Usando tu color de acento */



    text-decoration: none;



    font-size: 1rem;



    transition: color 0.3s;



}







.info-link:hover {



    color: #000;



}







/* Bloque de Redes Sociales */

.social-icons-container {
    display: flex;
    gap: 15px; /* Espacio entre los iconos */
    margin-top: 10px;
    margin-bottom: 5%;
}

.social-icons-container a {
    font-size: 1.5rem; /* Tamaño de los iconos */
    color: #555;
    transition: color 0.3s;
}

.social-icons-container a:hover {
    color: #a1121d; /* Color de acento al pasar el ratón */
}

/* Columna Derecha: Formulario */



.contact-form-column {
    flex: 1; /* Ocupa la otra mitad del espacio */
    width: 100%;
    /* Aquí se aplicarían los estilos de tu formulario que ya tienes */
}

.contact-form {
  margin: 0;
  padding: 0 50px;
  background: #f9f9f9;
  border-radius: 5px;
}

.form-general {
  margin-top: 0;
}

.input-row {
  display: flex;
  gap: 20px;
  margin-bottom: 5%;
}


.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.input-group.input-distribuidor {
  margin-bottom: 12%;
}

.input-group label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #000000c7;
}

.input-group input {
    padding: 10px;
    margin: 2% 0;
    font-size: 14px;
    border: 1px solid #B3B3B3B5;
    border-radius: 20px;
    background: #fff;
}


.input-group textarea {
    padding: 10px;
    margin: 2% 0;
    font-size: 14px;
    border: 1px solid #B3B3B3B5;
    border-radius: 20px;
    background: #fff;
}

.input-group input:focus,
.input-group textarea:focus {
  border-color: #007bff;
  outline: none;
}

input::placeholder, 
textarea::placeholder {
  color: #00000075;
}

.full-width {
  margin-bottom: 5%;
}

/* mensajes de error */

.input-group small {
  color: #dc3545;
  display: none;
}


/* validación visual */

input.error, textarea.error {
  border-color: #dc3545;



  background-color: #fff0f0;



}







input.success, textarea.success {



  border-color: #28a745;



  background-color: #f0fff5;



}







/* botón */



button[type="submit"] {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 10px;
  transition: .5s ease;
}


button[type="submit"]:hover {
  background-color: #151515b1;
}











input[type="file"]::file-selector-button {



  background-color: #e5191e;



  color: white;



  border: none;



  padding: 10px 14px;



  border-radius: 4px;



  cursor: pointer;



  font-weight: 500;



  transition: background-color 0.3s ease;



}







input[type="file"]::file-selector-button:hover {



  background-color: #e5191e;



}







input[readonly] {



  background-color: #f5f5f5;



  color: #333;



  cursor: not-allowed;



}







/* mensajes */



.message.success {



  margin-top: 15px;



  color: #155724;



  background: #d4edda;



  padding: 10px;



  border-radius: 5px;



}







.message.error {



  margin-top: 15px;



  color: #721c24;



  background: #f8d7da;



  padding: 10px;



  border-radius: 5px;



}







.feature-section {



  padding: 40px 20px;



  background-color: #f9f9f9;



}







.feature-grid {



  display: flex;



  flex-wrap: initial;



  gap: 20px;



  max-width: 1200px;



  margin: 0 auto;



}







.feature-item {



  flex: 0 0 25%; /* 4 columnas exactas */



  box-sizing: border-box;



  background-color: #fff;



  padding: 20px;



  border-radius: 10px;



  box-shadow: 0 0 10px rgba(0,0,0,0.05);



}







.feature-item h3 {



  margin-bottom: 17%;



  font-size: 20px;



  color: #333;



}







.feature-item p {



  font-size: 16px;



  color: #555;



}







.social-icons {



  display: flex;



  gap: 15px;



  margin-top: 10px;



  flex-wrap: wrap;



}







.social-icons a {



  font-size: 22px;



  color: #333;



  transition: color 0.3s ease;



}







.social-icons a:hover {



  color: #e5191e; /* azul Bootstrap */



}







.logo-section {



  padding: 33px 0;



  background-color: #f9f9f9;



  text-align: center;



  height: 15vh;



  margin: 4% auto 0 auto;



  width: 100%;



}







.logo-container {



  display: flex;



  justify-content: center;



  align-items: center;



}







.logo-img {



  max-width: 15%;



  height: auto;



}







.form-section {



  padding: 60px 20px;



  background-color: #fff;



}







.form-container {



  display: flex;



  flex-wrap: initial;



  gap: 40px;



  max-width: 85%;



  margin: 0 auto;



}







.form-text,



.form-fields {



  flex: 1 1 50%;



}







.form-text {





  flex-direction: column;



  justify-content: center;



  font-size: 1.1rem;



  color: #333;



  line-height: 1.6;



}







.form-text p {



  width: auto;



  font-size: 16px;



  margin: 1% 0;



  line-height: 30px;



  text-align: justify;



}







.form-text p span {



  font-weight: bold;



}







.form-fields {



  display: flex;



  flex-direction: column;



}







select {



  width: 100%;



  padding: 0.5rem;



  border-radius: 5px;



  border: 1px solid #ccc;



  font-size: 1rem;



}







.product-detail-wrapper-buscar {



    margin-top: 5%;



    padding: 60px 0;



    background-color: #ffffff;



}







.product-detail-container-buscar {



    max-width: 90%;



    margin: 0 auto;



    display: flex;



    gap: 40px;



}







.product-image-column-buscar {



    flex: 1;



    display: flex; 



    flex-direction: column;



}







.product-info-column-buscar {



    flex: 1;



    padding-top: 15px;



}







.main-image-container-buscar {



    border: 1px solid #e0e0e0;



    border-radius: 6px;



    margin-bottom: 20px;



    overflow: hidden;



}







#mainProductImage {



    width: 80%;



    margin: auto;



    height: auto;



    display: block;



    object-fit: contain;



    transition: opacity 0.3s ease;



}







.thumbnail-gallery-buscar {



    display: flex;



    gap: 10px;



    overflow-x: auto;



    padding-bottom: 10px;



}







.thumbnail-gallery-buscar::-webkit-scrollbar {



    height: 6px;



}







.thumbnail-gallery-buscar::-webkit-scrollbar-thumb {



    background: #ccc;



    border-radius: 3px;



}







.product-thumbnail-buscar {



    width: 80px;



    height: 80px;



    object-fit: cover;



    border: 2px solid transparent;



    border-radius: 4px;



    cursor: pointer;



    opacity: 0.7;



    transition: all 0.2s ease;



    flex-shrink: 0;



}







.product-thumbnail-buscar:hover {



    opacity: 1;



    border-color: #a1121d;



}







.product-thumbnail.active-thumb-buscar {



    opacity: 1;



    border-color: #a1121d;



}







.product-specs-table-buscar {



    font-family: 'PoppinsFuente';



    width: 100%;



    border-collapse: collapse;



    margin-top: 15px;



    font-size: 0.95rem;



}







.product-specs-table-buscar tr:nth-child(even) {



    background-color: #f7f7f7;



}







.product-specs-table-buscar tr:first-child td {



    border-top: none;



}







.product-specs-table-buscar td {



    padding: 12px 15px;



    border-bottom: 1px solid #eee;



    text-align: left;



}







.product-specs-table-buscar tr td:first-child {



    font-weight: 600;



    color: #333;



}







.product-specs-table-buscar h2 {



    font-size: 1.5rem;



    margin-bottom: 0;



    color: #a1121d;



}







.spec-feature-buscar {



    font-weight: 700 !important;



    background-color: #e9e9e9;



    color: #000 !important;



    text-align: center !important;



}







.general-description-text-buscar {



    /* 1. Espaciado y Margen */



    margin-top: 30px; /* Margen superior para separarlo claramente de la tabla */



    padding-top: 15px; /* Relleno interno para la posible línea divisoria */



    border-top: 1px solid #ddd; /* Línea divisoria sutil para marcar la nueva sección */



    padding-bottom: 5px;







    /* 2. Tipografía y Legibilidad */



    font-size: 1rem;



    line-height: 1.7; /* Aumenta el espacio entre líneas para mejor lectura */



    color: #444; /* Color de texto más suave que el título, pero legible */



    



    /* 3. Asegurar el formato */



    /* Usamos 'pre-wrap' para respetar los espacios y saltos de línea (\n convertidos a <br>) */



    white-space: pre-wrap; 



}







/* Opcional: Estilo para las primeras palabras (si quieres destacarlas) */



.general-description-text-buscar strong {



    font-weight: 700;



    color: #222;



}







.general-features-list-buscar {



    margin-top: 25px;



    padding-top: 15px;



    border-top: 1px solid #ddd;



}







.general-features-list-buscar h3 {



  font-family: 'PoppinsFuente';



    font-size: 1.2rem;



    color: #333;



    margin-bottom: 10px;



}







.unparsed-list-buscar {
  font-family: 'PoppinsFuente';
    list-style: disc; /* Viñeta estándar */
    margin: 5% 0;
    padding-left: 20px; /* Sangría para las viñetas */
}







.unparsed-list-buscar li {



    font-size: 0.95rem;



    line-height: 1.6;



    color: #444;



    margin-bottom: 5px;



}







button#exportPdfButton {
    width: 100%;
    margin: 5% 0;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 50px!important;
    border: none;
    background: #a2121d;
    color: #fff;
}



div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {

  background-color: #B61216!important;

}



@media (max-width: 768px) {



    .product-detail-container-buscar {



        flex-direction: column;



        padding: 0 15px;



        gap: 20px;



    }







    .product-image-column-buscar, 



    .product-info-column-buscar {



        flex: 1 1 100%;



    }



    



    .thumbnail-gallery-buscar {



        width: 100%;



        justify-content: flex-start;



    }



    



    .product-thumbnail-buscar {



        width: 60px;



        height: 60px;



    }







    .product-detail-container-buscar {



        flex-direction: column;



        padding: 0 15px;



        gap: 20px;



    }







    .product-image-column-buscar, 



    .product-info-column-buscar {



        flex: 1 1 100%;



    }



    



    .thumbnail-gallery-buscar {



        width: 100%;



        justify-content: flex-start;



    }



    



    .product-thumbnail-buscar {



        width: 60px;



        height: 60px;



    }







    .product-detail-wrapper-buscar {



      margin-top: 15%;



    }



}







@media (min-width: 1025px) {



  #filterPanelMarca {



    position: sticky;



    top: 100px;



  }



}







@media (max-width: 1024px) {



  



  .left-column {



    position: fixed;



    top: 0;



    left: -1000px; /* oculto fuera de pantalla */



    width: 70%;



    height: 100%;



    z-index: 1000;



  }







  .left-column.open {



    left: 0;



  }







  .feature-grid {



  flex-wrap: wrap;



}







  .feature-item {



    flex: 0 0 50%;



  }







  #showProductsBtnMarca {



    display: block;



  }



}







/* --- Media Queries para Responsividad --- */



@media (max-width: 768px) {



  .pagination-container-marca {



      flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben */



      justify-content: center; /* Centra los elementos */



      gap: 10px; /* Ajusta el espacio */



      margin-top: 20px;



      margin-bottom: 20px;



      padding: 8px;



  }



  .pagination-btn {



      padding: 10px 15px; /* Menor padding en pantallas pequeñas */



      font-size: 0.9em;



      min-width: 70px;



  }



  .pagination-numbers span {



      padding: 8px 12px; /* Menor padding para los números */



      font-size: 0.9em;



      min-width: 30px;



  }







  .img-portada-evox,



  .img-portada-rockseries,



  .img-portada-audiolabs,



  .img-portada-mtx,



  .img-portada-treo,



  .img-portada-atomic,



  .img-portada-nakamichi {



    margin: 17% 0!important;



    min-height: 8vh!important;



  }







  .container-filter-marca {



    margin: 0 auto!important;



  }







    .container-contacto {



    width: 73%;



    margin: 25% auto;



  }







  .input-row {



    flex-direction: column;



  }







  .feature-item {



    flex: 0 0 100%;



  }







  .form-text,



  .form-fields {



    flex: 1 1 100%;



  }







    .form-container {



    flex-wrap: wrap;



    max-width: 90%;



  }







  .logo-section {



    padding: 33px 0;



    background-color: #f9f9f9;



    text-align: center;



    height: 9vh;



    margin: 15% auto 0 auto;



    width: 100%;



  }







  .form-section {



    padding: 0;



  }







  .contact-form {



    max-width: 100%;



    margin: 0;



    padding: 5% 0;



  } 







  .form-text, .form-fields {



      flex: 1 1 73%;



      width: 100%;



      margin: 15% auto;



    }







  .logo-img {



    max-width: 30%;



  }







  .contact-container {



        flex-direction: column-reverse;



        padding: 0 15px;



        gap: 20px;



    }







    .contact-info-column,



    .contact-form-column {



        flex: 1 1 100%; /* Ocupan todo el ancho */



    }







    .contact-section {



      padding: 0;



    }







}







@media (max-width: 480px) {



    .pagination-container {



        flex-direction: initial; /* Apila los botones y números verticalmente */



        gap: 15px; /* Más espacio entre los grupos apilados */



    }



    .pagination-numbers {



        margin: 0; /* Elimina margen horizontal si se apilan */



        justify-content: center; /* Centra los números si están en una fila */



        flex-wrap: wrap; /* Asegura que los números también se envuelvan si hay muchos */



    }



}