/* ==========================================================================
   Trivium — páginas institucionais (início, privacidade, termos)
   Complementa estilo.css e componentes.css, que continuam sendo a base.
   Mesmas regras da persona: nada menor que 17px no corpo, toque de 56px,
   corpo escuro sobre claro; navy só para topo, âncora e contato.
   ========================================================================== */

/* rem aqui vale 17px (e não os 16px padrão): este arquivo só é carregado nas páginas
   institucionais, e o público lê no celular. Em % para respeitar o ajuste do navegador. */
html { font-size: 106.25%; }

/* margem lateral de 16px no celular, sem rolagem horizontal */
body.inst { overflow-x: hidden; }
body.inst .env { padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { body.inst .env { padding-left: 24px; padding-right: 24px; } }

body.inst .miudo { font-size: 1rem; }
body.inst .olho { font-size: .86rem; }

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

.inst-topo { padding: 12px 0; }
.inst-topo .env { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.inst-topo .marca img { width: 44px; height: 44px; }
.inst-topo .marca span { font-size: 1rem; }
@media (min-width: 720px) { .inst-topo .marca img { width: 52px; height: 52px; } }

.inst-nav { display: flex; align-items: center; gap: 6px; }
.inst-nav a {
  display: none;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(232, 233, 237, .9);
  text-decoration: none;
  white-space: nowrap;
}
.inst-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.inst-nav a.sempre {
  display: inline-block;
  border: 1.5px solid rgba(202, 163, 72, .6);
  color: var(--dourado-brilho);
  min-height: 44px;
}
@media (min-width: 900px) { .inst-nav a { display: inline-block; } }

/* --------------------------------------------------------------- hero */

.hero-inst h1 { font-size: clamp(1.8rem, 5.6vw, 3.05rem); }
.hero-inst .grade { align-items: center; }
.hero-inst .chamada { margin-top: 6px; }

.hero-marca { display: none; margin: 0; }
.hero-marca img { width: 100%; max-width: 400px; margin: 0 auto; }
@media (min-width: 940px) { .hero-marca { display: block; } }

.acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
@media (min-width: 600px) {
  .acoes { flex-direction: row; flex-wrap: wrap; }
  .acoes .botao { width: auto; flex: 0 1 auto; padding-left: 30px; padding-right: 30px; }
}
.acoes + .miudo { margin-top: 14px; }

.botao svg { width: 22px; height: 22px; flex: none; fill: currentColor; }

.botao--contorno {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(202, 163, 72, .7);
  box-shadow: none;
}
.botao--contorno:hover { background: rgba(202, 163, 72, .12); box-shadow: none; }

.botao-zap {
  background: linear-gradient(180deg, #2ec267 0%, #1f9e50 60%, #188343 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(31, 158, 80, .35);
}
.botao-zap:hover { box-shadow: 0 9px 24px rgba(31, 158, 80, .45); }

/* botão com texto longo precisa poder quebrar linha no celular */
.botao[href^="https://wa.me"] { white-space: normal; }

/* seção do PTQ logo abaixo do hero: um tom de marinho acima, para as duas não se fundirem */
.escuro.marinho-alt { background: var(--marinho-700); }

/* --------------------------------------------------------------- confiança */

.cards-confianca { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 760px) { .cards-confianca { grid-template-columns: repeat(2, 1fr); } }
.cards-confianca .card p { font-size: 1.02rem; }

.card-icone {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 12px;
  background: var(--marinho-900);
}
.card-icone svg { width: 26px; height: 26px; fill: var(--dourado-brilho); }

.identidade {
  margin-top: 34px;
  padding: 26px 24px;
  border-radius: var(--raio);
  background: var(--papel-quente);
  border: 1px solid var(--papel-borda);
  border-left: 5px solid var(--dourado);
}
.identidade h3 { color: var(--marinho-900); }
.identidade dl { margin: 18px 0 0; display: grid; gap: 14px; }
.identidade dl > div { display: grid; gap: 2px; }
@media (min-width: 700px) { .identidade dl > div { grid-template-columns: 190px 1fr; gap: 16px; } }
.identidade dt { font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-escuro); }
.identidade dd { margin: 0; font-size: 1.04rem; color: var(--tinta); overflow-wrap: anywhere; }
.identidade dd a { color: var(--marinho-600); font-weight: 600; }
.identidade .miudo { margin-top: 18px; }

ul.nunca { padding: 0; }

/* --------------------------------------------------------------- faq numa seção quente */

.quente .faq details { border-bottom-color: #d8d1c2; }
body.inst .faq details > div { font-size: 1.04rem; }
body.inst .ptq-etapas p, body.inst .nunca li, body.inst .hero-pontos li { font-size: 1.02rem; }

/* --------------------------------------------------------------- contato */

.contato-grade { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 700px) { .contato-grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .contato-grade { grid-template-columns: repeat(3, 1fr); } }

.contato-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 18px;
  border: 1px solid rgba(202, 163, 72, .28);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .045);
}
.contato-item svg { flex: none; width: 26px; height: 26px; margin-top: 2px; fill: var(--dourado-claro); }
.contato-item b { display: block; font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado-claro); margin-bottom: 4px; }
.contato-item span, .contato-item a { font-size: 1.06rem; color: #fff; line-height: 1.45; overflow-wrap: anywhere; }
.contato-item a { text-decoration: underline; text-decoration-color: rgba(202, 163, 72, .6); text-underline-offset: 3px; }
.contato-item.principal { border-color: var(--dourado); background: rgba(202, 163, 72, .1); }

.chamado-final {
  margin-top: 34px;
  padding: 26px 24px;
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  border-top: 5px solid var(--dourado);
  box-shadow: var(--sombra-alta);
}
.chamado-final h3 { color: var(--marinho-900); }
.chamado-final p { color: var(--tinta-suave); }
.chamado-final .botao { margin-top: 18px; }
@media (min-width: 760px) {
  .chamado-final { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
  .chamado-final .botao { margin-top: 0; width: auto; padding-left: 30px; padding-right: 30px; }
}

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

body.inst .rodape { font-size: 1rem; color: rgba(232, 233, 237, .78); }
body.inst .rodape b { color: #fff; }
body.inst .rodape { border-top: 1px solid rgba(202, 163, 72, .28); }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.rodape-links a { display: inline-block; padding: 6px 0; }

/* --------------------------------------------------------------- documentos (privacidade, termos) */

.doc-topo {
  background:
    radial-gradient(110% 90% at 85% 0%, rgba(202, 163, 72, .14) 0%, rgba(202, 163, 72, 0) 55%),
    linear-gradient(178deg, var(--marinho-800) 0%, var(--marinho-900) 70%);
  color: var(--off-white);
  padding: clamp(34px, 6vw, 60px) 0 clamp(30px, 5vw, 48px);
}
.doc-topo h1 { color: #fff; font-size: clamp(1.9rem, 5.4vw, 2.8rem); margin-bottom: .3em; }
.doc-topo p { color: rgba(232, 233, 237, .86); margin: 0; }

.doc { padding: clamp(34px, 6vw, 64px) 0 clamp(52px, 8vw, 88px); }
.doc h2 {
  font-size: clamp(1.35rem, 3.6vw, 1.7rem);
  color: var(--marinho-900);
  margin: 2.1em 0 .6em;
  padding-top: .9em;
  border-top: 1px solid var(--papel-borda);
  scroll-margin-top: 16px;
}
.doc h2:first-of-type { margin-top: 1.4em; }
.doc h3 { font-size: 1.14rem; color: var(--marinho-900); margin: 1.5em 0 .45em; }
.doc p, .doc li { font-size: 1.02rem; }
.doc ul, .doc ol { padding-left: 24px; margin: 0 0 1.05em; }
.doc li { margin-bottom: .55em; }
.doc a { color: var(--marinho-600); font-weight: 600; overflow-wrap: anywhere; }
.doc code {
  font-size: .9em;
  padding: 1px 6px;
  border-radius: 5px;
  background: #f1eee7;
  color: var(--marinho-900);
  overflow-wrap: anywhere;
}

.doc-resumo {
  padding: 22px 22px;
  border-radius: var(--raio);
  background: var(--papel-quente);
  border: 1px solid var(--papel-borda);
  border-left: 5px solid var(--dourado);
}
.doc-resumo p { margin-bottom: .6em; }

.doc-indice {
  margin-top: 26px;
  padding: 20px 22px;
  border: 1px solid var(--papel-borda);
  border-radius: var(--raio);
}
.doc-indice p { font-weight: 700; color: var(--marinho-900); margin-bottom: .4em; }
.doc-indice ol { margin: 0; }
.doc-indice li { margin-bottom: .35em; }

.doc-tabela { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 1rem; }
.doc-tabela th, .doc-tabela td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--papel-borda); }
.doc-tabela th { font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dourado-escuro); }
/* no celular a tabela vira lista: cada linha é um bloco, sem rolagem lateral */
@media (max-width: 699px) {
  .doc-tabela thead { display: none; }
  .doc-tabela, .doc-tabela tbody, .doc-tabela tr, .doc-tabela td { display: block; width: 100%; }
  .doc-tabela tr { padding: 12px 0; border-bottom: 1px solid var(--papel-borda); }
  .doc-tabela td { border: 0; padding: 3px 0; }
  .doc-tabela td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-weight: 700; color: var(--marinho-900);
  }
}