:root {
    /* Tema Oscuro (Por defecto) */
    --bg-color: #1a1e24;
    --medium-bg-color: #242930;
    --text-color: #e0e0e0;
    --accent-color: #00f7ff; /* Cian brillante */
    --accent-hover-color: #00c5cc;
    --accent-color-darker: #009499; /* Variable faltante */
    --subtle-border-color: #3a3f47;
    --card-shadow-color: rgba(0, 247, 255, 0.1);
    --card-shadow-hover-color: rgba(0, 247, 255, 0.15);
    --btn-text-color: #1a1e24; /* Texto oscuro para botones con fondo de acento */
    --scrollbar-thumb-color: #00f7ff;
    --scrollbar-track-color: #1a1e24;
}

.light-theme {
    /* Tema Claro */
    --bg-color: #f4f6f8;                     /* Gris muy claro */
    --medium-bg-color: #ffffff;              /* Blanco puro */
    --text-color: #212529;                   /* Negro suave */
    --accent-color: #007bff;                 /* Azul estándar */
    --accent-hover-color: #0056b3;           /* Azul más oscuro */
    --accent-color-darker: #004085;          /* Variable faltante */
    --subtle-border-color: #ced4da;          /* Gris claro para bordes */
    --card-shadow-color: rgba(0, 0, 0, 0.1);
    --card-shadow-hover-color: rgba(0, 0, 0, 0.15);
    --btn-text-color: #ffffff; /* Texto claro para botones con fondo de acento azul */
    --scrollbar-thumb-color: #007bff;
    --scrollbar-track-color: #f4f6f8;
}

/* Estilos base - OPTIMIZADOS */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Arial', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    position: relative;
}

/* Header - CONSISTENTE */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--medium-bg-color);
    color: var(--text-color);
    padding: 10px 20px;
    z-index: 1000;
    border-bottom: 1px solid var(--subtle-border-color);
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

/* Main - OPTIMIZADO */
main {
    padding-top: 68px;
    padding-bottom: 70px;
    min-height: calc(100vh - 138px);
    width: 100%;
}

/* Container base - RESPONSIVE */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Secciones base - OPTIMIZADAS */
.section {
    padding: 20px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* MEDIA QUERIES OPTIMIZADAS */

/* Pantallas muy pequeñas (móviles) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .section {
        padding: 15px 10px;
    }

    .portfolio-offer, 
    .projects-list li {
        margin: 15px 0;
        padding: 15px;
    }
    
    .technologies-list {
        gap: 6px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 100px !important;
        height: 32px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        padding: 5px 8px;
        font-size: 0.7em;
        border-radius: 12px;
    }
    
    .tech-badge i {
        font-size: 0.8em;
    }

    .footer-icon-bar {
        width: 95%;
        max-width: none;
        margin: 0 auto;
    }

    .footer-collapsible-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* Pantallas pequeñas (móviles) */
@media (min-width: 481px) and (max-width: 774px) {
    .container {
        padding: 0 15px;
    }
    
    .section {
        padding: 15px;
    }

    .portfolio-offer, 
    .projects-list li {
        margin: 15px 0;
        padding: 15px;
    }
    
    .technologies-list {
        gap: 8px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 110px !important;
        height: 34px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        padding: 6px 10px;
        font-size: 0.75em;
        border-radius: 14px;
    }
    
    .tech-badge i {
        font-size: 0.9em;
    }

    .footer-icon-bar {
        width: 90%;
        max-width: none;
        margin: 0 auto;
    }

    .footer-collapsible-content {
        width: 100%;
        max-width: none;
        margin: 0;
    }
}

/* Pantallas medianas (tablets) - CORREGIDO */
@media (min-width: 775px) and (max-width: 950px) {
    .container {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .section {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }

    .portfolio-offer, 
    .projects-list li {
        width: 100%;
        max-width: 800px;
        margin: 20px auto;
        padding: 25px;
        box-sizing: border-box;
    }

    #main-nav.nav-visible {
        width: 30%;
        left: 50%;
        transform: translateX(-50%);
        min-width: 280px;
        background-color: var(--medium-bg-color);
        border: 1px solid var(--subtle-border-color);
    }
    
    .technologies-list {
        gap: 10px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 120px !important;
        height: 36px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        padding: 7px 12px;
        font-size: 0.8em;
        flex: 0 0 auto;
    }
    
    .tech-badge i {
        font-size: 0.95em;
    }

    .footer-icon-bar {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .footer-collapsible-content {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* Asegurar alineación correcta del texto */
    .texto1 p,
    .texto1 ul,
    .texto1 li {
        text-align: left;
        width: 100%;
        box-sizing: border-box;
    }

    .section h2 {
        margin-bottom: 30px;
        text-align: center;
    }

    .section h3,
    .section h4 {
        text-align: left;
        margin: 15px 0;
    }
}

/* Pantallas grandes */
@media (min-width: 951px) and (max-width: 1199px) {
    .container {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .section {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 30px;
        box-sizing: border-box;
    }

    .portfolio-offer, 
    .projects-list li {
        width: 100%;
        max-width: 900px;
        margin: 25px auto;
        padding: 30px;
        box-sizing: border-box;
    }

    #main-nav.nav-visible {
        width: 30%;
        left: 0;
        transform: none;
        max-width: 400px;
    }
    
    .technologies-list {
        gap: 12px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 130px !important;
        height: 38px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        padding: 8px 14px;
        font-size: 0.85em;
        flex: 0 0 auto;
    }
    
    .tech-badge i {
        font-size: 1em;
    }

    .footer-icon-bar,
    .footer-collapsible-content {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

/* Pantallas extra grandes */
@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .section {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px;
        box-sizing: border-box;
    }

    .portfolio-offer, 
    .projects-list li {
        width: 100%;
        max-width: 1000px;
        margin: 25px auto;
        padding: 30px;
        box-sizing: border-box;
    }

    #main-nav.nav-visible {
        width: 30%;
        left: 0;
        transform: none;
        max-width: 400px;
    }
    
    .technologies-list {
        gap: 15px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 140px !important;
        height: 40px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        padding: 9px 16px;
        font-size: 0.9em;
        flex: 0 0 auto;
    }
    
    .tech-badge i {
        font-size: 1.1em;
    }

    .footer-icon-bar,
    .footer-collapsible-content {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

/* Pantallas ultra grandes - Distribución óptima de tecnologías */
@media (min-width: 1400px) {
    .technologies-list {
        gap: 18px;
        justify-content: center;
        max-width: 100%;
    }
    
    .tech-badge,
    .technologies-list li {
        width: 150px !important;
        height: 42px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        padding: 10px 18px;
        font-size: 0.95em;
        flex: 0 0 auto;
    }
    
    .tech-badge i {
        font-size: 1.2em;
    }
}

/* Elementos específicos del contenido */
.texto1 {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.portfolio-offers {
    width: 100%;
    box-sizing: border-box;
}

.projects-list {
    width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilos para las tarjetas */
.portfolio-offer, 
.projects-list li {
    background-color: var(--medium-bg-color);
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--card-shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    margin: 20px auto;
    padding: 25px;
    width: 100%;
    max-width: 100%;
}

.portfolio-offer:hover, 
.projects-list li:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px var(--card-shadow-hover-color);
    border-color: var(--accent-color);
}

/* Header controls styling */
.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#theme-toggle-button,
#language-toggle-button,
#menu-toggle {
    background-color: transparent; /* Fondo transparente */
    color: var(--accent-color); /* Color del icono, usando la variable de acento */
    border: 1px solid var(--accent-color); /* Borde sutil con color de acento */
    border-radius: 50%; /* Botones redondos */
    width: 40px; /* Ancho fijo */
    height: 40px; /* Alto fijo */
    font-size: 1.2em; /* Tamaño del icono */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Transiciones suaves */
}

#theme-toggle-button:hover,
#language-toggle-button:hover,
#menu-toggle:hover {
    background-color: var(--accent-color-darker);
    color: var(--bg-color);
    border-color: var(--accent-color-darker);
}

#language-toggle-button {
    font-size: 1.5em; /* Ajustar tamaño para emojis de bandera si es necesario */
    padding: 0; /* Asegurar que el emoji esté centrado */
}

header h1 {
    font-size: 1.5em;
    color: var(--accent-color);
    transition: color 0.3s ease;
}

header h2 {
    font-size: 1em;
    font-weight: normal;
    color: var(--text-color); /* Ajustado para usar text-color general del tema */
    transition: color 0.3s ease;
}

#menu-toggle {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1.8em;
    cursor: pointer;
    display: none; 
    transition: color 0.3s ease;
}

#menu-toggle:hover {
    color: var(--accent-hover-color);
}

/* Nav Principal */
#main-nav {
    display: none;
    position: absolute;
    top: 100%;
    background-color: var(--medium-bg-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); /* Sombra más genérica, podría ajustarse por tema */
    z-index: 99;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    transition: width 0.3s ease, left 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    border-right: 1px solid var(--subtle-border-color);
    border-bottom: 1px solid var(--subtle-border-color);
}

#main-nav.nav-visible {
    display: block;
    width: 100%;
    left: 0;
    transform: translateX(0%);
}

#main-nav ul li {
    display: block;
    margin-left: 0;
    border-bottom: 1px solid var(--subtle-border-color);
    transition: border-bottom-color 0.3s ease;
}

#main-nav ul li a {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#main-nav ul li a:hover,
#main-nav ul li a.selected {
    background-color: var(--accent-color);
    color: var(--btn-text-color); /* Usar variable para texto de botón */
}

/* Main */
main {
    padding-top: 10px;
    padding-bottom: 70px;
    box-sizing: border-box;
    min-height: calc(100vh);
}

.texto1 {
    text-align: left;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.section h2 {
    color: var(--accent-color);
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.section h6 {
    margin-right: 100%;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.name {
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--accent-color);
    transition: color 0.3s ease;
}

/* Estilos para la lista de tecnologías */
.technologies-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
    justify-content: center !important;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
}

.technologies-list li {
    /* Resetear los estilos heredados de .projects-list li */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    
    /* Aplicar estilos de tech-badge directamente a li */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    transition: all 0.3s ease;
    
    /* Estilos de badge aplicados directamente */
    width: 120px !important;
    height: 36px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    padding: 8px 12px !important;
    border-radius: 16px !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    
    /* Fondo sutil uniforme */
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--text-color) !important;
    backdrop-filter: blur(10px) !important;
    
    /* Centrar texto */
    text-align: center !important;
    line-height: 1.2 !important;
}

.technologies-list li:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--accent-color) !important;
}

/* Estilos específicos para los badges de tecnología */
.tech-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    /* Tamaños fijos y uniformes - con !important para evitar conflictos */
    width: 120px !important;
    height: 36px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    flex: 0 0 auto !important;
    
    /* Fondo sutil uniforme que permite ver iconos */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    backdrop-filter: blur(10px);
}

.tech-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
}

.tech-badge i {
    font-size: 1em;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Animaciones suaves para las tecnologías */
/* Efecto de foco mejorado para accesibilidad */
.technologies-list li:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}



/* Colores específicos para tecnologías - versión sutil */
.tech-python {
    border-color: #3776ab;
    background: linear-gradient(135deg, rgba(55, 118, 171, 0.1), rgba(255, 212, 59, 0.1));
}

.tech-python i {
    color: #3776ab;
}

.tech-fastapi {
    border-color: #009688;
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.1), rgba(76, 175, 80, 0.1));
}

.tech-fastapi i {
    color: #009688;
}

.tech-streamlit {
    border-color: #ff4b4b;
    background: linear-gradient(135deg, rgba(255, 75, 75, 0.1), rgba(255, 107, 107, 0.1));
}

.tech-streamlit i {
    color: #ff4b4b;
}

.tech-gemini {
    border-color: #4285f4;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(52, 168, 83, 0.1));
}

.tech-gemini i {
    color: #4285f4;
}

.tech-langgraph {
    border-color: #6c47ff;
    background: linear-gradient(135deg, rgba(108, 71, 255, 0.1), rgba(156, 71, 255, 0.1));
}

.tech-langgraph i {
    color: #6c47ff;
}

.tech-pytest {
    border-color: #0a9edc;
    background: linear-gradient(135deg, rgba(10, 158, 220, 0.1), rgba(71, 163, 255, 0.1));
}

.tech-pytest i {
    color: #0a9edc;
}

.tech-docker {
    border-color: #2496ed;
    background: linear-gradient(135deg, rgba(36, 150, 237, 0.1), rgba(13, 183, 237, 0.1));
}

.tech-docker i {
    color: #2496ed;
}

.tech-opencv {
    border-color: #5c3ee8;
    background: linear-gradient(135deg, rgba(92, 62, 232, 0.1), rgba(0, 212, 170, 0.1));
}

.tech-opencv i {
    color: #5c3ee8;
}

.tech-tensorflow {
    border-color: #ff6f00;
    background: linear-gradient(135deg, rgba(255, 111, 0, 0.1), rgba(255, 143, 0, 0.1));
}

.tech-tensorflow i {
    color: #ff6f00;
}

.tech-javascript {
    border-color: #f7df1e;
    background: linear-gradient(135deg, rgba(247, 223, 30, 0.1), rgba(240, 219, 79, 0.1));
}

.tech-javascript i {
    color: #f7df1e;
}

.tech-nodejs {
    border-color: #339933;
    background: linear-gradient(135deg, rgba(51, 153, 51, 0.1), rgba(104, 160, 99, 0.1));
}

.tech-nodejs i {
    color: #339933;
}

.tech-react {
    border-color: #61dafb;
    background: linear-gradient(135deg, rgba(97, 218, 251, 0.1), rgba(33, 212, 253, 0.1));
}

.tech-react i {
    color: #61dafb;
}

.tech-mongodb {
    border-color: #47a248;
    background: linear-gradient(135deg, rgba(71, 162, 72, 0.1), rgba(75, 179, 61, 0.1));
}

.tech-mongodb i {
    color: #47a248;
}

.tech-angular {
    border-color: #dd0031;
    background: linear-gradient(135deg, rgba(221, 0, 49, 0.1), rgba(195, 0, 47, 0.1));
}

.tech-angular i {
    color: #dd0031;
}

.tech-qt {
    border-color: #41cd52;
    background: linear-gradient(135deg, rgba(65, 205, 82, 0.1), rgba(0, 200, 150, 0.1));
}

.tech-qt i {
    color: #41cd52;
}

.tech-numpy {
    border-color: #4dabcf;
    background: linear-gradient(135deg, rgba(1, 50, 67, 0.1), rgba(77, 171, 207, 0.1));
}

.tech-numpy i {
    color: #4dabcf;
}

.tech-voice {
    border-color: #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.1));
}

.tech-voice i {
    color: #9b59b6;
}

.tech-image {
    border-color: #6c5ce7;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.1), rgba(162, 155, 254, 0.1));
}

.tech-image i {
    color: #6c5ce7;
}

.tech-ai {
    border-color: #e74c3c;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(243, 156, 18, 0.1));
}

.tech-ai i {
    color: #e74c3c;
}

.tech-cascade {
    border-color: #636e72;
    background: linear-gradient(135deg, rgba(45, 52, 54, 0.1), rgba(99, 110, 114, 0.1));
}

.tech-cascade i {
    color: #636e72;
}

.tech-other {
    border-color: #74b9ff;
    background: linear-gradient(135deg, rgba(116, 185, 255, 0.1), rgba(9, 132, 227, 0.1));
}

.tech-other i {
    color: #74b9ff;
}

.tech-git {
    border-color: #f05032;
    background: linear-gradient(135deg, rgba(240, 80, 50, 0.1), rgba(241, 78, 50, 0.1));
}

.tech-git i {
    color: #f05032;
}

.tech-github {
    border-color: #333333;
    background: linear-gradient(135deg, rgba(24, 23, 23, 0.1), rgba(51, 51, 51, 0.1));
}

.tech-github i {
    color: #333333;
}

.tech-jwt {
    border-color: #d63aff;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(214, 58, 255, 0.1));
}

.tech-jwt i {
    color: #d63aff;
}

.tech-tts {
    border-color: #4ecdc4;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
}

.tech-tts i {
    color: #4ecdc4;
}

.tech-pandas {
    border-color: #150458;
    background: linear-gradient(135deg, rgba(21, 4, 88, 0.1), rgba(255, 111, 0, 0.1));
}

.tech-pandas i {
    color: #150458;
}

.tech-matplotlib {
    border-color: #11557c;
    background: linear-gradient(135deg, rgba(17, 85, 124, 0.1), rgba(255, 102, 0, 0.1));
}

.tech-matplotlib i {
    color: #11557c;
}

.tech-api {
    border-color: #00d4aa;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 245, 255, 0.1));
}

.tech-api i {
    color: #00d4aa;
}

.tech-jupyter {
    border-color: #f37626;
    background: linear-gradient(135deg, rgba(243, 118, 38, 0.1), rgba(243, 118, 38, 0.1));
}

.tech-jupyter i {
    color: #f37626;
}

.tech-json {
    border-color: #424242;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(66, 66, 66, 0.1));
}

.tech-json i {
    color: #424242;
}

/* Estilos para los enlaces de proyectos */
.project-links {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* Para que los botones se ajusten en pantallas pequeñas */
    gap: 15px; /* Espacio entre botones */
}

.btn-project-repo, .btn-project-author {
    /* Heredan estilos de .btn */
    /* Se pueden añadir más especificidad si es necesario */
    padding: 8px 15px; /* Un poco más pequeños que los .btn genéricos */
    font-size: 0.9em;
    display: inline-flex; /* Para alinear icono y texto */
    align-items: center;
}

.btn-project-repo i, .btn-project-author i {
    margin-right: 8px; /* Espacio entre icono y texto */
}

/* Ajuste para que los botones de proyecto no hereden el transform de la tarjeta */
.projects-list li .btn:hover {
    transform: translateY(-2px); /* Mantener el transform del botón */
}

/* Footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: transparent;
    color: var(--text-color);
    width: 100%;
    padding-top: 0;
    z-index: 100;
    text-align: center;
    transition: color 0.3s ease;
}

.footer-icon-bar {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 15px;
    background-color: var(--medium-bg-color);
    border-radius: 15px 15px 0 0;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1); /* Sombra genérica */
    border-top: 1px solid var(--subtle-border-color);
    border-left: 1px solid var(--subtle-border-color);
    border-right: 1px solid var(--subtle-border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-icon-bar button {
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 1.3em;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.footer-icon-bar button:hover {
    color: var(--accent-hover-color);
}

.footer-collapsible-content {
    background-color: var(--medium-bg-color);
    border-top: 1px solid var(--subtle-border-color);
    padding: 20px;
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.15); /* Sombra genérica */
    text-align: left;
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.footer-collapsible-content ul.footer-nav li {
    border-bottom: 1px solid var(--subtle-border-color);
    transition: border-bottom-color 0.3s ease;
}

.footer-collapsible-content ul.footer-nav li a,
.footer-collapsible-content .social-links a {
    color: var(--text-color);
    transition: color 0.2s ease;
}

.footer-collapsible-content ul.footer-nav li a:hover,
.footer-collapsible-content .social-links a:hover {
    color: var(--accent-color);
}

/* Textos y Enlaces Generales */
p {
    text-align: left;
    color: var(--text-color);
    line-height: 1.6;
    transition: color 0.3s ease;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--accent-hover-color);
    text-decoration: underline;
}

/* Botones */
.btn {
    background-color: var(--accent-color);
    color: var(--btn-text-color) !important;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover {
    background-color: var(--accent-hover-color);
    color: var(--btn-text-color) !important;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 5px;
    border: 2px solid var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover-color); /* Usar accent-hover para consistencia */
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Media queries para responsive - CONSOLIDADO */

/* El resto de los media queries no necesitan cambios específicos de color si todo usa variables */

/* Estilos para el último elemento */
#portafolio {
    margin-bottom: 100px;
    /* Ajusta el espacio para el footer */
}

/* Estilos para la sección */
.section {
    text-align: center;
    padding: 20px 0; /* Añadir padding a las secciones */
}

.section h2 {
    color: var(--accent-color);
    margin-bottom: 30px;
}

.section h6 {
    margin-right: 100%;
    color: var(--text-color);
}

/* Estilos para la imagen de perfil */
.profile-image {
    width: 200px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 10px;
    /* Agrega margen inferior */
    margin-top: 10px;
}

.my-atropos {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
}

.my-atropos .atropos-scale {
    width: 100%;
    height: 100%;
}

.my-atropos .atropos-rotate {
    width: 100%;
    height: 100%;
}

.my-atropos .atropos-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    margin: 0;
}

/* Ajustes responsivos para la imagen */
@media (min-width: 775px) and (max-width: 950px) {
    .my-atropos {
        width: 250px;
        height: 250px;
    }
}

@media (min-width: 951px) {
    .my-atropos {
        width: 300px;
        height: 300px;
    }
}

/* Estilos para la siguiente sección */
.next-section {
    padding: 50px 0;
    /* Espacio entre esta sección y la siguiente */
}

.portfolio-offer {
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px; /* Bordes ligeramente más redondeados */
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px var(--card-shadow-color);
    background-color: var(--medium-bg-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.portfolio-offer:hover {
    box-shadow: 0 6px 15px var(--card-shadow-hover-color);
    border-color: var(--accent-color);
    transform: translateY(-5px); /* Elevar tarjeta al pasar el mouse */
}

.portfolio-offer h3 {
    color: var(--accent-color);
    margin-top: 0;
}

.projects-list {
    list-style: none;
    padding: 0;
}

.projects-list li {
    border: 1px solid var(--subtle-border-color);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px var(--card-shadow-color);
    background-color: var(--medium-bg-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.projects-list li:hover {
    box-shadow: 0 6px 15px var(--card-shadow-hover-color);
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.projects-list li h3 {
    color: var(--accent-color);
    margin-top: 0;
}

/* Estilos para el footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: transparent; 
    color: var(--text-color); /* Color de texto base para el footer */
    width: 100%;
    padding-top: 0; 
    z-index: 100;
    text-align: center; 
}

.footer-icon-bar {
    display: inline-flex; 
    justify-content: center;
    align-items: center;
    padding: 8px 15px; /* Aumentar padding para mejor tacto */
    background-color: var(--medium-bg-color); 
    border-radius: 15px 15px 0 0; /* Bordes más redondeados */
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1);
    border-top: 1px solid var(--subtle-border-color);
    border-left: 1px solid var(--subtle-border-color);
    border-right: 1px solid var(--subtle-border-color);
}

.footer-icon-bar .footer-icon-item {
    margin: 0 12px; 
}

.footer-icon-bar button {
    background: none;
    border: none;
    color: var(--accent-color); /* Iconos con color de acento */
    font-size: 1.3em; 
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.footer-icon-bar button:hover {
    color: var(--accent-hover-color); 
}

/* Estilos para el contenido desplegable del footer */
.footer-collapsible-content {
    background-color: var(--medium-bg-color);
    border-top: 1px solid var(--subtle-border-color);
    padding: 20px;
    position: absolute;
    bottom: 100%; 
    left: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.15);
    text-align: left; 
    color: var(--text-color);
}

.footer-collapsible-content ul.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block; 
}

.footer-collapsible-content ul.footer-nav li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--subtle-border-color);
}

.footer-collapsible-content ul.footer-nav li:last-child {
    border-bottom: none;
}

.footer-collapsible-content ul.footer-nav li a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: normal;
    transition: color 0.2s ease;
}

.footer-collapsible-content ul.footer-nav li a:hover {
    color: var(--accent-color);
}

.footer-collapsible-content .social-links a {
    margin-right: 15px;
    color: var(--text-color);
    font-size: 1.2em; /* Un poco más grandes los iconos sociales */
    transition: color 0.2s ease;
}

.footer-collapsible-content .social-links a:hover {
    color: var(--accent-color);
}

/* Estilos para los datos de contacto */
.contact-info {
    display: flex;
    padding-bottom: 1%;
}

.contact-info p {
    margin-right: 0.5px;
    /* Espacio entre los elementos */
}

.contact-info p:last-child {
    margin-right: 0;
    /* Elimina el espacio a la derecha del último elemento */
}

.contact-info a {
    text-decoration: none;
    color: inherit;
}

.contact-info a:hover {
    color: inherit;
}

#quien-soy h1 {
    display: none;
}

#toggle-icon {
    margin-left: 5px;
    cursor: pointer;
}

.social-links {
    padding: 1%;
}

/* Optimizaciones para móviles en landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 950px) and (orientation: landscape) {
    body {
        margin: 0;
        padding: 0;
        background-color: var(--bg-color);
    }

    header {
        display: flex;
    }

    #menu-toggle {
        display: block;
    }

    main {
        min-height: calc(100vh);
        padding-top: 68px;
        padding-bottom: 60px;
        box-sizing: border-box;
    }

    #portafolio {
        margin-bottom: 100px;
    }

    .section {
        text-align: center;
    }

    .profile-image {
        width: 150px;
        height: auto;
        border-radius: 50%;
        margin: 15px auto;
    }

    .portfolio-offer,
    .projects-list li {
        border: 1px solid var(--subtle-border-color);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 10px var(--card-shadow-color);
        background-color: var(--medium-bg-color);
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .portfolio-offer:hover,
    .projects-list li:hover {
        box-shadow: 0 6px 15px var(--card-shadow-hover-color);
        border-color: var(--accent-color);
        transform: translateY(-5px);
    }

    .contact-info {
        display: flex;
        padding-bottom: 1%;
    }

    .contact-info p {
        margin-right: 0.5px;
    }

    .contact-info p:last-child {
        margin-right: 0;
    }

    .contact-info a {
        text-decoration: none;
        color: inherit;
    }

    .contact-info a:hover {
        color: inherit;
    }

    p {
        text-align: left;
    }

    #quien-soy h1 {
        display: none;
    }

    #toggle-icon {
        margin-left: 5px;
        cursor: pointer;
    }

    .social-links {
        padding: 1%;
    }
}

/* Media queries adicionales simplificadas */
@media (min-width: 400px) {
    #menu-toggle {
        display: block;
    }
}

@media (min-width: 750px) {
    header {
        display: flex;
    }

    #menu-toggle {
        display: block;
    }

    main {
        min-height: calc(100vh);
        padding-top: 68px;
        padding-bottom: 60px;
        box-sizing: border-box;
    }
}

/* Sistema de Partículas */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Debajo de todos los elementos */
    opacity: 1.0; /* Opacidad completa */
    transition: opacity 0.3s ease;
    will-change: transform;
    image-rendering: optimizeSpeed;
}

/* Ajustes de contraste para diferentes temas */
.light-theme #particles-canvas {
    opacity: 0.9; /* Muy visible en tema claro */
    filter: brightness(0.8) contrast(1.8) saturate(1.4); /* Mayor contraste */
}

body.light-theme #particles-canvas {
    mix-blend-mode: multiply; /* Modo de fusión para mejor contraste */
}

body:not(.light-theme) #particles-canvas {
    filter: brightness(1.2) contrast(1.5) saturate(1.3); /* Más brillante en tema oscuro */
    mix-blend-mode: screen; /* Modo de fusión para tema oscuro */
}

/* Reducir intensidad en móviles para mejor rendimiento pero mantener visibilidad */
@media (max-width: 774px) {
    #particles-canvas {
        opacity: 0.7;
        filter: blur(0.1px) brightness(1.1) contrast(1.3);
    }
    
    .light-theme #particles-canvas {
        opacity: 0.6;
        filter: blur(0.1px) brightness(0.9) contrast(1.6) saturate(1.2);
    }
}

/* Ajustes para tablets */
@media (min-width: 775px) and (max-width: 950px) {
    #particles-canvas {
        opacity: 0.85;
        filter: brightness(1.15) contrast(1.4) saturate(1.25);
    }
    
    .light-theme #particles-canvas {
        opacity: 0.75;
        filter: brightness(0.85) contrast(1.7) saturate(1.3);
    }
}

/* Pantallas grandes - máxima intensidad */
@media (min-width: 951px) {
    #particles-canvas {
        opacity: 1.0;
        filter: brightness(1.3) contrast(1.6) saturate(1.4);
    }
    
    .light-theme #particles-canvas {
        opacity: 0.95;
        filter: brightness(0.8) contrast(1.9) saturate(1.5);
    }
}

/* Pantallas ultra grandes - máxima calidad visual */
@media (min-width: 1400px) {
    #particles-canvas {
        opacity: 1.0;
        filter: brightness(1.4) contrast(1.7) saturate(1.5);
    }
    
    .light-theme #particles-canvas {
        opacity: 1.0;
        filter: brightness(0.75) contrast(2.0) saturate(1.6);
    }
}

/* Ajustes finales para z-index y optimización */
@media (prefers-reduced-motion: reduce) {
    #particles-canvas {
        opacity: 0.3;
        animation: none;
        filter: blur(1px) brightness(0.8) contrast(1.2);
    }
}

@media (max-width: 480px), (max-height: 600px) {
    #particles-canvas {
        opacity: 0.5;
        filter: blur(0.3px) brightness(1.0) contrast(1.2);
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #particles-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        filter: brightness(1.1) contrast(1.3) saturate(1.2);
    }
}

/* Asegurar que otros elementos tengan z-index positivo */
header, main, footer, nav, .container, .section {
    position: relative;
    z-index: 1;
}