/* =====================================================================
   Accuracy — design system aplicado à plataforma.

   As regras vêm do manual da agência, não da minha preferência:
     · raio zero em tudo — "Amostras, fotos, chapas, blocos: todos ortogonais."
     · nenhuma sombra — "não há sistema de sombra"; separação é cor de fundo.
     · nenhuma transparência, nenhum blur.
     · Mango Grotesque SEMPRE em caixa alta, só em display.
     · Segoe UI Light no texto longo; é a fonte mais usada do template.
     · régua laranja vertical abrindo cada bloco de título.
     · no máximo duas cores de fundo; escuro reservado para impacto.
     · movimento mínimo: 120–200ms, fade e deslocamento curto, sem escala.

   Três famílias, nenhuma a mais: Mango Grotesque no display, Segoe UI no
   texto, Creamy Peachy no detalhe manuscrito. Todas servidas do próprio
   servidor — ver /estatico/fontes.css.
   ===================================================================== */


:root{
  /* Prioritárias do manual */
  --acc-orange:#F83600;
  --acc-orange-hot:#FD3700;
  --acc-navy:#38384F;
  --acc-gray:#EBEBEB;
  /* Secundárias */
  --acc-brick:#AA2D29;
  --acc-ink:#191921;
  /* Neutros de uso */
  --acc-050:#F2F2F2;
  --acc-075:#EDEDED;
  --acc-100:#EBEBEB;
  --acc-200:#D8D8D8;
  --acc-400:#BFBFBF;
  /* Rampa medida para tela, não para slide: 500 dá 5,7:1 e 700 dá 11,2:1
     sobre o fundo padrão. Os cinzas do manual reprovam em WCAG AA. */
  --acc-500:#5E5E68;
  --acc-600:#4A4A54;
  --acc-700:#33333B;
  --acc-orange-texto:#C42B00;   /* laranja para texto pequeno; #F83600 só em display */
  --acc-900:#262626;
  --acc-white:#FFFFFF;

  --font-display:"Mango Grotesque",sans-serif;
  --font-body:"Segoe UI",sans-serif;
  --font-mono:"Segoe UI",sans-serif;

  --duracao:160ms;
  --curva:cubic-bezier(0.2,0,0.2,1);
}

/* ---------------------------------------------------------------- base */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--acc-050);
  color:var(--acc-700);
  font:300 16px/1.35 var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* Raio zero e sombra nenhuma: as duas regras mais literais do manual. */
*,*::before,*::after{border-radius:0 !important;box-shadow:none !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

a{color:inherit}
::selection{background:var(--acc-orange);color:#fff}

/* Foco de teclado: régua laranja. Sem isso a tela não se opera sem mouse. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--acc-orange);
  outline-offset:2px;
}

/* Alvo de toque mínimo. */
.acc-btn,.acc-campo,select.acc-campo{min-height:42px}
.acc-tabela button,.acc-tabela select,.acc-tabela input{min-height:36px}

/* --------------------------------------------------------- tipografia */

.acc-display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  color:var(--acc-navy);
  margin:0;
}
.acc-display em{font-style:normal;color:var(--acc-orange)}
.acc-h1{font-size:clamp(44px,7vw,92px)}
.acc-h2{font-size:clamp(30px,4vw,52px)}
.acc-h3{font-size:clamp(22px,2.4vw,32px)}

/* Rótulo estrutural: caixa alta, Segoe, tracking largo. */
.acc-rotulo{
  font:600 11px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--acc-500);
}
.acc-lede{font:300 clamp(16px,1.4vw,19px)/1.5 var(--font-body);color:var(--acc-700);max-width:62ch}
.acc-nota{font:300 13px/1.45 var(--font-body);color:var(--acc-500)}
.acc-mono{font:400 12px/1.4 var(--font-mono);color:var(--acc-500)}
.acc-acento{color:var(--acc-orange-texto)}

/* A régua laranja vertical que abre cada bloco de título. */
.acc-regua{position:relative;padding-left:28px}
.acc-regua::before{
  content:"";position:absolute;left:0;top:4px;
  width:8px;height:calc(100% - 8px);min-height:52px;
  background:var(--acc-orange);
}

/* ------------------------------------------------------------ chapas */

.acc-chapa{background:var(--acc-white);border:1px solid var(--acc-200);padding:22px 24px}
.acc-chapa-cinza{background:var(--acc-075);border:0;padding:22px 24px}
.acc-chapa-escura{background:var(--acc-navy);color:var(--acc-075);padding:22px 24px}
.acc-chapa-escura .acc-display{color:var(--acc-white)}
/* Chapa laranja: só display. Texto pequeno branco sobre #F83600 dá 3,8:1. */
.acc-chapa-laranja{background:var(--acc-orange);color:#fff;padding:22px 24px}
.acc-chapa-laranja .m,.acc-chapa-laranja small,.acc-chapa-laranja p{font-size:15px;font-weight:400}
.acc-chapa-laranja .acc-rotulo{color:rgba(255,255,255,.75)}

/* ----------------------------------------------------------- controles */

.acc-btn{
  display:inline-flex;align-items:center;gap:8px;
  border:0;padding:12px 22px;cursor:pointer;
  background:var(--acc-orange-texto);color:#fff;
  font:600 14px/1 var(--font-body);letter-spacing:.02em;
  text-decoration:none;
  transition:background var(--duracao) var(--curva),color var(--duracao) var(--curva);
}
.acc-btn:hover{background:var(--acc-ink)}
.acc-btn:disabled{background:var(--acc-200);color:var(--acc-500);cursor:not-allowed}
.acc-btn-vazio{background:transparent;color:var(--acc-700);border:1px solid var(--acc-400);font-weight:400}
.acc-btn-vazio:hover{background:transparent;color:var(--acc-orange);border-color:var(--acc-orange)}
.acc-btn-escuro{background:var(--acc-navy)}
.acc-btn-escuro:hover{background:var(--acc-ink)}

.acc-campo{
  width:100%;padding:11px 13px;
  border:1px solid var(--acc-400);background:var(--acc-white);color:var(--acc-700);
  font:300 15px/1.3 var(--font-body);
  transition:border-color var(--duracao) var(--curva);
}
/* Sem :focus{outline:0} — ele vence o :focus-visible por especificidade e
   apaga o anel de teclado. A borda muda no foco de mouse; o anel só no teclado. */
.acc-campo:focus{border-color:var(--acc-orange)}
.acc-campo:focus:not(:focus-visible){outline:0}
.acc-campo::placeholder{color:var(--acc-400)}
label.acc-label{display:block;margin:0 0 6px;font:600 11px/1 var(--font-body);
  text-transform:uppercase;letter-spacing:.12em;color:var(--acc-500)}

/* --------------------------------------------------------------- dados */

.acc-tabela{width:100%;border-collapse:collapse;font-size:14px}
.acc-tabela th{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--acc-400);
  font:600 10.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.12em;color:var(--acc-500);
}
.acc-tabela td{padding:10px;border-bottom:1px solid var(--acc-100);vertical-align:top}
.acc-tabela tbody tr:hover{background:var(--acc-075)}
.acc-num{text-align:right;font-family:var(--font-mono);font-size:13px}

/* Big number: Mango, caixa alta, zero à esquerda abaixo de 10. */
.acc-big{font-family:var(--font-display);font-weight:400;line-height:.85;
  font-size:clamp(52px,6vw,92px);color:var(--acc-navy);letter-spacing:.01em}
.acc-big-laranja{color:var(--acc-orange)}
.acc-chapa-escura .acc-big,.acc-chapa-laranja .acc-big{color:var(--acc-white)}

.acc-pilula{
  display:inline-block;padding:3px 10px;
  border:1px solid var(--acc-400);
  font:600 10.5px/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.1em;
  color:var(--acc-500);
}
.acc-pilula-ok{color:#006B3F;border-color:#006B3F}
.acc-pilula-atencao{color:#8A5200;border-color:#8A5200}
.acc-pilula-ruim{color:var(--acc-brick);border-color:var(--acc-brick)}
.acc-pilula-cheia{background:var(--acc-orange-texto);border-color:var(--acc-orange-texto);color:#fff}

/* ------------------------------------------------------------ estrutura */

.acc-topo{
  display:flex;align-items:center;gap:16px;
  padding:14px 26px;background:var(--acc-white);border-bottom:1px solid var(--acc-200);
  position:sticky;top:0;z-index:30;
}
.acc-topo img{height:22px;width:auto;display:block}
.acc-topo .cresce{flex:1}
.acc-wrap{max-width:1240px;margin:0 auto;padding:30px 26px 120px}

/* Assinatura ACC no canto, como no slide. */
.acc-assinatura{position:fixed;right:20px;bottom:18px;z-index:40;
  display:flex;align-items:center;gap:10px;background:var(--acc-075);padding:9px 12px}
.acc-assinatura img{height:16px;width:auto;display:block;opacity:.9}

@media (max-width:760px){
  .acc-wrap{padding:22px 16px 140px}
  .acc-regua{padding-left:20px}
  .acc-regua::before{width:6px}
  .acc-topo{padding:12px 16px;gap:10px}
}

/* Movimento: só fade e deslocamento curto. */
@media (prefers-reduced-motion:no-preference){
  .acc-entra{animation:accEntra var(--duracao) var(--curva) both}
  @keyframes accEntra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}

/* ---------------------------------------------------------------------
   LOGO
   Um arquivo SVG só, aplicado como máscara: assim a cor vem do CSS e a
   assinatura funciona em laranja sobre claro, branca sobre navy e branca
   sobre laranja sem gerar três arquivos. Nunca escrever "ACC" como texto.
   --------------------------------------------------------------------- */
.acc-logo{
  display:inline-block;
  background-color:currentColor;
  -webkit-mask:url("/estatico/acc.svg") no-repeat center/contain;
          mask:url("/estatico/acc.svg") no-repeat center/contain;
  width:auto;aspect-ratio:1862/619;
}
.acc-logo-sm{height:18px} .acc-logo-md{height:24px} .acc-logo-lg{height:34px}