/*Elementos comunes de la página*/
body {
    /*background: gray;*/
     font-family: "Montserrat", sans-serif;     
    font-optical-sizing: auto;
    font-weight: bold; 
    font-style: normal;
    font-size: large;
}

/*HEADER*/

.navbar{
  background: black;  
  padding-left: 40px;
  padding-right: 40px;
  
}

#menu{
  text-decoration: none;
  font-family: "Montserrat", sans-serif;    
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-size: large;
  gap: 35px;


}
.navbar.navbar-dark .navbar-nav .nav-link {
  color: #ffffff;
}

.navbar.navbar-dark .navbar-nav .nav-link:hover {
  color: #7C5CFF;
}
.boton {
    background-color: black;
    font-family: "Montserrat", sans-serif;    
    font-optical-sizing: auto;
    font-weight: bold; 
    font-style: normal;
    font-size: large;
    color: #ffffff;
}
.buscador {
    font-family: "Montserrat", sans-serif;    
    font-optical-sizing: auto;
    font-weight: bold; 
    font-style: normal;
    font-size: large;
    text-align: center;
    
}

.dropdown-item{
    font-family: "Montserrat", sans-serif;     
    font-optical-sizing: auto;
    font-weight: bold; 
    font-style: normal;
    font-size: large;
    
}

.datos .datos-contacto{
    object-fit: cover;
    max-width: 25px;
}

.datos p{
    color: #ffffff;
    margin: 0;
    padding: 0;
}

.datos {
    width: 100%;
}

.datos p {
    overflow-wrap: anywhere;
}


/*HERO*/

.hero {
    font-family: "Montserrat", sans-serif;     
    font-optical-sizing: auto;
    font-weight: bold; 
    font-style: normal;
    font-size: large;


  min-height: 70vh ;  
  background-image: 
    linear-gradient(
      rgba(15, 23, 42, 0.7),
      rgba(15, 23, 42, 0.7)
    ),
    url("img/Hero3.png");
  background-size: cover; /*IMPORTANTE ESTAS TRES LINEAS*/
  background-position: center;
  background-repeat: no-repeat;
}

.foto-hero {
    width: 500px;
    border-radius: 30px;
    height: auto;
    margin-bottom: 40px;
    padding-top: 30px;
}

.btn{
    background-color: black;
    border-color: black;
    padding-bottom: 
}
.btn:hover{
    background-color: #7C5CFF;
    border-color: #7C5CFF;
    color: #ffffff;
}
.punto{
    font-weight:bold
    
}

/*Trabajos con galería de imágenes*/

.trabajos-img{

    width: 600px;
    height: 250px;        /* altura fija igual para ambas */
    object-fit: cover;
    
}


.trabajos-titulo{
    font-weight: 800px;   
}  


 .galeria .trabajos .contenedor-imagen:hover{
    transform: scale(1.10);
     transition: transform 300ms ease;
    will-change: transform;
}



.trabajos .galeria .contenedor-imagen{
    max-height: 150px;
    overflow: hidden;
    max-width: 100px;
}

.container{
    max-width: 1500px;
}

.lenguajes{
    width: 70px;
}
.wordpress{
    height: 248px;
}
.lenguajes-elementor{
    max-width: 55px;
    max-height: 70px;
    object-fit: cover;
    padding-top: ;
}
/*Separador*/

.separador {
    min-height: 20vh;
    background-image: url(img/Hero2.png);
    color: #ffffff;
    background-size: cover; /*IMPORTANTE ESTAS TRES LINEAS*/
    background-position: center; 
    background-repeat: no-repeat;
}

.separador-formulario {
    min-height: 20vh;
    background-image: url(img/hero.png);
    color: #ffffff;
    background-size: cover; /*IMPORTANTE ESTAS TRES LINEAS*/
  background-position: center;
  background-repeat: no-repeat;
}
   
    
.subtitulo{
    padding-top: 40px;
}

/*Conóceme*/

.foto-conoceme{
    max-height: 300px;
    border-radius: 40%;
}
.nombre{
    font-size: 30px ;
    letter-spacing: 2px;
}
.resumen{
    font-weight: lighter;
    letter-spacing: 1px;
}

.conoceme .info .progress{
    background-color: #7C5CFF;;
    border-radius: 0;
    height: 25px;
}

.conoceme .info .progress .progress-bar{
    background-color: black;
    line-height: 25px;

}

/* Contacto */
.container .contacto{
    background: black;
}

.contacto{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.contacto .formulario input[type="text"],
.contacto .formulario input[type="email"],
.contacto .formulario textarea{

    padding: 15px;
    border: 4px solid #7C5CFF;
    
}
.contacto .formulario textarea{
    height: 150px;
    min-height: 150px;
    max-height: 250px;
}
.container .contacto .titulo{
    color: #ffffff;
}
.container .contacto .boton:hover{
    background-color: #7C5CFF;
}
.container .contacto .boton{
    border: none;
    padding: 7px 30px;
    border-radius: 10%;
    cursor: pointer;
    width: auto;
    
}

.conoceme-mas{
    color: white;
    text-decoration: none;
}

/*Footer*/
.footer{
    background-color: black;
    min-height: 120px;
    padding: 24px 0;
}

.redes{
    max-width: 60px;
    gap: 5px;
}

.redes {
  transition: transform 0.3s ease;
}

.redes:hover {
  transform: translateY(-10px);
}

.mapa{
    
    object-fit: cover;
}

.derechos{
    background-color: #7C5CFF;
    color: #ffffff;
    padding: 10px 0;
    margin: 0;
    text-align: center;
}

.derechos h5 {
    margin: 0;
    padding-bottom: 0;
}

/* Reveal en scroll */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

.scroll-reveal.section-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}