:root{
  /* PRETO — decidido 09/08/2026. O bege foi descartado ("horrível").
     Os papéis de --paper e --ink foram INVERTIDOS: --paper agora é o preto
     (fundo do site) e --ink é o claro (texto). Os nomes ficaram para não
     reescrever todo o CSS — leia --paper como "superfície", --ink como "tinta". */
  --paper:#0B0A09; --paper-2:#141210; --paper-3:#1E1B18;   /* fundos, do mais escuro */
  --ink:#F2EDE6; --ink-soft:#CFC7BC;                        /* texto claro */
  --muted:#8C8378; --muted-soft:#6B635A;
  --line:rgba(242,237,230,.13);
  --ac:#6E9B7F; --ac-deep:#8FB89D;   /* verde clareado p/ contraste sobre preto */
  --king:'Loved by the King',cursive;
  --mono:'Cutive Mono',monospace;
  --sans:'Inter',-apple-system,sans-serif;
  --gutter:1.4rem; --max-w:1500px;   /* respiro lateral no celular */
  --ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:600px){:root{--gutter:clamp(1.4rem,4vw,3.2rem)}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* ⚠️ !important porque o reset `*{padding:0}` acima vencia esta regra e o
   conteúdo ficava COLADO na borda do celular (bug reportado em 12/08/2026). */
.wrap{max-width:var(--max-w);margin:0 auto;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
/* respiro maior no celular: 1.4rem era pouco para leitura confortável */
@media(max-width:599px){:root{--gutter:1.15rem}}

/* HEADER */
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,10,9,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background .4s var(--ease)}
/* sobre fundo preto o header sumia — a borda separa ele do conteúdo */
.hdr.scrolled{border-color:var(--line);background:rgba(11,10,9,.94)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:96px}
/* logo = botão de home. O filtro deixa a logo BRANCA (o site é preto);
   o antigo pintava de preto sobre preto e ela sumia. */
.logo{display:flex;align-items:center;flex:0 0 auto}
/* ⚠️ SEM filter: o antigo `brightness(0) invert(1)` esmagava os 4.182 pixels de
   borda suave da tipografia e deixava o traço serrilhado ("qualidade podre").
   A logo.png já vem branca e em 3x (194x138 para exibir a 46px). */
.logo img{height:46px;width:auto;opacity:.94;transition:opacity .35s var(--ease)}
.logo:hover img{opacity:1}
.nav{display:flex;gap:2.6rem}
.nav a{font-family:var(--mono);font-size:1.125rem;position:relative;padding:.2rem 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ac-deep)}
/* preenchido branco -> vira outline no hover */
.wpp{font-family:var(--mono);font-size:1rem;background:var(--ink);color:#0B0A09;border:1px solid var(--ink);padding:.55rem 1.3rem;border-radius:999px;transition:.35s var(--ease);white-space:nowrap}
.wpp:hover{background:transparent;color:var(--ink)}
.badge{position:fixed;left:var(--gutter);bottom:1.2rem;z-index:70;font-family:var(--mono);font-size:.75rem;background:var(--paper-3);color:var(--ink);padding:.45rem .9rem;border-radius:999px;opacity:.9}
.badge a{color:var(--ac);margin-left:.5rem}

/* CAPA — parallax de sobreposição:
   a capa fica presa no fundo (z-index 0) e o conteúdo seguinte sobe por cima dela.
   O <main> tem fundo próprio e z-index maior, então "cobre" a foto ao rolar. */
/* altura = tela menos o header, senão o lema cai abaixo do corte */
.hero{position:sticky;top:0;height:calc(100svh - 96px);min-height:520px;margin-top:96px;overflow:hidden;background:var(--paper-2);z-index:0}
/* CELULAR: a capa é horizontal (16:9) numa tela vertical, então sempre há corte.
   Altura menor = menos corte. Não mostra a imagem inteira de propósito —
   o Rafael pediu para reduzir o corte, mas sem virar uma faixa fina. */
@media(max-width:599px){
  .hero{height:48svh;min-height:320px}
  .hero-video-local,.hero-media img{object-position:50% 50%}
}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Vídeo de fundo HOSPEDADO NO SITE (não é mais YouTube).
   Motivo: o YouTube entregava 720p esticado numa tela de 2133px — imagem lavada.
   Aqui o bitrate é nosso, e não existe player nem controles para esconder.
   A foto fica embaixo como cartaz: aparece enquanto carrega e no celular. */
.hero-video-local{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;opacity:0;
  transition:opacity 1.2s var(--ease);pointer-events:none}
.hero-video-local.pronto{opacity:1}
.hero-txt{z-index:3}
/* tudo depois da capa sobe por cima dela */
.apos-capa{position:relative;z-index:1;background:var(--paper)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,11,.12),rgba(15,13,11,.04) 45%,rgba(15,13,11,.55))}
/* lema no terço inferior (não colado na base) — some rápido demais lá embaixo */
.hero-txt{position:absolute;left:0;right:0;bottom:clamp(6rem,22vh,11rem);z-index:2;text-align:center;padding:0 var(--gutter)}
/* lema: fonte secundária (mono), menor e espaçada — não display */
.hero-txt h1{font-family:var(--mono);font-weight:400;font-size:clamp(.95rem,2.1vw,1.6rem);line-height:1.4;color:#fff;text-shadow:0 2px 24px rgba(15,13,11,.55);letter-spacing:.22em;text-transform:lowercase}
.hero-txt p{font-family:var(--mono);font-size:clamp(.85rem,1.7vw,1.15rem);color:rgba(255,255,255,.9);margin-top:.8rem}

/* TÍTULOS DE SEÇÃO */
.sec{padding:clamp(4rem,11vh,8rem) 0;scroll-margin-top:96px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem}
/* títulos em mono (fonte secundária), bem menores que a display anterior */
.sec-title{font-family:var(--mono);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;font-weight:400;letter-spacing:.06em}
.sec-title .dot{color:var(--ac)}
.sec-sub{font-family:var(--mono);font-size:1.0625rem;color:var(--muted);max-width:38ch;line-height:1.55}

/* MANIFESTO */
.manifesto{text-align:center;padding:clamp(5rem,15vh,10rem) 0}
/* manifesto: mono, mais largo — antes era 17ch e virava um bloco estreito */
.manifesto h2{font-family:var(--mono);font-size:clamp(1.15rem,2.6vw,2.05rem);line-height:1.62;font-weight:400;max-width:44ch;margin:0 auto;letter-spacing:.02em}
.manifesto h2 em{font-style:normal;color:var(--ac-deep)}
.manifesto p{font-family:var(--mono);font-size:1rem;color:var(--muted);max-width:50ch;margin:1.6rem auto 0}

/* RODAPÉ */
.ft{background:var(--paper-2);color:var(--ink);padding:clamp(3rem,7vh,5rem) 0 2rem;font-family:var(--mono);border-top:1px solid var(--line)}
.ft-top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;padding-bottom:2rem;border-bottom:1px solid var(--line)}
.ft img{height:38px;width:auto;opacity:.85}   /* logo.png já vem branca — sem filter */
.ft-lema{font-size:.8125rem;color:var(--muted);margin-top:.8rem}
.ft-cols{display:flex;gap:3.2rem;flex-wrap:wrap}
.ft-col h5{font-size:.75rem;color:var(--muted-soft);margin-bottom:.7rem}
.ft-col address{font-style:normal;font-size:.8125rem;line-height:1.85;color:var(--ink-soft)}
.ft-end{max-width:24ch}
.ft-col a{display:block;font-size:.875rem;color:var(--ink-soft);padding:.18rem 0;transition:color .3s var(--ease)}
.ft-col a:hover{color:var(--ac-deep)}
.ft-btm{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.3rem;font-size:.75rem;color:var(--muted-soft)}

/* REVEAL DE IMAGEM (máscara) */
.mask{overflow:hidden;position:relative}
.mask img{clip-path:inset(0 0 100% 0);transform:scale(1.08);transition:clip-path 1.15s var(--ease),transform 1.5s var(--ease)}
.mask.in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* FADE TEXTO */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---- MENU MOBILE ----
   Até 899px o menu horizontal não cabe. Antes ele simplesmente sumia e o site
   ficava SEM NAVEGAÇÃO no celular. Agora vira hambúrguer + painel de tela cheia. */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  padding:0;position:relative;z-index:80}
.burger span{display:block;width:24px;height:1px;background:var(--ink);margin:6px auto;
  transition:transform .35s var(--ease),opacity .25s var(--ease)}
body.menu-aberto .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-aberto .burger span:nth-child(2){opacity:0}
body.menu-aberto .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ⚠️ começa ABAIXO do header (96px). Com inset:0 ele cobria o próprio botão
   de fechar e a logo, e o usuário ficava preso no menu sem como voltar. */
.menu-mob{position:fixed;top:96px;left:0;right:0;bottom:0;z-index:55;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.6rem;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
body.menu-aberto .menu-mob{opacity:1;visibility:visible}
.menu-mob a{font-family:var(--mono);font-size:1.35rem;letter-spacing:.06em;color:var(--ink)}
.menu-mob .wpp-mob{margin-top:1.4rem;background:var(--ink);color:#0B0A09;
  border-radius:999px;padding:.9rem 2.2rem;font-size:1rem}

@media(max-width:899px){
  .nav{display:none}
  .burger{display:block}
  .hdr .wpp{display:none}          /* o contato fica dentro do painel */
  body.menu-aberto{overflow:hidden}
}
@media(max-width:599px){
  .hero{height:76svh;min-height:0}
  .rv{opacity:1;transform:none}
  .mask img{clip-path:none;transform:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.mask img{clip-path:none;transform:none}}