/* ==========================================================================
   Rok Labs — sistema de design
   Paleta e tipografia de marca/design-guide.md.
   Um arquivo só, compartilhado pelas seis páginas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   --accent-text existe por motivo técnico: carmim #D91149 sobre #0A0A0A dá
   3,89:1 e reprova AA em texto pequeno. Carmim fica em preenchimento e
   display grande; texto pequeno de destaque usa --accent-text.
   -------------------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#0A0A0A;
  --surface:#141414;
  --surface-2:#1A1A1A;
  --line:#262626;
  --line-strong:#383838;
  --heading:#FFFFFF;
  --body:#E8E8E8;
  --muted:#9A9A9A;
  --accent:#D91149;
  --accent-hover:#C20E40;
  --accent-text:#FF3D6B;
  --vinho:#6A0827;
  --on-accent:#FFFFFF;
  --shade:rgba(255,255,255,.035);
  /* par vinho->carmim do manual de marca: superficies grandes e botao primario */
  --grad-brand:linear-gradient(135deg,#6A0827 0%,#D91149 100%);
  --grad-brand-hover:linear-gradient(135deg,#7C0A2E 0%,#C20E40 100%);

  --display:'Sora',system-ui,-apple-system,sans-serif;
  --text:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --gap-section:clamp(72px,9vw,128px);
  --radius:16px;
  --radius-sm:10px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F2F2F2;
  --surface:#FFFFFF;
  --surface-2:#EAEAEA;
  --line:#E2E2E2;
  --line-strong:#CFCFCF;
  --heading:#0A0A0A;
  --body:#3A3A3A;
  --muted:#6B6B6B;
  --accent:#D91149;
  --accent-hover:#B80F3D;
  --accent-text:#A80D38;
  --shade:rgba(0,0,0,.025);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

h1,h2,h3,h4{font-family:var(--display);color:var(--heading);line-height:1.08;font-weight:600;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:700;letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(1.75rem,3.4vw,2.65rem);letter-spacing:-.028em}
h3{font-size:clamp(1.3rem,2.1vw,1.7rem);letter-spacing:-.022em}
h4{font-size:1.0625rem;letter-spacing:-.01em}
p{margin-bottom:1.05em}
p:last-child{margin-bottom:0}
strong{color:var(--heading);font-weight:600}

:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* --------------------------------------------------------------------------
   PRIMITIVAS
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap-section);position:relative}
.section-sm{padding-block:clamp(48px,6vw,80px)}
/* quando o hero acima já deu o respiro, não somar padding em cima */
.section-tight{padding-block:0 clamp(52px,6.5vw,88px)}
.rule{border-top:1px solid var(--line)}
.measure{max-width:62ch}
.measure-tight{max-width:52ch}
.shade{background:var(--shade)}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:1.4rem;
}
.eyebrow b{color:var(--accent-text);font-weight:500}
.lede{font-size:clamp(1.09rem,1.55vw,1.26rem);color:var(--body);line-height:1.6}
.note{font-family:var(--mono);font-size:.75rem;line-height:1.65;color:var(--muted)}
.note-b{color:var(--accent-text);font-weight:500}

/* rótulo de papel do serviço — corrige / constrói / traz / orienta */
.papel{
  display:inline-block;font-family:var(--mono);font-size:.625rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid var(--line-strong);
  border-radius:999px;padding:.42em .9em;
}

/* --------------------------------------------------------------------------
   BOTÕES
   -------------------------------------------------------------------------- */
/* Botão tem quatro estados visíveis: repouso, hover, foco e pressionado.
   Botão secundário ganha superfície própria, e não só borda, senão não lê
   como botão. Link continua parecendo link (sublinhado), botão parece botão. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:600;font-size:.9375rem;line-height:1;
  padding:.86em 1.35em;border-radius:9px;border:1px solid transparent;
  cursor:pointer;text-align:center;user-select:none;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}

.btn-primary{background:var(--grad-brand);color:var(--on-accent)}
.btn-primary:hover{background:var(--grad-brand-hover);transform:translateY(-1px)}
.btn-primary:active{background:var(--grad-brand-hover);transform:translateY(0) scale(.985)}

.btn-ghost{border-color:var(--line-strong);color:var(--heading);background:var(--surface-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-text);background:var(--surface)}
.btn-ghost:active{transform:scale(.985)}

.btn-lg{font-size:1.0125rem;padding:1.02em 1.7em}
.btn-sm{font-size:.875rem;padding:.72em 1.1em}
/* estado de "trabalhando", pro clique não parecer que não fez nada */
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

.textlink{
  color:var(--muted);font-size:.9375rem;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;
}
.textlink:hover{color:var(--accent-text);border-bottom-color:var(--accent)}


/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
.header.is-stuck{
  background:var(--bg);
  border-bottom-color:var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .header.is-stuck{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(140%) blur(14px)}
}
.header-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:74px}

/* Lockup: simbolo + ROK sobre LABS, como no manual. O tamanho vem do
   font-size do .brand, entao o rodape so precisa mudar uma propriedade. */
.brand{display:inline-flex;align-items:center;gap:.46em;flex-shrink:0;font-size:1.22rem;color:var(--heading)}
.brand-mark{height:1.62em;width:auto;flex-shrink:0;transition:opacity .18s ease}
.brand-txt{font-family:var(--display);font-weight:700;font-size:1em;letter-spacing:-.03em;line-height:.9}
/* LABS espacado ate' cobrir a largura de ROK. O text-indent devolve o
   espaco que o letter-spacing pendura depois da ultima letra. */
.brand-txt i{
  display:block;font-style:normal;font-weight:600;font-size:.352em;
  letter-spacing:.92em;text-indent:.92em;color:var(--accent-text);
  margin-top:.5em;
}
.brand:hover .brand-mark{opacity:.82}

.nav{display:none;align-items:center;gap:clamp(16px,2.4vw,30px);margin-left:auto}
.nav a{font-size:.9375rem;color:var(--muted);transition:color .18s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--heading)}
@media (min-width:900px){ .nav{display:flex} }

/* ---------- menu suspenso de Serviços ----------
   :focus-within junto de :hover faz o menu abrir também pelo teclado.
   Nielsen: reconhecer em vez de lembrar. Os quatro serviços ficam visíveis
   com o papél de cada um, em vez de escondidos atrás de um clique. */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a::after{
  content:"";width:0;height:0;margin-left:.42em;
  border:3.5px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);transition:transform .18s ease;
}
.nav-item:hover > a::after,.nav-item:focus-within > a::after{transform:translateY(2px) rotate(180deg)}
/* ponte invisível: sem ela o mouse "cai" no vão entre o link e o menu */
.nav-item::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:12px}

.dropdown{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:252px;padding:.45rem;z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .17s ease,transform .17s ease,visibility .17s;
}
:root[data-theme="light"] .dropdown{box-shadow:0 16px 40px rgba(0,0,0,.12)}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown a{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.6rem .7rem;border-radius:8px;
  font-size:.9375rem;color:var(--heading);
  transition:background .15s ease;
}
.dropdown a:hover{background:var(--shade);color:var(--heading)}
.dd-papel{
  font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-text);
}
.dd-todos{
  border-top:1px solid var(--line);margin-top:.35rem;padding-top:.65rem;
  font-size:.875rem;color:var(--muted);
}
.dd-todos:hover{color:var(--heading)}

.header-act{display:flex;align-items:center;gap:10px;margin-left:auto}
@media (min-width:900px){ .header-act{margin-left:0} }

.theme-btn{
  width:38px;height:38px;display:grid;place-items:center;flex-shrink:0;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;color:var(--muted);transition:color .18s ease,border-color .18s ease;
}
.theme-btn:hover{color:var(--heading);border-color:var(--line-strong)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}

/* um rótulo por vez: dois itens de flex herdariam o gap do .btn */
.header-act .btn{font-size:.8125rem;padding:.72em .95em}
.header-act .btn .long{display:none}
@media (min-width:520px){
  .header-act .btn{font-size:.875rem;padding:.72em 1.1em}
  .header-act .btn .long{display:inline}
  .header-act .btn .short{display:none}
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{padding-top:clamp(46px,7vw,92px);padding-bottom:clamp(44px,6vw,76px)}
.hero h1{max-width:22ch}
.hero .lede{margin-top:1.55rem;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,24px);margin-top:2.4rem}
.hero-sm h1{max-width:26ch;font-size:clamp(2rem,4.2vw,3.2rem)}

/* --------------------------------------------------------------------------
   FAIXA DE PAPÉIS (assinatura da home)
   Quatro colunas, sem seta e sem ponto: "orienta" não vem depois de "traz",
   e desenhar sequência aqui seria inventar informação.
   -------------------------------------------------------------------------- */
.papeis{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:760px){ .papeis{grid-template-columns:repeat(4,1fr)} }
.papel-cel{background:var(--bg);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:.9rem}
.papel-cel .papel{align-self:flex-start}
.papel-nome{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--heading);letter-spacing:-.02em}
.papel-cel p{font-size:.9375rem;color:var(--muted);margin:0}
/* o botão desce pro rodapé da célula: quatro botões alinhados na mesma linha */
.papel-cel .btn{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   BLOCO DE PROBLEMA
   -------------------------------------------------------------------------- */
.problem h2{max-width:26ch}
.problem-body{margin-top:2.1rem}
.problem-punch{
  margin-top:2.3rem;padding-left:1.35rem;border-left:2px solid var(--accent);
  font-family:var(--display);font-size:clamp(1.18rem,2vw,1.46rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.35;color:var(--heading);
}

/* --------------------------------------------------------------------------
   QUADROS DE SERVIÇO (página /servicos)
   -------------------------------------------------------------------------- */
.quadros{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);margin-top:clamp(34px,4vw,52px)}
.quadro{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.2vw,40px);
  display:grid;gap:clamp(22px,3.2vw,48px);
  transition:border-color .2s ease;
  scroll-margin-top:100px;
}
@media (min-width:900px){ .quadro{grid-template-columns:5fr 7fr} }
.quadro:hover{border-color:var(--line-strong)}
.quadro-head{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.quadro-head h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.quadro-head p{color:var(--muted);font-size:1rem;margin:0}
.quadro-foot{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.quadro-preco{font-family:var(--mono);font-size:.8125rem;color:var(--heading)}
.quadro-preco span{color:var(--muted)}
/* a porta de entrada ganha destaque, senão a oferta mais fácil de vender se perde */
.quadro-destaque{border-left:2px solid var(--accent)}
.quadro .spec li:last-child{border-bottom:none}

/* --------------------------------------------------------------------------
   LISTAS DE ESPECIFICAÇÃO
   -------------------------------------------------------------------------- */
.spec{border-top:1px solid var(--line)}
/* Marcador em position:absolute, e NAO como item de grid. Com display:grid no
   <li>, todo <strong> ou <a> inline dentro dele virava um item de grid extra e
   jogava o resto do texto para a linha de baixo. */
.spec li{
  position:relative;padding:1rem 0 1rem 1.55rem;
  border-bottom:1px solid var(--line);
  font-size:1rem;line-height:1.6;
}
.spec li::before{
  content:"";position:absolute;left:0;top:1.65em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* passos numerados — só onde a sequência é real */
.steps{margin-top:2.8rem;border-top:1px solid var(--line)}
.step{display:grid;gap:.5rem 2rem;padding-block:clamp(22px,2.8vw,32px);border-bottom:1px solid var(--line)}
@media (min-width:820px){ .step{grid-template-columns:auto 15rem 1fr;align-items:baseline} }
.step-n{font-family:var(--mono);font-size:.8125rem;color:var(--accent-text);letter-spacing:.06em;font-weight:500}
.step h4{font-size:1.09rem}
.step p{font-size:.9688rem;color:var(--muted);margin:0}

/* --------------------------------------------------------------------------
   PÁGINAS DE SERVIÇO
   -------------------------------------------------------------------------- */
/* duas colunas assimétricas, o padrão de leitura do site */
.cols{display:grid;gap:clamp(26px,3.5vw,56px)}
@media (min-width:900px){ .cols{grid-template-columns:5fr 7fr} }

/* sintomas numerados: em vez de afirmar valor, o leitor se autodiagnostica */
.sintomas{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2.4rem}
@media (min-width:780px){ .sintomas{grid-template-columns:repeat(2,1fr)} }
.sintoma{background:var(--bg);padding:clamp(20px,2.4vw,28px);display:flex;gap:1.1rem;align-items:flex-start}
.sintoma-n{font-family:var(--mono);font-size:.75rem;color:var(--accent-text);font-weight:500;flex-shrink:0;padding-top:.25em}
.sintoma p{margin:0;font-size:.9688rem;line-height:1.6}

/* prazo declarado */
.prazo{
  margin-top:2.4rem;padding:clamp(22px,2.6vw,32px);
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:baseline;
}
.prazo-n{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--heading);letter-spacing:-.03em;line-height:1.05}
.prazo-t{font-size:.9688rem;color:var(--muted);max-width:42ch}

/* preço */
.preco{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;align-items:baseline}
.preco-n{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--heading);letter-spacing:-.03em;line-height:1}
.preco-t{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}

/* --------------------------------------------------------------------------
   TRILHA DO CLIENTE (página da Auditoria)
   Trecho rastreado = linha cheia em carmim. Trecho às cegas = tracejado.
   A distinção carrega o argumento sem precisar de legenda.
   -------------------------------------------------------------------------- */
.trail{margin-top:clamp(30px,4vw,44px);max-width:880px}
.trail-graph{position:relative;padding-top:14px}
.trail-line{
  position:absolute;top:19px;left:12.5%;right:12.5%;height:1px;
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 5px,transparent 5px 11px);
}
.trail-line::after{content:"";position:absolute;inset:0 auto 0 0;width:33.333%;background:var(--accent)}
.trail-steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.trail-step{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.trail-dot{width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);position:relative;z-index:1}
.trail-step.is-lit .trail-dot{background:var(--accent);border-color:var(--accent)}
.trail-name{font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em;color:var(--muted)}
.trail-step.is-lit .trail-name{color:var(--heading)}
.trail-caption{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);max-width:62ch}

/* --------------------------------------------------------------------------
   QUEM TOCA
   -------------------------------------------------------------------------- */
.who{display:grid;gap:clamp(30px,4.5vw,62px)}
@media (min-width:940px){ .who{grid-template-columns:5fr 7fr} }
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,3vw,32px)}
.who-name{font-family:var(--display);font-weight:600;font-size:1.22rem;color:var(--heading);letter-spacing:-.02em}
.who-role{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em;margin-top:.45rem;display:block}
.who-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.who-links a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.who-links a:hover{color:var(--accent-text)}

/* --------------------------------------------------------------------------
   QUALIFICAÇÃO
   -------------------------------------------------------------------------- */
.fit{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2.5rem}
@media (min-width:820px){ .fit{grid-template-columns:1fr 1fr} }
.fit-col{background:var(--bg);padding:clamp(24px,3vw,34px)}
.fit-col h4{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.35rem}
.fit-yes h4{color:var(--accent-text)}
.fit-no h4{color:var(--muted)}
/* mesmo motivo do .spec li: marcador em absoluto, conteudo inline livre */
.fit-col li{position:relative;padding:.72rem 0 .72rem 1.5rem;font-size:.9688rem;line-height:1.55}
.fit-col li + li{border-top:1px solid var(--line)}
.fit-col li::before{position:absolute;left:0;top:.66rem;font-family:var(--mono);font-size:.9rem;line-height:1.6}
.fit-yes li::before{content:"+";color:var(--accent-text)}
.fit-no li::before{content:"–";color:var(--muted)}
.fit-no li{color:var(--muted)}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{margin-top:2.6rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:1.1rem;cursor:pointer;list-style:none;
  padding-block:1.3rem;font-family:var(--display);font-weight:600;font-size:1.06rem;
  letter-spacing:-.015em;color:var(--heading);transition:color .18s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-weight:400;color:var(--accent-text);font-size:1.15rem;line-height:1.35;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq-a{padding-bottom:1.5rem;max-width:66ch;color:var(--muted);font-size:.9688rem}

/* --------------------------------------------------------------------------
   FORMULÁRIO
   -------------------------------------------------------------------------- */
.contact-in{display:grid;gap:clamp(32px,4.5vw,62px)}
@media (min-width:940px){ .contact-in{grid-template-columns:1fr 1fr;align-items:start} }
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:.82rem .95rem;font-size:.9688rem;transition:border-color .18s ease;
}
.field textarea{resize:vertical;min-height:80px;line-height:1.55}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--accent);outline-offset:1px}
/* o campo que faltou fica marcado, em vez de só um aviso genérico no fim */
.field [aria-invalid="true"]{border-color:var(--accent)}
.field label .opc{color:var(--muted);letter-spacing:.08em;text-transform:none;font-size:.6875rem}
.field select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* Campo-armadilha: invisível e fora da tabulação para gente, mas robô que só
   lê o HTML preenche tudo e se entrega. Não usar display:none, que alguns
   robôs detectam. O recorte abaixo esconde sem criar rolagem lateral. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.form .btn{width:100%;margin-top:.45rem}
.form-note{margin-top:1.05rem}
.form-err{display:none;margin-top:.85rem;font-family:var(--mono);font-size:.75rem;color:var(--accent-text)}
.form-err.is-on{display:block}

/* --------------------------------------------------------------------------
   FECHO + FOOTER
   -------------------------------------------------------------------------- */
.fecho h2{max-width:30ch}
.fecho-cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}

.footer{border-top:1px solid var(--line);padding-block:clamp(38px,5vw,58px)}
.footer-in{display:flex;flex-wrap:wrap;gap:1.5rem 2.6rem;align-items:baseline}
.footer-in .brand{font-size:1.06rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem}
.footer-nav a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.footer-nav a:hover{color:var(--accent-text)}
.footer-links{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;margin-left:auto}
.footer-links a{font-family:var(--mono);font-size:.8125rem;color:var(--muted);transition:color .18s ease}
.footer-links a:hover{color:var(--accent-text)}
.footer-legal{width:100%;padding-top:1.7rem;border-top:1px solid var(--line);margin-top:.5rem}

/* --------------------------------------------------------------------------
   MOVIMENTO — um efeito só
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.quadro:hover{transform:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   CONSENTIMENTO DE COOKIES
   Barra no rodapé, injetada por assets/js/consent.js.

   Os dois botões têm o mesmo tamanho, o mesmo peso e o mesmo alcance de
   clique. Recusar escondido, apagado ou menor que aceitar é a irregularidade
   mais comum em banner de cookie e a mais fácil de autuar: o consentimento
   deixa de ser livre. O contraste entre eles é só de cor, para o olho achar o
   par, nunca de proeminência.
   -------------------------------------------------------------------------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--surface);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -14px 40px rgba(0,0,0,.28);
  transform:translateY(101%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"] .consent{box-shadow:0 -14px 40px rgba(0,0,0,.10)}
.consent.is-on{transform:translateY(0)}

.consent-in{
  max-width:var(--wrap);margin:0 auto;
  padding:1.15rem var(--pad);
  display:flex;align-items:center;gap:1.6rem;
}
.consent-txt{flex:1 1 auto;min-width:0}
.consent-txt p{margin:0;font-size:.875rem;line-height:1.55;color:var(--muted)}
.consent-txt p:first-child{color:var(--body);margin-bottom:.22rem}
.consent-txt strong{color:var(--heading);font-weight:600}
.consent-txt a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}

.consent-btns{flex:0 0 auto;display:flex;gap:.6rem}
/* largura mínima igual nos dois: nenhum dos lados parece o caminho natural */
.consent-btns .btn{min-width:8.5rem;justify-content:center;font-size:.875rem;padding:.72em 1.1em}

@media (max-width:720px){
  .consent-in{flex-direction:column;align-items:stretch;gap:1rem;padding:1.1rem var(--pad)}
  .consent-btns{width:100%}
  /* no celular cada um fica com metade exata da largura */
  .consent-btns .btn{flex:1 1 0;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .consent{transition:none;transform:translateY(0)}
}

/* ==========================================================================
   ROK LABS — camada de marca
   Acrescentada no rebrand. O motivo diagonal vem das barras inclinadas do
   simbolo: mesmo angulo (112deg), sempre em opacidade baixa, so' como
   textura. Se subir de opacidade, briga com o texto e vira enfeite.
   ========================================================================== */

/* ---------- abertura com o simbolo em escala ----------
   O R sangra pela direita atras do texto. Fica em opacidade baixa porque a
   funcao dele e' dar peso de marca, nao ser lido. */
.hero-band{position:relative;overflow:hidden;isolation:isolate}
.hero-band::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(86% 78% at 84% 30%,rgba(217,17,73,.115),transparent 66%);
}
.hero-mark{
  position:absolute;z-index:-1;pointer-events:none;
  right:-3%;top:50%;transform:translateY(-50%);
  height:112%;width:auto;opacity:.09;
  /* apaga a borda esquerda do simbolo: onde ele cruzaria a coluna de
     texto ele nao existe, entao nunca disputa leitura com a manchete */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%);
          mask-image:linear-gradient(90deg,transparent,#000 46%);
}
@media (max-width:900px){
  .hero-mark{right:-26%;height:86%;opacity:.06;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
            mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .hero-band::before{background:radial-gradient(110% 60% at 76% 16%,rgba(217,17,73,.1),transparent 66%)}
}
:root[data-theme="light"] .hero-mark{opacity:.042}
:root[data-theme="light"] .hero-band::before{background:radial-gradient(86% 78% at 84% 30%,rgba(217,17,73,.07),transparent 66%)}

/* ---------- filete diagonal: assinatura entre secoes ---------- */
.diag{
  height:38px;pointer-events:none;
  background:repeating-linear-gradient(112deg,
    var(--accent) 0 2px, transparent 2px 15px);
  opacity:.26;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 74%);
          mask-image:linear-gradient(90deg,#000,transparent 74%);
}

/* ---------- os quatro pilares da marca ----------
   Grade que quebra sozinha: 4 colunas no desktop, 2 no tablet, 1 no telefone.
   Sem borda em volta; o que separa e' o espaco e a regra de cima. */
.pilares{
  display:grid;gap:clamp(26px,3.4vw,42px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-top:clamp(34px,4vw,52px);
}
.pilar-ico{
  width:30px;height:30px;display:block;margin-bottom:1.05rem;
  color:var(--accent-text);
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.pilar h3{
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.02em;color:var(--heading);margin-bottom:.5rem;
}
.pilar p{font-size:.9375rem;line-height:1.6;color:var(--muted)}

/* ---------- fecho da marca: o unico bloco em degrade cheio ----------
   Um por pagina, no maximo. E' o que faz o degrade ler como acento e nao
   como papel de parede. */
.assinatura{
  background:var(--grad-brand);color:#FFFFFF;
  position:relative;overflow:hidden;
}
.assinatura::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(112deg,
    rgba(255,255,255,.14) 0 2px, transparent 2px 17px);
  -webkit-mask-image:linear-gradient(255deg,#000,transparent 55%);
          mask-image:linear-gradient(255deg,#000,transparent 55%);
}
.assinatura-in{position:relative;z-index:1;text-align:center}
/* Contraste medido no pior ponto do degrade (#D91149, canto inferior direito):
   .72 dava 3,1:1 e reprovava AA em texto pequeno. .95 sobe para 4,6:1. */
.assinatura .eyebrow{color:rgba(255,255,255,.95)}
.assinatura h2{
  font-size:clamp(1.6rem,3.4vw,2.5rem);color:#FFFFFF;
  max-width:20ch;margin-inline:auto;
}
.assinatura h2 em{font-style:normal;color:#FFC9D8}
.assinatura p{
  margin:1.25rem auto 0;max-width:46ch;
  color:rgba(255,255,255,.95);font-size:1.0625rem;line-height:1.6;
}

/* ==========================================================================
   MODAL DE CONTATO
   Todo caminho para o WhatsApp passa por aqui. Usa <dialog> nativo: o
   escurecimento, a prisão de foco e o Esc vêm do navegador.
   ========================================================================== */
dialog.modal{
  inset:0;margin:auto;border:0;padding:0;background:transparent;
  width:min(580px,100%);max-width:100%;color:var(--body);
}
dialog.modal::backdrop{background:rgba(0,0,0,.74)}
/* trava o fundo enquanto o modal está aberto; navegador sem :has só
   mantém o scroll de trás, que é incômodo e não quebra nada */
html:has(dialog.modal[open]){overflow:hidden}

.modal-caixa{
  position:relative;display:flex;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);max-height:min(88vh,900px);
}
.modal-corpo{width:100%;overflow-y:auto;padding:clamp(26px,4vw,40px)}
.modal-titulo{font-size:clamp(1.35rem,3vw,1.8rem);padding-right:2.4rem}
.modal-intro{margin-top:.75rem;color:var(--muted);font-size:.9375rem;line-height:1.6}

.modal-x{
  position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--surface);border:1px solid transparent;border-radius:999px;
  color:var(--muted);cursor:pointer;transition:color .18s ease,border-color .18s ease;
}
.modal-x:hover{color:var(--heading);border-color:var(--line-strong)}
.modal-x:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.modal-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

/* o formulário já está dentro de uma caixa: não leva a sua própria */
.form-modal{background:transparent;border:0;padding:0;border-radius:0;margin-top:1.9rem}

/* Rótulo aqui é pergunta inteira, não etiqueta de uma palavra. O versalete
   em mono do formulário antigo funcionava em "Seu nome" e vira um muro numa
   frase de vinte palavras. */
.form-modal .field label{
  font-family:var(--text);font-size:.9375rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--heading);
  line-height:1.45;margin-bottom:.6rem;
}
.form-modal .field label .opc{color:var(--muted);font-weight:400}
.form-modal .field{margin-bottom:1.35rem}

/* linha de contexto para a pergunta que precisa ser explicada antes de
   ser respondida — a de verba, principalmente */
.field-dica{
  font-size:.875rem;line-height:1.55;color:var(--muted);
  margin-bottom:1rem;padding-left:.9rem;border-left:2px solid var(--accent);
}

.form-passo-nome{
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.7rem;padding-bottom:.95rem;border-bottom:1px solid var(--line);
  padding-right:2.4rem;   /* não passa por baixo do botão de fechar */
}
.form-passo-nome b{color:var(--accent-text);font-weight:500}

/* o bloco recebe foco por código ao abrir e ao trocar de passo, só para
   levar o leitor de tela ao lugar certo. Contorno aqui não significa nada. */
.form-passo:focus{outline:none}

.form-acoes{display:flex;gap:.7rem;margin-top:1.7rem}
.form-modal .btn{width:auto;margin-top:0}
.form-acoes .btn-primary{flex:1}

/* ==========================================================================
   FECHO DE PÁGINA
   Substitui a seção de formulário, que saiu de todas as páginas.
   ========================================================================== */
/* nome próprio, e não .fecho: as páginas de serviço já usam .fecho para o
   fecho editorial delas, e reaproveitar a classe mudaria aquele layout */
.contato-fecho{max-width:44rem}
.contato-fecho .lede{margin-top:1.35rem}
.contato-fecho-cta{margin-top:2.3rem}
.contato-fecho-nota{margin-top:2rem}