/* =========================================================================
   Bird Negócios Digitais — folha de estilo única
   Home de tela única + página de erro.

   Sistema visual: paleta Outono Profundo · Jost (display) + Inter (corpo)
   Regra de cor do manual: 60% verde dominante · 30% neutro · 10% mostarda,
   e mostarda é COR DE FORMA — filete, anel, bloco. Nunca palavra pequena.

   A home tem duas peças de referência japonesa: o padrão seigaiha como chão
   e a tira vertical (tanzaku) com 販売道 na borda direita. Ambas decorativas,
   ambas com aria-hidden, nenhuma atrás de texto. Se não carregarem, a página
   continua idêntica em conteúdo e em legibilidade.

   Havia também um enso com a marca-d'água do kanji 道 preenchendo a metade
   direita. Saiu: mesmo apagado, formava massa atrás da copy e competia com a
   leitura — no celular chegava a cortar as linhas no meio. Está no git,
   commit aa8176b, se um dia fizer sentido retomar em outro formato.

   O histórico da home anterior — nove seções — está no git, commit 85c7263.
   ========================================================================= */

/* ---------- fontes self-hosted (sem chamada a terceiros) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* subset com 3 glifos (販 売 道), 2 kB — só para a camada decorativa */
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-sans-jp-subset.woff2') format('woff2');unicode-range:U+58F2, U+8CA9, U+9053;}

/* ---------- tokens ---------- */
:root{
  --verde:#234B3A;
  --verde-fundo:#1B3A2D;
  --verde-mais-escuro:#142A20;
  --petroleo:#16505A;
  --mostarda:#C8A02C;
  --chocolate:#3C2A1E;
  --bege:#CDB89B;
  --creme:#EFE3C8;
  --marfim:#F7F1E2;

  --texto:var(--creme);
  --texto-fraco:var(--bege);
  --linha:rgba(239,227,200,.18);
  --linha-forte:rgba(239,227,200,.32);
  --foco:var(--mostarda);

  --display:'Jost',ui-sans-serif,system-ui,sans-serif;
  --corpo:'Inter',ui-sans-serif,system-ui,sans-serif;
  --dado:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --kanji:'Noto Sans JP',var(--display);

  --largura:1180px;
  --gutter:clamp(22px,5vw,52px);
  --raio:6px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--verde-fundo);
  color:var(--creme);
  font-family:var(--corpo);
  font-size:clamp(16px,.4vw + 15px,17px);
  line-height:1.7;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:2px}
::selection{background:var(--mostarda);color:var(--chocolate)}

.wrap{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:var(--gutter)}
.pular{position:absolute;left:-9999px}
.pular:focus{
  left:var(--gutter);top:12px;z-index:20;background:var(--mostarda);color:var(--chocolate);
  padding:10px 16px;border-radius:var(--raio);font-family:var(--display);font-weight:500
}

/* ---------- tipografia ---------- */
.h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(35px,5.6vw,62px);
  line-height:1.04;letter-spacing:-.028em;text-wrap:balance;color:var(--creme)
}
.h1 em{font-style:normal;color:var(--mostarda)}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.62;color:var(--texto-fraco)}
.lead strong{color:var(--creme);font-weight:500}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:500;font-size:16px;letter-spacing:-.008em;
  padding:15px 26px;border-radius:var(--raio);border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease
}
.btn svg{flex:0 0 auto}
.btn-1{background:var(--mostarda);color:#2E1F06;box-shadow:0 1px 0 rgba(60,42,30,.14)}
.btn-1:hover{background:#D8AE33;transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,160,44,.28)}
.btn-2{border-color:var(--linha-forte);color:var(--texto);background:transparent}
.btn-2:hover{border-color:var(--texto);transform:translateY(-1px)}
.btn-g{font-size:clamp(16px,1.3vw,18px);padding:18px 32px}
.acoes{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* =========================================================================
   HOME — tela única

   Composição assimétrica de propósito: o texto ocupa a esquerda e o vazio
   à direita é parte do desenho, com a tira vertical ancorando a borda.
   Abaixo de 1000px a tira some — nessa largura ela roubaria espaço de
   leitura sem acrescentar informação.
   ========================================================================= */
.casa{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  isolation:isolate
}

/* --- camada de fundo: só o padrão de ondas --- */
.cenario{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--creme)}

/* o padrão de ondas ocupa só a faixa de baixo, como chão */
.cenario-ondas{
  position:absolute;inset:auto 0 0 0;height:min(46%,420px);
  opacity:.085;
  -webkit-mask-image:linear-gradient(to top,#000 4%,transparent 100%);
  mask-image:linear-gradient(to top,#000 4%,transparent 100%)
}
.cenario-ondas svg{width:100%;height:100%}



/* --- topo --- */
.casa-topo{position:relative;z-index:1;padding-block:clamp(20px,3vw,30px)}
.casa-topo-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:11px;color:var(--creme)}
.marca svg{width:26px;height:26px}
.marca-nome{font-family:var(--display);font-weight:500;font-size:18.5px;letter-spacing:-.018em;white-space:nowrap}
.contato-topo{
  font-family:var(--dado);font-size:12px;letter-spacing:.06em;
  color:var(--texto-fraco);transition:color .15s ease;white-space:nowrap
}
.contato-topo:hover{color:var(--creme)}

/* --- miolo --- */
.casa-meio{
  position:relative;z-index:1;
  flex:1;display:flex;align-items:center;
  padding-block:clamp(34px,5vw,54px)
}
.casa-texto{max-width:min(100%,660px)}
/* 32px e não 22: sem o sobretítulo acima, o H1 encosta no primeiro
   parágrafo — a entrelinha curta do display deixa pouco espaço óptico */
.casa-texto .h1{margin-bottom:32px}
.casa-texto .lead{max-width:54ch}
.casa-texto .lead + .lead{margin-top:15px}
.casa-texto .acoes{margin-top:32px}
/* o marcador alinha com a PRIMEIRA linha, não com o centro do bloco —
   em telas estreitas a nota quebra em duas linhas e o ponto centralizado
   ficava boiando no meio */
.casa-nota{
  margin-top:14px;display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;color:var(--texto-fraco)
}
.casa-nota::before{
  content:"";width:7px;height:7px;margin-top:8px;border-radius:50%;flex-shrink:0;
  background:var(--mostarda)
}

/* --- tanzaku: a tira vertical colada na borda direita ---
   A escrita vertical fica nos <span>, não no contêiner. Com writing-mode no
   contêiner flex, o eixo de linha vira o vertical e o texto quebra em duas
   colunas quando o espaço abaixo do topo acaba — 販売道 saía partido. Aqui
   cada span é um bloco vertical próprio, com nowrap. */
.tanzaku{
  position:absolute;z-index:1;
  right:calc(var(--gutter) - 6px);top:50%;translate:0 -50%;
  display:none;flex-direction:column;align-items:center;gap:18px
}
.tanzaku-kanji,.tanzaku-romaji{writing-mode:vertical-rl;white-space:nowrap}
.tanzaku-kanji{
  font-family:var(--kanji);font-size:22px;line-height:1.5;
  letter-spacing:.24em;color:var(--mostarda)
}
.tanzaku-romaji{
  font-family:var(--dado);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--texto-fraco)
}
.tanzaku::after{content:"";width:1px;height:64px;background:var(--linha);flex-shrink:0}

/* --- rodapé de uma linha --- */
.casa-pe{position:relative;z-index:1;padding-block:clamp(14px,2vw,22px)}
.casa-pe-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 20px;
  font-family:var(--dado);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-fraco)
}
.casa-pe a{transition:color .15s ease}
.casa-pe a:hover{color:var(--creme)}

/* faixa de espectro da marca — assinatura na borda inferior */
.espectro{display:flex;height:5px}
.espectro span{flex:1}
.espectro span:nth-child(1){background:var(--verde)}
.espectro span:nth-child(2){background:var(--petroleo)}
.espectro span:nth-child(3){background:var(--mostarda)}
.espectro span:nth-child(4){background:var(--bege)}
.espectro span:nth-child(5){background:var(--creme)}

/* --- telas largas: o gráfico ganha espaço e a tira vertical aparece --- */
@media (min-width:1000px){
  .tanzaku{display:flex}
  .casa-meio .wrap{padding-right:calc(var(--gutter) + 62px)}
  .casa-texto{max-width:min(66%,720px)}
}
/* --- telas estreitas: o padrão encolhe e recua --- */
@media (max-width:999px){
  .cenario-ondas{height:min(30%,250px);opacity:.07}
}

/* =========================================================================
   PÁGINA DE ERRO (404)
   ========================================================================= */
.erro{min-height:100svh;display:flex;align-items:center;padding-block:60px}
.erro-cod{font-family:var(--dado);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mostarda);margin-bottom:22px}
.erro .h1{max-width:22ch;margin-bottom:20px}
.erro .lead{max-width:48ch;margin-bottom:32px}

/* =========================================================================
   IMPRESSÃO
   ========================================================================= */
@media print{
  .cenario,.tanzaku,.espectro{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .casa{min-height:auto}
  .h1,.lead,.marca,.casa-pe-in{color:#000}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}