/*!
 * solucoes.responsive.css — Inova Tecnologia (solucoes.html)
 * Padrão consolidado de responsividade (igual aos demais):
 * - Paddings por breakpoint
 * - Banner com imagem cover e título fluido (corrige 360px)
 * - Grids que colapsam 3/4 → 2 → 1 coluna
 * - Tipografia e espaçamentos coesos
 * - Proteção contra overflow lateral
 */

/* ===================== PADDINGS PADRÃO POR SECTION ===================== */
#solucoes{
  padding: 40px 100px;
}
@media (min-width:1920px){
  #solucoes{
    padding: 60px 300px;
  }
}
@media (max-width:1024px){
  #solucoes{
    padding: 32px 20px;
  }
}
@media (max-width:500px){
  #solucoes{
    padding: 26px 16px;
  }
}
@media (max-width:360px){
  #solucoes{
    padding: 20px 12px;
  }
}

/* ============================== INTRO / HEADERS ============================== */
.seg .servicos-header{ max-width: 980px; margin: 0 auto 12px; text-align: center; }
.servicos-title{ margin:0; }
.servicos-subtitle{ margin: 8px auto 0; max-width: 70ch; }

/* ============================== KPIs ============================== */
.sol-v4__kpis{
  list-style:none; margin:16px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px;
}
.sol-v4__kpis li{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:12px; padding:16px;
  background:#F6FAFB;
}
.sol-v4__kpis strong{ font-size: clamp(1.3rem, 4.2vw, 1.9rem); line-height:1.05; }
.sol-v4__kpis span{ opacity:.85; margin-top:6px; }
@media (max-width:1024px){
  .sol-v4__kpis{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:768px){
  .sol-v4__kpis{ grid-template-columns: 1fr; }
}

/* ============================== META TAGS (highlights) ============================== */
.sol-v4__highlights{
  margin-top:16px;
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.recurso-meta .tech-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px;
  background:#E9F7FA; color:#1E6E7B; font-weight:700; font-size:.95rem;
}

/* ============================== GRID DE CARDS (Portfólio) ============================== */
.sol-v4__grid{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:24px;
}
@media (max-width:1200px){
  .sol-v4__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
}
@media (max-width:768px){
  .sol-v4__grid{ grid-template-columns: 1fr; gap:16px; }
}
.acesso-card{
  height:100%; display:flex; flex-direction:column; gap:10px;
  padding:18px; border-radius:16px; background:#fff;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.acesso-icon{ width:64px; height:64px; }
.acesso-title{ margin:6px 0; }
.acesso-text{ margin:0; }
.servico-lista{ margin:6px 0 0 16px; }

/* ============================== RAIL (Como funciona) ============================== */
.sol-v4__rail{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px;
}
.sol-v4__step{
  background:#fff; border-radius:16px; padding:16px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  min-height: 140px; box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.sol-v4__dot{
  width:28px; height:28px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; background:#25BACF; color:#fff;
}
@media (max-width:1200px){
  .sol-v4__rail{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; }
}
@media (max-width:768px){
  .sol-v4__rail{ grid-template-columns: 1fr; gap:14px; }
}

/* ============================== STRIPES (Casos de uso) ============================== */
.sol-stripes{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; margin-top:18px;
}
@media (max-width:1200px){
  .sol-stripes{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:768px){
  .sol-stripes{ grid-template-columns: 1fr; }
}
.sol-stripes .stripe{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.sol-stripes .stripe img{
  display:block; width:100%;
  height: clamp(180px, 28vw, 240px);           /* mantém proporção em telas pequenas */
  object-fit: cover; object-position:center;
}
.sol-stripes .stripe .stripe-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  padding:16px;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  color:#fff;
}
.sol-stripes .stripe h3{ margin:0; }
.sol-stripes .stripe p{ margin:0; opacity:.9; }

/* ============================== COMPARATIVO ============================== */
.sol-v4__compare{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px;
}
@media (max-width:1024px){
  .sol-v4__compare{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:768px){
  .sol-v4__compare{ grid-template-columns: 1fr; }
}
.cmp-card{
  background:#fff; border-radius:16px; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.cmp-card h4{ margin:0 0 8px; }
.recursos-avancados-list{ margin:0 0 0 18px; }

/* ============================== CTA FINAL ============================== */
.cta-container{
  margin-top: 18px; text-align:center;
}
.cta-container .cta-comprar-integracao{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 18px; border-radius:12px;
  background:#2E3F5B; color:#fff; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
@media (max-width:768px){
  .cta-container .cta-comprar-integracao{ inline-size:100%; }
}

/* ============================== DIVERSOS / PROTEÇÕES ============================== */
.sol-v4__container{ max-width: 1360px; margin-inline:auto; }
img{ max-width:100%; height:auto; }
#solucoes *{ min-width:0; }                /* protege grids do overflow lateral */

@media (max-width: 500px){.servicos-header h2{ font-size: clamp(1.3rem, 6vw, 1.6rem); line-height:1.25; margin-bottom:10px; } .servicos-header p{ font-size:.96rem; line-height:1.5; margin:6px auto 0; max-width:60ch; } }