/* ========================== */
/* 📌 ESTILOS GENERALES */
/* ========================== */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #212529;
}

/* 📌 EVITAR DESPLAZAMIENTO LATERAL */
html, body {
    overflow-x: hidden; /* 🔹 Elimina el scroll horizontal */
    width: 100%;
}

/* ========================== */
/* 📌 MENÚ HAMBURGUESA PARA MÓVILES */
/* ========================== */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
    }

    /* 📌 BOTÓN DE INICIO EN EL CENTRO */
    .inicio-btn {
        font-size: 16px;
        font-weight: bold;
        color: black;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1100;
    }

    /* 📌 MENÚ HAMBURGUESA */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 28px;
        cursor: pointer;
        color: black;
        position: absolute;
        right: 20px;
        top: 15px;
        z-index: 1100;
    }

    /* 📌 FORZAR EL MENÚ A ESTAR PEGADO AL HEADER */
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: white;
    }

    /* 📌 MENÚ OCULTO POR DEFECTO */
    .menu {
        visibility: hidden;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: white;
        padding: 15px 0;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.3s ease-in-out;
    }

    @media (max-width: 768px) {
        .menu {
            display: flex;  /* Asegura que el menú esté visible */
            flex-direction: column;
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            background: white;
            padding: 15px 0;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            opacity: 0;
            transform: translateY(-20px);
            transition: all 0.3s ease-in-out;
            pointer-events: none; /* Evita clics cuando está oculto */
        }
    
        /* 📌 MENÚ ACTIVO CUANDO SE ABRE */
        .menu.active {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            pointer-events: all; /* Permitir interacción */
        }
    }  

    /* 📌 ITEMS DEL MENÚ */
    .menu li {
        text-align: center;
        padding: 12px 0;
    }

    /* 📌 EVITAR QUE EL BOTÓN HAMBURGUESA SE VUELVA AZUL AL TOCARLO */
    .menu-toggle:focus,
    .menu-toggle:active {
        outline: none !important;
        box-shadow: none !important;
    }
}

/* ========================== */
/* 📌 OCULTAR MENÚ HAMBURGUESA EN ESCRITORIO */
/* ========================== */
@media (min-width: 769px) {
    .menu-toggle {
        display: none !important;
    }

    /* 📌 Mostrar menú normal en escritorio */
    .menu {
        display: flex !important;
        position: static;
        box-shadow: none;
        background: none;
        flex-direction: row;
        opacity: 1;
        visibility: visible;
    }
}

/* ========================== */
/* Ajuste del Contenedor */
/* ========================== */
.container {
    max-width: 1200px; /* Aumentamos el ancho máximo */
    margin: 0 auto; /* Centramos el contenido */
    padding: 0 20px; /* Más espacio lateral para evitar cortes */
    display: block; /* Asegura que no esté oculto */
}

/* ========================== */
/* Ajuste de Secciones */
/* ========================== */
section {
    padding-top: 80px; /* Reducimos el padding para evitar que el contenido se oculte */
    padding-bottom: 60px;
    max-width: 1200px; /* Permitir un mejor ajuste en pantallas grandes */
    margin: 0 auto;
    display: block;
}

/* ✅ Evitar que el header fijo oculte las secciones al hacer scroll */
section {
    scroll-margin-top: 70px; /* Ajuste según la altura del header */
}

/* ========================== */
/* Sección de Presentación (Hero) */
/* ========================== */
.hero {
    background: linear-gradient(to right, #0077b6, #00a8e8); /* Efecto degradado moderno */
    color: white;
    text-align: center;
    padding: 100px 10%;
    border-radius: 0 0 30px 30px;
}

/* Título */
.hero h1 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Descripción */
.hero p {
    font-size: 18px;
    max-width: 800px;
    margin: auto;
    line-height: 1.6;
}

/* ========================== */
/* Sección de Proyectos Destacados */
/* ========================== */
.projects {
    background: white;
    padding: 80px 10%;
    text-align: center;
}

/* Título de la Sección */
.projects-title {
    font-size: 32px;
    color: #0077b6;
    margin-bottom: 40px;
}

/* Contenedor de Proyectos */
.project-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px; /* 📌 Reduce la separación */
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

/* Cada Proyecto */
.project {
    flex: 1;
    min-width: 280px;
    max-width: 450px; /* 📌 Ancho más angosto */
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto Hover */
.project:hover {
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(0, 119, 182, 0.2);
}

/* Contenedor Interno del Proyecto */
.project-content {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}

/* Imagen del Proyecto */
.project img {
    width: 100%;
    height: 180px; /* 📌 Reduce la altura de la imagen */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project:hover img {
    transform: scale(1.1);
}

/* Texto del Proyecto */
.project-text {
    padding: 20px;
}

.project h3 {
    font-size: 20px; /* 📌 Reduce el tamaño del título */
    color: #005b96;
    margin-bottom: 8px;
}

.project p {
    font-size: 15px; /* 📌 Texto ligeramente más compacto */
    color: #333;
    line-height: 1.4;
}

/* ========================== */
/* RESPONSIVE: Ajuste en Móviles */
/* ========================== */
@media (max-width: 768px) {
    .project-container {
        flex-direction: column;
        align-items: center;
    }

    .project {
        width: 85%; /* 📌 Se ve más estilizado en móviles */
    }

    .project img {
        height: 160px; /* 📌 Reduce la imagen en móviles */
    }
}

/* ========================== */
/* Animaciones */
/* ========================== */
section {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}

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

/* ========================== */
/* Sección Sobre Mí */
/* ========================== */
.about {
    padding: 80px 10%;
    background: white;
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.about-image img {
    width: 250px; /* Mantiene el tamaño de la imagen */
    height: 250px; /* Mantiene un formato cuadrado */
    border-radius: 10px; /* Suaviza los bordes */
    object-fit: cover;
    border: none; /* Se elimina el borde azul */
}

.about-text {
    max-width: 600px;
}

.about-text h2 {
    font-size: 28px;
    color: #0077b6;
}

.about-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* ========================== */
/* 📌 SECCIÓN DE CONTACTO SIN CONTENEDOR */
/* ========================== */
.contacto {
    background: #0077b6; /* 🔹 Azul profesional */
    color: white;
    padding: 80px 10%;
    text-align: center;
}

/* 📌 Título y descripción */
.contacto h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

.contacto p {
    font-size: 18px;
    max-width: 700px;
    margin: auto;
}

/* 📌 Estilos del formulario */
.contacto form {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
    text-align: left;
}

/* 📌 Estilos de los campos */
.contacto .input-group {
    margin-bottom: 20px;
}

.contacto label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.contacto input,
.contacto textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
}

/* 📌 Botón de enviar */
.contacto button {
    background: white;
    color: #0077b6;
    font-size: 18px;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease-in-out, color 0.3s;
}

.contacto button:hover {
    background: #005f99;
    color: white;
}

/* 📌 Responsivo en móviles */
@media (max-width: 768px) {
    .contacto {
        padding: 60px 5%;
    }

    .contacto form {
        max-width: 100%;
    }
}


/* ========================== */
/* Resaltar el enlace activo en el menú */
/* ========================== */
nav ul li a.active {
    color: #ff5733; /* Un color llamativo */
    border-bottom: 2px solid #ff5733;
    padding-bottom: 5px;
}

/* ========================== */
/* Sección Mi Experiencia Laboral */
/* ========================== */
.experience {
    padding: 80px 10%;
    background: #f8f9fa; /* Se mantiene el color de fondo original */
}

.experience-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.experience-text {
    max-width: 50%; /* Mantiene el texto a la izquierda */
}

.experience-text h2 {
    font-size: 28px;
    color: #0077b6;
}

.experience-text p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* Imagen de Experiencia */
.experience-image img {
    width: 100%; /* Se ajusta al tamaño del div */
    max-width: 400px; /* Tamaño máximo de la imagen */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    object-fit: cover;
}

/* ========================== */
/* 📌 AJUSTE EN MÓVILES - EXPERIENCIA LABORAL */
/* ========================== */
@media (max-width: 768px) {
    .experience-content {
        display: flex;
        flex-direction: column-reverse; /* Imagen debajo del texto */
        align-items: center; /* Centrar todo */
        text-align: center; /* Centrar el contenido */
    }

    .experience-text {
        max-width: 90%; /* Ajustar ancho del texto */
        text-align: center; /* Asegurar que el texto esté centrado */
        margin-bottom: 15px; /* Espacio entre texto e imagen */
    }

    .experience-image img {
        width: 80%; /* Ajustar tamaño de la imagen */
        max-width: 250px; /* Tamaño máximo */
        margin-top: 10px; /* Espaciado con el texto */
    }
}

/* ========================== */
/* Sección del Logo y Redes Sociales con Video de Fondo */
/* ========================== */
.logo-section {
    position: relative;
    padding: 120px 10%; /* Ajuste de altura para que el contenido se vea bien */
    background: transparent; /* Fondo transparente para el video */
    text-align: center;
    overflow: hidden; /* Evita que el video sobresalga */
}

/* Contenedor del Video de Fondo */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Envía el video al fondo */
    overflow: hidden;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta el video para que cubra la sección */
    position: absolute;
    top: 0;
    left: 0;
}

/* Contenedor del Logo y Redes Sociales */
.logo-section .container {
    position: relative;
    z-index: 2; /* Mantiene el logo y redes sobre el video */
}

/* Ajuste del Logo */
.logo-container img {
    width: 300px; /* Tamaño más grande */
    height: auto;
    margin-bottom: 20px; /* Espacio debajo del logo */
}

/* Línea Separadora */
.separator {
    width: 60%; /* Más larga para que se vea mejor */
    max-width: 600px; /* Máximo ancho */
    height: 4px;
    background: #0077b6; /* Azul corporativo */
    margin: 20px auto;
}

/* Redes Sociales */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espaciado entre iconos */
    margin-top: 20px;
}

.social-icons a img {
    width: 100px; /* Tamaño más grande para que se vean mejor */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.social-icons a img:hover {
    transform: scale(1.2); /* Efecto hover */
}

/* ========================== */
/* Sección de Habilidades */
/* ========================== */
.skills {
    background: inherit; /* Mantiene el color de fondo original de la página */
    padding: 80px 10%;
    text-align: center;
}

/* Estilos del Título */
.skills-title {
    text-align: center;
    font-size: 32px;
    color: #0077b6;
    margin-bottom: 40px;
}

/* Contenedor de Habilidades */
.skills-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que las habilidades se ajusten en pantallas pequeñas */
    gap: 40px;
}

/* Cada Habilidad */
.skill {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    width: 30%; /* Cada habilidad ocupa el 30% del ancho */
    text-align: center;
    transition: transform 0.3s ease-in-out;
}

.skill:hover {
    transform: translateY(-5px);
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.2);
}

/* Estilos de las Imágenes de las Habilidades */
.skill img {
    width: 120px; /* Tamaño de las imágenes tipo vector */
    height: auto;
    margin-bottom: 15px;
}

/* ========================== */
/* RESPONSIVE: Para Pantallas Pequeñas */
/* ========================== */
@media (max-width: 1024px) {
    .skills-container {
        flex-direction: column; /* Apila habilidades en pantallas pequeñas */
        align-items: center;
    }

    .skill {
        width: 90%; /* Ocupa más espacio en pantallas pequeñas */
    }
}

/* ========================== */
/* Sección de Contacto */
/* ========================== */
.contact {
    background: #0077b6; /* Azul profesional y elegante */
    padding: 80px 10%;
    text-align: center;
    color: white; /* Texto en blanco para contraste */
}

/* Estilos del Título */
.contact-title {
    text-align: center;
    font-size: 32px;
    color: white; /* Asegura que el título sea visible */
    margin-bottom: 40px;
}

/* Estilos del Formulario */
.contact-form {
    max-width: 500px;
    margin: 0 auto; /* Centrar formulario */
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.2);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 15px;
}

.contact-form button {
    background: #005f99;
    color: white;
    padding: 12px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    transition: background 0.3s ease-in-out;
    width: 100%;
}

.contact-form button:hover {
    background: #004577;
}

/* ========================== */
/* Pie de Página (Footer) Mejorado */
/* ========================== */
.footer {
    background: #2f2f2f; /* Un gris oscuro más suave */
    padding: 15px 10%; /* Reducimos la altura */
    text-align: center;
    color: white;
}

/* Texto del Footer */
.footer p {
    font-size: 14px; /* Un poco más pequeño */
    margin-bottom: 10px; /* Menos espacio */
}

/* Iconos del Footer */
.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espaciado entre los íconos */
}

.footer-social-icons a img {
    width: 28px; /* Un poco más pequeño */
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.footer-social-icons a img:hover {
    transform: scale(1.15); /* Ligero efecto hover */
}

/* ========================== */
/* Botón "Conocer más" en Experiencia */
/* ========================== */
.btn-experience {
    display: inline-block;
    background: #0077b6;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
    margin-top: 15px;
}

.btn-experience:hover {
    background: #005f99;
}

/* ========================== */
/* Enlace "Volver al Portafolio" */
/* ========================== */
.btn-return {
    font-size: 18px;
    font-weight: bold;
    color: black; /* Azul principal */
    text-decoration: none; /* Sin subrayado */
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}

.btn-return:hover {
    color: #333; /* Azul más oscuro al pasar el mouse */
    text-decoration: underline; /* Aparece subrayado al pasar el mouse */
}

/* ========================== */
/* 📌 ENCABEZADO DE LA PÁGINA "SEMBREMOS SEGURIDAD" */
/* ========================== */
.simple-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* ========================== */
/* 📌 EVITAR DESPLAZAMIENTO LATERAL EN TODA LA PÁGINA */
/* ========================== */
html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ========================== */
/* 📌 SECCIÓN "SEMBREMOS SEGURIDAD" */
/* ========================== */
.sembremos {
    background: #f8f9fa; /* Fondo claro */
    padding: 150px 8% 80px; /* 🔹 Ajustamos el padding lateral */
    text-align: center;
    display: block;
    width: 100%;
    min-height: 100vh;
    opacity: 1;
    visibility: visible;
    margin: 0 auto;
    max-width: 1400px; /* 🔹 Hacemos el contenedor más ancho */
    box-sizing: border-box;
}

/* 📌 CONTENEDOR DEL CONTENIDO */
.content-box {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 1000px; /* 🔹 Ampliamos el contenedor */
    width: 100%;
    margin: auto;
    text-align: left;
    box-sizing: border-box;
}

/* ========================== */
/* 📌 TÍTULO "SEMBREMOS SEGURIDAD" CENTRADO */
/* ========================== */
.sembremos h1 {
    color: #0077b6;
    font-size: 36px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

.sembremos h2 {
    color: #005f99;
    font-size: 28px;
    margin-top: 30px;
}

/* ========================== */
/* 📌 ESTILOS DEL TEXTO */
/* ========================== */
.sembremos p, 
.sembremos ul {
    font-size: 18px;
    color: black;
    line-height: 1.6;
    text-align: justify;
}

/* 📌 ESTILOS DE LISTAS */
.sembremos ul {
    list-style-type: disc;
    margin-left: 40px;
    text-align: left;
}

/* ========================== */
/* 📌 AJUSTE DE IMÁGENES */
/* ========================== */
.sembremos img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ========================== */
/* 📌 LOGOS ENCIMA DEL CONTENIDO */
/* ========================== */
.logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
}

.logos-container img {
    height: 230px;
    width: auto;
}

/* ========================== */
/* 📌 RESPONSIVE: AJUSTE EN MÓVILES */
/* ========================== */
@media (max-width: 768px) {
    .sembremos {
        padding: 60px 5%;
        max-width: 100%;
    }

    .content-box {
        padding: 20px;
        width: 100%;
        margin: 0 auto;
        max-width: 95%; /* 🔹 Más ancho en móviles */
    }

    /* 📌 Evita desbordamiento lateral */
    section {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 📌 Ajuste del encabezado */
    .simple-header {
        height: 60px;
    }

    /* 📌 Reducción del tamaño de los logos */
    .logos-container img {
        height: 120px;
    }
}

/* ========================== */
/* 📌 ENCABEZADO TRANSPARENTE CON TEXTO NEGRO */
/* ========================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-bottom: none;
    z-index: 1000;
    transition: background 0.3s ease-in-out;
}

/* 📌 Contenedor del Header */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    position: relative;
}

/* 📌 BOTÓN DE INICIO */
.inicio-btn {
    font-size: 16px;
    font-weight: bold;
    color: black;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.inicio-btn:hover {
    color: #0077b6;
}

/* 📌 MENÚ DE NAVEGACIÓN */
nav {
    flex-grow: 1;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-size: 16px;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

/* 📌 EFECTO AL HACER SCROLL */
header.scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

header.scrolled nav ul li a {
    color: black;
}

/* ========================== */
/* 📌 Ajuste del encabezado en móviles */
/* ========================== */
/* 📌 Corrige el efecto del encabezado en móviles */
@media (max-width: 768px) {
    nav ul.menu.active {
        background: rgba(255, 255, 255, 0.95) !important; /* 🔹 Asegura la visibilidad */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;
    }

    header.scrolled {
        background: rgba(255, 255, 255, 0.9) !important; /* 🔹 Asegura el fondo con opacidad */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;
    }

    /* 📌 Ajuste del menú en móviles */
    nav {
        background: rgba(255, 255, 255, 0.95); /* 🔹 Evita problemas de visibilidad */
    }

    .menu {
        background: rgba(255, 255, 255, 0.95); /* 🔹 Hace que el menú sea visible */
    }

    /* 🔹 Asegura que los enlaces del menú sean visibles */
    .menu li a {
        color: black !important;
    }

    /* 🔹 Asegura que los enlaces cambien correctamente al hacer scroll */
    header.scrolled nav ul li a {
        color: black !important;
    }
}

@media (max-width: 768px) {
    header.scrolled {
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ========================== */
/* Contenedor de Descarga */
/* ========================== */
.download-container {
    margin-top: 40px;
    padding: 20px;
    background: #eef2f3; /* Fondo claro para resaltar */
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
}

.download-container h2 {
    color: #0077b6;
    font-size: 24px;
    margin-bottom: 10px;
}

.download-container p {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

/* Botón de descarga */
.download-btn {
    display: inline-block;
    background: #0077b6;
    color: white;
    font-size: 18px;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.download-btn:hover {
    background: #005f99;
}

/* ========================== */
/* Pie de Página (Footer) */
/* ========================== */
.footer {
    background: #2f2f2f;
    padding: 15px 10%;
    text-align: center;
    color: white;
}

.footer p {
    font-size: 14px;
    margin-bottom: 10px;
}

.footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.footer-social-icons a img {
    width: 28px;
    height: auto;
    transition: transform 0.3s ease-in-out;
}

.footer-social-icons a img:hover {
    transform: scale(1.15);
}

/* ========================== */
/* Imagen de la Exposición */
/* ========================== */
.exposicion-image {
    margin-top: 30px;
    text-align: center;
}

.exposicion-image img {
    width: 100%; /* Ajusta la imagen al ancho del contenedor */
    max-width: 800px; /* Tamaño máximo para que no sea demasiado grande */
    border-radius: 10px; /* Bordes redondeados para un mejor diseño */
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1); /* Sombra ligera */
}

/* ========================== */
/* Contenedor de Logros */
/* ========================== */
.logros-container {
    margin-top: 40px;
    padding: 30px;
    background: #eef2f3; /* Fondo claro */
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 900px; /* 📌 Limita el ancho */
    margin-left: auto; /* 📌 Centra la sección */
    margin-right: auto; /* 📌 Centra la sección */
}

/* Cada Logro */
.logro {
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 850px; /* 📌 Reduce el ancho de cada logro */
    margin-left: auto;
    margin-right: auto;
}

/* Estilos del botón de descarga */
.download-btn {
    display: inline-block;
    background: #0077b6;
    color: white;
    font-size: 18px;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
    margin-top: 10px;
    display: block;
    text-align: center;
}

.download-btn:hover {
    background: #005f99;
}

/* ========================== */
/* Contenedor de Video */
/* ========================== */
.video-container {
    margin-top: 40px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.video-container h2 {
    color: #0077b6;
    font-size: 24px;
    margin-bottom: 10px;
}

.video-container p {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

/* Estilos del Video */
.video-container video {
    width: 100%;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========================== */
/* 📌 SECCIÓN DE CONSUMO ENERGÉTICO */
/* ========================== */
.consumo-energetico {
    background: transparent !important; /* 🔹 Elimina el fondo */
    padding: 120px 8% 80px; /* 🔹 Ajuste en los márgenes laterales */
    text-align: center;
    width: 100%;
    min-height: 100vh;
    opacity: 1;
    visibility: visible;
    color: black;
    max-width: 1300px; /* 🔹 Se mantiene el ancho del contenedor */
    margin: 0 auto; /* 🔹 Centra la sección */
    box-sizing: border-box;
    overflow-x: hidden; /* 🔹 Evita desplazamiento lateral */
}

/* 📌 ESTILOS PARA LOS TÍTULOS */
.consumo-energetico h1, 
.consumo-energetico h2, 
.consumo-energetico h3 {
    color: #0077b6; /* Azul profesional */
}

/* 📌 CONTENEDOR DEL TEXTO */
.content-box {
    max-width: 1000px; /* 🔹 Ancho más amplio */
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    text-align: justify;
    box-sizing: border-box;
}

/* 📌 ASEGURAR QUE LOS PÁRRAFOS SEAN LEGIBLES */
.consumo-energetico p, 
.consumo-energetico ul {
    font-size: 18px;
    color: #333;
    line-height: 1.6;
}

/* ========================== */
/* 📌 ILUSTRACIÓN DEL PROYECTO */
/* ========================== */
.vector-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.vector-container img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
}

/* ========================== */
/* 📌 CONTENEDOR DE DESCARGA DE TABLAS */
/* ========================== */
.download-container {
    background: none !important; /* 🔹 Elimina el fondo */
    padding: 30px;
    border-radius: 10px;
    text-align: left;
    box-shadow: none !important; /* 🔹 Se eliminan sombras */
    border: none !important; /* 🔹 Se eliminan bordes */
    max-width: 800px;
    margin: 40px auto;
}

.download-container h2 {
    color: #0077b6;
    font-size: 24px;
    margin-bottom: 10px;
}

.download-container p {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

.download-container ul {
    list-style: none;
    padding: 0;
}

.download-container ul li {
    margin-bottom: 10px;
}

.download-container ul li a {
    text-decoration: none;
    color: #0077b6;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

.download-container ul li a:hover {
    color: #005f99;
}

/* ========================== */
/* 📌 ESTILOS PARA EL DASHBOARD DE POWER BI */
/* ========================== */
.powerbi-container {
    text-align: center;
    padding: 50px 5%;
    background: none !important; /* 🔹 Elimina el fondo */
    border-radius: 10px;
    box-shadow: none !important; /* 🔹 Se eliminan sombras */
    border: none !important; /* 🔹 Se eliminan bordes */
    max-width: 900px;
    margin: 40px auto;
    display: block;
    opacity: 1;
    visibility: visible;
}

/* 📌 Ajuste del título del Dashboard */
.powerbi-container h2 {
    color: #0077b6;
    font-size: 24px;
    margin-bottom: 20px;
}

/* 📌 Ajuste del iframe de Power BI */
.powerbi-container iframe {
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: none;
    display: block;
    opacity: 1;
    visibility: visible;
}

/* ========================== */
/* 📌 AJUSTES EXCLUSIVOS PARA MÓVILES - EXPANSIÓN MEJORADA */
/* ========================== */
@media (max-width: 768px) {
    /* 📌 Evita el desplazamiento lateral */
    html, body {
        overflow-x: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 📌 Sección Consumo Energético ocupa toda la pantalla */
    .consumo-energetico {
        padding: 20px 3%;
        width: 100% !important;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 📌 Contenedor de texto más amplio y sin desbordamiento */
    .content-box {
        width: 95% !important;
        max-width: 600px;
        height: auto;
        padding: 20px;
        text-align: justify;
        box-sizing: border-box;
    }

    /* 📌 Asegura que las imágenes ocupen todo el ancho disponible */
    .vector-container img {
        width: 100% !important;
        max-width: 90%;
        margin: 0 auto;
        display: block;
    }

    /* 📌 Sección de Descarga de Tablas sin bordes ni sombras */
    .download-container {
        width: 95% !important;
        max-width: 600px;
        padding: 20px;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
        text-align: left;
    }

    /* 📌 Sección del Dashboard sin bordes y mejor distribuido */
    .powerbi-container {
        width: 95% !important;
        max-width: 600px;
        padding: 20px;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .powerbi-container iframe {
        width: 100%;
        height: 400px;
    }
}

/* ========================== */
/* 📌 SECCIÓN BANCOAPP (Asegura visibilidad) */
/* ========================== */
.bancoapp {
    background: transparent !important; /* 🔹 Elimina el fondo */
    padding: 120px 8% 80px; /* 🔹 Mantiene los márgenes originales */
    text-align: center;
    width: 100%;
    min-height: 100vh;
    opacity: 1; /* 🔹 Garantiza visibilidad */
    visibility: visible; /* 🔹 Asegura que se muestre */
    color: black; /* 🔹 Corrige la visibilidad del texto */
    max-width: 1300px; /* 🔹 Mantiene el ancho */
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ========================== */
/* 📌 LOGO DE BANCOAPP (Corrige visibilidad) */
/* ========================== */
.vector-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.vector-container img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
}

/* ========================== */
/* 📌 VISTA PREVIA - BANCOAPP */
/* ========================== */
.preview-container {
    background: #f8f9fa !important; /* 📌 Se asegura que tenga fondo */
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 40px 5%;
    border-radius: 10px;
    max-width: 900px; /* 🔹 Mantiene el ancho original */
    margin: 40px auto;
    display: block;
    opacity: 1; /* 🔹 Asegura que el contenido se vea */
    visibility: visible; /* 🔹 Se mantiene visible */
    color: black; /* 🔹 Se corrige el color del texto */
}

/* 📌 Ajuste del título */
.preview-container h2 {
    color: #0077b6;
    font-size: 24px;
    margin-bottom: 20px;
}

/* 📌 Ajuste del texto */
.preview-container p {
    font-size: 18px;
    color: black; /* 🔹 Se asegura que el texto no se pierda */
    margin-bottom: 20px;
}

/* ========================== */
/* 📌 AJUSTES EXCLUSIVOS PARA MÓVILES - EXPANSIÓN SIN DESBORDAMIENTO */
/* ========================== */
@media (max-width: 768px) {
    /* 📌 Evita el desplazamiento lateral */
    html, body {
        overflow-x: hidden; /* 🔹 Impide que se desborde lateralmente */
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 📌 Sección BancoApp ocupa toda la pantalla sin desbordarse */
    .bancoapp {
        padding: 0; /* 🔹 Elimina padding extra */
        width: 100% !important; /* 🔹 Usa 100% en lugar de 100vw para evitar el scroll */
        height: 100vh !important;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* 📌 Contenedor interno sin restricciones ni desbordamiento */
    .preview-container {
        width: 100% !important; /* 🔹 Usa 100% en lugar de 100vw */
        max-width: 100%;
        height: auto;
        padding: 0; /* 🔹 Evita padding lateral */
        text-align: center;
        box-sizing: border-box;
        background: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* 📌 Asegura que las imágenes ocupen toda la pantalla sin desbordarse */
    .vector-container img {
        width: 100% !important; /* 🔹 Usa 100% en lugar de 100vw */
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

    .preview-container p {
        font-size: 18px;
        line-height: 1.5;
        padding: 10px;
        width: 90%;
    }
}

/* ========================== */
/* 📌 AJUSTE DE LOGOS EN MÓVILES */
/* ========================== */
@media (max-width: 768px) {
    .logo-container img {
        width: 60%;
        max-width: 200px;
    }

    .social-icons img {
        width: 50px;
    }

    .logos-container img {
        height: 120px;
    }
}

/* ========================== */
/* 📌 REDUCCIÓN DE LA SECCIÓN SOBRE MÍ */
/* ========================== */
@media (max-width: 768px) {
    .about {
        padding: 40px 5%;
    }

    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .about-image img {
        width: 180px;
        height: 180px;
    }

    .about-text {
        max-width: 100%;
    }

    .about-text h2 {
        font-size: 24px;
    }

    .about-text p {
        font-size: 16px;
    }
}

/* ========================== */
/* 📌 AJUSTE EN BOTONES, FORMULARIOS Y LOGOS GENERALES */
/* ========================== */
@media (max-width: 768px) {
    input, textarea {
        font-size: 14px;
    }

    button {
        font-size: 14px;
    }

    .vector-container img {
        max-width: 250px;
    }
}

/* ========================== */
/* 📌 SECCIÓN BLOG PERSONAL */
/* ========================== */

.blog-personal {
    background: #ffffff; /* Fondo blanco */
    padding: 80px 10%;
    text-align: center;
}

.blog-personal h2 {
    font-size: 32px;
    color: #0077b6;
    margin-bottom: 15px;
}

.blog-personal p {
    font-size: 18px;
    color: #333;
    max-width: 700px;
    margin: auto;
}

/* 📌 Contenedor de Publicaciones */
.blog-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 📌 Permite que se adapten en móviles */
    gap: 30px;
    margin-top: 30px;
}

/* 📌 Ajuste del tamaño de las tarjetas del blog */
.blog-post {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 420px; /* 📌 Reduce el ancho para que las imágenes se adapten mejor */
    text-align: left;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    overflow: hidden;
}


/* 📌 Ajuste de imágenes en las tarjetas del blog (para evitar desbordamiento en PC) */
.blog-post img {
    width: 100%; /* 📌 Se asegura que no sobrepase el contenedor */
    height: auto; /* 📌 Mantiene la proporción */
    max-height: 220px; /* 📌 Evita imágenes demasiado grandes */
    object-fit: cover; /* 📌 Ajuste de recorte */
    border-radius: 10px;
    display: block;
    overflow: hidden; /* 📌 Evita que la imagen sobresalga */
}


/* 📌 Título del blog */
.blog-post h3 {
    font-size: 20px;
    color: #005f99;
    margin-bottom: 10px;
}

/* 📌 Estilos del texto */
.blog-post p {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 📌 Botón "Leer más" */
.btn-read-more {
    display: inline-block;
    background: #0077b6;
    color: white;
    font-size: 16px;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
    border: none;
    cursor: pointer;
}

.btn-read-more:hover {
    background: #005f99;
}

/* 📌 Efecto de elevación al pasar el mouse */
.blog-post:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 2px 6px 20px rgba(0, 0, 0, 0.2);
}

/* 📌 Efecto de entrada al hacer scroll */
.blog-post.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* 📌 MODAL PARA VER BLOGS COMPLETOS */
.blog-modal {
    display: none; /* 🔹 Oculta el modal al cargar la página */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-modal-content {
    background: white;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    text-align: justify;
    font-family: 'Times New Roman', serif; /* 🔹 Estilo tipo periódico */
    line-height: 1.8;
    box-shadow: 2px 6px 20px rgba(0, 0, 0, 0.3);
}

/* ========================== */
/* 📌 AJUSTES PARA EL MODAL DE BLOG */
/* ========================== */
.blog-modal-content img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* 📌 Ajuste responsivo */
@media (max-width: 768px) {
    .blog-modal-content {
        width: 95%;
        padding: 20px;
    }

    .blog-modal-content img {
        max-height: 200px;
    }
}

/* 📌 Título en el modal */
.blog-modal-content h2 {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* 📌 Botón de cierre */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

/* ========================== */
/* 📌 AJUSTE RESPONSIVO EN MÓVILES */
/* ========================== */

@media (max-width: 768px) {
    .blog-container {
        flex-direction: column; /* 📌 Acomoda en una sola columna */
        align-items: center;
    }

    .blog-post {
        width: 90%; /* 📌 Ocupará casi todo el ancho en móviles */
    }

    .blog-modal-content {
        width: 95%;
        padding: 20px;
    }
}

/* ========================== */
/* 📌 SECCIÓN DE COMENTARIOS */
/* ========================== */
#commentsSection {
    margin-top: 30px;
    padding: 20px;
    border-top: 2px solid #0077b6;
}

#commentsSection h3 {
    font-size: 22px;
    color: #0077b6;
    margin-bottom: 15px;
}

#commentsList {
    margin-bottom: 15px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 5px;
}

.comment {
    padding: 10px;
    background: white;
    border-radius: 5px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

#commentInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
}

#submitComment {
    background: #0077b6;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#submitComment:hover {
    background: #005f99;
}

/* 📌 Botones de descarga del CV */
.cv-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px; /* 📌 Espacio entre la descripción y los botones */
}

.cv-buttons a {
    background-color: #0077b6;
    color: white;
    padding: 12px 18px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
}

.cv-buttons a:hover {
    background-color: #005f99;
}