/*
  SDD-davinci-e-linguagem-de-temas F-DV0 (ADR-11) — a camada de PRIMITIVAS.

  A primeira das tres folhas estaticas, e a unica que TODO tema carrega:

      base.css              esta aqui. Mecanica da plataforma.
      celulas/{celula}.css  grade, ritmo, responsivo.
      temas/{tema}.css      :root e identidade.

  O QUE ENTRA AQUI. So o que passa na regra de governo do §3.8: "se voce
  consegue descrever o defeito sem dizer o nome de um tema, ele nao e do tema".
  Foco de teclado invisivel, imagem transbordando, rolagem horizontal no
  celular — nenhum deles menciona um tema, e nenhum deles e identidade.

  O QUE NAO ENTRA. Cor, familia tipografica, peso, entrelinha, raio, sombra,
  espaco. `line-height:1.7` ficou nas folhas dos temas de proposito: densidade
  e uma das seis dimensoes do vocabulario artistico (§3.6), e uma regra que
  parece inocente aqui viraria a mesma entrelinha em trinta temas.

  POR QUE ISTO EXISTE. As seis regras abaixo estavam DUPLICADAS nas duas folhas
  de tema quando esta fase comecou. Com dois temas ninguem sente; com trinta,
  uma correcao de acessibilidade nunca termina. A extracao nao muda um pixel:
  cada seletor nu aparecia uma unica vez por folha, entao move-lo para uma
  camada anterior nao altera nada computado — e as fixtures de padrao-ouro
  guardam essa afirmacao.
*/

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/*
  So a metade MECANICA do body. Fundo, cor e familia continuam no tema, que e
  onde elas significam alguma coisa.

  `--escala-texto` e o token da SDD-aparencia F5: com a escala em 1,
  `calc(16px * 1)` computa exatamente 16px, e o fallback `1` no `var()` nao e
  enfeite — e o que mantem esta folha correta para um tema que ainda nao
  declarou o token.
*/
body{
  margin:0;
  font-size:calc(16px * var(--escala-texto, 1));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

/*
  Controle de formulario nao herda tipografia em navegador nenhum, e isso e
  reset — nao decisao de celula nem de tema. Estava na folha da celula base-1
  ate a prova destrutiva reclamar de `color:` ali, com razao.
*/
input,textarea,select,button{font:inherit;color:inherit}

img{display:block;max-width:100%}

/* Só a margem. O resto de h1/h2/h3 é escala tipográfica, e escala é identidade. */
h1,h2,h3{margin:0}

/*
  O anel de foco, com a cor como variavel.

  Os dois temas de hoje declaram o proprio `:focus-visible` na folha deles, com
  a cor de destaque de cada um, e essa folha carrega DEPOIS — entao para eles
  esta regra nao muda nada. O que ela faz e valer para o tema que ainda nao
  existe: um tema que esqueca de declarar o anel ganha um foco visivel mesmo
  assim, em vez de entregar um site que so se navega com mouse.

  `currentColor` como fallback, e nao uma cor fixa: sobre qualquer fundo ele
  herda a cor do texto, que e a unica escolha que nunca some.
*/
:focus-visible{outline:2px solid var(--mm-focus, currentColor);outline-offset:3px}

/*
  Movimento reduzido. Byte-identico ao que as duas folhas ja traziam.

  A ygg-home tinha uma linha a mais aqui (`.reveal`), e ela FICOU la: e o
  comportamento de revelacao daquele tema, nao uma primitiva. Quando a F-DV2
  levar os comportamentos para o pacote global (ADR-4), aquela linha vem junto
  com eles — nao para ca.
*/
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/*
  SDD-builder-interativos F-INT-2 — a MECANICA do acordeao e das abas.

  O que entra aqui passa na regra de governo do §3.8: "se voce consegue
  descrever o defeito sem dizer o nome de um tema, ele nao e do tema". Fita de
  aba com cara de botao do sistema operacional, painel inativo que continua
  ocupando a pagina, cursor de texto sobre algo que se clica — nenhum deles
  menciona um tema, e nenhum deles e identidade.

  O que NAO entra: cor, familia, peso, raio, espaco e tamanho. O acabamento e
  da celula (a folha do meio), e a cor e do tema.
*/

/*
  O painel inativo sai do fluxo E da ordem de foco.

  O atributo `hidden` ja diz isso ao navegador, mas ele perde para qualquer
  `display` declarado depois — e a folha da celula vai declarar `display` neste
  seletor. Sem esta linha, esconder a aba inativa dependeria da ordem em que as
  duas folhas foram escritas, que e o tipo de dependencia que quebra na
  primeira vez que alguem mexe na outra.
*/
[role="tabpanel"][hidden]{display:none}

/*
  A fita e um <button>, e sem isto ela chega com o desenho do navegador: fundo
  cinza, borda de relevo e a fonte do sistema. Zerar e mecanica; o que ela
  VIRA depois e da celula.
*/
.mmc-abas-fitas>[role="tab"]{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer
}

/*
  O <summary> do acordeao. `cursor:pointer` porque ele se clica, e a lista de
  marcadores some porque o triangulo padrao muda de desenho em cada navegador —
  o que nao e identidade nenhuma, e e por isso que a celula desenha o proprio.
*/
.mmc-acordeao>details>summary{cursor:pointer;list-style:none}
.mmc-acordeao>details>summary::-webkit-details-marker{display:none}

/*
  Sem JS as fitas nao levam a lugar nenhum (ADR-3): o HTML nasce com todos os
  paineis visiveis e e o runtime que recolhe. Ate ele montar — ou para sempre,
  se ele nao chegar — a fita nao e um controle, e o cursor nao deve prometer
  que e.
*/
.mmc-abas:not([data-mmc-abas-ok])>.mmc-abas-fitas>[role="tab"]{cursor:default}

/*
  SDD-builder-refino-14 F-14-1 (ADR-2) — o ampliador.

  Ele e um <dialog> que o runtime cria, entao esta folha nunca desenha nada em
  pagina que nao amplia nenhuma foto. O `::backdrop` e o escuro de tras, e e
  do navegador — nao ha um <div> de veu aqui.

  `cursor:zoom-in` NAO esta nesta folha: ele sai do renderizador, porque o
  canvas do editor tambem precisa dele e nao carrega esta folha.
*/
.mmc-ampliador{
  max-width:min(92vw,1400px);max-height:92vh;padding:0;border:0;
  background:none;overflow:visible
}
.mmc-ampliador::backdrop{background:rgba(0,0,0,.82)}
.mmc-ampliador>img{
  display:block;max-width:100%;max-height:92vh;width:auto;height:auto;
  margin:0 auto;cursor:zoom-out
}
/*
  O fechar fica FORA do canto da foto, e nao por cima dela: por cima ele some
  em foto clara e cobre justamente o canto que a pessoa quer ver.
*/
.mmc-ampliador-fechar{
  position:fixed;top:12px;right:16px;appearance:none;background:none;border:0;
  padding:8px;font-size:32px;line-height:1;color:#fff;cursor:pointer
}

/*
  SDD-formularios-do-site F-FORM-4/6 — o formulario.

  So' MECANICA aqui: o que ele VIRA (cor, fonte, raio, foco) e' da celula. O que
  esta' abaixo e' o que nenhum tema deveria ter de repetir, e o que quebra o
  formulario quando falta.
*/

/*
  A ISCA (F-FORM-6, ADR-5) — e' isto que a esconde.

  `aria-hidden` tira ela do leitor de tela e NAO dos olhos. Sem esta regra o
  visitante ve' um campo chamado "Nao preencha este campo", preenche, e e'
  barrado como robo — o pior defeito possivel numa fase de contencao.

  `position:absolute` e nao `display:none`: campo com `display:none` e' ignorado
  por parte dos robos justamente por isso, e a isca deixaria de pegar quem ela
  existe para pegar.
*/
.mmc-form-isca{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden
}

/*
  O campo empilha: rotulo em cima, controle embaixo, largura inteira.

  Sem isto o rotulo e o controle herdam o alinhamento da secao — e numa secao
  centralizada o rotulo vai para o meio e o campo fica solto, que foi
  exatamente o que a primeira sessao mostrou.
*/
.mmc-campo{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:6px}
.mmc-campo>label{display:block}

/*
  Controle de formulario nao herda fonte nenhuma por padrao: sem `font:inherit`
  ele chega com a fonte do SISTEMA no meio de uma pagina inteira com a fonte do
  tema. E' a mesma razao do reset da fita das abas.
*/
.mmc-campo input,.mmc-campo textarea,.mmc-campo select{
  font:inherit;color:inherit;width:100%;max-width:100%;box-sizing:border-box
}
.mmc-campo textarea{resize:vertical}

/*
  ALTURA BASE (sessao de 28/09): a caixa de texto e a de selecao nascem com a
  MESMA altura. Sem isto o navegador desenha cada uma com a sua — o `select`
  sai uns 8 px mais baixo que o `input` ao lado, e numa linha de dois campos
  a diferenca salta. 2.75em e' o alvo de toque do celular (44 px em 16 px), e
  o espaco interno escolhido na gaveta continua podendo crescer a caixa.
*/
.mmc-campo input:not([type="checkbox"]),.mmc-campo select{min-height:2.75em;line-height:1.3}

/*
  O consentimento e' caixa + frase na MESMA linha, e a caixa nao estica: sem
  `width:auto` ela herda a regra de cima e vira um retangulo da largura do
  formulario.
*/
.mmc-campo-consentimento{display:flex;align-items:flex-start;gap:8px;text-align:left}
.mmc-campo-consentimento input[type="checkbox"]{width:auto;flex:0 0 auto;margin-top:.25em}

/*
  O erro nasce vazio e `hidden`; `[hidden]` ja' o esconde. Aqui so' o que ele
  precisa quando aparece — e nenhuma cor, que e' identidade e e' da celula.
*/
.mmc-campo-erro{margin:0;font-size:.875em}
.mmc-campo-obrigatorio{text-decoration:none}

/*
  Os tres estados sao um por vez no site publicado (o runtime cuida), e o
  `[hidden]` basta. No EDITOR eles aparecem juntos de proposito — e' a previa
  do §3 — e a linha acima deles diz isso, para nao se lerem como tres avisos
  empilhados num formulario quebrado.
*/
.mmc-form-estado{margin:0}
.mmc-form-previa{margin:0;font-size:.75em;opacity:.65;text-align:left}

/*
  SDD-logo-e-paleta F-LG3 (ADR-5) — o logo da marca no cabeçalho.

  Mecânica, e não identidade: o defeito "logo largo empurra o menu para fora
  da tela" se descreve sem dizer o nome de um tema. A ALTURA é do tema
  (`--altura-logo`, padrão 40px); a largura tem teto para um logo de faixa
  não ocupar o cabeçalho inteiro no celular.
*/
.marca-logo {
  display: block;
  height: var(--altura-logo, 40px);
  width: auto;
  max-width: min(220px, 40vw);
  object-fit: contain;
  object-position: left center;
}