/* Variables globales */
:root {
    --color-bg-dark:            #1a1a1a;
    --color-bg-gradient:        linear-gradient(45deg, #121212 25%, #1c1c1c 75%);
    --color-text-primary:       #d4af37;
    --color-text-secondary:     #aaa;
    --color-text-light:         #e5e5e5;
    --color-border:             #444;
    --color-hover-bg:           #d4af37;
    --color-hover-text:         #121212;
    --font-primary:             'Roboto', sans-serif;
    --font-secondary:           'Prata', serif;
    --font-accent:              'Cinzel', serif;
    --box-shadow:               0 0 10px rgba(0, 0, 0, 0.5);
    --transition:               0.3s ease;
    --border-radius:            5px;
    --padding-default:          10px;
    --padding-large:            20px;
    --margin-default:           20px;
    --margin-large:             50%;
    --gap-default:              1em;
    --gap-large:                100%;
    --width-sidebar:            300px;
    --width-profile:            800px;
    --width-experience-card:    60%;
    --height-auto:              auto;
    --height-min-content:       min-content;
    --height-full:              100vh;
    --font-size-default:        1em;
    --font-size-large:          1.2em;
    --font-size-title:          2em;
    --font-size-subtitle:       1.8em;
    --font-size-small:          0.8em;
    --animation-duration:       2s;
}

/* Sidebar texto */
.sidebar {
    background-color:           var(--color-bg-dark);
    width:                      var(--width-sidebar);
    padding:                    var(--padding-large);
    box-shadow:                 4px 0 8px rgba(0, 0, 0, 0.5);
    position:                   fixed;
    height:                     var(--height-full);
    text-align:                 center;
    flex-direction:             column;
    z-index:                    1000;
}

.sidebar h1 {
    font-family:                var(--font-secondary);
    font-size:                  var(--font-size-title);
    color:                      var(--color-text-primary);
    border-bottom:              2px solid var(--color-border);
    margin-bottom:              var(--margin-default);
    padding-bottom:             var(--padding-default);
}

.sidebar p {
    font-size:                  var(--font-size-default);
    color:                      var(--color-text-secondary);
    margin-bottom:              var(--margin-large);
    line-height:                1.5;
}

/* Sidebar links menú */
.links-grid_slidebar a {
    display:                    flex;
    margin-left:                10%;
    align-items:                center;
    justify-content:            center;
    flex-direction:             column;
    text-align:                 center;
    padding:                    var(--padding-default);
    width:                      75%;
    text-decoration:            none;
    color:                      var(--color-text-primary);
    background-color:           var(--color-bg-dark);
    border-radius:              var(--border-radius);
    border:                     1px solid var(--color-border);
    transition:                 background-color var(--transition), color var(--transition);
    margin-bottom:              auto;
    margin-top:                 10%;
}

.links-grid_slidebar a:hover {
    background-color:           var(--color-hover-bg);
    color:                      var(--color-hover-text);
}

/* Sidebar íconos de hipervínculos externos */
.presentacion__enlaces__titulo {
    font-size:                  var(--font-size-large);
    color:                      var(--color-text-primary);
    font-family:                var(--font-secondary);
    flex-direction:             column;
    margin-top:                 40%;
}

.presentacion__enlaces {
    text-align:                 center;
    flex-direction:             row;
    display:                    flex;
    justify-content:            center;
    position:                   relative;
}

.presentacion__enlaces__link1, .presentacion__enlaces__link2 {
    display:                    flex;
    flex-direction:             row;
    align-items:                center;
    justify-content:            center;
    text-decoration:            none;
    color:                      var(--color-text-primary);
    background-color:           var(--color-bg-dark);
    border-radius:              var(--border-radius);
    padding:                    var(--padding-default);
    margin-bottom:              30px;
    transition:                 background-color var(--transition), color var(--transition);
    gap:                        var(--gap-large);
}

.presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
    width:                      25px;
    height:                     25px;
    margin-right:               10px;
}

.presentacion__enlaces__link1:hover, .presentacion__enlaces__link2:hover {
    transform:                  scale(1.1);
}

/* Estilo de datos de contacto personal */
.contacto p {
    text-align:                 center;
    flex-direction:             column;
    display:                    flex;
    justify-content:            center;
    position:                   relative;
    margin-top:                 8%;
    margin-bottom:              20%;
    padding:                    var(--padding-default);
    background-color:           var(--color-bg-dark);
    gap:                        var(--gap-default);
}

/* Estilo del contenido central layout */
.main-content {
    flex:                       1;
    margin-left:                35%;
    padding:                    var(--padding-large);
    align-items:                center;
    display:                    block;
    flex-direction:             column;
    justify-content:            center;
    min-height:                 89vh;
}

body {
    font-family:                var(--font-primary);
    background:                 var(--color-bg-gradient);
    color:                      var(--color-text-light);
    margin:                     0;
    margin-bottom:              0;
    flex:                       1 0 auto;
    padding:                    0;
    box-sizing:                 border-box;
    flex-direction:             column;
    height:                     var(--height-min-content);
    overflow-y:                 auto;
    align-items:                center;
    height:                     fit-content;
    overflow-x:                 hidden;
    display:                    inline;
}

/* Estilo del texto central parte del perfil */
.profile {
    background-color:           var(--color-bg-dark);
    padding:                    var(--padding-large);
    border-radius:              var(--border-radius);
    box-shadow:                 var(--box-shadow);
    border:                     1px solid var(--color-border);
    transition:                 transform var(--transition);
    max-width:                  var(--width-profile);
    margin-bottom:              2%;
    margin-top:                 0%;
    height:                     var(--height-min-content);
    display:                    block;
    flex-direction:             column;
    align-items:                center;
    justify-content:            center;
}

.profile h2 {
    font-family:                var(--font-secondary);
    font-size:                  var(--font-size-subtitle);
    color:                      var(--color-text-primary);
    border-bottom:              2px solid var(--color-border);
    margin-bottom:              var(--margin-default);
}

.profile p {
    font-size:                  var(--font-size-default);
    line-height:                1.6;
    color:                      var(--color-text-light);
    margin-bottom:              var(--margin-default);
    gap:                        10px;
    font-family:                var(--font-primary);
}

/* Estilo de la sección de experiencia y educación */
.experiencia_educacion-grid {
    display:                    grid;
    grid-template-columns:      repeat(3, 2fr);
    gap:                        var(--margin-default);
    margin:                     auto;
    flex-direction:             row;
    align-items:                row;
    justify-items:              center;
    justify-content:            center;
    margin-left:                32%;
    width:                      10%;
}

.experiencia_educacion-grid a {
    display:                    block;
    text-align:                 center;
    padding:                    var(--padding-default);
    text-decoration:            none;
    color:                      var(--color-text-primary);
    background-color:           var(--color-bg-dark);
    border-radius:              var(--border-radius);
    border:                     1px solid var(--color-border);
    transition:                 background-color var(--transition), color var(--transition);
}

/* Estilo de los enlaces de experiencia y educación */
.container {
    display:                    fixed;
    margin-left:                0%;
    grid-template-columns:      repeat(1, 1fr);
    max-width:                  805px;
}

.experiencia_educacion_card {
    background-color:           var(--color-bg-dark);
    border-radius:              var(--border-radius);
    box-shadow:                 var(--box-shadow);
    transition:                 transform var(--transition);
    cursor:                     pointer;
    flex:                       1;
    text-align:                 center;
    color:                      var(--color-text-primary);
    font-family:                var(--font-secondary);
    border:                     1px solid var(--color-border);
    height:                     40%;
    padding:                    var(--padding-large);
    width:                      60%;
    display:                    flex;
    align-items:                center;
    justify-content:            center;
    font-size:                  var(--font-size-small);
}

.experiencia_educacion_card:hover {
    transform:                 scale(1.05);
    background-color:          var(--color-hover-bg);
    color:                     var(--color-hover-text);
    transition:                all var(--transition);
}

/* Estilo del texto al dar click de experiencia y educación */
.experiencia_edu {
    opacity:                    1;
    transform:                  translateY(-50px);
    transition:                 opacity 0.9s ease, transform 0.9s ease;
    margin-top:                 var(--margin-default);
    background-color:           var(--color-bg-dark);
    padding:                    var(--padding-large);
    border-radius:              8px;
    box-shadow:                 var(--box-shadow);
    border:                     1px solid var(--color-border);
    max-width:                  900px;
    width:                      100%;
    text-align:                 left;
    position:                   relative;
    z-index:                    1;
    display:                    none;
    flex-direction:             column;
    align-items:                center;
    height:                     auto;
    margin-bottom:              var(--margin-default);
    box-sizing:                 border-box;
    font-family:                var(--font-primary);
    font-size:                  var(--font-size-default);
    line-height:                1.6;
    color:                      var(--color-text-light); 
    margin-left:                2%;
}

.experiencia_edu.mostrar {
    display:                    flex;
    opacity:                    1;
    transform:                  translateY(0);
}

.experiencia_edu h3 {
    font-family:                var(--font-secondary);
    font-size:                  1.5em;
    color:                      var(--color-text-primary);
    border-bottom:              2px solid var(--color-border);
    margin-bottom:              var(--margin-default);
    text-align:                 left;
    width:                      100%;
}

.experiencia_edu p {
    font-size:                  var(--font-size-default);
    line-height:                1.6;
    color:                      var(--color-text-light);
    margin-bottom:              var(--margin-default);
    text-align:                 left;
}

.nota-formacion {
    margin-left:                var(--margin-default);
}

/* Estilo del footer */
footer {
  width:                        100%;
  text-align:                   center;
  padding:                      var(--spacing-sm);
  box-shadow:                   0 -2px 5px rgba(0, 0, 0, 0.1);
  background-color:             var(--color-border);
  background-color:             var(--color-bg-dark);
  border-top:                   1px solid var(--color-border-footer);
  color:                        var(--color-text-muted);
  position:                     flex;
  left:                         0;
  bottom:                       0;
  display:                      flex;
  flex-direction:               column;
  align-items:                  center;
  justify-content:              center;
  margin-top:                   0;
  margin-bottom:                0;
  padding:                      var(--padding-default);
  box-sizing:                   border-box;
  height:                       var(--height-auto);
  padding:                      var(--padding-default);
  background:                   var(--color-bg-dark);
  border-top:                   1px solid var(--color-border-footer);
}

footer p {
    margin-left:                20%;
    font-size:                  var(--font-size-small);
}

.frase-inspiradora {
    background:                 linear-gradient(to right, #0f2027, #203a43, #0f2027);
    color:                      #fff;
    padding:                    fit-content;
    border-radius:              8px;
    text-align:                 center;
    margin:                     auto;
    box-shadow:                 0 8px 20px rgba(0, 0, 0, 0.4);
    width:                      fit-content;
}

.frase-inspiradora blockquote p {
    font-size:                  1rem;
    font-family:                var(--font-accent);
    letter-spacing:             fit-content;
    line-height:                1.5;
    text-shadow:                2px 2px 4px #000;
}

.frase-inspiradora {
    animation:                  fadeInUp var(--animation-duration) ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity:                0;
        transform:              translateY(20px);
    }
    to {
        opacity:                1;
        transform:              translateY(0);
    }
}




/* Overlay para móviles */
.sidebar-overlay {
    position:                   fixed;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     100%;
    background-color:           rgba(0, 0, 0, 0.7);
    z-index:                    999;
    opacity:                    0;
    visibility:                 hidden;
    transition:                 opacity var(--transition), visibility var(--transition);
}

.sidebar-overlay.active {
    opacity:                    1;
    visibility:                 visible;
}

/* Botón hamburguesa */
.toggle-sidebar-button {
    display:                    none;
    position:                   fixed;
    top:                        15px;
    left:                       15px;
    z-index:                    1001;
    background:                 var(--color-bg-dark);
    border:                     1px solid var(--color-text-primary);
    color:                      var(--color-text-primary);
    width:                      45px;
    height:                     45px;
    border-radius:              50%;
    font-size:                  1.3rem;
    cursor:                     pointer;
    transition:                 all var(--transition);
}

.toggle-sidebar-button:hover {
    background:                 var(--color-hover-bg);
    color:                      var(--color-hover-text);
}




/* ============ MEDIA QUERIES (RESPONSIVE)(VERSIÓN OPTIMIZADA) ============ */
@media (max-width: 321px) {
    /* 1. Sidebar - Ocupa el 100% del alto y 95% del ancho */
    .sidebar {
        width:                  90% !important;
        height:                 100vh !important;
        transform:              translateX(-100%);
        padding:                15px 10px;
        box-shadow:             4px 0 15px rgba(0,0,0,0.3);
        overflow-y:             auto; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:              translateX(0);
        height:                 100vh !important;
        overflow-y:             auto !important;
    }

    /* 2. Botón de toggle - Más grande y accesible */
    .toggle-sidebar-button {
        width:                  42px !important;
        height:                 42px !important;
        top:                    12px !important;
        left:                   12px !important;
        font-size:              1.6rem !important;
        background:             var(--color-bg-dark) !important;
        border:                 2px solid var(--color-text-primary) !important;
        display:                flex !important;
        align-items:            center;
        justify-content:        center;
    }

    /* 3. Contenido del sidebar - Ajustes precisos */
    .sidebar h1 {
        font-size:              1.5em;
        margin-bottom:          15px;
        padding:                0 5px 10px;
        border-bottom:          1px solid var(--color-border);
        margin-top:             80px;
    }
  
    .links-grid_slidebar {
        margin-top:             25px;
    }
  
    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        width:                  75% !important;
        font-size:              0.95em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             60px !important;
    }

    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }

    /* 4. Sección de redes sociales */
    .presentacion__enlaces__titulo {
        margin:                 30px 0 15px !important;
        font-size:              1.3em !important;
        text-align:             center !important;
        margin-top:             100px !important;
    }
  
    .presentacion__enlaces {
        gap:                    12px !important;
    }

    /* 5. Contacto - Mejor espaciado */
    .contacto p {
        margin-top:             25px !important;
        padding:                10px !important;
        line-height:            1.7 !important;
        margin-bottom:          20px !important;
    }

    /* 6. Contenido principal */
    .main-content {
        margin-left:            0 !important;
        width:                  100vw !important;
        padding:                10px !important;
        transform:              translateX(0) !important;
        box-shadow:             none !important;
        background:             var(--color-bg-dark) !important;
        border:                 none !important;
        position:               relative !important;
        z-index:                999 !important;
        overflow-y:             auto !important;
        height:                 calc(100vh - 60px) !important; /* Ajusta para el footer */
        margin-top:             0 !important;
        margin-bottom:          0 !important;
        margin:                 0 0 0 0 0 !important;
    }
  
    .profile {
        margin-top:             40px !important;
    } 

    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
        line-height:            1.5 !important;
        margin-left:            75% !important;
    }

    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }

    .experiencia_edu h3{
        color:                  var(--color-text-primary) !important;
    }
  
    .sidebar.mostrar + .main-content + footer {
        transform:              translateX(5%) !important;
        height:                 auto !important;
    }

    /* 7. Footer - Asegurar visibilidad */
    footer {
        width:                  107%!important;
        text-align:             center !important;
    }

    footer p {
        margin-left:            0 !important;
        font-size:              0.9em !important;
    }

}

@media (min-width: 322px) and (max-width: 377px) {
    /* 1. Sidebar - Ocupa el 100% del alto y 95% del ancho */
    .sidebar {
        width:                  90% !important;
        height:                 100vh !important;
        transform:              translateX(-100%);
        padding:                15px 10px;
        box-shadow:             4px 0 15px rgba(0,0,0,0.3);
        overflow-y:             auto; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:              translateX(0);
        height:                 102vh !important;
    }

    /* 2. Botón de toggle - Más grande y accesible */
    .toggle-sidebar-button {
        width:                  42px !important;
        height:                 42px !important;
        top:                    12px !important;
        left:                   12px !important;
        font-size:              1.6rem !important;
        background:             var(--color-bg-dark) !important;
        border:                 2px solid var(--color-text-primary) !important;
        display:                flex !important;
        align-items:            center;
        justify-content:        center;
    }

    /* 3. Contenido del sidebar - Ajustes precisos */
    .sidebar h1 {
        font-size:              1.75em;
        margin-bottom:          15px;
        padding:                0 5px 10px;
        border-bottom:          1px solid var(--color-border);
        margin-top:             80px;
    }
  
    .sidebar p {
        font-size:              1.125em;
    }

    .links-grid_slidebar {
        margin-top:             25px;
    }
  
    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        width:                  75% !important;
        font-size:              1.25em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             60px !important;
        align-items:            center !important;
        justify-content:        column !important;
    }

    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }

    /* 4. Sección de redes sociales */
    .presentacion__enlaces__titulo {
        margin:                 30px 0 15px !important;
        font-size:              1.3em !important;
        text-align:             center !important;
        margin-top:             90px !important;
    }
  
    .presentacion__enlaces {
        gap:                    12px !important;
    }

    /* 5. Contacto - Mejor espaciado */
    .contacto p {
        margin-top:             25px !important;
        padding:                10px !important;
        line-height:            1.7 !important;
        margin-bottom:          20px !important;
    }

    /* 6. Contenido principal */
    .main-content {
        margin-left:            0 !important;
        width:                  100vw !important;
        padding:                10px !important;
        transform:              translateX(0) !important;
        box-shadow:             none !important;
        background:             var(--color-bg-dark) !important;
        border:                 none !important;
        position:               relative !important;
        z-index:                999 !important;
        overflow-y:             auto !important;
        height:                 calc(100vh - 60px) !important; /* Ajusta para el footer */
        margin-top:             0 !important;
        margin-bottom:          0 !important;
        margin:                 0 0 0 0 0 !important;
    }

    .profile {
        margin-top:             60px !important;
    }

    .profile h2{
        font-size:              1.5em;
        margin-bottom:          10px;
    }

    .profile p {
        font-size:              1.1em;
    }

    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
        margin-left:            75% !important;
    }

    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }

    .experiencia_edu h3{
        color:                  var(--color-text-primary) !important;
    }
  
    .sidebar.mostrar + .main-content + footer{
        transform:              translateX(5%) !important;
    }

    /* 7. Footer - Asegurar visibilidad */
    footer {
        width:                  105%!important;
        text-align:             center !important;
    }

    footer p {
        margin-left:            0 !important;
        font-size:              0.9em !important;
    }

}



@media (min-width: 378px) and (max-width: 428px) {

    /* 1. Sidebar - Ocupa el 100% del alto y 95% del ancho */
    .sidebar {
        width:                  80% !important;
        height:                 100vh !important;
        transform:              translateX(-100%);
        padding:                15px 10px;
        box-shadow:             4px 0 15px rgba(0,0,0,0.3);
        overflow-y:             auto; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:              translateX(0);
        height:                 102vh !important;
    }

    /* 2. Botón de toggle - Más grande y accesible */
    .toggle-sidebar-button {
        width:                  42px !important;
        height:                 42px !important;
        top:                    12px !important;
        left:                   12px !important;
        font-size:              1.6rem !important;
        background:             var(--color-bg-dark) !important;
        border:                 2px solid var(--color-text-primary) !important;
        display:                flex !important;
        align-items:            center;
        justify-content:        center;
    }

    /* 3. Contenido del sidebar - Ajustes precisos */
    .sidebar h1 {
        font-size:              1.75em;
        margin-bottom:          15px;
        padding:                0 5px 10px;
        border-bottom:          1px solid var(--color-border);
        margin-top:             70px;
    }
  
    .sidebar p {
        font-size:              1.125em;
    }

    .links-grid_slidebar {
        margin-top:             25px;
        width:                  auto !important;
    }
  
    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        height:                 auto !important;
        width:                  75% !important;    
        font-size:              1.25em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             60px !important;
        align-items:            center !important;
        justify-content:        column !important;
    }

    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }

    /* 4. Sección de redes sociales */
    .presentacion__enlaces__titulo {
        margin:                 30px 0 15px !important;
        font-size:              1.3em !important;
        text-align:             center !important;
        margin-top:             90px !important;
    }
  
    .presentacion__enlaces {
        gap:                    12px !important;
    }

    /* 5. Contacto - Mejor espaciado */
    .contacto p {
        margin-top:             25px !important;
        padding:                10px !important;
        line-height:            1.7 !important;
        margin-bottom:          20px !important;
    }

    /* 6. Contenido principal */
    .main-content {
        margin-left:            0 !important;
        width:                  100vw !important;
        padding:                10px !important;
        transform:              translateX(0) !important;
        box-shadow:             none !important;
        background:             var(--color-bg-dark) !important;
        border:                 none !important;
        position:               relative !important;
        z-index:                999 !important;
        overflow-y:             auto !important;
        height:                 calc(100vh - 60px) !important; /* Ajusta para el footer */
        margin-top:             0 !important;
        margin-bottom:          0 !important;
        margin:                 0 0 0 0 0 !important;
    }

    .profile {
        margin-top:             40px !important;
    }

    .profile h2{
        font-size:              1.5em;
        margin-bottom:          10px;
    }

    .profile p {
        font-size:              1.1em;
    }

    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
        margin-left:            75% !important;
    }

    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }

    .experiencia_edu h3{
        color:                  var(--color-text-primary) !important;
    }
  
    .sidebar.mostrar + .main-content + footer{
        transform:              translateX(5%) !important;
    }

    /* 7. Footer - Asegurar visibilidad */
    footer {
        width:                  105%!important;
        text-align:             center !important;
    }

    footer p {
        margin-left:            0 !important;
        font-size:              0.9em !important;
    }

}


@media (min-width: 430px) and (max-width: 770px){

    /* 1. Sidebar - Ocupa el 100% del alto y 95% del ancho */
    .sidebar {
        width:                  45% !important;
        height:                 100vh !important;
        transform:              translateX(-100%);
        padding:                15px 10px;
        box-shadow:             4px 0 15px rgba(0,0,0,0.3);
        overflow-y:             auto; /* Permite scroll si el contenido es muy largo */
    }
  

    .sidebar.mostrar {
        transform:              translateX(0);
        height:                 102vh !important;
    }


    /* 2. Botón de toggle - Más grande y accesible */
    .toggle-sidebar-button {
        width:                  42px !important;
        height:                 42px !important;
        top:                    12px !important;
        left:                   12px !important;
        font-size:              1.6rem !important;
        background:             var(--color-bg-dark) !important;
        border:                 2px solid var(--color-text-primary) !important;
        display:                flex !important;
        align-items:            center;
        justify-content:        center;
    }

    /* 3. Contenido del sidebar - Ajustes precisos */
    .sidebar h1 {
        font-size:              1.75em;
        margin-bottom:          15px;
        padding:                0 5px 10px;
        border-bottom:          1px solid var(--color-border);
        margin-top:             70px;
    }
  

    .sidebar p {
        font-size:              1.125em;
    }


    .links-grid_slidebar {
        margin-top:             25px;
        width:                  auto !important;
    }
  

    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        height:                 auto !important;
        width:                  75% !important;    
        font-size:              1.25em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             60px !important;
        align-items:            center !important;
        justify-content:        column !important;
    }


    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }


    /* 4. Sección de redes sociales */
    .presentacion__enlaces__titulo {
        margin:                 30px 0 15px !important;
        font-size:              1.3em !important;
        text-align:             center !important;
        margin-top:             90px !important;
    }
  
    .presentacion__enlaces {
        gap:                    12px !important;
    }


    /* 5. Contacto - Mejor espaciado */
    .contacto p {
        margin-top:             25px !important;
        padding:                10px !important;
        line-height:            1.7 !important;
        margin-bottom:          20px !important;
    }


    /* 6. Contenido principal */
    .main-content {
        width:                  100vw !important;
        padding:                10px !important;
        transform:              translateX(0) !important;
        box-shadow:             none !important;
        background:             none !important;
        border:                 none !important;
        position:               relative !important;
        z-index:                999 !important;
        overflow-y:             auto !important;
        height:                 calc(100vh - 60px) !important; /* Ajusta para el footer */
        margin-top:             0 !important;
        margin-bottom:          0% !important;
        margin-left:            1% !important;
        margin-right:           2% !important;
    }


    body{
        background:             var(--color-bg-dark) !important;
        margin:                 0 0 0 0 0 !important;
    }


    .profile {
        margin-top:             40px !important;
    }


    .profile h2{
        font-size:              1.5em;
        margin-bottom:          10px;
    }


    .profile p {
        font-size:              1.1em;
    }


    .experiencia_educacion-grid {
        gap:                    200% !important;
        margin-left:            auto !important;
    }


    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
        margin-left:            75% !important;
    }


    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }


    .experiencia_edu h3{
        color:                  var(--color-text-primary) !important;
    }
  
    .experiencia_edu{
        margin-left:            0% !important;
    }


    .sidebar.mostrar + .main-content + footer{
        transform:              translateX(5%) !important;
    }

    /* 7. Footer - Asegurar visibilidad */
    footer {
        width:                  105%!important;
        text-align:             center !important;
        margin-top:             0 !important;
    }

    footer p {
        margin-left:            0 !important;
        font-size:              0.9em !important;
    }

}


@media (min-width: 772px) and (max-width: 1027px){

      /* 1. Sidebar - Ocupa el 100% del alto y 95% del ancho */
    .sidebar {
        width:                  35% !important;
        height:                 100vh !important;
        transform:              translateX(-100%);
        padding:                15px 10px;
        box-shadow:             4px 0 15px rgba(0,0,0,0.3);
        overflow-y:             auto; /* Permite scroll si el contenido es muy largo */
    }
  

    .sidebar.mostrar {
        transform:              translateX(0);
        height:                 102vh !important;
    }


    /* 2. Botón de toggle - Más grande y accesible */
    .toggle-sidebar-button {
        width:                  42px !important;
        height:                 42px !important;
        top:                    12px !important;
        left:                   12px !important;
        font-size:              1.6rem !important;
        background:             var(--color-bg-dark) !important;
        border:                 2px solid var(--color-text-primary) !important;
        display:                flex !important;
        align-items:            center;
        justify-content:        center;
    }


    /* 3. Contenido del sidebar - Ajustes precisos */
    .sidebar h1 {
        font-size:              1.75em;
        margin-bottom:          15px;
        padding:                0 5px 10px;
        border-bottom:          1px solid var(--color-border);
        margin-top:             70px;
    }

  
    .sidebar p {
        font-size:              1.125em;
    }


    .links-grid_slidebar {
        margin-top:             25px;
        width:                  auto !important;
    }

  
    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        height:                 auto !important;
        width:                  75% !important;
        font-size:              1.25em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             60px !important;
        align-items:            center !important;
        justify-content:        column !important;
    }
  

    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }


    /* 4. Sección de redes sociales */
    .presentacion__enlaces__titulo {
        margin:                 30px 0 15px !important;
        font-size:              1.3em !important;
        text-align:             center !important;
        margin-top:             90px !important;
    }
  

    .presentacion__enlaces {
        gap:                    12px !important;
    }


    /* 5. Contacto - Mejor espaciado */
    .contacto p {
        margin-top:             25px !important;
        padding:                10px !important;
        line-height:            1.7 !important;
        margin-bottom:          20px !important;
    }


    /* 6. Contenido principal */
    .main-content {
        width:                  100% !important;
        padding:                0 !important;
        transform:              translateX(0) !important;
        box-shadow:             none !important;
        background:             none !important;
        border:                 none !important;
        position:               relative !important;
        z-index:                999 !important;
        overflow-y:             auto !important;
        height:                 calc(100vh - 60px) !important; /* Ajusta para el footer */
        margin-top:             0 !important;
        margin-bottom:          0% !important;
        margin-left:            0% !important;
        margin-right:           0% !important;
  }


    body{
        background:             var(--color-bg-dark) !important;
        margin:                 0 0 0 0 0 !important;
    }
  

    .profile {
        margin-top:             40px !important;
        margin-left:            10% !important;
        margin-right:           0% !important;
    }


    .profile h2{
        font-size:              1.5em;
        margin-bottom:          10px;
    }


    .profile p {
        font-size:              1.1em;
    }


    .experiencia_educacion-grid {
        gap:                    200% !important;
        margin-left:            55% !important;
    }


    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
    } 


    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }


    .experiencia_edu {
        margin-left:            15% !important;
        margin-right:           0% !important;
    }


    .experiencia_edu h3{
        color:                  var(--color-text-primary) !important;
    }

  
    .sidebar.mostrar + .main-content + footer{
        transform:              translateX(5%) !important;
    }


    /* 7. Footer - Asegurar visibilidad */
    footer {
        width:                  100%!important;
        text-align:             center !important;
        margin-top:             2%!important;
    }


    footer p {
        margin-left:            0 !important;
        font-size:              0.9em !important;
    }


}



@media (min-width: 1028px) and (max-width: 1440px) {

    .toggle-sidebar-button {
        display:                none !important;
    }


    .sidebar-overlay {
        display:                none !important;
    }


    .sidebar h1 {
        font-size:              1.75em !important;
        margin-bottom:          25px !important;
        padding:                0 5px 10px !important;
        border-bottom:          1px solid var(--color-border);
        margin-top:             50px !important;
    }
  

    .sidebar{
        width:                  25% !important;
        height:                 100vh !important;
        overflow-y:             auto !important;
    }


    .sidebar p {
        font-size:              1.125em !important;
    }


    .links-grid_slidebar {
        margin-top:             25px !important;
        width:                  auto !important;
    }

  
    .links-grid_slidebar a {
        padding:                12px 8px !important;
        margin:                 8px auto !important;
        height:                 auto !important;
        width:                  75% !important;
        font-size:              1.25em !important;
        text-align:             center !important;
        border-radius:          8px !important;
        transition:             background-color 0.3s ease !important;
        background-color:       var(--color-bg-dark) !important;
        color:                  var(--color-text-primary) !important;
        margin-top:             10% !important;
        align-items:            center !important;
        justify-content:        column !important;
    }


    .contacto p {
        font-size:              1.125em !important;
        margin-top:             5% !important
    }


    .presentacion__enlaces__titulo{
        margin-top:             30% !important;
    }


    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        height:                 35px !important;
        width:                  35px !important;
    }


    .experiencia_educacion-grid {
        gap:                    200% !important;
        margin-left:            55% !important;
    }


    .experiencia_educacion_card{
        color:                  var(--color-text-primary) !important;
        font-family:            var(--font-secondary) !important;
        font-size:              0.8em !important;
    }


    .experiencia_educacion_card:hover {
        background-color:       var(--color-hover-bg) !important;
        color:                  var(--color-hover-text) !important;
    }


    .experiencia_edu {
        margin-left:            2% !important;
        margin-right:           0% !important;
    }


    footer {
        height:                 fit-content !important;
        align-items:            center !important;
    }
  

    footer p {
        font-size:              small !important;
        text-align:             center !important;
        margin-left:            30% !important;
    }

}


/* Pantallas Ultra HD/4K (2000px-2560px) */
@media (min-width: 2000px) and (max-width: 2566px) {

    /* Sidebar texto */
    .sidebar {
        background-color:       var(--color-bg-dark);
        width:                  20%;
        padding:                var(--padding-large);
        box-shadow:             4px 0 8px rgba(0, 0, 0, 0.5);
        position:               fixed;
        height:                 var(--height-full);
        text-align:             center;
        flex-direction:         column;
        z-index:                1000;
    }

    .sidebar h1 {
        font-family:            var(--font-secondary);
        font-size:              4em;
        color:                  var(--color-text-primary);
        border-bottom:          2px solid var(--color-border);
        margin-bottom:          var(--margin-default);
        padding-bottom:         var(--padding-default);
        margin-top:             15%;
    }

    .sidebar p {
        font-size:              1.75em;
        color:                  var(--color-text-secondary);
        margin-bottom:          var(--margin-large);
        line-height:            1.5;
    }

    /* Sidebar links menú */
    .links-grid_slidebar a {
        display:                flex;
        margin-left:            10%;
        align-items:            center;
        justify-content:        center;
        flex-direction:         column;
        text-align:             center;
        padding:                var(--padding-default);
        width:                  75%;
        text-decoration:        none;
        color:                  var(--color-text-primary);
        background-color:       var(--color-bg-dark);
        border-radius:          20px;
        border:                 1px solid var(--color-border);
        transition:             background-color var(--transition), color var(--transition);
        margin-bottom:          auto;
        margin-top:             10%;
        font-size:              2em;
    }

    .links-grid_slidebar a:hover {
        background-color:       var(--color-hover-bg);
        color:                  var(--color-hover-text);
    }

    /* Sidebar íconos de hipervínculos externos */
    .presentacion__enlaces__titulo {
        font-size:              2em;
        color:                  var(--color-text-primary);
        font-family:            var(--font-secondary);
        flex-direction:         column;
        margin-top:             30%;
    }

    .presentacion__enlaces {
        text-align:             center;
        flex-direction:         row;
        display:                flex;
        justify-content:        center;
        position:               relative;
    }

    .presentacion__enlaces__link1, .presentacion__enlaces__link2 {
        display:                flex;
        flex-direction:         row;
        align-items:            center;
        justify-content:        center;
        text-decoration:        none;
        color:                  var(--color-text-primary);
        background-color:       var(--color-bg-dark);
        border-radius:          var(--border-radius);
        padding:                var(--padding-default);
        margin-bottom:          30px;
        transition:             background-color var(--transition), color var(--transition);
    }

    .presentacion__enlaces__link1 img, .presentacion__enlaces__link2 img {
        width:                  55px;
        height:                 55px;
        margin-right:           10px;
    }

    .presentacion__enlaces__link1:hover, .presentacion__enlaces__link2:hover {
        transform:              scale(1.1);
    }

    /* Estilo de datos de contacto personal */
    .contacto p {
        text-align:             center;
        flex-direction:         column;
        display:                flex;
        justify-content:        center;
        position:               relative;
        margin-top:             8%;
        margin-bottom:          20%;
        padding:                var(--padding-default);
        background-color:       var(--color-bg-dark);
        gap:                    var(--gap-default);
    }

    /* Estilo del contenido central layout */
    .main-content {
        flex:                   1;
        margin-left:            30%;
        padding:                var(--padding-large);
        align-items:            center;
        display:                block;
        flex-direction:         column;
        justify-content:        center;
        min-height:             89vh;
    }

    body {
        font-family:            var(--font-primary);
        background:             var(--color-bg-gradient);
        color:                  var(--color-text-light);
        margin:                 0;
        margin-bottom:          0;
        flex:                   1 0 auto;
        padding:                0;
        box-sizing:             border-box;
        flex-direction:         column;
        height:                 var(--height-min-content);
        overflow-y:             auto;
        align-items:            center;
        overflow-x:             hidden;
        display:                inline;
    }

    /* Estilo del texto central parte del perfil */
    .profile {
        background-color:       var(--color-bg-dark);
        padding:                var(--padding-large);
        border-radius:          var(--border-radius);
        box-shadow:             var(--box-shadow);
        border:                 1px solid var(--color-border);
        transition:             transform var(--transition);
        max-width:              85%;
        margin-bottom:          2%;
        margin-top:             2%;
        height:                 var(--height-min-content);
        display:                block;
        flex-direction:         column;
        align-items:            center;
        justify-content:        center;
    }

    .profile h2 {
        font-family:            var(--font-secondary);
        font-size:              4.3em;
        color:                  var(--color-text-primary);
        border-bottom:          2px solid var(--color-border);
        margin-bottom:          var(--margin-default);
        margin-top:             2%;
    }

    .profile p {
        font-size:              1.8em;
        line-height:            1.6;
        color:                  var(--color-text-light);
        margin-bottom:          var(--margin-default);
        gap:                    10px;
        font-family:            var(--font-primary);
    }

    .frase-inspiradora {
        background:             linear-gradient(to right, #0f2027, #203a43, #0f2027);
        color:                  #fff;
        padding:                fit-content;
        border-radius:          8px;
        text-align:             center;
        margin:                 auto;
        box-shadow:             0 8px 20px rgba(0, 0, 0, 0.4);
        width:                  fit-content;
    }

    .frase-inspiradora blockquote p {
        font-size:              1.8em;
        font-family:            var(--font-accent);
        letter-spacing:         fit-content;
        line-height:            1.5;
        text-shadow:            2px 2px 4px #000;
    }

    .frase-inspiradora {
        animation:              fadeInUp var(--animation-duration) ease-in-out;
    }

    @keyframes fadeInUp {
        from {
            opacity:            0;
            transform:          translateY(20px);
        }to {
            opacity:            1;
            transform:          translateY(0);
      }

    }

    /* Estilo de la sección de experiencia y educación */
     .experiencia_educacion-grid {
        display:                grid;
        grid-template-columns:  repeat(3, 2fr);
        gap:                    35%;
        margin:                 auto;
        flex-direction:         row;
        align-items:            row;
        justify-items:          center;
        justify-content:        center;
        margin-left:            27%;
        width:                  50%;
    }

    .experiencia_educacion-grid a {
        display:                block;
        text-align:             center;
        padding:                var(--padding-default);
        text-decoration:        none;
        color:                  var(--color-text-primary);
        background-color:       var(--color-bg-dark);
        border-radius:          var(--border-radius);
        border:                 1px solid var(--color-border);
        transition:             background-color var(--transition), color var(--transition);
    }

    /* Estilo de los enlaces de experiencia y educación */

    .experiencia_educacion_card {
        background-color:       var(--color-bg-dark);
        border-radius:          var(--border-radius);
        box-shadow:             var(--box-shadow);
        transition:             transform var(--transition);
        cursor:                 pointer;
        flex:                   1;
        text-align:             center;
        color:                  var(--color-text-primary);
        font-family:            var(--font-secondary);
        border:                 1px solid var(--color-border);
        height:                 40%;
        padding:                var(--padding-large);
        width:                  auto;
        display:                flex;
        align-items:            center;
        justify-content:        center;
        font-size:              1.8em;
    }

    .experiencia_educacion_card:hover {
        transform:              scale(1.05);
        background-color:       var(--color-hover-bg);
        color:                  var(--color-hover-text);
        transition:             all var(--transition);
    } 

    /* Estilo del texto al dar click de experiencia y educación */

    .container {
        display:                fixed;
        margin-left:            10%;
        grid-template-columns:  repeat(1, 1fr);
        max-width:              fit-content;
    }

    .experiencia_edu {
        opacity:                1;
        transform:              translateY(-50px);
        transition:             opacity 0.9s ease, transform 0.9s ease;
        margin-top:             var(--margin-default);
        background-color:       var(--color-bg-dark);
        padding:                var(--padding-large);
        border-radius:          8px;
        box-shadow:             var(--box-shadow);
        border:                 1px solid var(--color-border);
        max-width:              75%;
        width:                  100%;
        text-align:             left;
        position:               relative;
        z-index:                1;
        display:                none;
        flex-direction:         column;
        align-items:            center;
        height:                 auto;
        margin-bottom:          var(--margin-default);
        box-sizing:             border-box;
        font-family:            var(--font-primary);
        font-size:              1.7em;
        line-height:            1.6;
        color:                  var(--color-text-light); 
        margin-left:            2%;
    }

    .experiencia_edu.mostrar {
        display:                flex;
        opacity:                1;
        transform:              translateY(0);
    }

    .experiencia_edu h3 {
        font-family:            var(--font-secondary);
        font-size:              1.5em;
        color:                  var(--color-text-primary);
        border-bottom:          2px solid var(--color-border);
        margin-bottom:          var(--margin-default);
        text-align:             left;
        width:                  100%;
    }

    .experiencia_edu p {
        font-size:              var(--font-size-default);
        line-height:            1.6;
        color:                  var(--color-text-light);
        margin-bottom:          var(--margin-default);
        text-align:             left;
    }

    /* Estilo del footer */
    footer {
        width:                  100%;
        text-align:             center;
        padding:                var(--spacing-sm);
        box-shadow:             0 -2px 5px rgba(0, 0, 0, 0.1);
        border-top:             1px solid var(--color-border-footer);
        color:                  var(--color-text-muted);
        position:               relative;
        left:                   0;
        bottom:                 0;
        display:                flex;
        flex-direction:         column;
        align-items:            center;
        justify-content:        center;
        margin-top:             1.2%;
        margin-bottom:          0;
        padding:                var(--padding-default);
        box-sizing:             border-box;
        height:                 auto;
        padding:                var(--padding-default);
        background:             var(--color-bg-dark);
        border-top:             1px solid var(--color-border-footer);
    }

    footer p {
        margin-left:            20%;
        font-size:              1.5em;
        align-items:            center;
        justify-content:        center;
    }

}




/* Asegura que el botón toggle esté siempre visible y con estilos consistentes */
/* ====== BOTÓN TOGGLE - ARREGLOS DEFINITIVOS ====== */
.toggle-sidebar-button {

    /* Reset de estilos conflictivos */
    all:                        unset;
  
    /* Estilos base obligatorios */
    display:                    block !important;
    position:                   fixed !important;
    top:                        15px !important;
    left:                       15px !important;
    z-index:                    1001 !important;
  
    /* Estilos visuales (ajusta según tu tema) */
    width:                      48px !important;
    height:                     48px !important;
    background:                 var(--color-bg-dark) !important;
    border:                     2px solid var(--color-text-primary) !important;
    color:                      var(--color-text-primary) !important;
    border-radius:              50% !important;
    font-size:                  1.8rem !important;
    text-align:                 center !important;
    line-height:                48px !important;
    cursor:                     pointer !important;
    box-shadow:                 0 2px 10px rgba(0,0,0,0.3) !important;
  
    /* Ícono de hamburguesa */
    content:                    "☰" !important;
}


@media (min-width: 1028px) {
    .toggle-sidebar-button {
        display:                none !important;
    }

    .sidebar-overlay {
        display:                none !important;
    }

}