/* ============================================================
   iAPX DESIGN SYSTEM · TEMA WEB / TELA · v1.1.0
   Par do iapx-print.css. Mesmos tokens, unidades em rem.
   Fontes: Bebas Neue · Barlow Condensed · Inter · JetBrains Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* cor */
  --iapx-vermilion:     #E13A03;
  --iapx-vermilion-hot: #F04B0A;
  --iapx-vermilion-glow:#FF9652;
  --iapx-ink:           #17120F;
  --iapx-surface:       #221D19;
  --iapx-line:          #352E28;
  --iapx-dark:          #1A1512;
  --iapx-cream:         #F5EEE8;
  --iapx-mute:          #9A8B80;
  --iapx-accent:        #5BC8F0;   /* SKY · teto 3% · nunca sobre laranja */
  --iapx-accent-deep:   #0B2A45;   /* acento sobre laranja */

  /* tipografia */
  --iapx-display: 'Bebas Neue', Impact, sans-serif;
  --iapx-label:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --iapx-body:    'Inter', system-ui, sans-serif;
  --iapx-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* escala de tela */
  --iapx-t-hero:  clamp(3.5rem, 9vw, 7.5rem);
  --iapx-t-h1:    clamp(2.5rem, 6vw, 4.5rem);
  --iapx-t-h2:    clamp(1.9rem, 4vw, 3rem);
  --iapx-t-h3:    1.35rem;
  --iapx-t-body:  1rem;
  --iapx-t-small: 0.875rem;
  --iapx-t-label: 0.72rem;

  /* espaço */
  --iapx-gutter:  1.25rem;
  --iapx-pad:     1.5rem;
  --iapx-block:   3.5rem;
  --iapx-maxw:    1100px;

  --iapx-radius:  0;               /* invariável */
  --iapx-hair:    1px solid var(--iapx-line);
}

/* ── base ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
.iapx a:focus-visible, .iapx button:focus-visible {
  outline: 2px solid var(--iapx-vermilion-hot); outline-offset: 3px; }
.iapx .iapx-orange a:focus-visible { outline-color: var(--iapx-dark); }
.iapx-skip { position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--iapx-vermilion); color: var(--iapx-dark);
  font-family: var(--iapx-label); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: .75rem 1rem; text-decoration: none; }
.iapx-skip:focus { left: 0; }
.iapx { background: var(--iapx-ink); color: var(--iapx-cream);
        font-family: var(--iapx-body); line-height: 1.6; }
.iapx * { box-sizing: border-box; border-radius: var(--iapx-radius); }
.iapx-wrap { max-width: var(--iapx-maxw); margin: 0 auto; padding: 0 var(--iapx-pad); }

/* superfícies */
.iapx-orange { background: var(--iapx-vermilion); color: var(--iapx-dark); }
.iapx-orange--glow { background:
  radial-gradient(circle at 12% -10%, var(--iapx-vermilion-glow) 0%, rgba(255,150,82,0) 62%),
  var(--iapx-vermilion); }
.iapx-surface { background: var(--iapx-surface); border: var(--iapx-hair); }

/* ── tipografia ──────────────────────────────────────────── */
.iapx-hero, .iapx-h1, .iapx-h2, .iapx-h3 {
  font-family: var(--iapx-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em; margin: 0; }
.iapx-hero { font-size: var(--iapx-t-hero); line-height: .84; }
.iapx-h1   { font-size: var(--iapx-t-h1);   line-height: .88; }
.iapx-h2   { font-size: var(--iapx-t-h2);   line-height: .92; }
.iapx-h3   { font-size: var(--iapx-t-h3);   line-height: 1;   letter-spacing: .04em; }
.iapx-em   { color: var(--iapx-vermilion); }
/* Em corpo de texto o vermilion cai para 4,26:1. Abaixo de 24px usa-se o
   meio-tom vermilion-hot: 5,06:1 sobre grafite, mesma leitura de cor. */
.iapx-lead .iapx-em, .iapx-card__text .iapx-em, .iapx-row__d .iapx-em,
.iapx-check .iapx-em, .iapx-table td .iapx-em, .iapx-rulebox p .iapx-em {
  color: var(--iapx-vermilion-hot); }
.iapx-orange .iapx-em { color: var(--iapx-cream); }

.iapx-eyebrow { font-family: var(--iapx-label); font-weight: 700;
  font-size: var(--iapx-t-label); letter-spacing: .28em; text-transform: uppercase;
  color: var(--iapx-vermilion-hot); margin-bottom: .6rem; }
/* Sobre laranja nenhuma tinta de corpo pequeno atinge AA (grafite 4,15:1).
   O eyebrow vira selo grafite com tinta vermilion-hot: 5,06:1, mesma
   solução que o chip já usava nesta superfície. */
.iapx-orange .iapx-eyebrow { display: inline-block; background: var(--iapx-dark);
  color: var(--iapx-vermilion-hot); padding: .45rem .8rem; letter-spacing: .22em; }

.iapx-lead { font-size: 1.05rem; line-height: 1.68; color: var(--iapx-mute); }
/* Sobre laranja o lead só passa como TEXTO GRANDE (WCAG: ≥19px em 700 → limiar
   3:1). Tinta cheia, sem alpha: 4,15:1. É por isso que a superfície laranja é
   o soco, não a leitura (§6). */
.iapx-orange .iapx-lead { color: var(--iapx-dark); font-weight: 700;
  font-size: clamp(1.2rem, 1.2rem + .6vw, 1.45rem); line-height: 1.5; }
.iapx-mono { font-family: var(--iapx-mono); font-size: .78rem; letter-spacing: .08em; }

.iapx-rule { width: 88px; height: 5px; background: var(--iapx-vermilion); margin: 1.25rem 0; }

/* ── componentes ─────────────────────────────────────────── */

/* topbar + rodapé */
.iapx-topbar, .iapx-footbar { display: flex; justify-content: space-between;
  align-items: center; padding: 1rem 0; }
.iapx-footbar { border-top: var(--iapx-hair); }
.iapx-topbar img, .iapx-footbar img { height: 22px; width: auto; display: block; }
.iapx-tag { font-family: var(--iapx-label); font-weight: 700; letter-spacing: .2em;
  font-size: var(--iapx-t-label); color: var(--iapx-mute); text-transform: uppercase; }

/* card */
.iapx-card { background: var(--iapx-surface); border: var(--iapx-hair);
  border-top: 3px solid var(--iapx-vermilion); padding: var(--iapx-pad); }
.iapx-card__num { font-family: var(--iapx-display); font-size: 1.5rem;
  color: var(--iapx-vermilion); line-height: 1; }
.iapx-card__title { font-family: var(--iapx-display); font-size: 1.3rem;
  letter-spacing: .03em; margin: .25rem 0 .5rem; }
.iapx-card__text { font-size: var(--iapx-t-small); color: var(--iapx-mute); }

/* caixa de regra */
.iapx-rulebox { background: rgba(225,58,3,.10); border-left: 4px solid var(--iapx-vermilion);
  padding: 1.1rem 1.35rem; }
.iapx-rulebox--neg { background: rgba(245,238,232,.05); border-left-color: var(--iapx-cream); }
.iapx-rulebox__title { font-family: var(--iapx-label); font-weight: 700; letter-spacing: .22em;
  font-size: var(--iapx-t-label); color: var(--iapx-vermilion-hot); text-transform: uppercase; }
.iapx-rulebox--neg .iapx-rulebox__title { color: var(--iapx-cream); }
.iapx-rulebox p { font-size: var(--iapx-t-small); color: var(--iapx-mute); margin: .4rem 0 0; }

/* KPI */
.iapx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--iapx-gutter); }
.iapx-stat { background: var(--iapx-surface); border-bottom: 3px solid var(--iapx-vermilion);
  padding: 1rem; text-align: center; }
.iapx-stat__n { font-family: var(--iapx-display); font-size: 2.1rem;
  color: var(--iapx-vermilion); line-height: 1; }
.iapx-stat__l { font-family: var(--iapx-label); font-weight: 700; letter-spacing: .18em;
  font-size: var(--iapx-t-label); color: var(--iapx-accent); text-transform: uppercase; }

/* linha de item numerado (aula, passo, pilar) */
.iapx-row { display: flex; gap: 1.25rem; padding: 1.1rem 0; border-bottom: var(--iapx-hair); }
.iapx-row__n { font-family: var(--iapx-display); font-size: 1.9rem;
  color: var(--iapx-vermilion); line-height: .9; min-width: 3rem; }
.iapx-row__t { font-family: var(--iapx-display); font-size: 1.25rem; letter-spacing: .04em; }
.iapx-row__d { font-size: var(--iapx-t-small); color: var(--iapx-mute); margin: .25rem 0; }
.iapx-row__deliver { font-family: var(--iapx-mono); font-size: .72rem; }
.iapx-row__deliver span { color: var(--iapx-accent); letter-spacing: .14em; margin-right: .5rem; }

/* checklist */
.iapx-check { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 1.5rem; }
.iapx-check li { border-bottom: var(--iapx-hair); padding-bottom: .5rem;
  font-size: var(--iapx-t-small); }
.iapx-check li::before { content: "▸"; color: var(--iapx-accent); margin-right: .5rem; }

/* tags */
.iapx-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.iapx-chip { font-family: var(--iapx-label); font-weight: 700; letter-spacing: .14em;
  font-size: var(--iapx-t-label); text-transform: uppercase; padding: .35rem .75rem;
  color: var(--iapx-accent); border: 1px solid rgba(91,200,240,.55); }
.iapx-chip--primary { background: var(--iapx-vermilion-hot); border-color: var(--iapx-vermilion-hot);
  color: var(--iapx-dark); }
.iapx-orange .iapx-chip { background: var(--iapx-dark); border-color: var(--iapx-dark);
  color: var(--iapx-vermilion-hot); }

/* preço */
.iapx-price { background: var(--iapx-vermilion); color: var(--iapx-dark);
  padding: var(--iapx-pad); text-align: center; }
.iapx-price--alt { background: var(--iapx-surface); color: var(--iapx-cream);
  border: 1px solid var(--iapx-vermilion); }
.iapx-price__v { font-family: var(--iapx-display); font-size: 3.4rem; line-height: 1; }
.iapx-price--alt .iapx-price__v { color: var(--iapx-vermilion); }
.iapx-price__l, .iapx-price__s { font-family: var(--iapx-label); font-weight: 700;
  letter-spacing: .2em; font-size: var(--iapx-t-label); text-transform: uppercase; opacity: .82; }

/* tabela comparativa */
.iapx-table { width: 100%; border-collapse: collapse; }
.iapx-table th { font-family: var(--iapx-display); font-size: 1.15rem; letter-spacing: .1em;
  text-align: center; padding-bottom: .6rem; border-bottom: 2px solid var(--iapx-vermilion); }
.iapx-table th:first-child { text-align: left; }
.iapx-table th:nth-child(2) { color: var(--iapx-vermilion-hot); }
.iapx-table th:nth-child(3) { color: var(--iapx-accent); }
.iapx-table td { font-size: var(--iapx-t-small); padding: .8rem .4rem;
  border-bottom: var(--iapx-hair); text-align: center; }
.iapx-table td:first-child { text-align: left; color: var(--iapx-mute); }

/* CTA */
.iapx-cta { background: var(--iapx-dark); padding: 2rem; }
.iapx-cta__label { font-family: var(--iapx-label); font-weight: 700; letter-spacing: .26em;
  font-size: var(--iapx-t-label); color: var(--iapx-vermilion-hot); text-transform: uppercase; }
.iapx-cta__handle { font-family: var(--iapx-display); font-size: 2.4rem; color: var(--iapx-cream);
  line-height: 1; margin: .5rem 0; }
.iapx-btn { display: inline-block; background: var(--iapx-vermilion); color: var(--iapx-dark);
  font-family: var(--iapx-label); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .9rem 1.6rem; text-decoration: none; border: 2px solid var(--iapx-vermilion);
  min-height: 44px; line-height: 1.2; text-align: center; }
.iapx-btn:hover { background: transparent; color: var(--iapx-vermilion); }
.iapx-btn--ghost { background: transparent; color: var(--iapx-vermilion); }
.iapx-btn--ghost:hover { background: var(--iapx-vermilion); color: var(--iapx-dark); }

/* citação / manifesto */
.iapx-quote { font-family: var(--iapx-display); font-size: var(--iapx-t-h1); line-height: .86;
  text-transform: uppercase; }
.iapx-etim { border-left: 4px solid currentColor; padding-left: 1.25rem; }

/* grelha de duas colunas */
.iapx-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--iapx-gutter); }

/* ── travas do sistema ───────────────────────────────────── */
/* o acento frio nunca é aplicado dentro de superfície laranja */
.iapx-orange .iapx-check li::before,
.iapx-orange .iapx-row__deliver span,
.iapx-orange .iapx-stat__l { color: var(--iapx-dark); border-color: var(--iapx-dark); }
/* O chip já foi tratado acima: sobre laranja ele vira grafite sólido com tinta
   vermilion, sem acento frio. Incluí-lo nesta trava pintaria a tinta de grafite
   sobre fundo grafite — contraste 1:1. A borda dele já é grafite na regra própria. */