/* VARIABLES DE DISEÑO (Fáciles de cambiar) */
        :root {
            --bg-principal: #0f172a;
            --bg-tarjetas: #1e293b;
            --texto-principal: #f8fafc;
            --texto-secundario: #94a3b8;
            --acento: #38bdf8; /* Azul Tech */
            --acento-creativo: #f43f5e; /* Rosa Creativo */
            --borde: #334155;
        }

        /* Tema Claro Alternativo */
        [data-theme="light"] {
            --bg-principal: #f8fafc;
            --bg-tarjetas: #ffffff;
            --texto-principal: #0f172a;
            --texto-secundario: #64748b;
            --acento: #0284c7;
            --acento-creativo: #db2777;
            --borde: #e2e8f0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            transition: background-color 0.3s, color 0.3s;
        }

        body {
            background-color: var(--bg-principal);
            color: var(--texto-principal);
            line-height: 1.6;
            padding: 2rem 1rem;
        }
        a {
            text-decoration: none; /* Elimina el subrayado por defecto */
            color: var(--texto-principal);        /* Cambia el color del texto a negro puro */
        }
        a:hover {
            color: var(--texto-principal);        /* Un tono gris oscuro para que el usuario note la interacción */
            text-decoration: none; /* Asegura que siga sin subrayarse al hacer hover */
        }

        .contenedor {
            max-width: 1100px;
            margin: 0 auto;
        }

        /* --- ENCABEZADO / CONTROLES --- */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--borde);
            margin-bottom: 3rem;
        }

        .controles {
            display: flex;
            gap: 1rem;
        }

        .btn {
            background: var(--bg-tarjetas);
            color: var(--texto-principal);
            border: 1px solid var(--borde);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .btn:hover {
            border-color: var(--acento);
        }

        /* --- HERO SECTION --- */
        .hero {
            text-align: center;
            margin-bottom: 4rem;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -0.05em;
            margin-bottom: 0.5rem;
        }

        /* Efecto de degradado para el perfil híbrido */
        .badge-perfil {
            display: inline-block;
            background: linear-gradient(135deg, var(--acento), var(--acento-creativo));
            color: white;
            padding: 0.4rem 1.2rem;
            border-radius: 50px;
            font-weight: bold;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--texto-secundario);
            max-width: 600px;
            margin: 0 auto;
        }

        /* --- DISEÑO GRID RESPONSIVO --- */
        .grid-cv {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }

        @media (min-width: 768px) {
            .grid-cv {
                grid-template-columns: 350px 1fr;
            }
        }

        /* --- COLUMNA LATERAL (Datos, Software, Skills) --- */
        .col-lateral {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .tarjeta {
            background-color: var(--bg-tarjetas);
            border: 1px solid var(--borde);
            padding: 2rem;
            border-radius: 12px;
        }

        .titulo-seccion {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1.2rem;
            color: var(--acento);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Estilo para las etiquetas de habilidades (tags) */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            background: var(--bg-principal);
            border: 1px solid var(--borde);
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-size: 0.85rem;
            color: var(--texto-secundario);
        }

        .tag:hover {
            color: var(--texto-principal);
            border-color: var(--acento-creativo);
        }

        /* --- COLUMNA PRINCIPAL (Experiencia, Portafolio) --- */
        .col-principal {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .bloque-experiencia {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--borde);
        }

        .bloque-experiencia:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .exp-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .exp-puesto {
            font-size: 1.25rem;
            font-weight: 700;
        }

        .exp-empresa {
            color: var(--acento-creativo);
            font-weight: 500;
        }

        .exp-fecha {
            font-size: 0.9rem;
            color: var(--texto-secundario);
        }

        /* --- SECCIÓN PORTAFOLIO (Crucial para este perfil) --- */
        .grid-portafolio {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .item-portafolio {
            background: var(--bg-principal);
            border: 1px solid var(--borde);
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .item-portafolio:hover {
            transform: translateY(-3px);
            border-color: var(--acento);
        }

        .item-portafolio .icono-proyecto {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        /* --- IMPRESIÓN --- */
        @media print {
            body { background: white; color: black; padding: 0; }
            .btn, .controles { display: none; }
            .tarjeta { border: 1px solid #ccc; background: #fff; }
            .tag { border: 1px solid #ccc; background: #fff; color: #000; }
        }