/*
 * Checklist ESEN — protótipo (Etapa A)
 * base.css — tokens do design system (docs/design-system.md, seção 4), reset, tipografia e utilitários.
 * REGRA: nenhuma tela define cor, tamanho de fonte, raio ou sombra fora destes tokens.
 */

/* =========================================================================
   1. TOKENS (bloco final do design-system.md — copiado sem alterações)
   ========================================================================= */
:root {
  color-scheme: light;

  /* ===================== COR: base clara (DESIGN.md §2) ===================== */
  /* Hierarquia por tom: fundo cinza-claro < superfície branca. Painéis sem contorno nem sombra. */
  --cor-fundo: #F4F6F8;
  --cor-superficie-1: #FFFFFF;          /* barra lateral, barras, painéis, cabeçalhos */
  --cor-superficie-2: #F0F2F5;          /* cabeçalho de tabela, hover de linha, campo desabilitado */
  --cor-superficie-3: #E6E9EE;          /* item selecionado neutro, menus, trilho de progresso, avatar */
  --cor-campo: #FFFFFF;                 /* fundo de input/select/textarea e botão secundário */
  --cor-borda-sutil: #E3E6EA;           /* divisórias entre linhas (decorativa) */
  --cor-borda: #E3E6EA;                 /* separações estruturais (decorativa) */
  --cor-borda-botao: #CBD1D8;           /* contorno do botão secundário e chip */
  --cor-borda-controle: #858F9B;        /* contorno de input/select/checkbox (3,3:1) */
  --cor-borda-controle-hover: #5B6570;
  --cor-texto: #1B2430;
  --cor-texto-2: #4A5563;
  --cor-texto-3: #69737F;
  --cor-texto-desabilitado: #9AA3AD;    /* somente controles desabilitados */
  --cor-sobreposicao: rgba(27, 36, 48, 0.45);

  /* ===================== COR: ação única (azul ESEN) ===================== */
  --cor-destaque: #1D5FD1;
  --cor-destaque-hover: #174FB0;
  --cor-destaque-pressionado: #143F8C;
  --cor-sobre-destaque: #FFFFFF;
  --cor-destaque-fundo: #E8F0FC;        /* item ativo, chip/opção selecionados */
  --cor-destaque-texto: #1D5FD1;
  --cor-foco: #1D5FD1;
  --anel-foco: 0 0 0 3px rgba(29, 95, 209, 0.25);

  /* ===================== STATUS (texto escuro sobre fundo suave, sem borda) ===================== */
  --cor-sucesso: #138A5E;               /* sólido: só a resposta "Conforme" marcada */
  --cor-sucesso-contorno: #138A5E;
  --cor-sucesso-texto: #11704F;
  --cor-sucesso-fundo: #E5F4EE;
  --cor-sucesso-borda: #9BD3BC;
  --cor-sobre-sucesso: #FFFFFF;

  --cor-perigo: #C4321F;                /* sólido: "Não conforme" e confirmação destrutiva final */
  --cor-perigo-hover: #A82A1A;
  --cor-perigo-contorno: #C4321F;
  --cor-perigo-texto: #B42318;
  --cor-perigo-fundo: #FCEBE9;
  --cor-perigo-borda: #F1B4AC;
  --cor-sobre-perigo: #FFFFFF;

  --cor-atencao-texto: #9A4A00;
  --cor-atencao-fundo: #FDF0E1;
  --cor-atencao-borda: #F2C48F;

  --cor-processo: #1D5FD1;              /* barras de envio de foto */
  --cor-processo-texto: #1D5FD1;
  --cor-processo-fundo: #E8F0FC;
  --cor-processo-borda: #A9C3EE;

  --cor-neutro-texto: #4A5563;
  --cor-neutro-fundo: #EEF0F3;
  --cor-neutro-borda: #C5CBD3;
  --cor-neutro-selecionado: #4A5563;    /* N/A marcado */
  --cor-sobre-neutro-selecionado: #FFFFFF;

  /* ===================== MARCA (só logotipo e marcador do menu ativo) ===================== */
  --marca-forma: #F6C445;
  --marca-traco: #111315;

  /* ===================== DOCUMENTO (relatório PDF, sempre claro) ===================== */
  --doc-papel: #FFFFFF;
  --doc-texto: #15181C;
  --doc-texto-2: #4A535C;
  --doc-texto-3: #69727C;
  --doc-regra: #D5D9DE;
  --doc-regra-forte: #15181C;
  --doc-cabecalho: #F1F3F5;             /* cabeçalho de tabela, faixa de contagem, placeholder de foto */
  --doc-sucesso: #11673A;
  --doc-perigo: #A3161C;
  --doc-perigo-fundo: #FBEBEC;
  --doc-processo: #0B5A9C;
  --doc-marca: #15181C;
  --doc-marca-destaque: #F6C445;

  /* ===================== TIPOGRAFIA ===================== */
  --fonte-texto: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Geist Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-negrito: 700;                  /* só logotipo e "Não conforme" */

  /* desktop (≥ 1024) */
  --fs-pagina: 24px;      --lh-pagina: 32px;
  --fs-secao: 17px;       --lh-secao: 24px;
  --fs-painel: 15px;      --lh-painel: 20px;
  --fs-corpo: 14px;       --lh-corpo: 20px;
  --fs-rotulo: 13px;      --lh-rotulo: 16px;
  --fs-legenda: 12px;     --lh-legenda: 16px;
  --fs-indicador: 32px;   --lh-indicador: 36px;
  --fs-codigo: 13px;      --lh-codigo: 16px;
  --fs-barra-titulo: 20px; --lh-barra-titulo: 28px;

  /* toque (< 1024) */
  --fs-pagina-toque: 22px;    --lh-pagina-toque: 28px;
  --fs-pergunta: 20px;        --lh-pergunta: 28px;
  --fs-secao-toque: 18px;     --lh-secao-toque: 24px;
  --fs-corpo-toque: 17px;     --lh-corpo-toque: 24px;
  --fs-rotulo-toque: 15px;    --lh-rotulo-toque: 20px;
  --fs-legenda-toque: 14px;   --lh-legenda-toque: 20px;
  --fs-indicador-toque: 28px; --lh-indicador-toque: 32px;
  --fs-codigo-toque: 15px;    --lh-codigo-toque: 20px;
  --fs-nav-inferior: 13px;    --lh-nav-inferior: 16px;

  /* documento A4 (px a 96 dpi) */
  --fs-doc-titulo: 22px;   --lh-doc-titulo: 28px;
  --fs-doc-secao: 13px;    --lh-doc-secao: 18px;
  --fs-doc-corpo: 12px;    --lh-doc-corpo: 18px;
  --fs-doc-tabela: 11.5px; --lh-doc-tabela: 16px;
  --fs-doc-rotulo: 10.5px; --lh-doc-rotulo: 14px;
  --fs-doc-rodape: 10px;   --lh-doc-rodape: 14px;
  --fs-doc-codigo: 15px;   --lh-doc-codigo: 20px;

  /* ===================== ESPAÇO (grade de 4 px) ===================== */
  --esp-0-5: 2px;
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 20px;
  --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px;

  /* ===================== FORMA ===================== */
  --raio-1: 4px;    /* badges, selo, kbd, marcadores, barras de progresso */
  --raio-2: 6px;    /* botões, campos, chips, miniaturas, avatar */
  --raio-3: 10px;    /* painéis, tabelas, faixa de indicadores */
  --raio-4: 12px;    /* modal, gaveta, folha inferior, toast, menu */
  --borda-largura: 1px;
  --borda-selecao: 2px;       /* opção de resposta marcada */
  --borda-foco: 2px;
  --foco-afastamento: 2px;
  --borda-marcador: 3px;      /* filete de item ativo, filete de NC */

  /* ===================== ELEVAÇÃO ===================== */
  --sombra-sobreposicao: 0 8px 24px rgba(27, 36, 48, 0.12);
  --sombra-nenhuma: none;

  /* ===================== ALTURAS ===================== */
  /* desktop */
  --altura-controle-compacto: 32px;  /* só em tabelas, paginação e filtros */
  --altura-controle: 40px;
  --altura-linha-tabela: 48px;
  --altura-linha-tabela-dupla: 56px; /* cliente + usina em duas linhas (notebook) */
  --altura-cabecalho-tabela: 40px;
  --altura-item-nav: 40px;
  --altura-item-menu: 36px;
  --altura-aba: 44px;
  --altura-chip: 32px;
  --altura-badge: 24px;
  --altura-painel-cab: 56px;
  --altura-painel-rodape: 48px;
  --altura-barra-superior: 56px;
  /* toque */
  --alvo-minimo: 48px;
  --intervalo-alvos: 8px;
  --altura-controle-toque: 56px;
  --altura-segmento-toque: 72px;
  --altura-linha-lista-toque: 72px;
  --altura-item-menu-toque: 48px;
  --altura-aba-toque: 48px;
  --altura-chip-toque: 48px;
  --altura-badge-toque: 32px;
  --altura-nav-inferior: 64px;
  --altura-faixa-demo: 28px;
  --altura-barra-acao: 108px;        /* 8 + estado 24 + 8 + botões 56 + 12, mais a área segura */

  /* ===================== ÍCONES ===================== */
  --icone-p: 16px;
  --icone-m: 20px;
  --icone-g: 24px;
  --traco-icone: 1.75;
  --traco-icone-toque: 2;
  --traco-icone-status: 2.25;        /* ícones de 14–16 px em badges e rótulos */

  /* ===================== LAYOUT ===================== */
  --largura-lateral: 232px;
  --largura-lateral-recolhida: 64px;
  --largura-conteudo-max: 1440px;
  --largura-formulario: 720px;
  --largura-leitura: 720px;
  --largura-indice-preenchimento: 264px;
  --largura-busca: 320px;
  --largura-modal: 560px;
  --largura-modal-g: 800px;
  --largura-gaveta: 480px;
  --largura-gaveta-nav: 280px;
  --largura-menu-min: 200px;
  --largura-menu-max: 320px;
  --largura-toast: 400px;
  --largura-login: 400px;
  --margem-pagina-desktop: 24px;
  --margem-pagina-tablet: 24px;
  --margem-pagina-celular: 16px;
  --calha: 24px;
  --calha-celular: 16px;
  --colunas: 12;
  /* Breakpoints (referência; media queries não leem variáveis):
     celular < 768 | tablet 768–1023 | notebook 1024–1199 | desktop ≥ 1200 | largo ≥ 1440 */
  --bp-tablet: 768px;
  --bp-notebook: 1024px;
  --bp-desktop: 1200px;
  --bp-largo: 1440px;

  /* ===================== MOVIMENTO ===================== */
  --dur-rapida: 120ms;   /* hover, cor */
  --dur-media: 180ms;    /* abrir menu, toast */
  --dur-lenta: 240ms;    /* gaveta, folha inferior (opacidade + posição de entrada) */
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);

  /* ===================== CAMADAS ===================== */
  --z-barra: 10;
  --z-nav-inferior: 20;
  --z-menu: 30;
  --z-gaveta: 40;
  --z-modal: 50;
  --z-lightbox: 55;
  --z-aviso: 60;        /* toast */
}

/* Tema escuro: "Modo noturno" do menu do usuário (todo o sistema, localStorage checklist-esen:modo-noturno) e o botão de
   tema da execução em campo (localStorage checklist-esen:tema-escuro). A classe .tema-escuro fica no <html>. */
.tema-escuro {
  color-scheme: dark;

  /* ===================== COR: base carvão ===================== */
  /* Hierarquia por tom: fundo < superfície 1 < superfície 2 < superfície 3. Nunca por sombra. */
  --cor-fundo: #0E1013;
  --cor-superficie-1: #15181C;          /* barra lateral, barras, painéis, cabeçalhos */
  --cor-superficie-2: #1C2025;          /* campos, botão secundário, hover de linha */
  --cor-superficie-3: #242A30;
  --cor-campo: #1C2025;
  --cor-borda-botao: #7A8591;
  --cor-destaque-texto: #F6C445;
  --anel-foco: 0 0 0 3px rgba(246, 196, 69, 0.35);
  --cor-atencao-texto: #F5B66B;
  --cor-atencao-fundo: #33240F;
  --cor-atencao-borda: #8A5A1F;          /* item ativo, menus, trilho de progresso, avatar */
  --cor-borda-sutil: #2B3138;           /* divisórias entre linhas (decorativa) */
  --cor-borda: #3A424B;                 /* contorno de painel, cabeçalho de tabela (decorativa) */
  --cor-borda-controle: #7A8591;        /* contorno de TODO controle interativo (≥ 3:1) */
  --cor-borda-controle-hover: #9AA3AD;
  --cor-texto: #F4F6F8;
  --cor-texto-2: #BEC5CD;
  --cor-texto-3: #9AA3AD;
  --cor-texto-desabilitado: #6B747E;    /* somente controles desabilitados */
  --cor-sobreposicao: rgba(6, 7, 9, 0.72);

  /* ===================== COR: destaque único (Amarelo sinal) ===================== */
  --cor-destaque: #F6C445;
  --cor-destaque-hover: #FFD567;
  --cor-destaque-pressionado: #E2AE24;
  --cor-sobre-destaque: #111315;
  --cor-destaque-fundo: #2A2617;        /* fundo de chip/filtro/opção selecionados */
  --cor-foco: #F6C445;

  /* ===================== STATUS: sucesso ===================== */
  --cor-sucesso: #3CCB7F;               /* sólido: só a resposta "Conforme" marcada */
  --cor-sucesso-contorno: #3CCB7F;
  --cor-sucesso-texto: #72DFA5;
  --cor-sucesso-fundo: #122A1E;
  --cor-sucesso-borda: #2F7A52;
  --cor-sobre-sucesso: #08130D;

  /* ===================== STATUS: perigo ===================== */
  --cor-perigo: #C93238;                /* sólido: "Não conforme" e confirmação destrutiva final */
  --cor-perigo-hover: #B32B31;
  --cor-perigo-contorno: #C93238;
  --cor-perigo-texto: #FF8F89;
  --cor-perigo-fundo: #3A1517;
  --cor-perigo-borda: #A3363B;
  --cor-sobre-perigo: #FFFFFF;

  /* ===================== STATUS: processo (azul-céu) ===================== */
  --cor-processo: #5AB4F5;              /* barras de envio de foto */
  --cor-processo-texto: #8FCCFA;
  --cor-processo-fundo: #10263A;
  --cor-processo-borda: #2E6690;

  /* ===================== STATUS: neutro ===================== */
  --cor-neutro-texto: #BEC5CD;
  --cor-neutro-fundo: #232930;
  --cor-neutro-borda: #66707C;
  --cor-neutro-selecionado: #F4F6F8;    /* N/A, Sim, Não marcados */
  --cor-sobre-neutro-selecionado: #0E1013;

  background: var(--cor-fundo);
  color: var(--cor-texto);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-media: 0ms; --dur-lenta: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   2. BASE OBRIGATÓRIA (design-system.md, seção 4)
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte-texto); font-size: var(--fs-corpo); line-height: var(--lh-corpo);
  font-weight: var(--peso-normal); font-variant-numeric: tabular-nums;
}
@media (max-width: 1023px) { body { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); } }
:focus-visible { outline: var(--borda-foco) solid var(--cor-foco); outline-offset: var(--foco-afastamento); }
::selection { background: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.mono { font-family: var(--fonte-mono); font-variant-numeric: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================================
   3. RESET MODERNO
   ========================================================================= */
html { min-height: 100%; scroll-padding-top: calc(var(--altura-barra-superior) + var(--esp-4)); }
body { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
html.sem-rolagem, html.sem-rolagem body { overflow: hidden; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], ul.lista-limpa, ol.lista-limpa { list-style: none; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
table { border-collapse: collapse; border-spacing: 0; }
th { text-align: left; font-weight: var(--peso-forte); }
hr { border: 0; border-top: var(--borda-largura) solid var(--cor-borda-sutil); margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
:focus:not(:focus-visible) { outline: none; }
textarea { resize: vertical; }
code, kbd, samp, pre { font-family: var(--fonte-mono); font-variant-numeric: normal; }
p, li, dd, dt, h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--cor-borda) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: var(--raio-4); border: 2px solid var(--cor-fundo); }
::-webkit-scrollbar-thumb:hover { background: var(--cor-borda-controle); }

/* =========================================================================
   4. TIPOGRAFIA
   Desktop (≥ 1024): 24/17/15/14/13/12 · indicador 32. Toque (< 1024): 22/18/17/17/15/14 · indicador 28.
   ========================================================================= */
.titulo-pagina {
  font-family: var(--fonte-titulo); font-size: var(--fs-pagina); line-height: var(--lh-pagina);
  font-weight: var(--peso-forte); letter-spacing: -0.01em; color: var(--cor-texto);
}
.titulo-secao { font-size: var(--fs-secao); line-height: var(--lh-secao); font-weight: var(--peso-forte); }
.titulo-painel { font-size: var(--fs-painel); line-height: var(--lh-painel); font-weight: var(--peso-forte); }
.texto-corpo { font-size: var(--fs-corpo); line-height: var(--lh-corpo); }
.rotulo { font-size: var(--fs-rotulo); line-height: var(--lh-rotulo); font-weight: var(--peso-forte); }
.legenda { font-size: var(--fs-legenda); line-height: var(--lh-legenda); }
.texto-2 { color: var(--cor-texto-2); }
.texto-3 { color: var(--cor-texto-3); }
.texto-sucesso { color: var(--cor-sucesso-texto); }
.texto-perigo { color: var(--cor-perigo-texto); }
.texto-processo { color: var(--cor-processo-texto); }
.peso-medio { font-weight: var(--peso-medio); }
.peso-forte { font-weight: var(--peso-forte); }
.codigo { font-family: var(--fonte-mono); font-variant-numeric: normal; font-size: var(--fs-codigo); line-height: var(--lh-codigo); font-weight: var(--peso-medio); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.leitura { max-width: var(--largura-leitura); }

@media (max-width: 1023px) {
  .titulo-pagina { font-size: var(--fs-pagina-toque); line-height: var(--lh-pagina-toque); }
  .titulo-secao { font-size: var(--fs-secao-toque); line-height: var(--lh-secao-toque); }
  .titulo-painel { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .texto-corpo { font-size: var(--fs-corpo-toque); line-height: var(--lh-corpo-toque); }
  .rotulo { font-size: var(--fs-rotulo-toque); line-height: var(--lh-rotulo-toque); }
  .legenda { font-size: var(--fs-legenda-toque); line-height: var(--lh-legenda-toque); }
  .codigo { font-size: var(--fs-codigo-toque); line-height: var(--lh-codigo-toque); }
}

/* =========================================================================
   5. UTILITÁRIOS MÍNIMOS
   ========================================================================= */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Truncamento: sempre acompanhe de title="texto completo" */
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.truncar-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pilha (vertical) */
.pilha { display: flex; flex-direction: column; gap: var(--esp-4); min-width: 0; }
.pilha--1 { gap: var(--esp-1); }
.pilha--2 { gap: var(--esp-2); }
.pilha--3 { gap: var(--esp-3); }
.pilha--5 { gap: var(--esp-5); }
.pilha--6 { gap: var(--esp-6); }
.pilha--8 { gap: var(--esp-8); }

/* Agrupamento (horizontal, com quebra) */
.agrupar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); min-width: 0; }
.agrupar--1 { gap: var(--esp-1); }
.agrupar--3 { gap: var(--esp-3); }
.agrupar--4 { gap: var(--esp-4); }
.agrupar--entre { justify-content: space-between; }
.agrupar--fim { justify-content: flex-end; }
.agrupar--topo { align-items: flex-start; }
.agrupar--sem-quebra { flex-wrap: nowrap; }
.crescer { flex: 1 1 auto; min-width: 0; }

/* Grades responsivas (1 coluna no celular) */
.grade { display: grid; gap: var(--esp-5); grid-template-columns: minmax(0, 1fr); }
.grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--3, .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grade--estreita { gap: var(--esp-3); }
.ocupar-tudo { grid-column: 1 / -1; }

/* Visibilidade por faixa de tela */
@media (max-width: 767px) { .ocultar-celular { display: none !important; } }
@media (min-width: 768px) { .so-celular { display: none !important; } }
@media (max-width: 1023px) { .ocultar-toque { display: none !important; } }
@media (min-width: 1024px) { .so-toque { display: none !important; } }

/* Ícones (sempre via CE.icone) */
.icone { display: inline-block; vertical-align: middle; stroke-width: var(--traco-icone); }
@media (max-width: 1023px) { .icone { stroke-width: var(--traco-icone-toque); } }

/* Teclas de atalho */
kbd, .kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--esp-1);
  font-family: var(--fonte-mono); font-size: 11px; line-height: 16px; color: var(--cor-texto-2);
  border: var(--borda-largura) solid var(--cor-borda); border-radius: var(--raio-1); background: transparent;
}

/* Indicador de "ocupado" (rotação permitida: único movimento não-cor) */
@keyframes ce-girar { to { transform: rotate(360deg); } }
.giro { animation: ce-girar 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .giro { animation: none; } }

/* Pular para o conteúdo (acessibilidade) */
.pular-conteudo {
  position: absolute; left: var(--esp-2); top: -100px; z-index: var(--z-aviso);
  background: var(--cor-destaque); color: var(--cor-sobre-destaque); padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-2); font-weight: var(--peso-forte); text-decoration: none;
}
.pular-conteudo:focus { top: var(--esp-2); }