/* ============================================================
   TEMA CLARO, 08/09/2026

   Decidido no manual da marca: claro é o padrão em superfície longa,
   que é onde se lê, e o escuro continua sendo o padrão de peça de rede
   social e de bloco de destaque dentro do claro.

   Este arquivo não reescreve o base.css. Ele remapeia os tokens
   semânticos que o base.css já usa, porque lá dentro nenhuma cor está
   solta: tudo sai de --sup-*, --tinta-*, --marca-* e --enfase-*. Por
   isso `.cartao`, `.kicker`, `.grade` e o resto funcionam iguais nos
   dois fundos, sem uma linha nova.

   A REGRA QUE ORGANIZA TUDO, e ela é medida: o azul da peça, #3B7DFF,
   dá 3,77:1 sobre branco e nunca carrega texto no claro. Quem carrega
   texto é o #1D3E8F, com 9,82:1. Por isso --marca-400, que no base.css
   é cor de kicker, de link de artigo e de destaque de display, recebe o
   #1D3E8F, e o #3B7DFF vai para --marca-500, que é só preenchimento,
   filete e gradiente de botão.

   Carregar SEMPRE depois do base.css.
   ============================================================ */

:root {
  /* Superfícies */
  --sup-0:      var(--luz-0);       /* #FFFFFF, folha */
  --sup-1:      var(--luz-1);       /* #F6F7FA, cartão e faixa */
  --sup-2:      #EDEFF5;            /* estado de passagem, trilho */
  --sup-linha:  var(--luz-linha);   /* #DFE3EC */

  /* Tinta */
  --tinta-1:    var(--luz-tinta);   /* #14182A, 17,59:1 */
  --tinta-2:    var(--luz-tinta2);  /* #3E4761, 9,22:1 */
  --tinta-3:    var(--luz-tinta3);  /* #5B6480, piso, 5,87:1 */

  /* Azul. O 400 é texto, o 500 é preenchimento. Não inverter. */
  --marca-400:  var(--luz-marca);   /* #1D3E8F */
  --marca-500:  var(--luz-cheio);   /* #3B7DFF */
  --marca-700:  #C9D9FB;            /* estado inativo, agora claro */
  --marca-900:  var(--luz-fraco);   /* #E8EEFC, chip e selo */

  /* Vermelho. Idem: 400 é texto, 500 é preenchimento. */
  --enfase-400: var(--luz-enfase);  /* #C0272D, 5,88:1 */
  --enfase-500: #E5484D;
  --enfase-900: #FCEAEA;

  /* Sombra.
     O base.css calcula a sombra a partir de --sup-0, porque sobre
     azul-noite sombra preta some. Invertido o fundo, a conta se inverte
     junto: sombra derivada de branco também some, e o cartão fica
     chapado do mesmo jeito. Por isso as duas são reescritas aqui em
     cima do azul-tinta, e não herdadas. */
  --sombra-1: 0 1px 2px color-mix(in oklab, var(--luz-tinta) 8%, transparent),
              0 8px 24px -12px color-mix(in oklab, var(--luz-tinta) 16%, transparent);
  --sombra-2: 0 24px 64px -28px color-mix(in oklab, var(--luz-tinta) 26%, transparent),
              0 1px 0 color-mix(in oklab, var(--luz-0) 90%, transparent) inset;
}

/* A luz de fundo existia para o azul-noite não ler como retângulo preto.
   Sobre branco ela não tem função e vira mancha colorida atrás do texto. */
body::before { background: none; }

::selection { background: color-mix(in oklab, var(--luz-cheio) 28%, transparent); }

/* ============================================================
   RITMO DE FUNDO

   Três superfícies alternando, que é o que sustenta a página inteira,
   medido no site de referência em 08/09/2026: lá são cinco blocos
   escuros em dezessete, e eles marcam a virada do argumento.

   `.secao--escura` remapeia os mesmos tokens de volta para o escuro
   dentro do próprio bloco. Tudo que estiver dentro dela, cartão, kicker,
   número e botão, se acerta sozinho.
   ============================================================ */

.secao--folha  { background: var(--luz-0); }
.secao--bloco  { background: var(--luz-1); }

.secao--escura {
  --sup-0:      #0A0D17;
  --sup-1:      #121726;
  --sup-2:      #1A2133;
  --sup-linha:  #262E44;
  --tinta-1:    #F2F5FA;
  --tinta-2:    #A3AABF;
  --tinta-3:    #6A7288;
  --marca-400:  #6E9CFF;   /* no escuro quem carrega texto é este, 7,26:1 */
  --marca-500:  #3B7DFF;
  --marca-700:  #1D3E8F;
  --marca-900:  #0C1836;
  --enfase-400: #FF6B6E;
  --enfase-500: #E5484D;
  --enfase-900: #2C0F13;
  --sombra-1: 0 1px 2px color-mix(in oklab, #0A0D17 70%, transparent),
              0 8px 24px -12px color-mix(in oklab, #0A0D17 90%, transparent);
  --sombra-2: 0 24px 64px -28px color-mix(in oklab, #0C1836 90%, transparent),
              0 2px 0 color-mix(in oklab, #F2F5FA 5%, transparent) inset;

  background: var(--sup-0);
  color: var(--tinta-2);
}

/* O cabeçalho é fixo e atravessa os dois fundos, então ele não pode
   herdar do bloco que estiver embaixo. Fica sempre na folha, e ganha o
   fundo com desfoque ao rolar, que é o comportamento medido na
   referência: só o fundo muda, a altura nunca. */
.topo {
  background: transparent;
  transition: background var(--t-medio) var(--curva-ui),
              border-color var(--t-medio) var(--curva-ui);
  border-bottom: 1px solid transparent;
}
.topo[data-preso="sim"] {
  background: color-mix(in oklab, var(--luz-0) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--luz-linha);
}

/* A origem viaja junto com o numero, e por isso ela nao pode ser o texto mais
   apagado da pagina. O --tinta-3 do escuro da 4,04:1 a 13px, abaixo do piso de
   4,5:1. Medido em 08/09/2026 na propria previa. */
.assina .assina__papel { color: var(--tinta-2); }

/* O botao primario e branco sobre --marca-500 no escuro, e ali o --sup-0 e o
   azul-noite, entao a tinta sai escura e passa. No claro o --sup-0 vira branco e
   o mesmo botao vira branco sobre #3B7DFF: 3,77:1, medido em 08/09/2026 nas seis
   paginas que tem botao. E o mesmo numero que o manual usa para dizer que esse
   azul nunca carrega texto.

   A saida ja estava decidida no bio-link em 04/08/2026: tinta escura sobre o
   azul, e nao azul mais escuro com tinta branca, para o botao continuar sendo o
   ponto mais azul da tela. */
.btn--primario { color: var(--luz-tinta); }
.btn--primario:hover { background: var(--luz-cheio); }

/* Mesma historia da assinatura: o credito de fonte e o que sustenta o numero, e
   com --tinta-3 no escuro ele da 4,04:1 a 13px. */
.secao--escura .fonte { color: var(--tinta-2); }

/* ============================================================
   CABECALHO, segunda passada de 08/09/2026

   O Kado disse que o contraste do topo estava ruim. Medido antes de mexer:
   ele PASSA, 8,37:1 sobre o heroi escuro e 9,22:1 rolado. O problema nao era
   norma, era enfase: a navegacao usava --tinta-2, que e cor de texto de apoio,
   ao lado de uma marca em 17,59:1. Entao sobe a tinta, nao afrouxa a regra.
   ============================================================ */

.topo__nav a,
.topo__nav .submenu > summary {
  color: var(--tinta-1);
  font-weight: 500;
}
.topo__nav a:hover,
.topo__nav .submenu > summary:hover { color: var(--marca-400); }

/* A assinatura da marca e o unico lugar onde a Syne fica, conforme o manual:
   pouca palavra, e ela nao entra em titulo desde 08/09/2026. */
.marca { font-family: var(--fonte-marca); letter-spacing: 0.02em; }
.marca svg { width: 26px; height: 26px; }

/* ---------- Serviços, aba do desktop ----------
   Os cinco links de servico ja existiam no cabecalho, dentro do painel que so
   aparece abaixo de 860px. Aqui eles saem para a barra, que era o pedido.
   E <details> e nao menu de JavaScript: abre no toque e no teclado igual, e
   sobrevive ao arquivo de script falhar. */
.topo__nav .submenu { position: relative; }
.topo__nav .submenu > summary {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; list-style: none;
  transition: color var(--t-rapido) var(--curva-ui);
}
.topo__nav .submenu > summary::-webkit-details-marker { display: none; }
.topo__nav .submenu > summary svg {
  width: 14px; height: 14px;
  transition: rotate var(--t-rapido) var(--curva-ui);
}
.topo__nav .submenu[open] > summary svg { rotate: 180deg; }

.submenu__painel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 268px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: var(--borda);
  border-radius: 14px;
  /* Fundo opaco de proposito: o painel flutua sobre o conteudo da pagina e
     com transparencia o texto de tras atravessa o do menu. */
  background: var(--sup-0);
  box-shadow: var(--sombra-2);
  z-index: 50;
}
.submenu__painel a {
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 400;
  color: var(--tinta-2);
  transition: background var(--t-rapido) var(--curva-ui),
              color var(--t-rapido) var(--curva-ui);
}
.submenu__painel a:hover { background: var(--sup-1); color: var(--tinta-1); }
.submenu__painel a[aria-current="page"] { color: var(--tinta-1); font-weight: 600; }


/* O cabecalho e `sticky`, nao `fixed`: ele fica ACIMA do heroi e nao sobre ele.
   Entao o fundo dele e sempre o da pagina, e a tinta e sempre a do claro.
   Isto esta escrito porque eu errei aqui em 08/09/2026: assumi sobreposicao,
   deixei a tinta clara no topo da pagina, e virou branco sobre branco, com o K
   da marca sumindo junto. A medicao nao pegou porque eu compunha o fundo lendo
   o que estava 200px abaixo, que e o heroi, e nao o que esta atras do topo. */
.topo { background: var(--luz-0); }

/* A aba Servicos precisa mostrar que voce esta dentro dela, igual o link solto
   ja fazia com data-secao. Medido em 08/09/2026: sem isto, ZERO das 14 paginas
   marcava a posicao na barra, porque a marcacao tinha ido para dentro do painel
   fechado, que ninguem ve. */
.topo__nav .submenu[data-secao] > summary { color: var(--tinta-1); font-weight: 600; }
.topo__nav .submenu[data-secao] > summary::after {
  content: ""; position: absolute; left: 0; right: 18px; bottom: -7px;
  height: 2px; background: var(--marca-500); border-radius: 2px;
}
.topo__nav .submenu[data-secao] > summary { position: relative; }

/* ---------- Faixa de prova do heroi ----------
   Numero MEDIDO do que eu encontro, e nunca numero prometido de resultado. A
   distincao e a que a secao "o que eu nao prometo" defende no resto da pagina,
   e ela e o que separa este site das nove de dez paginas de concorrente lidas
   em 04/09/2026 que prometem resultado com numero. */
.tira {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: var(--t-peq);
  color: var(--tinta-2);
}
.tira li { display: flex; align-items: baseline; gap: 7px; }
.tira li + li { padding-left: 26px; border-left: 1px solid var(--sup-linha); }
.tira b {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--tinta-1);
  letter-spacing: -0.01em;
}
@media (max-width: 700px) {
  .tira li + li { padding-left: 0; border-left: 0; }
  .tira { gap: 8px 20px; }
}

/* ---------- Dores ----------
   Lista, e nao cartao: sao seis e cada uma e uma frase. Cartao para frase curta
   vira caixa vazia com muito ar, que foi o que a referencia evitou tambem. */
.dores { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .dores { grid-template-columns: 1fr 1fr; gap: 14px 30px; } }
.dores li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px;
  border: var(--borda); border-radius: 13px;
  background: var(--sup-0);
}
.dores li svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--enfase-400); }

/* ---------- Fluxograma do caminho do lead ----------
   E o argumento do site em forma de figura: o dinheiro nao para na campanha,
   para no degrau entre o lead entrar e alguem falar com ele.

   Feito em HTML e CSS, e nao numa SVG unica, porque SVG de seis etapas escala
   junto e a 390px o texto fica ilegivel. Assim ele reflui: seis colunas no
   desktop, empilhado no celular, com o trilho virando vertical.

   A animacao entra pelo .rv que ja existe, com atraso por etapa, e morre
   inteira em prefers-reduced-motion. */
.fluxo {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 14px;
  counter-reset: etapa;
}
@media (min-width: 900px) { .fluxo { grid-template-columns: repeat(6, 1fr); gap: 10px; } }

.fluxo__no {
  position: relative;
  padding: 16px 14px;
  border: var(--borda); border-radius: 13px;
  background: var(--sup-0);
  counter-increment: etapa;
}
.fluxo__no::before {
  content: counter(etapa, decimal-leading-zero);
  display: block; margin-bottom: 8px;
  font-family: var(--fonte-titulo); font-size: var(--t-micro);
  font-weight: 700; color: var(--marca-400); letter-spacing: 0.04em;
}
.fluxo__no b { display: block; font-size: var(--t-corpo); color: var(--tinta-1); }
.fluxo__no small { display: block; margin-top: 3px; font-size: var(--t-micro); color: var(--tinta-3); }

/* o trilho que liga as etapas */
@media (min-width: 900px) {
  .fluxo__no + .fluxo__no::after {
    content: ""; position: absolute; top: 50%; left: -13px; width: 10px; height: 2px;
    background: var(--sup-linha); border-radius: 2px;
  }
}

/* o degrau onde vaza */
.fluxo__no--vaza { border-color: color-mix(in oklab, var(--enfase-400) 55%, var(--sup-linha)); }
.fluxo__no--vaza::before { color: var(--enfase-400); }
.fluxo__vazamento {
  margin-top: 16px; padding: 15px 18px;
  border-radius: 13px;
  border: 1px solid color-mix(in oklab, var(--enfase-400) 40%, var(--sup-linha));
  background: color-mix(in oklab, var(--enfase-400) 7%, var(--sup-0));
  font-size: var(--t-peq); color: var(--tinta-2);
}
.fluxo__vazamento b { color: var(--enfase-400); font-family: var(--fonte-titulo); }

/* Revelacao em cascata. O .rv ja e disparado por IntersectionObserver pelo
   movimento.js; aqui so entra o atraso por etapa. */
.rv .fluxo__no { transition-delay: calc(var(--e, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .rv .fluxo__no { transition-delay: 0s; } }

/* ---------- O que cada frente resolve ----------
   Cartao de servico que so descreve o servico faz a pessoa traduzir sozinha se
   aquilo e o problema dela. A linha `resolve` faz a traducao, e o numero ao lado
   e medido, com origem e data, nunca resultado prometido. */
.resolve {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--sup-linha);
  font-size: var(--t-peq); color: var(--tinta-2);
}
.resolve b { color: var(--tinta-1); }
.resolve span {
  display: block; margin-top: 5px;
  font-size: var(--t-micro); color: var(--tinta-3);
}
.grade .cartao { transition-delay: calc(var(--e, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) { .grade .cartao { transition-delay: 0s; } }

/* ---------- O marcador do kicker ----------
   Era um triangulo, feito com truque de borda em CSS, e ele foi escrito antes de
   o simbolo da marca existir. Triangulo nao esta na linguagem desta marca: ela e
   moldura quadrada, angulo reto e tres tracos retos, sem nenhuma curva e sem
   nenhuma diagonal solta.

   O marcador passa a ser a propria moldura, em miniatura. Ele repete o simbolo
   umas trinta vezes por pagina, que e o que constroi reconhecimento sem colar
   logotipo em toda seção. */
.kicker::before {
  content: "";
  width: 9px; height: 9px;
  border: 2px solid currentColor;
  border-radius: 0;
  /* zera o truque de triangulo que vinha do base.css */
  border-inline: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

/* ---------- Linguagem de traço dos ícones ----------
   Medido em 08/09/2026: dos 100 SVG do site, 82 tinham ponta redonda e 63
   junção redonda. A marca e o oposto disso, tracos retos com ponta reta e
   canto de 90 graus, e por isso os icones liam como de outra familia.

   Aqui a regra vale para todo SVG do site de uma vez, e nao icone a icone. */
svg { stroke-linecap: square; stroke-linejoin: miter; }
/* O simbolo da marca e a excecao: ele e butt de verdade, como no manual. */
.marca svg, .kicker svg { stroke-linecap: butt; }

/* ============================================================
   BLOG

   A referencia e rica por tres coisas medidas em 08/09/2026: capa em imagem em
   todo post, um post em destaque ocupando a largura inteira, e etiqueta de
   categoria. Nove posts, cartao de 1120x361 no destaque.

   Aqui a capa e DESENHADA EM CODIGO, com a geometria da marca, e nao foto
   sintetica. Tres motivos: foto sintetica num site que exige fonte para cada
   numero e a unica coisa da pagina que nao tem origem; a capa em codigo pesa
   zero e nao precisa de arquivo; e ela repete a moldura e os tres tracos do
   simbolo, que e o que constroi marca.
   ============================================================ */

.capa {
  position: relative; overflow: hidden;
  border-radius: 13px;
  background: #0A0D17;
  aspect-ratio: 16 / 9;
}
.capa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.capa__etiqueta {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 5px 10px; border-radius: 7px;
  background: color-mix(in oklab, #0A0D17 72%, transparent);
  border: 1px solid color-mix(in oklab, #6E9CFF 34%, transparent);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6E9CFF;
}

/* o post em destaque, na largura inteira */
.destaque {
  display: grid; gap: 26px; align-items: center;
  padding: 22px; border: var(--borda); border-radius: 17px;
  background: var(--sup-0); box-shadow: var(--sombra-1);
  text-decoration: none;
}
@media (min-width: 900px) { .destaque { grid-template-columns: 46% 1fr; gap: 34px; padding: 24px; } }
.destaque .capa { aspect-ratio: 16 / 10; }
.destaque h2 { margin: 10px 0 12px; }
.destaque p { color: var(--tinta-2); }

/* cartao de post com capa em cima */
.post { display: block; text-decoration: none; }
.post .capa { margin-bottom: 16px; }
.post h3 { margin: 8px 0 10px; }
.post p { color: var(--tinta-2); font-size: var(--t-peq); }
.posts-grade { display: grid; gap: 26px; }
@media (min-width: 760px) { .posts-grade { grid-template-columns: 1fr 1fr; } }

.meta { font-size: var(--t-micro); color: var(--tinta-3); letter-spacing: 0.03em; }
.meta b { color: var(--marca-400); font-weight: 600; }