/* CÓPIA GERADA — NÃO EDITE ESTE ARQUIVO.
   Mestre: ../sistema-design/ser.css
   Regenerar: python sistema-design/sincronizar-site.py
   Existe porque a hospedagem do site não alcança a pasta do sistema. */
/* ==========================================================================
   SER — Pessoas & Estratégias · Sistema de Design
   Base única para site, e-book, propostas, one-pagers e deck.
   Uso: <link rel="stylesheet" href="../sistema-design/ser.css">

   Alinhado ao design system publicado no Claude Design em 09/09/2026:
   mesmos valores de cor, tipografia, proporção, filete, movimento e foco.
   Este arquivo é a implementação em CSS puro, consumida pelas peças HTML.
   Divergir dele do sistema publicado é defeito, não escolha local.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Cor — a marca SER vive em navy profundo (estrutura) + bronze (pessoas).
     O navy é tinta profunda, não azul de tecnologia: o que o afasta do azul
     corporativo saturado do setor é o par com bronze e creme, e a ausência
     total de saturação fria. Bronze é herança de peça impressa — em papel ele
     é hot stamping; em tela, cor chapada, nunca gradiente metálico. */
  --ra-navy-900: #0C1826;
  --ra-navy-800: #101F31;
  --ra-navy-700: #16283F;
  --ra-navy-600: #1E3550;
  --ra-navy-500: #2A4664;
  --ra-navy-300: #7C8DA1;
  --ra-navy-100: #C3D0DD;
  --ra-navy-50:  #E7ECF2;

  /* Três valores de bronze, e a escolha entre eles não é estética: o bronze
     cheio dá 3,2:1 sobre creme e 3,9:1 sobre navy — reprova em AA para texto
     pequeno nos DOIS fundos. Por isso as variantes tinta e clara existem. */
  --ra-bronze-700: #7E5530;   /* texto < 18px sobre creme — 5,4:1 */
  --ra-bronze-600: #966C44;
  --ra-bronze-500: #B0855F;   /* marca, filetes, área — nunca texto pequeno */
  --ra-bronze-300: #C89A72;   /* texto < 18px sobre navy — 5,9:1 */
  --ra-bronze-100: #E8DCCB;

  --ra-papel:     #F2EAE1;
  --ra-papel-2:   #E8DFD4;
  --ra-areia:     #D9C9B6;
  --ra-tinta:     #1B2430;
  --ra-tinta-70:  #3B4451;
  --ra-tinta-45:  #6B7787;
  --ra-linha:     #D9CBB8;

  /* Mesmo problema do bronze: o alerta cheio dá 2,04:1 sobre navy — reprova.
     A variante clara existia solta em 6 peças do kit-seminário antes de virar
     token (medido em 10/09/2026: 6,19:1 sobre navy, 2,02:1 sobre creme —
     por isso ela é exclusiva de fundo escuro, nunca claro). */
  --ra-alerta:       #9B3225;
  --ra-alerta-claro: #E8907F;   /* texto de alerta sobre navy — nunca sobre creme */
  --ra-ok:        #16283F;

  /* Papéis semânticos — use SEMPRE estes, nunca a escala crua */
  --bg:            var(--ra-papel);
  --bg-alt:        var(--ra-papel-2);
  --bg-inverso:    var(--ra-navy-700);
  --texto:         var(--ra-tinta);
  --texto-suave:   var(--ra-tinta-70);
  --texto-fraco:   var(--ra-tinta-45);
  --texto-inverso: #F2EAE1;
  --marca:         var(--ra-navy-700);
  --marca-forte:   var(--ra-navy-900);
  --destaque:      var(--ra-bronze-500);
  --destaque-forte:var(--ra-bronze-700);
  --destaque-claro:var(--ra-bronze-300);  /* destaque legível sobre navy */
  --alerta:        var(--ra-alerta);
  --alerta-claro:  var(--ra-alerta-claro); /* alerta legível sobre navy — nunca sobre creme */
  --borda:         var(--ra-linha);
  --borda-forte:   var(--ra-areia);

  /* Tipografia — serifada de leitura nos títulos, sans neutra no texto. É o
     idioma do banco privado: peso leve na marca, neutralidade no corpo.
     A Newsreader é serifada de TEXTO, não didone: ela aguenta corpo pequeno,
     o que amplia bastante onde a serifada pode aparecer.
     As reservas foram escolhidas por métrica próxima, porque a exportação em
     PDF do canvas não embute webfont e cai na primeira disponível. */
  --fonte-titulo: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fonte-texto:  "Outfit", "Avenir Next", -apple-system, "Segoe UI", sans-serif;
  --fonte-mono:   "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --t-titulo-min: 1.125rem;  /* 18px — piso da serifada; era 20px com a didone */
  --peso-display: 300;       /* títulos grandes: leve, como na marca */

  --t-xs: 0.78rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem;
  --t-lg: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem; --t-3xl: 3rem; --t-4xl: 4rem;

  /* Espaço — escala de 4px */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem;
  --e-11: 11rem;   /* 176px — o respiro de capa, onde o vazio é o material */

  /* Raio ZERO e sombra NENHUMA, em absolutamente tudo. A profundidade vem da
     cor e do vazio. Os tokens continuam existindo para que nenhuma peça quebre
     ao referenciá-los — mas os dois valem 0 e é assim que devem ficar. */
  --raio: 0;
  --raio-g: 0;
  --sombra: none;

  /* Filete com alpha, para que a mesma regra funcione sobre creme e sobre
     navy sem precisar de duas cores chapadas. */
  --filete-sobre-papel: rgba(27,36,48,.28);
  --filete-sobre-navy:  rgba(217,201,182,.32);
  --filete-espessura: 1px;
  --filete-forte: 1.4px;
  --arco-traco: 1px;
  --arco-traco-forte: 1.4px;

  /* Movimento: discreto e curto. Fade e troca de cor apenas — nunca bounce,
     parallax ou contador animado. */
  --movimento-rapido: 160ms;   /* filete, botão, link */
  --movimento-lento: 420ms;    /* transição do header */
  --movimento-curva: cubic-bezier(.22,.61,.36,1);

  --foco: var(--ra-bronze-700);

  --largura-texto: 68ch;        /* documento denso: manual, e-book */
  --largura-texto-editorial: 46ch;
  --largura-texto-estreita: 34ch;  /* coluna de página impressa */
  --largura-pagina: 1120px;
}

/* No tema escuro os papéis se invertem: o destaque passa a ser o bronze claro,
   porque o bronze cheio não tem contraste suficiente sobre fundo navy. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --bg: #0C1826; --bg-alt: #101F31; --bg-inverso: #060F19;
    --texto: #EDE7DF; --texto-suave: #C3D0DD; --texto-fraco: #8FA0B4;
    --texto-inverso: #EDE7DF;
    --marca: var(--ra-navy-100); --marca-forte: #F2EAE1;
    --destaque: var(--ra-bronze-300); --destaque-forte: var(--ra-bronze-100);
    --destaque-claro: var(--ra-bronze-300);
    --alerta: var(--ra-alerta-claro);
    --borda: #22344A; --borda-forte: #3A4E68;
  }
}
:root[data-tema="escuro"] {
  --bg: #0C1826; --bg-alt: #101F31; --bg-inverso: #060F19;
  --texto: #EDE7DF; --texto-suave: #C3D0DD; --texto-fraco: #8FA0B4;
  --texto-inverso: #EDE7DF;
  --marca: var(--ra-navy-100); --marca-forte: #F2EAE1;
  --destaque: var(--ra-bronze-300); --destaque-forte: var(--ra-bronze-100);
  --destaque-claro: var(--ra-bronze-300);
  --alerta: var(--ra-alerta-claro);
  --borda: #22344A; --borda-forte: #3A4E68;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font-family: var(--fonte-texto); font-size: var(--t-base); line-height: 1.65;
  font-feature-settings: "kern","liga","calt"; text-rendering: optimizeLegibility;
}
/* Peso 400 nos títulos de trabalho e 300 no display: a Newsreader fica elegante
   e institucional em peso leve na escala grande, mas em h3 o 300 já enfraquece
   demais sobre creme. Entreletra neutra em toda a família. */
h1,h2,h3,h4 { font-family: var(--fonte-titulo); font-weight: 400; line-height: 1.15;
  letter-spacing: 0; color: var(--marca-forte); margin: 0 0 var(--e-4); }
h1 { font-size: clamp(2.25rem, 5vw, var(--t-4xl)); font-weight: var(--peso-display); }
h2 { font-size: clamp(1.6rem, 3.2vw, var(--t-2xl)); margin-top: var(--e-8); }
h3 { font-size: var(--t-lg); margin-top: var(--e-6); }
/* h4 fica em 18px, no piso da serifada. A sans assume por hierarquia — o degrau
   entre título e rótulo — e não mais por limitação técnica da fonte. */
h4 { font-size: var(--t-md); font-family: var(--fonte-texto); font-weight: 500;
  letter-spacing: .01em; margin-top: var(--e-5); }
p { margin: 0 0 var(--e-4); max-width: var(--largura-texto); }
a { color: var(--marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--destaque-forte); }
/* A Outfit vai até 900, mas o sistema só carrega até 600: acima disso o peso
   briga com a leveza da serifada. Nunca peça um peso que o <link> não trouxe —
   o navegador sintetiza um falso negrito de haste irregular. */
strong { font-weight: 600; color: var(--marca-forte); }
small { font-size: var(--t-sm); color: var(--texto-suave); }
hr { border: 0; border-top: 1px solid var(--borda); margin: var(--e-7) 0; }
img { max-width: 100%; height: auto; }
::selection { background: var(--ra-bronze-100); color: var(--ra-tinta); }

/* Foco visível. O sistema não tinha nenhum: quem navega por teclado ficava
   sem saber onde estava. */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- 3. Layout ---------------------------------------------------- */
.ra-pagina { max-width: var(--largura-pagina); margin-inline: auto; padding: 0 var(--e-5); }
.ra-estreito { max-width: 760px; margin-inline: auto; padding: 0 var(--e-5); }
.ra-secao { padding-block: var(--e-9); }
.ra-secao--alt { background: var(--bg-alt); }
.ra-secao--inversa { background: var(--bg-inverso); color: var(--texto-inverso); }
.ra-secao--inversa h1, .ra-secao--inversa h2, .ra-secao--inversa h3 { color: #FFF; }
.ra-secao--inversa p { color: rgba(255,255,255,.82); }
.ra-grade { display: grid; gap: var(--e-5); }
@media (min-width: 700px)  { .ra-grade--2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px)  { .ra-grade--3 { grid-template-columns: repeat(3,1fr); }
                             .ra-grade--4 { grid-template-columns: repeat(4,1fr); } }

/* ---------- 4. Componentes ---------------------------------------------- */
.ra-etiqueta {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--destaque-forte);
  margin-bottom: var(--e-3);
}
/* Sobre navy o rótulo usa o bronze claro: o bronze cheio dá 3,9:1 e reprova. */
.ra-secao--inversa .ra-etiqueta { color: var(--ra-bronze-300); }

.ra-chamada { /* frase-manifesto */
  font-family: var(--fonte-titulo); font-size: clamp(1.35rem,2.6vw,var(--t-xl));
  line-height: 1.3; color: var(--marca-forte); max-width: 24ch;
}

.ra-cartao {
  background: var(--bg); border: 1px solid var(--borda);
  padding: var(--e-5);
}
.ra-cartao--destaque { border-color: var(--destaque); border-top-width: 3px; }
.ra-cartao h3 { margin-top: 0; }

.ra-passo { /* etapas da metodologia SER */
  border-left: 2px solid var(--borda-forte); padding-left: var(--e-5);
  position: relative;
}
.ra-passo__letra {
  font-family: var(--fonte-titulo); font-size: var(--t-3xl); line-height: 1;
  color: var(--destaque); display: block; margin-bottom: var(--e-2);
}

.ra-numero { /* indicador / KPI */
  font-family: var(--fonte-titulo); font-size: var(--t-2xl); line-height: 1;
  color: var(--marca-forte); display: block;
}
.ra-numero + small { display: block; margin-top: var(--e-2); }

/* Filete de 1px, não barra de 3px: a marca conversa por linha fina. O itálico
   da Newsreader é desenhado, não inclinado por software. */
.ra-citacao {
  border-left: 1px solid var(--destaque); padding: var(--e-2) 0 var(--e-2) var(--e-5);
  font-family: var(--fonte-titulo); font-size: var(--t-lg); font-style: italic;
  line-height: 1.45; color: var(--texto); margin: var(--e-6) 0;
}

.ra-botao {
  display: inline-block; padding: .7rem 1.5rem; border-radius: var(--raio);
  background: var(--marca); color: #fff; font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; border: 1px solid var(--marca); cursor: pointer;
  transition: background var(--movimento-rapido) var(--movimento-curva),
              border-color var(--movimento-rapido) var(--movimento-curva);
}
.ra-botao:hover { background: var(--marca-forte); border-color: var(--marca-forte); color:#fff; }
.ra-botao--secundario { background: transparent; color: var(--marca); }
.ra-botao--secundario:hover { background: var(--ra-navy-50); color: var(--marca-forte); }
.ra-botao--destaque { background: var(--destaque); border-color: var(--destaque); }
.ra-botao--destaque:hover { background: var(--destaque-forte); border-color: var(--destaque-forte); }

.ra-selo { /* badge de status */
  display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: .15rem .55rem;
  background: var(--ra-navy-50); color: var(--ra-navy-700);
}
.ra-selo--atencao { background: var(--ra-bronze-100); color: var(--ra-bronze-700); }
.ra-selo--verificar { background: #F3DCD7; color: var(--ra-alerta); }

/* Controle de tema — claro / sistema / escuro. Toda peça carrega este
   controle (ver PADRAO-DESIGN.md §3f). O padrão é sempre "sistema": a peça
   não decide o tema por conta própria, só o navegador de quem abre. O
   marcador de escolha ativa fica no filete de baixo, não em preenchimento —
   raio 0, sem sombra, igual ao resto do sistema. Markup e script em
   PADRAO-DESIGN.md §3f; não reescrever a lógica peça a peça. */
.ra-tema { display: inline-flex; gap: var(--e-4); font-size: var(--t-xs);
  letter-spacing: .06em; }
.ra-tema button { all: unset; cursor: pointer; padding-bottom: .2rem;
  color: var(--texto-fraco); border-bottom: 1px solid transparent; }
.ra-tema button:hover { color: var(--texto); }
.ra-tema button[aria-pressed="true"] { color: var(--marca-forte);
  border-bottom-color: var(--destaque); font-weight: 600; }
.ra-secao--inversa .ra-tema button { color: rgba(255,255,255,.55); }
.ra-secao--inversa .ra-tema button:hover { color: #fff; }
.ra-secao--inversa .ra-tema button[aria-pressed="true"] { color: #fff;
  border-bottom-color: var(--ra-bronze-300); }

table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); margin: var(--e-5) 0; }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { font-weight: 600; color: var(--marca-forte); background: var(--bg-alt);
     font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; }
.ra-tabela-rolavel { overflow-x: auto; }

.ra-rodape { border-top: 1px solid var(--borda); padding-block: var(--e-6);
  font-size: var(--t-sm); color: var(--texto-fraco); }

/* Marcador de dado não confirmado — herda a disciplina do projeto */
.ra-conferir { background: #F3DCD7; color: var(--ra-alerta); padding: 0 .25em;
  font-weight: 600; }

/* ---------- 5. Impressão (propostas, one-pager, e-book) ------------------ */
@page { size: A4; margin: 1.8cm; }
@media print {
  /* Sem isto, a maioria dos navegadores descarta fundos coloridos ao
     imprimir/exportar PDF — o herói escuro e os selos ficariam invisíveis. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  :root { --bg:#fff; --bg-alt:#fff; --texto:#000; --texto-suave:#333; }
  body { font-size: 10.5pt; }
  .ra-secao { padding-block: var(--e-5); }
  .ra-nao-imprimir, .ra-tema { display: none !important; }
  .ra-quebra { break-before: page; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color:#555; }
  .ra-cartao { box-shadow: none; }

  /* Não quebrar componentes no meio entre páginas */
  .ra-cartao, .ra-passo, .ra-citacao, tr, .ra-numero { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}