/* ===========================================================================
   Portal de Certificadas do Método Biossintonia
   Identidade visual versão 2, setembro de 2026.

   Cores, escala e regras saem do documento da Mirela. Não inventar valor novo:
   se precisar de uma cor que não está aqui, ela não existe na marca.

   Regra de contraste que manda no uso das cores (medida em WCAG sobre o papel):
     corpo sobre papel ............ 14,2  passa em tudo
     bronze escuro sobre papel ..... 6,9  passa em texto normal
     creme sobre bronze escuro ..... 7,1  é o botão certo
     bronze da marca sobre papel ... 4,1  REPROVA em texto normal
     cobre claro sobre papel ....... 2,7  REPROVA em qualquer texto
   Por isso: botão cheio usa bronze escuro. O bronze da marca fica para ícone,
   filete, título grande e borda. O cobre claro é só enfeite, nunca carrega
   informação.
   =========================================================================== */

:root {
  /* base */
  --papel: #F6EFE3;        /* fundo: um degrau mais fundo, para o cartao descolar */
  --superficie: #FFFDFA;   /* cartões quase brancos: e daqui que vem a luz */
  --secao: #F4EDE2;        /* faixa alternada, linha de tabela */
  --divisor: #E5D8C6;      /* linhas de um ponto */
  --borda: #D8C3A5;        /* contorno de campo e de cartão */
  --bronze: #9C6E3B;       /* cor da marca: ícone, filete, borda */

  /* marca e texto */
  --bronze-escuro: #7A4A28; /* botão, e o nome no certificado */
  --cobre-claro: #C08C63;   /* só decoração */
  /* Metalico rose, amostrado da logo (#D29678, #BE8C78, #966E32). A marca
     e rosada e luminosa; traduzir isso em marrom-terra deixa tudo sepia. */
  --rose-claro: #E3B49C;
  --rose: #C89272;
  --rose-fundo: #A8704E;
  --ouro: #B98C46;
  --metal: linear-gradient(100deg, #B98C46 0%, #E3B49C 28%, #C89272 52%, #E8C0A6 74%, #A8704E 100%);
  --marrom-profundo: #4D2417;
  --titulo: #392A1E;
  --corpo: #2F2318;
  --secundario: #786656;

  /* estados do certificado */
  --valido: #4F6647;
  --valido-fundo: #EDF1EA;
  --analise: #8A6318;
  --analise-fundo: #F7F0DF;
  --revogado: #9B3B2F;
  --revogado-fundo: #F7EAE7;

  /* forma */
  --raio-cartao: 10px;
  --raio-botao: 8px;

  /* Profundidade. A sombra e QUENTE, tingida do proprio marrom da marca:
     sombra cinza sobre fundo creme suja a cor e deixa o papel sujo. */
  --sombra-cartao: 0 1px 2px rgba(150,110,80,.07), 0 12px 28px -14px rgba(150,110,80,.22);
  --sombra-alta:   0 2px 6px rgba(150,110,80,.10), 0 22px 46px -18px rgba(150,110,80,.32);
  --sombra-botao:  0 1px 2px rgba(61,35,18,.24), 0 6px 14px -4px rgba(61,35,18,.30);
  --luz-topo:      inset 0 1px 0 rgba(255,255,255,.75);
  --papel-alto:    linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 55%, #FFF9F1 100%);
  --leitura: 720px;   /* largura de leitura */
  --conteudo: 1200px; /* largura máxima do conteúdo */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* clarao quente no alto, de leve: tira o aspecto de fundo chapado sem
     virar degrade chamativo */
  background: var(--papel);
  background-image:
    radial-gradient(1400px 700px at 50% -260px, #FFFFFF 0%, rgba(255,255,255,.55) 45%, transparent 72%),
    radial-gradient(820px 380px at 92% 2%, rgba(227,180,156,.22), transparent 62%);
  background-attachment: fixed;
  color: var(--corpo);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- tipografia
   Escala do documento: título 32/38, seção 22/28, nome 28/34,
   texto 15/24, apoio 13/20, rótulo 11/16 em caixa alta.            */

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  color: var(--titulo);
  margin: 0 0 18px;
}

/* Filete de bronze sob o titulo. Nao e invencao: e o que a propria
   apresentacao da identidade faz em toda pagina. Da peso sem barulho. */
h1::after, h2::after, .titulo-bloco::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--metal);
  box-shadow: 0 1px 3px rgba(168,112,78,.30);
}
h2::after, .titulo-bloco::after { width: 42px; height: 2px; margin-top: 10px; }

h2, .titulo-bloco {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--titulo);
  margin: 32px 0 12px;
}

h3 { font-family: var(--serif); font-weight: 600; font-size: 18px;
     line-height: 24px; color: var(--titulo); margin: 24px 0 8px; }

p { margin: 0 0 12px; max-width: var(--leitura); }

a { color: var(--bronze-escuro); }
a:hover { color: var(--marrom-profundo); }

.secundario, .dica, .rodape-nota, .cartao-local, .formacao-dados {
  font-size: 13px;
  line-height: 20px;
  color: var(--secundario);
}

.categoria, .etiqueta-curso, label {
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secundario);
}

/* ------------------------------------------------------------------- topo */

.topo {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 100%);
  border-bottom: 1px solid var(--divisor);
  box-shadow: 0 6px 24px -16px rgba(150,110,80,.35);
  position: relative;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; }

/* Mínimo da marca: 90 px de largura com símbolo e nome. Abaixo disso o nome
   não se lê. A logo é vertical, então a medida que manda é a largura. */
.marca img { width: 104px; height: auto; display: block; }

/* filete separando a marca do rótulo, no bronze da marca */
.marca-sub {
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secundario);
  display: block;
  padding-left: 14px;
  border-left: 1px solid var(--divisor);
}

/* filete metalico sob o cabecalho, ecoando a linha da logo */
.topo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(227,180,156,.65) 15%,
              rgba(200,146,114,.95) 38%, rgba(185,140,70,.95) 58%,
              rgba(227,180,156,.65) 84%, transparent 100%);
}

.topo nav { display: flex; gap: 20px; flex-wrap: wrap; }
.topo nav a {
  font-size: 14px;
  text-decoration: none;
  color: var(--corpo);
  /* 44 px de altura e o minimo para o dedo acertar. Estava em 42. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border-bottom: 2px solid transparent;
}
.topo nav a:hover { color: var(--bronze-escuro); border-bottom-color: var(--bronze); }

/* ------------------------------------------------------------------ main */

main {
  max-width: var(--conteudo);
  margin: 0 auto;
  padding: 44px 24px 72px;
}

.caixa, .cartao, .ficha, .formacoes-cartao, .busca {
  background: var(--papel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 20px;
  /* fio de luz no topo + sombra quente: e o relevo do papel impresso */
  box-shadow: var(--luz-topo), var(--sombra-cartao);
}

/* o cartao levanta ao passar o dedo ou o mouse */
.cartao {
  transition: box-shadow .22s ease, transform .22s ease;
}
.cartao:hover {
  box-shadow: var(--luz-topo), var(--sombra-alta);
  transform: translateY(-2px);
}

/* O documento pedia borda sem sombra. O Thiago pediu profundidade em
   20/09/2026, entao o cartao ganhou relevo quente. A borda continua. */
.cartao { margin-bottom: 0; padding: 0; }

/* o cartão inteiro é um link, e por dentro é uma coluna.
   Sem isto os <span> ficam inline e o nome emenda na cidade. */
.cartao > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  border-radius: var(--raio-cartao);
}
.cartao > a:hover { background: linear-gradient(180deg, rgba(244,237,226,.55), rgba(244,237,226,.9)); }
/* empilha os filhos, menos o retrato, que precisa do flex para centrar a inicial */
.cartao > a > *:not(.retrato) { display: block; }

.cartao-nome {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 26px;
  color: var(--titulo);
  margin: 0;
}
.cartao-local { margin: -4px 0 0; }

/* etiquetas do cartão quebram em linha, não empurram a largura */
.cartao-cursos, .cartao-modo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* a grade costuma ser um <ul>, entao tira o marcador e o recuo da lista */
.grade, .formacoes, .lista-admin {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* a capa alinha com o conteudo, e o texto respeita a largura de leitura */
.capa { text-align: left; padding: 8px 0 24px; }
.capa p { max-width: var(--leitura); }

.linha-fina { border: 0; border-top: 1px solid var(--divisor); margin: 24px 0; }

/* ---------------------------------------------------------------- formulário
   Rótulo sempre em cima do campo, nunca só como texto dentro dele. */

.formulario { max-width: var(--leitura); }

label { display: block; margin-bottom: 4px; }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], input[type=search],
input[type=tel], input[type=url], select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 24px;
  color: var(--corpo);
  background: #FFFFFF;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 10px 12px;
  margin-bottom: 16px;
  /* leve afundado, para o campo parecer cavado no papel */
  box-shadow: inset 0 1px 2px rgba(150,110,80,.10);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--bronze);
  outline-offset: 1px;
  border-color: var(--bronze);
}
textarea { min-height: 120px; resize: vertical; }

/* botão com 44 px de altura, que é o mínimo para o dedo acertar no celular */
.botao, button, input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--superficie);
  /* degrade curto: claro em cima, escuro embaixo, como metal escovado.
     O tom de baixo e o bronze escuro medido (7,1 de contraste com o creme),
     entao a leitura nao piora. */
  background: linear-gradient(180deg, #8C5730 0%, var(--bronze-escuro) 55%, #6B3F21 100%);
  border: 1px solid #6B3F21;
  border-radius: var(--raio-botao);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--sombra-botao);
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.botao:hover, button:hover, input[type=submit]:hover {
  background: linear-gradient(180deg, #9A6136 0%, #7F4D29 55%, #5E3619 100%);
  border-color: #5E3619;
  color: var(--superficie);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), var(--sombra-alta);
}
.botao:active, button:active, input[type=submit]:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(61,35,18,.38);
}
.botao.secundario, button.secundario {
  background: transparent;
  color: var(--bronze-escuro);
  border-color: var(--borda);
}
.botao.secundario:hover, button.secundario:hover {
  background: var(--secao);
  color: var(--marrom-profundo);
}

.acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.acoes-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------- selo do certificado
   A peça mais importante do perfil público. Cor sozinha nunca conta a
   história: a palavra vai sempre escrita ao lado do símbolo.           */

.selo, .etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.selo-valido {
  color: var(--valido);
  background: linear-gradient(180deg, #F3F7F0 0%, var(--valido-fundo) 100%);
  border: 1px solid var(--valido);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 6px rgba(79,102,71,.16);
}
.selo-valido::before { content: "✓"; font-weight: 700; }

.selo-invalido {
  color: var(--revogado);
  background: var(--revogado-fundo);
  border: 1px solid var(--revogado);
}
.selo-invalido::before { content: "✕"; font-weight: 700; }

.selo-analise {
  color: var(--analise);
  background: var(--analise-fundo);
  border: 1px solid var(--analise);
}

.selo-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.etiqueta-curso {
  background: linear-gradient(180deg, #FBF5EA 0%, var(--secao) 100%);
  border: 1px solid var(--divisor);
  color: var(--secundario);
  border-radius: 999px;
  padding: 4px 12px;
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(90,62,40,.08);
}

/* ------------------------------------------------------------------ avisos */

.aviso {
  border-radius: var(--raio-cartao);
  padding: 12px 16px;
  border: 1px solid var(--borda);
  background: var(--secao);
  max-width: var(--leitura);
}
.aviso-ok { color: var(--valido); background: var(--valido-fundo); border-color: var(--valido); }
.aviso-erro { color: var(--revogado); background: var(--revogado-fundo); border-color: var(--revogado); }

/* ------------------------------------------------------------------ perfil */

.perfil-cabeca { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }

.retrato, .retrato-grande, .retrato-mini, .retrato-vazio {
  border-radius: 999px;
  object-fit: cover;
  background: var(--secao);
  border: 1px solid var(--borda);
  display: block;
  box-shadow: 0 2px 8px rgba(90,62,40,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
.retrato-grande { width: 132px; height: 132px; }
.retrato { width: 88px; height: 88px; }
.retrato-mini { width: 48px; height: 48px; }

/* sem foto, mostra a inicial centrada no círculo, não solta ao lado dele */
.retrato-vazio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  color: var(--bronze);
  background: var(--secao);
  flex: none;
}
.retrato-mini.retrato-vazio { font-size: 18px; }
.retrato.retrato-vazio:not(.retrato-grande) { font-size: 30px; }

/* nome de quem é certificada: Playfair itálico, 28/34 */
.perfil h1, .cartao-nome-grande {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--titulo);
}

.bio { max-width: var(--leitura); }

.contatos {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px;
  list-style: none; padding-left: 0;
}
.contatos a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 16px; border: 1px solid var(--borda);
  border-radius: var(--raio-botao); background: var(--superficie);
  text-decoration: none; font-size: 14px;
}
.contatos a:hover { background: var(--secao); }

/* cada formação é um bloco fechado, com o selo embaixo */
.formacoes { display: grid; gap: 12px; margin: 16px 0 8px; }
.formacoes li {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 16px 20px;
}
.formacao-nome {
  font-family: var(--serif); font-size: 18px; line-height: 24px;
  color: var(--titulo); display: block; margin-bottom: 2px;
}
.formacao-dados { display: block; margin-bottom: 12px; }

/* ficha de dados: rótulo em cima, valor embaixo, sem o recuo do <dl> */
.ficha { margin: 16px 0; }
.ficha dt {
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--secundario); margin-bottom: 2px;
}
.ficha dd { margin: 0 0 12px; }
.ficha dd:last-child { margin-bottom: 0; }

/* o modo de atendimento são etiquetas, não texto solto */
.modo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.etiqueta {
  background: linear-gradient(180deg, #FBF5EA 0%, var(--secao) 100%);
  border: 1px solid var(--divisor);
  color: var(--secundario); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(90,62,40,.08);
}

/* a linha sob o nome é um filete, e o texto vem depois dele */
p.linha-fina {
  border: 0; border-top: 1px solid var(--divisor);
  margin: 12px 0 0; padding-top: 12px;
  font-size: 15px; color: var(--corpo);
}

/* ------------------------------------------------------------------ tabela */

.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secundario);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 12px; border-bottom: 1px solid var(--divisor); }
.tabela tbody tr:nth-child(even) { background: var(--secao); }

.linha-cert { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ rodapé */

.rodape {
  border-top: 1px solid var(--divisor);
  background: linear-gradient(180deg, #FFFDFA 0%, #FAF4EA 100%);
  padding: 32px 24px 40px;
  text-align: center;
}
.rodape-selo { width: 72px; height: 72px; margin: 0 auto 12px; display: block; }
.rodape p { margin: 0 auto 4px; max-width: var(--leitura); font-size: 13px;
            line-height: 20px; color: var(--secundario); }

/* endereço fixo da página, para quem quiser copiar ou conferir */
.endereco-canonico {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 20px;
  color: var(--secundario);
  background: var(--secao);
  border: 1px solid var(--divisor);
  border-radius: var(--raio-botao);
  padding: 10px 14px;
  margin-top: 32px;
  word-break: break-all;
}

/* ------------------------------------------------------------------ apoio */

.vazio { color: var(--secundario); font-size: 15px; padding: 24px 0; }
.escondido { display: none; }
.capa img { max-width: 260px; height: auto; }

/* ----------------------------------------------------------------- celular
   O perfil público é a tela que mais importa: é onde a mãe cai ao apontar a
   câmera para o QR Code. Ela precisa ver foto, nome, formação e selo sem
   rolar a tela.                                                        */

@media (max-width: 640px) {
  main { padding: 20px 16px 48px; }
  h1 { font-size: 26px; line-height: 32px; }
  h2, .titulo-bloco { font-size: 20px; line-height: 26px; }
  .perfil h1 { font-size: 24px; line-height: 30px; }
  .topo { padding: 12px 16px; }
  .marca img { width: 90px; }
  .marca-sub { display: none; }
  .topo nav { gap: 14px; width: 100%; }
  .perfil-cabeca { gap: 16px; }
  .retrato-grande, .retrato-vazio { width: 96px; height: 96px; }
  .grade { grid-template-columns: 1fr; }
}