/* ==========================================================================
   TequeMedia, CSS base do site
   Tokens, componentes e movimento do padrão web da casa.
   Layout em coluna de 1120px sobre grade Fumaça Branca. Conteúdo em janelas
   e cartões com contorno preto e sombra dura. Uma faixa laranja de impacto
   por página. Visual único, claro, sem modo escuro.
   Regra do visual. Nenhum trecho com mais de três parágrafos seguidos sem
   bloco visual (cartões, figura, balão, caixa com dobra, número grande).
   ========================================================================== */

:root {
  color-scheme: light;

  /* paleta oficial */
  --tq-laranja: #fe5b18;
  --tq-ciano: #17939b;
  --tq-caribe: #006373;
  --tq-amarelo: #ffe00c;
  --tq-prussia: #00243a;
  --tq-ambar: #f5b340;
  --tq-fumaca: #f2f2f2;
  --tq-casca: #e4e3d1;
  --tq-azul-claro: #afc8cc;
  --tq-noite: #161616;

  /* estrutura */
  --tq-preto: #000000;
  --tq-branco: #ffffff;
  --tq-erro: #fc0000;            /* só em janela ou aviso de erro */

  /* papéis */
  --tq-fundo: var(--tq-fumaca);
  --tq-superficie: var(--tq-branco);
  --tq-tinta: var(--tq-noite);
  --tq-tinta-2: #4a4a4a;         /* texto de apoio, 7,9 de contraste sobre Fumaça */
  --tq-borda: var(--tq-preto);
  --tq-destaque: var(--tq-laranja);

  /* tipografia */
  --tq-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tq-mao: "Kalam", "Comic Sans MS", cursive;
  --tq-t-heroi: clamp(2.125rem, 1.4rem + 3.2vw, 3.25rem);   /* título da vitrine, 34 a 52px */
  --tq-t-titulo: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); /* título principal do blog e das páginas de leitura, 30 a 46px */
  --tq-t-h2: clamp(1.625rem, 1.2rem + 2vw, 2.5rem);
  --tq-t-h3: 1.25rem;
  --tq-t-corpo: 1.0625rem;
  --tq-t-leitura: 1.125rem;      /* corpo de texto longo, 18px */
  --tq-t-pequeno: 0.9375rem;
  --tq-t-rotulo: 0.875rem;
  --tq-t-mao: 1.25rem;           /* Kalam nunca abaixo de 16px */

  /* medida da linha, sempre em em (na Bricolage o 1ch é o zero) */
  --tq-medida-apoio: 22em;       /* cerca de 46 caracteres */
  --tq-medida-leitura: 34em;     /* cerca de 70 caracteres */

  /* forma */
  --tq-traco: 3px;
  --tq-raio: 14px;
  --tq-raio-p: 10px;
  --tq-sombra: 6px 6px 0 0 var(--tq-borda);    /* janela e cartão de destaque */
  --tq-sombra-p: 4px 4px 0 0 var(--tq-borda);  /* botão e balão */
  --tq-sombra-c: 3px 3px 0 0 var(--tq-borda);  /* cartão comum e selo */
  --tq-grade: 32px;

  /* espaço */
  --tq-largura: 1120px;
  --tq-calha: clamp(16px, 4vw, 32px);
  --tq-secao: clamp(48px, 8vw, 96px);

  /* movimento */
  --tq-chegada: cubic-bezier(0.23, 1, 0.32, 1);
  --tq-desloca: cubic-bezier(0.77, 0, 0.175, 1);
  --tq-estalo: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tq-saida: cubic-bezier(0.32, 0, 0.67, 0);
  --tq-t-aperto: 100ms;
  --tq-t-rotina: 200ms;
  --tq-t-janela: 300ms;
  --tq-t-dado: 600ms;
  --tq-t-momento: 600ms;
  --tq-k: 1;                     /* multiplica toda distância, vira 0 com movimento reduzido */
}
@media (prefers-reduced-motion: reduce) { :root { --tq-k: 0; } }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tq-fundo);
  color: var(--tq-tinta);
  font-family: var(--tq-display);
  font-size: var(--tq-t-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.025em; line-height: 1.04; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
svg { display: block; }

:focus-visible {
  outline: var(--tq-traco) solid var(--tq-noite);   /* laranja só sobre fundo escuro */
  outline-offset: 3px;
}
.tq-faixa :focus-visible { outline-color: var(--tq-preto); }

/* acabamento que ninguém nota */
::selection { background: var(--tq-laranja); color: var(--tq-preto); }
input, textarea { caret-color: var(--tq-noite); }
html { scrollbar-color: var(--tq-tinta-2) var(--tq-casca); }
.tq-num { font-variant-numeric: tabular-nums; }

/* ---------- estrutura de página ---------- */

.tq-grade {
  overflow-x: clip;
  background-color: var(--tq-fundo);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: var(--tq-grade) var(--tq-grade);
}

.tq-conteiner {
  width: 100%;
  max-width: calc(var(--tq-largura) + 2 * var(--tq-calha));
  margin-inline: auto;
  padding-inline: var(--tq-calha);
}

.tq-secao { padding-block: var(--tq-secao); }

/* cabeçalho. O arquivo do logotipo já traz a área livre embutida, então a
   margem negativa só alinha o símbolo com a coluna de conteúdo. */
.tq-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 4px;
}
.tq-topo__logo { display: block; width: clamp(264px, 22vw + 180px, 304px); flex: none; margin: -24px 0 -24px -37px; }
.tq-topo__logo svg { width: 100%; height: auto; }

/* ---------- tipografia ---------- */

.tq-heroi { font-size: var(--tq-t-heroi); font-weight: 800; }
.tq-titulo { font-size: var(--tq-t-titulo); font-weight: 800; }   /* o h1 do blog e das páginas de leitura */
.tq-h2 { font-size: var(--tq-t-h2); font-weight: 800; }
.tq-h3 { font-size: var(--tq-t-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.tq-apoio { color: var(--tq-tinta-2); max-width: var(--tq-medida-apoio); }

/* texto longo. Corpo de 18px, cerca de 70 caracteres por linha. */
.tq-leitura { max-width: var(--tq-medida-leitura); font-size: var(--tq-t-leitura); line-height: 1.6; }
.tq-leitura p + p { margin-top: 16px; }
.tq-leitura h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin: 0 0 12px; }

/* marca-texto laranja. Um recurso de ênfase por tela. */
.tq-marca {
  background: var(--tq-laranja);
  color: var(--tq-preto);
  padding: 0 0.14em;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* título adesivo, para fundo laranja ou foto */
.tq-adesivo {
  font-weight: 800;
  color: var(--tq-branco);
  -webkit-text-stroke: 2px var(--tq-preto);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--tq-preto);
  letter-spacing: -0.02em;
  line-height: 1.04;
}

/* chamada manuscrita. Uma linha, Kalam negrito. Também é a assinatura do
   cabeçalho, logo abaixo ou ao lado do título principal. */
.tq-chamada {
  font-family: var(--tq-mao);
  font-weight: 700;
  font-size: var(--tq-t-mao);
  line-height: 1.2;
}

/* ---------- componentes ---------- */

/* botão numa placa. A face (::before) anda sobre a placa (::after), exatamente o
   tamanho da sombra, e só o transform transiciona. Nunca animar box-shadow. */
.tq-botao {
  --tq-face: var(--tq-laranja);
  --tq-d: 4px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: calc(0.7em + var(--tq-traco)) calc(1.35em + var(--tq-traco));
  font-family: var(--tq-display);
  font-size: var(--tq-t-corpo);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  color: var(--tq-preto);
  background: none;
  border: 0;
  border-radius: var(--tq-raio);
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform 180ms var(--tq-chegada);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tq-botao::before,
.tq-botao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tq-botao::before { z-index: -1; background: var(--tq-face); border: var(--tq-traco) solid var(--tq-borda); }
.tq-botao::after { z-index: -2; background: var(--tq-borda); transform: translate(var(--tq-d), var(--tq-d)); transition: transform 180ms var(--tq-chegada); }
.tq-botao:active { transform: translate(var(--tq-d), var(--tq-d)); transition-duration: var(--tq-t-aperto); }
.tq-botao:active::after { transform: translate(0, 0); transition-duration: var(--tq-t-aperto); }
.tq-botao--claro { --tq-face: var(--tq-branco); }
.tq-botao--noite { --tq-face: var(--tq-noite); color: var(--tq-branco); }
.tq-botao--largo { width: 100%; }
.tq-botao--g { --tq-d: 6px; min-height: 68px; padding: calc(0.75em + var(--tq-traco)) calc(1.7em + var(--tq-traco)); font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.4375rem); font-weight: 800; }
.tq-botao--p { min-height: 44px; padding: calc(0.5em + var(--tq-traco)) calc(1em + var(--tq-traco)); font-size: var(--tq-t-pequeno); border-radius: var(--tq-raio-p); }
/* levantar no mouse, só no botão principal da vitrine */
@media (hover: hover) and (pointer: fine) {
  .tq-vitrine .tq-botao--principal:hover { transform: translate(-2px, -2px); transition-duration: 160ms; }
  .tq-vitrine .tq-botao--principal:hover::after { transform: translate(calc(var(--tq-d) + 2px), calc(var(--tq-d) + 2px)); transition-duration: 160ms; }
  .tq-vitrine .tq-botao--principal:active { transform: translate(var(--tq-d), var(--tq-d)); transition-duration: var(--tq-t-aperto); }
  .tq-vitrine .tq-botao--principal:active::after { transform: translate(0, 0); transition-duration: var(--tq-t-aperto); }
}

/* selo */
.tq-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.85em;
  font-size: var(--tq-t-rotulo);
  font-weight: 700;
  line-height: 1.3;
  background: var(--tq-branco);
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: 999px;
  box-shadow: var(--tq-sombra-c);
}
.tq-selo::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--tq-laranja);
  border: 2px solid var(--tq-borda);
}

/* cartão. Só no que é objeto. 3px no comum, 6px no de destaque. */
.tq-cartao {
  background: var(--tq-superficie);
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio);
  box-shadow: var(--tq-sombra-c);
}
.tq-cartao--destaque { box-shadow: var(--tq-sombra); }

/* janela. Componente central da marca. */
.tq-janela {
  background: var(--tq-superficie);
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio);
  box-shadow: var(--tq-sombra);
  overflow: hidden;
}
.tq-janela__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px 9px 16px;
  background: var(--tq-laranja);
  border-bottom: var(--tq-traco) solid var(--tq-borda);
  font-size: var(--tq-t-rotulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tq-preto);
}
/* janela que não é o palco. Barra Ciano com texto preto, 5,7 de contraste. */
.tq-janela--apoio .tq-janela__barra { background: var(--tq-ciano); }
.tq-janela__controles { flex: none; width: 66px; height: 18px; }
.tq-janela__corpo { padding: clamp(18px, 4vw, 28px); }

/* campo */
.tq-rotulo { display: block; font-size: var(--tq-t-rotulo); font-weight: 700; margin-bottom: 8px; }
.tq-campo {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.6em 0.85em;
  font-size: 1rem;               /* 16px evita o zoom automático do iPhone */
  background: var(--tq-branco);
  color: var(--tq-tinta);
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio-p);
}
.tq-campo::placeholder { color: #767676; }

/* balão de explicação e aviso. Texto sempre preto. Um aviso por página. */
.tq-balao {
  position: relative;
  padding: 0.7em 0.9em;
  background: var(--tq-ambar);
  color: var(--tq-preto);
  font-size: var(--tq-t-pequeno);
  line-height: 1.4;
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio-p);
  border-top-left-radius: 0;
  box-shadow: var(--tq-sombra-p);
}

/* aviso de erro. Único lugar do vermelho. */
.tq-erro {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding: 0.7em 0.9em;
  background: var(--tq-branco);
  color: var(--tq-preto);
  font-size: var(--tq-t-pequeno);
  font-weight: 500;
  line-height: 1.4;
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio-p);
}
.tq-erro::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  font-weight: 800;
  color: var(--tq-branco);
  background: var(--tq-erro);
  border: 2px solid var(--tq-borda);
  border-radius: 4px;
}

/* lista de marcadores, certo e errado */
.tq-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tq-lista li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.tq-lista li > span { min-width: 0; }
.tq-lista svg { width: 26px; height: 26px; margin-top: 1px; }

/* ---------- blocos de texto, regra do visual ---------- */

/* cartões numerados, para lista de até cinco itens. O primeiro em laranja. */
.tq-cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tq-cartao;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.tq-cartoes li {
  counter-increment: tq-cartao;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 20px;
  background: var(--tq-superficie);
  border: var(--tq-traco) solid var(--tq-borda);
  border-radius: var(--tq-raio);
  box-shadow: var(--tq-sombra-c);
  font-weight: 800;
  line-height: 1.22;
}
.tq-cartoes li::before {
  content: counter(tq-cartao);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--tq-branco);
  color: var(--tq-preto);
  border: var(--tq-traco) solid var(--tq-preto);
  border-radius: var(--tq-raio-p);
  font-size: 1.75rem;
  line-height: 1;
}
.tq-cartoes li:first-child::before { background: var(--tq-laranja); }
@media (max-width: 560px) {
  .tq-cartoes li { flex-direction: row; align-items: center; }
  .tq-cartoes li::before { flex: none; width: 42px; height: 42px; font-size: 1.5rem; }
}

/* frase para levar. Caixa laranja com dobra e argola, uma por página.
   O canto superior direito é recortado e fica transparente, mostrando o que
   está atrás. A aba dobrada, em laranja escuro com o contorno da caixa, cobre
   a diagonal. A caixa e a sombra são desenhadas nos pseudoelementos com o
   mesmo recorte, porque o clip-path no próprio elemento cortaria a sombra.
   A argola entra como fundo. O canto nunca é pintado de preto. */
.tq-dobra {
  --tq-dobra: 29px;
  --tq-dobra-aba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 29'%3E%3Cpath d='M1.5 1.5 L1.5 27.5 L27.5 27.5 Z' fill='%23c94612' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  max-width: var(--tq-medida-leitura);
  padding: 23px 29px 23px 52px;
  color: var(--tq-preto);
  font-size: 1.3125rem;
  font-weight: 800;
  line-height: 1.3;
}
.tq-dobra::before,
.tq-dobra::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--tq-raio);
  clip-path: polygon(0 0, calc(100% - var(--tq-dobra)) 0, 100% var(--tq-dobra), 100% 100%, 0 100%);
}
/* sombra dura com o mesmo recorte */
.tq-dobra::before {
  z-index: -2;
  background: var(--tq-borda);
  transform: translate(6px, 6px);
}
/* a caixa, a argola e a aba */
.tq-dobra::after {
  z-index: -1;
  border: var(--tq-traco) solid var(--tq-borda);
  background-color: var(--tq-laranja);
  background-image:
    radial-gradient(circle at 28px calc(100% - 28px), var(--tq-branco) 0 7px, var(--tq-preto) 7.5px 10.5px, transparent 11px),
    var(--tq-dobra-aba);
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: 0 0, top right;
  background-size: auto, var(--tq-dobra) var(--tq-dobra);
}
/* figura com legenda, até uma por seção */
.tq-figura { margin: 32px 0; display: flex; flex-direction: column; gap: 10px; }
.tq-figura > :first-child { border: var(--tq-traco) solid var(--tq-borda); border-radius: var(--tq-raio); overflow: hidden; }
.tq-figura figcaption { font-size: var(--tq-t-pequeno); color: var(--tq-tinta-2); max-width: var(--tq-medida-leitura); }

/* faixa de impacto, laranja em área cheia */
.tq-faixa {
  background-color: var(--tq-laranja);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: var(--tq-grade) var(--tq-grade);
  color: var(--tq-preto);
  border-block: var(--tq-traco) solid var(--tq-borda);
}

/* número de prova */
.tq-prova { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.tq-prova__item { padding: 18px 20px; }
.tq-prova__numero { display: block; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.375rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.tq-prova__legenda { display: block; margin-top: 6px; font-size: var(--tq-t-pequeno); line-height: 1.3; }

/* rodapé */
.tq-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 28px;
  font-size: var(--tq-t-pequeno);
  color: var(--tq-tinta-2);
}

/* convite. Janela que sobe depois da ação principal concluída. Não bloqueia a
   página, fecha com um toque e nunca aparece antes de a pessoa ter o que veio buscar. */
.tq-convite {
  position: fixed;
  z-index: 50;
  left: 20px;                    /* no computador sobe do lado oposto ao da ferramenta */
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: min(400px, calc(100vw - 40px));
  animation: tq-sobe var(--tq-t-rotina) var(--tq-chegada);
}
.tq-convite[hidden] { display: none; }
.tq-convite .tq-janela { box-shadow: 8px 8px 0 0 var(--tq-borda); }
.tq-convite .tq-janela__barra { padding-block: 5px; padding-right: 6px; }
.tq-convite__fechar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-block: -4px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.tq-convite__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 20px 12px; }
.tq-convite__corpo p { font-size: var(--tq-t-pequeno); line-height: 1.45; }
.tq-convite__dispensar {
  justify-self: center;
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: 0;
  font-size: var(--tq-t-pequeno);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@keyframes tq-sobe { from { transform: translateY(calc(28px * var(--tq-k))); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) {
  .tq-convite { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

/* troca de página com esmaecimento curto, onde o navegador suporta. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--tq-t-rotina); animation-timing-function: var(--tq-chegada); }

/* movimento reduzido. Menos e mais suave, e não nada. Distância vira zero pelo --tq-k. */
@media (prefers-reduced-motion: reduce) {
  .tq-botao, .tq-botao::after { transition-duration: 0.01ms; }
  .tq-vitrine .tq-botao--principal:hover { transform: none; }
  .tq-vitrine .tq-botao--principal:hover::after { transform: translate(var(--tq-d), var(--tq-d)); }
  .tq-convite { animation-duration: 150ms; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
}