:root {
    --rojo: #d21828;
    --azul: #073d8a;
    --blanco: #F1FAEE;
    --gris-oscuro: #2D2D2D;
    --degradado-azul-rojo: linear-gradient(to right, var(--azul), var(--rojo)); /* Degradado de azul a rojo de izquierda a derecha */
    --degradado-rojo-azul: linear-gradient(to right, var(--rojo), var(--azul)); /* Degradado de rojo a azul de izquierda a derecha */

    --degradado-rojo: linear-gradient(to right, #d21828, #a1121f);
    --degradado-azul: linear-gradient(to right, #073d8a, #052a5e);
    --degradado-blanco: linear-gradient(to right, #F1FAEE, #d9e4e8);
    --degradado-gris-oscuro: linear-gradient(to right, #2D2D2D, #1f1f1f);
    --fuente-principal: 'Orbitron', sans-serif;
    --fuente-secundaria: 'Inter', sans-serif;

    --gris-claro: #dcdcdc;
    --gris-medio: #6e6e6e;
    --naranja: #f39c12;
    --amarillo-dorado: #f1c40f;
    --celeste: #3498db;
    --verde: #27ae60;
}
/* Botón Portafolio igual de grande que la barra */
.portafolio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px; /* Igual que .tema y .menu-item */
    height: 40px; /* Igual que .tema y .menu-item */
    padding: 0 20px;
    background: var(--degradado-rojo-azul);
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 8px rgba(44,62,80,0.08);
    vertical-align: middle;
    border: 1px solid var(--gris-claro);
}
.portafolio-btn:hover {
    background: var(--degradado-rojo-azul);
    box-shadow: 0 8px 26px rgba(67, 0, 94, 0.15);
}
.gear {
    display: inline-block;
    animation: spin 4s linear infinite;
    margin-right: 10px;
    vertical-align: middle;
    color: var(--azul);
}
.portafolio-btn:hover .gear {
    animation-duration: 1s;
    color: var(--rojo);
}
@keyframes spin {
    100% { transform: rotate(360deg);}
}
.gear-text {
    font-size: 1rem;
    font-weight: bold;
    color: var(--amarillo-dorado);
    letter-spacing: 1px;
    min-width: 80px;
    text-align: left;
    vertical-align: middle;
}