/* ============================================================================
   ARCOS — Design system do Diagnóstico ISCA (público)
   Tokens em docs/marketing/01-brand/visual-system.md (repo arcos).
   Carrega DEPOIS do bootstrap.min.css (override de marca). Sem CDN externo.
   ========================================================================== */

:root {
  /* marca */
  --arcos-primary: #0A3D6E;
  --arcos-primary-600: #0E4C86;
  --arcos-primary-800: #08305A;
  --arcos-primary-900: #05213E;
  --arcos-accent: #D89018;
  --arcos-accent-600: #B5780A;
  --arcos-ink: #15212B;
  /* pilares (color-coding sequencial dos 5 blocos/dimensões) */
  --arcos-a: #1A6BB0; --arcos-a-text: #155B96; --arcos-a-tint: #EAF1F8;
  --arcos-r: #E07000; --arcos-r-text: #B4530A; --arcos-r-tint: #FCEFE2;
  --arcos-c: #00838F; --arcos-c-text: #0A6E78; --arcos-c-tint: #E3F2F3;
  --arcos-o: #4E8C2E; --arcos-o-text: #3C7A22; --arcos-o-tint: #EDF4E7;
  --arcos-s: #E59400; --arcos-s-text: #9A6608; --arcos-s-tint: #FCF2DF;
  /* semânticas */
  --arcos-success: #15803D; --arcos-success-tint: #E7F4EC;
  --arcos-warning: #B45309; --arcos-warning-tint: #FBEEE0;
  --arcos-danger: #C0341D; --arcos-danger-tint: #FBEAE6;
  --arcos-info: #0E4C86;
  /* neutros */
  --arcos-bg: #F7F9FC; --arcos-surface: #FFFFFF;
  --arcos-border: #E2E8F0; --arcos-border-strong: #CBD5E1;
  --arcos-text-2: #51616E;
  /* tipografia */
  --arcos-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --arcos-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* raios/sombra */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(10,61,110,.06);
  --sh-md: 0 4px 16px rgba(10,61,110,.10);

  /* Bootstrap overrides → componentes herdam a marca */
  --bs-primary: #0A3D6E;
  --bs-primary-rgb: 10,61,110;
  --bs-link-color: #0E4C86;
  --bs-link-color-rgb: 14,76,134;
  --bs-link-hover-color: #08305A;
  --bs-body-bg: #F7F9FC;
  --bs-body-color: #15212B;
  --bs-border-color: #E2E8F0;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-border-radius: 10px;
}

body {
  font-family: var(--arcos-font-sans);
  background: var(--arcos-bg);
  color: var(--arcos-ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

h1,h2,h3,.arcos-display { font-family: var(--arcos-font-display); letter-spacing: -.01em; }
.arcos-sans { font-family: var(--arcos-font-sans); }

/* honeypot anti-bot — fora da tela p/ humano, presente no DOM p/ bot */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- skip link ---- */
.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-130%);
  top: 0; z-index: 1100; background: var(--arcos-primary); color: #fff;
  padding: .6rem 1.1rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600; text-decoration: none; transition: transform .15s ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); color:#fff; outline: 3px solid var(--arcos-accent); }

/* ---- header ---- */
.arcos-header {
  background: var(--arcos-primary);
  background: linear-gradient(180deg, #0A3D6E 0%, #08305A 100%);
  color: #fff; border-bottom: 3px solid var(--arcos-accent);
}
.arcos-header .arcos-wrap { padding-top: .85rem; padding-bottom: .85rem; }
.arcos-headbar { display:flex; align-items:center; justify-content:space-between; gap: .6rem 1.5rem; flex-wrap:wrap; }

/* ---- barra de atalhos do header (só na landing — ver `body:has(.lp)` abaixo) ---- */
/* min-width:0 — higiene de item flex: sem isso a nav não pode encolher abaixo da
   largura dos links (nowrap). Hoje `overflow-x:auto` já contém, mas a propriedade
   protege o dia em que alguém tirar o scroll container. */
.arcos-navbar { min-width: 0; }
.arcos-navbar ul { display:flex; align-items:center; gap:.15rem; list-style:none; margin:0; padding:0; }
.arcos-navbar a {
  display:block; padding:.45rem .7rem; border-radius:6px; text-decoration:none;
  color:#DCE8F4; font-size:.9rem; font-weight:600; line-height:1.2; white-space:nowrap;
  border-bottom: 2px solid transparent;
}
.arcos-navbar a:hover { color:#fff; background: rgba(255,255,255,.10); }
.arcos-navbar a:focus-visible { outline: 3px solid var(--arcos-accent); outline-offset: 2px; color:#fff; }
/* alvo do link ativo: o :target recebe o realce enquanto o leitor está na seção */
.arcos-navbar a:active { border-bottom-color: var(--arcos-accent); }
@media (max-width: 820px) {
  /* rola na horizontal em vez de empilhar — mantém o header baixo em mobile */
  .arcos-navbar { flex: 1 1 100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .arcos-navbar::-webkit-scrollbar { display:none; }
  .arcos-navbar ul { padding-bottom:.1rem; }
  /* 44px de altura no toque: WCAG 2.5.8 (AA) pede 24×24, mas num scroller
     horizontal o polegar erra fácil — o alvo confortável custa ~10px de header. */
  .arcos-navbar a { font-size:.84rem; padding:.55rem; min-height:44px; display:flex; align-items:center; }
}

/* ---- CTA persistente no header (landing) ----
   Último item do nav: ordem de foco = ordem visual (WCAG 2.4.3). Em <=820px o nav
   é um scroller horizontal e o CTA fica `sticky` colado à direita — continua visível
   enquanto os atalhos rolam por baixo. Em desktop o sticky é inerte (sem overflow) e
   ele é apenas o último item, alinhado à direita por `margin-left:auto`. */
/* `background` sólido: sem ele os atalhos rolariam visíveis por trás do botão.
   `position:sticky` também estabelece o bloco de contenção do ::before abaixo. */
.arcos-nav-cta {
  /* O padding é o respiro entre o último item e o botão: com `margin-left:auto` num
     header cheio a folga chegava a 2px (medido em 1440px), e o botão colava em
     "Perguntas". O gradiente abaixo mora DENTRO deste padding, não sobre o vizinho. */
  margin-left: auto; padding-left: 1.25rem; position: sticky; right: 0; flex: none; background: #0A3D6E;
}
/* Gradiente à esquerda: evita o corte seco e sinaliza que há conteúdo rolando atrás.
   Existe SÓ no breakpoint com scroller horizontal — em desktop a nav não rola
   (medido: scrollWidth == clientWidth), e ali ele não mascarava corte nenhum:
   apenas esmaecia os 22px finais de "Perguntas", porque `right:100%` o posiciona
   fora do próprio item, por cima do anterior. */
.arcos-nav-cta::before { content: none; }
@media (max-width: 820px) {
  .arcos-nav-cta::before {
    content: ""; position: absolute; left: 0; right: auto; top: 0; bottom: 0; width: 1.25rem;
    background: linear-gradient(90deg, rgba(10,61,110,0), #0A3D6E 92%); pointer-events: none;
  }
}
.arcos-navbar .arcos-nav-cta a {
  background: var(--arcos-accent); color: var(--arcos-ink); font-weight: 700;
  border-radius: 6px; padding: .5rem .85rem; white-space: nowrap; border-bottom: 0;
}
.arcos-navbar .arcos-nav-cta a:hover,
.arcos-navbar .arcos-nav-cta a:focus { background: var(--arcos-accent); color: var(--arcos-ink); filter: brightness(.95); }
.arcos-navbar .arcos-nav-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; color: var(--arcos-ink); }
@media (max-width: 820px) {
  /* 44px de alvo, igual aos demais itens do scroller (WCAG 2.5.8). */
  .arcos-navbar .arcos-nav-cta a { min-height: 44px; display: flex; align-items: center; font-size: .84rem; padding: .55rem .8rem; }
}
.arcos-brand-lock { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; }
.arcos-brand-mark { display: block; height: 40px; width: auto; flex: none; }
.arcos-wordmark { font-family: var(--arcos-font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: .02em; line-height: 1; color:#fff; }
.arcos-tagline { font-size: .72rem; letter-spacing: .04em; color: #BFD2E6; margin-top: 1px; }
.arcos-brand-lock:focus-visible { outline: 3px solid var(--arcos-accent); outline-offset: 3px; border-radius: 6px; }

/* ---- layout ---- */
.arcos-wrap { max-width: 780px; margin: 0 auto; padding: 0 1rem; }
main.arcos-main { padding: 1.75rem 0 4.5rem; }
.arcos-eyebrow {
  font-family: var(--arcos-font-sans); font-weight: 700; font-size: .8rem;
  letter-spacing: .07em; text-transform: uppercase; color: #8A5C07; /* AA em fundo claro (≥4.5:1) */
  display: inline-flex; align-items: center; gap: .45rem;
}
.arcos-eyebrow::before { content:""; width: 22px; height: 2px; background: var(--arcos-accent); display:inline-block; }
.arcos-lead { font-size: 1.06rem; line-height: 1.6; color: var(--arcos-text-2); }
.text-2 { color: var(--arcos-text-2); }
.arcos-h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.15; color: var(--arcos-ink); }
.arcos-h-section { font-size: 1.4rem; color: var(--arcos-primary); }
.arcos-raiox { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.15; color: var(--arcos-ink); }
.flex-none { flex: none; }

.arcos-card {
  background: var(--arcos-surface); border: 1px solid var(--arcos-border);
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}

/* ---- meta chips ---- */
.arcos-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.arcos-chip {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:500;
  color: var(--arcos-primary); background: #fff; border:1px solid var(--arcos-border);
  border-radius: 999px; padding:.35rem .75rem;
}
.arcos-chip svg { width:15px; height:15px; flex:none; color: var(--arcos-accent-600); }

/* ---- ring motif (5 anéis em CSS, decorativo) ---- */
.arcos-rings { display:inline-flex; gap:0; }
.arcos-rings span {
  width:18px; height:26px; border:3px solid; border-radius:9px; margin-left:-7px;
  background: #fff;
}
.arcos-rings span:nth-child(1){ border-color: var(--arcos-a); margin-left:0; }
.arcos-rings span:nth-child(2){ border-color: var(--arcos-r); }
.arcos-rings span:nth-child(3){ border-color: var(--arcos-c); }
.arcos-rings span:nth-child(4){ border-color: var(--arcos-o); }
.arcos-rings span:nth-child(5){ border-color: var(--arcos-s); }

/* ---- progresso (form) ---- */
.arcos-progress {
  position: sticky; top: 0; z-index: 1020; background: rgba(247,249,252,.92);
  backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid var(--arcos-border);
}
.arcos-progress .arcos-wrap { padding-top:.5rem; padding-bottom:.5rem; display:flex; align-items:center; gap:.75rem; }
.arcos-progress-track { flex:1; height:8px; background: var(--arcos-border); border-radius:999px; overflow:hidden; }
.arcos-progress-bar { height:100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--arcos-primary), var(--arcos-accent)); border-radius:999px; transition: width .25s ease; }
.arcos-progress-label { font-size:.8rem; font-weight:600; color: var(--arcos-primary); white-space:nowrap; font-variant-numeric: tabular-nums; }

/* ---- fieldsets / blocos ---- */
.arcos-fieldset { border:0; padding:0; margin:0 0 1.75rem; }
.arcos-fieldset > legend {
  font-family: var(--arcos-font-display); font-weight:600; font-size:1.25rem; float:none;
  width:auto; margin-bottom:.25rem; color: var(--arcos-primary);
}
.arcos-block { border:1px solid var(--arcos-border); border-radius: var(--r-md); background:#fff; box-shadow: var(--sh-sm); overflow:hidden; margin-bottom:1.1rem; }
.arcos-block-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.15rem; border-left: 5px solid var(--blk, var(--arcos-primary)); background: var(--blk-tint, #fff); }
.arcos-block-num {
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; color:#fff; background: var(--blk, var(--arcos-primary)); font-size:.95rem;
}
.arcos-block-title { font-family: var(--arcos-font-display); font-weight:600; font-size:1.12rem; color: var(--arcos-ink); line-height:1.15; }
.arcos-block-sub { font-size:.9rem; color: var(--arcos-text-2); margin:0; }
.arcos-block-body { padding: .35rem 1.15rem 1.15rem; }

/* color-coding sequencial dos 5 blocos (anéis A·R·C·O·S) */
.blk-1 { --blk: var(--arcos-a); --blk-tint: var(--arcos-a-tint); --blk-text: var(--arcos-a-text); }
.blk-2 { --blk: var(--arcos-r); --blk-tint: var(--arcos-r-tint); --blk-text: var(--arcos-r-text); }
.blk-3 { --blk: var(--arcos-c); --blk-tint: var(--arcos-c-tint); --blk-text: var(--arcos-c-text); }
.blk-4 { --blk: var(--arcos-o); --blk-tint: var(--arcos-o-tint); --blk-text: var(--arcos-o-text); }
.blk-5 { --blk: var(--arcos-s); --blk-tint: var(--arcos-s-tint); --blk-text: var(--arcos-s-text); }

/* ---- pergunta Likert ---- */
.lk-q { padding: 1rem 0; border-top: 1px solid var(--arcos-border); }
.lk-q:first-child { border-top: 0; }
.lk-q > legend { font-size: 1rem; font-weight: 500; color: var(--arcos-ink); float:none; width:auto; margin-bottom:.6rem; line-height:1.4; }
.lk-scale { display:grid; grid-template-columns: repeat(5, 1fr); gap:.4rem; }
.lk-opt { position: relative; }
.lk-opt input { position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.lk-opt label {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  min-height:52px; padding:.45rem .25rem; border:1.5px solid var(--arcos-border-strong);
  border-radius: var(--r-sm); background:#fff; cursor:pointer; text-align:center;
  color: var(--arcos-text-2); transition: all .12s ease;
}
.lk-num { font-weight:700; font-size:1.05rem; color: var(--arcos-ink); }
.lk-cap { font-size:.66rem; line-height:1.1; }
.lk-opt input:checked + label {
  border-color: var(--blk, var(--arcos-primary)); background: var(--blk-tint, var(--arcos-a-tint));
  box-shadow: inset 0 0 0 1.5px var(--blk, var(--arcos-primary));
}
.lk-opt input:checked + label .lk-num { color: var(--blk-text, var(--arcos-primary)); }
.lk-opt input:focus-visible + label { outline:3px solid var(--arcos-primary-600); outline-offset:2px; }
.lk-opt label:hover { border-color: var(--blk, var(--arcos-primary)); }
.lk-ends { display:flex; justify-content:space-between; margin-top:.35rem; font-size:.72rem; color: var(--arcos-text-2); }

/* ---- inputs ---- */
.form-label { font-weight:600; font-size:.92rem; color: var(--arcos-ink); margin-bottom:.3rem; }
.form-control, .form-select { border-color: var(--arcos-border-strong); border-radius: var(--r-sm); padding:.6rem .75rem; font-size:1rem; }
.form-control:focus, .form-select:focus { border-color: var(--arcos-primary-600); box-shadow: 0 0 0 .2rem rgba(14,76,134,.18); }
.form-check-input:checked { background-color: var(--arcos-primary); border-color: var(--arcos-primary); }
.form-check-input:focus { border-color: var(--arcos-primary-600); box-shadow: 0 0 0 .2rem rgba(14,76,134,.18); }
.form-check-label { color: var(--arcos-ink); }
/* Alvo de toque >=44px (WCAG 2.5.5 / Apple HIG). O `.form-check` do Bootstrap
   entrega 24px de altura: passa no minimo de 24px do WCAG 2.5.8 AA, mas no
   limite exato — e destoa dos 48px das outras 125 opcoes do formulario. Medido
   em 2026-08-04 no iPhone 393x852. Escopado por `.arcos-tap` de proposito: os
   `.form-check` do bloco de consentimento tem rotulo de 2-3 linhas (48-72px) e
   ja passam; aplicar `align-items:center` neles centralizaria a caixa no meio
   do paragrafo, mudando um layout que esta correto.
   O `min-height` vai no LABEL, nao so no container: e o label que ativa o
   radio, entao inflar o `.form-check` sozinho da 44px de caixa com 24px de area
   clicavel — um fix cosmetico. Medido: container 44 / label 24 = alvo real 24. */
.form-check.arcos-tap { display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check.arcos-tap .form-check-input { float: none; flex: none; margin: 0; }
.form-check.arcos-tap .form-check-label { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
.req { color: var(--arcos-danger); }

/* ---- botões ---- */
.btn-arcos {
  background: var(--arcos-accent); color: var(--arcos-ink); font-weight:700;
  border:0; border-radius: var(--r-sm); padding:.85rem 1.4rem;
  box-shadow: var(--sh-sm); transition: filter .12s ease, transform .12s ease;
}
.btn-arcos:hover, .btn-arcos:focus { background: var(--arcos-accent); color: var(--arcos-ink); filter: brightness(.96); }
.btn-arcos:focus-visible { outline:3px solid var(--arcos-primary-600); outline-offset:2px; }
.btn-arcos:active { transform: translateY(1px); }
.btn-arcos svg { vertical-align:-2px; }
.btn-marinho { background: var(--arcos-primary); color:#fff; font-weight:600; border-radius: var(--r-sm); padding:.8rem 1.3rem; border:0; }
.btn-marinho:hover, .btn-marinho:focus { background: var(--arcos-primary-800); color:#fff; }
.btn-outline-marinho { color: var(--arcos-primary); border:1.5px solid var(--arcos-primary); background:#fff; font-weight:600; border-radius: var(--r-sm); padding:.75rem 1.25rem; }
.btn-outline-marinho:hover, .btn-outline-marinho:focus { background: var(--arcos-primary); color:#fff; }

/* ---- submit fixo (form) ---- */
.arcos-submit-bar { position: sticky; bottom: 0; z-index: 1010; background: linear-gradient(180deg, rgba(247,249,252,0), var(--arcos-bg) 28%); padding-top:1.25rem; }

/* ---- resultado: índice herói ---- */
.arcos-hero-indice { text-align:center; padding: 1.75rem 1.25rem; }
.arcos-indice { font-family: var(--arcos-font-display); font-weight:600; font-size: clamp(3.6rem, 16vw, 5.5rem); line-height:.95; color: var(--arcos-accent-600); letter-spacing:-.02em; }
.arcos-indice small { font-size: 1.5rem; color: var(--arcos-text-2); font-family: var(--arcos-font-sans); font-weight:600; }
.arcos-classif { display:inline-block; font-weight:700; color: var(--arcos-primary); background: var(--arcos-a-tint); border:1px solid #CBDDEE; border-radius:999px; padding:.35rem 1rem; margin-top:.4rem; }

/* meter de faixas (0-100) */
.arcos-meter { margin: 1.25rem 0 .25rem; }
.arcos-meter-track { display:grid; grid-template-columns: 40fr 30fr 15fr 15fr; gap:3px; height:12px; border-radius:999px; overflow:hidden; }
.arcos-meter-seg { height:100%; }
.arcos-meter-seg.s1 { background:#E2A8A0; } .arcos-meter-seg.s1.on{ background: var(--arcos-danger); }
.arcos-meter-seg.s2 { background:#EBCB9A; } .arcos-meter-seg.s2.on{ background: var(--arcos-warning); }
.arcos-meter-seg.s3 { background:#A9C6DE; } .arcos-meter-seg.s3.on{ background: var(--arcos-primary-600); }
.arcos-meter-seg.s4 { background:#A6D2B3; } .arcos-meter-seg.s4.on{ background: var(--arcos-success); }
.arcos-meter-scale { display:flex; justify-content:space-between; font-size:.72rem; color: var(--arcos-text-2); margin-top:.3rem; }
.arcos-meter-pointer { position:relative; height:0; }
.arcos-meter-pointer i { position:absolute; left: var(--at, 50%); transform: translateX(-50%); width:0;height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--arcos-ink); margin-top:2px; }

/* radar (SVG injetado pelo backend) */
.arcos-radar svg { display:block; width:100%; height:auto; max-width:360px; margin:0 auto; }

/* dimensões (barras por pilar) */
.dim-row { display:grid; grid-template-columns: 1fr auto; gap:.25rem .75rem; align-items:center; padding:.55rem 0; border-top:1px solid var(--arcos-border); }
.dim-row:first-child { border-top:0; }
.dim-name { font-weight:600; font-size:.95rem; color: var(--arcos-ink); }
.dim-val { font-weight:700; font-variant-numeric: tabular-nums; color: var(--arcos-text-2); }
.dim-bar { grid-column:1 / -1; height:8px; background: var(--arcos-border); border-radius:999px; overflow:hidden; }
.dim-bar > i { display:block; height:100%; width: var(--v,0%); background: var(--dim, var(--arcos-primary)); border-radius:999px; }

.dim-clareza { --dim: var(--arcos-a); }
.dim-mercado { --dim: var(--arcos-r); }
.dim-diferenciacao { --dim: var(--arcos-c); }
.dim-capacidade { --dim: var(--arcos-o); }
.dim-inovacao { --dim: var(--arcos-s); }
.dim-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background: var(--dim, var(--arcos-primary)); margin-right:.5rem; vertical-align:middle; flex:none; }

/* força / desafio */
.arcos-finding { display:flex; gap:.85rem; padding:1rem 1.15rem; border-radius: var(--r-md); border:1px solid; }
.arcos-finding .ic { flex:none; width:26px; height:26px; }
.arcos-finding h3 { font-family: var(--arcos-font-sans); font-size:1rem; font-weight:700; margin:0 0 .2rem; }
.arcos-finding p { margin:0; font-size:.95rem; line-height:1.5; }
.finding-forca { background: var(--arcos-success-tint); border-color:#BFE3CC; }
.finding-forca .ic, .finding-forca h3 { color: #136B34; } /* AA sobre tint (5.8:1) */
.finding-desafio { background: var(--arcos-warning-tint); border-color:#EFD3AE; }
.finding-desafio .ic, .finding-desafio h3 { color: #9A4708; } /* AA sobre tint (5.6:1) */

/* oportunidades */
.opp-list { list-style:none; margin:0; padding:0; counter-reset: opp; }
.opp-item { display:flex; align-items:flex-start; gap:.85rem; padding:.9rem 0; border-top:1px solid var(--arcos-border); }
.opp-item:first-child { border-top:0; }
.opp-num { counter-increment: opp; flex:none; width:30px; height:30px; border-radius:50%; background: var(--arcos-primary); color:#fff; font-weight:700; display:grid; place-items:center; font-size:.95rem; }
.opp-num::before { content: counter(opp); }
.opp-text { flex:1; min-width:0; color: var(--arcos-ink); }
.opp-impacto { flex:none; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:.2rem .55rem; border-radius:999px; text-transform:uppercase; }
/* Reflow (WCAG 1.4.10): o badge é `flex:none` e o rótulo mais longo — "IMPACTO
   MÉDIO-ALTO", 155px — não cabe ao lado do número + texto em 320px, forçando
   scroll horizontal na página inteira (medido: scrollWidth 339 num viewport 320).
   As DUAS metades são necessárias, e o `min-width:0` sozinho não serve: com ele
   o overflow some, mas a coluna de texto colapsa para 42px e a oportunidade vira
   um filete ilegível. Com a quebra de linha aqui, o texto mantém 210px. O recuo
   alinha o badge com o texto, não com o número. */
@media (max-width: 400px) {
  .opp-item { flex-wrap: wrap; }
  .opp-impacto { margin-left: calc(30px + .85rem); }
}
.imp-alto { background: var(--arcos-warning-tint); color: #9A4708; border:1px solid #EFD3AE; }
.imp-medio { background: var(--arcos-a-tint); color: var(--arcos-primary); border:1px solid #CBDDEE; }

/* CTA cards */
.arcos-cta { padding:1.4rem 1.25rem; border-radius: var(--r-md); }
.arcos-cta h2 { font-size:1.18rem; line-height:1.25; margin:0 0 .5rem; }
.arcos-cta-livro { background:#fff; border:1px solid var(--arcos-border); box-shadow: var(--sh-sm); }
.arcos-cta-plataforma { background: linear-gradient(160deg, #0A3D6E, #08305A); color:#fff; box-shadow: var(--sh-md); }
.arcos-cta-plataforma h2, .arcos-cta-plataforma p { color:#fff; }
.arcos-cta-plataforma p { color:#CFE0F0; }

/* footer */
.arcos-footer { border-top:1px solid var(--arcos-border); background:#fff; }
.arcos-footer .arcos-wrap { padding-top:1.5rem; padding-bottom:2rem; }
.arcos-footer, .arcos-footer a { color: var(--arcos-text-2); font-size:.85rem; }
.arcos-footer a { color: var(--arcos-primary-600); }

/* privacidade */
.priv-section { margin-bottom:1.5rem; }
.priv-section h2 { font-size:1.12rem; color: var(--arcos-primary); margin-bottom:.4rem; }
.priv-section p, .priv-section li { color: var(--arcos-text-2); line-height:1.6; }
.priv-draft { background: var(--arcos-warning-tint); border:1px solid #EFD3AE; color: #7a4408; border-radius: var(--r-md); padding:.85rem 1rem; font-size:.9rem; }

/* foco global visível */
a:focus-visible, button:focus-visible, .btn:focus-visible { outline:3px solid var(--arcos-primary-600); outline-offset:2px; }

/* responsivo */
@media (max-width: 575.98px) {
  .lk-scale { gap:.3rem; }
  .lk-opt label { min-height:48px; }
  .lk-cap { display:none; }
  .arcos-wordmark { font-size:1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media (prefers-contrast: more) {
  .form-control, .form-select { border-color:#475569; }
  .lk-opt label { border-color:#475569; }
}

/* ============================================================================
   ARCOS — Landing pública (home) — LAYOUT DE CONVERSÃO (full-bleed bands)
   Aditivo ao design system do diagnóstico. Sem CDN.
   Rompe a coluna editorial de 780px (.arcos-wrap) só na home, via .lp + :has().
   ========================================================================== */

/* Guard contra scroll-x do full-bleed. `clip` (≠ hidden) não cria scroll
   container → não quebraria sticky; escopado em :has(.lp) → nunca toca o
   diagnóstico (que tem .arcos-progress/.arcos-submit-bar sticky). */
body:has(.lp) { overflow-x: clip; }

/* .lp rompe o .arcos-wrap (780px) e vira full-bleed; o cálculo left/transform
   cancela o padding/centragem do wrap (independe da largura). */
.lp {
  position: relative; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100vw;
  margin-top: -1.75rem;            /* cancela padding-top do .arcos-main → hero colado ao header */
  margin-bottom: -4.5rem;          /* cancela padding-bottom do .arcos-main → última band colada ao footer */
  text-align: left;
}
.lp-container { max-width: 1080px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
/* alinha header+footer compartilhados à largura do landing — SÓ na home */
body:has(.lp) .arcos-header > .arcos-wrap,
body:has(.lp) .arcos-footer > .arcos-wrap {
  max-width: 1080px; padding-inline: clamp(1.1rem, 4vw, 2rem);
}
/* header fixo SÓ na landing: a barra de atalhos só serve se acompanha a rolagem.
   No formulário e na privacidade o header segue estático (nada a saltar lá). */
body:has(.lp) .arcos-header { position: sticky; top: 0; z-index: 1000; }
body:has(.lp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { body:has(.lp) { scroll-behavior: auto; } }
/* compensa o header fixo ao saltar por âncora (senão o título fica atrás da faixa azul) */
.lp-anchor { scroll-margin-top: 5.5rem; }
.lp-anchor:focus { outline: none; }            /* alvo programático — não é elemento clicável */
.lp-anchor:focus-visible { outline: 3px solid var(--arcos-accent); outline-offset: -3px; }
@media (max-width: 820px) { .lp-anchor { scroll-margin-top: 8.75rem; } }  /* header mobile ≈125px */

/* faixas (ritmo de landing por alternância de fundo) */
.lp-band { padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
.lp-band--thin { padding: clamp(1.6rem, 4vw, 2.4rem) 0; }
.lp-band--tint { background: #EBF1F8; }
.lp-band--navy { background: linear-gradient(165deg, #0A3D6E 0%, #08305A 100%); color:#fff; }
.lp-band--hero { background: radial-gradient(135% 130% at 82% -10%, #E4EEFA 0%, #F7F9FC 58%); border-bottom:1px solid var(--arcos-border); }
.lp-narrow { max-width: 760px; }
.lp-center { text-align:center; }
.lp-center.lp-narrow, .lp-narrow.lp-center { margin-inline:auto; }

/* cabeçalho de seção */
.lp-head { max-width: 48rem; margin-bottom: clamp(1.4rem, 3vw, 2.1rem); }
.lp-head.lp-center { margin-inline:auto; }
.lp-head .arcos-eyebrow { margin-bottom:.55rem; }
.lp-head .arcos-h-section { font-size: clamp(1.55rem, 3.6vw, 2.15rem); margin:.1rem 0 .55rem; }
.lp-head .arcos-lead { font-size: 1.05rem; }
.lp-band--navy .arcos-eyebrow { color:#E7B85C; }
.lp-band--navy .arcos-h-section, .lp-band--navy .arcos-lead { color:#fff; }

/* ---- 1 · HERO ---- */
.lp-hero { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items:center; }
.lp-hero-copy h1 {
  font-family: var(--arcos-font-display); font-weight:600;
  font-size: clamp(2.3rem, 5.4vw, 3.5rem); line-height:1.06; letter-spacing:-.015em;
  color: var(--arcos-primary); margin:.7rem 0 1.05rem;
}
/* Destaque da palavra-chave no hero: marca-texto cheio (fundo dourado atrás do texto,
   palavra inteira). box-decoration-break:clone mantém padding/cantos se quebrar linha. */
.lp-hero-copy h1 .u {
  background: rgba(216,144,24,.42);
  padding: .02em .14em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.lp-hero-copy .arcos-lead { font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height:1.6; max-width: 42ch; }
/* Credencial do hero — prova social acima da dobra (crítica em mobile, onde a
   legenda da foto cai fora dos 844px). Filete âmbar à esquerda em vez de card:
   pesa pouco e não compete com o CTA logo abaixo. */
.lp-hero-cred {
  margin: 1.15rem 0 0; padding-left: .8rem; border-left: 3px solid var(--arcos-accent);
  font-size: .92rem; line-height: 1.45; color: var(--arcos-text-2);
}
.lp-hero-cred strong { color: var(--arcos-ink); font-weight: 700; }
.lp-hero-cred em { font-style: italic; }
.lp-cta-row { display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin-top:1.5rem; }
.lp-cta-row--center { justify-content:center; }
.lp-cta-note { font-size:.86rem; color: var(--arcos-text-2); }
.lp-cta-note--light { color:#BFD2E6; }
.lp-brand-em { color: var(--arcos-primary); font-weight:600; }
.lp-book-amazon { display:inline-block; color: var(--arcos-primary); font-weight:600; text-decoration:none; border-bottom:2px solid var(--arcos-accent); }
.lp-book-amazon:hover { border-bottom-color: var(--arcos-primary); }

/* CTA maior e mais "clicável" no landing (mantém tinta escura sobre dourado) */
.lp .btn-arcos { padding: 1rem 1.7rem; font-size: 1.06rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(216,144,24,.30); }
.lp .btn-arcos:hover, .lp .btn-arcos:focus { transform: translateY(-1px); filter:brightness(.97); box-shadow: 0 9px 24px rgba(216,144,24,.36); }
.lp .btn-arcos:active { transform: translateY(0); }

/* foto do hero: o guia como isca (substituiu o card do Índice em jul/26) */
.lp-heroshot { position:relative; margin:0; }
.lp-heroshot img {
  display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%;
  border-radius: var(--r-lg); border:1px solid var(--arcos-border);
  box-shadow: 0 20px 54px rgba(10,61,110,.20);
}
.lp-heroshot figcaption {
  position:absolute; left: clamp(.7rem,2vw,1.1rem); right: clamp(.7rem,2vw,1.1rem); bottom: clamp(.7rem,2vw,1.1rem);
  background: rgba(255,255,255,.94); border:1px solid var(--arcos-border); border-radius: var(--r-md);
  padding:.7rem .9rem; box-shadow: 0 8px 22px rgba(10,61,110,.16);
  backdrop-filter: saturate(1.2) blur(3px);
}
.lp-heroshot figcaption strong { display:block; font-family: var(--arcos-font-display); font-weight:600; font-size:1.05rem; color: var(--arcos-primary); line-height:1.15; }
.lp-heroshot figcaption span { display:block; font-size:.82rem; line-height:1.35; color: var(--arcos-text-2); margin-top:.15rem; }
.lp-heroshot figcaption em { font-style:italic; }

/* card do Índice: preview do entregável (agora ao lado dos passos, em §8) */
.lp-resultcard {
  position:relative; background:#fff; border:1px solid var(--arcos-border);
  border-radius: var(--r-lg); box-shadow: 0 20px 54px rgba(10,61,110,.17);
  padding: clamp(1.4rem, 3vw, 2rem); margin:0;
}
.lp-rc-tag { position:absolute; top:1rem; right:1rem; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--arcos-text-2); background:#F1F5F9; border:1px solid var(--arcos-border); border-radius:999px; padding:.22rem .6rem; }
.lp-rc-label { font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#8A5C07; margin:0; }
.lp-rc-number { font-family: var(--arcos-font-display); font-weight:600; font-size: clamp(4rem, 11vw, 6rem); line-height:.88; color: var(--arcos-accent-600); letter-spacing:-.02em; margin:.2rem 0 .1rem; }
.lp-rc-number span { font-size:.3em; color: var(--arcos-text-2); font-family: var(--arcos-font-sans); font-weight:600; }
.lp-meter { display:grid; grid-template-columns: repeat(4,1fr); gap:4px; margin:.9rem 0 .35rem; }
.lp-meter span { height:10px; border-radius:999px; }
.lp-meter .m1{ background:var(--arcos-danger); } .lp-meter .m2{ background:var(--arcos-warning); }
.lp-meter .m3{ background:var(--arcos-primary-600); } .lp-meter .m4{ background:var(--arcos-success); }
.lp-meter-ends { display:flex; justify-content:space-between; font-size:.72rem; color: var(--arcos-text-2); font-variant-numeric:tabular-nums; }
.lp-rc-dims { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--arcos-border); }
.lp-rc-dimlabel { font-size:.82rem; font-weight:600; color: var(--arcos-ink); }
.lp-rc-dots { display:inline-flex; gap:.3rem; }
.lp-rc-dots i { width:11px; height:11px; border-radius:50%; display:block; }
.lp-rc-cap { font-size:.86rem; color: var(--arcos-text-2); line-height:1.45; margin:.85rem 0 0; }

/* ---- números da trajetória (dentro de "Quem conduz" desde jul/26) ---- */
.lp-stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--arcos-border); border:1px solid var(--arcos-border); border-radius: var(--r-md); overflow:hidden; list-style:none; margin:0; padding:0; }
.lp-guide-stats { grid-template-columns: repeat(2,1fr); margin-top:.6rem; }
.lp-guide-statlbl { font-size:.86rem; font-weight:700; color: var(--arcos-text-2); margin:1.35rem 0 0; }
.lp-stat { background:#fff; padding:1.15rem 1rem; text-align:center; }
.lp-stat b { display:block; font-family: var(--arcos-font-display); font-weight:600; font-size: clamp(1.3rem,2.6vw,1.6rem); color: var(--arcos-primary); line-height:1.05; }
.lp-stat span { display:block; font-size:.8rem; color: var(--arcos-text-2); line-height:1.35; margin-top:.3rem; }

/* ---- 3 · PROBLEMA (cards) / 5 · pilares / 8 · cases : grids ---- */
.lp-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.7rem,1.6vw,1rem); }
.lp-symptom { background:#fff; border:1px solid var(--arcos-border); border-top:3px solid var(--arcos-warning); border-radius: var(--r-md); padding:1.2rem 1.25rem; box-shadow: var(--sh-sm); }
.lp-symptom-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background: var(--arcos-warning-tint); color:#9A4708; margin-bottom:.75rem; }
.lp-symptom-ic svg { width:21px; height:21px; }
.lp-symptom h3 { font-family: var(--arcos-font-sans); font-size:1.02rem; font-weight:700; color: var(--arcos-ink); margin:0 0 .3rem; }
.lp-symptom p { margin:0; font-size:.9rem; line-height:1.5; color: var(--arcos-text-2); }

/* pilares A·R·C·O·S (reusa blk-1..5) — cards verticais */
.lp-pillars { display:grid; grid-template-columns: repeat(5,1fr); gap: clamp(.7rem,1.5vw,1rem); }
.lp-pillar { background:#fff; border:1px solid var(--arcos-border); border-top:4px solid var(--blk, var(--arcos-primary)); border-radius: var(--r-md); padding:1.25rem 1.15rem; box-shadow: var(--sh-sm); }
.lp-pillar-mark { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-family: var(--arcos-font-display); font-weight:600; font-size:1.55rem; color:#fff; background: var(--blk, var(--arcos-primary)); margin-bottom:.8rem; }
.lp-pillar h3 { font-family: var(--arcos-font-sans); font-size:1.02rem; font-weight:700; margin:0 0 .35rem; color: var(--blk-text, var(--arcos-primary)); }
.lp-pillar p { margin:0; font-size:.88rem; line-height:1.5; color: var(--arcos-text-2); }

/* ---- 4/11 · painel marinho (reframe + CTA final) ---- */
.lp-quote { font-family: var(--arcos-font-display); font-weight:600; font-size: clamp(1.4rem,3.6vw,2rem); line-height:1.25; color:#fff; margin:0; }
.lp-quote-sub { color:#CFE0F0; font-size:1.05rem; line-height:1.55; margin:1rem 0 0; }
.lp-band--navy .lp-cta-row { margin-top:1.6rem; }

/* ---- 5 · guia (Daniela) ---- */
.lp-guide { display:grid; grid-template-columns: 290px 1fr; gap: clamp(1.6rem,4vw,3rem); align-items:center; }
.lp-guide-fig { position:relative; margin:0; width:100%; max-width:290px; }
.lp-guide-portrait { aspect-ratio:4/5; border-radius: var(--r-lg); overflow:hidden; background:#08305A; border:1px solid var(--arcos-border); box-shadow: 0 18px 46px rgba(10,61,110,.20); }
.lp-guide-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block; }
.lp-guide-book { position:absolute; right:-12px; bottom:-16px; width:37%; height:auto; filter: drop-shadow(0 12px 20px rgba(8,33,66,.34)); }
.lp-guide-body > p { color: var(--arcos-text-2); line-height:1.65; }
.lp-guide-body .arcos-h-section { margin:.2rem 0 .6rem; }
.lp-creds { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }

/* ---- 7 · CTA intermediário (strip) ---- */
.lp-ctastrip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem; background:#fff; border:1px solid var(--arcos-border); border-left:5px solid var(--arcos-accent); border-radius: var(--r-lg); padding: clamp(1.2rem,3vw,1.6rem) clamp(1.3rem,3vw,1.8rem); box-shadow: var(--sh-sm); }
.lp-ctastrip p { margin:0; font-family: var(--arcos-font-display); font-weight:600; font-size: clamp(1.1rem,2.4vw,1.3rem); color: var(--arcos-primary); flex:1 1 16rem; }

/* ---- 8 · cases (cards de destaque) ---- */
/* Depoimentos: no desktop os 3 cards inteiros, lado a lado (sem corte, sem buraco).
   No mobile (≤760px) vira carrossel scroll-snap com swipe — ver @media abaixo. */
.lp-cases { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,1.8vw,1.1rem); }
/* aviso de nomes fictícios — precisa ser legível, não letra miúda de rodapé (AA: 4.5:1) */
.lp-cases-nota { margin:1rem 0 0; font-size:.84rem; line-height:1.5; color: var(--arcos-text-2); }
.lp-case { position:relative; background:#fff; border:1px solid var(--arcos-border); border-left:4px solid var(--acc, var(--arcos-primary)); border-radius: var(--r-md); padding:1.4rem 1.5rem; box-shadow: var(--sh-sm); margin:0; }
.lp-case .q { font-family: var(--arcos-font-display); font-size:2.6rem; line-height:.4; color: var(--acc, var(--arcos-primary)); opacity:.28; display:block; height:1.1rem; }
.lp-case p { color: var(--arcos-ink); line-height:1.55; margin:.4rem 0 .9rem; font-size:.98rem; }
.lp-case .big { font-family: var(--arcos-font-display); font-weight:600; color: var(--arcos-accent-600); }
.lp-case cite { font-style:normal; font-weight:700; font-size:.9rem; color: var(--arcos-primary); }
.lp-case cite .role { display:block; font-weight:500; font-size:.8rem; color: var(--arcos-text-2); margin-top:.1rem; }
.lp-case .lp-fict { display:block; font-size:.72rem; color: var(--arcos-text-2); font-style:italic; margin-top:.65rem; }

/* ---- 9 · como funciona (stepper) ---- */
.lp-steps { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.8rem,1.6vw,1.1rem); counter-reset: step; margin:0 0 2.6rem; padding:0; list-style:none; }
/* passos + preview do Índice lado a lado (o card veio do hero em jul/26) */
.lp-diaggrid { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: clamp(1.3rem,3vw,2.4rem); align-items:center; margin-bottom:2.6rem; }
.lp-diaggrid .lp-steps { grid-template-columns: repeat(2,1fr); margin-bottom:0; }
.lp-step { background:#fff; border:1px solid var(--arcos-border); border-radius: var(--r-md); padding:1.2rem 1.25rem; box-shadow: var(--sh-sm); }
.lp-step-num { counter-increment: step; width:34px; height:34px; border-radius:50%; background: var(--arcos-primary); color:#fff; font-weight:700; display:grid; place-items:center; font-size:.95rem; margin-bottom:.65rem; }
.lp-step-num::before { content: counter(step); }
.lp-step p { margin:0; color: var(--arcos-ink); line-height:1.45; font-size:.93rem; }
.lp-step small { color: var(--arcos-text-2); }

/* ---- 10 · objeções (FAQ acordeão nativo) ---- */
.lp-faq { display:grid; gap:.55rem; }
.lp-faq details { background:#fff; border:1px solid var(--arcos-border); border-radius: var(--r-md); box-shadow: var(--sh-sm); }
.lp-faq summary { cursor:pointer; padding:1rem 1.2rem; font-weight:600; color: var(--arcos-ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; text-align:left; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; color: var(--arcos-accent-600); font-weight:700; font-size:1.3rem; line-height:1; flex:none; }
.lp-faq details[open] summary::after { content:"\2013"; }
.lp-faq summary:focus-visible { outline:3px solid var(--arcos-primary-600); outline-offset:-3px; border-radius: var(--r-md); }
.lp-faq-a { padding: 0 1.2rem 1.1rem; color: var(--arcos-text-2); line-height:1.6; }

/* ---- responsivo ---- */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; gap:1.8rem; }
  .lp-heroshot { max-width: 380px; }
  .lp-diaggrid { grid-template-columns: 1fr; }
  .lp-diaggrid .lp-resultcard { max-width: 420px; margin-inline:auto; }
  .lp-pillars { grid-template-columns: repeat(2,1fr); }
  .lp-cards { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .lp-guide { grid-template-columns: 1fr; justify-items:start; }
  .lp-guide-stats { grid-template-columns: repeat(2,1fr); }
  .lp-guide-fig { max-width:210px; }
  /* Carrossel só no mobile: 1 card por vez (85%) + peek do próximo indicando swipe. */
  .lp-cases {
    display:flex; grid-template-columns:none; gap:.9rem;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0;
    padding-bottom:.7rem; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .lp-cases::-webkit-scrollbar { display:none; }
  .lp-case { flex:0 0 85%; scroll-snap-align:start; }
  .lp-steps, .lp-diaggrid .lp-steps { grid-template-columns: 1fr; }
  .lp-stats { grid-template-columns: repeat(2,1fr); }
  .lp-ctastrip { justify-content:flex-start; }
}
@media (max-width: 560px) {
  .lp-cards { grid-template-columns: 1fr; }
  .lp-pillars { grid-template-columns: 1fr; }
  .lp-hero-copy h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
}

/* ===== Tela de resultado: aviso de e-mail + ação "Baixar PDF" ===== */
.result-aviso {
  border: 1px solid var(--arcos-border);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: .85rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .95rem;
  line-height: 1.5;
  background: var(--arcos-surface);
}
.result-aviso--ok   { border-left-color: var(--arcos-success); background: var(--arcos-success-tint); color: #14532D; }
.result-aviso--warn { border-left-color: var(--arcos-warning); background: var(--arcos-warning-tint); color: #6B3D08; }
.result-aviso a { color: inherit; text-decoration: underline; word-break: break-all; }

.result-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.btn-baixar-pdf {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--arcos-primary); background: #fff;
  border: 1.5px solid var(--arcos-primary); border-radius: var(--r-sm);
  padding: .4rem .8rem; font-size: .88rem; font-weight: 600;
  /* 44px de alvo, mesmo padrão dos itens do nav (WCAG 2.5.8 pede 24; a casa
     adota 44 no toque). Sem isto o botão saía com 36px de altura. */
  min-height: 44px;
  cursor: pointer; transition: background .15s, color .15s;
}
.btn-baixar-pdf:hover, .btn-baixar-pdf:focus { background: var(--arcos-primary); color: #fff; }
.btn-baixar-pdf:focus-visible { outline: 3px solid var(--arcos-primary); outline-offset: 2px; }
.btn-baixar-pdf svg { vertical-align: -2px; }

/* ===== Impressão / "Salvar como PDF" ===== */
@media print {
  .arcos-header, .arcos-footer, .skip-link,
  .result-aviso, .btn-baixar-pdf { display: none !important; }
  body, .arcos-main { background: #fff !important; }
  .arcos-main { padding: 0 !important; }   /* zera o padding-bottom 4.5rem → sem página em branco no print */
  .arcos-wrap { max-width: 100% !important; padding: 0 !important; }
  .arcos-card, .arcos-finding, .arcos-cta { break-inside: avoid; box-shadow: none !important; }
}
@page { size: A4; margin: 1.4cm; }