/* ////////////////////////////////////////////////////Estilos generales */

/* Reset de estilos básicos */
* {
    box-sizing: border-box; /* Incluye bordes y padding dentro de las dimensiones totales */
    margin: 0; /* Elimina el margen predeterminado */
    padding: 0; /* Elimina el relleno predeterminado */
}

/* Configuración base del documento */
html {
    font-size: 62.5%; /* Establece la base para que 1rem = 10px */
    scroll-padding-top: 48rem; /* Ajusta este valor a la altura de tu encabezado */

}

body {
    font-family: 'Arial', sans-serif; /* Define la fuente principal */
    font-size: 1.6rem; /* Tamaño de texto base equivalente a 16px */
    line-height: 1.6; /* Espaciado entre líneas para mejorar la legibilidad */
    background-color: #f4f4f9; /* Color de fondo suave para mejor contraste */
    color: #333; /* Color de texto principal */
    width: 100%; /* Asegura que el cuerpo ocupe todo el ancho disponible */
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
    padding-top: 8rem; /* Espaciado superior para compensar el encabezado fijo */
}



/* ////////////////////////////////////////////////////////////Encabezado */

/* Estilos generales del encabezado */
header {
    background-color: #4CAF50; /* Color de fondo principal */
    color: white; /* Color del texto en el encabezado */
    padding: 2rem 3rem; /* Espaciado interno ajustado */
    position: fixed; /* Fija el encabezado en la parte superior */
    top: 0; /* Posiciona el encabezado al borde superior */
    left: 0; /* Alinea el encabezado al borde izquierdo */
    right: 0; /* Alinea el encabezado al borde derecho */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08); /* Sombra suave para un efecto moderno */
    width: 100%; /* El encabezado ocupa todo el ancho */
    display: flex; /* Activa el modelo flexbox */
    justify-content: space-between; /* Espacia los elementos horizontalmente */
    align-items: center; /* Alinea verticalmente los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

/* Contenedor del contenido principal del encabezado */
.header-content {
    display: flex; /* Flexbox para alinear el contenido */
    flex-direction: column; /* Alinea los elementos verticalmente */
    align-items: flex-start; /* Alinea los elementos al inicio */
}

/* Estilo del título principal (h1) */
header h1 {
    font-size: 3rem; /* Tamaño del título principal (30px) */
    margin-bottom: 1rem; /* Espaciado mayor para separar del subtítulo */
}

/* Estilo del subtítulo (h2) */
header h2 {
    font-size: 1.5rem; /* Tamaño del subtítulo (20px) */
    font-weight: 400; /* Peso de fuente más delgado */
    color: #cccccc; /* Color más claro para diferenciar del título */
    line-height: 1.4; /* Aumenta el espacio entre líneas para legibilidad */
}

/* Navegación */
nav {
    display: flex; /* Organiza los botones con flexbox */
    flex-wrap: nowrap; /* Evita que los botones se envuelvan */
    justify-content: space-around; /* Espacia uniformemente los botones */
    align-items: center; /* Alinea verticalmente los botones */
    gap: 0.3rem; /* Reduce el espacio entre botones */
    padding: 0.4rem 0.6rem; /* Reduce el espaciado interno */
    margin: 0; /* Elimina cualquier margen externo */
    max-width: 100%; /* Asegura que no exceda el ancho */
    overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
}

nav a {
    background-color: white; /* Fondo distintivo */
    color: #4CAF50; /* Color del texto */
    text-decoration: none; /* Elimina subrayado */
    font-size: 1rem; /* Tamaño de texto reducido */
    padding: 0.5rem 1rem; /* Espaciado interno reducido */
    border-radius: 2rem; /* Bordes redondeados moderados */
    border: 2px solid #4CAF50; /* Borde para definición */
    transition: all 0.3s ease; /* Transición suave */
    display: inline-block; /* Se comporta como un botón */
}

nav a:hover, nav a:focus {
    background-color: #4CAF50; /* Fondo verde al interactuar */
    color: white; /* Texto blanco */
    border-color: white; /* Cambia el color del borde */
}

header h1 {
    margin-bottom: 0.5rem; /* Ajusta el espacio entre el título y el nav */
}

header {
    padding-bottom: 0; /* Elimina cualquier padding inferior del header */
}


/* //////////////////////////////////////////////////////////////Barra lateral */
.sidebar {
    position: fixed; /* Fija la barra en la pantalla */
    top: 75%; /* Mueve la barra a 3/4 partes de la pantalla */
    right: 0; /* La coloca al lado derecho */
    transform: translateY(-50%); /* Ajusta la posición para centrado vertical relativo */
    display: flex; /* Permite organizar los íconos */
    flex-direction: column; /* Ordena los elementos verticalmente */
    background-color: #4CAF50; /* Color de fondo */
    padding: 0.5rem; /* Espaciado interno más reducido */
    border-radius: 10px 0 0 10px; /* Bordes redondeados hacia la izquierda */
    width: 4rem; /* Reduce el ancho de la barra */
    z-index: 999; /* Asegura que esté por encima del contenido */
}

/* Espaciado entre los íconos */
.sidebar a {
    margin: 0.3rem 0; /* Reduce la separación vertical entre los enlaces */
}

/* Estilos de los íconos */
.sidebar img {
    width: 30px; /* Tamaño reducido para los íconos */
    height: 30px; /* Asegura un tamaño uniforme y compacto */
    border-radius: 50%; /* Mantiene los íconos circulares */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza los efectos de hover */
}

/* Efectos de hover para los íconos */
.sidebar img:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño en hover */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo claro al pasar el cursor */
}



/* ////////////////////////////////////////////////////////////////"Acerca de mí" */
#about {
    background-color: #f9f9f9; /* Fondo suave */
    padding: 3rem 1.5rem; /* Espaciado interno amplio */
    margin-top: 8rem; /* Asegura que no sea tapado por el encabezado */
    text-align: left; /* Alinea el texto a la izquierda */
    border-left: 5px solid #4CAF50; /* Línea decorativa a la izquierda */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

/* Título */
#about h2 {
    font-size: 3rem; /* Título más grande */
    color: #4CAF50; /* Verde llamativo */
    margin-bottom: 2rem; /* Separación del texto */
    border-bottom: 2px solid #4CAF50; /* Subrayado decorativo */
    padding-bottom: 0.5rem;
}

/* Sección "Acerca de mí" */
#about {
    background-color: #ffffff; /* Fondo claro */
    padding: 3rem 1.5rem; /* Espaciado interno */
    margin-top: 8rem; /* Separación desde el encabezado */
    margin-bottom: 4rem; /* Espaciado inferior hacia la sección de tecnologías */
    text-align: left; /* Alinea el texto a la izquierda */
    border-left: 5px solid #4CAF50; /* Línea decorativa a la izquierda */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra ligera */
}

/* Título */
#about h2 {
    font-size: 2.5rem; /* Aumenta el tamaño del título */
    color: #4CAF50; /* Verde llamativo */
    margin-bottom: 2rem; /* Espaciado entre el título y el contenido */
    border-bottom: 2px solid #4CAF50; /* Subrayado decorativo */
    padding-bottom: 0.5rem; /* Espaciado para el subrayado */
    text-align: center; /* Centra todo el contenido */
}

/* Texto */
#about p {
    font-size: 1.8rem; /* Tamaño del texto cómodo */
    line-height: 1.8; /* Espaciado entre líneas */
    color: #333; /* Color oscuro para mejor contraste */
    margin-bottom: 1.5rem; /* Espaciado entre párrafos */
}

/* Listas (si se utilizan) */
#about ul {
    list-style-type: disc; /* Viñetas estándar */
    margin-left: 2rem; /* Separación del contenido principal */
    color: #333; /* Color oscuro */
}

#about ul li {
    margin-bottom: 1rem; /* Espaciado entre elementos de la lista */
    font-size: 1.6rem; /* Alineado con el texto */
}

/* Negritas dentro del texto */
#about p strong {
    color: #333; /* Color oscuro */
    font-weight: bold; /* Destaca el texto */
}




/* ///////////////////////////////////////////////////////////////////Tecnologías */
/* Sección "Tecnologías" */
#technologies {
    background-color: #ffffff; /* Fondo claro */
    padding: 3rem 1.5rem; /* Espaciado interno */
    text-align: center; /* Centra todo el contenido */
    border-left: 5px solid #4CAF50; /* Barra decorativa */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra ligera */
    margin-top: 4rem; /* Espaciado superior hacia la sección de "Acerca de mí" */
}

/* Título principal */
#technologies h2 {
    font-size: 3rem; /* Tamaño del título */
    color: #4CAF50; /* Verde llamativo */
    margin-bottom: 2rem; /* Espaciado con el contenido */
    border-bottom: 2px solid #4CAF50; /* Línea decorativa */
    padding-bottom: 0.5rem; /* Espaciado para el subrayado */
}


/* Categorías */
.tech-category {
    margin-bottom: 3rem; /* Espaciado entre categorías */
}

.tech-category h3 {
    font-size: 2rem; /* Tamaño del subtítulo */
    color: #333; /* Color oscuro */
    margin-bottom: 1rem; /* Espaciado con las badges */
    text-align: left; /* Alinea el título de las categorías a la izquierda */
}

/* Badges */
/* Contenedor de las badges */
.tech-badges {
    display: flex; /* Organiza las badges en fila */
    flex-wrap: wrap; /* Permite que se ajusten en múltiples filas si es necesario */
    justify-content: center; /* Centra las badges horizontalmente */
    gap: 1.5rem; /* Incrementa el espaciado entre badges */
    margin-top: 2rem; /* Espaciado superior con otras secciones */
}

/* Estilo para las imágenes de las badges */
.tech-badges img {
    height: auto; /* Mantiene la proporción original */
    max-width: 150px; /* Aumenta el tamaño máximo de las badges */
    border-radius: 15px; /* Bordes redondeados */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto suave */
}

/* Efecto hover en las badges */
.tech-badges img:hover {
    transform: scale(1.15); /* Aumenta ligeramente el tamaño al pasar el cursor */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más prominente */
}




/*////////////////////////////////////////////////////////// proyectos*/


#projects {
    padding: 3rem 1.5rem; /* Espaciado interno */
    background-color: #ffffff; /* Fondo blanco */
    border-left: 5px solid #4CAF50; /* Barra decorativa */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* Sombra ligera */
    margin-top: 2rem; /* Separación con la sección anterior */
}

/* Título de la sección */
#projects h2 {
    font-size: 3rem; /* Tamaño grande */
    color: #4CAF50; /* Verde llamativo */
    margin-bottom: 2rem; /* Espaciado con el filtro */
    text-align: center; /* Centra el título */
    border-bottom: 2px solid #4CAF50; /* Subrayado decorativo */
    padding-bottom: 0.5rem; /* Espaciado interno */
}

#filter-container {
    display: flex; /* Activa flexbox */
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra horizontalmente */
    justify-content: center; /* Centra verticalmente dentro del contenedor */
    margin: 2rem 0; /* Espaciado superior e inferior */
    gap: 1rem; /* Espaciado entre el label y el selector */
}

#filter-container label {
    font-size: 2rem; /* Tamaño del texto */
    color: #4CAF50; /* Verde consistente con los títulos */
    font-weight: bold; /* Resalta el texto */
}



#project-filter {
    display: block; /* Asegura que esté centrado */
    padding: 0.7rem 1.5rem; /* Ajusta el tamaño del selector */
    border: 2px solid #4CAF50; /* Borde verde consistente */
    border-radius: 2rem; /* Redondeo más pronunciado */
    font-size: 1.4rem; /* Tamaño del texto */
    font-weight: bold; /* Resalta el texto */
    background-color: white; /* Fondo blanco */
    color: #4CAF50; /* Texto verde */
    text-align: center; /* Centra el texto */
    cursor: pointer; /* Indica interactividad */
    transition: all 0.3s ease; /* Transición suave */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    max-width: 300px; /* Ancho máximo */
    margin: 0 auto; /* Centra horizontalmente */
}

/* Hover y Focus */
#project-filter:hover {
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Texto blanco */
    border-color: white; /* Borde blanco */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Sombra más prominente */
}

#project-filter:focus {
    outline: none; /* Sin borde predeterminado */
    box-shadow: 0 0 8px rgba(72, 239, 128, 0.6); /* Resalta el selector */
}

/* //////////////////////////////////////////////////////////////////Proyectos */

/* Contenedor Principal de Proyectos */
#projects-container {
    display: grid; /* Diseño en cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajuste dinámico */
    gap: 2rem; /* Espaciado entre tarjetas */
    padding: 2rem; /* Espaciado interno */
    background-color: #f9f9f9; /* Fondo claro */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    margin-top: 2rem; /* Separación con la sección anterior */
}

/* Estilo de cada Tarjeta de Proyecto */
.project {
    background-color: #fff; /* Fondo blanco */
    border: 1px solid #ddd; /* Borde sutil */
    border-radius: 10px; /* Bordes redondeados */
    padding: 1.5rem; /* Espaciado interno */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

/* Efecto Hover en la Tarjeta */
.project:hover {
    transform: translateY(-10px); /* Eleva ligeramente la tarjeta */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Sombra más prominente */
}

/* Estilo del Título del Proyecto */
.project h3 {
    font-size: 2.2rem; /* Tamaño destacado */
    color: #4CAF50; /* Verde consistente */
    margin-bottom: 1rem; /* Separación con el texto */
    text-align: center; /* Centrado */
}

/* Estilo de la Descripción del Proyecto */
.project p {
    font-size: 1.8rem; /* Texto cómodo */
    color: #555; /* Gris oscuro */
    line-height: 1.6; /* Espaciado entre líneas */
    margin-bottom: 1rem; /* Separación con la imagen */
    text-align: left; /* Justifica el texto */
}


/* Botón de Enlace */

/* Botón estilo encabezado */
.btn {
    display: inline-block;
    background-color: white;
    color: #4CAF50;
    padding: 0.8rem 1.5rem;
    border: 2px solid #4CAF50;
    border-radius: 25px;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.btn:hover {
    background-color: #4CAF50;
    color: white;
    border-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* Imagen dentro de la Tarjeta */

/* Contenedor de las imágenes */
.images {
    display: flex; /* Organiza las imágenes en línea */
    flex-wrap: wrap; /* Permite que las imágenes se ajusten en varias filas si es necesario */
    gap: 1.5rem; /* Espaciado entre imágenes */
    justify-content: center; /* Centra las imágenes dentro del contenedor */
    margin-top: 1.5rem; /* Espaciado superior respecto al enlace */
    padding: 0.5rem; /* Espaciado interno opcional */
}

/* Estilo para cada imagen */
.images img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho de su contenedor */
    max-width: 350px; /* Aumenta el tamaño máximo de las imágenes */
    height: auto; /* Mantiene las proporciones */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra ligera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover en las imágenes */
.images img:hover {
    transform: scale(1.1); /* Aumenta ligeramente el tamaño */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más prominente */
}





/* Etiqueta de Categoría */
.project-category {
    display: inline-block;
    background-color: #4CAF50; /* Fondo verde */
    color: white; /* Texto blanco */
    padding: 0.3rem 1rem; /* Espaciado interno */
    font-size: 1.2rem; /* Tamaño más pequeño */
    border-radius: 15px; /* Bordes redondeados */
    margin-bottom: 1rem; /* Separación con el contenido */
    font-weight: bold; /* Resalta la etiqueta */
    text-align: center; /* Centra el texto */
}



/* Pie de página */
/* Estilos para el footer */
footer {
    background-color: #4CAF50; /* Fondo verde consistente con el diseño */
    color: white; /* Texto blanco para contraste */
    padding: 2rem 1.5rem; /* Espaciado interno */
    text-align: center; /* Centra todo el contenido */
    border-top: 3px solid #388E3C; /* Línea decorativa superior */
}

/* Contenido del footer */
.footer-content {
    max-width: 800px; /* Limita el ancho máximo */
    margin: 0 auto; /* Centra horizontalmente */
    font-size: 1.4rem; /* Tamaño de texto cómodo */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* Lista de enlaces sociales */
.social-links {
    display: flex; /* Organiza los enlaces en línea */
    justify-content: center; /* Centra los enlaces */
    gap: 1rem; /* Espaciado entre enlaces */
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el relleno */
    margin: 1rem 0 0; /* Espaciado superior */
}

/* Estilo de los enlaces */
.social-links a {
    color: white; /* Texto blanco */
    text-decoration: none; /* Elimina el subrayado */
    font-size: 1.4rem; /* Tamaño del texto */
    border-bottom: 2px solid transparent; /* Línea inferior invisible */
    transition: all 0.3s ease; /* Transición suave */
}

/* Hover en los enlaces */
.social-links a:hover {
    color: #f9f9f9; /* Color más claro */
    border-bottom: 2px solid white; /* Línea inferior visible */
}