/* Papalagui Studios — landing estática
   Tokens completos do design system em tokens/*.css do projeto-mãe.
   Aqui só o subconjunto que esta página usa. */
:root{
  --verde-400:#0fa766;--verde-500:#049a59;--verde-300:#45bf88;--verde-700:#056e48;--verde-900:#002919;
  --azul-500:#0c526b;--lima-400:#d2e24a;--lima-300:#dce97a;
  --papel-100:#fbf8ef;--papel-300:#e4dcc7;--tinta-300:#95a29c;--tinta-500:#5b6a64;--tinta-100:#d6ded9;
  --font-display:"Papalagui","Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
}

/* Papalagui — fonte display própria do estúdio, peso único (400).
   Como não existe versão bold, o negrito sintético do browser está desligado
   (font-synthesis): ele engrossaria o traço monolinear e descaracterizaria o
   desenho. Todo texto display usa peso 400. */
@font-face{font-family:"Papalagui";src:url("assets/fonts/Papalagui-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--verde-500)}
body{font-family:var(--font-body);color:#2b3833;-webkit-font-smoothing:antialiased;
  font-synthesis:none}
a{color:var(--verde-700)}
a:hover{color:var(--azul-500)}

/* ── herói: folhagem em tela cheia ── */
.heroi{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;
  background:url("assets/images/capa-folhagem.webp") center/cover no-repeat;overflow:hidden}
.veu{position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,41,25,.18) 0%,rgba(0,41,25,.62) 100%)}
.marca{position:relative;display:grid;justify-items:center;gap:clamp(18px,2.4vw,34px);padding:0 6vw;text-align:center}
.marca h1{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(56px,13.5vw,232px);line-height:.84;letter-spacing:-.005em;
  color:var(--papel-100);text-shadow:.035em .035em 0 var(--lima-400)}
.sub{margin:0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.42em;
  text-indent:.42em;font-size:clamp(11px,1.35vw,22px);color:var(--lima-300)}

/* ── manifesto ── */
.manifesto{background:var(--verde-900);padding:clamp(72px,12vh,150px) 6vw;display:grid;place-items:center}
.manifesto p{margin:0;max-width:24ch;text-align:center;font-family:var(--font-display);
  text-transform:uppercase;font-size:clamp(24px,4.4vw,64px);line-height:1.12;color:var(--verde-400)}
.manifesto span{color:var(--papel-100);text-shadow:.04em .04em 0 var(--lima-400)}

/* ── catálogo ── */
.catalogo{background:var(--papel-100);padding:clamp(56px,9vh,110px) 6vw clamp(72px,12vh,140px);
  display:grid;gap:clamp(28px,4vh,48px);justify-items:center}
.olho{margin:0;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.42em;
  text-indent:.42em;font-size:12px;color:var(--tinta-500)}
.catalogo ul{list-style:none;margin:0;padding:0;width:100%;max-width:1040px;display:grid}
.catalogo li{display:grid;grid-template-columns:2.6ch 1fr auto;gap:clamp(14px,2.4vw,34px);
  align-items:baseline;padding:clamp(18px,2.6vh,28px) 0;border-top:1px solid var(--papel-300)}
.catalogo li:last-child{border-bottom:1px solid var(--papel-300)}
.n{font-family:var(--font-display);font-size:12px;color:var(--tinta-300)}
.t{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(22px,3.4vw,44px);
  line-height:1;color:var(--verde-900);text-decoration:none;
  transition:color 220ms cubic-bezier(.4,0,.2,1)}
a.t:hover{color:var(--verde-700)}
.t.futuro{color:var(--tinta-300)}
.ctx{font-family:var(--font-body);font-size:.34em;letter-spacing:.14em;color:var(--tinta-500)}
.st{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.st.ar{background:var(--lima-400);color:var(--verde-900)}
.st.formacao{box-shadow:inset 0 0 0 1.5px var(--verde-300);color:var(--verde-700)}
.st.futuro{box-shadow:inset 0 0 0 1.5px var(--tinta-100);color:var(--tinta-300)}

footer{background:var(--verde-900);color:var(--verde-300);padding:clamp(32px,5vh,56px) 6vw;
  display:flex;justify-content:center;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.3em;font-size:11px}

@media (max-width:640px){
  .catalogo li{grid-template-columns:2.6ch 1fr;row-gap:12px}
  .st{grid-column:2;justify-self:start}
}