/* ═══════════════════════════════════════════════════════
   SHARED.CSS — Marlon Cardona · Portfolio
   ─────────────────────────────────────────────────────
   ARQUIVO GERADO AUTOMATICAMENTE.
   Não edite este arquivo diretamente.
   Edite os arquivos source em src/css/ e rode:
       node scripts/build-css.js
   ─────────────────────────────────────────────────────
   Build: 2026-02-23T12:46:28.096Z
   ═══════════════════════════════════════════════════════ */

/* @layer order — deve ser o primeiro @layer do documento */
@layer tokens, reset, base, animations, layout, components, pages, utilities;


/* ─── src/css/tokens/colors.css ─── */
/* ═══════════════════════════════════════════════════════
   COLOR TOKENS — Primitivos + Semânticos
   ═══════════════════════════════════════════════════════

   REGRA: Componentes NUNCA referenciam primitivos diretamente.
   Use sempre os tokens semânticos (--bg, --text-*, --accent, --border).
   ═══════════════════════════════════════════════════════ */

@layer tokens {
  :root {

    /* ─── PRIMITIVOS ─────────────────────────────────── */

    /* Brown scale (fundo principal do portfolio) */
    --color-brown-950: #0a0400;
    --color-brown-900: #120800;
    --color-brown-800: #1f0d0a;
    --color-brown-700: #241510;
    --color-brown-600: #2e1a14;

    /* Warm neutrals */
    --color-warm-100: #faf3f0;
    --color-warm-200: #f0e6e0;
    --color-warm-500: #a39490;
    --color-warm-700: #5a3530;
    --color-warm-900: #1a0a08;

    /* Red / Coral (accent principal) */
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;

    /* Brancos & alphas */
    --color-white:    #ffffff;
    --color-white-60: rgba(255,255,255,0.6);
    --color-white-40: rgba(255,255,255,0.4);
    --color-white-20: rgba(255,255,255,0.2);
    --color-white-12: rgba(255,255,255,0.12);
    --color-white-08: rgba(255,255,255,0.08);
    --color-white-06: rgba(255,255,255,0.06);
    --color-white-04: rgba(255,255,255,0.04);

    /* Red alphas (para hover, glow, borders) */
    --color-red-30:  rgba(248,113,113,0.30);
    --color-red-25:  rgba(248,113,113,0.25);
    --color-red-20:  rgba(248,113,113,0.20);
    --color-red-15:  rgba(248,113,113,0.15);
    --color-red-12:  rgba(248,113,113,0.12);
    --color-red-10:  rgba(248,113,113,0.10);
    --color-red-08:  rgba(248,113,113,0.08);
    --color-red-06:  rgba(248,113,113,0.06);
    --color-red-04:  rgba(248,113,113,0.04);

    /* ─── SEMÂNTICOS — BACKGROUND ─────────────────────── */

    --bg:          var(--color-brown-900);   /* Fundo principal */
    --bg-card:     var(--color-brown-800);   /* Cards, inputs */
    --bg-surface:  var(--color-brown-700);   /* Seções alternadas */
    --bg-elevated: var(--color-brown-600);   /* Elementos elevados */
    --bg-showcase: var(--color-warm-100);    /* Área de mockup claro */

    /* Nav backgrounds (alphas específicos para glassmorphism) */
    --bg-nav:         rgba(28,8,4,0.92);
    --bg-nav-section: rgba(28,8,4,0.96);

    /* ─── SEMÂNTICOS — TEXTO ───────────────────────────── */

    --text-primary:      var(--color-white);       /* Texto principal */
    --text-secondary:    var(--color-warm-500);    /* Texto secundário */
    --text-muted:        var(--color-white-40);    /* Texto reduzido */
    --text-inverse:      var(--color-warm-900);    /* Texto em bg claro */
    --text-inverse-muted: var(--color-warm-700);   /* Texto secundário em bg claro */

    /* ─── SEMÂNTICOS — ACCENT ─────────────────────────── */

    --accent:        var(--color-red-400);   /* Cor de destaque */
    --accent-hover:  var(--color-red-300);   /* Hover do accent */
    --accent-dim:    var(--color-red-12);    /* Fundo accent sutil */
    --accent-border: var(--color-red-20);    /* Border accent */
    --accent-glow:   var(--color-red-15);    /* Glow/shadow accent */

    /* ─── SEMÂNTICOS — BORDERS ────────────────────────── */

    --border:        var(--color-white-08);  /* Border padrão */
    --border-hover:  var(--color-white-12);  /* Border hover */
    --border-accent: var(--color-red-20);    /* Border com accent */
    --border-strong: var(--color-white-20);  /* Border mais visível */

    /* ─── SELECTION ───────────────────────────────────── */

    --selection-bg: var(--color-red-30);
  }
}

/* ─── src/css/tokens/typography.css ─── */
/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY TOKENS — Famílias, Escala, Pesos, Espaçamentos
   ═══════════════════════════════════════════════════════ */

@layer tokens {
  :root {

    /* ─── FONT FAMILIES ──────────────────────────────── */

    --font-mono: 'Space Mono', 'Courier New', monospace;
    --font-sans: 'Inter Tight', 'Inter', system-ui, sans-serif;

    /* Aliases para compatibilidade com código existente */
    --mono: var(--font-mono);
    --sans: var(--font-sans);

    /* ─── FONT SIZE SCALE (base 16px / 1rem) ─────────── */

    --text-xs:   0.625rem;   /* 10px — labels micro, tags */
    --text-sm:   0.6875rem;  /* 11px — labels, captions */
    --text-md:   0.75rem;    /* 12px — navegação, footer */
    --text-base: 0.8125rem;  /* 13px — corpo secundário */
    --text-lg:   0.875rem;   /* 14px — corpo, descrições */
    --text-xl:   1rem;       /* 16px — corpo principal */
    --text-2xl:  1.125rem;   /* 18px — tagline, lead */
    --text-3xl:  1.25rem;    /* 20px — títulos de card */
    --text-4xl:  1.5rem;     /* 24px — subtítulos */
    --text-5xl:  1.75rem;    /* 28px — títulos secundários */
    --text-6xl:  2rem;       /* 32px — section title mobile */
    --text-7xl:  2.5rem;     /* 40px — stat numbers */
    --text-8xl:  2.75rem;    /* 44px — section title */
    --text-9xl:  3.25rem;    /* 52px — hero (projeto) */
    --text-10xl: 4rem;       /* 64px — hero (home) */

    /* ─── FONT WEIGHT ────────────────────────────────── */

    --font-light:   300;
    --font-regular: 400;
    --font-medium:  500;
    --font-bold:    700;

    /* ─── LINE HEIGHT ────────────────────────────────── */

    --leading-none:    1;
    --leading-tight:   1.05;
    --leading-snug:    1.1;
    --leading-heading: 1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;
    --leading-loose:   1.65;
    --leading-extra:   1.75;
    --leading-spacious: 1.9;

    /* ─── LETTER SPACING ──────────────────────────────── */

    --tracking-tighter: -0.04em;   /* Hero títulos grandes */
    --tracking-tight:   -0.03em;   /* Section titles */
    --tracking-snug:    -0.02em;   /* Cards, nav logo */
    --tracking-normal:   0em;      /* Corpo */
    --tracking-wide:     0.06em;   /* Subtítulos mono */
    --tracking-wider:    0.08em;   /* Tags */
    --tracking-widest:   0.1em;    /* Labels uppercase */
    --tracking-ultra:    0.12em;   /* Showcase labels */
  }
}

/* ─── src/css/tokens/spacing.css ─── */
/* ═══════════════════════════════════════════════════════
   SPACING TOKENS — Escala base 4px + Aliases semânticos
   ═══════════════════════════════════════════════════════

   Escala t-shirt → step multiplier:
   1  →  4px   |  5  →  20px  |  12 →  48px  |  32 → 128px
   2  →  8px   |  6  →  24px  |  14 →  56px  |  36 → 144px
   3  → 12px   |  7  →  28px  |  16 →  64px  |  40 → 160px
   4  → 16px   |  8  →  32px  |  20 →  80px  |  48 → 192px
               |  9  →  36px  |  24 →  96px  |
               | 10  →  40px  |  28 → 112px  |
   ═══════════════════════════════════════════════════════ */

@layer tokens {
  :root {

    /* ─── ESCALA BASE ─────────────────────────────────── */

    --space-0:  0;
    --space-px: 1px;
    --space-1:  0.25rem;    /*   4px */
    --space-2:  0.5rem;     /*   8px */
    --space-3:  0.75rem;    /*  12px */
    --space-4:  1rem;       /*  16px */
    --space-5:  1.25rem;    /*  20px */
    --space-6:  1.5rem;     /*  24px */
    --space-7:  1.75rem;    /*  28px */
    --space-8:  2rem;       /*  32px */
    --space-9:  2.25rem;    /*  36px */
    --space-10: 2.5rem;     /*  40px */
    --space-12: 3rem;       /*  48px */
    --space-14: 3.5rem;     /*  56px */
    --space-16: 4rem;       /*  64px */
    --space-20: 5rem;       /*  80px */
    --space-24: 6rem;       /*  96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */
    --space-36: 9rem;       /* 144px */
    --space-40: 10rem;      /* 160px */
    --space-44: 11rem;      /* 176px */
    --space-48: 12rem;      /* 192px */
    --space-52: 13rem;      /* 208px */

    /* ─── ALIASES SEMÂNTICOS ──────────────────────────── */

    /* Layout & container */
    --container-max:     68.75rem;           /* 1100px — max-width do container */
    --container-px:      var(--space-16);    /*  64px — padding horizontal desktop */
    --container-px-md:   var(--space-6);     /*  24px — padding horizontal mobile */

    /* Hero padding */
    --hero-pt-xl: 12.5rem;   /* 200px — padding-top hero home/sobre */
    --hero-pt-lg: 11.25rem;  /* 180px — padding-top hero projeto */
    --hero-pt-md: 10rem;     /* 160px — padding-top hero mobile md */
    --hero-pt-sm: 8.75rem;   /* 140px — padding-top hero mobile sm */
    --hero-pb-xl: var(--space-40);  /* 160px — padding-bottom hero */
    --hero-pb-lg: var(--space-32);  /* 128px — padding-bottom hero */
    --hero-pb-md: var(--space-20);  /*  80px — padding-bottom hero mobile */

    /* Section padding */
    --section-y:    var(--space-32);   /* 128px — padding vertical seção padrão */
    --section-y-sm: var(--space-20);   /*  80px — padding vertical mobile */

    /* Card & component spacing */
    --card-p:    var(--space-7);    /* 28px — padding interno de cards */
    --card-p-sm: var(--space-6);    /* 24px — padding card compacto */

    /* Gap scale */
    --gap-xs: var(--space-2);    /*  8px — gap micro */
    --gap-sm: var(--space-4);    /* 16px — gap pequeno */
    --gap-md: var(--space-8);    /* 32px — gap médio */
    --gap-lg: var(--space-20);   /* 80px — gap grande (hero 2-col) */
  }
}

/* ─── src/css/tokens/effects.css ─── */
/* ═══════════════════════════════════════════════════════
   EFFECTS TOKENS — Radius, Shadows, Motion, Z-index
   ═══════════════════════════════════════════════════════ */

@layer tokens {
  :root {

    /* ─── BORDER RADIUS ──────────────────────────────── */

    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   10px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-3xl:  32px;
    --radius-full: 9999px;

    /* Alias para compatibilidade com código existente */
    --radius: var(--radius-xl);

    /* ─── SHADOWS ─────────────────────────────────────── */

    --shadow-xs:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.6);
    --shadow-xl:     0 16px 64px rgba(0,0,0,0.7);
    --shadow-card:   0 8px 32px rgba(26,10,8,0.12);  /* Sombra warm para mockups */
    --shadow-hover:  0 12px 40px var(--color-red-06); /* Card hover com accent */
    --shadow-accent: 0 0 0 2px var(--accent-dim),
                     0 0 24px var(--color-red-10);   /* Foco/glow de accent */
    --shadow-glow:   0 0 40px var(--color-red-15);   /* Glow hero */

    /* ─── MOTION — DURATIONS ─────────────────────────── */

    --duration-instant: 75ms;
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;
    --duration-page:    800ms;

    /* ─── MOTION — EASINGS ───────────────────────────── */

    --ease-linear:   linear;
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* Spring / bounce */
    --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ─── MOTION — TRANSITIONS COMPOSTAS ────────────── */

    --transition-fast:      all var(--duration-fast)   var(--ease-out);
    --transition-normal:    all var(--duration-normal) var(--ease-out);
    --transition-colors:    color                var(--duration-fast) var(--ease-out),
                            background-color     var(--duration-fast) var(--ease-out),
                            border-color         var(--duration-fast) var(--ease-out);
    --transition-border:    border-color var(--duration-fast) var(--ease-out);
    --transition-transform: transform    var(--duration-normal) var(--ease-spring);
    --transition-opacity:   opacity      var(--duration-normal) var(--ease-out);

    /* ─── Z-INDEX SCALE ──────────────────────────────── */

    --z-behind:  -1;   /* Elementos atrás do flow */
    --z-base:     0;
    --z-above:    10;  /* Elementos acima do contexto */
    --z-dropdown: 50;
    --z-sticky:   100; /* Headers sticky */
    --z-nav:      200; /* Navegação principal */
    --z-overlay:  300; /* Overlays, backdrops */
    --z-modal:    400; /* Modais */
    --z-toast:    500; /* Notificações */

    /* Valores especiais do projeto */
    --z-noise:    1;      /* Noise texture overlay */
    --z-progress: 9997;   /* Scroll progress bar */
  }

  /* ─── PREFERS REDUCED MOTION ─────────────────────────
     Zera todas as durations respeitando preferência do SO.
     Mantém easings intactos (não afetam layout).
  ───────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-instant: 0ms;
      --duration-fast:    0ms;
      --duration-normal:  0ms;
      --duration-slow:    0ms;
      --duration-slower:  0ms;
      --duration-page:    0ms;
    }
  }
}

/* ─── src/css/base/reset.css ─── */
/* ═══════════════════════════════════════════════════════
   RESET & BASE — Normalization, body, seleção, noise, hr
   ═══════════════════════════════════════════════════════ */

@layer reset {

  /* ─── BOX SIZING & MARGEM ZERO ───────────────────── */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  /* ─── BODY ───────────────────────────────────────── */
  body {
    background:              var(--bg);
    color:                   var(--text-primary);
    font-family:             var(--font-sans);
    font-size:               var(--text-xl);
    line-height:             var(--leading-relaxed);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ─── ELEMENTS ───────────────────────────────────── */
  img, svg { display: block; max-width: 100%; }
  a        { color: inherit; }

  /* ─── NOISE TEXTURE OVERLAY ──────────────────────── */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: var(--z-noise);
  }

  /* ─── TEXT SELECTION ─────────────────────────────── */
  ::selection {
    background: var(--selection-bg);
    color:      var(--text-primary);
  }

  /* ─── DIVIDER ─────────────────────────────────────── */
  hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-strong), transparent);
    margin: 0;
  }
}

/* ─── src/css/base/animations.css ─── */
/* ═══════════════════════════════════════════════════════
   ANIMATIONS — @keyframes + utilitários de animação
   ═══════════════════════════════════════════════════════ */

@layer base {

  /* ─── KEYFRAMES ───────────────────────────────────── */

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

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

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
  }

  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
  }

  /* ─── ANIMATION UTILITIES ────────────────────────── */
  /* Aplicados em conjunto com CSS animation shorthand  */

  .anim-fade-up {
    animation: fadeUp var(--duration-slow) var(--ease-out) both;
  }

  .anim-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out) both;
  }

  /* Delays escalonados para entrada de múltiplos elementos */
  .anim-delay-1 { animation-delay: 0.05s; }
  .anim-delay-2 { animation-delay: 0.10s; }
  .anim-delay-3 { animation-delay: 0.15s; }
  .anim-delay-4 { animation-delay: 0.20s; }
  .anim-delay-5 { animation-delay: 0.25s; }
}

/* ─── src/css/layout/container.css ─── */
/* ═══════════════════════════════════════════════════════
   LAYOUT — Container, seções alternadas
   ═══════════════════════════════════════════════════════ */

@layer layout {

  /* ─── CONTAINER ───────────────────────────────────── */
  .container {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-px);
  }

  /* ─── ALT SECTION BACKGROUND ─────────────────────── */
  section.alt {
    background: var(--bg-surface);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .container {
      padding: 0 var(--container-px-md);
    }
  }
}

/* ─── src/css/components/nav.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Navigation — Main nav + Scroll Progress
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── SCROLL PROGRESS BAR ─────────────────────────── */
  .scroll-progress {
    position:   fixed;
    top:        0;
    left:       0;
    height:     2px;
    width:      0%;
    background: var(--accent);
    z-index:    var(--z-progress);
    transition: width 0.1s var(--ease-linear);
  }

  /* ─── MAIN NAVIGATION ────────────────────────────── */
  body > nav {
    position:        fixed;
    top:             var(--space-6);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         var(--z-nav);
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    background:      var(--bg-nav);
    backdrop-filter: blur(20px);
    border:          1px solid var(--border);
    border-radius:   var(--radius-full);
    padding:         10px var(--space-5);
    white-space:     nowrap;
  }

  body > nav .logo {
    font-family:     var(--font-mono);
    font-size:       var(--text-md);
    font-weight:     var(--font-bold);
    color:           var(--text-primary);
    text-decoration: none;
    margin-right:    var(--space-4);
    letter-spacing:  var(--tracking-snug);
  }

  body > nav a {
    font-family:     var(--font-mono);
    font-size:       var(--text-md);
    color:           var(--text-secondary);
    text-decoration: none;
    padding:         6px var(--space-4);
    border-radius:   var(--radius-full);
    transition:      var(--transition-colors);
  }

  body > nav a:hover {
    color:      var(--text-primary);
    background: var(--color-white-06);
  }

  body > nav a.active {
    background:  var(--text-primary);
    color:       var(--bg);
    font-weight: var(--font-bold);
  }

  /* ─── SECTION NAV (project pages) ───────────────── */
  .section-nav {
    position:        fixed;
    bottom:          var(--space-7);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         var(--z-nav);
    transition:      opacity var(--duration-base) var(--ease-out);
    display:         flex;
    align-items:     center;
    gap:             var(--space-1);
    background:      var(--bg-nav-section);
    backdrop-filter: blur(20px);
    border:          1px solid var(--border);
    border-radius:   var(--radius-full);
    padding:         var(--space-2) var(--space-3);
  }

  .section-nav a {
    font-family:     var(--font-mono);
    font-size:       var(--text-sm);
    color:           var(--text-secondary);
    text-decoration: none;
    padding:         6px var(--space-4);
    border-radius:   var(--radius-full);
    transition:      var(--transition-colors);
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
  }

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

  .section-nav a.active {
    background:  var(--text-primary);
    color:       var(--bg);
    font-weight: var(--font-bold);
  }

  .section-nav .dot {
    width:         5px;
    height:        5px;
    border-radius: var(--radius-full);
    background:    currentColor;
    opacity:       0.5;
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    body > nav {
      top:     var(--space-4);
      padding: var(--space-2) var(--space-4);
      gap:     var(--space-1);
    }

    body > nav .logo { margin-right: var(--space-2); }

    body > nav a {
      padding:   5px var(--space-3);
      font-size: var(--text-sm);
    }

    .section-nav {
      bottom:  var(--space-4);
      padding: 6px var(--space-2);
      gap:     var(--space-px);
    }

    .section-nav a {
      padding:   5px var(--space-3);
      font-size: var(--text-xs);
    }
  }

  @media (max-width: 480px) {
    body > nav .logo { display: none; }
    .section-nav .dot { display: none; }
  }
}

/* ─── src/css/components/footer.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Footer
   ═══════════════════════════════════════════════════════ */

@layer components {

  footer {
    padding:    var(--space-16) 0;
    border-top: 1px solid var(--border);
  }

  .footer-inner {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
  }

  .footer-name {
    font-family: var(--font-mono);
    font-size:   var(--text-base);
    color:       var(--text-secondary);
  }

  .footer-nav {
    display: flex;
    gap:     var(--space-8);
  }

  .footer-nav a {
    font-family:     var(--font-mono);
    font-size:       var(--text-md);
    color:           var(--text-secondary);
    text-decoration: none;
    transition:      color var(--duration-fast) var(--ease-out);
  }

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

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .footer-inner {
      flex-direction: column;
      gap:            var(--space-5);
      text-align:     center;
    }

    .footer-nav { gap: var(--space-5); }
  }
}

/* ─── src/css/components/project-list.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Project List — cards da página index
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── PROJECT CARD (linha da lista) ─────────────── */
  .project-card {
    display:         grid;
    grid-template-columns: 80px 1fr auto;
    gap:             var(--space-8);
    align-items:     center;
    padding:         var(--space-7) 0;
    border-bottom:   1px solid var(--border);
    text-decoration: none;
    color:           inherit;
    position:        relative;
  }

  .project-card::after {
    content:    '→';
    font-family: var(--font-mono);
    font-size:  var(--text-xl);
    color:      var(--text-muted);
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-spring);
    flex-shrink: 0;
  }

  .project-card:hover::after {
    color:     var(--text-primary);
    transform: translateX(4px);
  }

  .project-card:hover .project-name  { color: var(--text-primary); }
  .project-card:hover .project-thumb { border-color: var(--color-red-20); }
  .project-card:hover .tag           {
    border-color: var(--color-red-20);
    color:        var(--text-secondary);
  }

  /* ─── THUMBNAIL ───────────────────────────────────── */
  .project-thumb {
    width:         80px;
    height:        56px;
    border-radius: var(--radius-md);
    border:        1px solid var(--border);
    overflow:      hidden;
    flex-shrink:   0;
    position:      relative;
    background:    var(--bg-card);
    transition:    border-color var(--duration-fast) var(--ease-out);
  }

  .thumb-lines {
    position:        absolute;
    inset:           10px;
    display:         flex;
    flex-direction:  column;
    gap:             5px;
  }

  .thumb-line {
    height:        4px;
    border-radius: var(--radius-xs);
    background:    var(--border);
  }

  .thumb-line.accent  { background: var(--color-red-30); width: 55%; }
  .thumb-line.w85     { width: 85%; }
  .thumb-line.w70     { width: 70%; }
  .thumb-line.w65     { width: 65%; }
  .thumb-line.w50     { width: 50%; }

  /* ─── PROJECT INFO ────────────────────────────────── */
  .project-num {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    color:          var(--accent);
    letter-spacing: var(--tracking-widest);
  }

  .project-name {
    font-family:    var(--font-mono);
    font-size:      var(--text-3xl);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-snug);
    margin-bottom:  var(--space-1);
    color:          var(--text-secondary);
    transition:     color var(--duration-fast) var(--ease-out);
  }

  .project-desc {
    font-size:     var(--text-lg);
    color:         var(--text-muted);
    font-weight:   var(--font-light);
    line-height:   var(--leading-normal);
    max-width:     540px;
    margin-bottom: var(--space-3);
  }

  .project-tags {
    display:   flex;
    gap:       var(--space-2);
    flex-wrap: wrap;
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .project-card {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .project-card::after { display: none; }
    .project-thumb       { display: none; }
    .project-num         { order: -1; }
  }
}

/* ─── src/css/components/card.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Card — cartões de decisão / conteúdo
   Usado em: projeto-a.html (seção Decisões)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── CARDS GRID ──────────────────────────────────── */
  .cards-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-4);
    margin-top:            var(--space-12);
  }

  /* ─── CARD ────────────────────────────────────────── */
  .card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       var(--card-p) var(--space-6);
    transition:    transform             var(--duration-normal) var(--ease-spring),
                   border-color          var(--duration-normal) var(--ease-out),
                   box-shadow            var(--duration-normal) var(--ease-out);
  }

  .card:hover {
    transform:    translateY(-3px);
    border-color: var(--color-red-25);
    box-shadow:   var(--shadow-hover);
  }

  .card-number {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    color:          var(--accent);
    margin-bottom:  var(--space-4);
    letter-spacing: var(--tracking-widest);
  }

  .card-title {
    font-family:   var(--font-mono);
    font-size:     var(--text-2xl);
    font-weight:   var(--font-bold);
    margin-bottom: var(--space-3);
    line-height:   var(--leading-heading);
  }

  .card-body {
    font-size:   var(--text-base);
    color:       var(--text-secondary);
    line-height: var(--leading-loose);
    font-weight: var(--font-light);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 900px) {
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
  }

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

/* ─── src/css/components/tag.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Tag / Badge
   Variantes: .tag (project list), .tool-tag (sobre), .exp-tag (experiência)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── TAG — projeto list ──────────────────────────── */
  .tag {
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color:          var(--text-muted);
    border:         1px solid var(--border);
    border-radius:  var(--radius-full);
    padding:        3px var(--space-3);
    transition:     var(--transition-colors);
  }

  /* ─── TOOL TAG — ferramentas (sobre) ─────────────── */
  .tool-tag {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-wide);
    color:          var(--text-secondary);
    border:         1px solid var(--border);
    border-radius:  var(--radius-full);
    padding:        6px var(--space-4);
    transition:     var(--transition-colors);
    cursor:         default;
  }

  .tool-tag:hover {
    border-color: var(--color-red-25);
    color:        var(--text-primary);
  }

  /* ─── EXP TAG — badge de situação (sobre) ───────── */
  .exp-tag {
    display:        inline-block;
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color:          var(--accent);
    border:         1px solid var(--color-red-20);
    border-radius:  var(--radius-full);
    padding:        2px var(--space-2);
    margin-bottom:  var(--space-2);
  }
}

/* ─── src/css/components/skill-card.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Skill Card + Skills Grid
   Usado em: sobre.html (seção Especialidades)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── SKILLS GRID ─────────────────────────────────── */
  .skills-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-4);
    margin-bottom:         var(--space-20);
  }

  /* ─── SKILL CARD ──────────────────────────────────── */
  .skill-card {
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       var(--card-p-sm);
    transition:    border-color var(--duration-fast) var(--ease-out);
  }

  .skill-card:hover { border-color: var(--color-red-20); }

  .skill-area {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  var(--space-3);
  }

  .skill-title {
    font-family:   var(--font-mono);
    font-size:     var(--text-2xl);
    font-weight:   var(--font-bold);
    margin-bottom: var(--space-3);
    line-height:   var(--leading-heading);
  }

  .skill-list {
    font-size:   var(--text-base);
    color:       var(--text-muted);
    font-weight: var(--font-light);
    line-height: var(--leading-spacious);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 900px) {
    .skills-grid { grid-template-columns: repeat(2, 1fr); }
  }

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

/* ─── src/css/components/impact-grid.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Impact Grid — métricas em bg claro
   Usado em: projeto-a.html (seção Impacto)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── IMPACT GRID ─────────────────────────────────── */
  .impact-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1px;
    background:            rgba(26,10,8,0.1);
    border-radius:         var(--radius);
    overflow:              hidden;
    margin-top:            var(--space-12);
  }

  /* ─── IMPACT ITEM ─────────────────────────────────── */
  .impact-item {
    background: var(--bg-showcase);
    padding:    var(--space-9) var(--space-8);
  }

  .impact-number {
    font-family:    var(--font-mono);
    font-size:      var(--text-7xl);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-tight);
    margin-bottom:  var(--space-2);
    color:          var(--text-inverse);
    line-height:    var(--leading-none);
  }

  /* Variante: número com cor de accent */
  .impact-number--accent { color: var(--accent); }

  /* Variante: número substituído por texto curto */
  .impact-number--text {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
  }

  .impact-desc {
    font-size:   var(--text-base);
    color:       var(--text-inverse-muted);
    font-weight: var(--font-light);
    line-height: var(--leading-normal);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .impact-grid {
      grid-template-columns: 1fr;
    }

    .impact-item {
      padding: var(--space-6) var(--space-5);
    }

    .impact-number {
      font-size: var(--text-6xl);
    }
  }

  @media (max-width: 480px) {
    .impact-number { font-size: var(--text-5xl); }
  }
}

/* ─── src/css/components/contact-block.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Contact Block + Language Block
   Usado em: sobre.html
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── CONTACT BLOCK ───────────────────────────────── */
  .contact-block {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    padding:        var(--space-7);
    background:     var(--bg-card);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
  }

  .contact-block-label {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  var(--space-3);
  }

  .contact-link {
    display:         flex;
    align-items:     center;
    gap:             var(--space-3);
    font-family:     var(--font-mono);
    font-size:       var(--text-base);
    color:           var(--text-secondary);
    text-decoration: none;
    padding:         var(--space-2) 0;
    border-bottom:   1px solid var(--border);
    transition:      color var(--duration-fast) var(--ease-out);
  }

  .contact-link:last-child { border-bottom: none; }
  .contact-link:hover      { color: var(--text-primary); }

  .contact-link svg {
    width:      14px;
    height:     14px;
    opacity:    0.4;
    flex-shrink: 0;
  }

  /* ─── LANGUAGE BLOCK ──────────────────────────────── */
  .lang-block {
    margin-top:    var(--space-4);
    padding:       var(--space-5) var(--space-7);
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    display:       flex;
    gap:           var(--space-6);
  }

  .lang-item {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-px);
  }

  .lang-name {
    font-family:  var(--font-mono);
    font-size:    var(--text-md);
    font-weight:  var(--font-bold);
    color:        var(--text-primary);
  }

  .lang-level {
    font-size: var(--text-sm);
    color:     var(--text-muted);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .lang-block { flex-wrap: wrap; gap: var(--space-4); }
  }
}

/* ─── src/css/components/timeline.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Timeline — Experiência + Educação
   Usado em: sobre.html
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── LISTS ───────────────────────────────────────── */
  .experience-list,
  .education-list {
    display:        flex;
    flex-direction: column;
    margin-bottom:  var(--space-20);
  }

  /* ─── EXPERIENCE ITEM ─────────────────────────────── */
  .exp-item {
    display:               grid;
    grid-template-columns: 180px 1fr;
    gap:                   var(--space-8);
    padding:               var(--space-7) 0;
    border-bottom:         1px solid var(--border);
    align-items:           start;
  }

  .exp-period {
    font-family:  var(--font-mono);
    font-size:    var(--text-sm);
    color:        var(--text-muted);
    padding-top:  3px;
    line-height:  var(--leading-relaxed);
  }

  .exp-company {
    font-family:   var(--font-mono);
    font-size:     var(--text-lg);
    font-weight:   var(--font-bold);
    margin-bottom: var(--space-px);
  }

  .exp-role {
    font-size:     var(--text-base);
    color:         var(--text-secondary);
    font-weight:   var(--font-light);
    margin-bottom: var(--space-2);
  }

  .exp-desc {
    font-size:   var(--text-base);
    color:       var(--text-muted);
    font-weight: var(--font-light);
    line-height: var(--leading-loose);
  }

  /* ─── EDUCATION ITEM ──────────────────────────────── */
  .edu-item {
    display:               grid;
    grid-template-columns: 180px 1fr;
    gap:                   var(--space-8);
    padding:               var(--space-5) 0;
    border-bottom:         1px solid var(--border);
    align-items:           start;
  }

  .edu-period {
    font-family: var(--font-mono);
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    padding-top: 2px;
  }

  .edu-institution {
    font-family:   var(--font-mono);
    font-size:     var(--text-lg);
    font-weight:   var(--font-bold);
    margin-bottom: var(--space-px);
  }

  .edu-course {
    font-size:   var(--text-base);
    color:       var(--text-muted);
    font-weight: var(--font-light);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .exp-item,
    .edu-item {
      grid-template-columns: 1fr;
      gap: var(--space-2);
    }
  }
}

/* ─── src/css/components/showcase.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Showcase — Área de mockup de telas
   Usado em: projeto-a.html (hero)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── SHOWCASE WRAPPER ────────────────────────────── */
  .showcase-wrapper {
    margin-top: var(--space-20);
  }

  /* ─── SHOWCASE AREA ───────────────────────────────── */
  .showcase {
    background:      var(--bg-showcase);
    border-radius:   var(--radius-2xl);
    padding:         var(--space-16) var(--space-10);
    overflow:        hidden;
    position:        relative;
    min-height:      400px;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .showcase-label {
    position:       absolute;
    top:            var(--space-5);
    left:           var(--space-6);
    font-family:    var(--font-mono);
    font-size:      var(--text-xs);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-ultra);
    text-transform: uppercase;
    color:          var(--text-inverse-muted);
    opacity:        0.6;
  }

  /* ─── SCREEN MOCKS ────────────────────────────────── */
  .showcase-screens {
    display:         flex;
    gap:             var(--space-4);
    align-items:     center;
    justify-content: center;
  }

  .screen-mock {
    background:    var(--color-white);
    border-radius: var(--radius-lg);
    border:        1px solid rgba(0,0,0,0.08);
    overflow:      hidden;
    box-shadow:    var(--shadow-card);
  }

  .screen-mock.sm       { width: 160px; height: 280px; opacity: 0.7; }
  .screen-mock.md       { width: 200px; height: 340px; transform: translateY(-16px); }
  .screen-mock.sm-right { width: 160px; height: 280px; opacity: 0.7; }

  /* ─── SCREEN ANATOMY ──────────────────────────────── */
  .screen-header {
    height:        40px;
    background:    var(--color-red-08);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display:       flex;
    align-items:   center;
    padding:       0 var(--space-3);
    gap:           var(--space-2);
  }

  .screen-dot {
    width:         6px;
    height:        6px;
    border-radius: var(--radius-full);
    background:    rgba(0,0,0,0.15);
  }

  .screen-body {
    padding:        var(--space-4) var(--space-3);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
  }

  .screen-line {
    height:        8px;
    border-radius: var(--radius-xs);
    background:    rgba(0,0,0,0.06);
  }

  .screen-line.accent { background: rgba(248,113,113,0.25); width: 60%; }
  .screen-line.w80    { width: 80%; }
  .screen-line.w60    { width: 60%; }
  .screen-line.w40    { width: 40%; }

  .screen-card {
    background:     rgba(0,0,0,0.04);
    border-radius:  var(--radius-sm);
    padding:        var(--space-3);
    margin-top:     var(--space-1);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .showcase {
      padding:    var(--space-10) var(--space-5);
      min-height: 300px;
    }

    .screen-mock.sm,
    .screen-mock.sm-right { display: none; }
  }
}

/* ─── src/css/components/section-elements.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Section Elements — label, title, body, divider
   Reutilizados em múltiplas páginas
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── SECTION LABEL (acima dos títulos) ───────────── */
  .section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  var(--space-8);
  }

  .section-label::before {
    content:    '';
    width:      16px;
    height:     1px;
    background: var(--accent);
  }

  /* ─── SECTION TITLE ───────────────────────────────── */
  .section-title {
    font-family:    var(--font-mono);
    font-size:      var(--text-8xl);
    font-weight:    var(--font-regular);
    line-height:    var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom:  var(--space-6);
    max-width:      700px;
  }

  /* ─── SECTION SUBTITLE ────────────────────────────── */
  .section-subtitle {
    font-family:    var(--font-mono);
    font-size:      var(--text-5xl);
    font-weight:    var(--font-regular);
    letter-spacing: var(--tracking-snug);
    line-height:    var(--leading-snug);
    margin-bottom:  var(--space-8);
  }

  /* ─── SECTION BODY ────────────────────────────────── */
  .section-body {
    font-size:   var(--text-xl);
    color:       var(--text-secondary);
    line-height: var(--leading-extra);
    max-width:   580px;
    font-weight: var(--font-light);
  }

  /* ─── TWO COLUMN LAYOUT ───────────────────────────── */
  .two-col {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--gap-lg);
    align-items:           start;
  }

  /* ─── SECTION DIVIDER (com label inline) ─────────── */
  .section-divider {
    display:       flex;
    align-items:   center;
    gap:           var(--space-6);
    margin-bottom: var(--space-12);
  }

  .section-divider h2 {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--text-muted);
    white-space:    nowrap;
  }

  .section-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--border);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .section-title    { font-size: var(--text-6xl); }
    .section-subtitle { font-size: var(--text-5xl); }

    .two-col {
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }
  }

  @media (max-width: 480px) {
    .section-title    { font-size: var(--text-5xl); }
    .section-subtitle { font-size: var(--text-4xl); }
  }
}

/* ─── src/css/components/stat.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Stat — números de impacto lateral
   Usado em: projeto-a.html (seção Desafio)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── STATS GRID ──────────────────────────────────── */
  .stats-grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-10);
  }

  /* ─── STAT NUMBER ─────────────────────────────────── */
  .stat-number {
    font-family:    var(--font-mono);
    font-size:      var(--text-7xl);
    font-weight:    var(--font-bold);
    color:          var(--text-primary);
    line-height:    var(--leading-none);
    margin-bottom:  var(--space-2);
    letter-spacing: var(--tracking-tight);
  }

  /* Variante compacta: texto descritivo em vez de número grande */
  .stat-number--sm {
    font-size:   var(--text-5xl);
    line-height: var(--leading-snug);
  }

  .stat-number span { color: var(--accent); }

  /* ─── STAT LABEL ──────────────────────────────────── */
  .stat-label {
    font-size:   var(--text-base);
    color:       var(--text-secondary);
    font-weight: var(--font-light);
    line-height: var(--leading-relaxed);
  }

  /* ─── STAT DIVIDER ────────────────────────────────── */
  .stat-divider {
    width:      1px;
    height:     40px;
    background: var(--border);
    margin:     var(--space-2) 0;
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .stat-number { font-size: var(--text-6xl); }
  }
}

/* ─── src/css/components/highlight.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Highlight Block — citação/destaque com borda
   Usado em: projeto-a.html (seção Desafio)
   ═══════════════════════════════════════════════════════ */

@layer components {

  .highlight-block {
    border-left:   2px solid var(--accent);
    padding:       var(--space-6) var(--space-8);
    background:    var(--accent-dim);
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-top:    var(--space-10);
  }

  .highlight-text {
    font-family:    var(--font-mono);
    font-size:      var(--text-3xl);
    font-weight:    var(--font-regular);
    line-height:    var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    color:          var(--text-primary);
  }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .highlight-text { font-size: var(--text-2xl); }
  }
}

/* ─── src/css/components/learning.css ─── */
/* ═══════════════════════════════════════════════════════
   COMPONENT: Learning Items — lista de aprendizados
   Usado em: projeto-a.html (seção Impacto)
   ═══════════════════════════════════════════════════════ */

@layer components {

  /* ─── LEARNINGS LIST ──────────────────────────────── */
  .learnings-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    margin-top:     var(--space-10);
  }

  /* ─── LEARNING ITEM ───────────────────────────────── */
  .learning-item {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-4);
    padding:       var(--space-5) var(--space-6);
    background:    var(--bg-card);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    transition:    transform var(--duration-normal) var(--ease-spring),
                   border-color var(--duration-fast) var(--ease-out);
  }

  .learning-item:hover {
    transform:    translateX(4px);
    border-color: var(--color-red-20);
  }

  /* ─── LEARNING ICON ───────────────────────────────── */
  .learning-icon {
    width:           32px;
    height:          32px;
    border-radius:   var(--radius-sm);
    background:      var(--accent-dim);
    border:          1px solid var(--color-red-15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-family:     var(--font-mono);
    font-size:       var(--text-md);
    color:           var(--accent);
  }

  /* ─── LEARNING TEXT ───────────────────────────────── */
  .learning-text {
    font-size:   var(--text-lg);
    color:       var(--text-secondary);
    line-height: var(--leading-loose);
    font-weight: var(--font-light);
    padding-top: var(--space-1);
  }

  .learning-text strong {
    color:       var(--text-primary);
    font-weight: var(--font-medium);
  }

  /* ─── LEARNINGS SECTION HEADER ────────────────────── */
  .learnings-header {
    margin-top: var(--space-20);
  }
}

/* ─── src/css/pages/home.css ─── */
/* ═══════════════════════════════════════════════════════
   PAGE: Home (index.html)
   Inclui: hero, projects section, animations de entrada
   ═══════════════════════════════════════════════════════ */

@layer pages {

  /* ─── HOME HERO ───────────────────────────────────── */
  .home-hero {
    padding:  var(--hero-pt-xl) 0 var(--hero-pb-lg);
    position: relative;
  }

  .home-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:
      radial-gradient(ellipse at 20% 60%, var(--color-red-06) 0%, transparent 55%),
      radial-gradient(ellipse at 75% 30%, var(--color-red-04) 0%, transparent 45%);
    pointer-events: none;
  }

  .home-hero-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--gap-lg);
    align-items:           end;
  }

  /* ─── HERO HEADING ────────────────────────────────── */
  .home-hero h1 {
    font-family:    var(--font-mono);
    font-size:      var(--text-10xl);
    font-weight:    var(--font-regular);
    line-height:    var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    margin-bottom:  var(--space-8);
  }

  .home-hero h1 em {
    font-style: italic;
    color:      var(--text-secondary);
  }

  .home-hero .tagline {
    font-size:   var(--text-2xl);
    color:       var(--text-secondary);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-light);
    max-width:   380px;
  }

  /* ─── HERO RIGHT COLUMN ───────────────────────────── */
  .home-hero-right {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
    padding-bottom: var(--space-2);
  }

  .hero-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  var(--space-1);
  }

  .hero-pill::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: var(--radius-full);
    background:    var(--accent);
    animation:     blink 2s var(--ease-in-out) infinite;
  }

  .hero-stat {
    font-family: var(--font-mono);
    font-size:   var(--text-base);
    color:       var(--text-muted);
  }

  .hero-stat strong {
    color:       var(--text-secondary);
    font-weight: var(--font-bold);
  }

  /* ─── PROJECTS SECTION ────────────────────────────── */
  .projects-section {
    padding: 0 0 var(--space-40);
  }

  .projects-header {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    margin-bottom:   0;
    padding-bottom:  var(--space-5);
    border-bottom:   1px solid var(--border);
  }

  .projects-header h2 {
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--text-muted);
  }

  .projects-count {
    font-family: var(--font-mono);
    font-size:   var(--text-sm);
    color:       var(--text-muted);
  }

  /* ─── ANIMATIONS DE ENTRADA ───────────────────────── */
  .home-hero h1       { animation: fadeUp var(--duration-slow) var(--ease-out) both; }
  .home-hero .tagline { animation: fadeUp var(--duration-slow) 0.10s var(--ease-out) both; }
  .home-hero-right    { animation: fadeUp var(--duration-slow) 0.15s var(--ease-out) both; }
  .projects-section   { animation: fadeUp var(--duration-slow) 0.20s var(--ease-out) both; }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .home-hero { padding: var(--hero-pt-md) 0 var(--hero-pb-md); }

    .home-hero-inner {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }

    .home-hero h1 { font-size: var(--text-9xl); }
  }

  @media (max-width: 480px) {
    .home-hero h1     { font-size: var(--text-8xl); }
    .home-hero .tagline { font-size: var(--text-xl); }
  }
}

/* ─── src/css/pages/project.css ─── */
/* ═══════════════════════════════════════════════════════
   PAGE: Project (projeto-a.html e próximos projetos)
   Inclui: hero, hero-meta, section padding, animations
   ═══════════════════════════════════════════════════════ */

@layer pages {

  /* ─── PROJECT HERO ────────────────────────────────── */
  .hero {
    padding:  var(--hero-pt-lg) 0 var(--hero-pb-xl);
    position: relative;
  }

  .hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:
      radial-gradient(ellipse at 30% 50%, var(--color-red-06) 0%, transparent 60%),
      radial-gradient(ellipse at 80% 20%, var(--color-red-04) 0%, transparent 50%);
    pointer-events: none;
  }

  .hero-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--gap-lg);
    align-items:           start;
  }

  /* ─── HERO LEFT ───────────────────────────────────── */
  .hero-left h1 {
    font-family:    var(--font-mono);
    font-size:      var(--text-9xl);
    font-weight:    var(--font-regular);
    line-height:    var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    margin-bottom:  var(--space-6);
  }

  .hero-left p {
    font-size:   var(--text-2xl);
    color:       var(--text-secondary);
    line-height: var(--leading-relaxed);
    max-width:   420px;
    font-weight: var(--font-light);
  }

  /* ─── HERO META ───────────────────────────────────── */
  .hero-meta {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
    padding-top:    var(--space-2);
  }

  .meta-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
  }

  .meta-icon {
    width:      20px;
    height:     20px;
    flex-shrink: 0;
    margin-top:  2px;
    opacity:    0.6;
  }

  .meta-label {
    font-family:   var(--font-mono);
    font-size:     var(--text-base);
    font-weight:   var(--font-bold);
    color:         var(--text-primary);
    margin-bottom: var(--space-px);
  }

  .meta-value {
    font-size: var(--text-base);
    color:     var(--text-secondary);
  }

  /* ─── GENERIC SECTION PADDING ─────────────────────── */
  section           { padding: var(--section-y) 0; }
  section.hero      { padding: var(--hero-pt-lg) 0 var(--hero-pb-xl); }
  section#desafio   { padding: var(--space-36) 0; }
  section#decisoes  { padding: var(--space-24) 0; }
  section#impacto   { padding: var(--space-36) 0 var(--space-40); }

  /* ─── ANIMATIONS DE ENTRADA ───────────────────────── */
  .hero-left h1 { animation: fadeUp var(--duration-slow) var(--ease-out) both; }
  .hero-left p  { animation: fadeUp var(--duration-slow) 0.10s var(--ease-out) both; }
  .hero-meta    { animation: fadeUp var(--duration-slow) 0.15s var(--ease-out) both; }
  .showcase     { animation: fadeUp var(--duration-slow) 0.20s var(--ease-out) both; }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .hero { padding: var(--hero-pt-sm) 0 var(--hero-pb-md); }

    .hero-inner {
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }

    .hero-left h1 { font-size: var(--text-8xl); }
    .hero-left p  { font-size: var(--text-xl); }

    section#desafio,
    section#impacto { padding: var(--space-20) 0; }

    section#decisoes { padding: var(--space-20) 0; }
  }

  @media (max-width: 480px) {
    .hero { padding: var(--hero-pt-sm) 0 var(--space-20); }
    .hero-left h1 { font-size: var(--text-6xl); }
  }
}

/* ─── src/css/pages/about.css ─── */
/* ═══════════════════════════════════════════════════════
   PAGE: About (sobre.html)
   Inclui: hero, bio, expertise section, tools list, animations
   ═══════════════════════════════════════════════════════ */

@layer pages {

  /* ─── ABOUT HERO ──────────────────────────────────── */
  .sobre-hero {
    padding:  var(--hero-pt-xl) 0 var(--hero-pb-lg);
    position: relative;
  }

  .sobre-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:
      radial-gradient(ellipse at 70% 40%, var(--color-red-06) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 70%, var(--color-red-04) 0%, transparent 45%);
    pointer-events: none;
  }

  .sobre-hero-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   6.25rem;   /* 100px — gap extra para respirar */
    align-items:           start;
  }

  /* ─── SOBRE LABEL ─────────────────────────────────── */
  .sobre-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-2);
    font-family:    var(--font-mono);
    font-size:      var(--text-sm);
    font-weight:    var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  var(--space-8);
  }

  .sobre-label::before {
    content:    '';
    width:      16px;
    height:     1px;
    background: var(--accent);
  }

  /* ─── SOBRE HEADING ───────────────────────────────── */
  .sobre-hero h1 {
    font-family:    var(--font-mono);
    font-size:      var(--text-9xl);
    font-weight:    var(--font-regular);
    line-height:    var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    margin-bottom:  var(--space-2);
  }

  .sobre-hero h1 em {
    font-style: italic;
    color:      var(--text-secondary);
  }

  .sobre-subtitle {
    font-family:    var(--font-mono);
    font-size:      var(--text-md);
    color:          var(--text-muted);
    letter-spacing: var(--tracking-wide);
    margin-bottom:  var(--space-8);
  }

  /* ─── BIO ─────────────────────────────────────────── */
  .sobre-bio {
    font-size:   var(--text-2xl);
    color:       var(--text-secondary);
    line-height: var(--leading-extra);
    font-weight: var(--font-light);
  }

  .sobre-bio p + p { margin-top: var(--space-5); }

  /* ─── EXPERTISE SECTION ───────────────────────────── */
  .expertise-section {
    padding: 0 0 var(--space-40);
  }

  /* ─── TOOLS LIST ──────────────────────────────────── */
  .tools-list {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-20);
  }

  /* ─── ANIMATIONS DE ENTRADA ───────────────────────── */
  .sobre-hero h1      { animation: fadeUp var(--duration-slow) var(--ease-out) both; }
  .sobre-subtitle     { animation: fadeUp var(--duration-slow) 0.05s var(--ease-out) both; }
  .sobre-bio          { animation: fadeUp var(--duration-slow) 0.10s var(--ease-out) both; }
  .contact-block      { animation: fadeUp var(--duration-slow) 0.15s var(--ease-out) both; }
  .lang-block         { animation: fadeUp var(--duration-slow) 0.20s var(--ease-out) both; }
  .expertise-section  { animation: fadeUp var(--duration-slow) 0.20s var(--ease-out) both; }

  /* ─── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 768px) {
    .sobre-hero { padding: var(--hero-pt-md) 0 var(--space-20); }

    .sobre-hero-inner {
      grid-template-columns: 1fr;
      gap: var(--space-12);
    }

    .sobre-hero h1 { font-size: var(--text-8xl); }
  }

  @media (max-width: 480px) {
    .sobre-hero h1 { font-size: var(--text-6xl); }
  }
}