/*CSS general de elementos*/
body{
    background-color: #2b2a2a;
    color:#ffffff;
    font-family: "Montserrat", sans-serif; 
}
section {
    scroll-margin-top: 80px; /* Ajusta este valor según la altura del navegador para que no tape los headers cuando se haga click */
}

.header2 {
    font-size: 1.875rem; /* Tailwind text-3xl */
    font-weight: 700; /* Tailwind font-bold */
    color: #ffffff; /* Tailwind text-white */
    margin-top: 0.75rem; /* Tailwind mt-3 */
  }
  
  @media (min-width: 640px) { /* Tailwind sm */
    .header2 {
      font-size: 2.25rem; /* Tailwind sm:text-4xl */
    }
  }
  
  .header3 {
    font-size: 1.5rem; /* Tailwind text-2xl */
    font-weight: 700; /* Tailwind font-bold */
    line-height: 1.375; /* Tailwind leading-tight */
    margin-top: 0.5rem; /* Tailwind mt-2 */
  }
  
  @media (min-width: 640px) { /* Tailwind sm */
    .header3 {
      font-size: 1.875rem; /* Tailwind sm:text-3xl */
    }
  }
/* Para las animaciones de la página que van "subiendo" progresivamente para hacer scroll*/
.transition {
opacity: 0;
transform: translateY(3rem); /* translate-y-12 */
transition: all 0.10s ease-in-out; /* transition-all duration-500 */
}

section .section-padding {
    padding: 10px 40px;
}
/* Estilos comunes para los enlaces */
nav{
    position: fixed;
    width: 100%;
    border-bottom:1px solid white;
    z-index: 100;
}
.nav-link {
    border-radius: 0.375rem; /* rounded-md */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #d1d5db; /* text-gray-300 */
  }
  
.nav-link:hover {
    background-color: #4b5563; /* hover:bg-gray-700 */
}
  

a:hover{
    color:#94b9c8;  /*SIEMPRE SE SOBRE-ESCRIBE LO QUE ESTÁ ESCRITO DEBAJO. SI HAY UN BLANCO ENCIMA, PERO PONES AZUL DEBAJO, EL QUE APLICA ES EL AZUL*/
}

/*CSS IDs y Clase*/
.profesion1, .profesion2{
    color:#94b9c8;
          
}

#redessociales {
    list-style: none; /* Elimina los puntos de la lista */
    display: flex; /* Alinea los iconos en fila */
    align-items: left; /* Alinea verticalmente los iconos con el texto */    
}

#redessociales li {
    margin-right: 20px; /* Espacio entre los íconos */
    
}

i {
    font-size: 55px; /* Ajuste del tamaño de los íconos */
}
i:hover{
    color:#94b9c8
}

#inicio{ /*Necesario para que el nav no tape los primeros headers*/
    padding-top:75px;
    
}

#contenedor-inicio {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*min-height: 97vh;*/
    padding-top: 20px;
    clear: both; /* Asegura que el bloque "Sobre mí" esté debajo de cualquier elemento flotante */   
}
#div-contenedor-inicio {
    background: rgba(0, 0, 0, 0.4);
    margin: 0;
    max-width: 1300px;
    padding: 20px;
    border-radius: auto;
}

@media (min-width: 2200px) { /* sm:w-1/2 */
    #div-contenedor-inicio {
        background: rgba(50, 50, 50, 0.25);
        margin: 0 auto;
    }
}


/* Contenedor principal para imagen y texto en Sobre mí */
.contenedor-sobremi {
    display: flex; /* Activa Flexbox */
    flex-direction: row; /* Asegura que la imagen y el texto estén en una fila */
    align-items: center; /* Alinea verticalmente la imagen y el texto */
    gap: 50px; /* Espacio entre la imagen y el texto */
    padding-top:5px;
    padding-bottom:20px; /* Añade margen inferior */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas más pequeñas */
    
}

/* Imagen de mi CV */
.contenedor-sobremi img {
    width: 210px; /* Puedes ajustar el ancho según lo necesites */
    height: auto; /* Mantén la proporción de la imagen */
    border-radius: 8px; /* Opcional: Añade bordes redondeados a la imagen */   
}

.contenedor-sobremi .masinfo button{
    background-color: #94b9c8;
    border-radius: 8px;
    color: black; /* Texto del botón en blanco */
    cursor: pointer; /* Cambia el cursor cuando se pasa por encima del botón */
    font-size:16px;
    font-weight: 550;
    display:flex;
    justify-content: center; /* Centra el texto horizontalmente */
    align-items: center; /* Centra el texto verticalmente */
    border: none; /* Elimina los bordes predeterminados del botón */
    float:right;
}

/*Card de la página*/
.custom-card {
    background-color: #4b5563; /* bg-gray-600 */
    border-radius: 0.5rem;    /* rounded-lg */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* shadow-lg */
    width: 100%;             /* w-full */
    min-height: 22rem;       /* Aumenta la altura de las tarjetas */
}

@media (min-width: 640px) { /* sm:w-1/2 */
    .custom-card {
        width: 50%;
    }
}

@media (min-width: 1024px) { /* lg:w-1/5 */
    .custom-card {
        width: 20%;
    }
}


/*.card-portfolio{
    
    background-color:#525252;
    
    background-position: center;
    background-repeat: no-repeat;
}*/

.masinfo button {
    background-color: #94b9c8; /* Fondo del botón */
    padding: 10px 20px; /* Espaciado interno */
    font-weight: 550; /* Peso de la fuente */
    font-size: 14px; /* Tamaño de la fuente */
    color: black; /* Color del texto */
    cursor: pointer; /* Cursor al pasar por encima */
    display: flex; /* Flex para control interno */
    float: right; /* Posición flotante a la derecha */
    border-radius: 5px; /* Bordes redondeados */
}



#experiencia .titular-experienciayskillss{ /*Para que se vean los dos headers, uno al lado del otro, pero poder tener colores diferentes*/
    display: flex; 
    flex-direction: row; 
    text-align:justify;
    gap:10px; 

}

#experiencia .h2-skills{
    color:#525252;
    
}    

/*Formulario*/
#contactar h2{
    color: white;

}

#contactar h3{

    color: #94b9c8;
}
.input-form {
   background-color:#525252;
   

}

/* Placeholder para el texto de ayuda para tenerlo en cuenta más adelante como idea!
#contactar input::placeholder, 
#contactar textarea::placeholder {
    color: #94b9c8; /* Cambia el color del texto de ayuda */
    /*opacity: 0.7; /* Ajusta la opacidad del placeholder */
/*}
/* Placeholder para el texto de ayuda */

/*Footer*/
footer{
    width: 100%;
    background-color: #161616;
    border-top:1px solid white;
    padding-top:10px;
}
footer ul {
    display: flex; /* Alinea los elementos de forma horizontal */
    list-style: none; /* Elimina los puntos de la lista */
    justify-content: center; /* Centra los elementos en el contenedor */
    padding: 20px 0; /* Añade padding superior e inferior */
    margin: 0; /* Elimina el margin por defecto */
}
footer i{
    font-size:30px;
}