/* ===== Estilos Generales ===== */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f6f9;
    color: #333;
}

h1, h2, h3 {
    margin: 0 0 15px;
    text-align: center;
}
p{
    text-align: center;
    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 0.3px #ffffff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);
}

section {
    padding: 60px 20px;
}

.container {
    max-width: 1100px;
    margin: auto;
}

/* ===== Navbar ===== */
/* NAV */
nav {
  background: #0a0a0a;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid #00ffff;
  box-shadow: 0 0 15px #00ffff33;
}

/* CONTENEDOR */
nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

nav img {
  height: 50px;
  transition: 0.3s;
  filter: drop-shadow(0 0 5px #00ffff);
}

nav img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 12px #00ffff);
}

/* TEXTO LOGO */
nav h2 {
  color: #00ffff;
  text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
}

/* MENÚ NORMAL */
nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  padding: 0;
  margin: 0;
}

/* LINKS */
nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  position: relative;
  padding: 3px 7px;
  transition: 0.3s;
  font-size: 15px;
}

/* BOTÓN HAMBURGUESA */
.menu-toggle {
  display: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* ========================= */
/* RESPONSIVE PARA TELÉFONO */
/* ========================= */

@media (max-width: 768px) {

  .menu-toggle {
    display: block;
  }

  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #0a0a0a;
    width: 220px;
    padding: 20px;
    border: 1px solid #00ffff;
    border-radius: 10px;
    box-shadow: 0 0 10px #00ffff55;
  }

  nav ul.active {
    display: flex;
  }

  nav ul li {
    margin: 10px 0;
    text-align: center;
  }
}
/* Hover efecto neón */

/* Glow al pasar el mouse */
nav ul li a:hover {
  color: #00ffff;
  text-shadow: 0 0 8px #00ffff;
}

nav ul li a:hover::before {
  opacity: 1;
}

/* Animación entrada */
nav {
  animation: neonSlide 0.8s ease;
}

@keyframes neonSlide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* LÍNEA */
nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;

  width: 120px;
  height: 3px;
  border-radius: 50px;

  background: linear-gradient(
    90deg,
    transparent,
    #00ffff,
    #ffffff,
    #00ffff,
    transparent
  );

  box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 30px #00ffff;

  animation: moveLine 3s linear infinite alternate;
}

/* 🔁 ANIMACIÓN CORREGIDA */
@keyframes moveLine {
  0% {
    left: 0;
  }
  100% {
    left: calc(100% - 120px);
  }


}
/* ===== Hero ===== */
/*.hero {
    height: 100vh;
    background: linear-gradient(rgba(13,27,42,0.7), rgba(13,27,42,0.7)),
    url('Imagen/Video1.mp4');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}*/

.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

/* VIDEO DE FONDO */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: -1;
}

/* OVERLAY (tu degradado original) */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(13,27,42,0.7), rgba(13,27,42,0.7));
    z-index: 0;
}

/* CONTENIDO ENCIMA */
.hero-content {
    position: relative;
    z-index: 1;
}



/* ===== Servicios ===== */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 30px;
}

.card {
    
    padding: 25px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
}

h2{
    font-size: 45px;
    font-family: Montserrat;
    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 1.5px #00e1ff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);

}
h3{
    font-size: 30px;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 1.5px #9d00ff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);

}
h4{
  font-size: 25px;
     font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 1.5px #9d00ff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);

}
.d, .p, .m{
    font-size: 25px;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
    font-family: Poppins;

    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 0.3px #ffffff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);

}

/* ===== Que hacemos ===== */

/* SECCIÓN */
.section {
    position: relative;
    z-index: 1; /* 👈 encima del fondo */
    padding: 60px 20px;
    color: white;
}

/* CONTENEDOR FLEX */
.contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* CAJAS */
.box {
    flex: 1 1 300px;
    text-align: center;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
    font-size: 26px;
    text-align: left;
    font-family: Poppins;

    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 0.3px #ffffff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);
}

/* IMAGEN */
.boxx img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
}

/* TEXTO */
.texto {
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    padding: 20px;
    border-radius: 10px;
    font-size: 26px;
    text-align: left;
    font-family: Poppins;

    font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 0.3px #ffffff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);
}

/* MOBILE */
@media (max-width: 768px) {
    .contenedor {
        flex-direction: column;
    }
}
/*=== Paquetes ===*/
.paquetes{
  display:flex; 
  gap:20px; 
  flex-wrap: wrap; 
  justify-content:center;
  text-align: center;
}
ul{
  background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
}
li{
  font-size: 24px;
  font-family: Poppins;

  font-weight: bold;
  color: #ffffff; /* centro blanco */

  /* contorno */
  -webkit-text-stroke: 0.3px #00aaff;

  /* brillo suave */
  text-shadow:
    0 0 3px rgba(255,255,255,0.5),
    0 0 6px rgba(0,225,255,0.4),
    0 0 12px rgba(0,225,255,0.3);
}
.start{
  border:2px solid #007bff; 
  padding:20px; 
  width:250px; 
  border-radius:10px;
}
.negocios{
  border:2px solid #007bff; 
  padding:20px; 
  width:250px; 
  border-radius:10px;
}

.pro{
  border:2px solid #007bff;
  padding:20px; 
  width:250px; 
  border-radius:10px;
}
.btn {
  background: #1CABE8;
  color: white;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  transition: 0.3s;
  font-size: 20px;

}
.btn:hover {
  background: #00a844;
}

/*===manteniminto==*/
.mantenimiento{
  display:flex; 
  gap:20px; 
  flex-wrap: wrap; 
  justify-content:center;
  text-align: center;
}

.basico{
  border:2px solid #007bff; 
  padding:20px; 
  width:250px; 
  border-radius:10px;
}
.estandar{
  border:2px solid #007bff; 
  padding:20px; 
  width:250px; 
  border-radius:10px;
}

.premium{
  border:2px solid #007bff;
  padding:20px; 
  width:250px; 
  border-radius:10px;
}
/*==== cards ====*/
.containers {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.cards {
  width: 450px;
  height: 400px;
  perspective: 1000px; /* profundidad */
}

.cards-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.cards:hover .cards-inner {
  transform: rotateY(180deg) scale(1.05); /* giro + zoom */
}

.img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  backface-visibility: hidden;
}

.img-front {
  z-index: 2;
}

.img-back {
  transform: rotateY(180deg);
}


/* ===== Nosotros ===== */
.about {
    
    text-align: center;
}

.about p {
    max-width: 800px;
    margin: auto;
    font-size: 26px;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
    font-family: Poppins;
}

#vm{
    display: flex;
    align-items: center;
}
.vision{
    width: 50%;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
}
.mision{
    width: 50%;
    background: rgba(0,0,0,0.5); /* 👈 mejor contraste con matrix */
    backdrop-filter: blur(6px);
    border-radius: 10px;
    padding: 20px;
}
/* ===== Contacto ===== */
.contact {

    color: white;
    text-align: center;
}

form {
    max-width: 500px;
    margin: auto;
}

input, textarea {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
}

/* ===== Footer ===== */
footer {
      background-color: #222;
      color: #fff;
      text-align: center;
      padding: 15px 0;
    }

    .social-icons {
      margin: 6px 0;
    }

    .social-icons a {
      color: #fff;
      margin: 0 10px;
      font-size: 24px;
      transition: 0.3s;
    }

    .social-icons a:hover {
      color: #1da1f2; /* color al pasar el mouse */
    }
    .social-icons fab{
        color: red;
    }

    .footer-text {
      font-size: 10px;
      margin-top: 10px;
      opacity: 0.7;
    }

/* Animaciones Scroll */
.hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.2s ease;
}

.whatsapp-float img {
    width: 35px;
    height: 35px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}





/* Contenedor principal del texto */
.led-text {
  font-size: 4rem; /* Tamaño del texto */
  font-weight: bold;
  letter-spacing: 0.2em; /* Separación entre letras */
  text-transform: uppercase;
  margin: 0;
}

/* Animación de ciclo de colores LED */
@keyframes led-color-cycle {
  0% {
    color: #00f3ff;
    text-shadow: 0 0 5px #00f3ff, 0 0 15px #00f3ff, 0 0 30px #00f3ff;
  }
  25% {
    color: #bc13fe;
    text-shadow: 0 0 5px #bc13fe, 0 0 15px #bc13fe, 0 0 30px #bc13fe;
  }
  50% {
    color: #ff003c;
    text-shadow: 0 0 5px #ff003c, 0 0 15px #ff003c, 0 0 30px #ff003c;
  }
  75% {
    color: #00ff66;
    text-shadow: 0 0 5px #00ff66, 0 0 15px #00ff66, 0 0 30px #00ff66;
  }
  100% {
    color: #00f3ff;
    text-shadow: 0 0 5px #00f3ff, 0 0 15px #00f3ff, 0 0 30px #00f3ff;
  }
}

/* Aplicar la animación a cada letra */
.led-text span {
  display: inline-block;
  animation: led-color-cycle 4s linear infinite;
}

/* Retrasos en la animación para crear el efecto de "ola" */
.led-text span:nth-child(1) { animation-delay: 0s; }
.led-text span:nth-child(2) { animation-delay: 0.2s; }
.led-text span:nth-child(3) { animation-delay: 0.4s; }
.led-text span:nth-child(4) { animation-delay: 0.6s; }
.led-text span:nth-child(5) { animation-delay: 0.8s; }
.led-text span:nth-child(6) { animation-delay: 1.0s; }
.led-text span:nth-child(7) { animation-delay: 1.2s; }
.led-text span:nth-child(8) { animation-delay: 1.4s; }
.led-text span:nth-child(9) { animation-delay: 1.6s; }
.led-text span:nth-child(10) { animation-delay: 1.8s; }
.led-text span:nth-child(11) { animation-delay: 2.0s; }
.led-text span:nth-child(12) { animation-delay: 2.2s; }
.led-text span:nth-child(13) { animation-delay: 2.4s; }
.led-text span:nth-child(14) { animation-delay: 2.6s; }
.led-text span:nth-child(15) { animation-delay: 2.8s; }
.led-text span:nth-child(16) { animation-delay: 3.0s; }

/* Si tu palabra tiene más letras, solo sigue agregando nth-child(7), (8), etc. sumando 0.2s */


/* Fondo tipo Matrix */
#matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* detrás de todo */
  background: black;
}

/* Opcional: asegurar que tu contenido esté encima */
body {
  margin: 0;
  background: black;
  color: white;
}

.leds-text {
  font-size: 2.5rem;
  font-weight: 450;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
  
  
  animation: led-color-cycles 3s linear infinite;
}

/* Animación mejorada */
@keyframes led-color-cycles {
 
  50% {
    color: #ff003c;
    text-shadow: 
      0 0 5px #ff003c,
      0 0 10px #ff003c,
      0 0 20px #ff003c,
      0 0 40px #ff003c;
  }
  
}


/*gato animado*/

.cat{
  position:fixed;
  left:0;
  top:0;

  width:90px;

  pointer-events:none;
  user-select:none;

  z-index: 2147483647; /* encima de todo */

  animation: walk 0.6s infinite alternate;
  transition: transform 0.08s linear;
}

.cat-face{
  width:100%;
  image-rendering: pixelated;

  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.15));
}

/* efecto caminar */
@keyframes walk{
  0%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(-4px);
  }
}