/* ===========================================================
   A'CASTRO CONSULTORIA · LP de credenciamento de ECVs no Detran-RJ
   BASE: so' o que e' MARCA e vale para qualquer pagina da A'Castro
   Consultoria (tokens, botoes, cabecalho, titulos, formulario, rodape,
   modo limpo). O LAYOUT desta pagina fica em pagina.css (DS secao 28).
   Rodada 2 (2026-09-23): cabecalho e rodape COPIADOS da LP ISO 9001
   (LP-ISO-9001/assets/base.css, versao final aprovada, DS secao 33),
   e o dourado champanhe entrou so' nos detalhes (DS secao 34).
   =========================================================== */

:root{
  /* azuis da marca, medidos do logo e do site no ar */
  --azul-900:#001824;
  --azul-800:#00243C;
  --azul-700:#00486C;   /* COR DA MARCA */
  --azul-600:#005478;
  --azul-500:#046C90;

  /* acao: PRATA metalico. Continua sendo a unica cor de botao. */
  --prata:#C9D6DE;
  --prata-esc:#8E9BA3;
  --prata-metal:linear-gradient(145deg,#EDF2F5 0%,#AEBCC5 42%,#DDE5EA 66%,#8E9BA3 100%);

  /* DETALHE: dourado champanhe discreto (decisao do dono, 2026-09-23, "um misto
     dos dois"). So' em filete de olho, palavra de destaque do titulo e traco de
     icone. NUNCA em botao e nunca chapado em area grande. DS secao 34. */
  --champanhe:#D6C29B;          /* traco, filete e brilho em fundo escuro */
  --champanhe-claro:#EFE3C6;
  --champanhe-tinta:#8A6B3C;    /* destaque de titulo e rotulo em fundo claro: 4,9:1 no branco */
  --champanhe-metal:linear-gradient(158deg,#F6EDD8 0%,#CDB488 40%,#F1E5C8 60%,#A98F62 100%);

  /* claros */
  --claro:#EFF3F6;
  --claro-2:#E4EBF0;
  --branco:#FFFFFF;
  --cinza-tx:#4A5560;
  --cinza-2:#5A6B78;

  /* ritmo */
  --gut:clamp(20px,5vw,64px);
  --maxw:1200px;
  --r-pill:999px;
  --h-topo:88px;      /* altura do header fixo */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--cinza-tx);background:var(--branco);line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.nao-quebra{white-space:nowrap}
.tabular{font-variant-numeric:tabular-nums}
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* quebra de linha que so' vale no computador; no celular o texto corre livre */
@media (max-width:860px){ .quebra-desk{display:none} }
/* e a que so' vale no celular (quebra pelo sentido, ficha regra 19) */
@media (min-width:861px){ .quebra-cel{display:none} }

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:1.05em 1.9em;border-radius:var(--r-pill);
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
  line-height:1;font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn .seta{flex:0 0 auto;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.btn:hover .seta{transform:translateX(4px)}
/* Prata METALICO, nao prata chapado: o swoosh do logo ja' e' feito de
   dois tons (#909090 e #B4B4B4). O degrade repete essa leitura. */
.btn--acao{
  background:var(--prata-metal);color:var(--azul-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(0,20,34,.26);
}
.btn--acao:hover{background:linear-gradient(145deg,#F7FAFC 0%,#C2CFD7 42%,#EBF1F5 66%,#A2AFB8 100%)}
.btn--fantasma{background:transparent;color:var(--branco);border-color:rgba(255,255,255,.32)}
.btn--fantasma:hover{border-color:var(--branco)}
/* azul-escuro e contorno: acao em fundo claro (DS secao 27) */
.btn--escuro{background:var(--azul-900);color:var(--branco);box-shadow:0 8px 20px rgba(0,24,36,.22)}
.btn--escuro:hover{background:var(--azul-700)}
.btn--contorno{background:transparent;color:var(--azul-800);border-color:rgba(0,72,108,.35)}
.btn--contorno:hover{border-color:var(--azul-700);color:var(--azul-700)}
.btn--compacto{padding:.85em 1.5em;font-size:.85rem}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ===========================================================
   CABECALHO, copiado da LP ISO 9001 (base.css, bloco "HEADER — vidro
   escuro"), sem mudar nada alem do botao, que aqui leva ao cadastro.
   =========================================================== */
/* fixo e POR CIMA do hero: em sticky ele ocupava espaco no fluxo e o
   branco do body aparecia atras do vidro. */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(0,19,31,.76);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(201,214,222,.16);
  box-shadow:0 10px 34px rgba(0,10,20,.22);
}
/* navegador sem backdrop-filter: cai para opaco, nunca para ilegivel */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo{background:rgba(0,19,31,.96)}
}
.topo__in{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topo__marca img{height:58px;width:auto}
/* logo horizontal + frase de autoridade (pedido do cliente, 2026-09-15) */
.topo__id{display:flex;align-items:center;gap:22px;min-width:0}
.topo__marca{flex:0 0 auto}
.topo__id .topo__marca img{height:46px}
.topo__tag{
  margin:0;padding-left:22px;border-left:1px solid rgba(201,214,222,.3);
  font-size:.66rem;font-weight:600;line-height:1.5;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(255,255,255,.84);white-space:nowrap;
}
/* quebra fixa em 3 linhas pelo <br>: solta, sobrava "AUTOMOTIVO" sozinho numa 3a linha */
@media (min-width:1121px){ .topo__in{padding-block:18px} }
@media (max-width:1120px){ .topo__tag{display:none} }
/* celular: logo horizontal + botao na mesma linha so' cabem apertando os dois */
@media (max-width:520px){
  .topo__in{gap:12px}
  .topo__id .topo__marca img{height:28px}
  .topo__contato .btn--compacto{padding:.75em 1em;font-size:.72rem;white-space:nowrap}
  .topo__contato .btn--compacto .seta{display:none}
  /* 360px: logo + botao passavam 4px da tela */
  @media (max-width:380px){
    .topo__id .topo__marca img{height:25px}
    .topo__contato .btn--compacto{padding:.72em .8em;font-size:.68rem}
  }
}
.topo__contato{
  display:flex;align-items:center;gap:26px;
  font-size:.82rem;font-weight:600;color:rgba(255,255,255,.92);
}
.topo__contato span{display:block;font-weight:400;font-size:.8rem;color:rgba(255,255,255,.62)}
.topo__contato a:not(.btn){color:var(--branco);text-decoration:none}
.topo__contato a:not(.btn):hover{text-decoration:underline}
@media (max-width:860px){ .topo__contato .so-desktop{display:none} }

/* ---------- superficies do navegador ---------- */
::selection{background:var(--prata);color:var(--azul-900)}
html{scrollbar-color:var(--azul-600) var(--claro);scrollbar-width:thin;scroll-padding-top:calc(var(--h-topo) + 12px)}
:focus-visible{outline:3px solid var(--prata);outline-offset:3px;border-radius:4px}
.claro :focus-visible{outline-color:var(--azul-500)}
input,textarea,select{caret-color:var(--azul-500)}
a:not(.btn):not(.topo__marca){text-underline-offset:.22em;text-decoration-thickness:1.5px}
a,button,summary,select,input{touch-action:manipulation;-webkit-tap-highlight-color:rgba(201,214,222,.25)}
.pular{
  position:absolute;left:12px;top:-80px;z-index:100;
  padding:12px 18px;border-radius:10px;background:var(--prata);color:var(--azul-900);
  font-weight:700;font-size:.9rem;
}
.pular:focus{top:12px}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* ---------- secoes, titulos e olho ---------- */
.secao{padding-block:clamp(64px,7.5vw,108px)}
.secao--branca{background:var(--branco)}
.secao--clara{background:var(--claro)}

/* olho: filete horizontal champanhe antes do texto (composicao dos mockups
   do Alex, 23/09). Mesmo tamanho na pagina inteira (ficha, regra 21). Bloco,
   nao flex: em flex cada <span> virava item separado e ganhava o gap. */
.olho{
  display:block;position:relative;padding-left:40px;
  margin:0 0 18px;font-size:.78rem;font-weight:700;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--azul-600);
}
.olho::before{
  content:"";position:absolute;left:0;top:.8em;width:28px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,var(--champanhe-tinta),var(--champanhe));
}
.escuro .olho{color:rgba(221,230,236,.9)}
.escuro .olho::before{background:linear-gradient(90deg,var(--champanhe),var(--champanhe-claro))}
/* text-transform:uppercase come o "s" de ECVs e mostra "ECVS": o "s" vai num
   span que anula a caixa alta (ficha do Pipe, 2026-09-21) */
.sigla-s{text-transform:none}

.titulo{
  margin:0 0 16px;color:var(--azul-900);
  font-size:clamp(1.7rem,3.4vw,2.45rem);font-weight:800;
  line-height:1.14;letter-spacing:-.025em;
}
/* destaque do titulo: champanhe. Em fundo claro, a tinta escura (4,9:1);
   em fundo escuro, o champanhe metalico recortado no texto. */
.titulo em{font-style:normal;color:var(--champanhe-tinta)}
.escuro .titulo{color:var(--branco)}
.escuro .titulo em,
.escuro .titulo em .palavra{
  color:var(--champanhe);background:var(--champanhe-metal);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  /* respiro para o acento nao sair da caixa do recorte (pipe-roteiro, armadilha 1) */
  padding-top:.16em;margin-top:-.16em;padding-right:.04em;
}
.escuro .titulo em .palavra{display:inline-block}
@media (min-width:861px){ .titulo em{white-space:nowrap} }
.texto{margin:0;font-size:1.02rem;line-height:1.65;color:var(--cinza-tx)}
.escuro .texto{color:rgba(255,255,255,.84)}

/* balao "Fale com um especialista" */
.nota{
  display:flex;align-items:flex-start;gap:9px;margin:14px 0 0;
  font-size:.9rem;line-height:1.5;color:var(--cinza-2);
}
.nota svg{flex:0 0 20px;margin-top:1px;color:var(--azul-600)}
.nota a{color:var(--azul-700);font-weight:600;text-decoration:underline;text-decoration-color:rgba(0,72,108,.4)}
.escuro .nota{color:rgba(255,255,255,.82)}
.escuro .nota svg{color:var(--champanhe)}
.escuro .nota a{color:var(--branco);text-decoration-color:rgba(214,194,155,.6)}
.escuro .nota a:hover{text-decoration-color:var(--champanhe)}

/* ---------- PENDENCIAS PARA O ALEX (modo interno) ----------
   frase que depende de confirmacao: sublinhado tracejado ambar;
   o bloco termina num .aviso-pend. Com ?limpo=1 os dois somem. */
.pend-frase{
  text-decoration-line:underline;text-decoration-style:dashed;
  text-decoration-color:rgba(203,128,16,.85);
  text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-skip-ink:none;
}
.escuro .pend-frase{text-decoration-color:rgba(250,190,90,.9)}
.aviso-pend{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:30px;padding:16px 19px;
  background:rgba(250,168,40,.1);border:1px dashed rgba(203,128,16,.5);border-radius:12px;
  font-size:.85rem;line-height:1.55;color:#7E5205;text-align:left;
}
.aviso-pend svg{flex:0 0 18px;margin-top:2px}
.aviso-pend ul{margin:6px 0 0;padding-left:18px}
.aviso-pend li + li{margin-top:3px}
.escuro .aviso-pend{background:rgba(250,168,40,.12);border-color:rgba(250,168,40,.45);color:#FFD68F}
.escuro .aviso-pend b{color:#EDF2F5}
/* placeholder visivel, dado que o cliente ainda nao mandou (igual a LP ISO 9001) */
.pend{
  color:#F5A524;background:rgba(250,168,40,.1);
  border:1px dashed rgba(250,168,40,.5);
  border-radius:8px;padding:.04em .34em;display:inline-block;
}
/* titulo animado quebra o texto em <span class="palavra"> inline-block, e o sublinhado
   do pai nao desce para inline-block: a palavra repete o sublinhado ela mesma */
:not(.limpo) .pend-frase .palavra{text-decoration-line:underline;text-decoration-style:dashed;text-decoration-color:rgba(203,128,16,.85);text-decoration-thickness:1.5px;text-underline-offset:.28em;text-decoration-skip-ink:none}
.escuro .pend-frase .palavra{text-decoration-color:rgba(250,190,90,.9)}
html.limpo .pend-frase .palavra{text-decoration:none}
html.limpo .aviso-pend{display:none!important}
html.limpo .pend-frase{text-decoration:none}
html.limpo .pend{display:none!important}

/* ---------- lista com check ---------- */
.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.lista-check li{display:flex;gap:13px;align-items:flex-start;font-size:.96rem;line-height:1.5}
.lista-check svg{flex:0 0 22px;margin-top:1px}

/* ---------- campos do formulario (tema claro) ---------- */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
@media (max-width:540px){ .campos{grid-template-columns:1fr} }
.campo{display:flex;flex-direction:column;gap:7px;min-width:0}
.campo--full{grid-column:1 / -1}
.campo label{font-size:.83rem;font-weight:600;color:var(--azul-900)}
.campo input,.campo select{
  font:inherit;font-size:.93rem;color:var(--azul-900);
  background:#F6F9FB;border:1.5px solid rgba(0,72,108,.22);border-radius:10px;
  padding:.78em .85em;width:100%;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.campo input::placeholder{color:#5E6E79}
.campo input:hover,.campo select:hover{border-color:rgba(0,72,108,.4)}
.campo input:focus-visible,.campo select:focus-visible{outline:none;border-color:var(--azul-500);background:var(--branco);box-shadow:0 0 0 3px rgba(4,108,144,.16)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--azul-500);background:var(--branco);box-shadow:0 0 0 3px rgba(4,108,144,.16)}
.campo select{
  appearance:none;cursor:pointer;padding-right:2.4em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%2300486C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9em center;background-size:12px;
}
.campo.erro input,.campo.erro select{border-color:#C0392B;background:#FDF4F3}
.campo__erro{display:none;margin:0;font-size:.79rem;color:#B3261E;align-items:center;gap:6px}
.campo.erro .campo__erro{display:flex}

/* ===========================================================
   RODAPE, copiado da LP ISO 9001 (base.css, bloco "CTA final + rodape"
   e as quebras da frase de autoridade), DS secao 33a.
   =========================================================== */
.rodape{background:var(--azul-900);color:rgba(255,255,255,.66);padding-block:clamp(44px,5.4vw,64px) 24px}
/* a coluna da marca em 1.5fr: com a frase de autoridade em caixa alta, 1.35fr
   deixava 249px uteis e a linha mais longa pede 269,6px (medido na LP ISO 9001). */
.rodape__grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,6vw,86px);row-gap:34px;align-items:start;
  padding-bottom:clamp(30px,3.4vw,40px);border-bottom:1px solid rgba(255,255,255,.12);
}
/* 1181px e' a largura que manda no rodape, medida na LP ISO 9001: abaixo dela a
   coluna da marca nao da' os 269,6px que a frase de autoridade em caixa alta pede. */
@media (max-width:1181px){
  .rodape__grid{grid-template-columns:1fr 1fr;row-gap:32px}
  .rodape__marca{grid-column:1 / -1}
}
@media (max-width:620px){ .rodape__grid{grid-template-columns:1fr;row-gap:30px} }
/* simbolo e frase de autoridade lado a lado, separados pelo filete da marca */
.rodape__marca-topo{display:flex;align-items:center;gap:clamp(16px,1.8vw,22px)}
.rodape__marca-topo img{flex:0 0 auto;height:56px;width:auto;margin:0}
/* frase de autoridade em caixa alta, as tres linhas do desenho do cliente */
.rodape__autoridade{
  margin:0;padding-left:clamp(16px,1.8vw,22px);border-left:1px solid rgba(255,255,255,.2);
  font-size:.72rem;font-weight:700;line-height:1.7;letter-spacing:.085em;
  text-transform:uppercase;color:var(--branco);
}
/* frase de posicionamento, peso normal (o Alex pediu sem negrito, 22/09) */
.rodape__lema{
  margin:20px 0 0;max-width:42ch;
  font-size:.92rem;font-weight:400;line-height:1.6;color:var(--branco);
}
/* redes: so' Instagram e Facebook, os dois perfis que existem.
   `.rodape .x` e nao so' `.x`: `.rodape ul` pesa (0,1,1) e atropelaria display e gap. */
.rodape .rodape__redes{margin:20px 0 0;display:flex;gap:10px}
.rodape__redes a{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;
  touch-action:manipulation;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.rodape__redes a:hover{
  color:var(--azul-900);background:var(--prata);border-color:var(--prata);
  transform:translateY(-2px);text-decoration:none;
}
.rodape h3{
  margin:0 0 16px;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--branco);
}
/* a lista comeca na mesma altura da frase de autoridade */
.rodape__col{padding-top:6px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:.88rem;line-height:1.5}
.rodape__contato li,.rodape__solucoes li{display:grid;gap:2px;align-content:start}
.rodape .rodape__contato,.rodape .rodape__solucoes{gap:16px}
.rodape__rot,.rodape__solucoes b{color:rgba(255,255,255,.62);font-weight:600;font-size:.84rem}
.rodape__solucoes b{color:var(--branco);font-weight:700}
.rodape__solucoes span{color:rgba(255,255,255,.66)}
.rodape__contato a{color:var(--branco);word-break:break-word}
.rodape a:hover{color:var(--prata);text-decoration:underline}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  padding-top:clamp(20px,2.2vw,26px);font-size:.8rem;color:rgba(255,255,255,.5);
}
/* no celular a linha de copyright quebra em duas e deixava "reservados." sozinha */
.rodape__base span{text-wrap:balance}
@media (max-width:420px){
  .rodape__marca-topo{gap:14px}
  .rodape__marca-topo img{height:48px}
  .rodape__autoridade{padding-left:14px;font-size:.7rem;letter-spacing:.045em}
}
@media (max-width:370px){
  .quebra-rodape{display:none}
  .rodape__autoridade{text-wrap:balance}
}
@media (prefers-reduced-motion:reduce){ .rodape__redes a:hover{transform:none} }