/* R2 Viagens · autorização de viagem de criança e adolescente (14/09/2026)

   Arquivo separado do styles.css de propósito: o styles.css diz que é gerado pelo
   site.mjs, e uma geração nova apagaria o que estivesse lá dentro.

   A ideia visual é a FOLHA: o documento é papel com linhas pra preencher. Ela aparece
   nos atalhos da página inicial (com a orelha dobrada) e, na página, como a prévia que
   vai se preenchendo enquanto a pessoa digita. O que falta fica como linha em branco com
   o nome do dado embaixo — nunca um vazio mudo. */

/* ---------- menu com um link a mais ---------- */
@media (min-width:901px) and (max-width:1140px){
  .menu{gap:16px}
  .menu a{font-size:14.5px}
}
.menu a[aria-current="page"]{color:var(--barro)}

/* ---------- botão claro, pro fundo azul ---------- */
.bt-claro{background:var(--papel); color:var(--barro); border-color:var(--papel)}
.bt-claro:hover{background:#fff; color:var(--barro)}
.aut-destaque a:focus-visible, .aut-cta a:focus-visible{outline-color:var(--sálvia)}

/* ================= DESTAQUE NA PÁGINA INICIAL ================= */
/* A única seção azul do site. É o destaque que ele pediu, e o azul é o da marca. */
.aut-destaque{background:var(--barro); color:var(--papel)}
.aut-destaque-grade{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,6vw,88px); align-items:center;
}
.aut-destaque .titulo{color:var(--papel)}
.aut-destaque .lead{color:var(--barro-fundo)}
.aut-destaque-txt p{color:#C9D4EC}
.aut-destaque .hero-acoes{margin-top:var(--e3)}

.aut-modelos{display:grid; gap:10px}
.aut-modelos-grupo{font-size:14.5px; font-weight:600; color:var(--barro-fundo); margin:var(--e2) 0 0}
.aut-modelos-grupo:first-child{margin-top:0}
.aut-folha{
  position:relative; display:grid; gap:2px; text-decoration:none;
  background:var(--papel); color:var(--tinta);
  padding:15px 56px 15px 20px; border-radius:3px;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition:background .18s ease;
}
.aut-folha::after{ /* a orelha dobrada */
  content:""; position:absolute; top:0; right:0; width:22px; height:22px;
  background:linear-gradient(to bottom left, transparent 50%, #B9C6E4 50%);
}
.aut-folha b{font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.aut-folha span{font-size:15px; color:var(--tinta-2); line-height:1.45}
.aut-folha:hover{background:#fff}

/* ================= A PÁGINA ================= */
.aut-abre{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,80px); align-items:start;
  margin-top:var(--e5); margin-bottom:var(--e6);
}
.aut-abre-txt{padding-top:var(--e3)}
.aut-abre h1{font-size:clamp(36px,5.2vw,58px); margin-bottom:var(--e3)}
.aut-privado{
  font-size:15.5px; color:var(--tinta-2); margin-top:var(--e4);
  border-left:3px solid var(--sálvia); padding-left:var(--e2);
}
.aut-sem-js{background:var(--sálvia-fundo); border-radius:10px; padding:var(--e3); margin-bottom:var(--e5)}

/* ---------- a consulta ---------- */
.aut-consulta{
  background:var(--nata); border:1px solid var(--linha); border-radius:var(--raio);
  padding:clamp(22px,3.4vw,40px);
}
.aut-consulta-titulo{font-size:26px; margin-bottom:var(--e3)}
.aut-pergunta{border:0; margin:0 0 var(--e3); padding:0; min-width:0}
.aut-pergunta legend, .aut-rotulo{
  display:block; font-size:14.5px; font-weight:600; color:var(--tinta-2);
  margin-bottom:8px; padding:0;
}
.aut-opcoes{display:flex; flex-wrap:wrap; gap:8px}
.aut-op{position:relative; cursor:pointer}
.aut-op input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.aut-op span{
  display:inline-block; border:1.5px solid #968D7C; border-radius:999px;
  padding:9px 17px; font-size:15.5px; font-weight:500; line-height:1.3;
  color:var(--tinta); background:var(--nata);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.aut-op:hover span{border-color:var(--barro)}
.aut-op input:checked + span{background:var(--barro); border-color:var(--barro); color:var(--papel)}
.aut-op input:focus-visible + span{outline:3px solid var(--barro); outline-offset:2px}
.aut-opcoes-p .aut-op span{padding:7px 14px; font-size:14.5px}

.aut-veredito{border-top:1px solid var(--linha); padding-top:var(--e3); margin-top:var(--e2)}
.aut-v-titulo{
  font-family:var(--display); font-size:clamp(24px,2.6vw,30px); font-weight:600;
  line-height:1.15; letter-spacing:-.015em; margin-bottom:10px;
}
.aut-veredito[data-precisa="sim"] .aut-v-titulo{color:var(--barro)}
.aut-v-texto{font-size:16.5px; margin-bottom:8px}
.aut-v-fonte{font-size:13.5px; color:var(--tinta-2); margin-bottom:var(--e3)}
.aut-veredito[data-precisa="nao"] .aut-v-fonte{margin-bottom:0}

/* ---------- preencher ---------- */
.aut-preencher-lead{margin-bottom:var(--e4)}
.aut-trabalho{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,56px); align-items:start;
}
.aut-form{min-width:0}
.aut-bloco{border:0; margin:0 0 var(--e4); padding:0 0 var(--e4); border-bottom:1px solid var(--linha); min-width:0}
.aut-bloco > legend{
  float:left; width:100%; padding:0; margin-bottom:6px;
  font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.01em;
}
.aut-bloco > legend + *{clear:both}
.aut-ajuda{font-size:14.5px; color:var(--tinta-2); margin:0 0 var(--e2); max-width:60ch}
.campo .aut-ajuda{margin:8px 0 0}
.aut-form .campo{margin-bottom:var(--e2); min-width:0}
.aut-form label:not(.aut-op):not(.aut-marca){
  display:block; font-size:14.5px; font-weight:600; color:var(--tinta-2); margin-bottom:6px;
}
.aut-form label small{font-weight:400}
.aut-form input:not([type="radio"]):not([type="checkbox"]), .aut-form select{
  width:100%; min-height:48px; padding:11px 14px;
  border:1.5px solid #968D7C; border-radius:10px;
  background:var(--nata); color:var(--tinta); font:inherit; font-size:16px; outline:none;
  transition:border-color .18s ease;
}
.aut-form input:focus, .aut-form select:focus{border-color:var(--barro); box-shadow:0 0 0 3px var(--barro-fundo)}
.aut-form input::placeholder{color:#767B88}
.aut-grade{display:grid; gap:0 14px}
.aut-grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.aut-grade-doc{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1fr)}
.aut-grade-cidade{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 88px}
.aut-grade-nasc{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 88px}
.aut-grade-local{grid-template-columns:minmax(0,1.3fr) 88px minmax(0,1fr)}
.aut-marca{display:flex; align-items:center; gap:10px; font-size:15.5px; cursor:pointer; margin:4px 0 var(--e2)}
.aut-marca input{width:20px; height:20px; margin:0; flex:none; accent-color:var(--barro)}
.aut-unico{
  margin:calc(-1 * var(--e2)) 0 var(--e4); padding:var(--e2) var(--e3);
  background:var(--nata); border:1px solid var(--linha); border-radius:10px;
}
.aut-unico .aut-marca{margin:0 0 4px; font-weight:600}
.aut-unico .aut-ajuda{margin:0}
.aut-atalhos{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.aut-atalhos button{
  font:inherit; font-size:14px; background:transparent; color:var(--tinta); cursor:pointer;
  border:1.5px solid #968D7C; border-radius:999px; padding:4px 13px;
}
.aut-atalhos button:hover{border-color:var(--barro)}
.aut-alerta{font-size:14px; font-weight:500; color:#8A4200; margin:6px 0 0}

/* ---------- a folha ---------- */
.aut-doc{position:sticky; top:92px; min-width:0}
.aut-doc-cab{margin-bottom:var(--e2)}
.aut-doc-titulo{font-family:var(--display); font-size:20px; font-weight:600; margin:0 0 2px}
.aut-doc-cab .aut-ajuda{margin:0}
.aut-baixar{margin-bottom:var(--e3)}
.aut-faltam p{font-size:15px; margin:0 0 8px}
.aut-chips{list-style:none; margin:0 0 var(--e2); padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
/* tracejado = "ainda falta", a mesma língua das linhas em branco da folha */
.aut-chips button{
  font:inherit; font-size:13.5px; background:transparent; color:var(--tinta); cursor:pointer;
  border:1.5px dashed #8C8472; border-radius:999px; padding:3px 12px;
}
.aut-chips button:hover{border-color:var(--barro); border-style:solid}
.aut-chips-mais{font-size:13.5px; color:var(--tinta-2); padding:0 4px}
#aut-baixar{border:0; cursor:pointer; font-family:inherit}
#aut-baixar:disabled{opacity:.6; cursor:progress}
.aut-status{font-size:14.5px; color:var(--tinta-2); margin:10px 0 0}
.aut-status:empty{display:none}

.folha-caixa{container-type:inline-size}
/* A folha tem as proporções do A4 e o texto na mesma escala do PDF (10,5 pt em 210 mm):
   o que aparece aqui é o que sai no papel. */
.folha{
  background:#fff; color:#161616; aspect-ratio:210/297;
  padding:9.4cqw 9.5cqw 7cqw;
  font-family:Helvetica, Arial, sans-serif; font-size:1.76cqw; line-height:1.95;
  border:1px solid var(--linha); border-radius:2px;
  box-shadow:0 22px 50px -32px rgba(16,27,51,.5);
}
.folha p{max-width:none; margin:0}
.folha .d-titulo{font-weight:700; font-size:1.33em; text-align:center; line-height:1.3; letter-spacing:.01em}
.folha .d-sub{text-align:center; line-height:1.5}
.folha .d-fund{text-align:center; font-size:.81em; color:#5A5A5A; line-height:1.4; margin-bottom:1.6em}
.folha .d-par{margin-bottom:.22em}
.folha .d-local{margin-top:.8em}
.folha .d-aviso{font-weight:700; font-size:.9em; line-height:1.45; color:#2A2A2A; margin:.4em 0 .8em}
.folha .d-nota{font-size:.76em; color:#5A5A5A; line-height:1.4; margin-top:.5em}
.folha .dc{font-weight:700; border-bottom:1px solid #3A3A3A}
.folha .dc-vazio{
  display:inline-block; position:relative; vertical-align:-.22em;
  width:calc(var(--w) * .5em); height:1.1em;
  font-weight:400; cursor:pointer;
}
.folha .dc-vazio i{
  position:absolute; left:-3em; right:-3em; top:100%; pointer-events:none;
  font-style:normal; font-size:.53em; line-height:1.25; color:#6E6E6E;
  text-align:center; white-space:nowrap;
}
.folha .dc-vazio:hover{background:var(--sálvia-fundo)}
.folha .d-assin{display:flex; justify-content:space-around; gap:6%; margin-top:3.4em; text-align:center}
.folha .d-assin > div{flex:0 1 45%; display:grid}
.folha .d-assin-1 > div{flex-basis:56%}
.folha .d-assin span{display:block; border-top:1px solid #2A2A2A; margin-bottom:.35em}
.folha .d-assin b{font-weight:400; font-size:.9em; line-height:1.35}
.folha .d-assin small{font-size:.7em; color:#6E6E6E; line-height:1.3}

/* ---------- fontes e a agência ---------- */
.aut-fontes{font-size:14px; color:var(--tinta-2); margin-top:var(--e4); max-width:72ch}
.aut-cta{background:var(--barro); color:var(--papel)}
.aut-cta .titulo{color:var(--papel); margin-bottom:var(--e2)}
.aut-cta .lead{color:var(--barro-fundo); margin:0}
.aut-cta-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e4); align-items:center}

/* ---------- celular ---------- */
.aut-barra{display:none}
@media (max-width:900px){
  .aut-destaque-grade, .aut-abre, .aut-trabalho, .aut-cta-in{grid-template-columns:1fr}
  .aut-abre{margin-top:var(--e4); margin-bottom:var(--e5); gap:var(--e4)}
  .aut-abre-txt{padding-top:0}
  .aut-doc{position:static}
  .aut-barra{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; bottom:12px; z-index:50; margin:0 0 var(--e4);
    background:var(--nata); border:1px solid var(--linha); border-radius:14px;
    padding:8px 8px 8px 16px; box-shadow:0 10px 30px -14px rgba(16,27,51,.45);
  }
  .aut-barra span{font-size:15px; font-weight:600}
  .aut-barra .bt{padding:10px 18px; font-size:15px}
  .pagina-aut .zap{display:none}
  .aut-grade-doc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aut-grade-doc .campo:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .aut-grade-2, .aut-grade-local{grid-template-columns:1fr}
  .aut-grade-local{grid-template-columns:minmax(0,1fr) 88px}
  .aut-grade-local .campo:last-child{grid-column:1/-1}
  .aut-grade-cidade, .aut-grade-nasc{grid-template-columns:minmax(0,1fr) 88px}
  .aut-grade-cidade .campo:first-child, .aut-grade-nasc .campo:first-child{grid-column:1/-1}
  .aut-grade-doc{grid-template-columns:1fr}
  /* no celular a folha fica estreita demais pra letra na escala do A4: o texto cresce e a
     folha estica pra baixo. Aqui ela é conferência, não retrato fiel. */
  .folha{padding:8cqw 7cqw 7cqw; font-size:2.7cqw}
}