/**
 * Design tokens — Fase 2 (hig-00…03)
 * Base semántica para migración gradual desde legacy.
 */
:root {
    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-large-title: clamp(2.8rem, 4vw, 4.8rem);
    --text-title-1: clamp(2.4rem, 3vw, 3.6rem);
    --text-title-2: clamp(2rem, 2.5vw, 2.8rem);
    --text-title-3: clamp(1.8rem, 2vw, 2.2rem);
    --text-body: clamp(1.6rem, 1.5vw, 1.9rem);
    --text-callout: 1.7rem;
    --text-caption: 1.3rem;

    /* Spacing (8pt grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Semantic colors — acento desde styles/themes/accent-*.css */
    --label: rgba(255, 255, 255, 0.92);
    --secondary-label: rgba(255, 255, 255, 0.62);
    --tertiary-label: rgba(255, 255, 255, 0.42);
    --system-background: #12171a;
    --secondary-system-background: rgba(255, 255, 255, 0.06);
    --separator: rgba(255, 255, 255, 0.12);
    --accent: var(--color_variable_1);
    --accent-secondary: var(--color_variable_2);
    --accent-tertiary: var(--color_variable_3);
    --accent-soft: var(--color_variable_4);
    --tech-icon-filter: invert(1);
    --brand-icon-filter: none;

    /* Chrome */
    --nav-height: 64px;
    --nav-blur: 20px;
    --material-shadow: 0 1px 0 var(--separator);

    /* Layer stack */
    --z-contact: 1100;
    --z-sheet: 1200;
    --z-lightbox: 1300;
    --z-mobile-nav: 1500;

    /* Motion (hig-04) */
    --duration-fast: 0.15s;
    --duration-normal: 0.32s;
    --duration-slow: 0.48s;
    --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-theme="light"] {
    --label: rgba(0, 0, 0, 0.88);
    --secondary-label: rgba(0, 0, 0, 0.55);
    --tertiary-label: rgba(0, 0, 0, 0.35);
    --system-background: #f2f2f7;
    --secondary-system-background: rgba(255, 255, 255, 0.92);
    --separator: rgba(0, 0, 0, 0.12);
    --tech-icon-filter: none;
    --brand-icon-filter: invert(1);
}

[data-theme="dark"] {
    --label: rgba(255, 255, 255, 0.92);
    --secondary-label: rgba(255, 255, 255, 0.62);
    --tertiary-label: rgba(255, 255, 255, 0.42);
    --system-background: #12171a;
    --secondary-system-background: rgba(255, 255, 255, 0.06);
    --separator: rgba(255, 255, 255, 0.12);
    --tech-icon-filter: invert(1);
    --brand-icon-filter: none;
}

html.text-large {
    font-size: 112.5%;
}

html.text-large {
    --text-body: clamp(1.8rem, 1.6vw, 2.1rem);
    --text-callout: 1.9rem;
    --text-caption: 1.45rem;
}

html {
    font-family: var(--font-sans);
}

.navbar {
    min-height: var(--nav-height) !important;
    backdrop-filter: blur(var(--nav-blur));
    -webkit-backdrop-filter: blur(var(--nav-blur));
    border-bottom: 0.5px solid var(--separator);
    box-shadow: var(--material-shadow) !important;
}

.staticNavContainer {
    height: var(--nav-height);
}

.navbar-options-txt-active {
    background-color: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-radius: var(--radius-pill) !important;
}

.navbar-options-txt-active a,
.navbar-options-txt-active span {
    color: var(--label) !important;
    font-weight: 600;
}

.footerContainer_content {
    min-height: auto !important;
    height: auto !important;
    padding: var(--space-6) var(--space-7) !important;
}

.footerContainer .footer-tagline {
    font-size: var(--text-caption);
    opacity: 0.75;
    max-width: 280px;
    line-height: 1.4;
}

.aboutContainer_skills-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-5);
    padding: var(--space-6) 10%;
    align-items: start;
}

@media screen and (max-width: 1100px) {
    .aboutContainer_skills-inner {
        grid-template-columns: 1fr;
        padding: var(--space-5) var(--space-4);
    }
}

.aboutCardsPanel {
    min-height: 200px;
}

.aboutContainer_proyectos--static .aboutContainer_proyectos_static {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-7) var(--space-4);
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.aboutContainer_proyectos--static .aboutContainer_proyectos_static p {
    margin: 0;
    line-height: 1.6;
}

.projectCaseStudy {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--secondary-system-background);
    border: 0.5px solid var(--separator);
}

.projectCaseStudy_impact {
    font-size: var(--text-title-3);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.projectCaseStudy_role {
    font-size: var(--text-callout);
    opacity: 0.85;
    margin-bottom: var(--space-3);
}

.projectCaseStudy ul {
    margin: 0;
    padding-left: var(--space-4);
}

.projectCaseStudy li {
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.projectView_ctaLinkedIn {
    display: flex;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
    width: 100%;
}

/* ── Project Hero banner ────────────────────────── */
.projectHeader--hig {
    position: relative;
    overflow: hidden;
}

.projectHero_bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0.22;
    transition: opacity var(--duration-slow) ease;
}

.projectHeader--hig::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to bottom, transparent, var(--system-background));
    z-index: 1;
    pointer-events: none;
}

.projectHeader--hig .projectHeader_compact {
    position: relative;
    z-index: 2;
}

/* Larger icon in no-demo view */
.projectView--noDemo .projectHeader_icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
}

/* Status + action row */
.projectHeader_tags {
    margin-top: var(--space-2) !important;
}

.projectHeader_actions {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.projectHeader_cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-caption);
    text-decoration: none;
}

/* Status tag variant */
.tag--status {
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
    color: var(--accent) !important;
}

.tag--status .categorieTitle {
    color: var(--accent) !important;
}

/* ── Screenshots — taller ───────────────────────── */
.projectScreenshots_item img {
    height: 220px !important;
    object-fit: cover;
}


/* ── Unified metadata card ──────────────────────── */
.projectMeta_card {
    margin: 0 var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--separator);
    background: var(--secondary-system-background);
    overflow: hidden;
}

.projectMeta_row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 0.5px solid var(--separator);
}

.projectMeta_row:last-child {
    border-bottom: none;
}

.projectMeta_label {
    font-size: var(--text-caption);
    color: var(--secondary-label);
    font-weight: 500;
    line-height: 1.4;
}

.projectMeta_value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Team / external links section */
.projectMeta_links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
}

.projectMeta_link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--separator);
    background: var(--secondary-system-background);
    color: var(--accent);
    text-decoration: none;
    font-size: var(--text-caption);
    transition: opacity var(--duration-fast) ease;
    word-break: break-all;
}

.projectMeta_link:hover {
    opacity: 0.75;
}

/* Sidebar metadata container reset for new layout */
.projectSidebar_metadata {
    padding-top: 0 !important;
}