/* AI&Media · 2026
   Construído com os números de docs/marca/03-estrutura-site.html
   e a paleta de docs/marca/02-manual-marca.html. Sem roxo.
   O manual diz "nao ha acento"; o acento azul abaixo e uma decisao do Fernando
   de 18.10.2026, lida do logotipo, e contraria o manual de proposito.
   Movimento: cinco @keyframes e nada mais. Zero JavaScript. */

@font-face{
  font-family:"Bricolage";
  src:url("fontes/bricolage.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fragment Mono";
  src:url("fontes/fragmentmono.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* os quatro unicos valores de marca */
  --tinta:#0E0E12;
  --secundario:#55555F;
  --linha:#E2E2DC;
  --papel:#FAFAF8;
  /* auxiliares do manual */
  --tenue:#8E8E97;
  --faixa:#F1F0EB;
  --mesa:#E6E5E0;

  /* Acento, lido do logotipo azul (aprox., a confirmar com o vector).
     O logotipo vai de #5590CF a #3B5BA5 com um ciano #12A5DF no galao.
     Escurecido para #2F4F91 porque o azul do logotipo da 6,23:1 sobre papel
     e nao chega a AAA. Matiz 220 graus: azul, nao o roxo que o manual bane.
     Sem gradiente, por decisao do manual. */
  --acento:#2F4F91;        /* 7,59:1 sobre papel · AAA */
  --acento-forte:#28447E;  /* 9,06:1 · para texto pequeno */
  --acento-tenue:#E8EEF8;  /* fundo de realce */

  --display:"Bricolage",system-ui,sans-serif;
  --texto:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* escala 4 8 12 16 24 32 48 64 88 128 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:88px; --e10:128px;

  --contentor:1180px;
  --coluna:660px;
  --curva:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --tinta:#FAFAF8;
    --secundario:#9A9AA2;
    --linha:#2A2A31;
    --papel:#16161A;
    --tenue:#6E6E78;
    --faixa:#1D1D22;
    --mesa:#0E0E12;
    --acento:#7FA9E0;        /* 7,44:1 sobre #16161A · AAA */
    --acento-forte:#8FB6E8;  /* 8,61:1 */
    --acento-tenue:#1B2635;
  }
}
:root[data-tema="escuro"]{
  --tinta:#FAFAF8; --secundario:#9A9AA2; --linha:#2A2A31;
  --papel:#16161A; --tenue:#6E6E78; --faixa:#1D1D22; --mesa:#0E0E12;
  --acento:#7FA9E0; --acento-forte:#8FB6E8; --acento-tenue:#1B2635;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  font-weight:400;
  line-height:1.58;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}

/* ---- tipografia ---- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.038em;
  margin:0;
  text-wrap:balance;
  font-optical-sizing:auto;
}
h1{font-size:72px}
h2{font-size:44px}
h3{font-size:30px}
p{margin:0}
.chamada{font-size:20px;line-height:1.5;color:var(--secundario);max-width:var(--coluna)}
.corpo{font-size:16px;max-width:var(--coluna)}
.apoio{font-size:14px;color:var(--secundario);max-width:var(--coluna)}
.etiqueta{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tenue);
}
.num{font-family:var(--mono);font-size:14px;color:var(--tenue);font-variant-numeric:tabular-nums}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
  border-radius:2px;
}

/* ligacao com sublinhado a crescer, 180ms */
.lig{position:relative}
.lig::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 180ms var(--curva);
}
.lig:hover::after,.lig:focus-visible::after{transform:scaleX(1)}
.lig:hover,.lig:focus-visible{color:var(--acento)}

/* ---- estrutura ---- */
.env{max-width:var(--contentor);margin:0 auto;padding:0 var(--e5)}
section{padding:var(--e9) 0;border-top:1px solid var(--linha)}
section:first-of-type{border-top:0}
.cab-sec{display:flex;gap:var(--e4);align-items:baseline;margin-bottom:var(--e7)}

/* ---- topo ---- */
.topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);padding:var(--e5) 0;
  border-bottom:1px solid var(--linha);
}
.topo nav{display:flex;gap:var(--e5);font-size:14px}
.marca-topo{display:flex;align-items:center;height:28px}
.marca-topo svg{height:28px;width:auto;display:block}

/* ---- botao ---- */
.botao{
  display:inline-flex;align-items:center;gap:var(--e2);
  background:var(--tinta);color:var(--papel);
  font-size:14px;font-weight:500;
  padding:var(--e3) var(--e4);
  border:1px solid var(--tinta);border-radius:2px;
  transition:opacity 180ms var(--curva);
}
.botao:hover{opacity:.84}
.botao-linha{background:transparent;color:var(--tinta)}
.botao-linha:hover{background:var(--tinta);color:var(--papel);opacity:1}

/* ---- bloco 00 ---- */
.abre{
  display:grid;grid-template-columns:1fr 220px;
  gap:var(--e8);align-items:start;
  padding:var(--e10) 0 var(--e9);
}
.abre h1{margin-bottom:var(--e5)}
.abre .chamada{font-size:20px}

/* ---- simbolo focal ---- */
.simbolo{width:100%;height:auto;display:block}
.simbolo .anel{fill:none;stroke:var(--tinta);stroke-width:2.4}
.simbolo .centro{fill:var(--papel)}
.simbolo .sinal{fill:var(--tinta)}
.simbolo .g-anel,.simbolo .g-fecho{opacity:0}
.simbolo .a-cima {animation:chega-cima  640ms var(--curva)   0ms both}
.simbolo .a-baixo{animation:chega-baixo 640ms var(--curva)  60ms both}
.simbolo .a-esq  {animation:chega-esq   640ms var(--curva) 120ms both}
.simbolo .a-dir  {animation:chega-dir   640ms var(--curva) 180ms both}
.simbolo .g-fecho{animation:fecha       320ms var(--curva) 600ms both}

@keyframes chega-cima {from{opacity:0;transform:translateY(-44px)} to{opacity:1;transform:none}}
@keyframes chega-baixo{from{opacity:0;transform:translateY( 44px)} to{opacity:1;transform:none}}
@keyframes chega-esq  {from{opacity:0;transform:translateX(-44px)} to{opacity:1;transform:none}}
@keyframes chega-dir  {from{opacity:0;transform:translateX( 44px)} to{opacity:1;transform:none}}
@keyframes fecha      {from{opacity:0} to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .simbolo .g-anel,.simbolo .g-fecho{opacity:1;animation:none;transform:none}
  .lig::after{transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---- indice-manifesto (bloco 01) ---- */
.manifesto{display:grid;gap:var(--e7);counter-reset:dor}
.dor{display:grid;grid-template-columns:48px 1fr;gap:var(--e5);align-items:start}
.dor .conta{font-family:var(--mono);font-size:14px;color:var(--tenue);padding-top:var(--e2)}
.dor h3{margin-bottom:var(--e3)}

/* ---- tres colunas ---- */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e7)}
.tres > div > h3{margin-bottom:var(--e3)}
.tres .etiqueta{display:block;margin-bottom:var(--e3)}


/* ---- prova ---- */
.prova{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.captura{border:1px solid var(--linha);border-radius:6px;background:var(--faixa);padding:var(--e5)}
.captura .moldura{
  aspect-ratio:4/3;border:1px dashed var(--linha);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  color:var(--tenue);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:var(--e4);
}
.captura figcaption{margin-top:var(--e3);font-size:14px;color:var(--secundario)}

/* ---- recusas ---- */
.recusas{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--e7);max-width:980px}
.recusas li{
  list-style:none;padding:var(--e4) 0;border-bottom:1px solid var(--linha);
  font-size:16px;
}
.recusas{padding:0;margin:0}
.recusas li b{font-weight:600}
.recusas li span{display:block;color:var(--secundario);font-size:14px;margin-top:var(--e1)}

/* ---- fecho escuro ---- */
.fecho{background:var(--tinta);color:var(--papel);border-top:0}
.fecho h2{color:var(--papel)}
.fecho .chamada{color:#A8A8B0}
.fecho .botao{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.fecho .etiqueta{color:#6E6E78}
.fecho ol{margin:var(--e5) 0 0;padding-left:var(--e5);color:#A8A8B0;font-size:16px;max-width:var(--coluna)}
.fecho ol li{margin-bottom:var(--e2)}

/* ---- pe ---- */
.pe{border-top:1px solid var(--linha);padding:var(--e7) 0;font-size:14px;color:var(--secundario)}
.pe-grelha{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--e7)}
.pe a{color:var(--secundario)}
.pe .etiqueta{display:block;margin-bottom:var(--e3)}
.pe ul{margin:0;padding:0;list-style:none}
.pe li{margin-bottom:var(--e2)}

/* ---- cortes 900 e 620 ---- */
@media (max-width:900px){
  h1{font-size:52px}
  h2{font-size:34px}
  h3{font-size:24px}
  .abre{grid-template-columns:1fr;gap:var(--e7);padding:var(--e8) 0 var(--e9)}
  .abre .simbolo{max-width:160px}
  .tres{grid-template-columns:1fr;gap:var(--e6)}
  .prova{grid-template-columns:1fr}
  .recusas{grid-template-columns:1fr}
  .pe-grelha{grid-template-columns:1fr 1fr}
  .topo nav{display:none}
}
@media (max-width:620px){
  h1{font-size:40px}
  h2{font-size:28px}
  h3{font-size:20px}
  section{padding:var(--e8) 0}
  .env{padding:0 var(--e4)}
  .dor{grid-template-columns:1fr;gap:var(--e3)}
  .pe-grelha{grid-template-columns:1fr;gap:var(--e6)}
}

/* ---- lockup segue o tema ---- */
.marca-topo{color:var(--tinta)}
.topo nav a.activo{color:var(--acento)}
.topo nav a.activo::after{transform:scaleX(1)}

/* ---- resumo: as 2-3 frases que respondem a pagina toda ---- */
.resumo{
  font-size:20px;line-height:1.5;color:var(--secundario);
  max-width:var(--coluna);margin:0;
}

/* ---- abertura das paginas interiores ---- */
.abre-pagina{padding:var(--e9) var(--e5) var(--e8)}  /* o 0 do meio zerava
   a margem lateral que o .env da, e o texto colava a` janela em qualquer
   largura abaixo dos 1180px do contentor. */
.abre-pagina h1{margin:var(--e5) 0 var(--e5)}

/* ---- perguntas e respostas ---- */
.perguntas{display:grid;gap:var(--e8)}
.qa h2{font-size:30px;margin-bottom:var(--e4);max-width:860px}
.qa .corpo{font-size:16px}

/* ---- tabela de comparacao ---- */
.tabela-env{overflow-x:auto}
.comparar{
  border-collapse:collapse;width:100%;min-width:620px;
  font-size:14px;font-variant-numeric:tabular-nums;
}
.comparar caption{text-align:left;margin-bottom:var(--e4);caption-side:top}
.comparar th,.comparar td{
  text-align:left;padding:var(--e3) var(--e4);
  border-bottom:1px solid var(--linha);vertical-align:top;
}
.comparar thead th{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);font-weight:400;
  border-bottom:1px solid var(--tinta);
}
.comparar tbody td:first-child{color:var(--secundario);width:30%}
.comparar tbody td:nth-child(2){font-weight:500}
.comparar tbody td:last-child{color:var(--secundario)}

/* ---- lista de passos ---- */
.passos{margin:0;padding-left:var(--e5);max-width:var(--coluna);font-size:20px;line-height:1.7}
.passos li{margin-bottom:var(--e2)}

/* ---- faq ---- */
.faq{margin:0;max-width:820px}
.faq dt{
  font-family:var(--display);font-weight:800;font-size:20px;
  letter-spacing:-.025em;line-height:1.2;
  margin-top:var(--e6);padding-top:var(--e5);border-top:1px solid var(--linha);
}
.faq dt:first-of-type{border-top:0;margin-top:0;padding-top:0}
.faq dd{margin:var(--e3) 0 0;color:var(--secundario);max-width:var(--coluna)}

/* ---- fila de notas ---- */
.fila{margin:var(--e7) 0 0;padding:0;list-style:none;counter-reset:nota;max-width:820px}
.fila li{
  counter-increment:nota;padding:var(--e5) 0;border-top:1px solid var(--linha);
  display:grid;grid-template-columns:40px 1fr;gap:var(--e4);
}
.fila li::before{
  content:counter(nota,decimal-leading-zero);
  font-family:var(--mono);font-size:14px;color:var(--tenue);
}
.fila li b{display:block;font-size:20px;line-height:1.3;font-weight:600}
.fila li span{display:block;color:var(--secundario);font-size:14px;margin-top:var(--e2)}

@media (max-width:900px){
  .qa h2{font-size:24px}
  .passos{font-size:18px}
}
@media (max-width:620px){
  .qa h2{font-size:20px}
  .faq dt{font-size:18px}
  .fila li{grid-template-columns:1fr;gap:var(--e2)}
  .fila li b{font-size:18px}
  .abre-pagina{padding:var(--e8) var(--e5) var(--e7)}
}


/* ---- o bow tie ----
   A forma e um fundo recortado. O conteudo e texto a serio: reflui, le-se no
   telemovel, e os motores de busca e de resposta conseguem cita-lo. Nada de
   grid nos itens: a numeracao e absoluta, que nao briga com nada. */
.bowtie{
  display:grid;
  grid-template-columns:1fr 150px 1fr;
  align-items:center;
}
.asa{position:relative;padding:var(--e9) var(--e7)}
.asa::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--faixa);
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
}
.asa-esq::before{
  clip-path:polygon(0 0,100% 16%,100% 84%,0 100%);
  -webkit-clip-path:polygon(0 0,100% 16%,100% 84%,0 100%);
  border:0;
}
.asa-dir::before{
  clip-path:polygon(0 16%,100% 0,100% 100%,0 84%);
  -webkit-clip-path:polygon(0 16%,100% 0,100% 100%,0 84%);
  border:0;
}
.asa > *{position:relative;z-index:1}
.asa .etiqueta{display:block;margin-bottom:var(--e6)}

.etapas{margin:0;padding:0;list-style:none;counter-reset:etapa;display:grid;gap:var(--e5)}
.etapas li{
  counter-increment:etapa;
  position:relative;padding-left:var(--e6);
}
.etapas li::before{
  content:counter(etapa,decimal-leading-zero);
  position:absolute;left:0;top:var(--e1);
  font-family:var(--mono);font-size:11.5px;color:var(--tenue);
}
.etapas h3{font-size:20px;margin:0;line-height:1.15}
.etapas p{font-size:14px;color:var(--secundario);margin:var(--e2) 0 0;line-height:1.5;max-width:40ch}

/* o no, ao centro e por cima das duas asas */
.no{
  position:relative;z-index:2;
  background:var(--tinta);color:var(--papel);
  padding:var(--e6) var(--e4);
  text-align:center;border-radius:2px;
}
.no .etiqueta{display:block;color:#8E8E97;margin-bottom:var(--e3)}
.no strong{
  display:block;font-family:var(--display);font-weight:800;
  font-size:30px;letter-spacing:-.035em;line-height:1;
}
.no p{font-size:14px;color:#A8A8B0;margin:var(--e3) 0 0;line-height:1.4}

@media (max-width:900px){
  .bowtie{grid-template-columns:1fr;gap:var(--e5)}
  .asa{padding:var(--e6) 0}
  .asa::before{display:none}
  .no{padding:var(--e5)}
  .etapas{gap:var(--e4)}
}

/* ---- formulário do diagnóstico ----------------------------------------
   Sem JavaScript: é um POST normal e o servidor responde 303 para /obrigado/.
   A validação visível é a do browser (required, type=email) — por isso o
   `novalidate` NÃO está cá: queremos mesmo a do browser a funcionar.
   O estado de erro volta por ?erro= na URL, lido em .form-erro.         */
.form{max-width:var(--coluna);margin-top:var(--e6)}
.form-par{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.campo{display:block;margin:0 0 var(--e5)}
.campo label{
  display:block;font-size:13px;font-weight:500;color:var(--tinta);
  margin-bottom:var(--e2);
}
.campo .opcional{font-weight:400;color:var(--tenue)}
.campo input,.campo textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--texto);font-size:16px;color:var(--tinta);
  background:var(--papel);
  border:1px solid var(--linha);border-radius:2px;
  padding:var(--e3);
  transition:border-color 160ms var(--curva);
}
.campo textarea{resize:vertical;min-height:92px;line-height:1.5}
.campo input::placeholder,.campo textarea::placeholder{color:var(--tenue)}
.campo input:hover,.campo textarea:hover{border-color:var(--tenue)}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-tenue);
}
/* Só marca a vermelho depois de a pessoa ter mexido no campo e saído dele.
   :invalid sozinho pinta o formulário todo de erro mal a página abre, e
   :not(:placeholder-shown) faz o mesmo nos campos que não têm placeholder
   — que é a maioria deles. :user-invalid existe precisamente para isto. */
.campo input:user-invalid,
.campo textarea:user-invalid{border-color:#B3261E}
.campo .dica{display:block;font-size:13px;color:var(--secundario);margin-top:var(--e2)}

/* Armadilha para robôs: fica fora do ecrã em vez de display:none, porque
   há robôs que saltam o que está escondido com display. Quem preenche isto
   não é gente, e o servidor finge sucesso sem criar nada. */
.rede{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-accao{display:flex;align-items:center;gap:var(--e4);flex-wrap:wrap;margin:var(--e6) 0 0}
.form-accao .apoio{margin:0}
.form .legal{margin-top:var(--e4);font-size:13px;color:var(--tenue)}

.form-erro{
  border-left:2px solid #B3261E;padding:var(--e3) var(--e4);
  background:var(--faixa);margin-bottom:var(--e5);font-size:14px;
}

@media (max-width:620px){
  .form-par{grid-template-columns:1fr;gap:0}
  .form-accao{gap:var(--e3)}
}

/* ---- barra de consentimento -------------------------------------------
   Fica presa ao fundo em vez de tapar o ecrã: uma barra que obriga a
   decidir antes de ler é uma forma de arrancar o sim, e um sim arrancado
   não é consentimento. Aceitar e recusar têm o mesmo peso de propósito. */
.consentimento{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--e5);flex-wrap:wrap;
  padding:var(--e4) var(--e5);
  background:var(--papel);border-top:1px solid var(--tinta);
  box-shadow:0 -2px 24px rgba(14,14,18,.10);
}
.consentimento[hidden]{display:none}
.consentimento-texto{max-width:62ch}
.consentimento-texto strong{
  display:block;font-size:14px;font-weight:600;color:var(--tinta);
  margin-bottom:var(--e2);
}
.consentimento-texto p{font-size:13px;line-height:1.5;color:var(--secundario);margin:0}
.consentimento-botoes{display:flex;gap:var(--e3);flex-shrink:0}
.consentimento-botoes .botao{font-size:13px;padding:var(--e2) var(--e4)}

@media (max-width:620px){
  .consentimento{flex-direction:column;align-items:stretch;gap:var(--e4)}
  .consentimento-botoes .botao{flex:1;justify-content:center}
}

/* Sem regra de modo escuro: o site troca os VALORES de --papel e --tinta, por
   isso a barra acompanha sozinha. Escrever um override aqui invertia-a duas
   vezes e punha-a clara no escuro. */