/* Só o Início novo. Cores e proporções seguem a conversa, sem alcançar as
   telas ainda não migradas nem o chat durante uma chamada. */
.inicio {
  --inicio-bg: var(--ui-bg,light-dark(#f4f6f6,#111618));
  --inicio-superficie: var(--ui-surface,light-dark(#fff,#1a2124));
  --inicio-borda: var(--ui-border,light-dark(#d0d9d9,#33403f));
  --inicio-texto: var(--ui-text,light-dark(#2b2f36,#eef3f3));
  --inicio-suave: var(--ui-muted,light-dark(#56656a,#a9b8b9));
  --inicio-marca: var(--ui-brand,light-dark(#0b6f71,#5cc8c6));
  --inicio-marca-fundo: var(--ui-soft,light-dark(#e0f0ef,#17302f));
  --inicio-botao: var(--ui-button,light-dark(#0b6f71,#0e7c7e));
  width: 100%; max-width: 1080px; margin-inline: auto; min-width: 0;
  display: grid; gap: 28px; padding: 30px 20px calc(var(--nav-space,100px) + 36px);
  font-family: "Segoe UI",system-ui,sans-serif; color: var(--inicio-texto);
}
.inicio h1,.inicio h2,.inicio h3,.inicio p { margin: 0; overflow-wrap: anywhere; }
.inicio-btn,.inicio-fato,.inicio-text-link { text-decoration: none; }
.inicio-intro { display: grid; gap: 9px; }
.inicio-intro h1 { font-size: clamp(1.6875rem,4vw,2.125rem); line-height: 1.18; letter-spacing: -.035em; font-weight: 650; }
.inicio-intro > p:last-child { color: var(--inicio-suave); font-size: 1rem; line-height: 1.5; }
.inicio .inicio-eyebrow { color: var(--inicio-suave); font-size: .6875rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.inicio-grid { display: grid; gap: 16px; grid-template-columns: minmax(0,1fr); }
.inicio-card { border: 1px solid var(--inicio-borda); border-radius: 22px; padding: 22px; background: var(--inicio-superficie); display: grid; gap: 16px; min-width: 0; }
.inicio-card > p { color: var(--inicio-suave); font-size: .875rem; line-height: 1.5; }
.inicio-hero { position: relative; isolation: isolate; overflow: hidden; padding: 26px; gap: 22px;
  background: linear-gradient(145deg,var(--inicio-marca-fundo),var(--inicio-superficie));
  border-color: color-mix(in oklch,var(--inicio-marca) 26%,var(--inicio-borda)); }
.inicio-hero::after { content: ""; position: absolute; width: 230px; height: 230px; top: -135px; right: -115px;
  border: 32px solid color-mix(in oklch,var(--inicio-marca) 9%,transparent); border-radius: 50%; z-index: -1; }
.inicio-hero-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.inicio-hero h2 { font-size: 1.625rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.inicio-wave { flex: none; display: flex; align-items: center; justify-content: center; gap: 4px; width: 52px; height: 52px;
  border-radius: 18px; background: color-mix(in oklch,var(--inicio-marca) 12%,var(--inicio-superficie)); }
.inicio-wave > span { display: block; width: 3px; border-radius: 4px; background: var(--inicio-marca); height: var(--inicio-bar); }
.inicio-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px;
  padding: 12px 18px; border: 1px solid var(--inicio-borda); border-radius: 14px; background: var(--inicio-superficie);
  color: var(--inicio-texto); font-size: .875rem; line-height: 1.5; font-weight: 600; text-align: center; }
.inicio-btn--primary { background: var(--inicio-botao); color: #fff; border-color: var(--inicio-botao); }
.inicio-btn .icon { width: 22px; height: 22px; flex: none; }
.inicio-btn > span { min-width: 0; }
.inicio-section { display: grid; gap: 14px; min-width: 0; }
.inicio-fatos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.inicio-fato { display: grid; align-content: start; gap: 5px; padding: 18px; border: 1px solid var(--inicio-borda);
  border-radius: 18px; background: var(--inicio-superficie); min-width: 0; text-align: left; }
.inicio-fato > * { min-width: 0; max-width: 100%; }
.inicio-fato > span,.inicio-fato > small { font-size: .75rem; line-height: 1.5; color: var(--inicio-suave); overflow-wrap: anywhere; }
.inicio-fato > strong { font-size: 1.5625rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 650; font-variant-numeric: tabular-nums; }
.inicio-fato .level-chip { min-height: 44px; min-width: 0; width: 100%; max-width: 100%; gap: 6px;
  margin-top: 2px; padding: 4px 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--inicio-suave); font-size: .75rem; line-height: 1.5; white-space: normal; justify-content: start; text-align: left; }
.inicio-fato .level-chip > span:not(.level-meter):not(.level-chip__caret) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.inicio-fato .level-chip__caret { flex: none; }
.inicio-fato .level-meter { display: none; }
.inicio-foco-topo { display: flex; align-items: center; gap: 14px; }
.inicio-foco-topo > div { min-width: 0; }
.inicio-foco h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.inicio-marca { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px;
  color: var(--inicio-marca); background: var(--inicio-marca-fundo); }
.inicio-text-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px;
  color: var(--inicio-marca); font-size: .8125rem; line-height: 1.5; padding: 0; border: 0; background: transparent; text-align: left; }
.inicio-text-link .icon { width: 20px; height: 20px; flex: none; }
.inicio-section-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.inicio-section-topo h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.inicio-passo-titulo { display: flex; align-items: center; gap: 12px; }
.inicio-passo-titulo > .icon { flex: none; width: 22px; height: 22px; color: var(--inicio-marca); }
.inicio-passo h3 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
.inicio-aviso { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--inicio-borda); border-radius: 18px;
  background: var(--inicio-superficie); font-size: .875rem; line-height: 1.5; }
.inicio-aviso .inicio-btn { justify-self: start; }
.inicio :focus-visible { outline: 3px solid var(--inicio-marca); outline-offset: 4px; }
@media(min-width:640px) {
  .inicio { padding-inline: 36px; }
  .inicio-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inicio-hero { padding: 32px; }
  .inicio-hero h2 { font-size: 1.875rem; }
}
@media(max-width:380px) {
  .inicio { padding: 24px 16px calc(var(--nav-space,100px) + 32px); }
  .inicio-card { padding: 19px; border-radius: 20px; }
  .inicio-hero { padding: 23px; }
  .inicio-btn { padding-inline: 15px; }
}
@media(min-width:600px) and (max-width:1023px) and (max-height:500px) {
  /* Paisagem: o convite e a ação dividem a primeira dobra. A descrição
     permanece logo depois, sem reduzir a fonte escolhida pela pessoa. */
  .inicio { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; padding: 20px 24px calc(var(--nav-space,100px) + 32px); }
  .inicio-intro { align-content: start; }
  .inicio-principal { grid-template-columns: minmax(0,1fr); }
  .inicio-hero { padding: 18px; gap: 12px; }
  .inicio-hero h2 { font-size: 1.375rem; }
  .inicio-hero > .inicio-btn { order: 1; }
  .inicio-hero > p { order: 2; }
  .inicio > .inicio-section,.inicio > .inicio-aviso { grid-column: 1 / -1; }
}
@media(min-width:1024px) {
  .inicio { padding-bottom: 36px; }
}