/* ========== CONFIGURAÇÃO VISUAL ========== */
  :root{
    --board:#1b2622;        /* fundo cinza-verde escuro */
    --board-2:#22302b;
    --board-3:#2c3d36;
    --mask:#33473f;         /* solder mask mais claro */
    --copper:#d9782d;       /* cobre laranja */
    --copper-2:#f2a35a;     /* cobre iluminado */
    --copper-dim:#8a4f1f;
    --silk:#d8e1dc;         /* serigrafia branca */
    --silk-dim:#8a9a93;
    --chip:#0f1613;
    --chip-edge:#3a4a43;
    --font-display:'Chakra Petch',sans-serif;
    --font-body:'IBM Plex Sans',sans-serif;
    --topbar-h:46px;        /* altura da barra de cabeçalho */
    --banner-h:clamp(90px,9vw,180px); /* altura do banner (180px na largura cheia) */
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--board);
    color:var(--silk);
    font-family:var(--font-body);
    overflow-x:hidden;
    line-height:1.55;
    padding-top:var(--topbar-h);
  }
  a{color:inherit}
  :focus-visible{outline:2px solid var(--copper-2);outline-offset:4px}

  /* ========== FUNDO: textura de placa ========== */
  .board-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 20% 10%, rgba(242,163,90,.06), transparent 40%),
      radial-gradient(circle at 80% 90%, rgba(242,163,90,.05), transparent 40%),
      var(--board);
  }
  .board-bg svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

  /* ========== BARRA DE CABEÇALHO ========== */
  .topbar{
    position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:20;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 clamp(16px,4vw,48px);
    background:rgba(15,22,19,.9);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--copper-dim);
    box-shadow:0 2px 16px rgba(0,0,0,.45);
    font-family:var(--font-display);font-size:12px;letter-spacing:.14em;
  }
  .topbar .brand{display:flex;align-items:center;gap:10px;color:var(--silk);font-weight:600}
  .topbar .brand::before{
    content:"";width:9px;height:9px;border-radius:50%;flex:none;
    background:var(--copper);box-shadow:0 0 8px var(--copper-2);
    animation:blink 2.4s ease-in-out infinite;
  }
  .topbar .tag{color:var(--silk-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (max-width:560px){
    .topbar{font-size:11px;letter-spacing:.08em}
    .topbar .tag{display:none}
  }

  /* ========== BANNER (logo abaixo da barra) ========== */
  .banner{
    position:relative;z-index:1;width:100%;max-width:2000px;margin:0 auto;
    height:var(--banner-h);overflow:hidden;background:var(--board-2);
    border-bottom:1px solid var(--copper-dim);
  }
  .banner img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .banner .missing{
    height:100%;display:grid;place-items:center;color:var(--silk-dim);
    font-family:var(--font-display);font-size:12px;letter-spacing:.14em;
  }

  /* ========== LAYOUT ========== */
  .wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

  /* barramento central (trilha principal) */
  .bus{
    position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;
    background:linear-gradient(var(--copper-dim),var(--copper-dim));
    border-radius:3px;box-shadow:0 0 0 2px var(--board), 0 0 12px rgba(217,120,45,.25);
    z-index:0;
  }
  .bus-fill{
    position:absolute;left:0;top:0;width:100%;height:0;
    background:linear-gradient(var(--copper-2),var(--copper));
    border-radius:3px;box-shadow:0 0 14px rgba(242,163,90,.6);
  }

  /* ========== HERO ========== */
  header.hero{
    min-height:calc(100vh - var(--topbar-h) - var(--banner-h));display:grid;place-items:center;text-align:center;position:relative;
    padding:24px 0 56px;
  }
  .cpu{
    position:relative;display:inline-block;padding:48px clamp(28px,6vw,72px);
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:6px;
    box-shadow:0 0 0 1px #000, 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .cpu::before{ /* marca de pino 1 */
    content:"";position:absolute;left:14px;top:14px;width:10px;height:10px;border-radius:50%;
    background:var(--board-3);box-shadow:inset 0 1px 2px rgba(0,0,0,.8);
  }
  .pins{position:absolute;display:flex;gap:10px;justify-content:space-between}
  .pins.top{left:24px;right:24px;top:-14px}
  .pins.bottom{left:24px;right:24px;bottom:-14px}
  .pins span{flex:1;height:14px;max-width:14px;background:linear-gradient(var(--copper-2),var(--copper-dim));border-radius:2px 2px 0 0}
  .pins.bottom span{border-radius:0 0 2px 2px;background:linear-gradient(var(--copper-dim),var(--copper-2))}
  .cpu h1{
    font-family:var(--font-display);font-weight:700;letter-spacing:.02em;
    font-size:clamp(34px,7vw,84px);line-height:1;color:var(--copper-2);
    text-shadow:0 0 30px rgba(242,163,90,.35);
  }
  .cpu p{margin-top:18px;color:var(--silk-dim);font-size:clamp(14px,1.6vw,18px);max-width:52ch}
  .cpu .cta{
    display:inline-flex;align-items:center;gap:12px;margin-top:26px; margin-left: 20px;
    font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.8vw,18px);letter-spacing:.14em;
    color:var(--chip);text-decoration:none;padding:14px 28px;border-radius:4px;
    background:linear-gradient(180deg,var(--copper-2),var(--copper));border:1px solid var(--copper-2);
    box-shadow:0 0 18px rgba(242,163,90,.45), 0 8px 20px rgba(0,0,0,.4);
    transition:transform .2s,box-shadow .2s,filter .2s;
  }
  .cpu .cta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--chip);animation:blink 2.4s ease-in-out infinite}
  .cpu .cta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 0 28px rgba(242,163,90,.7), 0 12px 24px rgba(0,0,0,.45)}
  .cpu .rev{
    margin-top:28px;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--silk-dim);
    display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  }
  .scroll-hint{
    position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
    color:var(--silk-dim);font-size:12px;font-family:var(--font-display);letter-spacing:.14em;
  }
  .scroll-hint::after{
    content:"";display:block;width:2px;height:40px;margin:10px auto 0;
    background:linear-gradient(var(--copper),transparent);
    animation:blink 1.6s ease-in-out infinite;
  }
  @keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

  /* ========== SEÇÃO DE PROJETOS ========== */
  section.board{position:relative;padding:40px 0 160px}
  .traces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
  .traces path{fill:none;stroke-linecap:round;stroke-linejoin:round}
  .traces .base{stroke:var(--copper-dim);stroke-width:4;opacity:.45}
  .traces .glow{stroke:var(--copper-2);stroke-width:4;filter:drop-shadow(0 0 6px rgba(242,163,90,.7))}
  .traces circle.via{fill:var(--board);stroke:var(--copper);stroke-width:3}
  .traces circle.pad{fill:var(--copper)}

  .components{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(90px,14vh,180px)}

  /* cada "componente" (projeto) */
  .comp{
    position:relative;width:min(100%,760px);
    display:grid;grid-template-columns:1fr;
  }
  .comp:nth-child(odd){align-self:flex-start}
  .comp:nth-child(even){align-self:flex-end}

  .comp-body{
    position:relative;background:var(--chip);border:1px solid var(--chip-edge);border-radius:6px;overflow:hidden;
    box-shadow:0 0 0 1px #000, 0 24px 48px rgba(0,0,0,.45);
    transition:border-color .3s, box-shadow .3s;
  }
  .comp-body:hover{border-color:var(--copper);box-shadow:0 0 0 1px #000, 0 24px 48px rgba(0,0,0,.45), 0 0 24px rgba(217,120,45,.25)}

  /* pinos laterais (pernas do chip) — no lado que encosta na trilha */
  .legs{position:absolute;top:24px;bottom:24px;width:16px;display:flex;flex-direction:column;justify-content:space-around;z-index:2}
  .comp:nth-child(odd) .legs{right:-16px}
  .comp:nth-child(even) .legs{left:-16px}
  .legs span{height:6px;background:linear-gradient(90deg,var(--copper-dim),var(--copper-2));border-radius:0 3px 3px 0}
  .comp:nth-child(even) .legs span{background:linear-gradient(90deg,var(--copper-2),var(--copper-dim));border-radius:3px 0 0 3px}

  .comp-img{position:relative;overflow:hidden;background:var(--board-2)}
  .comp-img img{width:100%;height:auto;display:block;filter:saturate(.9)}
  .comp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(15,22,19,.85))}
  .comp-img .missing{min-height:180px;display:grid;place-items:center;color:var(--silk-dim);font-size:13px;font-family:var(--font-display);letter-spacing:.1em}

  .comp-text{padding:22px 24px 26px}
  .comp-text h2{
    font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.15;color:var(--silk);
  }
  .comp-text p{margin-top:10px;color:var(--silk-dim);font-size:15px;max-width:60ch;white-space:pre-line}
  .comp-text a{
    display:inline-flex;align-items:center;gap:10px;margin-top:18px;
    font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.06em;
    color:var(--copper-2);text-decoration:none;padding:10px 16px;border:1px solid var(--copper-dim);border-radius:4px;
    transition:background .2s,border-color .2s,color .2s;
  }
  .comp-text a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--copper);box-shadow:0 0 8px var(--copper-2)}
  .comp-text a:hover{background:var(--copper);color:var(--chip);border-color:var(--copper)}
  .comp-text a:hover::before{background:var(--chip);box-shadow:none}

  /* etiqueta de serigrafia (referência do componente) */
  .ref{
    position:absolute;top:-22px;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--silk-dim);
  }
  .comp:nth-child(odd) .ref{left:2px}
  .comp:nth-child(even) .ref{right:2px}

  /* ========== CONTATO (conector de saída) ========== */
  .contact{position:relative;z-index:1;margin:40px auto 0;width:min(100%,760px)}
  .contact .ref{position:absolute;top:-22px;left:2px;font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--silk-dim)}
  .contact-body{
    position:relative;background:var(--chip);border:1px solid var(--chip-edge);border-radius:6px;padding:30px 32px 34px;
    box-shadow:0 0 0 1px #000, 0 24px 48px rgba(0,0,0,.45);
  }
  .contact-body::before,.contact-body::after{ /* pinos superiores e inferiores */
    content:"";position:absolute;left:24px;right:24px;height:12px;
    background:repeating-linear-gradient(90deg,var(--copper) 0 12px,transparent 12px 26px);
  }
  .contact-body::before{top:-12px;border-radius:2px 2px 0 0}
  .contact-body::after{bottom:-12px}
  .contact h2{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,26px);color:var(--silk)}
  .contact p{margin-top:8px;color:var(--silk-dim);font-size:15px;max-width:60ch}
  .contact ul{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
  .contact li a{
    display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;
    border:1px solid var(--chip-edge);border-radius:4px;background:var(--board);
    font-family:var(--font-display);font-size:14px;letter-spacing:.04em;color:var(--silk);
    transition:border-color .2s,background .2s;
  }
  .contact li a:hover{border-color:var(--copper);background:var(--board-2)}
  .contact li a .pin{width:10px;height:10px;border-radius:50%;background:var(--copper);box-shadow:0 0 8px var(--copper-2);flex:none}
  .contact li a .lbl{color:var(--silk-dim);font-size:11px;letter-spacing:.14em;display:block}
  .contact li a .val{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ========== RODAPÉ ========== */
  footer{position:relative;z-index:1;padding:48px 0 64px;text-align:center;color:var(--silk-dim);font-size:13px;font-family:var(--font-display);letter-spacing:.1em}
  .status{margin-top:12px;color:var(--copper);font-family:var(--font-body);letter-spacing:0;font-size:13px;min-height:1em}

  /* ========== RESPONSIVO ========== */
  @media (max-width:760px){
    .bus{left:18px;margin-left:0}
    .comp{width:100%;padding-left:34px}
    .comp:nth-child(even){align-self:flex-start}
    .comp:nth-child(even) .legs{left:18px}
    .comp:nth-child(odd) .legs{left:18px;right:auto}
    .comp:nth-child(odd) .legs span,.comp:nth-child(even) .legs span{background:linear-gradient(90deg,var(--copper-2),var(--copper-dim));border-radius:3px 0 0 3px}
    .comp:nth-child(even) .ref{right:auto;left:36px}
    .comp:nth-child(odd) .ref{left:36px}
  }
  @media (prefers-reduced-motion:reduce){
    .scroll-hint::after{animation:none}
  }

  /* ========== ALTERNADOR DE IDIOMA (topbar) ========== */
  .topbar .lang{
    flex:none;text-decoration:none;color:var(--copper-2);font-weight:600;
    padding:4px 10px;border:1px solid var(--copper-dim);border-radius:3px;
    transition:background .2s,color .2s;
  }
  .topbar .lang:hover{background:var(--copper);color:var(--chip)}