* {
  margin: 0;
  padding: 0; }

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px; 
  
}
  

/* ----- ----- HEADER ----- ----- */
.imagen-3d{
  display: flex;
  align-items: center;
  margin: 0 auto;

}
.imagen-3d img{
  width: 350px;
  margin: 0 auto;

}

header {
  background: url(../img/bg-fondo.png), #000000;
  background-size: cover;
  background-position: center 0;
  background-repeat: no-repeat; }
  header .contenedor_logo_menu {
    padding: 25px 0;
  background: rgba(231, 231, 231, 0.30);
box-shadow: 0px 2.76726px 2.21381px 0px rgba(0, 0, 0, 0.02), 0px 6.6501px 5.32008px 0px rgba(0, 0, 0, 0.03), 0px 12.52155px 10.01724px 0px rgba(0, 0, 0, 0.04), 0px 22.33631px 17.86905px 0px rgba(0, 0, 0, 0.04), 0px 41.77761px 33.42209px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(7.5px);
position: fixed;
  width: 90%;
  z-index: 9999;
  margin: 0 auto;
  justify-content: center;
  border-radius: 0px 0px 10px 10px
  
   }
  
    
    header .contenedor_logo_menu .logo a {
      font-weight: 900;
      display: block; 
    transition: 300ms;}
     
      header .contenedor_logo_menu .logo a:hover {
        color: #fff;}

        header .contenedor_logo_menu .logo a:hover {
          color: black;
        }
       
       
    header .contenedor_logo_menu .menu {
      text-align: right;
      line-height: 50px; }
      header .contenedor_logo_menu .menu a {
        color: #fff;
        font-weight: 700;
        margin-left: 60px;
        font-size: 18px; 
       transition: all 300ms;}

        header .contenedor_logo_menu .menu a:hover {
          color: #2d353e;
        }
  header .textos {
    color: #fff;
    text-align: center;
    margin-top: 4rem;
    margin: 200px 0; }
    header .textos .primera_linea,
    header .textos .segunda_linea {
      font-family: "Open Sans", Arial, Sans-serif;
      font-weight: 300; }
    header .textos .primera_linea {
      font-size: 35px;
      line-height: 35px;
      margin-bottom: 30px; }
    header .textos .segunda_linea {
      font-size: 25px;
      line-height: 25px;
      margin-bottom: 60px; }
    header .textos .contenedor-btns a {
      border-radius: 4px;
      text-decoration: none;
      color: #fff;
      padding: 12px 0;
      font-weight: 600;
      width: 235px;
      display: inline-block;
      text-align: center;
      background: rgba(231, 231, 231, 0.30);
      box-shadow: 0px 2.76726px 2.21381px 0px rgba(0, 0, 0, 0.02), 0px 6.6501px 5.32008px 0px rgba(0, 0, 0, 0.03), 0px 12.52155px 10.01724px 0px rgba(0, 0, 0, 0.04), 0px 22.33631px 17.86905px 0px rgba(0, 0, 0, 0.04), 0px 41.77761px 33.42209px 0px rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(7.5px);
      margin: 0 10px; }
      header .textos .contenedor-btns a:hover {
        text-decoration: none;
        background: #fff;
        color: #4f4f4f; }

        .logo a{
          font-family: 'Poppins', sans-serif;
          font-size: 35px;
          text-decoration: none;
          list-style: none;
          color: #fff;

        }

        .row .foto .btn-github{
          text-decoration: none;
          padding: 10px;
          color: white;
          background-color: #b81075;
          border-radius: 10px;
          transition: all 300ms;
          

        }
        .row .foto .btn-github img{
          width: 20px;
          margin: 10px;


        }

        .row .foto .btn-github:hover{
          text-decoration: none;
          padding: 10px;
          color: white;
          background-color: #8d105b;
          border-radius: 10px;

        }

     
         

/* ----- ----- MAIN ----- ----- */
.titulo_portfolio{
  text-align: center;
  margin-bottom: 3rem;
  font-size: 35px;
  color: #d71b8b;

}
.main .caracteristicas {
  background-color: #fff;
  padding: 70px 0; }
  .main .caracteristicas .titulo {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #d71b8b;
    margin-bottom: 70px; }
  .main .caracteristicas .caracteristica {
    text-align: center; }
    .main .caracteristicas .caracteristica .icono {
      vertical-align: top;
      margin-bottom: 30px; }
    .main .caracteristicas .caracteristica .primera_linea {
      font-weight: 700;
      margin-bottom: 30px;
      font-size: 20px; }
    .main .caracteristicas .caracteristica .parrafo {
      margin-bottom: 30px;
      line-height: 28px; }
.main .fotos {
  margin-bottom: 70px; }
  .main .fotos .foto {
    margin-bottom: 20px;
   }
    .main .fotos .foto .thumb img {
      border-radius: 3px;
      width: 100%;
      vertical-align: top; }
    .main .fotos .foto .titulo {
      margin-top: 70px;
      margin-bottom: 40px;
      font-size: 32px;
      line-height: 32px;
      font-weight: 300; }
      .main .fotos .foto .titulo.azul {
        color: #4facd3; }
      .main .fotos .foto .titulo.naranja {
        color: #ddb146; }
    .main .fotos .foto .parrafo {
      line-height: 28px; }
    .main .fotos .foto .derecha {
      text-align: right; }
.main .clientes {
  background: #2d353e;
  padding: 40px 0; }
  .main .clientes .titulo {
    text-align: center;
    font-family: "Open Sans", Arial, Sans-serif;
    font-weight: 300;
    font-size: 32px;
    color: #fff;
    margin-bottom: 40px; }
  .main .clientes .cliente {
    text-align: center; }
    .main .clientes .cliente a {
      display: block; }
.main .precios {
  background: url("../img/precios-bg.jpg"), #727171;
  background-size: cover;
  background-position: center 0;
  background-repeat: no-repeat;
  padding: 70px 0; }
  .main .precios .titulo {
    text-align: center;
    font-family: "Open Sans", Arial, Sans-serif;
    font-weight: 300;
    font-size: 32px;
    color: #fff;
    margin-bottom: 70px; }
  .main .precios .plan {
    background: #fff;
    text-align: center;
    font-family: "Open Sans", Arial, Sans-serif;
    padding: 50px 0;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35); }
    .main .precios .plan .nombre {
      font-size: 32px;
      line-height: 32px;
      font-weight: 300;
      margin-bottom: 30px; }
    .main .precios .plan .precio {
      font-weight: 300;
      font-size: 48px;
      margin-bottom: 30px; }
    .main .precios .plan .caracteristicas {
      list-style: none;
      padding: 0 20px;
      margin-bottom: 50px; }
      .main .precios .plan .caracteristicas li {
        font-size: 18px;
        padding: 15px 0;
        border-bottom: 1px solid #dedede; }
    .main .precios .plan .btn {
      width: 70%;
      padding: 15px 0;
      text-align: center;
      display: inline-block;
      border-radius: 100px; }
      .main .precios .plan .btn:hover {
        text-decoration: none; }
    .main .precios .plan.verde .nombre,
    .main .precios .plan.verde .precio {
      color: #86b773; }
    .main .precios .plan.verde .btn {
      color: #86b773;
      border: 2px solid #86b773; }
      .main .precios .plan.verde .btn:hover {
        background: #86b773;
        color: #fff; }
    .main .precios .plan.active {
      background: #4c8dce;
      color: #fff; }
      .main .precios .plan.active .btn {
        color: #fff;
        border: 2px solid #fff; }
        .main .precios .plan.active .btn:hover {
          background: #fff;
          color: #4c8dce; }
    .main .precios .plan.naranja .nombre,
    .main .precios .plan.naranja .precio {
      color: #ddb146; }
    .main .precios .plan.naranja .btn {
      color: #ddb146;
      border: 2px solid #ddb146; }
      .main .precios .plan.naranja .btn:hover {
        background: #ddb146;
        color: #fff; }
.main .reviews {
  padding: 70px; }
  .main .reviews .titulo {
    text-align: center;
    font-family: "Open Sans", Arial, Sans-serif;
    font-weight: 300;
    font-size: 32px;
    color: #4facd3;
    margin-bottom: 70px; }
  .main .reviews .cliente {
    overflow: hidden;
    margin-bottom: 20px; }
    .main .reviews .cliente .foto {
      width: 20%;
      float: left;
      text-align: right; }
      .main .reviews .cliente .foto img {
        max-width: 100px;
        width: 100%;
        vertical-align: top;
        border-radius: 100%; }
    .main .reviews .cliente .review {
      float: left;
      width: 80%;
      padding: 0 30px;
      margin-top: 20px; }
      .main .reviews .cliente .review .texto {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 10px; }
      .main .reviews .cliente .review .nombre {
        color: #ddb146;
        font-size: 14px; }
    .main .reviews .cliente.derecha .foto {
      float: right;
      text-align: left; }
    .main .reviews .cliente.derecha .review {
      float: right;
      text-align: right; }

/* ----- ----- FOOTER ----- ----- */
footer .direccion {
  background: #d71b8b;
  padding: 30px 0;
  color: #fff; }
  footer .direccion .titulo {
    font-size: 32px;
    line-height: 32px;
    font-weight: 300;
    margin-bottom: 30px; }
  footer .direccion .calle,
  footer .direccion .telefono,
  footer .direccion .correo {
    margin-bottom: 10px; }
  footer .direccion .logo img {
    margin-top: 70px; }
footer .social {
  text-align: center;
  padding: 20px 0; 
  background-color: #2d353e;
}
  footer .social a {
    padding: 10px;
    display: inline-block;
    margin: 0 20px;
    width: 50px;
    font-size: 22px;
    color: #fff;
    background: #000;
    border-radius: 100px; }
    footer .social a:hover {
      text-decoration: none; }
    footer .social a.linkedin {
      background: #3b5998; }
    footer .social a.whatsapp {
      background: #2bae0a; }
    footer .social a.youtube {
      background: #cd201f; }

@media screen and (max-width: 992px) {
  header .textos .primera_linea{
    margin-top: 15rem;
  }
  header .contenedor_logo_menu .logo {
    margin-bottom: 20px;
    text-align: center; }
  header .contenedor_logo_menu .menu {
    text-align: center; }
    header .contenedor_logo_menu .menu a {
      margin: 0 20px; }
  header .textos {
    margin: 50px 0;
    font-size: 16px; }
    header .textos .primera_linea {
      font-size: 1.5em; }
    header .textos .segunda_linea {
      font-size: 1.3em; }
    header .textos .contenedor-btns a {
      margin-bottom: 10px; }

  .main .fotos .foto .titulo {
    margin-top: 0; }
  .main .clientes .cliente {
    margin-bottom: 40px; } 
    
    form{
      width: 500px !important;
    }
    .nuevo-contacto{
      display: none;
    }
  }
@media screen and (max-width: 768px) {
  header .textos .primera_linea{
    margin-top: 15rem;
  }
  .main .caracteristicas .caracteristica {
    margin-bottom: 40px; }
  .main .fotos .foto {
    text-align: center; }
    .main .fotos .foto .texto * {
      text-align: left; }
    .main .fotos .foto .texto p {
      margin-bottom: 10px; }
  .main .precios .precio {
    margin-bottom: 20px; }

  footer .direccion {
    text-align: center; }
    footer .direccion .logo img {
      margin-top: 20px; }

      .imagen-3d img{
        width: 300px;
        margin: 0 auto;
      
      }
      form{
        width: 300px !important;
      }

      .contenedor_logo_menu .logo{
        display: none;
      }

      
      

    }

    

/*# sourceMappingURL=estilos.css.map */


form {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(231, 231, 231, 0.30);
box-shadow: 0px 2.76726px 2.21381px 0px rgba(0, 0, 0, 0.02), 0px 6.6501px 5.32008px 0px rgba(0, 0, 0, 0.03), 0px 12.52155px 10.01724px 0px rgba(0, 0, 0, 0.04), 0px 22.33631px 17.86905px 0px rgba(0, 0, 0, 0.04), 0px 41.77761px 33.42209px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(7.5px);
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Estilos para las etiquetas y los campos de entrada */
input, textarea {
  display: block;
  margin-bottom: 10px;
  color: #000;
}

/* Estilos para las etiquetas */
label {
  font-weight: bold;
  color: white;
}

/* Estilos para los campos de entrada y textarea */
input[type="text"], textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Estilos para el botón */
input[type="button"] {
  background-color: #d71b8b;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  width: 100%;
  transition: all 300ms;
}

/* Estilos para el botón al pasar el cursor sobre él */
input[type="button"]:hover {
  background-color: #9d0f64;
 
}

/*efectos en la seccion del menu*/
section [id]{
  scroll-margin-top: 80px;
}

html{
  scroll-behavior: smooth;
}

/*efectos en las tecnologias*/
.iconos_tecnologias a img{
  transition: all 600ms;
  max-width: 100px; /* Ajusta según sea necesario */
  height: auto;
  margin: 10px; /* Espaciado entre logos */
}
/*iconos skills*/
.iconos_skills {
  display: flex; /* Habilita Flexbox */
  flex-wrap: wrap; /* Permite múltiples líneas */
  justify-content: center; /* Centra horizontalmente */
  gap: 20px; /* Espaciado uniforme entre elementos */
  padding: 20px; /* Espaciado interno */
}

.iconos_skills .cliente {
  display: flex; /* Centra cada logo en su contenedor */
  justify-content: center;
  align-items: center;
}





/* Puntos de ruptura para mejorar la responsividad */
@media (max-width: 768px) {
  .iconos_skills img {
    max-width: 80px; /* Ajusta el tamaño de los logos en pantallas medianas */
  }
}

@media (max-width: 576px) {
  .iconos_skills img {
    max-width: 60px; /* Logos más pequeños en pantallas pequeñas */
  }
  .iconos_skills {
    gap: 15px; /* Reduce el espacio entre logos */
    padding: 10px; /* Reduce el padding interno */
  }
}

.iconos_tecnologias a img:hover{
 transform: translateY(-20px);
 
 
}

/*efecto de letras en movimiento con libreria*/
.contenedor-texto .profesion{
  font-weight: bold;
  color: yellow;
  font-style: normal;
}

/*Spinner*/
.spinnerForm{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.botones{
  display: flex;
  justify-content: space-around;
 
  
}

.botones button{
  display: flex;
  line-height: 2;
  background-color: #b81075;
  color: white;
  border: none;
  padding: 9px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px rgb(0 0 0 / 20%);
  
 
}
.formulario p{
  text-align: center;
}
.botones svg{
  width: 22px;
 margin-right: 5px;
}

hr{
  border: 1px solid rgb(200, 200, 200);
  box-shadow: 3px 2px 2px 1px rgba(158, 158, 158, 0.2);
}