/* AI Blueprint · página do serviço, dentro do site da BeardRocket (v2, refeita com a correção do Lucas de 25/10).
   Vale por cima do site.css: a navegação, o rodapé, os botões e o "como começar" são os do site. O resto segue o
   desenho das páginas do Atlor e do Talemis (as cenas em cartões-postais, a rolagem conduzindo cada uma) com a marca do
   serviço: as quatro placas, o grafite no texto e o ciano no lugar do laranja (a linha da IA, o que ela marca, o botão).
   Sem blocos pretos no meio da tela e sem anotação técnica. A página segue o tema do site. */

.pagina-aib {
  --ciano: #00B4FB; --ciano-escuro: #0874B0; --noite: #050608; --cartao: #F5F7F9;
  --bg: #F3F5F8; --surface: #FFFFFF; --fg: #141414; --muted: #5A6472; --line: #D6DCE3;
  --dot: rgba(20, 20, 20, .14); --hatch: rgba(20, 20, 20, .05);
  --acento: var(--ciano-escuro);   /* o ciano para texto: escuro no claro, puro no escuro */
  --ia: var(--ciano);
  --fala: "Newsreader", Georgia, "Times New Roman", serif;
}
:root[data-theme="dark"] .pagina-aib {
  --bg: #0A0C0F; --surface: #13171D; --fg: #F3F5F8; --muted: #8994A2; --line: #262C34;
  --dot: rgba(243, 245, 248, .16); --hatch: rgba(243, 245, 248, .05);
  --acento: var(--ciano);
}
:root[data-theme="dark"] .pagina-aib { color-scheme: dark; }
.pagina-aib ::selection { background: var(--ciano); color: #00151F; }
.pagina-aib :focus-visible { outline-color: var(--ciano); }
.pagina-aib .skip { background: var(--ciano); color: #00151F; }
.pagina-aib .nav-links a::after { background: var(--ciano); }
.pagina-aib .foot-contact a { border-bottom-color: var(--ciano); }
.pagina-aib .foot-word span { color: var(--ciano); }

/* tons próprios: o painel (uma faixa um pouco mais escura que o fundo) e o ciano (o bloco das revendas, como o laranja
   da home) */
.pagina-aib .tone-painel { --bg: #E6EBF0; --line: #CFD6DE; background-color: var(--bg); color: var(--fg); }
:root[data-theme="dark"] .pagina-aib .tone-painel { --bg: #11151A; --line: #262C34; }
.pagina-aib .tone-ciano { --bg: #00B4FB; --surface: #33C3FC; --fg: #00151F; --muted: rgba(0, 21, 31, .78); --line: rgba(0, 21, 31, .3);
  background-color: var(--bg); color: var(--fg); }

.pagina-aib .sec-title { color: var(--fg); }
.pagina-aib .sec-title em, .a-crenca-titulo em { font-style: normal; color: var(--acento); }
.pagina-aib .sec-intro { color: var(--muted); }

/* botões: o principal é ciano, com o texto escuro para ler */
.a-btn { background: var(--ciano); color: #00151F; }
.a-btn:hover { background: var(--fg); color: var(--bg); }
.a-btn-escuro { background: #050608; color: #F3F5F8; }
.a-btn-escuro:hover { background: #F3F5F8; color: #050608; }

/* ---------- 1. topo ---------- */
.a-hero { position: relative; z-index: 1; min-height: 92svh; display: grid; gap: 32px; align-content: end; padding-top: 130px; padding-bottom: clamp(48px, 9vh, 110px); overflow: hidden; }
.a-hero-tx { position: relative; z-index: 2; display: grid; justify-items: start; }
.a-hero-marca { margin: 0; line-height: 0; }
.a-hero-marca svg { height: clamp(42px, 4.6vw, 68px); width: auto; color: var(--fg); }
.a-hero-titulo { margin: clamp(22px, 3.6vh, 40px) 0 0; font-size: clamp(60px, 9.6vw, 172px); font-weight: 800; letter-spacing: -.055em; line-height: .9; margin-left: -.04em; white-space: nowrap; }
.a-hero-titulo .ponto { color: var(--ciano); }
.a-hero-lead { margin-top: clamp(30px, 5vh, 54px); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; font-weight: 300; letter-spacing: -.012em; max-width: 36ch; }
.a-hero-lead strong { font-weight: 700; }
.a-hero-cta { margin-top: clamp(26px, 4vh, 40px); }
/* as quatro placas, no traço do texto; a da área em ciano */
.a-hero-placas { position: relative; z-index: 1; justify-self: center; width: min(62vw, 340px); }
.a-placas { display: block; width: 100%; height: auto; color: var(--fg); overflow: visible; }
/* o caminho: a linha ciano sai de baixo do título e chega, em ângulo reto, na placa ciano */
.a-hero-caminho { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; display: none; }
.a-caminho { fill: none; stroke: var(--ciano); stroke-width: 4; stroke-linecap: round; stroke-linejoin: miter; }
.a-caminho-ponto { fill: var(--ciano); }
@media (min-width: 1000px) {
  .a-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 4vw; }
  .a-hero-placas { width: min(100%, 360px); align-self: center; margin-bottom: 4vh; }
  .a-hero-caminho { display: block; }
}

/* ---------- 2. crença ---------- */
.a-crenca { position: relative; z-index: 2; padding-block: clamp(96px, 16vh, 190px); display: grid; gap: clamp(28px, 5vh, 56px); overflow: hidden; }
.a-crenca-titulo { font-size: clamp(48px, 7vw, 120px); line-height: .92; letter-spacing: -.055em; font-weight: 800; max-width: 13ch; }
.a-crenca-texto { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.38; font-weight: 300; max-width: 38ch; letter-spacing: -.015em; color: var(--muted); }
@media (min-width: 900px) {
  .a-crenca { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
  .a-crenca-texto { padding-bottom: .4em; }
}

/* ---------- 3. o que muda ---------- */
.a-ganhos { list-style: none; margin: clamp(48px, 8vh, 88px) 0 0; padding: 0; display: grid; gap: 40px 3.2vw; }
@media (min-width: 900px) { .a-ganhos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a-ganhos li { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 30px; border-top: 2px solid var(--fg); }
.a-ganhos li::before { content: ""; position: absolute; left: 0; top: -2px; width: 3px; height: 16px; background: var(--fg); }
.a-ganho-rotulo { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--acento); }
.a-ganhos b { font-size: clamp(28px, 2.7vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; max-width: 14ch; }
.a-ganhos p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.4; font-weight: 300; color: var(--muted); max-width: 32ch; }

/* ---------- 4. do jeito certo: as cenas ---------- */
.a-jeito-head .sec-intro { font-family: var(--fala); font-style: italic; color: var(--fg); font-size: clamp(22px, 2.1vw, 32px); }
@media (min-width: 1100px) {
  .a-jeito-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0 4vw; }
  .a-jeito-head .sec-title { max-width: 11ch; }
  .a-jeito-head .sec-intro { margin: 0 0 .3em; justify-self: end; max-width: 22ch; text-align: right; }
}
/* a linha na margem, que se preenche com a rolagem (--p); os nós são quadrados, como as placas */
.a-linha-do-tempo { position: relative; padding-left: 34px; margin-top: clamp(40px, 7vh, 72px); }
.a-linha-do-tempo::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.a-linha-do-tempo::after { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--ciano); transform-origin: top; transform: scaleY(var(--p, 1)); }
@media (min-width: 900px) { .a-linha-do-tempo { padding-left: 64px; } .a-linha-do-tempo::before, .a-linha-do-tempo::after { left: 20px; } }
.a-etapa { position: relative; padding-top: clamp(36px, 6vh, 64px); }
.a-etapa-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.a-no { position: absolute; left: -29px; top: .5em; width: 12px; height: 12px; background: var(--bg); border: 2px solid var(--fg); z-index: 1; transition: background-color .3s, border-color .3s; }
@media (min-width: 900px) { .a-no { left: -51px; width: 14px; height: 14px; } }
.a-etapa.is-feita .a-no { background: var(--ciano); border-color: var(--ciano); }
.a-titulo-cena { margin: 0; font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--fg); }
.a-etapa-head h3 { font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; letter-spacing: -.01em; color: var(--muted); }
.a-etapa-corpo { display: grid; gap: 22px; margin-top: 22px; }
@media (min-width: 960px) { .a-etapa-corpo { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 3.2vw; align-items: start; } }
/* a cena é um cartão-postal claro, igual nos dois temas */
.a-quadro { margin: 0; aspect-ratio: 1400 / 930; background: var(--cartao); border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .07), 0 30px 60px -40px rgba(20, 20, 20, .5); }
.a-quadro svg { display: block; width: 100%; height: 100%; }
:root[data-theme="dark"] .a-quadro { box-shadow: 0 0 0 1px rgba(243, 245, 248, .1), 0 30px 60px -40px rgba(0, 0, 0, .8); }

.a-lado { display: grid; gap: 22px; align-content: start; }
/* o relato: o jeito antigo riscado e o de agora embaixo, em itálico, como na família */
.a-fala { margin: 0; display: grid; gap: 12px; }
.a-fala p { margin: 0; font-family: var(--fala); font-style: italic; font-weight: 400; font-size: clamp(22px, 1.85vw, 29px); line-height: 1.26; letter-spacing: -.005em; }
.a-fala s { display: block; color: var(--muted); text-decoration-thickness: 1.5px; text-decoration-color: var(--fg); margin-bottom: .3em; }
.a-fala cite { display: flex; align-items: center; gap: 10px; font-style: normal; font-size: 14px; color: var(--muted); }
.a-fala cite .av { width: 32px; height: 32px; }
.a-itens { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.a-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.a-item .ic { width: 28px; height: 28px; color: var(--fg); justify-self: center; }
.a-item b { display: block; font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -.012em; }
.a-item div span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.a-segue { margin: clamp(40px, 7vh, 72px) 0 0 34px; font-family: var(--fala); font-style: italic; font-size: clamp(22px, 2vw, 30px); max-width: 36ch; }
@media (min-width: 900px) { .a-segue { margin-left: 64px; } }

/* ---------- 5. do primeiro olhar ao dia a dia: as etapas numa linha; o quadrado ciano anda com a rolagem (--p).
   A linha passa da última etapa e vai até a borda: o acompanhamento não termina ---------- */
.a-caminho-etapas { position: relative; margin-top: clamp(56px, 9vh, 96px); --p: 0; }
.a-caminho-etapas::before { content: ""; position: absolute; background: var(--fg); border-radius: 2px; }
.a-caminho-marca { position: absolute; width: 22px; height: 22px; border-radius: 3px; background: var(--ciano); z-index: 2; }
.a-etapas-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.a-etapas-lista li { position: relative; display: grid; gap: 10px; align-content: start; }
.a-etapas-lista li::before { content: ""; position: absolute; background: var(--fg); border-radius: 2px; }
.a-etapas-lista svg { width: 30px; height: 30px; color: var(--fg); }
.a-etapas-lista b { font-size: clamp(22px, 1.7vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.a-etapas-lista p { font-size: 15.5px; line-height: 1.42; color: var(--muted); max-width: 26ch; }
/* no celular, a linha é vertical, na margem */
.a-caminho-etapas { padding-left: 46px; }
.a-caminho-etapas::before { left: 11px; top: 0; bottom: -40px; width: 4px; }
.a-caminho-marca { left: 2px; top: calc(var(--p) * (100% - 22px)); }
.a-etapas-lista { gap: 30px; }
.a-etapas-lista li::before { left: -40px; top: 6px; width: 18px; height: 3px; }
@media (min-width: 1100px) {
  .a-caminho-etapas { padding-left: 0; padding-top: 64px; }
  .a-caminho-etapas::before { left: 0; right: calc(var(--gr) * -1); top: 18px; bottom: auto; width: auto; height: 4px; }
  .a-caminho-marca { top: 9px; left: calc(var(--p) * (100% / 6 * 5)); }
  .a-etapas-lista { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 1.8vw; }
  .a-etapas-lista li::before { left: 0; top: -56px; width: 3px; height: 24px; }
}
.a-plano-so { margin-top: clamp(40px, 7vh, 72px); font-family: var(--fala); font-style: italic; font-size: clamp(22px, 2vw, 30px); }

/* ---------- 6. a decisão é sua ---------- */
.a-decide { display: grid; gap: clamp(32px, 6vh, 64px); align-items: center; }
@media (min-width: 960px) { .a-decide { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 6vw; } }
.a-decide-placas { justify-self: center; width: min(46vw, 300px); }
.a-decide-placas svg { display: block; width: 100%; height: auto; color: var(--fg); }
.a-garantias { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.a-garantias li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.a-garantias svg { width: 26px; height: 26px; color: var(--fg); }

/* ---------- 7. para quem ---------- */
.a-perfis { list-style: none; margin: clamp(40px, 7vh, 72px) 0 0; padding: 0; display: grid; gap: 0 3.2vw; }
@media (min-width: 800px) { .a-perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-perfis li { padding: 22px 0; border-top: 1px solid var(--line); font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; max-width: 22ch; }

/* ---------- 8. como começar: o laranja dos números vira ciano ---------- */
.pagina-aib .steps .n { color: var(--acento); }
.pagina-aib .steps .rule-h::after { background: var(--ciano); }
.pagina-aib .canal-revenda { overflow: hidden; }
.pagina-aib .canal-revenda h3, .pagina-aib .canal-revenda p, .pagina-aib .canal-revenda .btn { position: relative; z-index: 1; }
.canal-placas { position: absolute; right: 6%; bottom: -12%; width: min(36%, 240px); height: auto; color: #00151F; opacity: .16; pointer-events: none; z-index: 0; --ia: #00151F; }

/* ---------- rodapé ---------- */
.a-endosso { height: 30px; width: auto; color: var(--fg); }
@media (max-width: 899px) { .pagina-aib .foot-word { font-size: calc((100vw - var(--gl) - var(--gr)) / 5.9); } }
.pagina-aib .foot-word { font-size: clamp(44px, 12vw, 230px); }