*{
    margin: 0; /* Quita los márgenes del navegador */
    padding: 0; /* Quita los rellenos internos */
    box-sizing: border-box; /* Incluye el padding y border en el tamaño total del elemento */
}

html{
    scroll-behavior: smooth; /* Activa desplazamiento suave */
}

html, body{
    font-size: 16px; /* Tamaño base de la fuente */
    font-family: 'Poppins', sans-serif; /* Tipos de fuentes que se usarán */
}

/* NAVEGATION BAR */
nav{
    display: flex; /* Flexbox en fila */
    background-color: #77818a; /* Color de fondo */
    color:#f8f9fa; /* Color de texto */
    font-weight: bold; /* Negrita */
    width: 100%; /* Ancho completo */
    height: 60px; /* Altura de barra */
    align-items: center; /* Centrado vertical */
    justify-content: space-between; /* Separación elementos */
    padding: 0 2rem; /* Espacio lateral */
    position: fixed; /* Barra fija */
    top: 0; 
    left: 0;
    z-index: 1000; /* Sobre otras secciones */
}

a{
    text-decoration: none; /* Quita subrayado */
    color: inherit; /* Hereda color de texto */
}

ul{
    display: flex; /* Elementos en fila */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    list-style: none; /* Quita puntos */
    gap: 2rem; /* Espacio entre elementos */
}

li{
    font-size: 1rem; /* Tamaño de texto */
    cursor: pointer; /* Cambia cursor */
    transition: transform 0.2s; /* Suaviza hover */
}

li:hover{
    color: #bfc7cf; /* Color hover */
    transform: scale(1.05); /* Zoom hover */
}

/* GENERAL SECTIONS */
section{
    width: 100%; /* Ancho completo */
    padding: 6rem 2rem; /* Espaciado interno */
    display: flex; /* Flexbox */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    color: #495057; /* Color texto */
}

.container h2{
    margin-bottom: 3rem; /* Espacio debajo del título */
    font-size: 2.5rem; /* Tamaño título */
    display: inline-block; /* Permite aplicar after */
}

.container h2::after{
    content: ''; /* Línea decorativa */
    display: block; 
    width: 50%; /* Ancho línea */
    height: 4px; /* Alto línea */
    background-color: #a0afbdfb; /* Color línea */
    margin: 0.8rem auto 0; /* Centrando línea */
}

/* ABOUT */
img{
    max-width: 220px; /* Tamaño máximo de imagen */
    height: auto; /* Mantiene proporción */
}

.about-container{
    max-width: 1000px; /* Ancho máximo */
    display: flex; /* Flexbox fila */
    align-items: center; /* Centrado vertical */
    gap: 3rem; /* Espacio entre elementos */
    flex-direction: row-reverse; /* Imagen a la derecha */
}

.text p{
    font-size: 1.1rem; /* Tamaño de texto */
    margin-bottom: 1rem; /* Espacio entre párrafos */
    line-height: 1.6; /* Altura de línea */
}

.about{
    background-color: #e9ecef; /* Fondo sección about */
}

/* SKILLS */
.skills{
    margin-top: 2rem; /* Separación del texto */
    width: 100%; /* Ancho de barras */
}

.skill{
    margin-bottom: 1.5rem; /* Espacio entre skills */
}

.skill span{
    font-size: 1rem; /* Tamaño del nombre skill */
    font-weight: 600; /* Negrita */
    color: #343a40; /* Color texto */
}

.progress{
    background-color: #dee2e6; /* Fondo barra */
    border-radius: 20px; /* Bordes redondeados */
    overflow: hidden; /* Evita que contenido se salga */
    height: 20px; /* Altura barra */
    margin-top: 0.5rem; /* Separación texto/barra */
}

.progress-bar{
    height: 100%; /* Llena altura de barra */
    background-color: #77818a; /* Color barra */
    color: white; /* Texto barra */
    font-size: 0.8rem; /* Tamaño texto */
    text-align: right; /* Texto a la derecha */
    padding-right: 0.5rem; /* Espacio texto/borde */
    line-height: 20px; /* Alineación vertical */
    border-radius: 20px; /* Bordes redondeados */
}

/* Niveles de habilidad */
.python{ width: 85%; }
.html{ width: 80%; }
.js{ width: 70%; }
.cpp{ width: 60%; }

/* PROJECTS */
.my-projects{
    background-color: #dee2e6; /* Fondo proyectos */
    flex-direction: column; /* Tarjetas columna */
    gap: 2rem; /* Espacio entre tarjetas */
}

.projects-container{
    display: flex; /* Flexbox fila */
    gap: 2rem; /* Espacio tarjetas */
    justify-content: center; /* Centrado horizontal */
    flex-wrap: wrap; /* Evita que se aplasten */
}

.card{
    background-color: white; /* Fondo tarjeta */
    font-size: 1rem; /* Tamaño texto */
    width: 380px; /* Ancho tarjeta */
    padding: 2rem; /* Espacio interno */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0 8px 18px rgba(0,0,0,0.12); /* Sombra */
    transition: transform 0.2s; /* Suaviza hover */
}

.card:hover{
    transform: translateY(-6px); /* Efecto flotante */
}

/* CONTACT */
.contact{
    background-color: #ced4da; /* Fondo del contact */
    flex-direction: column; /* Elementos en columna */
}

/* CONTACT WRAPPER: info y formulario */
.contact-wrapper{
    display: flex; /* Flexbox info y form */
    gap: 3rem; /* Separación de elementos */
    flex-wrap: wrap; /* Se apilan en móvil */
    justify-content: center; /* Centrado horizontal*/
    align-items: flex-start; /* Alinea para que el formulario no quede centrado verticalmente*/
}

.contact-info, .contact-form{
    flex: 1; /* Ocupa mismo espacio */
    min-width: 250px; /* Mínimo ancho */
}

/* Formulario */
.contact-form{
    display: flex; /* Flexbox del formulario*/
    flex-direction: column; /* Organiza los elementos en columna */
    gap: 1rem; /* Espaciado entre los elementos del formulario */
}

.contact-form label{
    font-weight: 600; /* Fuente en negritas para los labels del formulario*/
}

/* Inputs y textarea */
.contact-form input,
.contact-form textarea{
    padding: 0.7rem; /* Espaciado interno */ 
    border-radius: 10px; /* Bordes redondeados */
    border: 1px solid #ced4da; /* Color del borde */
    font-size: 1rem;/* Tamaño de la fuente */
    width: 100%; /* Ancho completo */
}

/* Botón */
.contact-form button{
    padding: 0.7rem; /* Espaciado interno entre elementos */
    border-radius: 10px; /* Bordes redondeados */
    border: none; /* Elimina el borde */
    background-color: #77818a; /* Fondo del botón */
    color: white; /* Color de la fuente */
    font-weight: bold; /* Fuente en negritas*/
    cursor: pointer; /* Cambia el cursos al pasarlo por el botón*/
    transition: background-color 0.3s; /* Suaviza el cambio de color */
}
.contact-form button:hover{
    background-color: #5f6670; /* Color de fondo del botón al pasar el cursor */
}

/* FOOTER */
footer{
    background-color: #77818a; /* Fondo footer */
    color: white; /* Texto */
    text-align: center; /* Centrado */
    padding: 1.5rem; /* Espacio interno */
    font-size: 1rem; /* Tamaño fuente */
    font-weight: bold; /* Negrita */
}

/* ESPACIO PARA QUE NO QUEDE BAJO NAV */
main{
    padding-top: 60px; /* Igual a la altura de la nav bar */
}

/* DETAILS CARD */
details{
    cursor: pointer; /* Cursor pointer */
}

details summary{
    list-style: none; /* Quita marcador */
}

details summary::-webkit-details-marker{
    display: none; /* Quita flecha Chrome */
}

.extra-content{
    margin-top: 1rem; /* Separación contenido extra */
}

.extra-content img{
    width: 100%; /* Imagen usa todo ancho */
    margin-top: 1rem; /* Separación texto/imágen */
    border-radius: 10px; /* Bordes redondeados */
}

details[open]{
    transform: scale(1.03); /* Zoom al abrir */
    transition: 0.3s ease; /* Suaviza transición */
}

/* RESPONSIVE*/
@media screen and (max-width: 768px){
    .about-container{
        flex-direction: column; /* Imagen arriba, texto abajo */
        text-align: center; /* Alinea el texto al centro */
    }

    .contact-wrapper{
        flex-direction: column; /* Info y formulario en columna */
        align-items: center; /* Centra horizontalmente */
    }
}