:root{
  --petroleo:#0f4c5c;
  --petroleo-escuro:#0a3340;
  --fundo:#f3f6f7;
  --cartao:#ffffff;
  --texto:#1b2a30;
  --texto-suave:#46585f;
  --linha:#cfdadd;
  --aviso-bg:#fbeeee;
  --aviso-borda:#9a3636;
  --info-bg:#e4eef1;
  --foco:#8fd3e0;
  --raio:10px;
}
html[data-versao="pessoal"]{
  --fundo:#faf5ec;
  --cartao:#fffdf8;
  --linha:#e2d6c2;
  --aviso-bg:#f7ebe0;
  --aviso-borda:#7d4a33;
  --info-bg:#efe6d6;
  --raio:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;
}
.pagina{max-width:42rem;margin:0 auto;padding:1.25rem 1rem 2rem}
h1{font-size:1.75rem;line-height:1.2;margin:.5rem 0 .75rem;color:var(--petroleo-escuro);overflow-wrap:break-word}
h2{font-size:1.35rem;line-height:1.25;margin:0 0 .75rem;color:var(--petroleo-escuro)}
h3{font-size:1.05rem;margin:1.1rem 0 .25rem}
p{margin:0 0 .9rem}
a{color:var(--petroleo);text-decoration-thickness:.08em;text-underline-offset:.15em}
a:hover{color:var(--petroleo-escuro)}
.intro{font-size:1.15rem}
.voltar a{display:inline-block;padding:.25rem .6rem;font-size:1.4rem;text-decoration:none}
:focus-visible{outline:3px solid var(--petroleo);outline-offset:3px;border-radius:4px}

.caixa-codigo{
  background:var(--petroleo);color:#fff;border-radius:var(--raio);
  padding:1.25rem 1rem 1rem;margin:1.25rem 0;text-align:center;
  box-shadow:0 2px 0 var(--petroleo-escuro);
}
.caixa-codigo :focus-visible{outline-color:var(--foco)}
.caixa-etiqueta{margin:0 0 .25rem;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.codigo{
  margin:0 0 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;font-size:clamp(2.6rem,14vw,3.75rem);letter-spacing:.12em;line-height:1.1;
  user-select:all;-webkit-user-select:all;
}
.caixa-nota{margin:.9rem 0 0;font-size:.95rem;color:#e3f0f3}

.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:3.25rem;padding:.75rem 1.25rem;border-radius:8px;border:2px solid transparent;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;width:100%;
}
.btn-copiar{background:#fff;color:var(--petroleo-escuro);min-height:3.75rem;font-size:1.25rem}
.btn-copiar:hover{background:#e9f3f5}
.btn-prim{background:var(--petroleo);color:#fff}
.btn-prim:hover{background:var(--petroleo-escuro);color:#fff}
.btn-sec{background:var(--cartao);color:var(--petroleo-escuro);border-color:var(--petroleo)}
.btn-sec:hover{background:var(--info-bg)}
.acoes{display:grid;gap:.75rem;margin:1rem 0}
.cta{margin:1.25rem 0 0}

.aviso{
  border-left:6px solid var(--petroleo);background:var(--info-bg);
  border-radius:var(--raio);padding:.9rem 1rem;margin:1rem 0;
}
.aviso p:last-child{margin-bottom:0}
.aviso-forte{background:var(--aviso-bg);border-left-color:var(--aviso-borda)}
.aviso-titulo{font-weight:700;font-size:1.15rem;margin-bottom:.25rem;color:var(--aviso-borda)}

.bloco{
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.1rem 1rem;margin:1.25rem 0;
}
.bloco > :last-child{margin-bottom:0}
ul,ol{padding-left:1.25rem;margin:0 0 .9rem}
li{margin-bottom:.4rem}
.passos{padding-left:1.4rem}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--info-bg);padding:.05em .35em;border-radius:4px;font-weight:700;
}
.tabela{width:100%;border-collapse:collapse;table-layout:fixed;margin:0 0 .9rem}
.tabela th,.tabela td{border:1px solid var(--linha);padding:.6rem .7rem;text-align:left;vertical-align:top;overflow-wrap:break-word}
.tabela thead th{background:var(--info-bg)}
.tabela tbody th{width:38%;font-weight:700}
.nota-pessoal{background:var(--info-bg)}

.rodape{
  max-width:42rem;margin:0 auto;padding:1rem 1rem 2.5rem;font-size:.95rem;
  color:var(--texto-suave);border-top:1px solid var(--linha);overflow-wrap:anywhere;
}

@media (min-width:600px){
  body{font-size:1.125rem}
  h1{font-size:2.1rem}
  .acoes{grid-template-columns:1fr 1fr}
  .btn{width:auto}
  .btn-copiar{width:100%}
  .acoes .btn,.cta .btn{width:100%}
  .cta .btn{width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s ease}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}