/* ═══════════════════════════════════════════════════════════════
   FLY INDENIZA · sistema de marca
   Carregado depois do <style> de cada pagina, entao vence por ordem
   sem precisar de !important.

   Assinatura: o Archivo e variavel no eixo de largura (100% a 125%).
   Rotulo de secao usa a largura maxima, que e a letra alargada do
   painel de embarque. Nenhum concorrente reproduz sem a mesma fonte.
   01/set/2026
   ═══════════════════════════════════════════════════════════════ */

/* ── fontes da casa, servidas pelo proprio dominio ── */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:400 800;
  font-stretch:100% 125%;font-display:swap;
  src:url('/blog/fontes/archivo.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/blog/fontes/karla.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/blog/fontes/dmmono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}
@font-face{
  font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/blog/fontes/dmmono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

:root{
  --m-display:'Archivo',system-ui,-apple-system,"Segoe UI",sans-serif;
  --m-texto:'Karla',system-ui,-apple-system,"Segoe UI",sans-serif;
  --m-dado:'DM Mono',ui-monospace,Consolas,monospace;

  /* escala tipografica: razao 1.22, ancorada em 17px */
  --t-xs:12.5px; --t-s:14.5px; --t-b:17px; --t-m:19.5px;
  --t-g:clamp(21px,2.6vw,25px);
  --t-gg:clamp(25px,3.6vw,33px);
  --t-h:clamp(30px,5.4vw,46px);

  /* ritmo vertical em multiplos de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:88px;
}

/* ── corpo ─────────────────────────────────────────────────── */
body{
  font-family:var(--m-texto);
  font-size:var(--t-b);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ── titulos: Archivo apertado, do jeito que titulo pede ───── */
h1,h2,h3,h4{
  font-family:var(--m-display);
  font-stretch:100%;
  line-height:1.12;
  text-wrap:balance;
}
h1{font-size:var(--t-h);font-weight:800;letter-spacing:-.03em}
h2{font-size:var(--t-gg);font-weight:700;letter-spacing:-.022em}
h3{font-size:var(--t-g);font-weight:700;letter-spacing:-.015em}
h4{font-size:var(--t-m);font-weight:600;letter-spacing:-.01em}

p{max-width:68ch}
strong,b{font-weight:600}

/* ── A ASSINATURA ──────────────────────────────────────────────
   Rotulo de secao no eixo largo do Archivo. E a unica coisa na
   pagina que usa 125% de largura, entao ela carrega a memoria.   */
.olho,.eyebrow,.rotulo,.kicker{
  font-family:var(--m-display);
  font-stretch:125%;
  font-weight:600;
  font-size:var(--t-xs);
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.5;
}

/* ── contraste do rotulo: AA em fundo claro e em fundo escuro ──
   O ambar da marca (#CB932E) sobre papel da 2,49:1 e reprova em WCAG AA.
   Mesmo matiz e saturacao, so a luminosidade cai de 49% para 34%: 4,76:1.
   O ambar vivo volta onde o fundo e escuro, que e onde ele ja passava. */
.olho,.eyebrow,.rotulo,.kicker{ color:#8D6620 }
.hero .olho, .hero .eyebrow, .hero .rotulo,
.fecho .olho, .fecho .eyebrow, .fecho .rotulo,
.painel .olho, .topo .olho, footer .olho{ color:#CB932E }

/* ── dados, numeros e etiquetas tecnicas ───────────────────── */
.mono,.dado,.selo,.tag,.badge,code,kbd,time{
  font-family:var(--m-dado);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
table{font-variant-numeric:tabular-nums}
th{font-family:var(--m-dado);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-xs)}

/* ── botoes e chamadas: alvo grande no dedo ────────────────── */
.btn,.cta,button,input[type=submit],a.botao{
  font-family:var(--m-display);
  font-stretch:100%;
  font-weight:700;
  letter-spacing:-.005em;
}
.btn,.cta,a.botao{min-height:52px;display:inline-flex;align-items:center;justify-content:center}

/* ── pular para o conteudo: invisivel ate receber foco ─────────
   Sem isto, quem navega por teclado tabula o menu inteiro em
   toda pagina antes de chegar no texto. */
.pular{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:#011132; color:#F7F5F1;
  font-family:var(--m-dado); font-size:14px;
  padding:14px 20px; border:2px solid #CB932E; border-radius:0 0 8px 0;
  text-decoration:none;
}
.pular:focus{ left:0 }
@media print{ .pular{display:none} }

/* ── acessibilidade e conforto ─────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--ambar,#CB932E);
  outline-offset:3px;
  border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
::selection{background:rgba(203,147,46,.3)}
img{max-width:100%;height:auto}

/* ── celular: o texto cresce, nao encolhe ──────────────────── */
@media (max-width:520px){
  body{font-size:17px;line-height:1.66}
  h1{letter-spacing:-.035em}
  .olho,.eyebrow,.rotulo,.kicker{letter-spacing:.18em;font-size:11.5px}
  p{max-width:none}
}

/* ── telas largas: a linha de leitura nao estica ───────────── */
@media (min-width:1100px){
  body{font-size:18px}
}

/* ── impressao: o site vira documento ──────────────────────── */
@media print{
  body{background:#fff;color:#111;font-size:11pt}
  .btn,.cta,nav,.topo,header nav{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  h1,h2,h3{break-after:avoid}
  table,figure,blockquote{break-inside:avoid}
}