/* ==========================================================================
   365Brasil — sobre.html only (Page header, About content)
   ========================================================================== */

.section--flush-top{padding-top:0}

/* ---------- About content ---------- */
.about-block{max-width:74ch}
.about-block p{font-size:16px;line-height:1.8;color:var(--body-c)}
.about-block p + p{margin-top:18px}
.about-block h2 + p{margin-top:18px}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:32px 0}
.about-card{
  background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 24px;
  transition:transform .28s var(--ease-spring),border-color .18s ease,box-shadow .28s var(--ease-out);
}
.about-card:hover{transform:translateY(-4px);border-color:#C7D2E4;box-shadow:0 14px 30px -20px rgba(15,23,42,.28)}
.about-card-ic{width:42px;height:42px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.about-card-ic svg{width:22px;height:22px}
.about-card h3{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.about-card-sub{font-size:13.5px;color:var(--muted);margin-top:4px}
.about-card ul{margin-top:16px;display:grid;gap:10px}
.about-card li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#334155}
.about-card li svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:2px}
.callout{display:flex;gap:14px;background:var(--tint);border:1px solid #E0E9F8;border-radius:14px;padding:20px 22px;margin:28px 0}
.callout svg{width:22px;height:22px;color:var(--blue);flex:none;margin-top:1px}
.callout p{font-size:14.5px;line-height:1.65;color:#1E293B;margin:0}
.callout strong{color:var(--ink)}
.about-divider{border-top:1px solid var(--border-soft);margin:8px 0 64px}

/* ---------- Off-screen render cost ---------- */
#cloudexperts,#licenciamento,#cta{content-visibility:auto;contain-intrinsic-size:1px 400px}

/* ---------- Responsive (sobre.html only) ---------- */
@media (max-width:720px){
  .about-cards{grid-template-columns:1fr}
  .section{padding:72px 0}
}
@media (max-width:640px){
  .callout{flex-direction:column}
}
@media (max-width:480px){
  .about-card{padding:22px 20px}
}