/**{
margin: 0;
padding: 0;
}*/

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #000000;
  color: white;
  margin: 0;
  text-align: center;
  padding-bottom: 0%;

}

html {
  scroll-behavior: smooth;
}

/*PUNTO SUBTITULO-TRON ES EL SUBTITULO DE LA TIENDA*/

/* REEMPLÁZALO POR ESTE BLOQUE CORRECTO */
.subtitulo-tron {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(12px, 4vw, 18px); /* Letra inteligente: se ajusta sola al tamaño del celular */
  font-weight: bold;
  text-align: center;
  letter-spacing: 2px;
  color: #ffffff;
  border: 2px solid transparent;
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block; /* Evita que ocupe todo el ancho si no es necesario */
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}

.subtitulo-tron:hover {
  text-shadow:
    0 0 10px #ffffff,
    0 0 20px #ffffff,
    0 0 40px #ffffff;
  border-color: #00ffff;
  background: #00e5ff;
  color: #000;
  box-shadow:
    0 0 15px #00e5ff,
    0 0 30px #00bfff;
  /* Eliminamos el scale(1.5) para que no se deforme ni se corra de la pantalla */
}



.nav1 {
  margin-bottom: 10px;
  justify-content: space-between;
  align-items: center;
  word-spacing: 10px;


}

nav a {
  color: #ffffff;
  font-size: 15px;
  text-shadow:
    0 0 5px #ff8800,
    0 0 10px #ff8800,
    0 0 20px #ff8800,
    0 0 40px #ff6600;

  transition: .3s;
}

nav a:hover {
  transform: scale(1.08);

  text-shadow:
    0 0 10px #ff8800,
    0 0 20px #ff8800,
    0 0 40px #ff6600,
    0 0 80px #ff4400;


}

h1 {
  margin: 20px;
}

/*# UNICO ES EL ID DEL NOMBRE PRINCIPAL*/

#unico {
  transition: all 0.3s ease;
  cursor: pointer;
  color: #fff;
  -webkit-box-reflect: below 0px linear-gradient(transparent,
      rgba(255, 255, 255, 0.25));

  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 700;
  color: #9eefff;
  letter-spacing: 8px;

  text-shadow:
    0 0 5px #00bfff,
    0 0 10px #00bfff,
    0 0 20px #00bfff,
    0 0 40px #00bfff,
    0 0 80px #00bfff,
    0 0 120px #00bfff;

  animation: neonPulse 2s infinite;

}

@keyframes neonPulse {

  0%,
  100% {
    text-shadow:
      0 0 5px #00bfff,
      0 0 10px #00bfff,
      0 0 20px #00bfff,
      0 0 40px #00bfff,
      0 0 80px #00bfff;
  }

  50% {
    text-shadow:
      0 0 10px #00e5ff,
      0 0 20px #00e5ff,
      0 0 40px #00e5ff,
      0 0 80px #00e5ff,
      0 0 160px #00e5ff;
  }
}



#unico:hover {
  transform: scale(1.3);


}

/* ==========================================
   Efecto Bolsas Tron Neón (Título Principal)
   ========================================== */

#unico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px;
  color: #00f3ff;
  text-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
}

.bolsa-tron {
  display: inline-block;
  vertical-align: middle;
  stroke: #00f3ff !important;
  filter: drop-shadow(0 0 5px #00f3ff) drop-shadow(0 0 12px #00f3ff);
  animation: latidoTron 2s infinite ease-in-out;
}

@keyframes latidoTron {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px #00f3ff) drop-shadow(0 0 8px #00f3ff);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px #00f3ff) drop-shadow(0 0 22px #00f3ff);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px #00f3ff) drop-shadow(0 0 8px #00f3ff);
    opacity: 0.85;
  }
}

/*AQUI TERMINA EL # UNICO QUE ES EL NOMBRE PRINCIPAL DE LA PAGINA*/

/* GALERÍA */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.hr1 {
  box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #fff;

}

.hr2 {
  box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #fff;
}

.hr3 {
  box-shadow: 0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px #fff;
}

/*AQUI COMIENZAN LAS TARJETAS */

/* ==========================================================================
   TARJETAS TRON OPTIMIZADAS (ESPACIADO DE TÍTULOS LARGOS CORREGIDO)
   ========================================================================== */

.card {
  background: transparent !important; /* Quita el tono oscuro y deja ver el fondo negro limpio */
  text-align: center;
  padding: 15px;
  border-radius: 14px;
  width: 100%;
  max-width: 280px;
  
  /* Mantienes el borde cian palpitante */
  border: 2px solid #00d2ff;
  animation: tarjetaPalpito 3s infinite ease-in-out;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  
  margin: auto;
  color: #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
}

/* Efecto Hover: Al pasar el cursor, la tarjeta se eleva y resplandece en cian puro */
/* En el Hover (al pasar el dedo o el mouse), le das un destello cian suave */
.card:hover {
  transform: translateY(-5px) scale(1.03);
  background: rgba(0, 255, 255, 0.05) !important; /* Brillo cian muy sutil al tocarla */
  border-color: #00ffff;
  box-shadow: 0 0 30px #00ffff,
              inset 0 0 15px rgba(0, 255, 255, 0.2);
}
/* Ajuste de la imagen dentro de la tarjeta transparente */
.card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(0, 210, 255, 0.3);
}

/* Título de la tarjeta en fuente Orbitron futurista */
.card h3 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  margin: 5px 0;
  padding: 0 5px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  letter-spacing: 1px;
}

/* Estilo del precio */
/* 2. Precio del Producto */
.card p {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 4px 0;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}


/*BOTON AGREGAR*/

.card button {
  background: black;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

/* 3. Botón Agregar / Sin Stock */
/* 1. Botón Agregar NORMAL (Tarjetas generales) */
.card button,
.card .btn-agregar {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Efecto Hover: Neón Blanco Brilante e Intenso */
.card button:hover:not(:disabled),
.card .btn-agregar:hover:not(:disabled) {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 0 15px #ffffff, 0 0 30px #ffffff, 0 0 45px #ffffff !important;
  transform: scale(1.04);
}

/* 2. Exclusivo para la Rejilla de DESTACADOS (Color Ámbar / Dorado) */
.contenedor-destacados-grid .card button,
.contenedor-destacados-grid .btn-agregar {
  color: #ffaa00 !important;
  border-color: #ffaa00 !important;
  box-shadow: 0 0 10px rgba(255, 170, 0, 0.4) !important;
}

.contenedor-destacados-grid .card button:hover:not(:disabled),
.contenedor-destacados-grid .btn-agregar:hover:not(:disabled) {
  background: #ffaa00 !important;
  color: #000000 !important;
  box-shadow: 0 0 15px #ffaa00, 0 0 30px #ffaa00, 0 0 45px #ffaa00 !important;
  transform: scale(1.04);
}

/* 4. Estado de Inventario (Disponible / Agotado) */
.card .stock {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 6px;
  color: #00ff88;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.5);
}

.card .stock.agotado {
  color: #ff0055 !important;
  text-shadow: 0 0 8px #ff0055;
}

.card button:hover {
  background: white;
  color: black;

  transform: scale(1.08);

  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff;
}

.card button:active {
  transform: scale(0.95);
}




/* AQUI TERMINA EL BOTON AGREGAR*/

/*AQUI TERMINAN LAS TARJETAS*/

/* CONTENEDOR DE IMAGEN */

.img-contenedor {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* IMAGEN DE LAS TARJETAS*/

.img-contenedor img:active {
  width: 100%;
  display: block;
  transition: 0.4s ease;
  cursor: pointer;
  transform: scale(0.95);

}

/* DESCRIPCION DE LAS TARJETAS*/

.descripcion-hover {
  position: absolute;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .90);
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0px;
  font-size: 12px;
  transition: 0.4s ease;
  pointer-events: none;
  line-height: 1.6;
}

/* EFECTO HOVER DE LAS TARJETAS */

.img-contenedor:hover .descripcion-hover {
  bottom: 0;
}

.img-contenedor:hover img {
  transform: scale(1.1);
}

/* CARRITO */

.carrito-icono {
  position: relative;
  background: rgba(5, 7, 10, 0.9);
  width: 280px;
  margin: 25px auto;
  padding: 10px 15px;
  border-radius: 14px;
  font-size: 24px;
  font-family: 'Orbitron', sans-serif;
  color: #00ffff;
  
  /* Borde e iluminación Neón Cian de Alta Energía */
  border: 2px solid #00ffff;
  box-shadow: 
    0 0 10px #00ffff,
    0 0 20px rgba(0, 255, 255, 0.5),
    inset 0 0 10px rgba(0, 255, 255, 0.3);
    
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Animación de rebote cuando se agrega un producto */
.carrito-icono.animar {
  animation: pulsoEnergia 0.4s ease-in-out;
}

@keyframes pulsoEnergia {
  0% { transform: scale(1); }
  50% { 
    transform: scale(1.15); 
    box-shadow: 0 0 30px #00ffff, 0 0 50px #00ffff; 
  }
  100% { transform: scale(1); }
}

/* ITEMS */
.carrito li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*separa izquierda y derecha*/
  gap: 10px;
  background: #f1f1f1;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 8px;
}

.carrito img {
  width: 40px;
  border-radius: 5px;
}

.info {
  flex: 1;
  text-align: left;
}

.controles {
  display: flex;
  align-items: center;
  gap: 5px;
}

.carrito button {
  margin: 2px;
  padding: 5px;
}

/* Efecto Hover: Cambia a Neón Ámbar TRON al pasar el mouse */
.carrito-icono:hover {
  transform: translateY(-4px) scale(1.03);
  color: #ffffff;
  border-color: #ffaa00;
  background: rgba(13, 17, 23, 0.95);
  box-shadow: 
    0 0 15px #ffaa00,
    0 0 35px rgba(255, 170, 0, 0.6),
    inset 0 0 15px rgba(255, 170, 0, 0.3);
}



/*ESTOS SON LA LISTA O LOS ITEM QUE TIENE CARRITO*/
.item-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2a2a2a;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  gap: 10px;
}

/* LISTA SCROLL DE CARRITO*/
#lista-carrito {
  overflow-y: auto;
  max-height: 200px;
  /* aquí hace scroll */

}

#lista-carrito::-webkit-scrollbar {
  width: 8px;
}

#lista-carrito::-webkit-scrollbar-thumb {
  background: #00d4ff;
  border-radius: 20px;
}

/* TOTAL */
#total {
  font-weight: bold;
  color: #00BFFF;
  text-shadow:
    0 0 10px #00BFFF,
    0 0 0px #00BFFF,
    0 0 0px #00BFFF,
    0 0 0px #00BFFF;

}

#total-final {
  font-weight: bold;
  font-size: 20px;
  color: #00BFFF;
  text-shadow:
    0 0 10px #00BFFF,
    0 0 0px #00BFFF,
    0 0 0px #00BFFF,
    0 0 0px #00BFFF;
}

/* PIE DE PAGINA FOOTER */
/* ==========================================
   FOOTER TRON NEÓN MEJORADO
   ========================================== */

footer {
  margin-top: 50px;
  padding: 25px 15px 20px 15px;
  background: rgba(5, 7, 10, 0.95);
  border-top: 2px solid #00ffff;
  box-shadow: 0 -5px 20px rgba(0, 255, 255, 0.3);
  font-family: 'Orbitron', monospace, sans-serif;
  color: #a0a0a0;
  text-align: center;
}

footer p {
  font-size: 13px;
  margin: 6px 0;
  letter-spacing: 1px;
  color: #cccccc;
}

footer a {
  color: #00ffff !important;
  text-decoration: none;
  font-size: 12px;
  margin: 0 8px;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

footer a:hover {
  color: #ffaa00 !important;
  text-shadow: 0 0 10px #ffaa00, 0 0 20px #ffaa00;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.3);
  }

  60% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.animar {
  animation: bounce 0.4s;
}

/* ==========================================================================
   INTERFAZ DE MODALES TRON UNIFICADOS Y SIMÉTRICOS (CARRITO Y DATOS DE ENVÍO)
   ========================================================================== */

#carrito, #formulario {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important; /* Centrado matemático absoluto */
  z-index: 10000;
  
  width: 90%;
  max-width: 380px; 
  height: auto;
  max-height: 85vh;
  overflow-y: auto;
  
  background: rgba(5, 7, 10, 0.95);
  color: #ffffff;
  padding: 25px 20px;
  border-radius: 15px;
  border: 2px solid #00d2ff; 
  box-shadow: 0 0 25px rgba(0, 210, 255, 0.45),
              inset 0 0 10px rgba(0, 210, 255, 0.2);
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#carrito:hover, #formulario:hover {
  border-color: #00ffff;
  box-shadow: 0 0 35px #00ffff,
              inset 0 0 15px rgba(0, 255, 255, 0.3);
}

#carrito h2, #formulario h3 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff;
  text-transform: uppercase;
}

#carrito::-webkit-scrollbar, #formulario::-webkit-scrollbar {
  width: 6px;
}
#carrito::-webkit-scrollbar-thumb, #formulario::-webkit-scrollbar-thumb {
  background: #00d2ff;
  border-radius: 10px;
}

/* Campos de texto e inputs con tipografía Orbitron simétrica */
#formulario input, #formulario select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 12px;
  margin: 12px auto;
  background: #0d1117;
  border: 1px solid #00d2ff;
  color: #ffffff;
  border-radius: 8px;
  outline: none;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s;
}

#formulario input::placeholder {
  font-family: 'Orbitron', sans-serif !important;
  color: rgba(0, 210, 255, 0.5) !important;
  letter-spacing: 1px;
}

#formulario input:focus, #formulario select:focus {
  border-color: #00ffff;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5);
  background: #05070a;
}

/* Botones del formulario alineados al estilo TRON Orbitron */
#formulario button {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  background: #000000;
  color: #ffffff;
  border: 1px solid #00d2ff;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
}

#formulario button:hover {
  color: #000000 !important;
  background: linear-gradient(135deg, #009cff, #00d4ff, #6ffcff) !important;
  box-shadow: 0 0 10px #00c3ff, 0 0 25px #00d4ff, 0 0 45px #00f7ff !important;
  transform: translateY(-2px);
}

a {
  color: #ffffff;
  font-size: small;
}

#pago {
  text-align: center;
}

/*AQUI TERMINA LOS DOS BOTONES DEL FORMULARIO*/


/*AQUI TERMINA LO CORRESPONDIENTE AL FORMULARIO */


/* ==========================================================================
   UNIFICACIÓN Y SIMETRÍA TRON - CARRITO DE COMPRAS
   ========================================================================== */

/* 1. Eliminar viñetas y puntos negros de lista en el carrito */
#lista-carrito {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-y: auto;
  max-height: 220px;
}

#lista-carrito li {
  list-style-type: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 12px;
}

/* 2. Tarjeta de cada ítem dentro del carrito */
.item-carrito {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0d1117 !important;
  border: 1px solid #00d2ff !important;
  padding: 10px;
  border-radius: 10px;
  gap: 12px;
  transition: all 0.3s ease;
}

.item-carrito:hover {
  border-color: #00ffff !important;
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.4);
}

.img-carrito {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(0, 210, 255, 0.4);
}

/* 3. Tipografía Orbitron para Nombres y Precios del Carrito */
.item-carrito .nombre {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #00ffff !important;
  letter-spacing: 0.8px;
  margin: 0 0 5px 0;
}

.item-carrito .precio {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 1px;
}

/* 4. Controles de cantidad (+ 1 -) */
.controles button {
  font-family: 'Orbitron', sans-serif !important;
  padding: 4px 10px;
  border: 1px solid #00d2ff !important;
  border-radius: 6px;
  background: #05070a !important;
  color: #00ffff !important;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
}

.controles button:hover {
  background: #00ffff !important;
  color: #000000 !important;
  box-shadow: 0 0 8px #00ffff;
}

.controles span {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: bold;
  color: #ffffff;
  padding: 0 5px;
}

/* 5. Textos de Envío y Total Final */
#costo-envio, #total-final {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 1.5px;
}

#total-final {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #00ffff !important;
  text-shadow: 0 0 10px #00ffff !important;
  margin-top: 10px;
}

/* 6. Botones del Carrito (SIGUIENTE, VACIAR, CERRAR) */
.btn-tron,
#carrito button {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #00d2ff !important;
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
  margin: 5px;
}

.btn-tron:hover,
#carrito button:hover {
  background: linear-gradient(135deg, #009cff, #00d4ff, #6ffcff) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 10px #00c3ff, 0 0 25px #00d4ff, 0 0 45px #00f7ff !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   ESTILOS DE QR DE PAGOS UNIFICADOS (BRE-B IZQUIERDA - NEQUI DERECHA)
   ========================================================================== */

/* Contenedor Maestro: Alinea los elementos en fila horizontal y los centra */
.pagos-container {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Mantiene ambas tarjetas con la misma altura visual */
  gap: 40px;
  flex-wrap: wrap;
  width: 90%;
  max-width: 800px;
  margin: 40px auto;
}

/* Tarjeta del ítem de pago individual (Bre-B y Nequi usan la misma estructura) */
.pago-box, .pago-item {
  background: rgba(13, 17, 23, 0.6); /* Fondo oscuro translúcido estilo TRON */
  border: 2px solid #00d2ff; /* Borde neón cian sutil */
  box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
  width: 100%;
  max-width: 260px;
  padding: 20px 15px;
  color: #ffffff;
  border-radius: 14px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto de energía al pasar el mouse por encima de los contenedores */
.pago-box:hover, .pago-item:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px #00ffff;
  border-color: #00ffff;
}

.pago-box .titulo {
  font-size: 14px;
  font-family: 'Orbitron', sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff;
}

/* Ajustes de tamaño y resplandor para las imágenes de los QR */
.qr-nequi, .colombia {
  width: 180px;
  height: 180px;
  background: #ffffff;
  padding: 8px;
  border-radius: 10px;
  box-sizing: border-box;
  object-fit: contain;
}

.pago-box .numero {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 12px 0 8px 0;
  font-family: monospace;
}

.pago-box button {
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  font-family: monospace;
  transition: 0.3s;
  width: 80%;
}

.pago-box button:hover {
  background: linear-gradient(135deg, #009cff, #00d4ff, #6ffcff);
  color: #000000;
  box-shadow: 0 0 15px #00f7ff;
  transform: translateY(-2px);
}

.copiado {
  font-size: 12px;
  margin-top: 5px;
  color: #00ff88;
  text-shadow: 0 0 5px #00ff88;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.copiado.activo {
  opacity: 1;
}

/* ==========================================================================
   RESPONSIVE PARA LA ZONA DE PAGOS (CELULARES)
   ========================================================================== */
@media (max-width: 650px) {
  .pagos-container {
    flex-direction: column; /* Apila de forma vertical en móviles */
    align-items: center;
    gap: 25px;
  }
  .pago-box, .pago-item {
    max-width: 280px;
  }
}


/* AQUI COMIENZA PANTALLA CELULARES , TABLES*/

@media (max-width: 600px) {
  .pago-contenido {
    flex-direction: column;
  }
}

@media(max-width:768px) {

  .card {

    width: 100%;

  }

}

@media (max-width: 768px) {

  #formulario {
    width: 90%;
    max-width: 350px;
  }

}

@media (max-width: 768px) {

  #carrito,
  #formulario {
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
  }

}

/*AQUI TERMINA CELULARES Y TABLES*/

/*BOTON DONDE SE SELECCIONA EL ENVIO*/
#zona-envio {
  text-align: center;
  padding: 3px;
  margin-top: 5px;
}

/*AQUI TERMINA BOTON DONDE SE SELECCIONA EL ENVIO*/

@media (max-width: 768px) {

  .card {
    max-width: 320px;
  }

  .carrito-icono {
    width: 250px;
    font-size: 24px;
  }

  #carrito {
    width: 85%;
  }

}

@media (max-width: 768px) {

  #carrito {
    top: 120px;
    max-height: 70vh;
  }

}

@media (max-width: 768px) {

  #formulario {
    top: 50%;
    width: 90%;
    max-width: 350px;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    transform: translate(-50%, -50%);
  }

}

/* CARRUSEL DE IMAGENES OPTIMIZADO CON BORDE AZUL NEÓN TRON */
.carrusel {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 15px;
  
  /* INYECCIÓN NEÓN CIAN (Idéntica a la de los códigos QR) */
  border: 2px solid #00d2ff; 
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.4),
              inset 0 0 10px rgba(0, 210, 255, 0.2);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

.carrusel-contenedor {
  position: relative;
  width: 100%;
  height: 300px;
}

.slide {
  width: 100%;
  height: 300px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.activo {
  opacity: 1;
}

.btn-carrusel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.btn-carrusel:hover {
  background: rgba(0, 0, 0, 0.8);
}

.izquierda {
  left: 10px;
}

.derecha {
  right: 10px;
}

/*AQUI TERMINA CARRUSEL*/

/*RESPONSI CARRUSEL BANNER ARRIBA*/

/* CONTENEDOR */

.carrusel {

  width: 100%;

  max-width: 1100px;

  margin: auto;

  overflow: hidden;

  border-radius: 18px;

}

/* IMAGENES */

.carrusel img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

}

/* TABLET */

@media(max-width:768px) {

  .carrusel {

    max-width: 95%;

    border-radius: 14px;

  }

  .carrusel img {

    aspect-ratio: 1100/300;

    object-fit: cover;

  }

}

/* CELULAR */

@media(max-width:768px) {

  .carrusel {
    height: 220px;

    max-width: 100%;

    border-radius: 10px;

    margin: 20px auto;

  }

  .carrusel img {

    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    /* evita que quede aplastado */
    object-fit: contain;

  }

}

/*AQUI TERMINA RESPONSI CARRUSEL ARRIBA*/

/*BOTONES DEL NAV*/

/* NAV CATEGORIAS */

.nav-categorias {

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  padding: 20px;

}

/* BOTONES */

.nav-categorias button {
  font-family: 'Orbitron', sans-serif;
  background: rgba(13, 17, 23, 0.85);
  color: #ffffff;
  border: 2px solid rgba(255, 170, 0, 0.7);
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.25),
              inset 0 0 6px rgba(255, 170, 0, 0.15);
  text-transform: uppercase;
}

/*ESTILO PARA LA IMAGEN DE BANCOLOMBIA BRE-B*/
.colombia {
  width: 300px;
  height: auto;

}

/* HOVER */

/* HOVER: Resplandor dorado más vivo al pasar el mouse */
.nav-categorias button:hover {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  border-color: #ffaa00;
  transform: translateY(-3px);
  box-shadow: 0 0 20px #ffaa00,
              inset 0 0 10px rgba(255, 170, 0, 0.3);
}

/* ACTIVO */

/* ACTIVO: Estilo cuando se selecciona una categoría */
.nav-categorias button.activo {
  background: #ffaa00;
  color: #05070a;
  border-color: #ffffff;
  box-shadow: 0 0 25px #ffaa00,
              inset 0 0 8px rgba(255, 255, 255, 0.6);
}

/* RESPONSIVE */

@media(max-width:768px) {

  .nav-categorias {

    gap: 8px;

    padding: 12px;

  }

  .nav-categorias button {

    width: 45%;

    font-size: 14px;

    padding: 12px;

  }

}

@media(max-width:480px) {

  .nav-categorias button {

    width: 100%;

  }

}

/*AQUI TERMINA LOS BOTONES DEL NAV*/

/*CAMBIOS EN MINIATURAS*/

.miniaturas {

  display: flex;

  gap: 8px;

  justify-content: center;

  margin-top: 10px;

}

.miniaturas img {

  width: 42px;

  height: 42px;

  object-fit: cover;

  border-radius: 8px;

  cursor: pointer;

}

.img-principal {

  transition: .25s;

}

.mini:hover {

  transform: scale(1.08);

  border: 2px solid #00ff88;

}

/*TERMINA CAMBIOS EN MINIATURAS*/
/*EL RESPONSI DE LA IMAGEN DEL QR DE BANCOLOMBIA*/
@media (max-width: 600px) {

  .pagos-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .pago-box,
  .pago-item {
    width: 100%;
    max-width: 220px;
  }

  .qr-nequi {
    width: 180px;
    height: 180px;
  }
}

/* ==========================================================================
   ESTILO BUSCADOR TRON CON LUPA ANIMADA
   ========================================================================== */

/* Contenedor para alinear la lupa */
/* ==========================================================================
   ESTILO BUSCADOR TRON CON LUPA ANIMADA (CENTRADOR CORREGIDO)
   ========================================================================== */

/* Contenedor principal: Ajustado para centrar correctamente la caja */
.buscador-contenedor {
  position: relative;
  width: 90%;
  /* Usa el 90% del ancho disponible */
  max-width: 400px;
  /* Evita que se haga gigante y lo mantiene estilizado */
  margin: 30px auto;
  /* El 'auto' en los lados centra toda la caja horizontalmente */
}

#buscador {
  width: 100%;
  box-sizing: border-box;
  /* Evita que los paddings deformen el ancho total */
  display: block;
  padding: 14px 20px 14px 45px;
  font-size: 16px;
  font-family: 'Courier New', Courier, monospace;
  color: #00ffff;
  background-color: #0d1117;
  border: 2px solid #00d2ff;
  border-radius: 8px;
  outline: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2),
    inset 0 0 5px rgba(0, 210, 255, 0.1);
  letter-spacing: 1px;
  text-align: center;
  /* CENTRA EL TEXTO QUE ESCRIBE EL CLIENTE */
}

/* Centra el texto de sugerencia (Placeholder) */
#buscador::placeholder {
  color: rgba(0, 210, 255, 0.4);
  text-shadow: 0 0 2px rgba(0, 210, 255, 0.3);
  text-align: center;
}

#buscador:focus {
  color: #ffffff;
  background-color: #05070a;
  border-color: #00ffff;
  box-shadow: 0 0 20px #00ffff,
    0 0 40px rgba(0, 255, 255, 0.3),
    inset 0 0 10px rgba(0, 255, 255, 0.5);
  transform: scale(1.02);
}

/* Icono de Lupa Neón (Se mantiene fija a la izquierda del cuadro) */
.lupa-neon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 0 5px #00f3ff) drop-shadow(0 0 10px #00f3ff);
  transition: all 0.3s ease-in-out;
}

/* Animación de la lupa al dar click */
/* Efecto de activación al escribir en el buscador */
#buscador:focus + .lupa-neon {
  filter: drop-shadow(0 0 10px #00f3ff) drop-shadow(0 0 20px #00f3ff) brightness(1.3);
  transform: translateY(-50%) scale(1.1);
}

@keyframes pulsoNeon {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
  }
}

/* Mensaje de error / Sin resultados */
.no-resultados {
  color: #ff0055 !important;
  text-shadow: 0 0 10px #ff0055, 0 0 20px rgba(255, 0, 85, 0.5);
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* ==========================================================================
   RESPONSIVE PARA EL BUSCADOR TRON
   ========================================================================== */
@media (max-width: 768px) {
  .buscador-contenedor {
    width: 85%;
    /* Se adapta perfectamente en celulares reduciendo un poco los lados */
    margin: 20px auto;
  }

  #buscador {
    font-size: 15px;
    padding: 12px 15px 12px 40px;
  }

  .lupa-neon {
    left: 12px;
    font-size: 16px;
  }
}

/* RESPONSI DEL BUSCADOR 

/* ==========================================================================
   RESPONSIVE PARA EL BUSCADOR TRON
   ========================================================================== */

@media (max-width: 768px) {
  .buscador-contenedor {
    width: 90%;
    /* Deja un 5% de margen limpio a cada lado en celulares */
    margin: 20px auto;
    /* Reduce un poco el espacio vertical en pantallas chicas */
  }

  #buscador {
    font-size: 15px;
    /* Ajusta ligeramente el tamaño de la letra */
    padding: 12px 15px 12px 40px;
    /* Compacta el espacio interno */
  }

  .lupa-neon {
    left: 12px;
    font-size: 16px;
    /* Lupa un toque más pequeña para móviles */
  }
}

/* ==========================================================================
   ESTILO FILTROS TRON
   ========================================================================== */

.filtros-contenedor {
  width: 90%;
  max-width: 400px;
  margin: -10px auto 30px auto; /* Queda pegado armónicamente abajo del buscador */
}

#filtro-precio {
  width: 100%;
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
  color: #00ffff;
  background-color: #0d1117;
  border: 2px solid #00d2ff;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
  text-align-last: center; /* Centra el texto dentro del select */
  appearance: none; /* Quita la flecha nativa aburrida del sistema */
}

/* Efecto de activación al abrirlo */
#filtro-precio:focus {
  border-color: #00ffff;
  box-shadow: 0 0 20px #00ffff, inset 0 0 5px rgba(0, 255, 255, 0.3);
}

/* Diseñar las opciones de la lista desplegable */
#filtro-precio option {
  background-color: #0d1117;
  color: #00ffff;
  font-family: monospace;
}

/* Responsive para pantallas móviles */
@media (max-width: 768px) {
  .filtros-contenedor {
    width: 85%;
    margin: -5px auto 25px auto;
  }
  #filtro-precio {
    font-size: 13px;
    padding: 10px;
  }
}

/* ==========================================================================
   ESTILO PAGINACIÓN TRON
   ========================================================================== */

.paginacion-contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 40px auto;
  width: 100%;
  max-width: 600px;
}

/* Botones de navegación */
.btn-paginacion {
  background-color: #0d1117;
  color: #00ffff;
  border: 2px solid #00d2ff;
  padding: 10px 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 8px rgba(0, 210, 255, 0.1);
}

/* Estado al pasar el mouse (Hover) */
.btn-paginacion:hover:not(:disabled) {
  color: #ffffff;
  background-color: #05070a;
  border-color: #00ffff;
  box-shadow: 0 0 15px #00ffff;
  transform: scale(1.05);
}

/* Página activa actual */
.btn-paginacion.activo {
  background-color: #00ffff;
  color: #05070a;
  border-color: #00ffff;
  box-shadow: 0 0 15px #00ffff, inset 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Botón deshabilitado (ej. Anterior en página 1) */
.btn-paginacion:disabled {
  border-color: rgba(0, 210, 255, 0.2);
  color: rgba(0, 210, 255, 0.2);
  cursor: not-allowed;
  box-shadow: none;
}

/* Responsive para celulares */
@media (max-width: 768px) {
  .paginacion-contenedor {
    gap: 6px;
    margin: 30px auto;
  }
  .btn-paginacion {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ==========================================================================
   ESTILOS DE STOCK NEÓN (DISPONIBLE / AGOTADO)
   ========================================================================== */

/* Letrero de Agotado en Rojo Neón */
.stock.agotado {
  color: #ff0055 !important;
  text-shadow: 0 0 8px #ff0055, 0 0 15px rgba(255, 0, 85, 0.4);
  font-weight: bold;
  animation: parpadeoAlerta 2s infinite alternate;
}

/* Botón de Agregar Apagado / Desactivado */
.btn-agregar:disabled {
  background-color: #1a1f26 !important;
  color: rgba(0, 210, 255, 0.2) !important;
  border-color: rgba(0, 210, 255, 0.15) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Animación de alerta para productos fuera de línea */
@keyframes parpadeoAlerta {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==========================================================================
   ESTILOS PRODUCTOS DESTACADOS TRON (NEÓN PALPITANTE)
   ========================================================================== */

/* 1. Definición de la palpitación de luz */
@keyframes neonPalpitar {
  0%, 100% {
    text-shadow: 
      0 0 5px #ffffff,
      0 0 10px #ffffff,
      0 0 20px #ffaa00,
      0 0 30px #ffaa00,
      0 0 50px #ffaa00;
    transform: scale(1);
  }
  50% {
    text-shadow: 
      0 0 2px #ffffff,
      0 0 5px #ffffff,
      0 0 12px #ffaa00,
      0 0 20px #ffaa00,
      0 0 30px #ffaa00;
    transform: scale(0.99);
  }
}

/* 2. Contenedor de la sección con borde iluminado */
.destacados-seccion {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 25px 20px;
  background: rgba(13, 17, 23, 0.85);
  border: 2px solid rgba(255, 170, 0, 0.6);
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(255, 170, 0, 0.25),
              inset 0 0 15px rgba(255, 170, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.destacados-seccion:hover {
  border-color: #ffaa00;
  box-shadow: 0 0 35px rgba(255, 170, 0, 0.4),
              inset 0 0 20px rgba(255, 170, 0, 0.2);
}

/* 3. Título Neón Palpitante */
.titulo-destacados {
  text-align: center;
  color: #ffffff;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 25px;
  text-transform: uppercase;
  animation: neonPalpitar 2s infinite ease-in-out;
}

/* Rejilla exclusiva para destacados */
.contenedor-destacados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Modificador de tarjeta destacada */
.contenedor-destacados-grid .card {
  border-color: #ffaa00 !important;
  box-shadow: 0 0 12px rgba(255, 170, 0, 0.2) !important;
}

.contenedor-destacados-grid .card:hover {
  box-shadow: 0 0 25px #ffaa00 !important;
}

.contenedor-destacados-grid .btn-agregar {
  border-color: #ffaa00 !important;
  color: #ffaa00 !important;
}

.contenedor-destacados-grid .btn-agregar:hover:not(:disabled) {
  background-color: #ffaa00 !important;
  color: #0d1117 !important;
  box-shadow: 0 0 15px #ffaa00 !important;
}

/* ==========================================================================
   INTERFAZ DE PANEL DE ADMINISTRACIÓN TRON (V2 COMPLETA)
   ========================================================================== */

.btn-admin-toggle {
  display: none !important; /* Oculto por defecto absoluto para clientes en la Red */
  background: transparent;
  color: rgba(0, 210, 255, 0.4);
  border: 1px dashed rgba(0, 210, 255, 0.3);
  padding: 8px 15px;
  font-family: monospace;
  cursor: pointer;
  margin: 40px auto 10px auto;
  border-radius: 4px;
  transition: all 0.3s;
}
.btn-admin-toggle:hover {
  color: #00ffff;
  border-color: #00ffff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.admin-modal {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5, 7, 10, 0.95);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.admin-contenido {
  background: #0d1117;
  border: 2px solid #ffaa00; /* Borde de comando ámbar de Clu */
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.15);
  width: 100%;
  max-width: 650px;
  border-radius: 12px;
  padding: 25px;
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 170, 0, 0.3);
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.admin-header h2 { color: #ffaa00; font-size: 18px; margin: 0; text-shadow: 0 0 8px #ffaa00; }

.btn-cerrar-admin {
  background: #ff0055; color: #fff; border: none; padding: 6px 12px;
  font-weight: bold; cursor: pointer; border-radius: 4px; box-shadow: 0 0 8px #ff0055;
}

.admin-selector-zona, .campo-admin, .campo-grid-admin { margin-bottom: 15px; }
.campo-grid-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.admin-contenido label { display: block; color: #00ffff; font-size: 12px; margin-bottom: 5px; font-weight: bold; }

.admin-contenido input, .admin-contenido select, .admin-contenido textarea {
  width: 100%; padding: 10px; background: #05070a; border: 1px solid #00d2ff;
  color: #ffffff; border-radius: 6px; outline: none; font-family: monospace; box-sizing: border-box;
}
.admin-contenido input:focus, .admin-contenido select:focus, .admin-contenido textarea:focus {
  border-color: #ffaa00; box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

.btn-guardar-admin {
  width: 100%; background: #ffaa00; color: #05070a; border: none; padding: 14px;
  font-size: 15px; font-weight: bold; font-family: monospace; cursor: pointer;
  border-radius: 6px; box-shadow: 0 0 15px rgba(255, 170, 0, 0.4); transition: 0.3s;
}
.btn-guardar-admin:hover { transform: scale(1.02); background: #ffffff; }

.admin-exportar-zona {
  margin-top: 25px; border-top: 1px dashed rgba(0, 210, 255, 0.3); padding-top: 15px;
}
.admin-exportar-zona h3 { color: #00ffff; font-size: 14px; margin-top: 0; }
#admin-json-output {
  background: #161b22; border: 1px solid #ff0055; color: #ff0055;
  font-size: 11px; height: 120px; resize: none; cursor: pointer;
}
/* EFECTO DE ENERGÍA EXTRA PARA EL CARRUSEL */
.carrusel:hover {
  border-color: #00ffff !important;
  box-shadow: 0 0 30px #00ffff,
              inset 0 0 15px rgba(0, 255, 255, 0.4) !important;
}

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA TOTAL PARA EL CARRUSEL NEÓN (V26)
   ========================================================================== */

/* Computadoras y Pantallas Grandes */
.carrusel {
  width: 100%;
  max-width: 1100px;
  height: 300px; /* Asegura la altura exacta de tus banners */
  margin: 20px auto;
}

.carrusel-contenedor, .slide {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important; /* Evita deformaciones en las imágenes */
}

/* Celulares y Pantallas Pequeñas (Ajuste automático de proporción) */
@media (max-width: 768px) {
  .carrusel {
    max-width: 95%; /* Deja un margen limpio a los lados en pantallas móviles */
    height: auto !important; /* Rompe la altura fija de 300px para que no se estire */
    aspect-ratio: 1100 / 300; /* Mantiene la proporción matemática exacta de tus banners */
    margin: 15px auto;
  }

  .carrusel-contenedor {
    height: auto !important;
    aspect-ratio: 1100 / 300;
  }

  .slide {
    height: 100% !important;
    object-fit: cover !important; /* Adapta el banner al ancho del celular de forma limpia */
  }
  
  /* Ajuste de tamaño para las flechas en móviles */
  .btn-carrusel {
    font-size: 20px;
    padding: 6px;
  }
}

#matriz {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100px !important;     /* Define la altura en pixeles */
  max-height: 100px !important; /* FORZA a la Matrix a no estirarse más de esta línea */
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;

  /* Máscara de desvanecimiento hacia abajo */
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

#matrix-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  object-fit: cover;
}