/*─────────────────────────────────────────────────────────────────────────────
  Root: Variables globales para Proyectos & Servicios
─────────────────────────────────────────────────────────────────────────────*/
:root {
    /* Colores */
    --color-bg-gradient-start:#181818;
    --color-bg-gradient-end:  #232323;
    --color-sidebar-bg:       #202020;
    --color-subsection-bg:    #292929;
    --color-project-bg:       #222;
    --color-primary-gold:     #d4af37;
    --color-text-light:       #f0f0f0;
    --color-text-muted:       #b0b0b0;
    --color-border-dark:      #444;
    --color-border-footer:    #5a5a5a;
    --color-border-highlight: #333;

    /* Tipografía */
    --font-body:              'Roboto', sans-serif;
    --font-title:             'Prata', serif;

    /* Tamaños de fuente */
    --font-size-sm:           0.85em;
    --font-size-base:         1em;
    --font-size-md:           1.2em;
    --font-size-h3:           1.5em;
    --font-size-h2:           1.8em;
    --font-size-h1:           2.2em;
    --font-size-p:            0.95em;

    /* Espaciado */
    --spacing-xs:             10px;
    --spacing-sm:             15px;
    --spacing-md:             22px;
    --spacing-lg:             36px;

    /* Bordes y radios */
    --radius-sm:              4px;
    --radius-md:              10px;
    --radius-lg:              16px;

    /* Sombras */
    --shadow-sidebar:         4px 0  8px  rgba(0, 0, 0, 0.5);
    --shadow-soft:            0   0 10px rgba(0, 0, 0, 0.5);
    --shadow-btn-hover:       0   4px  8px rgba(0, 0, 0, 0.5);

    /* Transiciones */
    --transition-fast:        0.3s ease;
    --transition-medium:      0.5s ease;
    --transition-slow:        0.9s ease;

    /* Anchos fijos */
    --sidebar-width:          320px;

    /* Sidebar Toggle Button*/
    --color-hover-bg:          #d4af37;
    --color-hover-text:        #121212;
}


/*─────────────────────────────────────────────────────────────────────────────
ya quedo listo el problema y todo, solo queda los diseños de diferentes pantallas xp
─────────────────────────────────────────────────────────────────────────────*/


/*─────────────────────────────────────────────────────────────────────────────
  Animaciones de carga y salida de página
─────────────────────────────────────────────────────────────────────────────*/
.main-content {
    margin-left:              calc(var(--sidebar-width)); /* Igual al ancho del sidebar */
    padding:                  var(--spacing-md);
    width:                    calc(100% - var(--sidebar-width)); /* Ocupar espacio restante */
    height:                   100vh;
    position:                 relative;
    left:                     0;
    top:                      0; /* Resetear posición */
    margin-top:               0 !important; /* Eliminar márgenes negativos */
    overflow-x:               hidden !important;
    display:                  flex;
    flex-direction:           column;
    
}


body {
    font-family:              var(--font-primary);
    background:               var(--color-bg-gradient-start);
    color:                    var(--color-text-light);
    display:                  flex;
    flex-direction:           column;
    max-height:               100vh;
    height:                   fit-content;
    margin:                   0;
    position:                 relative;
    overflow-x:               hidden;
}

body.loaded {
    opacity:                  1;
    transform:                translateY(0);
    transition:               opacity var(--transition-medium), transform var(--transition-medium);
}

body.fade-out {
    opacity:                  0;
    transform:                translateY(-20px);
    transition:               opacity var(--transition-medium), transform var(--transition-medium);
}

body.fade-in {
    opacity:                  1;
    transform:                translateY(0px);
    transition:               opacity var(--transition-medium), transform var(--transition-slow);
}


/*─────────────────────────────────────────────────────────────────────────────
  Sidebar
─────────────────────────────────────────────────────────────────────────────*/
.sidebar {
    background-color:         var(--color-sidebar-bg);
    width:                    var(--sidebar-width);
    min-width:                var(--sidebar-width);
    max-width:                var(--sidebar-width);
    height:                   100vh;
    position:                 fixed;
    top:                      0;
    left:                     0;
    display:                  flex;
    flex-direction:           column;
    align-items:              center;
    justify-content:          center;
    overflow-y:               auto;
    z-index:                  100;
    text-align:               left;
    box-shadow:               var(--shadow-sidebar);
}

.sidebar h1 {
    font-family:              var(--font-title);
    font-size:                var(--font-size-h1);
    color:                    var(--color-primary-gold);
    border-bottom:            2px solid var(--color-border-dark);
    margin-bottom:            0;
    padding-bottom:           var(--spacing-xs);
    text-align:               center;
    margin-top:               15%;
}

.sidebar p {
    font-size:                var(--font-size-base);
    color:                    var(--color-text-muted);
    margin-bottom:            10%;
    line-height:              1.5;
    text-align:               left;
    margin-left:              5%;
    margin-right:             5%;
}


/*─────────────────────────────────────────────────────────────────────────────
  Menú de enlaces en sidebar
─────────────────────────────────────────────────────────────────────────────*/
.links-grid_slidebar {
    display:                  flex;
    flex-direction:           column;
    align-items:              center;
    justify-content:          center; 
    width:                    75%;
    padding:                  var(--spacing-xs);
    gap:                      15px;
    margin-top:               20%;
    color:                    var(--color-primary-gold);
    text-decoration:          none;
    border-radius:            var(--radius-sm);
    transition:               background var(--transition-fast),
                                color      var(--transition-fast);
    margin-left:              0%;
    margin-bottom:            auto;
}


/*─────────────────────────────────────────────────────────────────────────────
  Tarjetas de servicios/proyectos
─────────────────────────────────────────────────────────────────────────────*/
.certificate-card {
    background-color:         var(--color-sidebar-bg);
    text-align:               center;
    display:                  flex;
    flex-direction:           column;
    align-items:              flex-start;
    justify-content:          center;
    width:                    100%;
    height:                   100%;
    transition:               background var(--transition-fast), transform var(--transition-fast);
    position:                 relative;
    overflow:                 hidden;
    text-align:               left;
    color:                    var(--color-text-light);
}

.certificate-card:hover {
    text-align:               center;
    transform:                translateY(-5px);
    cursor:                   pointer;
}

.certificate-card img {
    width:                    100px;
    height:                   100px;
    margin:                   var(--spacing-sm);
    transition:               transform var(--transition-fast);
    align-items:              left;
}

.certificate-card:hover img, .certificate-card:hover h3 {
    transform:                scale(1.1);
    transition:               transform var(--transition-fast);
}

.certificate-card::before {
    content:                  attr(data-categoria); /* Usa el valor del atributo data-categoria */
    position:                 fixed;
    top:                      50%;
    left:                     50%;
    transform:                translate(-50%, -50%);
    transition:               var(--transition-slow);
    color:                    var(--color-primary-gold);
    font-family:              var(--font-title);
    font-size:                var(--font-size-md);
    opacity:                  0;
    transition:               opacity var(--transition-fast);
    pointer-events:           none;
    text-align:               left;
    margin-left:              25%;
}

/* Mostrar el texto al pasar el cursor */
.certificate-card:hover::before {
    opacity:                  1;
}


/*─────────────────────────────────────────────────────────────────────────────
  Main Content
─────────────────────────────────────────────────────────────────────────────*/

/* Botones de volver atrás */
.back-link1,
.back-link2{
    position:                 fixed;
    cursor:                   pointer;
    z-index:                  100;
    display:                  flex;
}


.back-link1 {
    left:                     calc(var(--sidebar-width) + 2%);
}

.back-link2 {
    left:                     calc(var(--sidebar-width) + 8%);
}

.back-link1 img {
    width:                    15%;
    height:                   15%;
}

.back-link2 img {
    width:                    13%;
    height:                   13%;
}

.back-link1 img:hover,
.back-link2 img:hover {
    transform:                scale(1.1);
    transition:               transform var(--transition-medium);
}


/*─────────────────────────────────────────────────────────────────────────────
  Sección de instrucciones
─────────────────────────────────────────────────────────────────────────────*/
.instrucciones_de_interacción {
    background-color:         var(--color-subsection-bg);
    border-radius:            var(--radius-md);
    padding:                  var(--spacing-md);
    margin-bottom:            var(--spacing-md);
    box-shadow:               var(--shadow-soft);
    width:                    100%;
    max-width:                800px;
    margin-top:               3%;
    margin-left:              20%;
}

.instrucciones_de_interacción h2 {
    font-family:              var(--font-title);
    font-size:                var(--font-size-h2);
    color:                    var(--color-primary-gold);
    border-bottom:            2px solid var(--color-border-dark);
    margin-bottom:            var(--spacing-md);
}

.instrucciones_de_interacción p {
    font-size:                var(--font-size-base);
    color:                    var(--color-text-light);
    line-height:              1.5;
}

.interaccion_detalles{
    align-items:              center;
    text-align:               center;
    margin-bottom:            0%;
}


/*─────────────────────────────────────────────────────────────────────────────
  Efectos de transición para sidebar y main content
─────────────────────────────────────────────────────────────────────────────*/
.sidebar,
.main-content {
    transition:               margin var(--transition-fast), padding var(--transition-fast);
}


/*─────────────────────────────────────────────────────────────────────────────
  Botones Toggle
─────────────────────────────────────────────────────────────────────────────*/
.toggle-button {
    background-color:         var(--color-sidebar-bg);
    color:                    var(--color-primary-gold);
    font-family:              var(--font-body);
    font-size:                var(--font-size-base);
    border:                   none;
    border-radius:            var(--radius-sm);
    padding:                  var(--spacing-xs) var(--spacing-sm);
    cursor:                   pointer;
    transition:               background var(--transition-fast), transform var(--transition-fast);
    display:                  flex;
    align-items:              center;
    justify-content:          space-between;
    gap:                      var(--spacing-xs);
}

.toggle-button:hover {
    background-color:         var(--color-border-highlight);
    transform:                translateY(-2px);
}


/*─────────────────────────────────────────────────────────────────────────────
  Contenido Toggle
─────────────────────────────────────────────────────────────────────────────*/
.toggle-content {
    max-height:               0;
    overflow:                 hidden;
    transition:               max-height var(--transition-medium), opacity var(--transition-medium);
    opacity:                  0;
    font-family:              var(--font-body);
    font-size:                var(--font-size-base);
}


.toggle-content.visible {
    max-height:               500px; /* Ajusta según el contenido máximo esperado */
    opacity:                  1;
}


/*─────────────────────────────────────────────────────────────────────────────
  Cards de proyectos y servicios
─────────────────────────────────────────────────────────────────────────────*/
.container_ProyectosAndServicios{
    margin-top:               5%;
    margin-bottom:            auto;
    margin-left:              20%;
}

.project-card {
    background-color:         var(--color-project-bg);
    border-radius:            var(--radius-md);
    box-shadow:               var(--shadow-soft);
    padding:                  var(--spacing-md);
    margin-bottom:            var(--spacing-md);
    margin-top:               0% !important;
    width:                    100%;
    max-width:                800px;
    transition:               opacity var(--transition-medium);
    display:                  none;
    opacity:                  0;
    transform:                translateY(20px);
    transition:               opacity 0.5s ease, transform 0.5s ease;
    pointer-events:           auto;
    flex-direction:           column;
    align-items:              flex-start;
    justify-content:          flex-start;
}

.project-card h3 {
    font-family:              var(--font-title);
    font-size:                var(--font-size-h3);
    color:                    var(--color-primary-gold);
    margin-bottom:            var(--spacing-sm);
}

.project-card ul {
    list-style:               disc inside;
    padding-left:             var(--spacing-sm);
    margin-bottom:            var(--spacing-md);
    color:                    var(--color-text-light);
    font-size:                var(--font-size-md);
}

.project-card li {
    margin-bottom:            var(--spacing-xs);
    color:                    var(--color-text-light);
    list-style:               disc inside;
    padding-left:             var(--spacing-lg);
    font-size:                var(--font-size-sm);
    line-height:              1.5;
    height:                   fit-content;
    font-family:              var(--font-body);
}

.project-card a {
    color:                    var(--color-primary-gold);
    text-decoration:          none;
    transition:               color var(--transition-fast);
}

.project-card a:hover {
    color:                    var(--color-text-light);
    text-decoration:          underline;
}

.project-card p {
    font-size:                var(--font-size-p);
    color:                    var(--color-text-light);
    line-height:              1.5;
    margin-bottom:            var(--spacing-md);
    margin-top:               5px;
    font-family:              var(--font-body);
    font-style:               italic;
}


/* Mostrar las tarjetas con transición */
.project-card.visible {
    transform:                translateY(0);
    opacity:                  1;
    pointer-events:           auto;
    display:                  flex;
    animation:                fadeIn 0.75s ease-in-out;
}


/*─────────────────────────────────────────────────────────────────────────────
  Footer
─────────────────────────────────────────────────────────────────────────────*/
footer {
    margin-left:              var(--sidebar-width);
    width:                    calc(100% - var(--sidebar-width));
    height:                   auto;
    text-align:               center;
    font-size:                var(--font-size-sm);
    padding:                  var(--spacing-sm);
    background-color:         var(--color-sidebar-bg);
    border-top:               1px solid var(--color-border-footer);
    color:                    var(--color-text-muted);
    position:                 flex;
    left:                     0;
    bottom:                   0;
    z-index:                  10;
    display:                  flex;
    flex-direction:           column;
    align-items:              center;
    justify-content:          center;
    margin-top:               0%;
}


footer p {
    margin-left:              1%;
    font-family:              var(--font-body);
}


/*─────────────────────────────────────────────────────────────────────────────
  Animaciones clave
─────────────────────────────────────────────────────────────────────────────*/
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0);      }
}




/*─────────────────────────────────────────────────────────────────────────────
  Diseño Responsivo 
─────────────────────────────────────────────────────────────────────────────*/

/* 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; /* Debajo del sidebar */
    opacity:                  0;
    visibility:               hidden;
    transition:               opacity 0.3s ease, visibility 0.3s ease;
}

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

/* Sidebar */
.sidebar {

    /* ... otros estilos ... */
    z-index:                  1000; /* Mayor que el overlay */
    transition:               transform 0.3s ease;
}

/* En pantallas pequeñas */
@media (max-width: 1028px) {
    .sidebar {
        transform:            translateX(-100%);
        position:             fixed;
    }
  
    .sidebar.mostrar {
        transform:            translateX(0);
    }
  
    .toggle-sidebar-button {
        display:              flex !important;
        z-index:              1001; /* Encima de todo */
    }
}

/* 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 (min-width: 1028px) {
    .toggle-sidebar-button {
        display:              none !important;
    }

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

/* Texto de los botones*/
@media (max-width: 1028px) {
    .certificate-card::before {
        opacity:              1 !important;
        margin-left:          25% !important;
        font-size:            var(--font-size-base) !important;
        content:              attr(data-categoria);
        pointer-events:       none !important;
        text-align:           left !important;
        position:             absolute !important;
    }
  

    .back-link1, .back-link2 {
        display:              flex !important;
        flex-direction:       column !important;
        align-items:          center !important;
        text-align:           center !important;
    }
  
    .back-link1::after, .back-link2::after {
        content:              attr(alt);
        color:                var(--color-text-light);
        font-size:            var(--font-size-sm);
        margin-top:           5px;
    }

    .back-link1 img, .back-link2 img {
        width:                40px !important;
        height:               40px !important;    
    }

}

@media (max-width: 1440px) {
    .back-link1, .back-link2 {
        display:              flex !important;
        flex-direction:       column !important;
        align-items:          center !important;
        text-align:           center !important;
    }
  
    .back-link1::after, .back-link2::after {
        content:              attr(alt);
        color:                var(--color-text-light);
        font-size:            var(--font-size-sm);
        margin-top:           5px;
    }
  
    .back-link1 img, .back-link2 img {
        width:                40px !important;
        height:               40px !important;
    }

}


/* ============ MEDIA QUERIES SCREEN (RESPONSIVE) ============ */

/*─────────────────────────────────────────────────────────────────────────────
  Diseño Responsivo - Adaptado a pantallas
─────────────────────────────────────────────────────────────────────────────*/

/* Pantallas muy pequeñas (hasta 321px) */
@media (max-width: 321px) {
 
    .toggle-sidebar-button {
        display:              flex !important;
    }

    .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 !important; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:            translateX(0);
        height:               100vh !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;
    }

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

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

    /* 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;
        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;
        flex-direction:       column !important;
    }

    body, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
        align-items:          center;
        font-family:          var(--font-primary) !important;
    }

    .back-link1 img, .back-link2 img{
        height:               60px !important;
        width:                60px !important;
    }

    .back-link2{
        left:                 60% !important;
        margin-top:           0% !important;
    }

    .back-link1{
        left:                 30% !important;
    }

    .back-link1:hover, .back-link2:hover {
        transform:            scale(1.05);
        transition:           transform 0.2s ease;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          0% !important;
        width:                80% !important;
        margin-top:           25% !important;
    }

    .toggle-button {
        text-align:           left !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          0% !important;
        width:                80% !important;
    }

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

    /* Footer */
    footer {
        width:                100% !important;
        margin-left:          0 !important;
        text-align:           center !important;
        margin-top:           0 !important;
        align-items:          center !important;
        justify-content:      center !important;
        padding:              var(--spacing-sm) 0 !important;
        display:              flex !important;
        flex-direction:       column !important;
    }

    footer p {
        font-size:            small !important;
        text-align:           center !important;
        margin-left:          0 !important;
        width:                100% !important;
        padding:              0 10px !important;
        box-sizing:           border-box !important;
    }

}

/* Pantallas pequeñas (322px-377px) QUEDO LISTO */
@media (min-width: 322px) and (max-width: 377px) {
 
    .toggle-sidebar-button {
        display:              flex !important;
    }

    .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 !important; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:            translateX(0);
        height:               100vh !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;
    }

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

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

    /* 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;
        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;
        flex-direction:       column !important;
    }

    body, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
        align-items:          center;
    }

    .back-link1 img, .back-link2 img{
        height:               60px !important;
        width:                60px !important;
    }

    .back-link2{
        left:                 60% !important;
        margin-top:           0% !important;
    }

    .back-link1{
        left:                 30% !important;
    }

    .back-link1:hover, .back-link2:hover {
        transform:            scale(1.05);
        transition:           transform 0.2s ease;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          2% !important;
        width:                80% !important;
        margin-top:           25% !important;
    }

    .toggle-button {
        text-align:           left !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          2% !important;
        width:                80% !important;
    }

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

    /* Footer */
    footer {
        width:                100% !important;
        margin-left:          0 !important;
        text-align:           center !important;
        margin-top:           0 !important;
        align-items:          center !important;
        justify-content:      center !important;
        padding:              var(--spacing-sm) 0 !important;
        display:              flex !important;
        flex-direction:       column !important;
    }

    footer p {
        font-size:            small !important;
        text-align:           center !important;
        margin-left:          0 !important;
        width:                100% !important;
        padding:              0 10px !important;
        box-sizing:           border-box !important;
    }

}

/* Pantallas medianas pequeñas (378px-428px) */
@media (min-width: 378px) and (max-width: 428px) {
 
    .toggle-sidebar-button {
        display:              flex !important;
    }

    .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 !important; /* Permite scroll si el contenido es muy largo */
    }
  
    .sidebar.mostrar {
        transform:            translateX(0);
        height:               100vh !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;
    }

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

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

    /* 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;
        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;
        flex-direction:       column !important;
    }

    body, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
        align-items:          center;
    }

    .back-link1 img, .back-link2 img{
        height:               60px !important;
        width:                60px !important;
    }

    .back-link2{
        left:                 60% !important;
        margin-top:           0% !important;
    }

    .back-link1{
        left:                 30% !important;
    }

    .back-link1:hover, .back-link2:hover {
        transform:            scale(1.05);
        transition:           transform 0.2s ease;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          3% !important;
        width:                80% !important;
        margin-top:           25% !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          3% !important;
        width:                80% !important;
    }

    .toggle-button {
        text-align:           left !important;
    }

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

    /* Footer */
    footer {
        width:                100%!important;
        margin-left:          0% !important;
        text-align:           center !important;
        margin-top:           0 !important;
        align-items:          center !important;
        left:                 0% !important;
    }

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

}

/* Tabletas (430px-770px) */
@media (min-width: 430px) and (max-width: 770px) {
 
    .toggle-sidebar-button {
        display:              flex !important;
    }

    .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:               100vh !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;
    }

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

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

    /* 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;
        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;
        flex-direction:       column !important;
    }

    body, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
        align-items:          center;
    }

    .back-link1 img, .back-link2 img{
        height:               80px !important;
        width:                80px !important;
    }

    .back-link2{
        left:                 60% !important;
        margin-top:           0% !important;
    }

    .back-link1{
        left:                 30% !important;
    }

    .back-link1:hover, .back-link2:hover {
        transform:            scale(1.05);
        transition:           transform 0.2s ease;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          5% !important;
        width:                80% !important;
        margin-top:           20% !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          5% !important;
        width:                80% !important;
    }

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

    /* Footer */
    footer {
        width:                100%!important;
        margin-left:          0% !important;
        text-align:           center !important;
        margin-top:           0 !important;
        align-items:          center !important;
    }

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

}

/* Tabletas grandes (772px-1027px) */
@media (min-width: 772px) and (max-width: 1027px) {
  
    .toggle-sidebar-button {
        display:              flex !important;
    }

    .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:               100vh !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;
    }

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

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

    /* Contenido principal */
    .main-content {
        margin-left:          0 !important;
        width:                100vw !important;
        padding:              10px !important;
        transform:            translateX(0) !important;
        box-shadow:           none !important;
        background:           none !important;
        border:               none !important;
        position:             relative !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, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
    }

    .back-link1 img, .back-link2 img{
        height:               80px !important;
        width:                80px !important;
    }

    .back-link2{
        margin-left:          10% !important;
        margin-top:           0% !important;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          7% !important;
        width:                80% !important;
        margin-top:           15% !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          7% !important;
        width:                80% !important;
    }

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

    /* Footer */
    footer {
        width:                100%!important;
        margin-left:          0% !important;
        text-align:           center !important;
        margin-top:           0 !important;
    }

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

}

/* Pantallas grandes (1028px-1440px) */
@media (min-width: 1028px) and (max-width: 1442px) {

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

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

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

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

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

    .links-grid_slidebar{
        gap:                  20% !important;
        margin-top:           40% !important;
    }

    .certificate-card img{
        height:               100px !important;
        width:                100px !important;
    }

    /* Contenido principal */
    .main-content {
        margin-left:          var(--sidebar-width) !important;
        margin-right:         0% !important;
    }

    body, html {
        height:               100% !important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    .back-link1, .back-link2{
        z-index:              none !important;
        position:             absolute !important;
        display:              flex !important;
    }

    .back-link1 img, .back-link2 img{
        height:               80px !important;
        width:                80px !important;
    }

    .back-link1{
        margin-left:          3% !important;
    }

    .back-link2{
        margin-left:          15% !important;
        margin-top:           0% !important;
    }

    /* Elementos específicos de proyectos */
    .instrucciones_de_interacción {
        margin-left:          10% !important;
        width:                80% !important;
        margin-top:           10% !important;
    }

    .container_ProyectosAndServicios {
        margin-left:          10% !important;
        width:                80% !important;
    }

    /* Footer */
    footer {
        margin-left:          var(--sidebar-width) !important;
        width:                calc(100% - var(--sidebar-width)) !important;
    }

    footer p {
        font-size:            small !important;
        text-align:           center !important;
    }

}

/* Pantallas muy grandes (2000px-2560px) */
@media (min-width: 2000px) and (max-width: 2566px) {

    /* Aumentamos el ancho del sidebar */
    :root {
        --sidebar-width1:     450px !important; /* Aumentamos de 320px a 450px */
    }
  
    body, html {
        height:               100%!important;
        width:                100% !important;
        overflow-x:           hidden !important;
    }

    /* Sidebar */
    .sidebar {
        width:                var(--sidebar-width1) !important;
        min-width:            var(--sidebar-width1) !important;
        max-width:            var(--sidebar-width1) !important;
        padding:              var(--spacing-lg) !important;
        max-height:           96vh !important;
        overflow-y:           hidden !important;
    }

    /* Tipografía aumentada */
    .sidebar h1 {
        font-size:            3.75em !important; /* Aumentado de 2.5em */
        margin-top:           5% !important;
        padding-bottom:       var(--spacing-md) !important;
    }

    .sidebar p {
        font-size:            1.9em !important; /* Aumentado de 1.2em */
        margin-bottom:        15% !important;
        line-height:          1.6 !important;
    }

    /* Links del sidebar más grandes */
    .links-grid_slidebar {
        font-size:            1.7em !important;
        gap:                  25px !important;
        margin-left:          0% !important;
        left:                 0% !important;
        margin-bottom:        10% !important;
    }

    .links-grid_slidebar img{
        height:               150px!important;
        width:                150px !important;
    }

    .certificate-card:hover {
        text-align:           center;
        transform:            translateY(-5px);
        cursor:               pointer;
    }

    .certificate-card::before {
        content:              attr(data-categoria); /* Usa el valor del atributo data-categoria */
        position:             fixed;
        top:                  50%;
        left:                 50%;
        transform:            translate(-50%, -50%);
        transition:           var(--transition-slow);
        color:                var(--color-primary-gold);
        font-family:          var(--font-title);
        font-size:            var(--font-size-md);
        opacity:              0;
        transition:           opacity var(--transition-fast);
        pointer-events:       none;
        text-align:           left;
        margin-left:          25%;
    }


    /* Mostrar el texto al pasar el cursor */
    .certificate-card:hover::before {
        opacity:              1;
    }


    /* Ajustamos el contenido principal para el nuevo ancho */
    .main-content {
        margin-left:          var(--sidebar-width1) !important;
        width:                calc(100% - var(--sidebar-width1)) !important;
    }

    .back-link1{ 
        left:                 22% !important;
    }

    .back-link2{
        left:                 30% !important;
    }

    .back-link1 img, .back-link2 img{
        height:               125px !important;
        width:                125px !important;
    }

    .back-link1 img:hover,
    .back-link2 img:hover {
        transform:            scale(1.1);
        transition:           transform var(--transition-medium);
    }

    /* Ajustes específicos para la sección de instrucciones */
    .instrucciones_de_interacción {
        width:                80% !important;
        max-width:            1200px !important;
        margin-left:          22% !important;
        margin-top:           4% !important;
        padding:              var(--spacing-lg) !important;
        border-radius:        var(--radius-lg) !important;
    }

    .instrucciones_de_interacción h2 {
        font-size:            3.5em !important;
        margin-bottom:        var(--spacing-lg) !important;
        padding-bottom:       var(--spacing-md) !important;
    }

    .instrucciones_de_interacción p {
        font-size:            1.8em !important;
        line-height:          1.7 !important;
        margin-bottom:        var(--spacing-md) !important;
    }

    /* Ajustar botones toggle dentro de instrucciones */
    .instrucciones_de_interacción .toggle-button {
        font-size:            1.6em !important;
        padding:              var(--spacing-md) var(--spacing-lg) !important;
    }

    /* Ajustar contenido toggle */
    .instrucciones_de_interacción .toggle-content {
        font-size:            1.5em !important;
    }

    /* Ajuste completo para el contenedor de proyectos */
    .container_ProyectosAndServicios{
        margin-top:           5%;
        margin-bottom:        auto;
        margin-left:          22%;
    }

    .project-card {
        background-color:     var(--color-project-bg);
        border-radius:        var(--radius-md);
        box-shadow:           var(--shadow-soft);
        padding:              var(--spacing-md);
        margin-bottom:        var(--spacing-md);
        margin-top:           0% !important;
        margin-left:          0% !important;
        left:                 0% !important;
        width:                100%;
        max-width:            1200px;
        transition:           opacity var(--transition-medium);
        display:              none;
        opacity:              0;
        transform:            translateY(20px);
        transition:           opacity 0.5s ease, transform 0.5s ease;
        pointer-events:       auto;
        flex-direction:       column;
        align-items:          flex-start;
        justify-content:      flex-start;
    }

    .project-card h3 {
        font-size:            3.5em;
        color:                var(--color-primary-gold);
        margin-bottom:        var(--spacing-sm);
    }

    .project-card ul {
        list-style:           disc inside;
        padding-left:         var(--spacing-sm);
        margin-bottom:        var(--spacing-md);
        color:                var(--color-text-light);
    }

    .project-card li {
        margin-bottom:        var(--spacing-xs);
        color:                var(--color-text-light);
        list-style:           disc inside;
        padding-left:         var(--spacing-lg);
        font-size:            1.5em;
        line-height:          1.5;
        height:               fit-content;
        font-family:          var(--font-body);
    }

    .project-card a {
        color:                var(--color-primary-gold);
        text-decoration:      none;
        transition:           color var(--transition-fast);
        font-size:            1em;
    }

    .project-card a:hover {
        color:                var(--color-text-light);
        text-decoration:      underline;
    }

    .project-card p {
        font-size:            1.75em;
        color:                var(--color-text-light);
        line-height:          1.5;
        margin-bottom:        var(--spacing-md);
        margin-top:           5px;
        font-family:          var(--font-body);
        font-style:           italic;
    }


    /* Mostrar las tarjetas con transición */
    .project-card.visible {
        transform:            translateY(0);
        opacity:              1;
        pointer-events:       auto;
        display:              flex;
        animation:            fadeIn 0.75s ease-in-out;
    }

    /* Ajustar botones toggle en proyectos */
    .toggle-button{
        font-size:            1.95em !important;
        text-align:           left;
    }

    /* Footer ajustado */
    footer {
        margin-left:          var(--sidebar-width1) !important;
        width:                calc(100% - var(--sidebar-width1)) !important;
        padding:              var(--spacing-md) !important;
    }

    footer p {
        font-size:            1.7em !important;
      }

}



/* Estilo para pantallas con mouse (escritorio) */
@media (hover: hover) and (pointer: fine) {
    .back-link1, .back-link2 {
        text-align:             center;
    }

    .back-link1::after, 
    .back-link2::after {
        content:                attr(alt);
        position:               absolute;
        bottom:                 -2.5em; /* Distancia bajo la imagen */
        left:                   0;
        right:                  0;
        margin:                 0% 0% -2% 2.2525252525252525252%;
        width:                  max-content;
        max-width:              150px;
        color:                  var(--color-text-light);
        padding:                var(--spacing-xs) var(--spacing-sm);
        border-radius:          var(--radius-sm);
        font-size:              var(--font-size-sm);
        opacity:                0;
        transition:             opacity var(--transition-fast);
        text-align:             center;
        pointer-events:         none;
        z-index:                101;
        box-shadow:             var(--shadow-soft);
    }

    .back-link1:hover::after,
    .back-link2:hover::after {
        opacity:                1;
    }
    
}



/* Asegura que el botón toggle esté siempre visible y con estilos consistentes */
.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 */
    width:                      48px !important;
    height:                     48px !important;
    background:                 var(--color-sidebar-bg) !important;
    border:                     2px solid var(--color-primary-gold) !important;
    color:                      var(--color-primary-gold) !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;
    }


}