/* Solucoes: GerirMEI e AGI. Prefixo solucao-. Depende dos tokens de site.css. */

/* ---- Hero --------------------------------------------------------------- */
.solucao-hero { min-height: calc(100dvh - var(--nav-h)); display: flex; align-items: center; padding-block: var(--space-7); overflow-x: clip; }
.solucao-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7) var(--space-8); align-items: center; width: 100%; }
.solucao-hero__title { font-size: clamp(2.25rem, 4.4vw, 3.75rem); max-width: 14ch; }
.solucao-hero__title--wide { max-width: none; font-size: clamp(2rem, 3.7vw, 3.25rem); }
.solucao-hero__title--md { font-size: clamp(1.875rem, 2.7vw, 2.4rem); }
.solucao-hero__lead { margin-top: var(--space-5); font-size: 1.1875rem; line-height: 1.55; max-width: 44ch; }
.solucao-hero__visual { min-width: 0; }
.solucao-hero--even .solucao-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.solucao-hero--bleed .solucao-hero__visual { width: 118%; }
.solucao-hero--paper { background: var(--paper); }
.solucao-hero--white { background: var(--surface); }

/* ---- Moldura de captura real ------------------------------------------- */
.solucao-frame { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: 0 24px 48px -24px rgb(11 27 63 / 0.28); }
.solucao-frame img { width: 100%; height: auto; }
.solucao-figure figcaption { margin-top: var(--space-3); font-size: var(--text-small); color: var(--ink-500); max-width: 52ch; }
.solucao-figure figcaption strong { display: block; color: var(--navy-900); font-size: 1.0625rem; margin-bottom: 2px; }

/* ---- Linhas com icone (lista de funcionalidades sem cards) --------------- */
.solucao-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
.solucao-row { padding-block: var(--space-5); border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.solucao-row > i { font-size: 1.75rem; color: var(--navy-700); line-height: 1; margin-top: 2px; }
.solucao-row h3 { font-size: 1.125rem; line-height: 1.35; }
.solucao-row p { margin-top: var(--space-2); font-size: var(--text-small); }
.solucao-rows--single { grid-template-columns: minmax(0, 1fr); }

/* ---- Faixa navy: lista do painel ---------------------------------------- */
.solucao-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7) var(--space-8); align-items: center; }
.solucao-panel__list > li { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid rgb(255 255 255 / 0.16); font-size: 1.25rem; font-weight: 500; color: #fff; }
.solucao-panel__list > li:first-child { border-top: 1px solid rgb(255 255 255 / 0.16); }
.solucao-panel__list i { font-size: 1.5rem; color: #fff; flex-shrink: 0; }

/* ---- Publico: bento 1 grande + 3 ---------------------------------------- */
.solucao-audience { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto); gap: var(--space-4); }
.solucao-audience__item { padding: var(--space-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.solucao-audience__item i { font-size: 1.75rem; color: var(--navy-700); }
.solucao-audience__item h3 { margin-top: var(--space-3); font-size: 1.125rem; }
.solucao-audience__item p { margin-top: var(--space-2); font-size: var(--text-small); }
.solucao-audience__item--main { grid-row: 1 / span 3; background: var(--navy-900); border-color: var(--navy-900); padding: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.solucao-audience__item--main i { color: #fff; font-size: 2.5rem; }
.solucao-audience__item--main h3 { color: #fff; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.02em; }
.solucao-audience__item--main p { color: #C9D3E6; font-size: var(--text-body); max-width: 40ch; }

/* ---- Bento (recursos): tiles de tamanhos diferentes ----------------------- */
.solucao-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.solucao-tile { padding: var(--space-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); }
.solucao-tile > i { font-size: 1.75rem; color: var(--navy-700); }
.solucao-tile h3 { font-size: 1.125rem; line-height: 1.35; }
.solucao-tile p { font-size: var(--text-small); }
.solucao-tile--wide { grid-column: span 2; }
.solucao-tile--tint { background: var(--info-bg); border-color: #D3DFF5; }
.solucao-tile--navy { background: var(--navy-900); border-color: var(--navy-900); }
.solucao-tile--navy > i, .solucao-tile--navy h3 { color: #fff; }
.solucao-tile--navy p { color: #C9D3E6; }
.solucao-tile--lg { padding: clamp(1.5rem, 3vw, 2.5rem); justify-content: flex-end; min-height: 240px; }
.solucao-tile--lg h3 { font-size: var(--text-h3); }
.solucao-tile--lg p { font-size: var(--text-body); max-width: 46ch; }

/* ---- Destaque + resto (GerirMEI recursos) --------------------------------- */
.solucao-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.solucao-featured .solucao-tile:nth-child(1) { grid-column: span 2; }
.solucao-featured .solucao-tile:nth-child(2) { grid-row: span 2; }
.solucao-featured .solucao-tile:nth-child(3) { grid-column: span 2; }
.solucao-rest { margin-top: var(--space-7); }

/* ---- Pares de capturas (AGI) --------------------------------------------- */
.solucao-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.solucao-pair .solucao-figure:nth-child(2) { margin-top: var(--space-8); }

/* ---- Pilulas grandes (publico AGI) ---------------------------------------- */
.solucao-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.solucao-chips li { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.5rem; border: 1px solid rgb(255 255 255 / 0.4); border-radius: var(--radius-pill); color: #fff; font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 500; }

/* ---- Itens com filete lateral (diferenciais) ----------------------------- */
.solucao-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }
.solucao-quad__item { padding-left: var(--space-5); border-left: 2px solid var(--line); }
.solucao-quad__item i { font-size: 1.75rem; color: var(--navy-700); }
.solucao-quad__item h3 { margin-top: var(--space-3); font-size: 1.1875rem; }
.solucao-quad__item p { margin-top: var(--space-2); font-size: var(--text-small); max-width: 42ch; }

/* ---- Texto de apoio e CTA ------------------------------------------------ */
.solucao-note { margin-top: var(--space-5); font-size: var(--text-small); color: var(--ink-500); }
.solucao-aside { display: grid; gap: var(--space-5); }
.solucao-captions > li + li { margin-top: var(--space-4); }
.solucao-captions strong { display: block; }
.solucao-captions span { color: var(--ink-500); font-size: var(--text-small); }

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .solucao-hero--bleed .solucao-hero__visual { width: 108%; }
}
@media (max-width: 860px) {
  .solucao-hero { min-height: 0; }
  .solucao-hero__grid, .solucao-panel, .solucao-audience, .solucao-pair, .solucao-quad, .solucao-rows { grid-template-columns: minmax(0, 1fr); }
  .solucao-hero--bleed .solucao-hero__visual { width: 100%; }
  .solucao-audience__item--main { grid-row: auto; min-height: 220px; }
  .solucao-bento, .solucao-featured { grid-template-columns: minmax(0, 1fr); }
  .solucao-tile--wide, .solucao-featured .solucao-tile:nth-child(1), .solucao-featured .solucao-tile:nth-child(2), .solucao-featured .solucao-tile:nth-child(3) { grid-column: auto; grid-row: auto; }
  .solucao-pair .solucao-figure:nth-child(2) { margin-top: 0; }
}