/* =========================================================================
   Billions — Identidade visual (direção de arte própria)
   Conceito: "O sistema em uso."  Consistência que gera reconhecimento.
   Hero escuro à esquerda com um exemplo abstrato que muda de direção (sóbria,
   vibrante, editorial) mantendo o mesmo sistema; capítulos com demonstrações
   feitas com a própria identidade da Billions (prefixo iv-).
   ========================================================================= */

/* ---------- Hero: texto à esquerda e um exemplo vivo do sistema ---------- */
.hero.sv-hero.iv-hero { padding: 152px 0 96px; text-align: left; }
.iv-hero-text { position: relative; z-index: 2; }
.hero.sv-hero.iv-hero h1 { max-width: 14em; margin: 0; font-size: clamp(34px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -.032em; text-align: left; text-wrap: balance; }
.iv-mark { color: #fff; box-shadow: inset 0 -.1em 0 rgba(255,255,255,.55); }
.hero.sv-hero.iv-hero .sv-lede { max-width: 31em; margin: 22px 0 0; text-align: left; font-size: clamp(17px, 1.5vw, 21px); text-wrap: pretty; }
.iv-hero .actions { justify-content: flex-start; margin-top: 32px; }

.iv-stage-wrap { position: relative; z-index: 2; margin-top: 64px; }
.iv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hero .iv-bar-label { max-width: none; margin: 0; font-family: var(--font-text); font-size: 11px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-dark-soft); }
.iv-presets { display: inline-flex; padding: 4px; border: 1px solid var(--c-hairline-dark); border-radius: 99px; background: rgba(255,255,255,.04); }
.iv-presets button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 99px; background: none; font: 590 14px/1 var(--font-text); color: var(--c-on-dark-soft); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.iv-presets button:hover { color: #fff; }
.iv-presets button[aria-pressed="true"] { background: #fff; color: #000; }
.iv-presets button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* o exemplo: três direções, as mesmas peças (variáveis trocam a personalidade) */
.iv-stage { --bg: #f1f2f4; --surface: #fff; --ink: #14213d; --muted: rgba(20,33,61,.6); --accent: #1b3a6b; --on-accent: #fff; --r: 12px; --mono-r: 50%; --font: var(--font-display); --w: 600; --tr: -.02em;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 16px; padding: 20px; border: 1px solid var(--c-hairline-dark); border-radius: var(--radius-l); background: #0b0b0d; }
.iv-stage[data-theme="vibrante"] { --bg: #fff0e8; --surface: #fff; --ink: #1a1a1a; --muted: rgba(26,26,26,.62); --accent: #ff4d2e; --on-accent: #fff; --r: 26px; --mono-r: 12px; --w: 800; --tr: -.04em; }
.iv-stage[data-theme="editorial"] { --bg: #efe7da; --surface: #f8f3ea; --ink: #2b1d16; --muted: rgba(43,29,22,.62); --accent: #7a1f2b; --on-accent: #f8f3ea; --r: 3px; --mono-r: 0; --font: Georgia, "Times New Roman", serif; --w: 500; --tr: -.012em; }
.iv-tile { position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface); color: var(--ink); font-family: var(--font); transition: background-color .5s var(--ease), color .5s var(--ease), border-radius .5s var(--ease); }
.iv-tile h3, .iv-tile b { font-family: var(--font); font-weight: var(--w); letter-spacing: var(--tr); color: inherit; transition: font-weight .4s var(--ease); }
.iv-tile small { display: block; font-size: 12px; color: var(--muted); }
.iv-mono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--mono-r); background: var(--accent); color: var(--on-accent); font: 700 16px/1 var(--font); transition: background-color .5s var(--ease), border-radius .5s var(--ease); }
.iv-mono--lg { width: 64px; height: 64px; font-size: 30px; }
.iv-web { grid-column: 1 / span 7; grid-row: 1 / span 2; background: var(--bg); padding: 0; }
.iv-web-top { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--surface); border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); transition: background-color .5s var(--ease); }
.iv-wordmark { margin-right: auto; font-size: 17px; }
.iv-web-top > i { display: block; width: 30px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.iv-pill { width: 62px; height: 24px; border-radius: calc(var(--r) * 2); background: var(--accent); transition: background-color .5s var(--ease), border-radius .5s var(--ease); }
.iv-web-body { padding: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px) clamp(36px, 6vw, 72px); }
.iv-web-body h3 { max-width: 11em; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.04; }
.iv-web-body p { max-width: 24em; margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--muted); font-family: var(--font); }
.iv-btn { display: inline-block; margin-top: 28px; padding: 13px 24px; border-radius: calc(var(--r) * 2); background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--font-text); transition: background-color .5s var(--ease), border-radius .5s var(--ease); }
.iv-post { grid-column: 8 / -1; display: grid; align-content: space-between; aspect-ratio: 1.15 / 1; padding: 24px; background: var(--accent); color: var(--on-accent); }
.iv-post .iv-mono { background: var(--on-accent); color: var(--accent); }
.iv-post b { max-width: 7em; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.05; }
.iv-post small { color: color-mix(in srgb, var(--on-accent) 72%, transparent); }
.iv-card { grid-column: 8 / span 3; display: grid; align-content: start; gap: 6px; padding: 20px; }
.iv-card b { margin-top: 8px; font-size: 15px; }
.iv-card i { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.iv-card i:last-child { width: 60%; }
.iv-tokens { grid-column: 11 / -1; display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 8px; padding: 18px; }
.iv-chip { display: block; aspect-ratio: 1; border-radius: calc(var(--r) / 1.6); transition: background-color .5s var(--ease); }
.iv-chip--a { background: var(--accent); } .iv-chip--i { background: var(--ink); } .iv-chip--b { background: var(--bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.iv-aa { grid-column: 1 / -1; font: var(--w) 36px/1 var(--font); letter-spacing: var(--tr); text-align: center; }
.hero .iv-caption { max-width: 40em; margin: 20px 0 0; font-family: var(--font-text); font-size: 14px; line-height: 1.5; color: var(--c-on-dark-soft); }

/* ---------- Sistema de marca: três demonstrações com a identidade da Billions ---------- */
.section.iv-sistema { background: #fff; color: var(--c-ink); }
.iv-sistema h2, .iv-sistema h3 { color: var(--c-ink); }
.iv-sistema p, .iv-sistema .kicker { color: var(--c-gray); }
.iv-sistema-head { max-width: 760px; margin-bottom: 88px; }
.iv-sistema-head p { margin-top: 16px; }
.iv-rows { display: grid; }
.iv-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 56px 0; border-top: 1px solid var(--c-hairline); }
.iv-row:last-child { border-bottom: 1px solid var(--c-hairline); }
.iv-row-copy { grid-column: 1 / span 4; }
.iv-row-copy h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
.iv-row-copy p { margin-top: 14px; max-width: 24em; }
.iv-tag { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 590; letter-spacing: .06em; text-transform: uppercase; color: var(--c-gray); }
.iv-spec { grid-column: 6 / -1; position: relative; margin: 0; }
.iv-row--flip .iv-row-copy { grid-column: 9 / -1; grid-row: 1; }
.iv-row--flip .iv-spec { grid-column: 1 / span 7; grid-row: 1; }
.iv-spec figcaption { margin-top: 14px; font-size: 12px; line-height: 1.4; color: var(--c-gray); }
/* 01 · assinaturas */
.iv-spec--lockups { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 150px; gap: 12px; }
.iv-spec--lockups figcaption { grid-column: 1 / -1; margin-top: 2px; }
.iv-lock { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; border-radius: var(--radius-m); }
.iv-lock img { height: auto; }
.iv-lock--h { background: #000; } .iv-lock--h img:first-child { width: 17%; } .iv-lock--h img:last-child { width: 56%; }
.iv-lock--v { flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--c-hairline); } .iv-lock--v img:first-child { width: 30%; } .iv-lock--v img:last-child { width: 62%; }
.iv-lock--s { background: #0b0b0d; } .iv-lock--s img { width: 44%; }
/* 02 · linguagem */
.iv-spec--language { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iv-palette { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; list-style: none; }
.iv-palette li { aspect-ratio: .8; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; }
.iv-type { display: grid; align-content: center; gap: 6px; padding: 24px; border: 1px solid var(--c-hairline); border-radius: var(--radius-m); background: #fff; font-family: var(--font-display); color: var(--c-ink); }
.iv-type-1 { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; } .iv-type-2 { font-size: 17px; } .iv-type-3 { font-size: 12px; color: var(--c-gray); letter-spacing: .02em; }
.iv-pattern { min-height: 150px; border-radius: var(--radius-m); background: #0b0b0d url("../images/icones/simbolo.svg") 0 0 / 56px auto; background-blend-mode: normal; position: relative; overflow: hidden; }
.iv-pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(11,11,13,.86), rgba(11,11,13,.5)); }
.iv-spec--language figcaption { grid-column: 1 / -1; margin-top: 2px; }
/* 03 · diretriz: área de respiro */
.iv-spec--clear { display: grid; justify-items: start; }
.iv-clear { position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1.3 / 1; border: 1px dashed rgba(29,29,31,.4); border-radius: 12px; background: #fff; background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px); background-size: 20px 20px; }
.iv-clear img { width: 30%; height: auto; outline: 1px solid rgba(29,29,31,.5); outline-offset: 0; padding: 0; box-shadow: 0 0 0 28px rgba(0,217,89,.07), 0 0 0 28.5px rgba(0,150,60,.45); }
.iv-x { position: absolute; font: 600 11px/1 var(--font-text); color: var(--c-gray); }
.iv-x--t { top: 16%; left: 50%; transform: translateX(-50%); } .iv-x--b { bottom: 16%; left: 50%; transform: translateX(-50%); }
.iv-x--l { left: 22%; top: 50%; transform: translateY(-50%); } .iv-x--r { right: 22%; top: 50%; transform: translateY(-50%); }

/* ---------- Processo: quatro etapas lado a lado, com progresso ---------- */
.section.iv-process { background: var(--c-surface-dark); }
.iv-process-head { max-width: 760px; }
.iv-process-head p { margin-top: 16px; }
.iv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 80px; list-style: none; }
.iv-step { position: relative; padding-top: 28px; }
.iv-step-bar { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--c-hairline-dark); }
.iv-step-bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease-out); }
.iv-step.is-in .iv-step-bar::after { transform: scaleX(1); }
.iv-step-n { display: block; margin-bottom: 28px; font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); font-weight: 600; line-height: .9; letter-spacing: -.05em; color: rgba(255,255,255,.16); transition: color .8s var(--ease); }
.iv-step.is-in .iv-step-n { color: #fff; }
.iv-step-tag { margin-bottom: 10px; font-size: 12px; font-weight: 590; letter-spacing: .06em; text-transform: uppercase; }
.iv-step h3 { margin-bottom: 12px; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.015em; }
html:not(.sv-js) .iv-step-bar::after { transform: scaleX(1); } html:not(.sv-js) .iv-step-n { color: #fff; }

/* ---------- Entregáveis: componente compartilhado ---------- */
.section.iv-scope { background: var(--c-surface-alt); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1024px) {
  .iv-row-copy { grid-column: 1 / span 5; } .iv-spec { grid-column: 6 / -1; }
  .iv-row--flip .iv-row-copy { grid-column: 8 / -1; } .iv-row--flip .iv-spec { grid-column: 1 / span 7; }
  .iv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (max-width: 900px) {
  .hero.sv-hero.iv-hero { padding: 132px 0 64px; }
  .iv-stage-wrap { margin-top: 44px; }
  .iv-stage { grid-template-columns: 1fr 1fr; }
  .iv-web { grid-column: 1 / -1; grid-row: auto; } .iv-post { grid-column: 1 / -1; aspect-ratio: auto; min-height: 220px; }
  .iv-card { grid-column: 1 / 2; } .iv-tokens { grid-column: 2 / -1; }
  .iv-row, .iv-row--flip { display: block; padding: 40px 0; }
  .iv-spec, .iv-row--flip .iv-spec { margin-top: 28px; }
  .iv-sistema-head { margin-bottom: 48px; }
}
@media (max-width: 760px) {
  .hero.sv-hero.iv-hero h1 { font-size: clamp(30px, 9vw, 42px); line-height: 1.08; }
  .iv-bar { flex-direction: column; align-items: flex-start; }
  .iv-spec--lockups { grid-template-columns: 1fr 1fr; grid-template-rows: 130px 130px; }
  .iv-lock--h { grid-column: 1 / -1; }
  .iv-palette { grid-template-columns: repeat(4, 1fr); }
  .iv-spec--language { grid-template-columns: 1fr; }
  .iv-steps { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
}