/* General */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
    color: white;
    text-align: center;
}

header {
    position: fixed; /* Fija el header en la parte superior */
    top: 0; /* Posición en la parte superior */
    left: 0; /* Alineado al borde izquierdo */
    width: 100%; /* Que abarque todo el ancho de la página */
    background: #2b2b2b; /* Fondo gris oscuro */
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
    padding: 1em; /* Espaciado interno */
    /*border-bottom: 2px solid #ff3232; /* Línea divisoria */
    display: flex; /* Para alinear título y menú */
    justify-content: space-between; /* Separar título y menú */
    align-items: center; /* Centrar verticalmente el contenido */
}


body {
    padding-top: 80px; /* Agregar espacio para evitar que el contenido quede detrás del header */
}

h1, h2 {
    color: #7ff530;
}

h3 {
    color: #ffffff;
}

h4 {
    color: #eaee1c;
}

a {
    color: #fcfcfc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #ff9999; /* Color más claro al pasar el mouse */
}

.about-me p {
    max-width: 600px; /* Limita el ancho del párrafo */
    margin: 0 auto; /* Centra el párrafo */
    line-height: 1.6; /* Espaciado agradable entre líneas */
    text-align: justify; /* Justifica el texto */
}

/* Encabezado principal */
main h1 {
    font-size: 50px; /* Tamaño del título principal */
    margin-bottom: 20px; /* Espaciado inferior */
    text-align: center; /* Centrar el título */
}

/* Imagen de perfil */
.profile-picture {
    display: block; /* Mostrar como un bloque completo */
    margin: 0 auto; /* Centrar la imagen horizontalmente */
    width: 100%; /* Tamaño responsivo */
    max-width: 600px; /* Tamaño máximo para pantallas grandes */
    height: auto; /* Mantener proporciones */
    border-radius: 10px; /* Bordes redondeados opcionales */
    margin-bottom: 20px; /* Separar la imagen del texto */
}

/* Texto del contenido */
.post-text {
    text-align: justify; /* Justificar el texto */
    max-width: 900px; /* Limitar el ancho del texto */
    margin: 0 auto; /* Centrar el párrafo */
    line-height: 1.6; /* Espaciado entre líneas */
}


/* Estilo para el título */
header h1 {
    list-style: none; /* Eliminar viñetas */
    margin: 0;
    color: #ffffff;
    font-size: 24px;
}

/* Estilo para el menú de navegación */
.nav-bar ul {
    list-style: none; /* Eliminar viñetas */
    display: flex; /* Mostrar los elementos en una sola fila */
    margin: 0;
    padding: 0;
    gap: 15px; /* Espaciado entre los elementos */
}

.nav-bar li {
    margin: 0;
}

.nav-bar a {
    text-decoration: none; /* Eliminar subrayado */
    color: white; /* Color del texto */
    font-weight: bold;
    font-size: 14px;
    transition: color 0.3s ease; /* Suavizar el efecto al pasar el ratón */
}

.nav-bar a:hover {
    color: #bd1f1f; /* Cambiar a rojo brillante al pasar el ratón */
}

@media (max-width: 768px) {
    .cv-container {
        flex-direction: column; /* Coloca los elementos en una columna */
        align-items: center; /* Centra todo en pantallas pequeñas */
    }

    .cv-photo img {
        margin-bottom: 15px; /* Añade espacio entre la imagen y los datos */
    }

    .cv-details {
        text-align: center; /* Centra el texto */
    }
}


.about-container {
    display: flex; /* Flexbox para alinear los elementos horizontalmente */
    justify-content: space-between; /* Espacio entre el texto y la imagen */
    align-items: center; /* Centrar verticalmente los elementos */
    margin: 20px auto; /* Espaciado externo */
    max-width: 80%; /* Ajusta el ancho total del contenedor */
}

.profile-picture {
    width: 500px; /* Tamaño de la imagen */
    height: auto; /* Mantener proporciones */
    border-radius: 0%; /* Opcional: dar forma circular */
}

/* Sección de redes sociales */
.social-media {
    text-align: center;
    margin: 2em 0; /* Espaciado superior e inferior */
    padding: 1em 0;
    background-color: #1a1a1a; /* Fondo oscuro */
    /*border-top: 2px solid #505050; /* Línea superior roja */
}

.social-media h2 {
    color: #f8f8f8; /* Texto blanco */
    margin-bottom: 1em;
    font-size: 24px;
    font-weight: bold;
}

/* Iconos de redes sociales */
.social-icons {
    display: flex;
    justify-content: center; /* Centrar los iconos */
    gap: 20px; /* Espaciado entre los iconos */
    flex-wrap: wrap; /* Ajustar en caso de pantallas pequeñas */
}

.social-icons a img {
    width: 35px; /* Tamaño de los iconos */
    height: 25px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animaciones */
}

.social-icons a img:hover {
    transform: scale(2.1); /* Aumentar tamaño al pasar el ratón */
    opacity: 0.8; /* Efecto de opacidad */
}