/* ==========================================================================
   PHAENOMENON — IDENTIDADE VISUAL
   Azul abissal, ouro envelhecido, marfim. Espaco negativo, linhas finas,
   movimento lento. Nada disputa atencao com o texto.
   ========================================================================== */

:root{
  --bg:#0B1E2D;
  --bg-2:#102A3A;
  --bg-3:#081826;

  --ivory:#F4EFE6;

  --gold:#B08D57;
  --gold-2:#C6A36B;
  --gold-deep:#A9823A;

  --text:#D8D2C4;
  --text-strong:#F4EFE6;

  --fio:rgba(176,141,87,.26);
  --fio-forte:rgba(176,141,87,.5);
  --veu:rgba(244,239,230,.06);

  --display:'Cinzel','Trajan Pro',Georgia,serif;
  --corpo:'EB Garamond',Georgia,'Times New Roman',serif;
  --interface:'Jost','Futura','Century Gothic','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;

  --coluna:min(68rem,90vw);
  --leitura:min(38rem,90vw);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(120rem 70rem at 50% -20%, var(--bg-2) 0%, var(--bg) 48%, var(--bg-3) 100%) fixed,
    var(--bg);
  color:var(--text);
  font-family:var(--corpo);
  font-size:1.0625rem;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grao minimo de papel, quase imperceptivel */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

main,header,footer,section{position:relative;z-index:1}

::selection{background:rgba(176,141,87,.34);color:#fff}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--text-strong);
  line-height:1.24;
  margin:0;
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid var(--fio)}
a:hover{color:var(--ivory);border-bottom-color:var(--fio-forte)}

:focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:1px;
}

img,svg{max-width:100%;height:auto}

.coluna{width:var(--coluna);margin-inline:auto}
.estreita{width:var(--leitura);margin-inline:auto}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   CABECALHO
   -------------------------------------------------------------------------- */
.cabeca{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(9px);
  background:rgba(8,24,38,.82);
  border-bottom:1px solid var(--fio);
}

.cabeca__interno{
  width:var(--coluna);
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:1.4rem;
  min-height:4.25rem;
}

.marca{
  display:flex;
  align-items:center;
  gap:.7rem;
  border:0;
  color:var(--text-strong);
  margin-right:auto;
}
.marca:hover{color:var(--ivory)}

.marca__emblema{width:1.55rem;height:1.55rem;flex:none;color:var(--gold)}

.marca__nome{
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:1.8rem}

.nav a{
  font-family:var(--interface);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  border:0;
  opacity:.82;
}
.nav a:hover{opacity:1;color:var(--ivory)}

.nav a.nav__cta{
  font-family:var(--interface);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-2);
  border:1px solid var(--fio-forte);
  padding:.62rem 1.15rem;
  white-space:nowrap;
  transition:background-color .45s ease,color .45s ease;
}
.nav a.nav__cta:hover{background:rgba(176,141,87,.12);color:var(--ivory);border-color:var(--gold)}

@media (max-width:820px){
  .nav a:not(.nav__cta){display:none}
  .cabeca__interno{min-height:3.75rem}
}

@media (max-width:430px){
  .nav a.nav__cta{padding:.5rem .8rem;font-size:.64rem;letter-spacing:.1em}
  .marca__nome{font-size:.72rem;letter-spacing:.24em}
  .nav__cta-verbo{display:none}
}

/* --------------------------------------------------------------------------
   BOTOES
   -------------------------------------------------------------------------- */
.botao{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--interface);
  font-size:.8rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  padding:1.05rem 2rem;
  min-height:3.25rem;
  border:1px solid var(--gold-deep);
  background:linear-gradient(180deg,rgba(176,141,87,.16),rgba(176,141,87,.05));
  color:var(--ivory);
  cursor:pointer;
  transition:background .5s ease,border-color .5s ease,color .5s ease;
  text-align:center;
}
.botao:hover{background:linear-gradient(180deg,rgba(198,163,107,.26),rgba(176,141,87,.1));border-color:var(--gold-2);color:#fff}
.botao[disabled]{opacity:.45;cursor:not-allowed}

.botao--discreto{
  background:transparent;
  border-color:var(--fio);
  color:var(--text);
}
.botao--discreto:hover{background:rgba(244,239,230,.04);border-color:var(--fio-forte);color:var(--ivory)}

.botao--largo{width:100%}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero{
  padding:clamp(4.5rem,13vh,9rem) 0 clamp(4rem,10vh,7rem);
  text-align:center;
}

.hero__marca{
  font-family:var(--display);
  font-size:.72rem;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2.6rem;
}

.hero__titulo{
  font-size:clamp(3.2rem,13vw,7rem);
  letter-spacing:.16em;
  margin-left:.16em;
  color:var(--ivory);
}

.hero__subtitulo{
  font-family:var(--display);
  font-size:clamp(.78rem,2.6vw,1rem);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin-top:1.3rem;
}

.hero__texto{
  width:var(--leitura);
  margin:2.8rem auto 0;
  font-size:1.15rem;
  color:var(--text);
}

.triade{
  margin:3rem auto 0;
  font-family:var(--display);
  font-size:clamp(.92rem,2.4vw,1.1rem);
  line-height:2.1;
  letter-spacing:.09em;
  color:var(--text-strong);
}

.hero__acoes{margin-top:3.2rem}

.hero__meta{
  margin-top:1.6rem;
  font-family:var(--interface);
  font-size:.74rem;
  letter-spacing:.13em;
  color:var(--text);
  opacity:.62;
}

/* --------------------------------------------------------------------------
   SECOES
   -------------------------------------------------------------------------- */
.secao{padding:clamp(4rem,11vh,7.5rem) 0}
.secao + .secao{border-top:1px solid rgba(176,141,87,.14)}

.secao__cabeca{width:var(--leitura);margin:0 auto clamp(2.6rem,6vh,4rem);text-align:center}

.secao__titulo{
  font-size:clamp(1.5rem,4.4vw,2.15rem);
  letter-spacing:.1em;
}

.secao__intro{margin-top:1.4rem}

.fio-ornamento{
  width:5.5rem;
  height:1px;
  margin:1.7rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.texto{width:var(--leitura);margin-inline:auto}
.espaco-acima{margin-top:clamp(2.6rem,7vh,4rem)}
.tenue{opacity:.6}
.campo__erro--aceite{margin-top:-1.4rem;margin-bottom:1.8rem}
.texto h3{
  font-size:1.12rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin:2.6rem 0 .9rem;
}
.texto h3:first-child{margin-top:0}

/* --------------------------------------------------------------------------
   FIGURAS: LINHAS, TRIGRAMAS, HEXAGRAMAS
   -------------------------------------------------------------------------- */
.hexagrama{
  display:flex;
  flex-direction:column-reverse; /* a primeira linha e a de baixo */
  gap:.7rem;
  width:9.5rem;
}

.hexagrama--grande{width:12rem;gap:.75rem}

.hexagrama--hero{
  width:clamp(8.5rem,26vw,11rem);
  margin:0 auto 3rem;
  gap:.78rem;
}
.hexagrama--hero .traco{height:.55rem}

.traco{
  position:relative;
  display:flex;
  gap:22%;              /* o vao do yin acompanha a largura da figura */
  height:.6rem;
}

.traco span{
  flex:1;
  background:linear-gradient(180deg,var(--ivory),#c9bfa8);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}

.traco--yin span:first-child{flex:1}
.traco--movel span{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep))}

.traco > span.traco__marca,
.traco > span.traco__pos{
  flex:none;
  background:none;
  box-shadow:none;
}

.traco__marca{
  position:absolute;
  right:-1.5rem;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--interface);
  font-size:.72rem;
  color:var(--gold-2);
}

.traco__pos{
  position:absolute;
  left:-1.9rem;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--interface);
  font-size:.68rem;
  color:var(--text);
  opacity:.45;
}

.par-linhas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:clamp(1.8rem,5vw,3.5rem);
  width:var(--leitura);
  margin:0 auto;
  text-align:center;
}

.par-linhas figure{margin:0}
.par-linhas .traco{margin-inline:auto;width:11rem;height:.8rem;gap:20%}

.par-linhas figcaption{
  margin-top:1.2rem;
  font-family:var(--interface);
  font-size:.74rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-2);
}

.par-linhas p{
  margin-top:.6rem;
  font-size:.98rem;
  opacity:.86;
}

/* mutacao: principal -> transformado */
.mutacao{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(1.5rem,5vw,3.5rem);
  width:min(46rem,92vw);
  margin:0 auto;
}

.mutacao__lado{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.mutacao__lado .hexagrama{width:10.5rem;gap:.78rem}
.mutacao__lado .traco{height:.66rem}
.mutacao__lado .hexagrama{margin-left:0}

.mutacao__rotulo{
  font-family:var(--interface);
  font-size:.72rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gold-2);
  text-align:center;
}

.mutacao__nome{
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.06em;
  color:var(--text-strong);
  text-align:center;
}

.mutacao__seta{color:var(--gold);opacity:.75;width:2.5rem}

@media (max-width:640px){
  .mutacao{grid-template-columns:1fr;gap:2.2rem}
  .mutacao__seta{transform:rotate(90deg);margin-inline:auto}
}

/* --------------------------------------------------------------------------
   LISTAS EDITORIAIS
   -------------------------------------------------------------------------- */
.termos{
  list-style:none;
  margin:0 auto;
  padding:0;
  width:var(--leitura);
}

.termos li{
  padding:1.35rem 0;
  border-top:1px solid rgba(176,141,87,.16);
  display:grid;
  grid-template-columns:10rem 1fr;
  column-gap:1.65rem;
  row-gap:0;
  align-items:baseline;
}
.termos li:last-child{border-bottom:1px solid rgba(176,141,87,.16)}

.termos dfn,.termos b{
  font-family:var(--display);
  font-style:normal;
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-2);
}

.termos span{font-size:1rem}

@media (max-width:560px){
  .termos li{grid-template-columns:1fr;gap:.4rem}
}

.entrega{
  list-style:none;
  margin:0 auto;
  padding:0;
  width:var(--leitura);
  columns:2;
  column-gap:2.5rem;
}

.entrega li{
  break-inside:avoid;
  padding:.55rem 0 .55rem 1.4rem;
  position:relative;
  font-size:1rem;
}

.entrega li::before{
  content:"";
  position:absolute;
  left:0;
  top:1.35em;
  width:.6rem;
  height:1px;
  background:var(--gold);
  opacity:.7;
}

@media (max-width:640px){.entrega{columns:1}}

/* --------------------------------------------------------------------------
   CITACAO / SINTESE
   -------------------------------------------------------------------------- */
.citacao{
  width:var(--leitura);
  margin:clamp(2.5rem,7vh,4rem) auto 0;
  padding:2.2rem 0;
  border-top:1px solid var(--fio);
  border-bottom:1px solid var(--fio);
  text-align:center;
  font-size:1.18rem;
  font-style:italic;
  color:var(--text-strong);
}

.assinatura-editorial{
  margin-top:2.4rem;
  text-align:center;
  font-family:var(--display);
  font-size:.82rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-2);
}

.assinatura-editorial small{
  display:block;
  margin-top:.7rem;
  font-family:var(--corpo);
  font-size:.9rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--text);
  opacity:.7;
}

/* --------------------------------------------------------------------------
   AREA DA CONSULTA
   -------------------------------------------------------------------------- */
.consulta{
  padding:clamp(4rem,11vh,7.5rem) 0;
  border-top:1px solid rgba(176,141,87,.14);
  background:linear-gradient(180deg,rgba(16,42,58,.55),rgba(8,24,38,0));
}

.formulario{
  width:min(34rem,92vw);
  margin:0 auto;
}

.campo{margin-bottom:1.9rem}

.campo label{
  display:block;
  font-family:var(--interface);
  font-size:.74rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:.7rem;
}

.campo input,
.campo textarea{
  width:100%;
  background:rgba(8,24,38,.6);
  border:1px solid var(--fio);
  color:var(--text-strong);
  font-family:var(--corpo);
  font-size:1.05rem;
  line-height:1.6;
  padding:.95rem 1.05rem;
  transition:border-color .4s ease,background .4s ease;
}

.campo textarea{min-height:8.5rem;resize:vertical}

.campo input::placeholder,
.campo textarea::placeholder{color:rgba(216,210,196,.35)}

.campo input:focus,
.campo textarea:focus{
  border-color:var(--gold);
  background:rgba(8,24,38,.85);
  outline:none;
}

.campo input:focus-visible,
.campo textarea:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.campo__ajuda{
  margin-top:.6rem;
  font-size:.92rem;
  opacity:.62;
}

.campo__erro{
  margin-top:.55rem;
  font-family:var(--interface);
  font-size:.8rem;
  letter-spacing:.03em;
  color:#E0A98A;
}

.aceite{
  display:flex;
  gap:.85rem;
  align-items:flex-start;
  margin:2.2rem 0;
  font-size:.98rem;
}

.aceite input{
  appearance:none;
  flex:none;
  width:1.15rem;
  height:1.15rem;
  margin-top:.35rem;
  border:1px solid var(--fio-forte);
  background:rgba(8,24,38,.6);
  cursor:pointer;
}

.aceite input:checked{background:var(--gold);border-color:var(--gold)}
.aceite input:checked::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:var(--bg-3);
  clip-path:polygon(16% 52%, 38% 74%, 84% 24%, 92% 34%, 38% 90%, 8% 60%);
}

.aceite label{cursor:pointer}

.instrucao-consulta{
  width:var(--leitura);
  margin:0 auto clamp(2.4rem,6vh,3.5rem);
  text-align:center;
}

.aviso-formulario{
  margin-top:1.5rem;
  padding:1rem 1.2rem;
  border:1px solid rgba(224,169,138,.4);
  background:rgba(224,169,138,.07);
  font-size:.95rem;
}

.nota-pagamento{
  margin-top:1.6rem;
  text-align:center;
  font-family:var(--interface);
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--text);
  opacity:.55;
  line-height:1.9;
}

/* --------------------------------------------------------------------------
   ESTADOS DO SISTEMA
   -------------------------------------------------------------------------- */
.estado{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 0;
}

.estado__marca{
  font-family:var(--display);
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:2.4rem;
}

.estado__titulo{font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:.1em}

.estado__texto{
  width:var(--leitura);
  margin:1.8rem auto 0;
}

.estado__acoes{margin-top:2.8rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* pulso lento do estado "processando" */
.pulso{
  width:2.6rem;
  height:2.6rem;
  margin:0 auto 2rem;
  border:1px solid var(--fio-forte);
  border-radius:50%;
  animation:respirar 4.2s ease-in-out infinite;
}

@keyframes respirar{
  0%,100%{opacity:.25;transform:scale(.92)}
  50%{opacity:.9;transform:scale(1.06)}
}

/* --------------------------------------------------------------------------
   PAGINAS LEGAIS
   -------------------------------------------------------------------------- */
.documento{padding:clamp(3.5rem,9vh,6rem) 0}
.documento .texto h2{
  font-size:1.15rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-2);
  margin:2.8rem 0 1rem;
}
.documento .texto h2:first-of-type{margin-top:2.2rem}
.documento ul{padding-left:1.2rem;margin:0 0 1.1em}
.documento li{margin-bottom:.5em}

.documento__data{
  margin-top:3rem;
  font-family:var(--interface);
  font-size:.76rem;
  letter-spacing:.1em;
  opacity:.55;
}

/* --------------------------------------------------------------------------
   RODAPE
   -------------------------------------------------------------------------- */
.rodape{
  border-top:1px solid var(--fio);
  padding:3.5rem 0 4.5rem;
  text-align:center;
}

.rodape__marca{
  font-family:var(--display);
  font-size:.76rem;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--gold);
}

.rodape__aviso{
  width:var(--leitura);
  margin:1.8rem auto 0;
  font-size:.95rem;
  opacity:.66;
}

.rodape__links{
  margin-top:2rem;
  display:flex;
  gap:1.6rem;
  justify-content:center;
  flex-wrap:wrap;
  font-family:var(--interface);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rodape__links a{border:0;opacity:.75}
.rodape__links a:hover{opacity:1}

.rodape__editor{
  margin-top:2.4rem;
  font-size:.9rem;
  opacity:.55;
}

/* --------------------------------------------------------------------------
   MOVIMENTO
   Uma unica sequencia orquestrada: o hexagrama do hero se forma, de baixo
   para cima, uma vez. Nada mais se move sozinho.
   -------------------------------------------------------------------------- */
.forma-se .traco{opacity:0;animation:surgir 1.1s ease forwards}
.forma-se .traco:nth-child(1){animation-delay:.15s}
.forma-se .traco:nth-child(2){animation-delay:.5s}
.forma-se .traco:nth-child(3){animation-delay:.85s}
.forma-se .traco:nth-child(4){animation-delay:1.2s}
.forma-se .traco:nth-child(5){animation-delay:1.55s}
.forma-se .traco:nth-child(6){animation-delay:1.9s}

@keyframes surgir{
  from{opacity:0;transform:translateY(.5rem) scaleX(.9)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .forma-se .traco{opacity:1;animation:none}
  .pulso{animation:none;opacity:.6}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* --------------------------------------------------------------------------
   IMPRESSAO
   -------------------------------------------------------------------------- */
@media print{
  body{background:#fff;color:#111}
  .cabeca,.rodape__links,.botao,.nav{display:none}
  a{color:#111}
}

/* ==========================================================================
   v1.3.8 — atendimento, protocolo e identificação do fornecedor
   Reaproveita as variáveis e a escala já definidas acima: nenhuma paleta
   nova, nenhum componente novo além do estritamente necessário.
   ========================================================================== */
.campo select{
  width:100%;background:rgba(8,24,38,.6);border:1px solid var(--fio);
  color:var(--text-strong);font-family:var(--corpo);font-size:1.05rem;
  line-height:1.6;padding:.95rem 1.05rem;
  transition:border-color .4s ease,background .4s ease;
}
.campo select:focus{border-color:var(--gold);background:rgba(8,24,38,.85);outline:none}
.campo select:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.formulario .botao{margin-top:.4rem}
.formulario .botao--discreto{margin-left:.9rem}

.rodape__fornecedor{
  margin-top:1.1rem;font-family:var(--interface);font-size:.76rem;
  line-height:1.8;letter-spacing:.04em;opacity:.58;
}
.rodape__fornecedor a{color:inherit}

.protocolo__lista{margin:0 0 1.4rem}
.protocolo__par{display:flex;gap:1.2rem;padding:.6rem 0;border-bottom:1px solid var(--fio)}
.protocolo__par dt{
  flex:0 0 9.5rem;font-family:var(--interface);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);
}
.protocolo__par dd{margin:0;font-family:var(--corpo)}

.nota-arquivo--direitos{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--fio)}