/* ===================================



   PABLO - PORTFOLIO PROFESIONAL



   Diseño moderno, claro, profesional



   =================================== */







/* --- RESET & BASE --- */



*, *::before, *::after {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







:root {



    --bg-primary: #f8fafc;



    --bg-secondary: #f1f5f9;



    --bg-card: #ffffff;



    --bg-card-hover: #f8fafc;



    --text-primary: #1e293b;



    --text-secondary: #475569;



    --text-muted: #94a3b8;



    --accent: #2563eb;



    --accent-light: #3b82f6;



    --accent-glow: rgba(37, 99, 235, 0.1);



    --accent-green: #16a34a;



    --accent-yellow: #ca8a04;



    --accent-red: #dc2626;



    --border: rgba(0, 0, 0, 0.08);



    --border-accent: rgba(37, 99, 235, 0.25);



    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);



    --gradient-bg: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);



    --radius-sm: 8px;



    --radius-md: 12px;



    --radius-lg: 20px;



    --radius-xl: 28px;



    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);



    --shadow-md: 0 8px 32px rgba(0,0,0,0.08);



    --shadow-lg: 0 16px 64px rgba(0,0,0,0.1);



    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;



    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;



    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);



}







/* Accesibilidad: reducir animaciones para usuarios que lo prefieran */

@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}







html {



    scroll-behavior: smooth;



    font-size: 16px;



}







body {



    font-family: var(--font-main);



    background: var(--bg-primary);



    color: var(--text-primary);



    line-height: 1.7;



    -webkit-font-smoothing: antialiased;



    overflow-x: hidden;



}







.container {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 24px;



}







/* --- NAVBAR --- */



.navbar {



    position: fixed;



    top: 0;



    left: 0;



    right: 0;



    z-index: 1000;



    padding: 20px 0;



    transition: var(--transition);



    background: transparent;



}







.navbar.scrolled {



    padding: 12px 0;



    background: rgba(255, 255, 255, 0.85);



    backdrop-filter: blur(20px) saturate(180%);



    -webkit-backdrop-filter: blur(20px) saturate(180%);



    border-bottom: 1px solid var(--border);



    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);



}







.nav-container {



    max-width: 1200px;



    margin: 0 auto;



    padding: 0 24px;



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.nav-logo {



    font-family: var(--font-mono);



    font-size: 1.3rem;



    font-weight: 600;



    text-decoration: none;



    color: var(--text-primary);



    letter-spacing: -0.5px;



}







.logo-bracket {

    color: var(--accent);

}



.logo-text {

    color: var(--text-primary);

}



.logo-suffix {

    color: var(--text-secondary);

    font-weight: 400;

}



.logo-dot {



    color: var(--accent-light);



}







.nav-menu {



    display: flex;



    list-style: none;



    gap: 8px;



}







.nav-link {



    text-decoration: none;



    color: var(--text-secondary);



    font-size: 0.9rem;



    font-weight: 500;



    padding: 8px 16px;



    border-radius: var(--radius-sm);



    transition: var(--transition);



}







.nav-link:hover {



    color: var(--accent);



    background: var(--accent-glow);



}







.nav-link:focus-visible {



    outline: 2px solid var(--accent);



    outline-offset: 2px;



}







.nav-link.active {



    color: var(--text-primary);



    background: var(--accent-glow);



}







.nav-toggle {



    display: none;



    flex-direction: column;



    gap: 5px;



    background: none;



    border: none;



    cursor: pointer;



    padding: 4px;



}







.nav-toggle span {



    width: 24px;



    height: 2px;



    background: var(--text-primary);



    border-radius: 2px;



    transition: var(--transition);



}







.nav-toggle.active span:nth-child(1) {



    transform: rotate(45deg) translate(5px, 5px);



}



.nav-toggle.active span:nth-child(2) {



    opacity: 0;



}



.nav-toggle.active span:nth-child(3) {



    transform: rotate(-45deg) translate(5px, -5px);



}







/* --- HERO SECTION --- */



.hero {



    min-height: 100vh;



    display: flex;



    align-items: center;



    position: relative;



    overflow: hidden;



    padding-top: 80px;



}







.hero-bg-grid {



    position: absolute;



    inset: 0;



    background-image:



        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),



        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);



    background-size: 60px 60px;



    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);



    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 100%);



}







.hero-content {



    position: relative;



    z-index: 2;



}







.hero-badge {



    display: inline-block;



    font-family: var(--font-mono);



    font-size: 0.85rem;



    font-weight: 500;



    color: var(--accent-light);



    background: var(--accent-glow);



    border: 1px solid var(--border-accent);



    padding: 8px 20px;



    border-radius: 50px;



    margin-bottom: 32px;



    letter-spacing: 0.5px;



}







.hero-title {



    font-size: clamp(2.5rem, 6vw, 4.5rem);



    font-weight: 800;



    line-height: 1.1;



    letter-spacing: -2px;



    margin-bottom: 28px;



    color: var(--text-primary);



}







.gradient-text {



    background: var(--gradient-primary);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



}







.hero-subtitle {



    font-size: 1.15rem;



    color: var(--text-secondary);



    max-width: 640px;



    line-height: 1.8;



    margin-bottom: 48px;



}







.hero-stats {



    display: flex;



    gap: 48px;



    margin-bottom: 48px;



}







.stat {



    display: flex;



    flex-direction: column;



}







.stat-number {



    font-size: 2.2rem;



    font-weight: 800;



    color: var(--text-primary);



    letter-spacing: -1px;



    font-family: var(--font-mono);



}







.stat-label {



    font-size: 0.85rem;



    color: var(--text-muted);



    margin-top: 4px;



}







.cta-button {



    display: inline-flex;



    align-items: center;



    gap: 10px;



    padding: 16px 32px;



    background: var(--gradient-primary);



    color: white;



    text-decoration: none;



    font-weight: 600;



    font-size: 1rem;



    border-radius: var(--radius-md);



    transition: var(--transition);



    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);



}







.cta-button:hover {



    transform: translateY(-2px);



    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);



}







.cta-button:focus-visible {



    outline: 3px solid var(--accent);



    outline-offset: 3px;



}







.scroll-indicator {



    position: absolute;



    bottom: 40px;



    left: 50%;



    transform: translateX(-50%);



    opacity: 0.4;



}







.mouse {



    width: 26px;



    height: 40px;



    border: 2px solid var(--text-muted);



    border-radius: 13px;



    display: flex;



    justify-content: center;



    padding-top: 8px;



}







.wheel {



    width: 4px;



    height: 8px;



    background: var(--text-muted);



    border-radius: 2px;



    animation: scroll-wheel 2s infinite;



}







@keyframes scroll-wheel {



    0% { opacity: 1; transform: translateY(0); }



    100% { opacity: 0; transform: translateY(12px); }



}







/* --- SECTIONS COMMON --- */



.section {



    padding: 120px 0;



}







.section-alt {



    background: var(--bg-secondary);



}







.section-header {



    margin-bottom: 64px;



}







.section-tag {



    font-family: var(--font-mono);



    font-size: 0.85rem;



    color: var(--accent-light);



    display: block;



    margin-bottom: 16px;



    letter-spacing: 0.5px;



}







.section-title {



    font-size: clamp(2rem, 4vw, 3rem);



    font-weight: 800;



    line-height: 1.15;



    letter-spacing: -1.5px;



    color: var(--text-primary);



}







/* --- ABOUT SECTION --- */



.about-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 64px;



    align-items: start;



}







.about-lead {



    font-size: 1.2rem;



    font-weight: 500;



    color: var(--text-primary);



    margin-bottom: 24px;



    line-height: 1.7;



}







.about-text p {



    color: var(--text-secondary);



    margin-bottom: 20px;



    font-size: 1rem;



    line-height: 1.8;



}







/* Terminal card */



.terminal-window {



    background: #0d0d14;



    border: 1px solid var(--border);



    border-radius: var(--radius-lg);



    overflow: hidden;



    box-shadow: var(--shadow-lg);



    position: sticky;



    top: 120px;



}







.terminal-header {



    background: rgba(255,255,255,0.03);



    padding: 14px 18px;



    display: flex;



    align-items: center;



    gap: 8px;



    border-bottom: 1px solid var(--border);



}







.terminal-dot {



    width: 12px;



    height: 12px;



    border-radius: 50%;



}







.terminal-dot.red { background: var(--accent-red); }



.terminal-dot.yellow { background: var(--accent-yellow); }



.terminal-dot.green { background: var(--accent-green); }







.terminal-title {



    margin-left: 8px;



    font-family: var(--font-mono);



    font-size: 0.8rem;



    color: var(--text-muted);



}







.terminal-body {



    padding: 24px;



    font-family: var(--font-mono);



    font-size: 0.85rem;



    line-height: 1.8;



    color: var(--text-secondary);



}







.terminal-line {



    color: var(--text-primary);



}







.prompt {



    color: var(--accent-green);



    margin-right: 8px;



}







.t-key {



    color: var(--accent-light);



}







.t-online {



    color: var(--accent-green);



}







/* --- PROJECT SECTION --- */



.project-card-large {



    background: var(--bg-card);



    border: 1px solid var(--border);



    border-radius: var(--radius-xl);



    padding: 48px;



    transition: var(--transition);



}







.project-card-large:hover {



    border-color: var(--border-accent);



    box-shadow: 0 0 60px rgba(99, 102, 241, 0.08);



}







.project-card-header {



    display: flex;



    align-items: center;



    justify-content: space-between;



    margin-bottom: 28px;



}







.project-icon {



    width: 56px;



    height: 56px;



    background: var(--accent-glow);



    border: 1px solid var(--border-accent);



    border-radius: var(--radius-md);



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--accent-light);



}







.project-badge {



    font-family: var(--font-mono);



    font-size: 0.8rem;



    color: var(--accent-green);



    background: rgba(34, 197, 94, 0.1);



    border: 1px solid rgba(34, 197, 94, 0.2);



    padding: 6px 14px;



    border-radius: 50px;



}







.project-title {



    font-size: 1.8rem;



    font-weight: 700;



    margin-bottom: 16px;



    letter-spacing: -0.5px;



}







.project-description {



    color: var(--text-secondary);



    font-size: 1.05rem;



    margin-bottom: 40px;



    max-width: 800px;



    line-height: 1.8;



}







.project-details {



    display: grid;



    grid-template-columns: 1fr;



    gap: 32px;



    margin-bottom: 40px;



}







.project-detail-block {



    padding: 28px;



    background: var(--bg-secondary);



    border: 1px solid var(--border);



    border-radius: var(--radius-md);



    transition: var(--transition);



}







.project-detail-block:hover {



    border-color: var(--border-accent);



    background: rgba(99, 102, 241, 0.03);



}







.project-detail-block h4 {



    font-size: 1.1rem;



    font-weight: 600;



    margin-bottom: 12px;



    color: var(--text-primary);



}







.project-detail-block p {



    color: var(--text-secondary);



    font-size: 0.95rem;



    line-height: 1.8;



}







.project-competencias {



    margin-bottom: 32px;



}







.project-competencias h4 {



    font-size: 1rem;



    font-weight: 600;



    margin-bottom: 20px;



    color: var(--text-primary);



}







.competencias-grid {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 16px;



}







.competencia-item {



    display: flex;



    flex-direction: column;



    gap: 6px;



    padding: 16px 20px;



    background: var(--bg-secondary);



    border: 1px solid var(--border);



    border-radius: var(--radius-sm);



    transition: var(--transition);



}







.competencia-item:hover {



    border-color: var(--border-accent);



}







.comp-code {



    font-family: var(--font-mono);



    font-size: 0.85rem;



    font-weight: 600;



    color: var(--accent-light);



}







.comp-desc {



    font-size: 0.85rem;



    color: var(--text-secondary);



    line-height: 1.5;



}

/* --- RESPONSABILIDADES --- */

.project-responsibilities {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.project-responsibilities h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.responsibilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.responsibility-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.responsibility-item:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}

.resp-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-sm);
    color: var(--accent);
}

.resp-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .responsibilities-grid {
        grid-template-columns: 1fr;
    }
}



.project-tech-stack {



    display: flex;



    flex-wrap: wrap;



    gap: 10px;



}







.tech-tag {



    font-family: var(--font-mono);



    font-size: 0.8rem;



    color: var(--text-secondary);



    background: var(--bg-secondary);



    border: 1px solid var(--border);



    padding: 6px 14px;



    border-radius: 50px;



    transition: var(--transition);



}







.tech-tag:hover {



    color: var(--accent-light);



    border-color: var(--border-accent);



    background: var(--accent-glow);



}







/* --- SKILLS SECTION --- */



.skills-grid {



    display: grid;



    grid-template-columns: repeat(2, 1fr);



    gap: 32px;



}







.skill-category {



    background: var(--bg-card);



    border: 1px solid var(--border);



    border-radius: var(--radius-lg);



    padding: 36px;



    transition: var(--transition);



}







.skill-category:hover {



    border-color: var(--border-accent);



    box-shadow: 0 0 40px rgba(99, 102, 241, 0.06);



}







.skill-cat-icon {



    width: 52px;



    height: 52px;



    background: var(--accent-glow);



    border: 1px solid var(--border-accent);



    border-radius: var(--radius-md);



    display: flex;



    align-items: center;



    justify-content: center;



    color: var(--accent-light);



    margin-bottom: 20px;



}







.skill-category h3 {



    font-size: 1.15rem;



    font-weight: 700;



    margin-bottom: 24px;



    letter-spacing: -0.3px;



}



/* Nuevo diseño de tarjetas de competencias */

.skill-card-new {

    min-height: 280px;

}



.skill-description {

    font-size: 0.95rem;

    color: var(--text-secondary);

    line-height: 1.75;

    margin-top: 8px;

}



/* Mantener compatibilidad con diseño anterior */

.skill-list {



    list-style: none;



    display: flex;



    flex-direction: column;



    gap: 18px;



}







.skill-list li {



    display: flex;



    flex-direction: column;



    gap: 8px;



}







.skill-name {



    font-size: 0.9rem;



    color: var(--text-secondary);



    font-weight: 500;



}







.skill-bar {



    display: none; /* Ocultamos las barras */

    width: 100%;



    height: 6px;



    background: rgba(0,0,0,0.05);



    border-radius: 3px;



    overflow: hidden;



}







.skill-fill {



    height: 100%;



    background: var(--gradient-primary);



    border-radius: 3px;



    width: 0%;



    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);



}







.skill-fill.animated {



    /* width set inline */



}







/* --- ROADMAP SECTION --- */



.roadmap-container {



    position: relative;



    max-width: 720px;



    margin: 0 auto;



}







.roadmap-line {



    position: absolute;



    left: 24px;



    top: 0;



    bottom: 0;



    width: 2px;



    background: linear-gradient(180deg, var(--accent) 0%, var(--border) 100%);



}







.roadmap-item {



    display: flex;



    gap: 32px;



    padding-bottom: 48px;



    position: relative;



}







.roadmap-item:last-child {



    padding-bottom: 0;



}







.roadmap-marker {



    flex-shrink: 0;



    width: 50px;



    height: 50px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    position: relative;



    z-index: 2;



}







.roadmap-item.completed .roadmap-marker {



    background: var(--accent);



    color: white;



    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);



}







.roadmap-item.active .roadmap-marker {



    background: var(--bg-card);



    border: 2px solid var(--accent);



}







.roadmap-item.future .roadmap-marker {



    background: var(--bg-card);



    border: 2px solid var(--border);



}







.pulse-dot {



    width: 14px;



    height: 14px;



    background: var(--accent);



    border-radius: 50%;



    animation: pulse 2s infinite;



}







@keyframes pulse {



    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }



    50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }



}







.future-dot {



    width: 10px;



    height: 10px;



    background: var(--text-muted);



    border-radius: 50%;



}







.roadmap-content {



    flex: 1;



    padding-top: 4px;



}







.roadmap-status {



    font-family: var(--font-mono);



    font-size: 0.75rem;



    font-weight: 600;



    text-transform: uppercase;



    letter-spacing: 1px;



    color: var(--accent-green);



    display: block;



    margin-bottom: 8px;



}







.roadmap-status.in-progress {



    color: var(--accent);



}







.roadmap-status.upcoming {



    color: var(--text-muted);



}







.roadmap-content h3 {



    font-size: 1.2rem;



    font-weight: 700;



    margin-bottom: 10px;



    letter-spacing: -0.3px;



}







.roadmap-content p {



    color: var(--text-secondary);



    font-size: 0.95rem;



    line-height: 1.7;



}







/* --- CONTACT SECTION --- */



.contact-content {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 64px;



    align-items: start;



}







.contact-lead {



    font-size: 1.15rem;



    font-weight: 500;



    color: var(--text-primary);



    margin-bottom: 20px;



    line-height: 1.7;



}







.contact-text p {



    color: var(--text-secondary);



    margin-bottom: 18px;



    line-height: 1.8;



}



.contact-email {

    margin-top: 32px;

}



.email-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    font-family: var(--font-mono);

    font-size: 1.1rem;

    font-weight: 500;

    color: var(--accent-light);

    text-decoration: none;

    padding: 16px 28px;

    background: var(--accent-glow);

    border: 1px solid var(--border-accent);

    border-radius: var(--radius-md);

    transition: var(--transition);

}



.email-link:hover {

    background: rgba(99, 102, 241, 0.25);

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);

}



.email-link:focus-visible {

    outline: 2px solid var(--accent);

    outline-offset: 3px;

}



.email-link svg {

    color: var(--accent);

}



.contact-card {



    background: var(--bg-card);



    border: 1px solid var(--border);



    border-radius: var(--radius-lg);



    padding: 36px;



    display: flex;



    flex-direction: column;



    gap: 28px;



}







.contact-info-item {



    display: flex;



    align-items: center;



    gap: 18px;



    color: var(--accent-light);



}







.contact-info-item div {



    display: flex;



    flex-direction: column;



}







.contact-label {



    font-size: 0.8rem;



    color: var(--text-muted);



    font-weight: 500;



    text-transform: uppercase;



    letter-spacing: 0.5px;



}







.contact-value {



    font-size: 1rem;



    color: var(--text-primary);



    font-weight: 500;



    margin-top: 2px;



}







/* --- FOOTER --- */



.footer {



    padding: 48px 0;



    border-top: 1px solid var(--border);



    background: var(--bg-primary);



}







.footer-content {



    text-align: center;



}







.footer-logo {



    font-family: var(--font-mono);



    font-size: 1.2rem;



    font-weight: 600;



    margin-bottom: 16px;



    color: var(--text-primary);



}







.footer-text {



    font-size: 0.9rem;



    color: var(--text-muted);



    margin-bottom: 12px;



    line-height: 1.6;



}







.footer-email {



    margin: 16px 0;



}







.footer-email a {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    color: var(--accent);



    text-decoration: none;



    font-size: 0.9rem;



    font-family: var(--font-mono);



    transition: var(--transition);



}







.footer-email a:hover {



    color: var(--accent-light);



    transform: translateX(2px);



}







.footer-email svg {



    opacity: 0.7;



}







.footer-copy {



    font-size: 0.8rem;



    color: var(--text-muted);



    opacity: 0.6;



}







/* --- ANIMATIONS --- */



.fade-in {



    opacity: 0;



    transform: translateY(30px);



    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),



                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);



}







.fade-in.visible {



    opacity: 1;



    transform: translateY(0);



}







/* --- RESPONSIVE --- */



@media (max-width: 968px) {



    .about-grid {



        grid-template-columns: 1fr;



        gap: 40px;



    }







    .terminal-window {



        position: static;



    }







    .skills-grid {



        grid-template-columns: 1fr;



    }







    .competencias-grid {



        grid-template-columns: 1fr;



    }







    .contact-content {



        grid-template-columns: 1fr;



        gap: 40px;



    }







    .project-card-large {



        padding: 32px;



    }



}







@media (max-width: 768px) {



    .nav-menu {



        position: fixed;



        top: 0;



        right: -100%;



        width: 280px;



        height: 100vh;



        background: rgba(255, 255, 255, 0.98);



        backdrop-filter: blur(20px) saturate(180%);



        -webkit-backdrop-filter: blur(20px) saturate(180%);



        flex-direction: column;



        padding: 100px 32px 32px;



        transition: right var(--transition);



        border-left: 1px solid var(--border);



        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);



    }







    .nav-menu.active {



        right: 0;



    }







    .nav-toggle {



        display: flex;



        z-index: 1001;



    }







    .hero-title {



        letter-spacing: -1px;



    }







    .hero-stats {



        gap: 32px;



        flex-wrap: wrap;



    }







    .stat-number {



        font-size: 1.8rem;



    }







    .section {



        padding: 80px 0;



    }







    .project-card-large {



        padding: 24px;



    }







    .project-title {



        font-size: 1.4rem;



    }







    .project-detail-block {



        padding: 20px;



    }







    .skill-category {



        padding: 28px;



    }







    .roadmap-item {



        gap: 20px;



    }







    .roadmap-marker {



        width: 42px;



        height: 42px;



    }







    .roadmap-line {



        left: 20px;



    }



}







@media (max-width: 480px) {



    .container {



        padding: 0 16px;



    }







    .hero-badge {



        font-size: 0.75rem;



    }







    .hero-stats {



        gap: 24px;



    }







    .cta-button {



        width: 100%;



        justify-content: center;



    }







    .contact-card {



        padding: 24px;



    }



}







/* --- SELECTION --- */



::selection {



    background: rgba(99, 102, 241, 0.3);



    color: white;



}







/* --- SCROLLBAR --- */



::-webkit-scrollbar {



    width: 8px;



}







::-webkit-scrollbar-track {



    background: var(--bg-secondary);



}







::-webkit-scrollbar-thumb {



    background: rgba(0,0,0,0.15);



    border-radius: 4px;



}







::-webkit-scrollbar-thumb:hover {



    background: rgba(0,0,0,0.25);