/* Páginas de projeto (feitos e ideias). Estrutura inspirada em
   portavia.framer.website/projects/summer-vibes-festival-campaign:
   título, ficha (Ano · Setor · Duração), capa larga, secções numa coluna
   com imagens a meio, "Mais projetos" no fim. Tokens iguais aos do index.html. */
:root{
  --bg:#0b0b0f; --fg:#f4f4f5; --muted:#9a9aa5; --accent:#c6f24e; --card:#15151c;
  --line:#22222c; --max:1000px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto}
@media (max-width:1079px){.wrap{padding:0 40px}}
@media (max-width:809px){.wrap{padding:0 20px}}

/* a nav está em assets/nav.css, partilhada com a página inicial */

/* ===== abertura ===== */
.hero{padding-top:160px}
.tag{display:inline-block;border:1px solid var(--accent);color:var(--accent);
  border-radius:999px;padding:3px 15px;font-family:'Inter',sans-serif;font-size:.82rem;margin-bottom:20px}
h1{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;max-width:18ch}
.lead{font-family:'Oswald',sans-serif;font-weight:300;color:#c9c9d1;
  font-size:clamp(1.05rem,2.2vw,1.2rem);max-width:70ch;margin-top:18px}

/* ficha: rótulo pequeno, valor na cor de destaque (como na referência) */
.ficha{display:grid;gap:20px 24px;grid-template-columns:repeat(3,1fr);max-width:720px;margin-top:36px}
@media (max-width:809px){.ficha{grid-template-columns:1fr 1fr}}
.ficha b{font-family:'Inter',sans-serif;font-weight:400;font-size:.85rem;color:var(--muted);display:block}
.ficha span{font-family:'Inter',sans-serif;font-weight:400;font-size:1rem;color:var(--accent)}

/* ===== imagens ===== */
/* .ph = lugar de uma imagem ainda por fazer: mostra o que lá vai.
   Para pôr a imagem: <img class="img" src="../assets/projetos/..."> no lugar da <figure class="ph">. */
.img,.ph{width:100%;border-radius:24px;display:block;object-fit:cover;aspect-ratio:16/9}
.ph{position:relative;overflow:hidden;display:grid;place-items:center;padding:28px;text-align:center;
  background:linear-gradient(135deg,var(--c,#2b3a0c),#0b0b0f 75%);border:1px dashed #3a3a46}
.ph figcaption{font-family:'Oswald',sans-serif;font-weight:300;font-size:1rem;color:#c9c9d1;max-width:46ch}
.ph figcaption::before{content:"Imagem";display:block;font-family:'Inter',sans-serif;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.capa{margin-top:48px}
.wide{margin-top:36px}
.par{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.par .img,.par .ph{aspect-ratio:5/4}
@media (max-width:809px){.par{grid-template-columns:1fr}}

/* ===== secções: título "PROBLEMA :" por cima, texto a uma coluna ===== */
.sec{padding-top:72px}
.sec h2{font-family:'Antonio',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1;margin-bottom:18px}
.sec p{font-family:'Oswald',sans-serif;font-weight:300;color:#c9c9d1;font-size:1.08rem;line-height:1.65;max-width:76ch}
.sec p+p{margin-top:16px}
.sec p b{font-weight:500;color:var(--fg)}
.sec ul{list-style:none;margin-top:16px}
.sec li{font-family:'Oswald',sans-serif;font-weight:300;color:#c9c9d1;font-size:1.05rem;padding:6px 0 6px 30px;position:relative}
.sec li::before{content:"";position:absolute;left:0;top:1.1em;transform:translateY(-50%);width:19px;height:19px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4 12 14.01l-3-3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4 12 14.01l-3-3'/%3E%3C/svg%3E") center/contain no-repeat}
.src{font-family:'Inter',sans-serif !important;font-size:.82rem !important;color:var(--muted) !important;margin-top:20px !important}

/* o fluxo: etapas em duas colunas */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
@media (max-width:809px){.flow{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px 24px;position:relative}
.step-n{position:absolute;top:-14px;left:24px;width:38px;height:38px;border-radius:50%;background:var(--accent);color:#0b0b0f;
  display:grid;place-items:center;font-family:'Antonio',sans-serif;font-size:1.25rem}
.step h3{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.3rem;line-height:1.15;margin:14px 0 10px}
.step p{font-size:1rem}
.step li{font-size:.98rem;padding:5px 0 5px 28px}
.step li::before{width:17px;height:17px;top:1.05em}
.step-why{margin-top:16px !important;padding-top:14px;border-top:1px solid var(--line);color:var(--accent) !important;font-size:.95rem !important}
.step-extra{border-style:dashed}
.step-extra .step-n{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--accent);border:1px solid #33420f;border-radius:999px;padding:4px 12px}

.conn{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:22px}
.conn-item{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.conn-item b{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;color:var(--muted);display:block;font-weight:600}
.conn-item span{font-family:'Antonio',sans-serif;font-size:1.2rem;display:block;margin:4px 0 8px}
.conn-item small{font-family:'Inter',sans-serif;font-size:.85rem;color:var(--muted);line-height:1.45;display:block}

.stats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:24px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px}
.stat b{font-family:'Antonio',sans-serif;font-size:2.1rem;color:var(--accent);display:block;line-height:1.05}
.stat small{font-family:'Inter',sans-serif;font-size:.88rem;color:var(--muted);display:block;margin-top:8px;line-height:1.45}

/* ===== chamada ===== */
.pitch{margin-top:96px;padding:48px;border:1px solid var(--line);border-radius:28px;background:var(--card)}
.pitch h2{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}
.pitch h2 .dot{color:var(--accent)}
.pitch p{font-family:'Oswald',sans-serif;font-weight:300;color:#c9c9d1;font-size:1.1rem;line-height:1.65;max-width:64ch}
.pitch p+p{margin-top:14px}
.cta-primary{display:inline-block;margin-top:28px;background:transparent;color:var(--accent);text-decoration:none;
  font-family:'Antonio',sans-serif;font-weight:400;text-transform:uppercase;line-height:1.3;font-size:24px;padding:7px 30px;
  border:1px solid var(--accent);border-radius:99px;transition:transform .2s,background .2s,color .2s}
.cta-primary:hover{transform:translateY(-3px);background:var(--accent);color:#0b0b0f}
@media (max-width:809px){.pitch{padding:28px 22px}}

/* ===== mais projetos ===== */
.mais{padding-top:96px}
.mais-head{display:flex;align-items:center;gap:24px;margin-bottom:36px}
.mais-head h2{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,4vw,2.8rem);white-space:nowrap}
.mais-head::after{content:"";flex:1;height:1px;background:var(--line)}
.mais-grid{display:grid;gap:36px 28px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit}
.card-img{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center;transition:transform .3s}
.card:hover .card-img{transform:translateY(-6px)}
.card-arrow{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:var(--accent);color:#0b0b0f;
  display:grid;place-items:center;font-size:1.7rem;opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s cubic-bezier(.2,1.4,.4,1)}
.card:hover .card-arrow{opacity:1;transform:scale(1)}
.card-tag{align-self:flex-start;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:3px 15px;font-family:'Inter',sans-serif;font-size:.82rem}
.card h3{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15}
.card p{font-family:'Inter',sans-serif;font-weight:300;font-size:.95rem;line-height:1.5;color:var(--muted)}

/* ===== footer verde (igual ao index) ===== */
.footer-green{background:var(--accent);color:#0b0b0f;margin-top:110px}
.footer-green .fg-inner{padding:48px 0 24px;display:flex;flex-wrap:wrap;gap:32px 60px;justify-content:space-between}
.footer-green b{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em;opacity:.65;display:block;margin-bottom:4px;font-weight:600}
.footer-green a{color:#0b0b0f;font-weight:600;text-decoration:none;font-size:1.05rem}
.footer-green .fg-copy{padding:0 0 40px;font-size:.8rem;opacity:.7}

/* ===================================================================
   Páginas Sobre / Projetos / Serviços (raiz do site). Mesma pele das
   páginas de projeto; estrutura das páginas about / projects / blogs da referência.
   =================================================================== */

/* galeria em pilha (assets/stack.js) — igual à da página inicial */
.scroll-stack{position:relative;padding-bottom:8vh;margin-top:44px}
.stack-card{position:relative;width:100%;height:min(640px,76vh);border-radius:28px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  padding:44px;color:#fff;background-color:#0b0b0f;background-size:100% auto;background-position:center top;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transform-origin:center top;will-change:transform;text-decoration:none}
.stack-card:not(:last-of-type){margin-bottom:8vh}
.stack-card::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(11,11,15,.96) 60%)}
.stack-card>*{position:relative;z-index:1}
.stack-tag{display:inline-block;background:var(--accent);color:#0b0b0f;font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:.82rem;letter-spacing:.03em;padding:5px 16px;border-radius:999px;margin-bottom:16px}
.stack-title{font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1.1;margin-bottom:12px}
.stack-desc{font-family:'Oswald',sans-serif;font-weight:300;max-width:56ch;color:#e7e7ea;font-size:1.05rem}
.stack-more{font-family:'Oswald',sans-serif;font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-top:18px;
  border-bottom:1px solid currentColor;opacity:.75;transition:opacity .2s}
.stack-card:hover .stack-more{opacity:1;color:var(--accent)}
.scroll-stack-end{width:100%;height:1px}
@media (max-width:809px){.stack-card{height:auto;min-height:60vh;padding:28px}.stack-card:not(:last-of-type){margin-bottom:24px}}

/* serviços: cartão em destaque + grelha (disposição da página de blog da referência) */
.destaque{margin-top:44px}
.destaque .card-img{aspect-ratio:21/9}
.selo{position:absolute;top:20px;left:20px;background:var(--accent);color:#0b0b0f;border-radius:999px;padding:6px 16px;
  font-family:'Antonio',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem}
.card-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-meta small{font-family:'Inter',sans-serif;font-size:.85rem;color:var(--muted)}
.card ul.itens{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.card ul.itens li{font-family:'Inter',sans-serif;font-size:.8rem;color:var(--accent);border:1px solid #33420f;border-radius:999px;padding:4px 12px}
.card .ler{font-family:'Oswald',sans-serif;font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#e7e7ea;
  align-self:flex-start;border-bottom:1px solid currentColor;margin-top:4px}
.card:hover .ler{color:var(--accent)}
.servicos-grid{display:grid;gap:36px 28px;grid-template-columns:1fr 1fr;margin-top:48px}
@media (max-width:809px){.servicos-grid{grid-template-columns:1fr}.destaque .card-img{aspect-ratio:16/9}}