/* === Variables y ajustes globales (NUEVO) === */
:root {
    --color-bg-main:#1c1c3c;
    --color-panel:#6E6C79;
    --color-accent:#0094FF;
    --color-accent-alt:#F62F57;
    --color-accent-3d:#57C83B;
    --color-dark:#000;
    --color-light:#FCF5EF;
    --color-screen-green:#7BA877;
    --color-gray-100:#E2E2E2;
    --color-gray-200:#343434;
    --color-gray-300:#3a3a3a;
    --color-gray-400:#45444B;
    --color-gray-500:#2b2b2b;
    --color-border:#0C0C0C;
    --radius-lg:30px;
    --shadow-drop:0 10px 20px #00000080;
    --transition-fast:.25s ease;
    --project-card-height: 260px; /* antes 300px */
}

/* Reemplaza transition global costosa; eliminala de * */
* {
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

/* Transiciones solo donde importa interacción */
a, button, .project-card, .menu-button, .tech-link-button, .navbar a, .social-link, .icon-grid img {
    transition:all var(--transition-fast);
}

/* Estilos para el símbolo de carga (eliminado)
.loader {
    border: 8px solid #f3f3f3; 
    border-top: 8px solid #0094FF; 
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 1000;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
*/

.screen-center h5{
        margin:3px;
        padding:3px;

}


html {
    scroll-behavior: smooth;
}

/* Font faces */
@font-face {
    font-family: 'Monofonto';
    src: url(https://fonts.cdnfonts.com/s/8998/monofonto.woff) format("woff");
    font-display: swap;
}

/* Body styles */
body {
    font-family: "Pixelify Sans", serif;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color:var(--color-bg-main);
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Animations */
@keyframes retro-transition {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes blink {0%,100%{opacity:1}50%{opacity:.5}}
@keyframes smooth-jump {0%{transform:translateY(0)}50%{transform:translateY(-5px)}100%{transform:translateY(0)}}
@keyframes touch-jump {0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@keyframes marquee {0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
@keyframes crt-flicker {0%,100%{opacity:.95}50%{opacity:1}}
@keyframes crt-lines {0%,100%{transform:translateY(0)}}
@keyframes blink-cursor {0%,100%{opacity:1}50%{opacity:0}}

/* Frame styles */
.gameboy-frame {
    border-left: 10px solid #FCF5EF;
    border-right: 10px solid #FCF5EF;
    background: transparent;
    position: fixed;
    inset: 0;
    border-radius: 0 0 10px 10px;
    z-index: 1006;
    pointer-events: none;
}

.gameboy-frame.no-right-border {
    border-right: none;
}

.frame-group {
    filter: drop-shadow(1rem 1rem 1rem #00000080);
    position: fixed;
    inset: 0;
    z-index: 1004;
    display: flex;
    pointer-events: none;
}

.inner-frame {
    flex: 1;
    border-left: 30px solid #6E6C79;
    border-right: 30px solid #6E6C79;
    pointer-events: none;
    z-index: 1004;
}

/* Content styles */
.content-container {
    background-size: cover;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    z-index: 1000;
    position: relative;
}

.scrollable-content {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    background: linear-gradient(0deg, #0e0e1d, #1c1c3c);
    z-index: 1;
    box-shadow: 
        inset -80px 0 80px -80px #00000080,
        inset 80px 0 80px -80px #00000080,
        inset 0 -80px 80px -80px #00000080;
}

/* Screen effects */
.scrollable-content::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        #ffffff1a 0px,
        #ffffff1a 4px,
        transparent 4px,
        transparent 8px
    );
    pointer-events: none;
    z-index: 2;
}

.scrollable-content::after {
    content: "";
    position: fixed;
    inset: 0;
    background: #0003;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 3;
}

/* Header and Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #6E6C79;
    height: 60px;
    text-align: center;
    z-index: 1008;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    margin: 0;
    pointer-events: visible;
}

nav {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 40px;
}

.navbar {
    list-style: none;
    display: flex;
    margin: 0;
    justify-content: center;
    padding: 0;
}

.navbar-icon {
    width: 40px;
    height: 40px;
    margin-right: auto;
    margin-bottom: 20px;
}

.navbar a {
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    margin: 0 20px;
    font-size: 1.2em;
    transition: color .3s ease, transform .3s ease, filter .3s ease;
}

.navbar a:hover {
    color: #FCF5EF;
    transform: scale(1.1);
}

.navbar a:active {
    transform: translateY(1px);
    filter: drop-shadow(1px 1px 0px black);
}

.navbar a i,
.vertical-menu-bar ul li a i {
    margin-right:6px;
}

/* Decorative elements */
.barritas-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin-top: 20px;
    z-index: 1005;
    width: 35%;
}

.barritas-container.left { left: 0; }
.barritas-container.right { right: 0; }

.barrita1 {
    background-color: #892960;
    height: 3px;
    margin-bottom: 4px;
}

.barrita2 {
    background-color: #1D1D45;
    height: 4px;
}
    
    .decorative-bars {
    position:fixed;
    top:60px;
    z-index:1007;
    display:flex;
    flex-direction:column;
    align-items:flex-start
    }
    
    .bar {
    background-color:#6E6C79;
    height:15px;
    margin-bottom:0
    }
    
    .pixelbutton1 {
    width:70px
    }
    
    .pixelbutton2 {
    width:56px
    }
    
    .pixelbutton3 {
    width:42px
    }
    
    .section {
    border-radius:8px
    }
    
    .projects-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        align-items: center; 
        gap: 20px; 
        padding-bottom: 40px;
    }
    
    .project-card {
        background-color:var(--color-accent);
        border-radius: 12px;
        width: 350px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        filter: drop-shadow(10px 10px 0 #000);
        height: var(--project-card-height); /* sigue usando la variable reducida */
        
    }

    .separator-card {
        position: relative;
        width: 10px;
        top:-2px;
        height: 110%;
      }
      
          
    
    .project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    
    .project-image {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 12px 12px 0 0;
    }
    
    .card-header {
        background-color: #000;
        color: white;
        text-align: center;
        padding: 8px;
        border-radius: 8px;
        font-size: 16px;
        font-family: "Pixelify Sans", serif;
    }
    
    .card-body {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex: 1;
        margin: 5px;
        flex: 1;              /* NUEVO: ocupa espacio disponible */
        align-items:stretch; /* NUEVO */
        gap:6px;             /* opcional leve separación */
        height:150px;              /* NUEVO: altura fija evita crecimiento */
    }
    
    .image-placeholder {
        /* Ajuste 9:16 vertical y misma altura que text-area */
        height:100%;              /* igual a la altura del .card-body */
        aspect-ratio:9 / 16;      /* proporción 9:16 */
        width:auto;               /* calculado desde la altura */
        flex:0 0 auto;            /* no crecer/encoger */
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:#d1d1d1;
        border:2px solid #000;
        border-radius:8px;
        overflow:hidden;
        /* Eliminado: width:100px; height:150px; flex:0 0 150px; */
      }
      
      .image-placeholder img {
        width:100%;
        height:100%;
        object-fit:cover;         /* sin deformar */
        border-radius:8px;
      }
    
    .text-area {
        background-color: #d1d1d1;
        border-radius: 8px;
        font-family: monospace;
        font-size: 11px;
        color: #000;
        flex: 1;
        /*margin-left: 10px;*/
        overflow: hidden;
        border: 2px solid black;
        overflow-y: auto;
        height:100%;               /* llena la altura fija del body */
        scrollbar-width:thin;      /* Firefox */
        scrollbar-color:#9e9e9e transparent;
    }

    /* Scrollbar WebKit para text-area */
.text-area::-webkit-scrollbar {
  width:6px;
}
.text-area::-webkit-scrollbar-track {
  background:transparent;
}
.text-area::-webkit-scrollbar-thumb {
  background:#9e9e9e;
  border-radius:10px;
}

    .section h2 {
        margin: 0px;
      }
    
    .card-buttons {
        display: flex;
        justify-content: space-between;
        background-color: #000;
        border-radius: 8px;
        margin-top:auto; /* empuja al fondo si sobra espacio */
      }
      
      .left-buttons,
      .right-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .left-buttons {
        width: 100px; 
      }
      
      .right-buttons {
        flex: 1; 
        margin-left: 10px;
      }
    
    .card-buttons button {
        width: 30px;
        height: 30px;
        background-color: white;
        border: none;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }
    
    .card-content {
        margin: 10px 0;
        padding: 10px;
        background-color: #d1ecf1;
        border-radius: 8px;
        font-family: monospace;
        
    }
    
    .link-button-container {
        margin-top: 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .tech-icons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        border: 2px solid black;
        border-radius: 8px;
        background-color: #1a1a1a;
        margin-top: 10px;
    }
    

    .social-links a {
    margin-right:10px;
    color:#fff;
    text-decoration:none
    }
    
    .social-links {
    position:fixed;
    top:200px;
    right:calc(15% + -50px);
    display:flex;
    flex-direction:column;
    gap:15px
    }
    
    .social-link {
    color:#fff;
    font-size:2em;
    transition:transform .3s ease
    }
    
    .social-link:hover {
    transform:scale(1.1);
    filter:drop-shadow(0 0 5px white)
    }
    
    .social-link:hover .fa-facebook {
    color:#0b7de6
    }
    
    .social-link:hover .fa-instagram {
    background:linear-gradient(180deg,#ff0890,#fec609);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none
    }
    
    .social-link:hover .fa-github {
    color:#0b0f10
    }
    
    .social-link:hover .fa-linkedin {
    color:#0882bd
    }
    
    .social-link:hover .fa-artstation { color:#13aff0 }
    
    .sobre-mi-container {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    width:100%;
    }
    
    .left-column {
    display:flex;
    flex-direction:column;
    flex:1;
    gap:20px
    }
    
    
        
        .profile-pic {
        width:100px;
        height:auto;
        margin-bottom:10px
        }
        
        .text-container {
        max-width:100%;
        overflow-y:auto;
        padding:10px;
        box-sizing:border-box;
        margin-top:10px;
        max-height:200px;
        overflow-x:hidden
        }
        
        .text-container::-webkit-scrollbar {
        width:8px
        }
        
        .text-container::-webkit-scrollbar-track {
        background:transparent
        }
        
        .text-container::-webkit-scrollbar-thumb {
        background-color:#43703F;
        border-radius:10px
        }

        .square-box {
            flex: 1 1 0%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 30px; /* Reducir la altura mínima */
            background: repeating-linear-gradient(
                45deg,
                #ffcc00 0%,
                #ffcc00 5%,
                #000 5%,
                #000 10%
            );
            border: 10px solid #000; /* Aumentar el grosor del borde */
            box-sizing: border-box; /* Incluir el borde en el tamaño total */
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
            color: #EAEAEA;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reducir la sombra */
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .square-box-2 {
            display: none;
        }
        
        
        .square-box span {
            position: relative;
            z-index: 1;
            
        }
        
        .square-box-2 span {
            display: none
            
        }
        
       
        .square-box-2 span {
            display: none
        }
        
        @keyframes move-stripes {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }
    
    /* Animación de parpadeo */
    .blinking-title {
        animation: blink 1.5s infinite;
        margin: 10px;
    }
    
    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }
    
    
    .computer-screen {
        background-color: #E2E2E2;
        color: #e5ffde;
        font-family: "Pixelify Sans", monospace;
        padding: 10px;
        border: 10px solid #45444B;
        border-radius: 30px;
        box-shadow: 
            inset -4px -4px 8px #00000080,
            inset 4px 4px 8px #fff3;
        margin-top: 25px;
        flex: 3;
    }
    
    .screen-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 5px;
        min-height: 300px;
        background-color: #7BA877;
        border-radius: 8px;
        box-shadow: inset 0 0 10px #0009;
        transform: scale(0.95);
        animation: crt-flicker 1s infinite;
        position: relative;
        z-index: 1;
    }
    
    .screen-content::before,
.screen-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.screen-content::before {
    background: repeating-linear-gradient(
        0deg,
        #ffffff1a 0px,
        #ffffff1a 4px,
        transparent 4px,
        transparent 8px
    );
    z-index: 2;
}

.screen-content::after {
    background: #0003;
    mix-blend-mode: multiply;
    z-index: 3;
}
    
    @keyframes crt-lines {
    0% {
    transform:translateY(0)
    }
    
    100% {
    transform:translateY(0)
    }
    }
    
    @keyframes crt-flicker {
    0%,100% {
    opacity:.95
    }
    
    50% {
    opacity:1
    }
    }
    
    .profile-pic {
    flex-shrink:0;
    width:100px;
    height:auto
    }
    
    .text-container {
    max-width:100%;
    overflow-y:auto;
    padding:10px;
    box-sizing:border-box;
    margin-top:10px;
    max-height:200px;
    overflow-x:hidden
    }
    
    .text-container::-webkit-scrollbar {
    width:8px
    }
    
    .text-container::-webkit-scrollbar-track {
    background:transparent
    }
    
    .text-container::-webkit-scrollbar-thumb {
    background-color:#43703F;
    border-radius:10px
    }
    
    .screen-content h2,.screen-content p {
    font-family:'Monofonto',sans-serif;
    position:relative;
    z-index:1
    }
    
    .screen-content h2 {
        font-size: 1.8em;
        text-align: center;
        width: 100%;
        margin-top: 5px;
        color: #e5ffde;
        text-shadow: 0 0 5px #2b4730;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .screen-content strong {
    color:#7f7
    }
    
    .screen-content p {
        margin: 0;
        text-align: justify;
        display: inline-block;
        font-size: 1em;
        padding: 10px;
        line-height: 0.9em;
    }
    
    .screen-content p::after {
    content:''; 
    position:absolute;
    width:5px;
    height:1em;
    background-color:#fff;
    animation:blink-cursor 1s steps(2,start) infinite
    }
    
    .screen-content ul {
    list-style-type:square;
    padding-left:20px;
    margin:0
    }
    
    .screen-content ul li {
    margin-bottom:5px;
    font-size:.9em;
    line-height:1.2em;
    font-family:'Monofonto',sans-serif
    }
    
    .screen-content a {
    color:#0F0;
    text-decoration:none;
    transition:color .3s ease,text-shadow .3s ease
    }
    
    .screen-content a:hover {
    color:#0F0;
    text-shadow:0 0 5px #00FF00,0 0 10px #00FF00,0 0 15px #0F0
    }
    
    .small-text {
    font-size:.8em;
    line-height:1em
    }
    
    @keyframes blink-cursor {
    0%,100% {
    opacity:1
    }
    
    50% {
    opacity:0
    }
    }
    
    .arrow-button {
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:30px solid #43703F;
    border-right:0;
    border-style:solid;
    background:transparent;
    position:absolute;
    bottom:10px;
    right:10px;
    cursor:pointer;
    animation:blink 1s infinite
    }
    
    .arrow-button.flipped {
    transform:rotate(180deg)
    }
    
    @keyframes blink {
    0%,50% {
    opacity:1;
    opacity:1;
    opacity:1;
    opacity:1
    }
    
    51%,100% {
    opacity:.5;
    opacity:.5;
    opacity:.5;
    opacity:.5
    }
    }
    
    .tech-container-wrapper {
        background-color: #2b2b2b;
        border-radius: 15px;
        padding: 20px;
        width: 280px;
        height: 100%;
        border-right: 8px solid #0C0C0C;
        box-shadow: 0 0 10px #00000080;
        z-index: 2;
        overflow: visible;
        display: flex;
        flex-direction: column;
        margin: 20px;
    }
    
    .tech-container {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    flex:1;
    justify-content:center;
    align-items:center;
    height:100%;
    background-color:#1c1c1c;
    border-radius:10px;
    padding:10px;
    box-shadow:inset 0 0 10px #00000080;
    z-index:0;
    overflow:visible
    }
    
    .tech-screen {
        background-color: #3a3a3a;
        border-radius: 10px;
        padding: 10px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: flex-start;
        align-items: center;
        box-shadow: inset 0 0 10px #00000080;
        font-family: 'Pixelify Sans', monospace;
        color: #e5ffde;
        text-shadow: 0 0 5px #2b4730;
        position: relative;
        overflow: hidden;
    }
    
    .tech-screen::before,
.tech-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tech-screen::before {
    width: 100%;
    height: 200%;
    background: repeating-linear-gradient(
        0deg,
        #ffffff1a 0px,
        #ffffff1a 4px,
        transparent 4px,
        transparent 8px
    );
    animation: crt-lines-tech 30s infinite linear;
    z-index: 0;
}

.tech-screen::after {
    background: #0003;
    mix-blend-mode: multiply;
    z-index: 0;
}
    
    @keyframes crt-lines-tech {
    0% {
    transform:translateY(0);
    transform:translateY(0)
    }
    
    100% {
    transform:translateY(-50%);
    transform:translateY(-50%)
    }
    }
    
    .category {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:105%;
    background-color:#1c1c1c;
    border-radius:5px;
    overflow:hidden;
    position:relative
    }
    
    .category h3 {
    margin:5px 0;
    font-size:1em;
    color:#e5ffde;
    text-shadow:0 0 5px #2b4730;
    white-space:nowrap;
    display:inline-block;
    position:relative;
    animation:marquee 10s linear infinite
    }
    
    @keyframes marquee {
    0% {
    transform:translateX(100%)
    }
    
    100% {
    transform:translateX(-100%)
    }
    }
    
    .icon-grid {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:5px;
    cursor:pointer;
    position:relative;
    z-index:1
    }
    
    .icon-grid img {
    border-radius:5px;
    width:16px;
    height:18px;
    margin:2px;
    position:relative;
    filter:drop-shadow(1px 1px white);
    z-index:1
    }
    
    /* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block; 
    z-index: 2;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 200px; 
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 0 15px; 
    border-radius: 6px;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%); 
    opacity: 0;
    transition: opacity .3s;
    z-index: 3;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); 
    border: 5px solid transparent;
    border-top-color: #000;
}

/* GitHub calendars:
   .github-content  (dark) visible por defecto (desktop)
   .github-content-2 (light) oculto; se muestra SOLO en móviles (<768px) */
.github-content-2 { display:none; }

    @keyframes smooth-jump {
    0% {
    transform:translateY(0)
    }
    
    50% {
    transform:translateY(-5px)
    }
    
    100% {
    transform:translateY(0)
    }
    }
    
    .icon-grid img:hover {
    animation:smooth-jump .5s ease
    }
    
    
    .gif1 {
    object-fit:cover;
    border-radius:15px;
    filter:drop-shadow(0 0 10px black)
    }
    
    @keyframes touch-jump {
    0% {
    transform:translateY(0)
    }
    
    50% {
    transform:translateY(-3px)
    }
    
    100% {
    transform:translateY(0)
    }
    }
    
    .proyect-monitor {
        background-color: #45444B;
        padding: 10px;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 10px 20px #00000080;
    }
    
    .monitor-frame {
        background-color: #E2E2E2;
        border-radius: 30px;
        padding: 20px;
        width: 100%;
        max-width: 1200px;
        display: flex;
        align-items: center;
        box-shadow: inset 0 0 10px #00000080;
    }
    
    .monitor-screen {
        background-color: #5F9DC9;
        border-radius: 30px;
        padding: 10px 2px 10px 10px;
        display: flex;
        width: 80%;
        height: 400px;
        position: relative;
        margin-right: 10px;
        box-shadow: inset 0 0 20px #00000080;
    }
    
    .screen-left {
    flex:2;
    background-color:#000;
    border-radius:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:inset 0 0 10px #00000080;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    }

    .screen-left img {
        width: 100%;
        height: auto;
        object-fit: contain; 
        border-radius: 30px;
    }
    
    .proyect-img {
    object-fit:cover;
    width:100%;
    height:100%;
    border-radius:30px
    }
    
    .screen-center {
    flex:2;
    padding:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    }
    
    .project-title {
    background-color:var(--color-accent);
    color:#fff;
    border-radius:10px;
    text-align:center;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
    top:0;
    max-height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 10px #0000004d
    }
    
    /* NUEVO: Insignia "NUEVO" */
.badge-new{
  position:absolute;
  top:1px;
  left:1px;
  background:
    repeating-linear-gradient(45deg,#ffef00 0 6px,#ffb300 6px 12px);
  color:#111;
  font-family:'Pixelify Sans','Monosonto',monospace;
  font-size:.60rem;
  letter-spacing:1px;
  padding:6px 10px 7px;
  border:2px solid #000;
  border-radius:10px 10px 10px 0;
  box-shadow:
    0 0 0 2px #000,
    0 4px 8px #000a,
    inset 0 0 6px #ffffff60;
  text-shadow:0 1px 0 #ffe066;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateZ(0);
  animation:badgePulse 1.6s ease-in-out infinite, badgeScan 5s linear infinite;
  z-index:5;
}
@keyframes badgePulse{
  0%,100%{ filter:brightness(1) drop-shadow(0 0 4px #ffd83b88); transform:translateY(0); }
  50%{ filter:brightness(1.25) drop-shadow(0 0 6px #ffea7faa); transform:translateY(-2px); }
}
@keyframes badgeScan{
  0%{ background-position:0 0; }
  100%{ background-position:120px 0; }
}
/* Variante accesible: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .badge-new{
    animation:none;
  }
}
    
    .project-description {
    background-color:#343434;
    color:#fff;
    padding:10px;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
    text-align:justify;
    width:100%;
    margin-top:15px;
    flex:1;
    overflow-y:auto;
    align-self:flex-end;
    box-shadow:inset 0 0 10px #00000080;
    font-size:1em; /* UNIFICADO */
    }

    .project-description::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .project-description::-webkit-scrollbar-track {
        background: transparent; 
    }
    
    .project-description::-webkit-scrollbar-thumb {
        background-color: #1e1e1e; 
        border-radius: 10px;
    }
    
    .proyect-separator {
    border:none;
    border-top:2px dashed #fff;
    margin:10px 0;
    width:100%
    }
    
    .proyect-separator-2 {
    border:none;
    border-top:2px dashed #fff;
    margin-bottom:0;
    width:100%
    }
    
    .tech-link-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    margin:5px;
    border:2px solid #000;
    border-radius:15px;
    color:#fff;
    font-size:12px;
    cursor:pointer;
    text-decoration:none;
    transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;
    position:relative;
    background:linear-gradient(145deg,#6e6e6e,#333)
    }
    
    .tech-link-button i {
    font-size:16px;
    filter:drop-shadow(2px 2px 2px #00000080)
    }
    
    .tech-link-button:hover {
    transform:translateY(-3px);
    box-shadow:0 4px 8px #0003
    }
    
    .github {
    background:linear-gradient(145deg,#444,#333);
    border-color:#fff
    }
    
    .github:hover {
    background:linear-gradient(145deg,#555,#444);
    border-color:#fff
    }
    
    .web {
    background:linear-gradient(145deg,#08c,#007acc);
    border-color:#000
    }
    
    .web:hover {
    background:linear-gradient(145deg,#09d,#08c);
    border-color:#000
    }
    
    .itchio {
    background:linear-gradient(145deg,#f66,#fa5c5c);
    border-color:#000
    }
    
    .itchio:hover {
    background:linear-gradient(145deg,#f77,#f66);
    border-color:#000
    }
    
    .playstore {
    background:linear-gradient(145deg,#4de098,#3ddc84);
    border-color:#000
    }
    
    .playstore:hover {
    background:linear-gradient(145deg,#5ee1a1,#4de098);
    border-color:#000
    }
    
    .artstation {
    background:linear-gradient(145deg,#14c0ff,#13aff0);
    border-color:#000
    }
    
    .artstation:hover {
    background:linear-gradient(145deg,#25d1ff,#14c0ff);
    border-color:#000
    }
    
    .steam {
    background:linear-gradient(145deg,#2a475e,#1b2838);
    border-color:#fff
    }
    
    .steam:hover {
    background:linear-gradient(145deg,#3b586f,#2a475e);
    border-color:#fff
    }
    
    .unity {
    background:linear-gradient(145deg,#2d3b4e,#222c37);
    border-color:#fff
    }
    
    .unity:hover {
    background:linear-gradient(145deg,#3e4c5f,#2d3b4e);
    border-color:#fff
    }
    
    .unreal {
    background:linear-gradient(145deg,#1c1f3a,#0e1128);
    border-color:#fff
    }
    
    
    .screen-right {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px
    }
    
    .menu-button {
    width:100%;
    padding:8px;
    margin:3px 0;
    border-radius:20px;
    color:#fff;
    cursor:pointer;
    text-align:center;
    filter:drop-shadow(3px 3px 0 #000);
    font-family:'Pixelify Sans',sans-serif;
    font-weight:700;
    transition:all .2s ease;
}
.menu-button:active,
.menu-button.pressed {
    filter:none;
    transform:translateY(3px);
}
    
    .software-button {
    background-color:var(--color-accent)
    }
    
    .gamedev-button {
    background-color:var(--color-accent-alt)
    }
    
    .button3d {
    background-color:var(--color-accent-3d)
    }
    
    .vertical-menu {
    background-color:#5F9DC9;
    border-radius:20px;
    padding:10px;
    width:100%;
    margin-top:10px;
    height:280px;
    box-shadow:inset 0 0 10px #00000080;
    overflow-y:auto
    }
    
    .vertical-menu ul {
    list-style:none;
    padding:0;
    margin:0
    }
    
    .vertical-menu ul li {
    margin:5px 0
    }
    
    .project-button {
    background-color:#000;
    color:#fff;
    border:none;
    border-radius:10px;
    width:100%;
    cursor:pointer;
    text-align:center;
    padding:5px;
    box-shadow:0 5px 10px #0000004d;
    transition:all .2s ease
    }
    
    .project-button:active {
    background-color:#333;
    box-shadow:none;
    transform:translateY(0.1px)
    }
    
    .vertical-menu-bar {
    position:fixed;
    right:-150px;
    width:150px;
    height:100%;
    background-color:#6E6C79;
    box-shadow:-2px 0 5px #00000080;
    transition:right .3s ease;
    z-index:1008;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    padding:20px;
    border-radius:10px 0 0 10px;
    font-family:'Pixelify Sans',sans-serif
    }
    
    .vertical-menu-bar.open {
    right:0
    }
    
    .vertical-menu-bar ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:center
    }
    
    .vertical-menu-bar ul li {
    margin:10px 0;
    padding-top:40px
    }
    
    .vertical-menu-bar ul li a {
    color:#fff;
    text-decoration:none;
    font-size:1.2em;
    font-family:'Pixelify Sans',sans-serif;
    transition:color .3s ease,transform .3s ease,filter .3s ease
    }
    
    .vertical-menu-bar ul li a:hover {
    color:#FCF5EF;
    transform:scale(1.1)
    }
    
    .vertical-menu-bar ul li a:active {
    transform:translateY(1px);
    filter:drop-shadow(1px 1px 0px black)
    }
    
    .vertical-menu-bar hr {
    width:100%;
    border:none;
    border-top:2px solid #FCF5EF;
    margin:10px 0;
    box-shadow:0 2px 5px #00000080
    }
    
    .nav-button {
    position:absolute;
    background-color:#00000080;
    color:#fff;
    border:none;
    border-radius:50%;
    padding:10px;
    cursor:pointer;
    z-index:10;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center
    }
    
    .prev-button {
    left:10px
    }
    
    .next-button {
    right:10px
    }
    
    .nav-button:hover {
    background-color:#000c
    }
    
    .media-element {
    width:100%;
    height:100%;
    border-radius:30px;
    overflow:hidden
    }
    
    .sketchfab-embed-wrapper {
    width:100%;
    height:100%;
    
    }
    
    .sketchfab-embed-wrapper.element-style {
    margin-top:50%;
    
    }

    .tech-proyect-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        padding-left:20px;
        
    }

    @media (max-width: 1126px) and (min-width: 767px) {
        .contacto-content {
            flex-direction: column; /* Disponer los elementos en una columna */
            align-items: center;
            gap: 20px; /* Añadir espacio entre los elementos */
        }
    
        .contacto-links, .redes-sociales {
            flex-direction: row; /* Asegurar que los iconos estén en fila */
            justify-content: center;
            align-items: center;
            gap: 10px; /* Añadir espacio entre los iconos */
        }
    
        .contacto-links h3, .redes-sociales h3 {
            margin-bottom: 5px; /* Reducir el margen inferior */
        }

        .github-content-2{
            display:none;
        }
    }
      
    @media (min-width: 768px) {
        .sketchfab-embed-wrapper.large-screen {
            height: 80%;
            
        }
    
        .sketchfab-embed-wrapper p {
            margin: 14px;
            text-align: center;
        }
    
        .sketchfab-embed-wrapper iframe {
            width: 100%;
            height: 100%;
            border: none;
            
        }
    
        .nav-button {
            bottom: 30px;
            top: auto;
            transform: translateY(0);
        }

        .github-content-2{
            display:none;
        }
    }

    /*Github*/
    .github-content-2 {
        display: none;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px; 
        cursor: pointer
    }
    
    .github-calendar {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        max-width: 100%;
        margin: 0 auto;
        padding-bottom: 15px;
        box-sizing: border-box;
    }
    
    .github-calendar img {
        max-width: 100%;
        height: auto;
        filter: drop-shadow(1px 1px 0px rgb(143, 143, 143));
    }
    
    .github-stats {
        flex: 0 1 250px; /* Ajustar el tamaño del contenedor */
        max-width: 250px; /* Limitar el ancho máximo */
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        color: #e5ffde;
        font-family: 'Pixelify Sans', sans-serif;
        text-align: center;
    }
    
    .github-stats img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

 
    /*Contacto*/

.contacto-section {
    text-align: center;
    border-radius: 15px;

}

.contacto-section h2 {
    font-size: 30px;
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    padding: 0px 20px;
    border-radius: 8px;
}

.contacto-content {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    flex-wrap: nowrap; 
    width: 100%
}

.buzon-container {
    margin-left: 20px;
    order:1;
}

.buzon-gif {
    width: 120px;
    height: auto;
    padding-left: 30px;
}

.contacto-info {
    display: flex;
    flex-direction: row; 
    align-items: center; 
    width: 100%;
    gap: 30px;
    order: 2;
    margin-left: 200px;
}

.contacto-info a{
text-decoration: none;
}

.contacto-links, .redes-sociales {
    margin-bottom: 0;
}

.contacto-links h3, .redes-sociales h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.contacto-links a img, .redes-sociales a img {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    transition: transform 0.3s ease;
}

.contacto-links a img:hover, .redes-sociales a img:hover {
    transform: scale(1.2);
}

.footer-links {
    margin-top: 20px;
}

.footer-links a {
    color: #80b3ff;
    text-decoration: none;
    margin: 0 10px;
    font-size: 14px;
}

.footer-links a:hover {
    text-decoration: underline;
}

@media (max-width: 1220px) and (min-width: 1100px) {
    .barritas-container.left,
    .barritas-container.right {
        width: 35%;
    }
    .github-content-2{
        display:none;
    }
}

@media (max-width: 1099px) and (min-width: 1000px) {
    .barritas-container.left,
    .barritas-container.right {
        width: 32%;
    }
    .github-content-2{
        display:none;
    }
}

@media (max-width: 999px) and (min-width: 900px) {
    .barritas-container.left,
    .barritas-container.right {
        width: 30%;
    }
    .github-content-2{
        display:none;
    }
}

@media (max-width: 899px) and (min-width: 800px) {
    .barritas-container.left,
    .barritas-container.right {
        width: 28%;
    }
    .github-content-2{
        display:none;
    }
}

@media (max-width: 799px) and (min-width: 767px) {
    .barritas-container.left,
    .barritas-container.right {
        width: 27%;
    }
    .github-content-2{
        display:none;
    }
}

/* Responsividad a 900px */

@media (max-width: 900px) and (min-width: 767px) {
        .sobre-mi-container {
            display: flex
        ;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
        }
        
        .screen-content {
            display: flex
        ;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 5px;
            min-height: 269px;
            background-color: #7BA877;
            border-radius: 8px;
            box-shadow: inset 0 0 10px #0009;
            transform: scale(0.95);
            animation: crt-flicker 1s infinite;
            position: relative;
            z-index: 1;
        }
        
        .tech-container-wrapper {
            background-color: #2b2b2b;
            border-radius: 15px;
            padding: 15px;
            width: 235px;
            height: 55%;
            border-right: 8px solid #0C0C0C;
            box-shadow: 0 0 10px #00000080;
            z-index: 2;
            overflow: visible;
            display: flex
        ;
            flex-direction: column;
            margin: 9px;
        }
        
        .tech-container {
            display: flex
        ;
            flex-wrap: wrap;
            gap: 5px;
            flex: 1;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #1c1c1c;
            border-radius: 10px;
            padding: 10px;
            box-shadow: inset 0 0 10px #00000080;
            z-index: 0;
            overflow: visible;
            width: 190px;
        }

        .github-content-2{
            display:none;
        }
    }

    @media (max-width: 900px) {

        .github-content-2{
            display:none;
        }
        .vertical-menu-bar {
            position: fixed;
            right: -150px;
            width: 150px;
            height: 100%;
            background-color: #6E6C79;
            box-shadow: -2px 0 5px #00000080;
            transition: right .3s ease;
            z-index: 1008;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 20px;
            border-radius: 10px 0 0 10px;
            font-family: 'Pixelify Sans', sans-serif;
        }
    
        .vertical-menu-bar.open {
            right: 0;
        }
    
        .vertical-menu-bar ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: center;
            padding-top: 25px;
        }
    
        .vertical-menu-bar ul li {
            margin: 10px 0;
            padding-top: 15px;
            display: flex;
            align-items:center;
        }

        .vertical-menu-bar ul li img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
        }
    
        .vertical-menu-bar ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 0.8em;
            font-family: 'Pixelify Sans', sans-serif;
            transition: color .3s ease, transform .3s ease;
        }
    
        .vertical-menu-bar ul li a:hover {
            color: #FCF5EF;
            transform: scale(1.1);
        }

        .vertical-menu-bar ul li a:active {
            transform: translateY(1px);
            filter: drop-shadow(1px 1px 0px black);
        }
    
        .vertical-menu-bar hr {
            width: 100%;
            border: none;
            border-top: 2px solid #FCF5EF;
            margin: 10px 0;
            box-shadow: 0 2px 5px #00000080;
        }

        
    
        .monitor-frame {
            flex-direction: column;
            align-items: stretch;
            padding: 10px;
        }
    
        .project-title {
            order: 1;
            font-size: 1em;
            margin-bottom: 5px;
            border-radius: 30px 30px 5px 5px;
        }
    
        .screen-left {
            flex: 1;
            order: 2;
            max-height: 250px;
            min-height: 250px;
        }

        .project-description {
            order: 3;
            margin-top: 5px;
            font-size: 1em; /* antes .8em */
            border-radius: 5px;
            width: 100%;
            max-height: 150px;
        }
    
        .screen-right {
            order: 4;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 10px;
        }
    
        .menu-button-container {
            margin-top: 1px;
            margin-right: 3px;
        }
    
        .menu-button {
            width: 100%;
            font-size: .8rem;
            margin: 3px 0;
        }
    
        .monitor-screen {
            flex-direction: column;
            height: auto;
            margin-right: 0;
            width: 100%;
            padding: 0;
        }
    
        .proyect-monitor {
            width: 100%;
            background: none;
            padding: 0;
            border: 5px solid #45444B;
        }
    
        .vertical-menu {
            max-height: 110px;
        }
    
        .nav-button {
            top: 50%;
            transform: translateY(-50%);
            display: flex;
        }
    
    
        .media-element {
            height: auto;
        }
    }

    /*Celulares*/

    @media (max-width: 767px) {

        .github-content-2 {
            display: flex !important;
        }

        .github-content {
            display: none !important;
        }

        .left-column {
            gap:0px;
            }
    
        .github-stats {
            max-width: 100%;
        }
    
        header {
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
    
        .screen-content {
            flex-direction: column-reverse;
            padding: 5px;
            justify-content: center;
        }
    
        .screen-content h2 {
            font-size: 1em;
            top: auto;
            margin-top: 5px;
            position: relative;
            order: 3;
        }
    
        .profile-pic {
            order: 2;
            margin: 5px auto;
        }
    
        .text-container {
            order: 1;
            width: 100%;
            overflow-x: hidden;
        }
    
        .screen-content p {
            font-size: .8em;
            padding: 5px;
        }
    
        .crt-icon {
            width: 80px;
            margin-bottom: 5px;
        }
    
        .icon-grid img:hover {
            animation: none;
        }
    
        .icon-grid img:active {
            animation: touch-jump .5s ease;
        }
    
        .sobre-mi-container {
            flex-direction: column;
            align-items: center;
        }
    
        .computer-screen {
            padding: 5px;
            border: 5px solid #45444B;
            width: 100%;
            margin: 10px 0;
            height: auto;
            max-width: 100%;
        }
    
        .tech-container-wrapper {
            width: 100%;
            margin: 10px 0;
        }

            .square-box-2 {
            flex: 1 1 0%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            background: repeating-linear-gradient(
                45deg,
                #ffcc00 0%,
                #ffcc00 5%,
                #000 5%,
                #000 10%
            );
            border: 10px solid #000;
            box-sizing: border-box;
            clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
            color: #EAEAEA;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        
        .square-box{
            display: none;
        }
        
        .square-box span,
        .square-box-2 span {
            position: relative;
            z-index: 1;
        }

        .blinking-title {
            margin:0px;
        }
    
        .navbar a {
            display: none;
        }
    
        .inner-frame {
            border-left: 5px solid #6E6C79;
            border-right: 5px solid #6E6C79;
        }
    
        .gameboy-frame {
            border-left: 2px solid #FCF5EF;
            border-right: 2px solid #FCF5EF;
        }
    
        .navbar {
            gap: 20px;
        }
    
        .navbar-icon {
            width: 40px;
            height: 40px;
            margin-right: auto;
            margin-bottom: 10px;
            cursor: pointer;
        }
    
        .content-container {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            background-image: none;
        }
    
        .no-background-image {
            background-image: none !important;
        }
    
        .decorative-bars, .barritas-container {
            display: none;
        }
    
        .arrow-button {
            bottom: 10px;
            right: 10px;
            border-left: 20px solid #43703F;
        }
    
        .social-link {
            display: none;
        }
    
        .cookie-button {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 20px;
            cursor: pointer;
            z-index: 1009;
            transition: transform .3s ease;
        }
    
        .cookie-button .bar {
            width: 100%;
            height: 4px;
            background-color: #FCF5EF;
            transition: all .3s ease;
            border-radius: 13px;
            margin: 1px 0;
        }
    
        .cookie-button .bar2 {
            background-color: #892960;
        }
    
        .cookie-button .bar3 {
            background-color: #1D1D45;
            margin-bottom: 0;
        }
    
        .cookie-button.open .bar1 {
            transform: rotate(45deg) translate(5px, 5px);
            background-color: #1D1D45;
        }
    
        .cookie-button.open {
            filter: drop-shadow(1.5px 1px 0px #FCF5EF);
        }
    
        .cookie-button.open .bar2 {
            opacity: 0;
        }
    
        .cookie-button.open .bar3 {
            transform: rotate(-45deg) translate(5px, -5px);
            background-color: #892960;
        }

        .tech-proyect-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
            padding-left:20px;
            
        }
    
        

.section {
    margin: 0 auto;
    max-width: 1200px;
  }
  
  .swiper {
    width: 100%;
    height: auto;
  }
  
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .projects-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-top: 3px;
    padding-top: 0;
    transition: all 0.3s ease;
  }
  
  .project-card {
    background-color: #0094FF;
    border-radius: 12px;
    width: 100%;
    max-width: 350px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    filter: drop-shadow(10px 10px 0 #000000);
    height: var(--project-card-height); /* sigue usando la variable reducida */
  }
  
  .project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

    .projects-grid {
      flex-direction: column;
      align-items: center;
    }
  
    .project-card {
      width: 90%;
      max-width: 100%;
    }

    .section h2 {
        padding-bottom: 5px;
      }
    

    .contacto-content {
        flex-direction: column;
        align-items: center;
    }

    .buzon-container {
        margin-left: 0;
        order: 2;
        margin-top: 20px;
    }

    .contacto-info {
        order: 1;
        margin: 0;
        padding: 0;
        justify-content: center;
    }

    .contacto-links, .redes-sociales {
        flex-direction: row;
        justify-content: center;
    }

    .contacto-links h3, .redes-sociales h3 {
        margin-bottom: 0;
        margin-right: 10px;
    }

    .contacto-links a img, .redes-sociales a img {
        width: 30px; 
        height: 30px; 
    }

    .contacto-section h2 {
        font-size: 20px;
        padding: 0 15px;
    }

    .contacto-links a img, .redes-sociales a img {
        width: 20px; 
        height: 20px; 
    }

    .contacto-links h3, .redes-sociales h3 {
        font-size: 16px; 
        margin-bottom: 5px; 
    }

}

/* --- Layout Proyectos Destacados (ajustado) --- */
#proyectos-destacados .projects-grid {
    display: grid;
    gap: 20px;
    justify-content: center;
    justify-items: center;
    align-content: start;
    margin: 0 auto;
    grid-template-columns: 1fr; /* <480: 1 tarjeta */
}

#proyectos-destacados .project-card {
    width: 100%;
    max-width: 350px;
    justify-self: center;
}

/* Si solo hay una tarjeta: que abarque todas las columnas y quede centrada */
#proyectos-destacados .projects-grid > :only-child {
    grid-column: 1 / -1;
}

/* 2 columnas desde 480px hasta 1439px */
@media (min-width:480px) and (max-width:1439px) {
    #proyectos-destacados .projects-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 3 columnas desde 1440px */
@media (min-width:1440px) {
    #proyectos-destacados .projects-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* === Lightbox / Floating image viewer (NUEVO SUAVIZADO) === */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.image-container.loaded { /* hook si quieres animar luego */ }

.floating-screen {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    backdrop-filter: blur(2px);
    transition: opacity .3s ease;
    z-index: 3000;
    padding: 20px;
}

.floating-screen.visible {
    opacity: 1;
}

.floating-screen img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 20px;
    box-shadow: 0 10px 30px #000;
    object-fit: contain;
}

.floating-screen .close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-light);
    color: var(--color-dark);
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    padding: 2px 10px 6px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Pixelify Sans', sans-serif;
    box-shadow: 0 4px 10px #00000080;
    transition: background .2s ease, transform .2s ease;
}

.floating-screen .close-button:hover {
    background: #fff;
    transform: scale(1.05);
}

.floating-screen .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:#000000aa;
    border:none;
    width:48px;
    height:48px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    backdrop-filter: blur(2px);
    transition: background .2s ease;
}

.floating-screen .nav-button:hover {
    background:#000000dd;
}

.floating-screen .prev-button { left: 20px; }
.floating-screen .next-button { right: 20px; }

/* Touch targets un poco más grandes en móviles */
@media (max-width:767px) {
    .floating-screen .nav-button {
        width:56px;
        height:56px;
        font-size:1.4rem;
    }
}

/* Utilidades adicionales */
.media-element,
.screen-left,
.tech-screen,
.project-description {
    contain: layout paint style; /* aislar para performance */
}

.screen-content,
.icon-grid img:hover {
    will-change: transform, opacity;
}

/* Lazy fade-in */
.lazy { opacity:0; transition:opacity .4s ease; }
.lazy.loaded { opacity:1; }

.media-element {
    position: relative; /* necesario para capas superpuestas */
}

.fade-layer {
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transform:scale(.985);
    transition:opacity .18s ease-out, transform .18s ease-out;
    will-change:opacity, transform;
}

.fade-layer.active-media {
    opacity:1;
    transform:scale(1);
    z-index:1;
}

.fade-layer.fade-out {
    opacity:0;
    transform:scale(1);
    z-index:0;
    pointer-events:none;
}

.image-inner-wrapper {
    position:relative;
    width:100%;
    height:100%;
}

.image-inner-wrapper img {
    border-radius:30px;
    display:block;
}

/* Asegura que loader dentro de capa se vea */
.fade-layer .loader {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media (max-width: 900px) {
    /* ...existing code... */
    /* Ajuste: antes height:auto colapsaba el contenedor (sin contenido en flujo) */
    .media-element {
        height: 250px;          /* altura visible en móviles */
        min-height: 250px;
    }
    /* ...existing code... */
}

/* Refuerzo opcional (si algún otro media lo pisa) */
@media (max-width: 767px) {
    .media-element {
        height: 250px;
        min-height: 250px;
    }
}

.progressive-img,
.fade-layer img {
    opacity:0;
    transition:opacity .4s ease;
}
.progressive-img.is-loaded,
.fade-layer img.is-loaded {
    opacity:1;
}
/* Placeholder opcional (simple fondo) */
.image-inner-wrapper {
    background:#111;
}

@media (max-width: 900px) {
    .monitor-screen {
        flex-direction: column;
    }
    /* Reordenar: título -> imágenes -> descripción */
    .screen-center {
        display: contents;
        padding: 0 !important;
    }
    .screen-center .project-title { order: 1; width:100%; }
    .screen-left { order: 2; width:100%; }
    .screen-center .project-description { order: 3; width:100%; }
}

/* === FIX CRT monitor-screen & vertical-menu === */
.crt {
    position: relative;
    isolation: isolate; /* asegura mezcla local */
    overflow: hidden;   /* respeta bordes redondeados */
}

.crt > * {
    position: relative;
    z-index: 1; /* contenido por encima de capas */
}

/* Scanlines + glow suave */
.crt::before,
.crt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: normal;
    z-index: 0;
}

/* Líneas (scanlines) ligeras */
.crt::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.06) 0px,
            rgba(255,255,255,0.06) 2px,
            transparent 2px,
            transparent 4px
        );
    opacity: .55;
}

/* Viñeta + ligero ruido */
.crt::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), rgba(0,0,0,0.55) 70%),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 0,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: overlay;
    opacity: .85;
}

/* Ajustes específicos para vertical-menu (que es scrollable) */
.vertical-menu.crt {
    overflow-y: auto;
    scrollbar-width: thin;
}
.vertical-menu.crt::after {
    /* menos viñeta para leer mejor texto */
    opacity: .5;
}

/* Asegurar accesibilidad a scroll en móviles (capa no bloquea eventos) */
.vertical-menu.crt,
.monitor-screen.crt {
    -webkit-overflow-scrolling: touch;
}

/* Botones de navegación del carrusel interno sobre las capas */
.monitor-screen .nav-button {
    z-index: 20;
}

/* Si se percibe mucho contraste, opción para atenuar (utilizar añadiendo clase 'crt-soft') */
.crt.crt-soft::before { opacity:.35; }
.crt.crt-soft::after  { opacity:.55; }

/* Animación opcional muy sutil para parpadeo (descomentar si se desea)
.crt::before {
    animation: crtScan 6s linear infinite;
}
@keyframes crtScan {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}
*/

/* === Channel Switch / Pip-Boy style transition (NUEVO SUAVIZADO) === */
.screen-content { position:relative; }
.channel-switch {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 50%, #d8ffe1 0%, #8fd394 38%, #2f5d32 72%, #0e200e 100%);
    mix-blend-mode:screen;
    overflow:hidden;
    pointer-events:none;
    animation:channel-switch 420ms cubic-bezier(.55,.1,.35,1) forwards;
    display:flex;
    align-items:center;
    justify-content:center;
    filter:saturate(1.15);
}
.channel-switch::before {
    content:"";
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(0deg,
            rgba(255,255,255,0.20) 0px,
            rgba(255,255,255,0.20) 1px,
            rgba(0,0,0,0.05) 1px,
            rgba(0,0,0,0.05) 3px);
    mix-blend-mode:overlay;
    animation:channel-lines 160ms steps(2,end) infinite;
    opacity:.75;
}

/* Animación principal más suave y un solo flash */
@keyframes channel-switch {



    0%   { opacity:0; transform:scaleY(1);    filter:brightness(1) contrast(1); }
    8%   { opacity:1; }
    30%  { transform:scaleY(.08) skewX(.5deg); filter:brightness(1.55) contrast(1.25); }
    46%  { transform:scaleY(.04); filter:brightness(1.9) contrast(1.4); }
    62%  { transform:scaleY(.11); filter:brightness(1.2) contrast(1.15); }
    80%  { transform:scaleY(.95); filter:brightness(1.02) contrast(1.02); }
    100% { opacity:0; transform:scaleY(1); filter:brightness(1) contrast(1); }
}
@keyframes channel-lines {
    0% { transform:translateY(0); }
    100% { transform:translateY(-3px); }
}
/* Desactivar animación si usuario prefiere reducir movimiento */
@media (prefers-reduced-motion:reduce) {
    .channel-switch,
    .channel-switch::before { animation:none !important; opacity:0 !important; }
}
.screen-content.channel-animating > *:not(.channel-switch) { pointer-events:none; }

/* NUEVO: estado seleccionado con borde blanco */
.project-button.selected {
    border:1px solid #fff;              /* antes 2px */
    box-shadow:0 0 0 1px #fff, 0 4px 8px #0000004d; /* ajustado acorde al nuevo grosor */
}

/* Hint visual: clickable en destacados */
#proyectos-destacados .project-card { cursor:pointer; }

/* === Contact icons (mejora estilo sobrio) === */
.contact-icon {
    display:inline-flex;
    width:48px;
    height:48px;
    align-items:center;
    justify-content:center;
    border:2px solid #1e1e1e;
    border-radius:14px;
    background:#0f0f17;
    box-shadow:0 3px 6px #0008, inset 0 0 6px #ffffff10;
    text-decoration:none;
    position:relative;
    overflow:hidden;
}
.contact-icon i {
    font-size:22px;
    color:#fff;
    opacity:.85;
    transition:opacity .25s, transform .3s;
}
.contact-icon:hover i,
.contact-icon:focus i {
    opacity:1;
    transform:translateY(-3px);
}
.contact-icon:active i {
    transform:translateY(0);
    opacity:.75;
}
.contacto-links h3,
.redes-sociales h3 {
    margin-bottom:6px;
}
.contacto-links a,
.redes-sociales a {
    margin:0 6px;
}

/* === Contact wrapper (nuevo) === */
.contact-wrapper{
    display:flex;
    gap:30px;
    background:linear-gradient(135deg,#0c2544,#0e3d6d 55%,#0c2544);
    border:2px solid #0a1626;
    box-shadow:0 0 0 0 2px #093356,inset 0 0 15px #0af2ff20,0 10px 25px -10px #000;
    border-radius:28px;
    padding:22px 28px 26px 28px;
    position:relative;
    overflow:hidden;
}
.contact-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 15% 85%,#34c6ff20,transparent 60%),
      radial-gradient(circle at 85% 20%,#34c6ff18,transparent 65%);
    pointer-events:none;
    mix-blend-mode:screen;
}
.contact-left{
    display:none;
}
.contact-main{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
    z-index:2;
}
.contact-main h2{
    background:linear-gradient(90deg,#fff,#b5e9ff);
    -webkit-background-clip:text;
    color:transparent;
    text-shadow:0 0 8px #48d5ff55,0 0 18px #48d5ff40;
    margin:0 0 4px 0;
    font-size:2rem;
    letter-spacing:1px;
}
.contact-columns{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px 26px;
}
.contact-col h3{
    margin:0 0 6px 0;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.5px;
    color:#e4f7ff;
    text-shadow:0 0 6px #3dc2ff66;
    position:relative;
}
.contact-col h3::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:42px;
    height:2px;
    background:linear-gradient(90deg,#3dc2ff,#00a6ff00);
    border-radius:2px;
}
.contact-icon-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.contact-icon{
    background:#0e1724;
    border:1px solid #114b71;
    box-shadow:0 0 0 1px #072b42,0 4px 10px -2px #000,0 0 12px -2px #1cb8ff80 inset;
    transition:transform .25s, box-shadow .35s, background .35s;
    position:relative;
}
.contact-icon::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 30% 25%,#33c9ff40,transparent 65%);
    opacity:0;
    transition:opacity .35s;
}
.contact-icon:hover,
.contact-icon:focus{
    transform:translateY(-4px);
    box-shadow:0 0 0 1px #34c6ff,0 6px 14px -4px #000,0 0 18px -2px #34c6ffb0 inset,0 0 32px -4px #34c6ffb0;
    background:#112a46;
}
.contact-icon:hover::after{ opacity:1; }
.contact-icon i{ color:#e6faff; text-shadow:0 0 6px #53d9ff; }

.footer-links-grid{
    margin:25px 0 5px;
    display:flex;
    flex-wrap:wrap;
    gap: 12px;
    list-style:none;
    padding:0;
    justify-content:center;
}
.footer-links-grid a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    font-size:.8rem;
    text-decoration:none;
    background:#0d1f37;
    border:1px solid #123551;
    border-radius:20px;
    color:#cfeeff;
    letter-spacing:.5px;
    box-shadow:0 0 0 1px #07283d,0 3px 8px -3px #000;
    transition:background .3s, box-shadow .35s, transform .25s;
}
.footer-links-grid a i{
    color:#57d3ff;
    text-shadow:0 0 8px #57d3ff88;
    font-size:.9rem;
}
.footer-links-grid a:hover{
    background:#13314f;
    box-shadow:0 0 0 1px #34c6ff,0 4px 14px -4px #000,0 0 18px -4px #34c6ffaa;
    transform:translateY(-3px);
}
.footer-meta{
    margin-top:8px;
    font-size:.75rem;
    letter-spacing:.5px;
    color:#b9ddf1;
    text-align:center;
    opacity:.85;
}

/* Responsive ajustes */
@media (max-width:900px){
  .contact-wrapper{ flex-direction:row; padding:20px 20px 24px; }
  .contact-left{ min-width:110px; }
}
@media (max-width:767px){
  .contact-wrapper{
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap:10px;
      padding:20px 18px 26px;
  }
  .contact-left{
      margin:0;
      min-width:auto;
      align-items:center;
      transform:none;
  }
  .contact-left .buzon-gif{ transform:none; }
  .contact-main h2{ font-size:1.6rem; }
  .contact-columns{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px 18px; }
}

/* === Mascota de contacto (ajustada) === */
.contact-mascot-floating{
    position:absolute;
    left:0;
    bottom:20px; /* antes 0 - subida */
    width:150px;
    height:auto;
    z-index:4000;
    pointer-events:none;
    transform:translate(-10%,0) perspective(800px) rotateX(14deg) rotateY(-10deg) rotateZ(-3deg);
    filter:drop-shadow(0 8px 12px #000a) drop-shadow(0 0 6px #39c6ff80);
    animation:mascot-bob 4.8s ease-in-out infinite;
    transition:bottom .4s ease, transform .4s ease;
}
@keyframes mascot-bob {
  0%,100% { transform:translate(-10%,0) perspective(800px) rotateX(14deg) rotateY(-10deg) rotateZ(-3deg); }
  50%     { transform:translate(-10%,6px) perspective(800px) rotateX(16deg) rotateY(-11deg) rotateZ(-2deg); }
}
/* Mobile override: mover a derecha y mitad vertical del wrapper */
@media (max-width:767px){
  .contact-mascot-floating{
     width:120px;
     left:auto;
     right: 20px;
     bottom:calc(13% - 60px); /* mitad aproximada */
     transform:none;
     animation:mascot-bob-m 2s ease-in-out infinite;
     filter:drop-shadow(0 4px 8px #000a) drop-shadow(0 0 4px #39c6ff80);
  }
  @keyframes mascot-bob-m {
    0%,100% { transform:translateY(0); }
    50%     { transform:translateY(2px); }
  }
}

/* Privacy icon (mask para aplicar color consistente) */
.privacy-icon{
    width:16px;
    height:16px;
    display:inline-block;
    -webkit-mask:url("img/privacy-dashboard.svg") center/contain no-repeat;
    mask:url("img/privacy-dashboard.svg") center/contain no-repeat;
    background:#57d3ff;
    filter:drop-shadow(0 0 8px #57d3ff88);
    margin-right:6px;
    vertical-align:middle;
}

.video-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border-radius:8px;
  margin-bottom:12px;
}
.video-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.project-media img.project-image{
  width:100%;
  height:auto;
  border-radius:8px;
  margin-bottom:12px;
}

/* Centrar cada slide (1 card = 1 slide) */
.swiper-slide {
  display:flex;
  justify-content:center;
  align-items:stretch;
  box-sizing:border-box;
  padding:10px 0;
}

/* Asegura ancho consistente sin deformaciones */
#proyectos-destacados .project-card {
  width:100%;
  max-width:350px;
}

/* (Opcional) remover gaps previos del grid si quedan estilos heredados */
#proyectos-destacados .projects-grid { display:contents; } /* ya no se usa grid; seguridad */
#proyectos-destacados .swiper-slide {
  display:flex;
  justify-content:center;
  align-items:stretch;
  flex:0 0 auto;          /* evita shrink que muestre más */
  box-sizing:border-box;
  padding:10px 0;
}
/* Mantener tamaño máximo tarjeta */
#proyectos-destacados .project-card {
  width:100%;
  max-width:350px;
}

/* Ajuste de paginación Swiper: colocar bullets debajo de las tarjetas */
.swiper {
  padding-bottom: 0;          /* elimina espacio innecesario si hubiera */
  overflow: visible;          /* permite que la paginación expanda hacia abajo */
}
.swiper-pagination {
  position: static !important; /* saca los bullets del overlay */
  margin-top: 14px;            /* separación respecto a las tarjetas */
  text-align: center;
}
.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 5px;
}
.swiper-pagination-bullet-active {
  transform: scale(1.15);
}

/* (Si prefieres mantener absolute: comenta lo anterior y usa en su lugar)
.swiper-pagination { bottom: -20px !important; }
.swiper { padding-bottom: 40px; }
*/

/* Accesibilidad utilidades */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.skip-link{
  position:fixed;
  top:-40px;
  left:10px;
  background:#000;
  color:#fff;
  padding:8px 14px;
  z-index:4000;
  border:2px solid #fff;
  border-radius:6px;
  font-size:.9rem;
  transition:top .25s;
}
.skip-link:focus{ top:10px; }

/* Focus visible mejorado */
a:focus-visible,
button:focus-visible,
.project-button:focus-visible,
.menu-button:focus-visible,
.tech-link-button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 2px #000,0 0 0 4px #fff;
}

/* Reducir animaciones si el usuario lo pide o en dispositivos muy pequeños */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .crt::before,
  .crt::after{ opacity:.3; }
  .badge-new{ animation:none!important; }
  .channel-switch{ display:none!important; }
  .category h3{ animation:none!important; }
}

/* Modo movilidad / ahorro (opcional: anchura <= 600px) */
@media (max-width:600px){
  .category h3{ animation:none; }
  .crt::before{ opacity:.25; }
}

/* Ajuste contraste hover (accesibilidad mínima) */
.menu-button:hover,
.project-button:hover{
  filter:brightness(1.15);
}

/* === Botón cambio idioma (NUEVO) === */
.lang-toggle{
  position:fixed;
  top:72px; /* debajo del header fijo */
  right:40px;
  z-index:1200;
  font-family:"Pixelify Sans",monospace;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:1px;
  padding:10px 14px 9px;
  color:#fff;
  background:
    linear-gradient(145deg,#2d2d2d,#151515);
  border:3px solid #000;
  border-radius:14px;
  box-shadow:
    0 0 0 2px #fff,
    4px 4px 0 #000,
    inset 0 0 6px #ffffff22;
  cursor:pointer;
  text-shadow:0 1px 0 #000;
  transition:transform .2s, filter .25s, box-shadow .25s;
}
.lang-toggle:hover{
  filter:brightness(1.15);
  box-shadow:
    0 0 0 2px #fff,
    2px 2px 0 #000,
    0 0 10px #00b7ff80,
    inset 0 0 10px #00b7ff55;
}
.lang-toggle:active{
  transform:translateY(2px);
  box-shadow:
    0 0 0 2px #fff,
    1px 1px 0 #000,
    inset 0 0 6px #00b7ffaa;
}
@media (max-width:767px){
  .lang-toggle{
    top:66px;
    right:14px;
    padding:8px 12px 7px;
    font-size:.75rem;
  }
}

/* === Ajustes responsive botón idioma dentro del menú lateral (NUEVO) === */
@media (max-width:767px){
  /* Cuando el botón ha sido movido dentro del menú */
  .vertical-menu-bar .lang-toggle.lang-mobile{
    position:absolute;
    top:auto;
    right:12px;
    bottom:12px;
    left:auto;
    z-index:1500;
    /* Reiniciar desplazamiento previo */
    transform:none;
    /* Oculto por defecto (menú cerrado) */
    display:none;
  }
  .vertical-menu-bar.open .lang-toggle.lang-mobile{
    display:block;
  }
  /* Evitar que la versión fija aparezca flotando si por alguna razón no se movió todavía */
  .lang-toggle.lang-mobile:not(.vertical-menu-bar .lang-toggle){
    display:none;
  }
}

/* === Overrides posición mascota por sub‑rangos (NUEVO) === */
@media (min-width:405px) and (max-width:766px){
  .contact-mascot-floating{
    bottom:calc(9% - 60px);
  }
}
@media (min-width:377px) and (max-width:404px){
  .contact-mascot-floating{
    bottom:calc(11% - 60px);
  }
}

/* CONTORNO FINO (antes demasiado grueso) */
.tech-proyect-container .tooltip img {
  border:none;
  padding:0;
  background:transparent;
  width:16px;
  height:18px;
  margin:2px;
  filter:
    drop-shadow(0.5px 0 0 #fff)
    drop-shadow(-0.5px 0 0 #fff)
    drop-shadow(0 0.5px 0 #fff)
    drop-shadow(0 -0.5px 0 #fff);
  transition:filter .25s ease;
}
.tech-proyect-container .tooltip img:hover {
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0.5px 0 0 #fff)
    drop-shadow(-0.5px 0 0 #fff)
    drop-shadow(0 0.5px 0 #fff)
    drop-shadow(0 -0.5px 0 #fff);
}

/* === OVERRIDE v2: Pixel art gradient (más pixelado) === */
/* Reemplaza la versión previa menos marcada */
.project-description {
  /* Escalonado vertical con menos transiciones y más contraste */
  background:
    linear-gradient(to bottom,
      #444 0%,
      #3b3b3b 10%,
      #343434 25%,
      #2b2b2b 45%,
      #222 65%,
      #191919 82%,
      #121212 100%);
  position:relative;
  isolation:isolate;
  image-rendering:pixelated;
  /* Ligero “crisp” general */
  filter:contrast(1.05) brightness(.98);
}

/* Capas:
   ::before = grid + dithering grueso (12px)
   ::after  = viñeta + niebla granular gruesa */
.project-description::before,
.project-description::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* Grid grueso + ligera trama diagonal para sensación retro */
.project-description::before{
  background:
    /* cuadrícula vertical */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.07) 0 1px,
      transparent 1px 12px),
    /* cuadrícula horizontal */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 12px),
    /* trama diagonal “dither” */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.035) 0 6px,
      transparent 6px 12px);
  background-blend-mode:overlay,overlay,normal;
  opacity:.6;
  mix-blend-mode:overlay;
  /* asegura bloques marcados */
  background-size:12px 12px,12px 12px,12px 12px;
}

/* Viñeta + moteado grande para reforzar pixel look */
.project-description::after{
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,0.15), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.65), transparent 70%),
    /* moteado grueso (pseudo dither) */
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 2px,
      rgba(0,0,0,0) 2px 6px);
  background-blend-mode:soft-light,soft-light,overlay;
  opacity:.55;
  mix-blend-mode:soft-light;
  background-size:100% 100%,100% 100%,14px 14px;
  image-rendering:pixelated;
}

/* Elevar contenido */
.project-description > *{
  position:relative;
  z-index:1;
}

/* (Opcional) Variante aún más marcada si se añade la clase 'pixel-heavy' */
.project-description.pixel-heavy::before{
  opacity:.8;
  filter:contrast(1.15) brightness(1.05);
}
.project-description.pixel-heavy::after{
  opacity:.7;
}

/* === OVERRIDE: alineación izquierda de tech-proyect-container también en móviles === */
@media (max-width:767px){
  .tech-proyect-container{
    justify-content:flex-start; /* antes center en mobile */
  }
}

/* === Ajustes responsive monitor-screen / screen-left (FIX resize) === */
/* Desktop: permitir crecer más allá de 400px si el contenido lo requiere */
.monitor-screen{
  /* antes: height:400px; */
  min-height:400px;
  height:auto;
}

/* Evitar que imágenes/iframes se deformen dentro de screen-left */
.screen-left{
  align-items:stretch;
}

/* Media interno: dejar que ajuste al alto disponible sin overflow forzado */
.screen-left .media-element{
  height:100%;
  min-height:0;
}

/* Móvil / tablets: eliminar bloque rígido de 250px y usar proporción 16:9 auto‑ajustable */
@media (max-width:900px){
  .screen-left{
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    aspect-ratio:16/9;              /* mantiene proporción */
  }
  .screen-left .media-element{
    height:100%;
    min-height:0;
  }
}

/* Ultra pequeño: si el ancho es muy reducido, permitir que la altura crezca más (liberar aspect-ratio) */
@media (max-width:420px){
  .screen-left{
    aspect-ratio:auto;
  }
}

/* Ajuste nav buttons: recenter con alturas dinámicas */
.screen-left .nav-button{
  top:50%;
  transform:translateY(-50%);
}

/* Mejora iframes (video / sketchfab) para ocupar todo el contenedor sin overflow */
.screen-left iframe{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:0;
}

/* === Ultra‑wide layout (≥1800px) === */
@media (min-width:1800px){
  .content-container{
    width:60%;                /* antes 70% del viewport */
    max-width:1700px;
  }
  .social-links{
    right:calc(20% - 40px);    /* mover más hacia el borde visual */
    gap:18px;
  }
  .monitor-frame{
    max-width:1600px;
    padding:28px;
  }
  .monitor-screen{
    height:520px;              /* más alto para media grande */
  }
  .screen-left{
    flex:2.2;
  }
  .screen-center{
    flex:2.2;
  }
  .project-title h2{
    font-size:1.55rem;
  }
  .project-description{
    font-size:1.07em;
    line-height:1.15em;
  }
  .tech-container-wrapper{
    width:320px;
    padding:26px;
  }
  .tech-screen{
    gap:14px;
  }
  .tech-screen .category h3{
    font-size:1.05em;
    animation-duration:14s;
  }
  .menu-button{
    font-size:.95rem;
  }
  .nav-button{
    width:48px;
    height:48px;
  }
  .badge-new{
    transform:scale(1.15);
    transform-origin:top left;
  }
  /* Destacados: 4 columnas (grid fallback si Swiper no aplica) */
  #proyectos-destacados .projects-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  /* Swiper slides (el JS ajusta slidesPerView, aquí asegurar ancho cómodo) */
  .swiper-slide .project-card{
    max-width:380px;
  }
  .computer-screen{
    flex:3.2;
  }
  .screen-content{
    min-height:340px;
    transform:scale(.97);
  }
  .screen-content h2{
    font-size:2.1em;
  }
  .text-container{
    max-height:230px;
  }
}

/* === FIX: Evitar que .project-description cambie la altura del monitor en escritorio === */
@media (min-width:901px){
  .monitor-screen{
    height:400px;          /* altura fija (antes auto) */
  }
  .screen-center{
    display:flex;
    flex-direction:column;
    height:100%;
  }
  .project-title{
    flex:0 0 auto;
  }
  .project-description{
    flex:1 1 auto;
    min-height:0;          /* permite que el overflow funcione correctamente */
    overflow-y:auto;       /* ya estaba, se refuerza */
  }
  .screen-left{
    height:100%;
  }
}

/* === FIX MOBILE MEDIA INVISIBLE === */
@media (max-width:900px){
  .screen-left{
    position:relative;           /* asegurar contexto */
    aspect-ratio:16 / 9;         /* principal */
  }
  /* Fallback para navegadores sin soporte aspect-ratio */
  .screen-left.no-aspect-ratio::before{
    content:"";
    display:block;
    padding-top:56.25%; /* 9/16 */
  }
  .screen-left .media-element{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .screen-left .fade-layer,
  .screen-left .image-inner-wrapper,
  .screen-left .image-inner-wrapper > *,
  .screen-left iframe{
    position:absolute;
    inset:0;
    width:100%!important;
    height:100%!important;
    object-fit:cover;
  }
}

/* Ajuste específico: cuando hay sólo una imagen ya cargada (sin capas de transición) */
@media (max-width:900px){
  .screen-left img.proyect-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
}