/* ==========================================================================
   AMM Compra Fácil — Landing pages (Ente Público / Fornecedor)
   Mobile-first. Breakpoints: 640px · 900px · 1200px
   ========================================================================== */

:root {
  /* Cores */
  --navy-950: #032a3a;
  --navy-900: #002230;
  --navy-800: #003246;
  --navy-700: #00364d;
  --navy-600: #00425c;
  --blue-600: #005071;
  --blue-500: #397a95;
  --blue-400: #72a4b9;
  --blue-300: #abcedd;
  --blue-100: #e5f7ff;
  --blue-50: #e8f5fc;
  --sky: #009ed6;
  --link: #3c7ec5;
  --red: #e7000b;
  --red-700: #74170f;
  --red-500: #c51617;
  --pink-100: #ffe5e7;
  --gray-100: #f2f2f2;
  --gray-200: #ededed;
  --gray-500: #737373;
  --muted: #58788b;
  --green-300: #8bd7b3;
  --green-900: #004c39;

  --grad-red: linear-gradient(90deg, var(--red-700) 0%, var(--red-500) 100%);
  --grad-blue: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-400) 100%);

  /* Tipografia */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2rem, 1.35rem + 2.4vw, 3.052rem);      /* 48.83px */
  --fs-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.441rem);   /* 39.06px */
  --fs-h3: 1.25rem;                                      /* 20px */
  --fs-body: 1rem;
  --fs-small: 0.8rem;                                    /* 12.8px */

  /* Layout */
  --gutter: clamp(16px, 5vw, 120px);
  --container: 1680px;
  --container-md: 1396px;
  --container-sm: 1112px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 28px rgba(20, 88, 117, 0.05);
  --shadow-float: 0 4px 4px rgba(0, 0, 0, 0.25);
  --section-y: clamp(48px, 6vw, 72px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--navy-600);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--md { max-width: calc(var(--container-md) + 2 * var(--gutter)); }
.container--sm { max-width: calc(var(--container-sm) + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }

/* Padrão pontilhado de fundo (marca) */
.pattern { position: relative; isolation: isolate; }
.pattern::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/pattern.webp) var(--pattern-pos, left top) / var(--pattern-size, max(1920px, 100%) auto) no-repeat;
  opacity: var(--pattern-opacity, 0.03);
}

/* Símbolo da marca (carrinho) — usado como marca d'água via máscara */
.simbolo {
  position: absolute; pointer-events: none; aspect-ratio: 1097 / 680;
  background: var(--simbolo-color, currentColor);
  -webkit-mask: url(../img/simbolo.svg) center / contain no-repeat;
          mask: url(../img/simbolo.svg) center / contain no-repeat;
}

/* ---------- Tipografia ---------- */
.h1 { font-size: var(--fs-h1); line-height: 1.25; font-weight: 700; color: var(--navy-800); letter-spacing: -0.01em; }
.h2 { font-size: var(--fs-h2); line-height: 1.5; font-weight: 700; color: var(--navy-800); }
.h2--tight { line-height: 1.3; }
.h3 { font-size: var(--fs-h3); line-height: 1.5; font-weight: 700; color: var(--navy-800); }
.lead { font-size: var(--fs-body); line-height: 1.5; color: var(--blue-600); }
.text-white { color: #fff !important; }
.center { text-align: center; }

/* Rótulo de seção (pill) */
.label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 24px; border-radius: 30px; background: var(--blue-100);
  color: var(--blue-500); font-size: var(--fs-small); font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.label::before {
  content: ""; width: 26px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url(../img/simbolo.svg) center / contain no-repeat;
          mask: url(../img/simbolo.svg) center / contain no-repeat;
}
.title-block { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.title-block.center { align-items: center; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 67px; padding: 16px 32px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.5; cursor: pointer;
  transition: filter .2s, transform .2s, background-color .2s, box-shadow .2s;
}
.btn .icon { width: 16px; height: 16px; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--primary { background: var(--grad-red); color: #fff; box-shadow: 0 6px 16px rgba(116, 23, 15, .18); }
.btn--light { background: var(--blue-100); color: var(--blue-600); border-color: rgba(0, 50, 70, .6); }
.btn--white { background: #fff; color: var(--blue-600); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn--sm { min-height: 35px; padding: 8px 16px; }
.btn--md { min-height: 51px; padding: 16px 32px; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.header { position: absolute; inset: 0 0 auto; z-index: 50; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 94px; padding-block: 16px; }
.header__logo img { width: clamp(120px, 12vw, 172px); }
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 32px); }
.nav__link { display: block; padding: 8px; color: var(--navy-800); font-size: 1rem; white-space: nowrap; border-radius: 6px; transition: color .2s, background-color .2s; }
.nav__link:hover { color: var(--red); }
.header__cta { display: none; }
.menu-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: #fff; color: var(--navy-800); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 50, 70, .12);
}
.menu-toggle .icon-close { display: none; }
.header.is-open .menu-toggle .icon-open { display: none; }
.header.is-open .menu-toggle .icon-close { display: block; }

/* Menu mobile */
@media (max-width: 1199.98px) {
  .header.is-open .nav {
    display: block; position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 50, 70, .18);
  }
  .header.is-open .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .header.is-open .nav__link { padding: 14px 12px; border-bottom: 1px solid var(--gray-200); }
  .header.is-open .nav__item:last-child .nav__link { border-bottom: 0; }
  .nav__cta { margin-top: 12px; }
}
@media (min-width: 1200px) {
  .menu-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 40px; }
  .nav__cta { min-width: 208px; }
}
@media (max-width: 1199.98px) { .nav__cta { display: flex; width: 100%; } }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--blue-100) 0%, var(--blue-100) 41%, rgba(171, 206, 221, .5) 70%, var(--blue-300) 100%);
  padding-top: calc(94px + clamp(24px, 4vw, 48px));
  padding-bottom: clamp(48px, 5vw, 48px);
}
.hero::before { /* pontilhado */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .03;
  background: url(../img/pattern.webp) right -900px top -200px / 2600px auto no-repeat;
}
.hero__grid { display: grid; gap: 48px; align-items: center; }
.hero__content { display: flex; flex-direction: column; gap: 32px; max-width: 640px; }
.hero__text { display: flex; flex-direction: column; gap: 16px; }
.hero__ctas { display: flex; flex-direction: column; gap: 13px; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.hero__buttons .btn { flex: 1 1 220px; }
.hero__note { display: flex; gap: 8px; align-items: flex-start; font-size: .875rem; font-weight: 700; color: var(--blue-600); }
.hero__note .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--red); stroke-width: 3; }

.diferenciais { display: flex; flex-wrap: wrap; gap: 16px 22px; }
.diferencial { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--navy-800); }
.diferencial .icon { width: 40px; height: 40px; color: var(--red); stroke-width: 1.8; }

/* Composição visual do hero: escala proporcionalmente via container units */
.hero-visual { container-type: inline-size; width: 100%; max-width: 825px; margin-inline: auto; }
.hero-visual__stage { --u: calc(100cqw / 825); position: relative; height: calc(708 * var(--u)); }
.hero-visual__simbolo { --simbolo-color: var(--blue-600); left: calc(-78 * var(--u)); top: calc(72 * var(--u)); width: calc(1097 * var(--u)); opacity: .05; }
.hero-visual__img { position: absolute; left: calc(123 * var(--u)); top: 0; width: calc(576 * var(--u)); }

.metric {
  position: absolute; display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(14 * var(--u)); background: #fff; border-radius: calc(12 * var(--u));
  box-shadow: var(--shadow-float); color: #07354b;
}
.metric__icon { display: grid; place-items: center; width: calc(45 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: calc(10 * var(--u)); background: var(--blue-50); color: var(--sky); }
.metric__icon .icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); stroke-width: 1.6; }
.metric__body { display: flex; flex-direction: column; gap: calc(3 * var(--u)); white-space: nowrap; }
.metric__title { font-size: calc(12.8 * var(--u)); font-weight: 700; line-height: 1.5; }
.metric__row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.metric__value { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.5; }
.metric__chip { padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 100px; background: var(--green-300); color: var(--green-900); font-size: calc(9 * var(--u)); line-height: 1.5; }
.metric__desc { font-size: calc(10 * var(--u)); color: var(--muted); line-height: 1.5; }
.metric--1 { left: 0; top: calc(188 * var(--u)); min-width: calc(208 * var(--u)); }
.metric--2 { left: calc(572 * var(--u)); top: calc(460 * var(--u)); min-width: calc(253 * var(--u)); }
.metric--3 { left: calc(59 * var(--u)); top: calc(545 * var(--u)); min-width: calc(252 * var(--u)); }

@media (min-width: 900px) {
  .hero__ctas { gap: 13px; }
}
@media (min-width: 1200px) {
  .hero { padding-top: 94px; min-height: 802px; display: flex; align-items: center; }
  .hero > .container { width: 100%; }
  .hero__grid { grid-template-columns: minmax(0, 599fr) minmax(0, 825fr); gap: clamp(48px, 10vw, 256px); }
  .hero-visual { margin-right: 0; margin-top: 46px; margin-bottom: 0; }
}

/* ==========================================================================
   Split (imagem + texto)
   ========================================================================== */
.split { display: grid; gap: 40px; align-items: center; }
.split__media img { width: 100%; border-radius: var(--radius-md); }
.split__content { display: flex; flex-direction: column; gap: 24px; }
.split__content p + p { margin-top: 1.5em; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 770fr) minmax(0, 586fr); gap: 40px; }
  .split--wide { grid-template-columns: minmax(0, 770fr) minmax(0, 870fr); }
  .split--reverse { grid-template-columns: minmax(0, 605fr) minmax(0, 751fr); }
}

/* Lista de destaques com ícone */
.feats { display: grid; gap: 8px; }
.feat { display: flex; align-items: center; gap: 16px; font-weight: 700; color: var(--navy-800); }
.badge-icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 100px; background: var(--pink-100); color: var(--red); }
.badge-icon .icon { width: 40px; height: 40px; stroke-width: 1.6; }
.badge-icon--sm { width: 61px; height: 61px; }
.badge-icon--sm .icon { width: 29px; height: 29px; stroke-width: 2; }
.badge-icon--white { background: #fff; color: var(--navy-800); }
@media (min-width: 640px) { .feats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }

/* ==========================================================================
   Públicos (Ente Público: duas soluções)
   ========================================================================== */
.audiences-section { background: linear-gradient(180deg, rgba(229, 247, 255, 0) 0%, rgba(229, 247, 255, .6) 45%, rgba(5, 83, 116, .8) 75%, var(--blue-600) 100%); }
.audiences { display: grid; gap: clamp(140px, 14vw, 160px) 24px; margin-top: clamp(120px, 12vw, 152px); }
.audience {
  position: relative; display: grid; border-radius: var(--radius-md); background: var(--grad-blue); color: #fff;
}
.audience__photo { position: relative; margin-top: -119px; height: clamp(320px, 60vw, 514px); }
.audience__photo img { position: absolute; inset: auto 0 0 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none; border-bottom-left-radius: var(--radius-md); }
.audience__body { display: flex; flex-direction: column; gap: 24px; padding: 24px; }
.audience__title { display: flex; align-items: center; gap: 16px; }
.check-list { display: grid; gap: 8px; }
.check-list li { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; }
.check-dot { display: grid; place-items: center; flex: none; width: 15px; height: 15px; margin-top: 4px; border-radius: 20px; background: #fff; color: var(--red); }
.check-dot .icon { width: 10px; height: 10px; stroke-width: 3.5; }
.audience .btn { align-self: flex-start; min-height: 51px; }
@media (min-width: 640px) {
  .audience { grid-template-columns: minmax(0, 402fr) minmax(0, 426fr); align-items: end; }
  .audience__photo { height: auto; align-self: stretch; margin-top: -119px; }
  .audience__photo img { left: 0; transform: none; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .audience__body { padding: 24px 32px 24px 24px; align-self: center; }
}
@media (min-width: 1200px) { .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Seção escura (passos / etapas)
   ========================================================================== */
.dark { background: var(--blue-600); color: #fff; overflow: hidden; }
.dark.pattern { --pattern-opacity: .04; }
.dark .label { background: var(--blue-100); }

.steps-list { display: grid; gap: 11px; }
.step {
  display: flex; align-items: center; gap: 16px; padding: 24px 16px; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-card); color: var(--navy-600);
}
.step__body { display: flex; flex-direction: column; gap: 8px; }
.step__body p { font-size: 1rem; }
.step--light { background: var(--blue-100); }

/* Mock "Documentos de habilitação" — escala via container units */
.docs-mock { container-type: inline-size; width: 100%; }
.docs-mock__stage {
  --u: calc(100cqw / 770); position: relative; height: calc(490 * var(--u)); overflow: hidden;
  border-radius: calc(18 * var(--u)); background: var(--grad-blue);
}
.docs-mock__simbolo { --simbolo-color: #fff; left: calc(-218 * var(--u)); top: calc(-51 * var(--u)); width: calc(956 * var(--u)); opacity: .08; }
.docs-card {
  position: absolute; left: calc(77 * var(--u)); top: calc(54 * var(--u)); width: calc(616 * var(--u));
  display: flex; flex-direction: column; gap: calc(22 * var(--u));
  padding: calc(40 * var(--u)) calc(32 * var(--u)); background: #fff; border-radius: calc(24 * var(--u));
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25); color: var(--navy-800);
}
.docs-card__head { display: flex; justify-content: space-between; align-items: center; }
.docs-card__title { font-size: calc(20 * var(--u)); font-weight: 700; line-height: 1.5; }
.docs-card__link { font-size: calc(16 * var(--u)); font-weight: 700; color: var(--link); white-space: nowrap; }
.docs-card__list { border: 1px solid rgba(0, 50, 70, .25); border-radius: calc(24 * var(--u)); }
.docs-card__row { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)); }
.docs-card__row + .docs-card__row { border-top: 1px solid rgba(0, 50, 70, .25); }
.docs-card__row .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: var(--gray-500); stroke-width: 1.5; }
.docs-card__name { flex: 1; font-size: calc(16 * var(--u)); font-weight: 700; color: var(--gray-500); white-space: nowrap; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); width: calc(135 * var(--u)); padding: calc(2 * var(--u)) calc(12 * var(--u)); border-radius: 100px; font-size: calc(16 * var(--u)); line-height: 1.5; white-space: nowrap; }
.pill .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: currentColor; }
.pill--ok { background: var(--green-300); color: var(--green-900); }
.pill--review { background: #c0deff; color: #28588c; }
.pill--pending { background: var(--gray-200); color: var(--gray-500); }

.flow { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 900px) { .flow { grid-template-columns: minmax(0, 770fr) minmax(0, 586fr); gap: 40px; align-items: center; } }

/* Passos numerados (Fornecedor) */
.numbered { display: grid; gap: 24px; margin-top: 40px; }
.numbered__item {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px;
  padding: 80px 16px 24px; border-radius: var(--radius); color: var(--navy-600);
  background: linear-gradient(160deg, var(--blue-300) 0%, var(--blue-100) 35%); box-shadow: var(--shadow-card);
}
.numbered__item .simbolo { --simbolo-color: var(--blue-300); left: -60px; top: 0; width: 470px; opacity: .25; }
.numbered__num { position: absolute; top: 6px; right: 16px; font-size: 96px; line-height: 1; font-weight: 700; color: var(--blue-300); opacity: .6; }
.numbered__item .badge-icon, .numbered__item .step__body { position: relative; }
@media (min-width: 640px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .numbered { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .numbered { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ==========================================================================
   IA (Ente Público)
   ========================================================================== */
.ia { position: relative; background: var(--blue-600); color: #fff; overflow: hidden; }
.ia__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; padding-block: var(--section-y) 0; max-width: 544px; }
.ia__content .btn { align-self: flex-start; }
.ia__media { container-type: inline-size; position: relative; margin-top: 32px; }
.ia__stage { --u: calc(100cqw / 1532); position: relative; height: calc(859 * var(--u)); }
.ia__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat {
  position: absolute; left: calc(395 * var(--u)); top: calc(207 * var(--u)); width: calc(560 * var(--u));
  display: flex; flex-direction: column; gap: calc(14 * var(--u));
  padding: calc(18 * var(--u)); background: #fff; border: 2px solid var(--blue-100); border-radius: calc(24 * var(--u));
  color: var(--navy-800); box-shadow: 0 20px 40px rgba(0, 34, 48, .25);
}
.chat__head { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.chat__spark { display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; border-radius: calc(12 * var(--u)); background: var(--blue-50); color: #51a2ff; }
.chat__spark .icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); stroke-width: 1.6; }
.chat__spark--sm { width: calc(34 * var(--u)); height: calc(34 * var(--u)); background: transparent; }
.chat__spark--sm .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.chat__title { font-size: calc(26 * var(--u)); font-weight: 700; line-height: 1.1; }
.chat__msg { display: flex; align-items: center; gap: calc(12 * var(--u)); max-width: calc(306 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.4; }
.chat__msg--user { align-self: flex-end; background: var(--blue-100); }
.chat__msg--user .avatar { display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; border-radius: 50%; background: #3c7ec5; color: #fff; }
.chat__msg--user .avatar .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.chat__reply { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); }
.chat__reply .chat__msg { background: #f4fbff; border: 1px solid var(--blue-100); }
.chat__form { display: flex; gap: calc(9 * var(--u)); }
.chat__input { flex: 1; min-width: 0; display: flex; align-items: center; padding: calc(12 * var(--u)) calc(16 * var(--u)); border: 1px solid rgba(0, 50, 70, .6); border-radius: calc(9 * var(--u)); font-size: calc(14 * var(--u)); color: var(--gray-500); white-space: nowrap; overflow: hidden; }
.chat__btn { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--navy-800); color: #fff; font-size: calc(15.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.chat__btn .icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
@media (min-width: 1200px) {
  .ia { min-height: 859px; }
  .ia__content { padding-block: 186px 120px; }
  .ia__media { position: absolute; top: 0; right: 0; bottom: 0; margin: 0; width: calc(1532 / 1920 * 100%); }
  .ia__stage { height: 100%; }
}

/* ==========================================================================
   Planos (Ente Público)
   ========================================================================== */
.plans-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--blue-100) 30%, var(--blue-100) 75%, var(--gray-100) 100%); }
.plans-layout { display: grid; gap: 40px; align-items: center; }
.plans { display: grid; gap: 24px; }
.plan {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 32px;
  padding: 24px clamp(24px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--navy-700); color: #fff;
}
.plan .simbolo { --simbolo-color: var(--blue-400); z-index: -1; left: -240px; top: 13px; width: 672px; opacity: .15; }
.plan__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.plan .check-list li { font-weight: 700; }
.plan .btn { margin-top: auto; min-height: 51px; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .plans-layout { grid-template-columns: minmax(0, 518fr) minmax(0, 1112fr); gap: 50px; } }

/* ==========================================================================
   Benefícios (Ente Público)
   ========================================================================== */
.benefits-section { background: linear-gradient(180deg, var(--gray-100) 88%, #fff 100%); }
.benefits-head { display: grid; gap: 24px; align-items: center; }
.benefits-head .btn { justify-self: start; }
.benefits-layout { display: grid; gap: 24px; margin-top: 56px; }
.benefits { display: grid; gap: 15px; }
.benefit { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 27px 13px 24px; border-radius: var(--radius); background: #fff; text-align: center; }
.benefit p { font-size: .875rem; color: var(--navy-600); }
.benefit .badge-icon { margin-bottom: 0; }
.benefits-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .benefits-head { grid-template-columns: auto minmax(0, 593px) minmax(0, 1fr); gap: 80px; }
  .nowrap-lg { white-space: nowrap; }
  .benefits-head .btn { justify-self: end; min-width: 266px; }
  .benefits-layout { grid-template-columns: minmax(0, 871fr) minmax(0, 770fr); gap: 39px; align-items: stretch; }
}

/* ==========================================================================
   Segurança (Fornecedor)
   ========================================================================== */
.security { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--blue-100) 30%, var(--blue-100) 75%, var(--gray-100) 100%); overflow: hidden; }
.security__grid { display: grid; gap: 48px; align-items: center; }
.records-wrap { position: relative; }
.records-wrap .simbolo { --simbolo-color: var(--blue-600); left: -40%; top: -10%; width: 160%; opacity: .06; }
.records {
  position: relative; display: flex; flex-direction: column; gap: 30px; padding: 30px; max-width: 596px;
  background: #fff; border: 1.6px solid #ddecf4; border-radius: 20px; box-shadow: 0 13.5px 41px rgba(44, 149, 192, .07);
}
.records__head { display: flex; gap: 24px; align-items: flex-start; }
.records__head .badge-icon { width: 59px; height: 54px; border-radius: 75px; }
.records__head .badge-icon .icon { width: 32px; height: 32px; }
.records__title { font-size: .9375rem; font-weight: 700; color: var(--navy-800); line-height: 1.5; }
.records__desc { margin-top: 6px; font-size: .75rem; color: #4d6c82; }
.records__list { display: grid; gap: 9.6px; }
.records__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 10px; border: 1.6px solid #ddecf4; border-radius: 12.8px; background: #fbfdfe; font-size: .75rem; font-weight: 700; color: #404040; }
.records__item .icon { width: 20px; height: 20px; color: #00a668; stroke-width: 2.5; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.control { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; color: var(--navy-800); }
.control .icon { width: 40px; height: 40px; color: var(--red); stroke-width: 1.8; }
@media (min-width: 640px) { .controls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .security__grid { grid-template-columns: minmax(0, 596fr) minmax(0, 687fr); gap: 113px; } }

/* "Sua empresa mais perto das oportunidades" (Fornecedor) */
.near { background: linear-gradient(180deg, rgba(229, 247, 255, 0) 0%, rgba(229, 247, 255, .6) 20%, rgba(5, 83, 116, .8) 65%, var(--blue-600) 100%); }
.near__grid { display: grid; gap: 32px; margin-top: 56px; align-items: center; }
.supplier-card { position: relative; max-width: 604px; justify-self: center; width: 100%; }
.supplier-card img { width: 100%; }
.supplier-card__ctas { position: absolute; left: 4%; right: 4%; bottom: 3.5%; display: grid; gap: 16px; }
@media (max-width: 479.98px) { .supplier-card__ctas .btn { min-height: 52px; } }
@media (min-width: 1200px) { .near__grid { grid-template-columns: minmax(0, 752fr) minmax(0, 604fr); gap: 40px; } }

/* Oportunidade (Fornecedor) */
.opportunity { background: linear-gradient(180deg, var(--gray-100) 88%, #fff 100%); }
.opportunity .split__content .btn { align-self: flex-start; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-section { background: #fff; }
.faq-section.pattern { --pattern-opacity: .02; }
.faq { display: grid; gap: 24px; margin-top: 24px; }
.faq__item { background: #fff; border-bottom: 1px solid var(--gray-200); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 24px 14px; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 700; line-height: 1.5; color: var(--navy-800);
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue-400); }
.faq__item summary .icon { width: 28px; height: 28px; stroke-width: 2.5; transition: transform .25s; color: currentColor; }
.faq__item[open] summary { color: var(--red); padding-bottom: 0; }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 24px 14px 24px; color: var(--navy-600); }

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-final { padding-block: clamp(48px, 6vw, 110px) clamp(64px, 6vw, 110px); }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 32px; align-items: center;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 70px); border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--blue-500) 0%, var(--navy-600) 100%); color: #fff;
}
.cta-card .simbolo { --simbolo-color: #000; z-index: -1; right: -12%; top: -20%; width: 70%; opacity: .12; }
.cta-card__msg { display: flex; flex-direction: column; gap: 10px; }
.cta-card__msg p { font-size: .875rem; }
.cta-card__actions { display: flex; flex-direction: column; gap: 11px; }
.cta-card__login { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-small); }
.cta-card__login a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.cta-card__login a .icon { width: 16px; height: 16px; }
.cta-card__login a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .cta-card { grid-template-columns: minmax(0, 1fr) minmax(260px, 345px); gap: 48px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--navy-950); color: #fff; padding: 80px 0 22px; }
.footer__cols { display: grid; gap: 40px; }
.footer__brand img { width: 222px; }
.footer__title { padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid #1c4353; color: #51a2ff; font-weight: 700; font-size: 1rem; }
.footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 40px; }
.footer__nav a, .footer__contact a { transition: color .2s; }
.footer__nav a:hover, .footer__contact a:hover { color: #51a2ff; }
.footer__contact { display: grid; gap: 8px; white-space: nowrap; }
.footer address { font-style: normal; }
.footer__divider { height: 1px; margin: 32px 0; background: #1c4353; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: var(--fs-small); }
.footer__legal nav { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.footer__legal nav span { width: 1px; height: 14px; background: currentColor; }
@media (min-width: 640px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .footer__cols { grid-template-columns: 222px 276px auto minmax(0, 1fr) minmax(0, 1.4fr); gap: 60px; }
}

/* ==========================================================================
   Utilidades responsivas
   ========================================================================== */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.measure { max-width: 1020px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ==========================================================================
   Ajustes para telas pequenas (composições ilustrativas legíveis no celular)
   ========================================================================== */
.br-lg { display: none; }
@media (min-width: 1200px) { .br-lg { display: inline; } }

@media (max-width: 639.98px) {
  /* Hero: cards de métrica maiores, terceiro card oculto */
  .metric--3 { display: none; }
  .metric--1 { transform: scale(1.6); transform-origin: left top; top: calc(120 * var(--u)); }
  .metric--2 { transform: scale(1.6); transform-origin: right top; left: auto; right: 0; top: calc(470 * var(--u)); }

  /* Documentos: tamanho real em vez de escala proporcional */
  .docs-mock__stage { --u: 0.8px; height: auto; padding: 24px 12px; border-radius: var(--radius-md); }
  .docs-card { position: relative; left: auto; top: auto; width: 100%; }
  .docs-card__name { white-space: normal; min-width: 0; line-height: 1.3; }
  .pill { width: auto; flex: none; }

  /* IA: card do assistente abaixo da foto */
  .ia__stage { height: auto; }
  .ia__stage > img { position: static; height: auto; }
  .chat { --u: 0.7px; position: relative; left: auto; top: auto; width: auto; margin: -48px 16px 48px; }
}