*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Source Sans 3', sans-serif;
}

h2{
  font-weight: 400;
  font-size: 51;
  letter-spacing: 3px;
}


.header{
    z-index: 1000;
    background-color: rgba(1, 10, 69, 0.4); /*Transparencia*/
    backdrop-filter: blur(10px);    /*desenfoque*/
    -webkit-backdrop-filter: blur(10px); /*Soporte en safari*/
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.1); ---linea en la navbar*/
}

.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 992px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    
}

.nav-link{
    color: rgb(255, 255, 255);
    text-decoration: none;
    /*text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); ----Sombra en texto*/
}

.logo{
    padding: 0 40px;
    display: flex;
    align-items: center;
    height: 40px;
    
}

.logo img {
  height: 100%;
  width: auto;
  display: block;
}

.nav-menu{
    z-index: 1100;
    display: flex;
    margin-right: 40px;
    list-style: none;
    top: 80px;
}

.nav-menu-item{
    font-size: 21;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 10px;
    line-height: 80px;
    width: max-content;
}

.nav-menu-link{
    padding: 8px 12px;
    border-radius: 3px;
}

.nav-menu-link:hover,
.nav-menu-link_active{
    color: #2ab6f7;
    transition: .5s;
}

.nav-toggle{
    color: white;
    background: none;
    border: none;
    font-size: 30px;
    padding: 0 20px;
    line-height: 60px;
    cursor: pointer;
    position: relative;
    z-index: 4000;

    display: none;
}

@media (max-width: 768px) {
    body {
    padding: 0 0;
}

.header{
    height: 60px;

}

.logo{
    padding: 0 20px;
    line-height: 60px;
}

.nav-menu{
  z-index: 5000;
  position: fixed;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    background-color: rgba(1, 10, 69, .8); /*Transparencia*/
    backdrop-filter: blur(10px);    /*desenfoque*/
    -webkit-backdrop-filter: blur(10px); /*Soporte en safari*/
    top: 60px;
    width: 100%;
    padding: 20px 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    left: 100%;
    transition:left 0.3s;
}

.nav-menu-item{
    line-height: 70px;
}

.nav-menu-link:hover,
.nav-menu-link_active{
    color: #2ab6f7;
    transition: .5s;
}

.nav-toggle{
    display: block;
}

.nav-menu_visible{
    left: 0;
}

.nav-toggle:focus:not(:focus-visible){
    outline: none;
}

}
.wrap-two-column{
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: 0 auto;
}
/*TWO COLUMN*/

.hero-galaxia {
  position: relative;
  height: 70vh;
  background: radial-gradient(ellipse at bottom, #004e92, #010a45); 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 2rem 2rem;
  color: white;
}

.hero-galaxia::before,
.hero-galaxia::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
   50px 60px white,
    100px 90px white,
    200px 150px white,
    300px 40px white,
    400px 200px white,
    500px 300px white,
    600px 120px white,
    700px 250px white,
    800px 50px white,
    900px 100px white,
    1000px 380px white,
    1100px 450px white,
    1200px 180px white,
    1300px 340px white,
    1400px 100px white,
    1500px 500px white,
       50px 60px white,
    90px 100px white,
    150px 200px white,
    40px 300px white,
    200px 400px white,
    300px 500px white,
    120px 600px white,
    250px 700px white,
    50px 800px white,
    100px 900px white,
    380px 1000px white,
    450px 1100px white,
    180px 1200px white,
    340px 1300px white,
    100px 1400px white,
    500px 1500px white,
      50px 60px white,
    100px 90px white,
    200px 150px white,
    300px 40px white,
    400px 200px white,
    500px 300px white,
    600px 120px white,
    700px 250px white,
    800px 50px white,
    900px 100px white,
    1000px 380px white,
    1100px 450px white,
    1200px 180px white,
    1300px 340px white,
    1400px 100px white,
    1500px 500px white;
  animation: starsMove 60s linear infinite;
  z-index: 0;
}

.hero-galaxia::after{
  animation-delay:15s;
}

@keyframes starsMove {
  0% { transform: translateY(-100vh); }
  100% { transform: translateY(100vh); }
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 2rem;
  flex-wrap: wrap; /* Para que se adapte en móvil */
}

.hero-image img {
  width: 300px;
  height: auto;
  border-radius: 10px;
  
}

.hero-image {
  flex: 1 1 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 0 8rem;
}
@media (max-width: 768px) {
  .hero-image {
    display: none;
  }
}


.contenido-hero {
  flex: 1 1 50%;
  padding: 3rem;
}

.contenido-hero h1 {
  font-size: 50px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.contenido-hero p {
  font-weight: 300;
  font-size: 30;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.btn {
  background: #1597ff;
  font-size: 21;
  font-weight: 700;
  letter-spacing: 2px;
  color: #010b46;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  display: inline-block;
  border-radius: 999px;
}

/*QuienesSomos*/

.contenedor {
  max-width: 992px;
  margin: 0 auto;
  padding: 0 40px;
}

.quienes-somos{
  background-color: #1597ff;
  padding: 4rem 0;

}

.quienes-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap; /* permite que se acomode mejor en pantallas pequeñas */
  
}

.contenido-quienes {
  flex: 1;
  min-width: 280px;
}

.contenido-quienes h3 {
  font-size: 1rem;
  letter-spacing: 4px;
  color: #010a45;
  margin-bottom: .5rem;
  padding: 0;
}

.contenido-quienes h2 {
  color: white;
  font-size: 1.7rem;
  font-weight: 300;
  margin-bottom: .5rem;
  padding: 0;
}

.contenido-quienes p {
  color: #010a45;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 0;
}

.quienes-imagen {
  flex: 1;
  max-width: 400px;
  text-align: center;
}

.quienes-imagen img {
  max-width: 100%;
  border-radius: 10px;
  
}

@media (max-width: 768px) {
  .quienes-contenido {
    flex-direction: column;      /* Cambia de lado a lado → apilado */
    text-align: center;          /* Centra el texto */
  }

  .quienes-imagen {
    order: 1;                    /* Imagen primero */
    max-width: 100%;              /* Que no se salga */
  }

  .quienes-imagen img {
    width: 100%;                  /* Imagen ocupa todo el ancho */
    height: auto;                  /* Mantiene proporción */
    border-radius: 10px;           /* Mantén estilo */
  }

  .contenido-quienes {
    order: 2;                     /* Texto después */
    padding: 1rem;                 /* Espacio interno */
  }
}


/*SERVICIOS*/

.servicios {
  background-color: #f4f6fc;
  padding: 6rem 2rem;
  text-align: center;
}

.titulo-servicios {
  font-size: 2rem;
  color: #010a45;
  margin-bottom: 3rem;
}

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.servicio {
  background: transparent;
  cursor: pointer;
  transition: transform 0.3s ease;
  text-align: center;
}

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

.icono-circulo {
  /*width: 130px;
  height: 130px;
  background-color: #010a45;  Azul profundo */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem auto;
}

.icono-circulo img {
  width: 130px;
  height: auto;
}

.servicio p {
  font-weight: 400;
  color: #010a45;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.servicio i {
  margin-right: 0.5rem;
  color: #1597ff;
}

.info-servicio {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-size: 0.95rem;
  color: #333;
  padding: 0 1rem;
}
.servicio.active .info-servicio {
  max-height: 200px;
  margin-top: 0.5rem;
}


.cta-servicios {
  margin-top: 4rem;
}

.cta-servicios p {
  font-size: 2rem;
  letter-spacing: 3px;
  color: #010a45;
  margin-bottom: 1.5rem;
}


/*MARCAS*/
.clientes {
  background-color: #010a45;
  padding: 4rem 2rem;
  color: white;
  text-align: center;
}

.clientes-titulo {
  font-size: 2rem;
  letter-spacing: 6px;
  color: #2ab6f7;
  margin-bottom: 3rem;
  line-height: 1.2;
}

.logos-clientes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.logos-clientes img {
  max-height: 35px;
  max-width: 140px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* blanco para fondo oscuro */
}


/*Formulario y footer*/
.contacto {
  background-color: #ecf0f5;
  padding: 4rem 2rem;
  text-align: center;
}

.titulo-contacto {
  font-size: 1.8rem;
  color: #010a45;
  margin-bottom: 1rem;
}

.subtitulo-contacto {
  color: #010a45;
  font-weight: 400;
  margin-bottom: 2rem;
}

.formulario-contacto {
  max-width: 900px;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  
}

.fila {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.fila input,
.formulario-contacto textarea {
  flex: 1;
  padding: 0.8rem;
  border-radius: 8px;
  border: none;
  background-color: #cce6ff;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.alinear-derecha {
  text-align: right;
}

.alinear-derecha .btn {
  background-color: #1597ff;
  color: #010b46;
  border: none;
  padding: 0.7rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.btn:hover {
  background-color: #007ac6;
}

.alternativa-contacto {
  color: #010a45;
  font-weight: 400;
  margin-top: 2rem;
}

.redes-contacto {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.redes-contacto img {
  width: 45px;
  height: 45px;
}

.footer {
  background-color: #010a45;
  color: white;
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
}

.footer a {
  color: #1597ff;
  display: block;
  margin-top: 0.5rem;
  text-decoration: none;
}