:root{
    --ink:#14151a; --ink-text:#ece9e1; --ink-text-dim:#8d8c93;
    --paper:#e7e4dc; --paper-2:#d9d5cb; --paper-text:#17171a; --paper-text-dim:#67655d;
    --brass:#c8952f; --brass-deep:#8f6a1f;
    --line-ink:rgba(236,234,226,0.14); --line-paper:rgba(23,23,26,0.14);
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas",monospace;
    --sans:-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
    --display:'Jost',-apple-system,"Segoe UI",Arial,sans-serif;
    --chrome-bg:var(--paper); --chrome-text:var(--paper-text);
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark){ :root{ --chrome-bg:var(--ink); --chrome-text:var(--ink-text); } }
  :root[data-theme="dark"]{ --chrome-bg:var(--ink); --chrome-text:var(--ink-text); }
  :root[data-theme="light"]{ --chrome-bg:var(--paper); --chrome-text:var(--paper-text); }
  @font-face{ font-family:"Jost"; font-style:normal; font-weight:300; font-display:swap; src:url('../assets/fonts/jost300.woff2') format('woff2'); }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; background:var(--chrome-bg); color:var(--chrome-text); overflow-x:hidden; }
  body{ font-family:var(--sans); }
  ::selection{ background:var(--brass); color:#14151a; }
  a{ color:inherit; text-decoration:none; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:4px; }
  img{ max-width:100%; display:block; }
  h1,h2,h3{ text-wrap:balance; margin:0; }
  p{ margin:0; }
  html{ scroll-behavior:smooth; }

  .scene{ position:relative; width:100%; padding:min(12vw,6.5rem) min(7vw,3.5rem); display:flex; flex-direction:column; }
  .scene[data-band="ink"]{ background:var(--ink); color:var(--ink-text); }
  .scene[data-band="paper"]{ background:var(--paper); color:var(--paper-text); }

  .pillnav{ position:fixed; top:1.25rem; left:0; right:0; z-index:60; display:flex; justify-content:center; gap:.5rem; pointer-events:none; }
  .pill{ pointer-events:auto; display:inline-flex; align-items:center; gap:.5rem; height:2.6rem; padding:0 1.1rem; border-radius:999px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; border:1px solid transparent; cursor:pointer; background:none; transition:background .35s ease,color .35s ease,border-color .35s ease; }
  .pillnav.on-paper .pill{ background:rgba(23,23,26,0.06); color:var(--paper-text); border-color:rgba(23,23,26,0.1); }
  .pillnav.on-ink .pill{ background:rgba(236,234,226,0.08); color:var(--ink-text); border-color:rgba(236,234,226,0.14); }
  .pill.mark{ font-family:var(--sans); font-weight:800; letter-spacing:0; font-size:.85rem; padding:0 .9rem; }
  .pill.mark img{ height:1.6rem; display:block; }
  .pillnav.on-paper .pill.mark img{ filter:brightness(0); }
  .pill.status{ min-width:13rem; justify-content:center; }
  .pill.status .label{ font-family:var(--display); font-weight:300; letter-spacing:.1em; font-size:.78rem; }
  .pill.menu-btn{ font-size:1rem; width:2.6rem; justify-content:center; padding:0; }

  .menu-overlay{ position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--ink-text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; opacity:0; visibility:hidden; transition:opacity .4s ease; }
  .menu-overlay.open{ opacity:1; visibility:visible; }
  .overlay-close{ position:absolute; top:1.4rem; right:1.6rem; background:none; border:none; color:inherit; font-size:1.4rem; cursor:pointer; }
  .overlay-list{ list-style:none; margin:0; padding:0; text-align:center; }
  .overlay-list li{ margin:.55rem 0; }
  .overlay-list a{ font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(1.15rem,3.4vw,1.8rem); display:inline-flex; gap:.9rem; align-items:baseline; }
  .overlay-list .current{ color:var(--brass); }

  /* ---- [1] ABERTURA ---- */
  .hero{ min-height:60vh; justify-content:center; align-items:flex-start; gap:1.4rem; padding-top:min(28vw,13rem); }
  .kicker{ font-family:var(--display); font-weight:300; font-size:.8rem; letter-spacing:.14em; color:var(--brass-deep); text-transform:uppercase; }
  .hero h1{ font-family:var(--display); font-weight:300; text-transform:uppercase; font-size:clamp(2rem,5.6vw,3.9rem); line-height:1.1; letter-spacing:.01em; }

  [data-band="ink"] .case-text{ color:var(--ink-text-dim); }
  [data-band="paper"] .case-text{ color:var(--paper-text-dim); }
  .project-imgs-stack{ display:flex; flex-direction:column; gap:1rem; margin-top:.6rem; }
  .project-imgs-stack img{ width:100%; border-radius:16px; display:block; object-fit:cover; }

  /* ---- [6] RODAPÉ / CONTATO ---- */
  .contact{ min-height:56vh; justify-content:center; align-items:center; text-align:center; gap:1.1rem; }
  .credits{ display:flex; flex-direction:column; gap:1rem; width:100%; max-width:32rem; margin:1.2rem auto 0; }
  .credit-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-bottom:1px solid var(--line-paper); padding-bottom:.85rem; }
  .credit-row .role{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--paper-text-dim); text-transform:uppercase; }
  .credit-row a{ font-size:1.05rem; font-weight:700; }
  .credit-row a:hover{ color:var(--brass-deep); }
  [data-band="ink"] .credit-row{ border-bottom-color:var(--line-ink); }
  .fine-print{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; color:var(--paper-text-dim); margin-top:1.6rem; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
  .reveal.in-view{ opacity:1; transform:none; }
  .reveal2{ transition-delay:.1s; } .reveal3{ transition-delay:.2s; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
    .reveal{ opacity:1; transform:none; }
    html{ scroll-behavior:auto; }
  }
  @media (max-width: 860px){
    .pill.status{ min-width:0; }
    .pill.status .label{ display:none; }
    .hero{ padding-top:min(38vw,9rem); }
  }

  /* ---- [MOBIRISE-STYLE] título com foto de fundo + imagens grandes ---- */
  /* ---- layout lado a lado (objetos únicos, Design de Produto) ---- */

  /* ---- vídeos embutidos ---- */


  /* ---- [NOVO] título de projeto em tela cheia, parallax igual ao INÍCIO ---- */
  .project-hero-full{ min-height:100vh; position:relative; overflow:hidden; padding:min(12vw,6.5rem) min(7vw,3.5rem); display:flex; flex-direction:column; }
  .parallax-wrap{ position:absolute; top:-6%; left:0; right:0; height:112%; overflow:hidden; z-index:0; pointer-events:none; will-change:transform; }
  .parallax-bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
  .project-hero-full .project-hero-overlay{ position:absolute; inset:0; z-index:1; background:rgba(10,10,10,.72); }
  .project-hero-full .project-hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.6rem; height:100%; padding-top:min(28vw,13rem); max-width:52rem; }
  .project-hero-full .kicker{ color:#fff; opacity:.82; }
  .project-hero-full h2{ color:#fff; font-family:var(--display); font-weight:300; text-transform:uppercase; font-size:clamp(2rem,5.6vw,3.9rem); line-height:1.1; letter-spacing:.01em; max-width:20ch; margin:0; }
  .project-hero-full .case-text{ color:#fff; max-width:52ch; font-size:1.02rem; line-height:1.58; }

  /* imagem solta com parallax, sem overlay/texto */

  /* título com cor de fundo sólida, tipografia igual ao INÍCIO */
  .project-color-hero{ min-height:56vh; justify-content:center; align-items:flex-start; padding:min(12vw,6.5rem) min(7vw,3.5rem); }
  .project-color-hero .project-hero-content{ max-width:52rem; display:flex; flex-direction:column; gap:1.4rem; }
  .project-color-hero h2{ font-family:var(--display); font-weight:300; text-transform:uppercase; font-size:clamp(2rem,5.6vw,3.9rem); line-height:1.1; letter-spacing:.01em; max-width:20ch; margin:0; }
  .project-color-hero .case-text{ max-width:52ch; font-size:1.02rem; line-height:1.58; }
  .project-color-hero.text-dark h2{ color:#17171a; }
  .project-color-hero.text-dark .case-text{ color:#4a4840; }

  /* margens do box de imagem iguais nos 4 lados */
  .scene:has(> .project-imgs-stack){ padding:min(7vw,3.5rem); }