:root {
    --bg: #e4e4e4;
    --text: #1a1a1a;
    --text2: #303030;
    --accent: #e0e0e0;
    --nav-bg: #cdcdcd;
    --link-color: #666666;
    --card-bg: #d5d5d5;
    --card-bg-cert: #dcdcdc;
    --card-bg-hover: #f1f1f1;
    --nav-border: #a9a9a9;
    --btn-bg: #4c4c4c;
    --btn-index: #c7c7c7;
    --btn-hover-index: #22d66475; 
    --btn-text: #ffffff;
    --btn-hover: #262626;
    --brand-color: #2e7d32;
    --status-key: #484848;
    --border-index: #767676;
    --btn-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

html.dark-mode {
    --bg: #121212;
    --text: #d1d1d1;
    --text2: #b5b5b5;
    --accent: #333333;
    --nav-bg: #1a1a1a;
    --link-color: #888888;
    --card-bg: #1a1a1a;
    --card-bg-cert: #1a1a1a;
    --card-bg-hover: #222222;
    --nav-border: #333333;
    --btn-bg: #696969;
    --btn-index: #1f1f1f;
    --btn-hover-index: #198e4475;  
    --btn-text: #eaeaea;
    --btn-hover: #848484;
    --brand-color: #4ade80; /* Tu verde neón para fondo oscuro */
    --status-key: #666666;
    --border-index: #343434;
    --btn-shadow: 0 0 20px rgba(74, 222, 128, 0.11);
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    transition: all 0.3s ease;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    
}

header {
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--accent);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    transition: background 0.4s;
    z-index: 99999;
}

footer {
    width: 100%;
    border-top: 1px solid var(--nav-border);
    padding: 40px 0;
    text-align: center;
    background-color: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
    transition: background 0.4s;
}

footer p {
    font-size: 0.75rem;
    color: var(--secondary);
    letter-spacing: 0.5px;
    margin: 0;
}

nav {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

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

nav a {
    text-decoration: none;
    color: var(--link-color);
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.3s;
}

nav a:hover {
    color: var(--text);
}

nav a.active {
    color: var(--text);
    border-bottom: 2px solid var(--text);
}

main {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    animation: fadeIn 0.5s ease;
    flex: 1; 
    margin: 80px auto;
    padding: 0 20px;
}

/* Estilo general de las banderas */
.flag-icon {
    opacity: 0.4; /* Apagadas por defecto */
    filter: grayscale(0.8); /* Un poco grises para que no resalten tanto */
    transition: all 0.3s ease;
    width: 25px; /* Ajusta el tamaño que tenías */
}

/* La bandera activa o cuando pasas el ratón */
.flag-icon:hover, 
.active-flag .flag-icon {
    opacity: 0.8;
    filter: grayscale(0) brightness(1.2);
    transform: scale(1.1); /* Un pequeño aumento */
}

#theme-toggle {
    background: var(--text);
    color: var(--bg);
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 4px;
}

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

/* Contenedor principal */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Texto CLARO/OSCURO */
#mode-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text);
    width: 60px; /* Evita que el texto baile */
}

/* El contenedor del switch */
.theme-switch {
    display: inline-block;
    height: 22px;
    position: relative;
    width: 44px;
}

/* OCULTAR EL CHECKBOX FEO (El cuadro blanco de tu foto) */
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* El carril del switch (La pastilla) */
.slider {
    background-color: #e0e0e0; /* Gris clarito */
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

/* El círculo negro/blanco */
.slider:before {
    background-color: #000;
    bottom: 4px;
    content: "";
    height: 14px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 14px;
    border-radius: 50%;
}

/* --- ESTADOS CUANDO SE CLICA --- */
/* Fondo cuando está en ON (Modo Oscuro) */
input:checked + .slider {
    background-color: #333;
}

/* Movimiento del círculo */
input:checked + .slider:before {
    transform: translateX(22px);
    background-color: #fff;
}


.lang-switcher {
    display: flex;
    gap: 12px;
    margin-right: 20px;
    border-right: 1px solid var(--nav-border);
    padding-right: 20px;
    align-items: center;
}

.lang-switcher button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, filter 0.3s ease;
}

.flag-icon {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%; /* Las hace circulares */
    filter: grayscale(60%); /* Empiezan casi en gris para ser minimalistas */
    opacity: 0.7;
    border: 1px solid var(--nav-border);
}

/* Efecto al pasar el ratón: cobra color y escala */
.lang-switcher button:hover .flag-icon {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.2);
}

/* Bandera del idioma seleccionado */
.lang-switcher button.active-lang .flag-icon {
    filter: grayscale(0%);
    opacity: 1;
    border: 2px solid var(--text);
}

/* En modo oscuro, podemos hacer que resalten un poco menos */
html.dark-mode .flag-icon {
    border-color: #444;
}




/*------------------------------------*/
/* SECCIÓN INICIO (HERO)     */
/*------------------------------------*/

.hero {
    text-align: center;
    margin-top: 10vh;
    /* 1. Hacemos el fondo transparente para que no cree un "recuadro" */
    background-color: transparent !important; 
    color: var(--text);
    
    /* 2. Aseguramos que no haya sombras ni bordes que delimiten el cuadro */
    box-shadow: none !important;
    border: none !important;
    
    /* 3. Eliminamos cualquier transición de fondo que pueda quedar */
    transition: color 0.3s ease; /* Solo transicionamos el color del texto si quieres */
}

/* --- TÍTULOS --- */
.main-title {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -2px;
    color: var(--text);
    margin-bottom: 10px;
}

.subtitle {
    font-family: 'Fira Code', monospace;
    font-size: 1.2rem;
    color: var(--brand-color); /* El verde dinámico de tus variables */
    margin-bottom: 25px;
}

/* --- TEXTO DESCRIPTIVO --- */
.hero-description {
    max-width: 900px;
    margin: 0 auto 30px auto;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text2);
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

/* --- BOTÓN "CONÓCEME" --- */
.hero-actions {
    margin: 30px 0;
    opacity: 0;
    animation: fadeIn 0.8s ease 0.4s forwards;
}

.btn-minimal {
    display: inline-block;
    text-decoration: none;
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: var(--text);
    border: 1px solid var(--brand-color);
    background: transparent;
    padding: 12px 30px;
    border-radius: 4px;
    /* Única transición permitida */
    transition: all 0.1s ease;
}

.btn-minimal:hover {
    background: var(--brand-color);
    color: var(--bg);
    box-shadow: var(--btn-shadow);
    transform: translateY(-2px);
}

/* --- STATUS GRID (DETALLES TÉCNICOS) --- */
.status-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--nav-border);
}

.status-item {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
}

.key {
    color: var(--status-key);
    margin-right: 8px;
}

.value {
    color: var(--text);
}

/* --- ANIMACIONES Y CURSOR --- */
.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink { 
    50% { opacity: 0; } 
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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



/*------------------------------------*/
            /* SOBRE MI */
/*------------------------------------*/

.about-container {
    display: flex;
    gap: 50px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.about-text { flex: 2; text-align: left; }
.about-visual { flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* Títulos con acento lateral */
.about-text h1, .about-text h2 {
    border-left: 4px solid var(--brand-color);
    padding-left: 15px;
    margin-bottom: 25px;
    color: var(--text);
}

/* Resaltar palabras clave en verde */
.about-text strong {
    color: var(--brand-color);
    font-weight: 700;
}

/* La cita: ahora con estética de código */
.highlight-p {
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    color: var(--brand-color); /* Texto en verde */
    font-style: italic;
    border-left: 3px solid var(--brand-color);
    padding-left: 15px;
    margin: 30px 0;
    opacity: 0.9;
}

/* Tarjetas de habilidades */
.tech-card-mini {
    background: var(--card-bg);
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--nav-border);
    transition: all 0.3s ease;
}

.tech-card-mini:hover {
    border-color: var(--text);
    /* Cambiamos el desplazamiento por una escala suave */
    transform: scale(1.05); 
    /* Opcional: añadir una sombra para dar profundidad al "crecer" */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Asegura que al crecer no se tape con lo de abajo */
}

.tech-card-mini span {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: var(--text);
}

/* Barras de progreso técnicas */
.progress-bar {
    background: rgba(0, 0, 0, 0.2); /* Fondo más oscuro para que el verde resalte */
    height: 6px;
    border-radius: 4px;
    margin-top: 12px;
    overflow: hidden;
}

.progress {
    background: var(--brand-color); /* El verde protagonista */
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.4); /* Resplandor sutil */
}

/* La firma "DG" */
.signature {
    margin-top: 30px;
    font-family: 'Fira Code', monospace;
    color: var(--brand-color);
    font-weight: bold;
    font-size: 1.2rem;
}


/*------------------------------------*/
            /* CONTACTO */
/*------------------------------------*/
.contact-section {
    text-align: center;
    margin-top: 50px;
}

.contact-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--secondary);
    font-size: 1.1rem;
    padding: 15px 25px;
    border: 1px solid var(--nav-border);
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    transition: all 0.3s ease;
    background-color: var(--nav-bg);
}

.contact-icon {
    width: 24px;
    height: 24px;
    color: var(--secondary);
    transition: color 0.3s ease;
}

/* Efecto Hover */
.contact-item:hover {
    color: var(--text);
    border-color: var(--text);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(64, 64, 64, 0.05);
}

.contact-item:hover .contact-icon {
    color: var(--text);
}

/* Ajuste para modo oscuro */
html.dark-mode .contact-item:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}



/*------------------------------------*/
         /* CERTIFICACIONES*/
/*------------------------------------*/

header {
    z-index: 99999 !important; /* Siempre por encima del zoom */
}

/* Títulos de categoría (Redes, Sistemas...) con acento verde */
.main h2, .main h3 {
    border-left: 4px solid var(--brand-color);
    padding-left: 15px;
    margin-bottom: 20px;
}

.certificates-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 40px;
    width: 100%;
}

/* El Wrapper reserva el espacio exacto del grid */
.certificate-wrapper {
    position: relative;
    height: 480px; 
    width: 100%;
}

.certificate-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg-cert);
    border: 1px solid var(--nav-border);
    border-radius: 12px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    box-sizing: border-box;
    min-height: 480px;
    max-height: 480px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default; /* El ratón no cambia a mano al pasar por la tarjeta */
    text-decoration: none !important;
}

.certificate-item h3 {
    color: var(--text);
    text-decoration: none !important;
}

/* EFECTO ZOOM SIMÉTRICO */
.certificate-item:hover {
    z-index: 1000;
    width: 110%;
    left: -5%;
    top: -30px;
    max-height: 550px; 
    background-color: var(--card-bg-hover);
    border-color: var(--text); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    padding-bottom: 90px;
}

.certificate-img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.certificate-img-container img {
    max-width: 100%;
    max-height: 330px; 
    object-fit: contain;
    border-radius: 6px;
    /* Un borde muy fino para que los certificados blancos no se pierdan en el fondo claro */
    border: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.certificate-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 10px 0 0 0;
    transition: transform 0.3s ease;
}

/* BOTÓN QUE APARECE - Estilo unificado con el resto del portfolio */
.view-larger-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    /* Usamos el verde de marca para el botón */
    background-color: var(--btn-index); 
    color: var(--text);
    padding: 10px 20px;
    font-size: 0.99rem;
    font-weight: 700;
    font-family: 'Fira Code', monospace; /* Toque técnico */
    border-radius: 6px;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--brand-color);
    text-decoration: none !important;
    display: inline-block;
    cursor: pointer;
}

.view-larger-btn:hover {
    background-color: var(--brand-color);
    filter: brightness(1.1);
    box-shadow: var(--btn-shadow);
    color: var(--bg);
}

.certificate-item:hover .view-larger-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


/*------------------------------------*/
            /* HABILIDADES */
/*------------------------------------*/

.skills-page {
    animation: fadeIn 0.6s ease;
}

/* Reutilizamos el estilo de títulos de certificados para coherencia */
.category-header {
    margin-bottom: 30px;
    margin-top: 50px;
    position: relative;
}

.category-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    position: relative;
    margin: 0;
}

.category-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 2px;
}

/* --- CUADRÍCULA DE HABILIDADES --- */
.skills-grid {
    display: grid;
    /* Forzamos 4 columnas iguales */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; /* Espacio entre tarjetas */
    margin-top: 30px;
}

/* --- DISEÑO DE LA TARJETA (TIPO ICONO ARRIBA) --- */
.skill-card {
    background-color: var(--card-bg);
    border: 1px solid var(--nav-border);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 15px 25px 15px;
    background-repeat: no-repeat;
    background-position: center 30px; /* Posicion del icono en el centro horizontal, y a 30px del borde superior */ 
    background-size: 65px; /* Tamaño iconos */
    transform: translateY(0) scale(1);
    transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

/* --- TAMAÑO DE ICONOS ESPECIFICOS --- */
.sk-cisco {
    background-size: 140px;
    background-position: center 0 !important;
}
html.dark-mode .sk-cisco {
    background-size: 140px;
    background-position: center 0 !important;
}

.sk-django {
    background-size: 110px;
    background-position: center 15px !important;
}
html.dark-mode .sk-django {
    background-size: 110px;
    background-position: center 15px !important;
}

.skill-card span {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.sk-php {
    background-size: 90px;
    background-position: center 40px !important;
}
html.dark-mode .sk-php {
    background-size: 90px;
    background-position: center 40px !important;
}

.sk-html {
    background-size: 55px;
}
html.dark-mode .sk-html {
    background-size: 55px;
}

.sk-bash {
    background-size: 55px;
}
html.dark-mode .sk-bash {
    background-size: 55px;
}

.sk-my {
    background-size: 80px;
    background-position: center 20px !important;
}
html.dark-mode .sk-my {
    background-size: 80px;
    background-position: center 20px !important;
}

/* Efecto hover estilo la imagen que pasaste */
.skill-card:hover {
    transform: translateY(-10px) scale(1.03);
    transition: transform 0.2s ease-out;
    background-color: var(--card-bg-hover);
    border-color: var(--text);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}

/* --- MAPEO DE ICONOS (MODO CLARO - ICONO BLANCO) --- */
.sk-ad { background-image: url('habilidades/ad_blanco.png'); }
.sk-bash { background-image: url('habilidades/bash_blanco.png'); }
.sk-ciber { background-image: url('habilidades/ciber_blanco.png'); }
.sk-cisco { background-image: url('habilidades/cisco_blanco.png'); }
.sk-css { background-image: url('habilidades/css_blanco.png'); }
.sk-django { background-image: url('habilidades/django_blanco.png'); }
.sk-docker { background-image: url('habilidades/docker_blanco.png'); }
.sk-html { background-image: url('habilidades/html_blanco.png'); }
.sk-js { background-image: url('habilidades/js_blanco.png'); }
.sk-json { background-image: url('habilidades/json_blanco.png'); }
.sk-linux { background-image: url('habilidades/linux_blanco.png'); }
.sk-my { background-image: url('habilidades/my_blanco.png'); }
.sk-php { background-image: url('habilidades/php_blanco.png'); }
.sk-postgres { background-image: url('habilidades/postgres_blanco.png'); }
.sk-python { background-image: url('habilidades/python_blanco.png'); }
.sk-server { background-image: url('habilidades/server_blanco.png'); }
.sk-virtual { background-image: url('habilidades/virtual_blanco.png'); }
.sk-xml { background-image: url('habilidades/xml_blanco.png'); }
.sk-redes { background-image: url('habilidades/redes_blanco.png'); }

/* --- MAPEO DE ICONOS (MODO OSCURO - ICONO NEGRO) --- */
html.dark-mode .sk-ad { background-image: url('habilidades/ad_negro.png'); }
html.dark-mode .sk-bash { background-image: url('habilidades/bas_negro.png'); }
html.dark-mode .sk-ciber { background-image: url('habilidades/ciber_negro.png'); }
html.dark-mode .sk-cisco { background-image: url('habilidades/cisco_negro.png'); }
html.dark-mode .sk-css { background-image: url('habilidades/css_negro.png'); }
html.dark-mode .sk-django { background-image: url('habilidades/django_negro.png'); }
html.dark-mode .sk-docker { background-image: url('habilidades/docker_negro.png'); }
html.dark-mode .sk-html { background-image: url('habilidades/html_negro.png'); }
html.dark-mode .sk-js { background-image: url('habilidades/js_negro.png'); }
html.dark-mode .sk-json { background-image: url('habilidades/json_negro.png'); }
html.dark-mode .sk-linux { background-image: url('habilidades/linux_negro.png'); }
html.dark-mode .sk-my { background-image: url('habilidades/my_negro.png'); }
html.dark-mode .sk-php { background-image: url('habilidades/php_negro.png'); }
html.dark-mode .sk-postgres { background-image: url('habilidades/postgres_negro.png'); }
html.dark-mode .sk-python { background-image: url('habilidades/python_negro.png'); }
html.dark-mode .sk-server { background-image: url('habilidades/server_negro.png'); }
html.dark-mode .sk-virtual { background-image: url('habilidades/virtual_negro.png'); }
html.dark-mode .sk-xml { background-image: url('habilidades/xml_negro.png'); }
html.dark-mode .sk-redes { background-image: url('habilidades/redes_negro.png'); }



/* --- CONTENEDOR (FLEX) --- */
.soft-skills-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
    width: 100%;
}

/* --- EL WRAPPER (EL ANCLA) --- */
.soft-skill-wrapper {
    position: relative;
    height: 55px;   /* La altura cerrada de tu etiqueta */
    flex: 1;
    min-width: 180px; /* Un poco más de ancho para que respiren */
}

/* --- LA TARJETA (SOFT TAG) --- */
.soft-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--nav-border);
    border-radius: 20px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 17px 15px;
    
    max-height: 55px; /* Altura cerrada */
    overflow: hidden;
    z-index: 1;
    
    /* Animación elástica pro */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

/* --- EFECTO HOVER: ZOOM SIMÉTRICO --- */
.soft-tag:hover {
    z-index: 1000; /* Se pone encima de todo */
    
    /* Expansión hacia los 4 lados */
    width: 115%;  /* Crece a los lados */
    left: -7.5%;  /* Centra el crecimiento lateral */
    top: -25px;   /* Crece hacia arriba */
    max-height: 180px; /* Crece hacia abajo */
    
    background-color: var(--card-bg-hover);
    border-color: var(--text);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* --- TEXTO EXPLICATIVO (DATA-INFO) --- */
.soft-tag::after {
    content: attr(data-info);
    display: block;
    margin-top: 20px; 
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary); /* O la variable que uses para texto suave */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; 
}

.soft-tag:hover::after {
    opacity: 1;
}


/*------------------------------------*/
/* PROYECTOS               */
/*------------------------------------*/

/* Contenedores base */
main, section, .category-group {
    width: 100%;
    box-sizing: border-box;
}

/* TÍTULO DE SECCIÓN: Solo barra vertical verde lateral */
.category-group h2, .category-group h3 {
    border-left: 4px solid var(--brand-color);
    padding-left: 15px;
    margin-bottom: 25px;
    color: var(--text);
    border-bottom: none !important;
    border-top: none !important;
    border-right: none !important;
}

/* Capas y Grid */
main, .proyectos-grid {
    position: relative;
    z-index: 1; 
}

.proyectos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 30px;
    width: 100%;
    position: relative;
}

.proyecto-card-wrapper {
    position: relative;
    height: 380px; 
    width: 100%;
    display: block;
}

/* TARJETA: Estado Base */
.proyecto-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--nav-border);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 240px 20px 20px 20px; 
    min-height: 380px; 
    max-height: 380px; 
    overflow: hidden;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center 30px;
    background-size: 200px; 
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    box-sizing: border-box;
}

/* HOVER: Expansión Pro */
.proyecto-card:hover {
    z-index: 1000; 
    width: 110%;  
    left: -5%;    
    top: -40px;   
    max-height: 680px;
    background-color: var(--card-bg-hover);
    border-color: var(--text); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    padding-bottom: 40px;
}

/* TÍTULOS DENTRO DE CUADROS: Totalmente limpios */
.proyecto-card h3 {
    font-size: 1.4rem;
    color: var(--text);
    margin-bottom: 15px;
    transition: color 0.3s ease;
    border-left: none !important;
    border-bottom: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Contenido que aparece en Hover */
.proyecto-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.proyecto-card:hover .proyecto-content {
    opacity: 1;
    transform: translateY(0);
}

.proyecto-card p {
    font-size: 1rem;
    color: var(--text2);
    line-height: 1.5;
    margin-bottom: 20px;
}

/* BOTÓN GITHUB: Estilo Consola/Sistema */
.github-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--btn-index); 
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    font-family: 'Fira Code', monospace; 
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--brand-color); 
    transition: all 0.3s ease;
}

.github-btn:hover {
    background-color: var(--brand-color);
    color: var(--bg);
    box-shadow: var(--btn-hover-index);
}


/* Limpieza total de rayas en títulos dentro de tarjetas */
.exp-card h3, 
.certificate-item h3, 
.proyecto-card h3 {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-bottom: none !important;
}

/* --- LOGOS (MANTÉN TUS OFFSETS) --- */
.sk-meteoapa { background-image: url('projects/meteosapa_blanco.png'); background-position: center 40px !important; }
.sk-dataclysm { background-image: url('projects/dataclysm_blanco.png'); background-position: center 55px !important; }
.sk-radio { background-image: url('projects/radio_blanco.png'); background-position: center 55px !important; }
.sk-video { background-image: url('projects/video_blanco.png'); background-position: center 65px !important; }
.sk-scraper { background-image: url('projects/scraper_blanco.png'); background-position: center 50px !important; }
.sk-clicker { background-image: url('projects/clicker_blanco.png'); background-position: center 45px !important; }

/* Modo Oscuro */
html.dark-mode .sk-meteoapa { background-image: url('projects/meteosapa_negro.png'); }
html.dark-mode .sk-dataclysm { background-image: url('projects/dataclysm_negro.png'); }
html.dark-mode .sk-radio { background-image: url('projects/radio_negro.png'); }
html.dark-mode .sk-video { background-image: url('projects/video_negro.png'); }
html.dark-mode .sk-scraper { background-image: url('projects/scraper_negro.png'); }
html.dark-mode .sk-clicker { background-image: url('projects/clicker_negro.png'); }



/*------------------------------------*/
            /* EXPERIENCIA */
/*------------------------------------*/

/* --- LÍNEA DE TIEMPO --- */
.pro-timeline {
    position: relative;
    padding-left: 35px; 
    /* Cambiado a un verde sutil para que parezca un circuito */
    border-left: 2px solid var(--nav-border); 
    margin-left: 20px;
    margin-top: 30px;
}

/* --- NUEVOS ESTILOS PARA EL LOGO --- */

.exp-logo-container {
    width: 100%;
    height: 0;        
    opacity: 0;       
    display: flex;
    justify-content: center;
    transition: all 0.5s ease; 
    overflow: hidden;
}

.exp-logo {
    position: absolute;
    right: 330px;      
    top: 75px;        
    width: 120px;     
    opacity: 0;       
    transform: translateX(10px); 
    transition: all 0.5s ease;
    pointer-events: none; 
}


/* ----------------  POSICION  ----------------*/
/* --------------------------------------------*/
.logo-sapa {
    right: -45px;
    top: 90px; 
    width: 480px;
}

.logo-ramon {
    right: -40px;
    top: 65px; 
    width: 400px;
}

.logo-inetum {
    right: -60px;
    top: 115px; 
    width: 500px;  
}

.logo-trace {
    right: -20px;
    top: 45px; 
    width: 290px;  
}

.logo-bsk {
    right: -85px;
    top: 5px; 
    width: 550px;  
}

.logo-vela {
    right: -35px;
    top: 1px; 
    width: 350px;  
}


/* ---------------  FILTRO B&W (MODO OSCURO)  ---------------*/
/* ----------------------------------------------------------*/
html.dark-mode .logo-sapa .logo-raw {
    filter: grayscale(1) opacity(0.4) brightness(0.8);
}

html.dark-mode .logo-ramon .logo-raw {
    filter: grayscale(1) opacity(0.4) brightness(0.7);
}

html.dark-mode .logo-inetum .logo-raw {
    filter: grayscale(1) opacity(0.2) brightness(1.5);
}

html.dark-mode .logo-trace .logo-raw {
    filter: grayscale(1) opacity(0.2) brightness(1.6);
}

html.dark-mode .logo-bsk .logo-raw {
    filter: grayscale(1) opacity(0.3) brightness(1.5);
}

html.dark-mode .logo-vela .logo-raw {
    filter: grayscale(1) opacity(0.3) brightness(1.5);
}


/* ---------------  FILTRO B&W (MODO CLARO)  ---------------*/
/* ---------------------------------------------------------*/

html:not(.dark-mode) .logo-sapa .logo-raw {
    filter: grayscale(1) opacity(0.20) brightness(0.5);
}

html:not(.dark-mode) .logo-ramon .logo-raw {
    filter: grayscale(1) opacity(0.20) brightness(0.6);
}

html:not(.dark-mode) .logo-inetum .logo-raw {
    filter: grayscale(1) opacity(0.15) brightness(0.3);
}

html:not(.dark-mode) .logo-trace .logo-raw {
    filter: grayscale(1) opacity(0.12) brightness(0.5);
}

html:not(.dark-mode) .logo-bsk .logo-raw {
    filter: grayscale(1) opacity(0.13) brightness(0.2); 
}

html:not(.dark-mode) .logo-vela .logo-raw {
    filter: grayscale(1) opacity(0.15) brightness(0.3);
}

.logo-raw {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.6s ease;
}



/* --- WRAPPER (ANCLAJE) --- */
.exp-wrapper {
    position: relative;
    height: 160px; 
    width: 100%;
    margin-bottom: 40px;
}

/* --- BOLITA (PUNTO DEL TIMELINE) --- */
.exp-wrapper::before {
    content: '';
    position: absolute;
    left: -44px; 
    top: 28px;
    width: 12px;
    height: 12px;
    background-color: var(--bg);
    /* Punto ahora con borde verde */
    border: 3px solid var(--brand-color); 
    border-radius: 50%;
    z-index: 5;
    transition: all 0.3s ease;
}

.exp-wrapper:hover::before {
    /* Al pasar el ratón, la bola se llena de verde brillante */
    background-color: var(--brand-color); 
    transform: scale(1.4);
    box-shadow: 0 0 12px var(--brand-color);
}

/* --- TARJETA --- */
.exp-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-bg);
    border: 1px solid var(--nav-border);
    border-radius: 15px;
    padding: 35px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 160px;
    max-height: 160px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

/* --- ZOOM SIMÉTRICO --- */
.exp-card:hover {
    z-index: 100;
    width: 106%;  
    left: -3%;    
    top: -30px;   
    max-height: 500px; 
    padding-top: 25px;
    background-color: var(--card-bg-hover);
    /* Borde verde al hacer hover, igual que el botón de inicio */
    border-color: var(--text); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    padding: 35px 25px;
}

.exp-card:hover .exp-logo {
    opacity: 1;
    transform: translateX(0); 
}

/* --- CONTENIDO INTERNO --- */
.exp-badge {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    /* Etiquetas EDU/WORK en verde */
    color: var(--brand-color); 
    opacity: 0.7;
}

.exp-year {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}

.exp-card h3 {
    font-size: 1.2rem;
    margin: 0;
    color: var(--text);
}

.exp-place {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text2);
    margin-top: 5px;
}

.exp-details {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
    margin-top: 20px;
}

.exp-card:hover .exp-details {
    opacity: 1;
    transform: translateY(0);
}

.exp-details ul {
    padding-left: 20px;
    margin: 0;
}

.exp-details li {
    font-size: 0.9rem;
    color: var(--text2);
    margin-bottom: 8px;
}

/* Puntos de la lista interna en verde */
.exp-details li::marker {
    color: var(--brand-color);
}


/*------------------------------------*/
/* SECCIÓN RESPONSIVE (EL ARREGLO)    */
/*------------------------------------*/
@media (max-width: 768px) {
    /* 1. Reset de Fuentes */
    .main-title { font-size: 2.5rem; letter-spacing: -1px; }
    .subtitle { font-size: 1rem; }
    
    /* 2. Navegación */
    nav { flex-direction: column; gap: 15px; }
    nav ul { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .lang-switcher { border-right: none; border-bottom: 1px solid var(--nav-border); padding: 0 0 10px 0; margin: 0; }

    /* 3. Layout */
    main { margin: 30px auto; padding: 0 15px; }
    .about-container { flex-direction: column; gap: 30px; }
    .status-grid { flex-direction: column; gap: 15px; align-items: center; }

    /* 4. GRIDS: TODO A 1 COLUMNA */
    .proyectos-grid, .certificates-grid, .skills-grid {
        grid-template-columns: 1fr !important;
    }

    /* 5. ELIMINAR POSICIÓN ABSOLUTA (Fundamental para móvil) */
    .exp-wrapper, .certificate-wrapper, .proyecto-card-wrapper, .soft-skill-wrapper {
        height: auto !important;
        margin-bottom: 20px;
    }

    .exp-card, .certificate-item, .proyecto-card, .soft-tag {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        max-height: none !important;
        padding-top: 240px; /* Mantener espacio para logos de proyectos */
    }

    .exp-card { padding-top: 25px; } /* Reset para experiencia */
    .certificate-item { padding-top: 30px; min-height: auto; }

    /* 6. DESACTIVAR ZOOM LATERAL (Evita que la web baile) */
    .exp-card:hover, .certificate-item:hover, .proyecto-card:hover, .soft-tag:hover {
        width: 100% !important;
        left: 0 !important;
        transform: translateY(-5px) !important;
    }

    /* 7. Soft Skills en móvil */
    .soft-tag { max-height: none; }
    .soft-tag::after { opacity: 1; position: relative; margin-top: 10px; }
}

@media (max-width: 480px) {
    .main-title { font-size: 2rem; }
    .skill-card { padding-top: 80px; background-size: 50px; }
    .proyecto-card { background-size: 150px; padding-top: 180px; }
}