/* ==========================================================================
   NIVOR — DESIGN SYSTEM · BASE
   Reset, tipografia, componentes e layout. Mobile-first: o padrão é o
   celular; media queries só somam a partir de 640px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--s-5));
}

body{
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;              /* trava rolagem horizontal involuntária */
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }

:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

::selection{ background:var(--cream); color:#0B1220; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Link de pulo — primeiro elemento tabulável da página. */
.skip{
  position:absolute; left:var(--s-4); top:-100px; z-index:var(--z-overlay);
  background:var(--cream); color:#0B1220; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-sm); font-weight:600; font-size:var(--t-small);
  transition:top var(--d-micro) var(--ease);
}
.skip:focus{ top:var(--s-4); }

/* --------------------------------------------------------------------------
   2. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:var(--lh-title);
  letter-spacing:var(--tr-title);
  text-wrap:balance;             /* evita órfãs em títulos de 2–3 linhas */
}

.t-display{
  font-size:var(--t-display);
  line-height:var(--lh-display);
  letter-spacing:var(--tr-display);
  font-weight:600;
}
h2,.t-h2{ font-size:var(--t-h2); }
h3,.t-h3{ font-size:var(--t-h3); letter-spacing:-.018em; }
h4,.t-h4{ font-size:var(--t-h4); letter-spacing:-.01em; font-weight:600; }

/* Rótulo técnico: mono, caixa alta, precedido de hairline. É a "marcação
   de instrumento" que dá a assinatura da marca. */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s-3);
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow::before{
  content:""; width:24px; height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--cream));
}
.eyebrow--cream{ color:var(--cream); }
.eyebrow--center{ justify-content:center; }

.lead{
  font-size:var(--t-lead);
  color:var(--ink-2);
  max-width:var(--maxw-text);
  text-wrap:pretty;
}
.prose{ color:var(--ink-2); max-width:var(--maxw-text); text-wrap:pretty; }
.prose + .prose{ margin-top:var(--s-4); }
.prose strong,.lead strong{ color:var(--ink); font-weight:600; }

/* Índice numérico — 01, 02, 03. */
.idx{
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:.14em; color:var(--cream);
}

/* Grifo: faixa creme atrás da linha de base, no lugar de negrito. */
.mark{
  background:linear-gradient(transparent 62%, var(--cream-glow) 0);
  padding:0 2px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  position:relative; z-index:var(--z-base);
}
.wrap--narrow{ max-width:920px; }

.sec{ padding-block:var(--sec-y); position:relative; }
.sec--tight{ padding-block:var(--sec-y-tight); }
.sec--line{ border-top:1px solid var(--line); }

/* Seção clara — inverte todos os papéis de cor de uma vez. */
.sec--paper{
  background:var(--paper);
  --ink:var(--paper-ink);
  --ink-2:var(--paper-ink-2);
  --ink-3:var(--paper-ink-3);
  --line:var(--paper-line);
  --line-strong:var(--paper-line-2);
  --surface-glass:var(--paper-raised);
  color:var(--paper-ink);
}
.sec--paper .eyebrow::before{ background:linear-gradient(90deg,transparent,#B08D3C); }

/* Cabeçalho de seção — padrão único usado em todas as seções. */
.sec-head{ max-width:760px; }
.sec-head h2{ margin-top:var(--s-5); }
.sec-head .lead{ margin-top:var(--s-5); }

.grid{ display:grid; gap:var(--s-5); }
@media (min-width:760px){
  .grid--2{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); }
  .grid--3{ grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
}
@media (min-width:1000px){
  .grid--split{ grid-template-columns:1.02fr .98fr; gap:clamp(40px,5vw,80px); align-items:center; }
}

.rule{ height:1px; background:var(--line); border:0; }

/* --------------------------------------------------------------------------
   4. BOTÕES
   Alvo mínimo de toque: 44px de altura (padding 14 + 14 + linha 17).
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:46px; padding:var(--s-3) var(--s-5);
  font-family:var(--f-body); font-size:var(--t-small); font-weight:600;
  letter-spacing:.005em; white-space:nowrap;
  border:1px solid transparent; border-radius:var(--r-pill);
  cursor:pointer;
  transition:background var(--d-hover) var(--ease),
             border-color var(--d-hover) var(--ease),
             color var(--d-hover) var(--ease),
             box-shadow var(--d-hover) var(--ease);
}
/* A seta é o único elemento que se move no hover — o botão fica parado,
   então nada empurra o layout. */
.btn .arw{ transition:transform var(--d-hover) var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

.btn--primary{
  background:var(--cream); color:#0B1220;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-1);
}
.btn--primary:hover{ background:var(--cream-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -12px var(--cream-glow); }

.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--cream); color:var(--cream); background:var(--cream-veil); }
.sec--paper .btn--ghost{ border-color:var(--paper-line-2); color:var(--paper-ink); }
.sec--paper .btn--ghost:hover{ border-color:var(--paper-ink); background:rgba(11,18,32,.04); color:var(--paper-ink); }

/* Link com seta — usado como CTA terciário dentro de cards. */
.link-arw{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream);
  transition:color var(--d-hover) var(--ease);
}
.link-arw .arw{ transition:transform var(--d-hover) var(--ease); }
.link-arw:hover .arw{ transform:translateX(4px); }
.sec--paper .link-arw{ color:#8A6D22; }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); }
.btn-row--center{ justify-content:center; }

/* Telas estreitas: `white-space:nowrap` fazia frases longas como "Quero um
   painel da minha operação" estourarem a largura. Como o body tem
   overflow-x:hidden, o excesso não gerava rolagem — era simplesmente cortado.
   Aqui o botão passa a ocupar a linha inteira e o texto pode quebrar. */
@media (max-width:520px){
  .btn{
    white-space:normal; text-align:center; line-height:1.25;
    padding-inline:var(--s-4);
  }
  .btn-row .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   5. CARDS
   -------------------------------------------------------------------------- */
.card{
  position:relative;
  background:var(--surface-glass);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  transition:border-color var(--d-hover) var(--ease),
             background var(--d-hover) var(--ease),
             box-shadow var(--d-hover) var(--ease);
}
/* Highlight de topo de 1px: dá volume sem sombra pesada. */
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  border-radius:var(--r) var(--r) 0 0; pointer-events:none;
}
.sec--paper .card{ background:var(--paper-raised); box-shadow:var(--shadow-paper); }
.sec--paper .card::before{ display:none; }

a.card,.card--interactive{ cursor:pointer; }
.card:hover{ border-color:var(--line-cream); box-shadow:var(--shadow-2); }
.sec--paper .card:hover{ border-color:var(--paper-line-2); box-shadow:0 1px 2px rgba(11,18,32,.06), 0 20px 44px -26px rgba(11,18,32,.30); }

.card--cream{ background:var(--cream-veil); border-color:var(--line-cream); }

.card__cat{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.card h3{ margin-top:var(--s-3); }
.card__desc{ margin-top:var(--s-3); color:var(--ink-2); font-size:var(--t-small); }
.card__foot{ margin-top:var(--s-6); }

/* --------------------------------------------------------------------------
   6. REVELAÇÃO NO SCROLL
   Só transform e opacity. O elemento ocupa seu espaço final desde o início,
   portanto não há layout shift em momento algum (§23 do briefing).
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity var(--d-reveal) var(--ease-soft),
             transform var(--d-reveal) var(--ease-soft);
  transition-delay:calc(var(--i,0) * 70ms);
  will-change:opacity,transform;
}
.reveal.is-in{ opacity:1; transform:none; }
/* Depois de revelado o will-change sai, liberando a camada de composição. */
.reveal.is-done{ will-change:auto; }

/* --------------------------------------------------------------------------
   7. NAVEGAÇÃO
   -------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:var(--z-nav);
  background:rgba(6,11,22,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.nav.is-scrolled{ background:rgba(6,11,22,.94); border-bottom-color:var(--line); }

.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:var(--s-5); }

.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-body); font-weight:800; font-size:1.22rem;
  letter-spacing:-.01em; color:var(--ink);
}
.brand__mark{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--cream); box-shadow:0 0 0 4px rgba(255,251,200,.10), 0 0 16px 3px var(--cream-glow);
}

.nav__menu{ display:flex; align-items:center; gap:var(--s-6); }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  min-height:44px; font-size:var(--t-small); color:var(--ink-2);
  transition:color var(--d-micro) var(--ease);
}
/* O sublinhado pertence ao TEXTO, não à caixa do link. A caixa tem 44px de
   altura por causa do alvo de toque; ancorar nela colocava a linha no meio
   das letras, com cara de texto riscado. */
.nav__link > span{ position:relative; display:inline-block; }
.nav__link > span::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1.5px; width:0;
  background:var(--cream); border-radius:2px;
  transition:width var(--d-hover) var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ color:var(--ink); }
.nav__link:hover > span::after{ width:100%; }

/* Submenu de Soluções — abre no hover (ponteiro) e no clique (teclado/toque) */
.nav__group{ position:relative; }
.nav__panel{
  position:absolute; top:calc(100% - 6px); left:-14px; min-width:268px;
  background:rgba(10,17,32,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line-strong); border-radius:var(--r);
  padding:var(--s-2); box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--d-micro) var(--ease), transform var(--d-micro) var(--ease), visibility var(--d-micro);
}
.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__panel.is-open{ opacity:1; visibility:visible; transform:none; }

.nav__panel a{
  display:block; padding:var(--s-3) var(--s-4); border-radius:var(--r-sm);
  transition:background var(--d-micro) var(--ease);
}
.nav__panel a:hover{ background:rgba(255,255,255,.05); }
/* display:block é o que separa o título da descrição — sem ele os dois spans
   ficam na mesma linha, colados. */
.nav__panel .t{ display:block; font-size:var(--t-small); font-weight:600; color:var(--ink); line-height:1.35; }
.nav__panel .d{ display:block; font-size:.8125rem; color:var(--ink-3); margin-top:5px; line-height:1.45; }

/* Contato do rodapé: ícone + número numa linha só, sem quebra. */
.footer .wa{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.footer .wa svg{ width:17px; height:17px; flex:none; fill:currentColor; }
.footer .wa:hover svg{ fill:var(--cream); }

.nav__toggle{
  display:grid; place-items:center; width:44px; height:44px;
  margin-right:-8px; border-radius:var(--r-sm);
}
.nav__toggle span{
  display:block; width:22px; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform var(--d-hover) var(--ease), opacity var(--d-micro) var(--ease);
}
.nav__toggle span + span{ margin-top:6px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Painel mobile: altura dinâmica (dvh) porque 100vh estoura sob a barra
   de endereço do iOS. */
.nav__drawer{
  position:fixed; inset:var(--nav-h) 0 auto 0;
  height:calc(100dvh - var(--nav-h));
  background:rgba(6,11,22,.985);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  padding:var(--s-6) var(--gutter) var(--s-8);
  overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:var(--s-2);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity 320ms var(--ease), transform 320ms var(--ease), visibility 320ms;
  z-index:var(--z-overlay);
}
.nav__drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.nav__drawer a{
  display:block; padding:var(--s-4) 0; font-family:var(--f-display);
  font-size:1.6rem; letter-spacing:-.02em; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.nav__drawer .sub{
  padding-left:var(--s-5); font-family:var(--f-body); font-size:1.0625rem;
  color:var(--ink-2); letter-spacing:0;
}
.nav__drawer .grp{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--ink-3); padding:var(--s-5) 0 var(--s-2);
}
/* O botão da gaveta precisa DESFAZER o que `.nav__drawer a` impôs. Aquele
   seletor tem especificidade maior que `.btn` e estava entregando tinta clara
   sobre fundo creme, corpo de 1.6rem, padding lateral zero e a borda inferior
   do link — o botão saía ilegível e torto. Tudo que ele define precisa ser
   redeclarado aqui, senão volta a vazar. */
.nav__drawer .btn{
  margin-top:var(--s-7); width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; padding:var(--s-4) var(--s-5);
  font-family:var(--f-body); font-size:var(--t-body); font-weight:600;
  letter-spacing:.005em; line-height:1.25; text-align:center;
  white-space:normal;
  border-bottom:0; border-radius:var(--r-pill);
}
.nav__drawer .btn--primary{ color:#0B1220; }
.nav__drawer .btn--ghost{ color:var(--ink); }

/* --------------------------------------------------------------------------
   8. RODAPÉ
   -------------------------------------------------------------------------- */
.footer{ border-top:1px solid var(--line); padding-block:var(--s-8) var(--s-7); }
.footer__grid{ display:grid; gap:var(--s-7); }
.footer__cols{ display:grid; gap:var(--s-6); }
.footer h4{
  font-family:var(--f-mono); font-size:var(--t-label); font-weight:500;
  letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--s-4);
}
.footer li + li{ margin-top:var(--s-3); }
.footer li a{ font-size:var(--t-small); color:var(--ink-2); transition:color var(--d-micro) var(--ease); }
.footer li a:hover{ color:var(--cream); }
.footer__base{
  margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

/* Três colunas só a partir de 900px. Entre 760 e 900 cada coluna ficava com
   ~211px e o e-mail do rodapé, que não quebra linha, media ~198px — passava
   raspando e podia ser cortado pelo overflow-x do body. */
@media (min-width:760px){
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:900px){
  .footer__cols{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  .footer__grid{ grid-template-columns:1.4fr 2fr; gap:var(--s-9); }
}

/* --------------------------------------------------------------------------
   9. PONTOS DE QUEBRA DA NAVEGAÇÃO
   -------------------------------------------------------------------------- */
.nav__menu{ display:none; }
@media (min-width:1000px){
  .nav__menu{ display:flex; }
  .nav__toggle{ display:none; }
  .nav__drawer{ display:none; }
}

/* --------------------------------------------------------------------------
   10. MOVIMENTO REDUZIDO
   Quem pediu menos movimento recebe a página inteira, estática e completa.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}