@charset "utf-8";
/* Define la codificación del archivo CSS (UTF-8 para soportar caracteres especiales) */

/* CSS Document */

/*
body {
  background: url("") no-repeat #FFFFFF;
  background-size: cover;
}
*/
/* Fondo opcional del body (comentado, no se está usando) */

#particles-js {
  position: absolute; /* Se posiciona libre respecto al contenedor padre */
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho */
  height: 850px; /* Altura fija del banner */
  z-index: 0; /* Se queda detrás del contenido */
  pointer-events: none; /* Evita que interfiera con clics o eventos del mouse */
}

#particles-js-edge {
  position: absolute; /* Igual que el anterior, capa superpuesta */
  top: 0;
  left: 0;
  width: 100%;
  height: 850px;
  z-index: 0; /* También detrás */
  pointer-events: none; /* No bloquea interacción */
}

/*AQUI DA LA MEDIDA DEL ANCHO Y ALTO DE TODO EL BANNER*/
#textParticulas {
  position: relative; /* Permite posicionar elementos hijos con absolute */
  height: 850px; /* Misma altura que las partículas */
  width: 100%;
  z-index: 1;  /* Se pone encima de las partículas */
  color: white; /* Color base del texto */
}

#textParticulas .span_h1 {
  position: absolute; /* Posicionamiento libre dentro del contenedor */
  top: 20%; /* Separación desde arriba */
  left: 50%; /* Posición horizontal */
  color: #FFFFFF;
  font-size: 2.5em; /* Tamaño grande para título principal */
  font-family: RobotoCondensed-Regular;
  z-index: 1; /* Asegura que esté sobre las partículas */
}

#textParticulas .span_h2 {
  position: absolute;
  top: 27%; /* Más abajo que el h1 */
  left: 50%;
  color: #EDA302; /* Color distinto para resaltar */
  font-size: 2.4em;
  font-family: RobotoCondensed-Regular;
  z-index: 1;
}

#textParticulas .span_h3 {
  position: absolute;
  top: 38%;
  left: 62%;
  transform: translateX(-50%); /* Centra el bloque respecto a su eje */
  color: #FFFFFF;
  font-size: 1em;
  font-family: RobotoCondensed-Regular;
  z-index: 1;
  text-align: left; /* Alineación interna del texto */
  width: 400px; /* Limita ancho para evitar que el texto se desborde */
}

#btnStore{
  width: 60%; /* Tamaño del botón relativo al contenedor */
  height: auto;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin: 0;
  padding: 12; /* ⚠️ Aquí falta unidad (debería ser px, pero no lo cambio) */
  box-sizing: border-box;
  color: #000000;
  font-family: RobotoCondensed-Regular;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: normal;
  text-align: center;
  border: thin solid #F5982B; /* Borde del botón */
  background-color: #F5982B; /* Color de fondo */
  cursor:pointer; /* Cambia cursor al pasar encima */
}

#textParticulas .btStore{
  position: absolute;
  top: 60%; /* Posición vertical del botón */
  left: 62%;
  transform: translateX(-50%);
  color: #FFFFFF;
  font-size: 18px;
  font-family: RobotoCondensed-Regular;
  z-index: 1;
  text-align: left;
  width: 400px;
}

#textParticulas .imageMonitor{
  width:100%; /* Imagen adaptable */
  height:auto;
  box-sizing:border-box;
}

#textParticulas .spanMonitor{
  position: absolute;
  top: 20%;
  left: 30%;
  transform: translateX(-50%);
  z-index: 1;
  width: 32%; /* Tamaño del contenedor de imagen */
}

/*OCULTAMOS EN DISEÑO RESPONSIVO*/
/*
@media (max-width:500px){
  #particles-js,
  #particles-js-edge{
    display:none; 
  }
}*/