/*
 * SAC · componentes de contenido.
 * Todo está bajo .sac-c (raíz de cada componente) o clases .sac-*; los selectores
 * de elemento usan :where() para mantener especificidad baja y no alterar
 * formularios, widgets ni filas de WPBakery ajenos. Sin !important.
 */

/* Base tipográfica dentro de los componentes */
.sac-c {
	color: var(--sac-ink);
	font: 16px/1.65 var(--sac-font);
	box-sizing: border-box;
}

:where(.sac-c) *,
:where(.sac-c) *::before,
:where(.sac-c) *::after {
	box-sizing: border-box;
}

:where(.sac-c) a {
	color: inherit;
	text-decoration: none;
}

:where(.sac-c) p {
	margin: 0 0 20px;
	color: var(--sac-muted);
}

:where(.sac-c) h1,
:where(.sac-c) h2,
:where(.sac-c) h3,
:where(.sac-c) h4 {
	margin: 0 0 20px;
	color: var(--sac-ink);
	font-family: var(--sac-font);
	line-height: 1.13;
	letter-spacing: -.035em;
}

:where(.sac-c) h1 {
	font-size: clamp(42px, 4.5vw, 64px);
	font-weight: 650;
}

:where(.sac-c) h2 {
	font-size: clamp(32px, 3.2vw, 44px);
	font-weight: 630;
}

:where(.sac-c) h3 {
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -.02em;
}

:where(.sac-c) svg {
	display: block;
	max-width: 100%;
}

:where(.sac-c) button,
:where(.sac-c) input,
:where(.sac-c) select {
	font: inherit;
	color: inherit;
}

:where(.sac-c) button,
:where(.sac-c) summary {
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* En páginas internas los componentes usados como título reducen el H1 al tamaño de sección. */
.sac-c:not(.sac-hero) :where(h1) {
	font-size: clamp(34px, 3.6vw, 48px);
}

/* Estructura */
.sac-section {
	padding: 76px 0;
}

.sac-small {
	color: var(--sac-muted);
	font-size: 12px;
}

.sac-lead {
	max-width: 560px;
	font-size: 18px;
}

.sac-head {
	max-width: 700px;
	margin-bottom: 40px;
}

.sac-head.center {
	margin: 0 auto 42px;
	text-align: center;
}

.sac-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 28px 0 20px;
}

.sac-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.sac-split > * {
	min-width: 0;
}

.sac-split.sac-align-start {
	align-items: start;
}

.sac-number {
	padding-top: 4px;
	color: var(--sac-teal);
	font-size: 12px;
	font-weight: 700;
}

.sac-note {
	margin-top: 18px;
	color: #5f6972;
	font-size: 13px;
}

.sac-caption {
	margin: 16px 0 0;
	color: #626c75;
	font-size: 12px;
	text-align: center;
}

.sac-badge {
	padding: 5px 9px;
	border-radius: 5px;
	background: #e4f3fb;
	color: #075b91;
	font-size: 10px;
}

.sac-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 25px;
	border-radius: 10px;
	background: #e8f5fd;
	color: #086399;
}

.sac-icon svg {
	width: 24px;
	height: 24px;
}

.sac-checklist {
	margin: 25px 0;
	padding: 0;
	list-style: none;
}

.sac-checklist li {
	padding: 9px 0;
	font-size: 15px;
}

.sac-checklist li::before {
	content: "✓";
	margin-right: 12px;
	color: var(--sac-teal);
}

.sac-admin-note {
	margin: 16px 0;
	padding: 14px 16px;
	border: 1px dashed #bc550a;
	border-radius: 8px;
	background: #fff8f1;
	color: #5a3510;
	font-size: 13px;
}

.sac-admin-note ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

/* Hero */
.sac-hero {
	position: relative;
	overflow: hidden;
	padding: 42px 0 30px;
	background: radial-gradient(ellipse at 88% 40%, #dceffa 0, transparent 47%), linear-gradient(115deg, #f8fafc, #eff7fc);
}

.sac-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	gap: 52px;
	align-items: center;
}

.sac-hero h1 {
	max-width: 620px;
	font-size: clamp(36px, 3.6vw, 49px);
	line-height: 1.12;
}

.sac-hero h1 em {
	color: #075b91;
	font-style: normal;
}

.sac-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	margin-bottom: 24px;
	padding: 6px 12px;
	border: 1px solid #becedb;
	border-radius: 30px;
	background: #e7eef4;
	color: #244159;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .035em;
}

.sac-dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sac-cyan);
}

.sac-hero .sac-actions {
	margin-top: 20px;
}

.sac-hero-note {
	color: #525f6a;
	font-size: 14px;
}

.sac-hero-foot {
	display: flex;
	gap: 22px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #d5dde4;
	color: #354a5b;
	font-size: 12px;
}

/* Panel ilustrativo */
.sac-mock-shell {
	position: relative;
	padding: 8px 0 36px;
}

.sac-mock {
	overflow: hidden;
	border: 1px solid #d3dbe2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 28px 60px #0a29431a;
	transform: rotate(-1deg);
}

.sac-window {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 35px;
	padding: 0 13px;
	border-bottom: 1px solid #e8ebee;
	background: #fafbfc;
}

.sac-window i {
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background: #c9d1d8;
}

.sac-window span {
	margin: auto;
	color: #535f69;
	font-size: 9px;
}

.sac-app {
	display: grid;
	grid-template-columns: 90px 1fr;
	min-height: 355px;
}

.sac-sidebar {
	padding: 20px 11px;
	background: #0f2c44;
	color: #e1ebf3;
	font-size: 9px;
}

.sac-sidebar b {
	display: block;
	margin: 0 0 25px;
	font-size: 20px;
}

.sac-sidebar span {
	display: block;
	margin: 8px -4px;
	padding: 7px 4px;
	border-radius: 4px;
}

.sac-sidebar .active {
	background: #284863;
}

.sac-app-main {
	padding: 22px 17px;
	background: #f7f9fa;
}

.sac-app-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 19px;
	font-size: 10px;
}

.sac-app-head b {
	display: block;
	font-size: 17px;
}

.sac-avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #d5e1eb;
}

.sac-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.sac-kpi {
	padding: 12px 10px;
	border: 1px solid #e0e5ea;
	border-radius: 7px;
	background: #fff;
	color: #535f69;
	font-size: 9px;
}

.sac-kpi strong {
	display: block;
	color: var(--sac-ink);
	font-size: 22px;
	line-height: 1.7;
}

.sac-chart {
	margin-top: 12px;
	padding: 13px;
	border: 1px solid #e0e5ea;
	border-radius: 7px;
	background: #fff;
}

.sac-chart-title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 10px;
}

.sac-chart-title span {
	color: #606c76;
	font-size: 9px;
}

.sac-chart svg {
	width: 100%;
	height: 115px;
}

.sac-app-bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 13px;
	color: #54616b;
	font-size: 9px;
}

.sac-float {
	position: absolute;
	right: -14px;
	bottom: 7px;
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 20px;
	border: 1px solid #dee5eb;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 25px #162a3b10;
	font-size: 11px;
}

.sac-float strong {
	display: block;
	font-size: 13px;
}

.sac-float .check {
	padding: 5px 10px;
	border-radius: 50%;
	background: #e2f4fc;
	color: #075b91;
	font-size: 17px;
}

/* Encabezado de página interna */
.sac-intro {
	padding: 64px 0 40px;
	background: linear-gradient(115deg, #f8fafc, #eff7fc);
}

.sac-intro-inner {
	max-width: 760px;
}

/* Clientes */
.sac-social {
	padding: 36px 0;
	border-top: 1px solid var(--sac-line);
	background: #fff;
}

.sac-social .sac-head {
	margin-bottom: 24px;
}

.sac-social :where(h2) {
	margin-bottom: 8px;
	font-size: 26px;
}

.sac-client-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 22px;
}

.sac-client {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	margin: 0;
	padding: 12px 24px;
}

.sac-client img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 68px;
	object-fit: contain;
}

.sac-client figcaption {
	color: var(--sac-ink);
	font-size: 13px;
	font-weight: 650;
}

/* Problema / solución */
.sac-problems {
	display: grid;
}

.sac-problem {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 16px;
	padding: 23px 0;
	border-bottom: 1px solid var(--sac-line);
}

.sac-problem:first-child {
	padding-top: 0;
}

.sac-problem :where(h2, h3) {
	margin-bottom: 7px;
	font-size: 18px;
}

.sac-problem p {
	margin: 0;
	font-size: 14px;
}

/* Recorrido */
.sac-flow-section {
	padding: 70px 0;
	background: var(--sac-deep);
	color: #fff;
}

.sac-flow-section :where(h1, h2) {
	color: #fff;
}

.sac-flow-section .sac-eyebrow {
	color: var(--sac-mint);
}

.sac-flow-section p {
	max-width: 650px;
	color: #c1d0dd;
}

.sac-flow {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 10px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.sac-flow li {
	position: relative;
	padding-top: 20px;
	border-top: 1px solid #5b7387;
	font-size: 12px;
}

.sac-flow li::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 100%;
	background: var(--sac-cyan);
}

.sac-flow li:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 17px;
	right: 6px;
	color: #8ba3b6;
}

.sac-flow strong {
	display: block;
	margin-bottom: 9px;
	color: #a9cbe6;
	font-size: 10px;
}

.sac-flow-section :focus-visible {
	outline-color: var(--sac-cyan);
}

/* Catálogo de módulos */
.sac-tabs {
	display: none;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 30px;
}

.sac-js .sac-tabs {
	display: flex;
}

.sac-tabs button {
	min-height: 44px;
	padding: 8px 19px;
	border: 1px solid #ccd5dc;
	border-radius: 30px;
	background: #fff;
	font-size: 13px;
}

.sac-tabs button[aria-pressed="true"] {
	border-color: var(--sac-deep);
	background: var(--sac-deep);
	color: #fff;
}

.sac-module-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.sac-module {
	padding: 26px;
	border: 1px solid var(--sac-line);
	border-radius: 12px;
	background: #fff;
}

.sac-module[hidden] {
	display: none;
}

/* Antes de que el script esté listo, ocultar las fichas extra evita saltos de diseño. */
.sac-js .sac-modules:not(.is-ready) .sac-module.is-extra {
	display: none;
}

.sac-module :where(h2, h3) {
	margin-bottom: 10px;
	font-size: 19px;
}

.sac-module p {
	margin-bottom: 14px;
	font-size: 14px;
}

.sac-module summary {
	min-height: 44px;
	padding: 10px 0;
	color: var(--sac-teal);
	font-size: 14px;
	font-weight: 650;
}

.sac-module details p {
	margin-top: 8px;
	line-height: 1.7;
}

.sac-pending {
	display: block;
	color: #73542d;
	font-size: 12px;
}

.sac-module-more {
	display: none;
	margin: 24px auto 0;
}

.sac-js .sac-module-more:not([hidden]) {
	display: flex;
}

/* Contabilidad integrada */
.sac-finance {
	background: #edf6fc;
}

.sac-ledger {
	padding: 30px;
	border: 1px solid #d7dfe6;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 40px #172c3e10;
}

.sac-ledger-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sac-line);
	font-size: 13px;
}

.sac-ledger-line {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #edeff1;
	font-size: 12px;
}

.sac-ledger-line .sac-icon {
	width: 34px;
	height: 34px;
	margin: 0;
}

.sac-ledger-line b {
	display: block;
	font-size: 13px;
}

.sac-ledger-line small {
	color: #5d6a75;
}

.sac-ledger-line > span:last-child {
	margin-left: auto;
	color: #284d6c;
}

.sac-ledger-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 25px;
	padding: 20px;
	border-radius: 10px;
	background: #112e46;
	color: #fff;
	font-size: 12px;
}

.sac-ledger-total strong {
	font-size: 24px;
}

/* Investigación clínica */
.sac-research {
	background: #f5f9fc;
}

.sac-research-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 24px;
}

.sac-research-grid article {
	padding-top: 20px;
	border-top: 2px solid var(--sac-cyan);
}

.sac-research-grid :where(h2, h3) {
	margin: 18px 0 12px;
}

.sac-research-grid p {
	font-size: 15px;
}

/* Soluciones por institución */
.sac-sector-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--sac-line);
	border-left: 1px solid var(--sac-line);
}

.sac-sector {
	display: block;
	min-width: 0;
	padding: 28px 24px;
	border-right: 1px solid var(--sac-line);
	border-bottom: 1px solid var(--sac-line);
	overflow-wrap: anywhere;
	transition: background .2s;
}

.sac-sector:hover {
	background: #eef3f8;
}

.sac-sector :where(h2, h3) {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-top: 24px;
	font-size: 19px;
}

.sac-sector p {
	margin: 0;
	font-size: 13px;
}

/* Tarjetas informativas / RIPS */
.sac-reg {
	background: #f5f8fa;
}

.sac-reg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.sac-reg-grid article {
	padding-top: 25px;
	border-top: 2px solid #9fb0bd;
}

.sac-reg-grid :where(h2, h3) {
	font-size: 20px;
}

.sac-reg-grid p {
	font-size: 14px;
}

/* Reportes: panel a la izquierda en escritorio (orden aprobado) */
.sac-report {
	padding: 28px;
	border: 1px solid var(--sac-line);
	border-radius: 16px;
	background: #fff;
}

.sac-report > :where(h2, h3) {
	font-size: 21px;
}

.sac-signal {
	padding: 20px 0;
	border-bottom: 1px solid var(--sac-line);
}

.sac-signal:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.sac-signal :where(h3, h4) {
	margin: 12px 0 8px;
	font-size: 17px;
	line-height: 1.3;
}

.sac-signal p {
	margin-bottom: 12px;
	font-size: 14px;
}

.sac-demo-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px;
	border-radius: 6px;
	background: #f1f7fc;
	font-size: 11px;
}

.sac-demo-row strong {
	color: #075b91;
	text-align: right;
}

.sac-example-table {
	width: 100%;
	overflow: hidden;
	border: 1px solid #dbe6ef;
	border-radius: 7px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 12px;
	text-align: left;
}

.sac-example-table th,
.sac-example-table td {
	width: 50%;
	padding: 10px;
}

.sac-example-table th {
	background: #f1f7fc;
	font-weight: 700;
}

.sac-example-table td {
	border-top: 1px solid #dbe6ef;
	background: #fff;
}

.sac-c .sac-example-help {
	margin-top: 10px;
	font-size: 12px;
}

/* Llamada a la acción */
.sac-banner-wrap {
	padding: 60px 0 0;
}

.sac-banner-wrap.has-space-after {
	padding-bottom: 76px;
}

.sac-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	padding: 48px;
	border-radius: 18px;
	background: var(--sac-deep);
	color: #fff;
}

.sac-banner :where(h2) {
	max-width: 650px;
	margin: 0;
	color: #fff;
	font-size: 30px;
}

.sac-banner .sac-btn {
	flex-shrink: 0;
	background: var(--sac-mint);
	color: var(--sac-deep);
}

.sac-banner .sac-btn:focus-visible {
	outline-color: var(--sac-cyan);
}

/* Preguntas frecuentes */
.sac-faq {
	border-bottom: 1px solid var(--sac-line);
}

.sac-faq summary {
	padding: 22px 30px 22px 0;
	font-weight: 600;
	line-height: 1.5;
}

.sac-faq p {
	padding-right: 24px;
	font-size: 15px;
}

/* Solicitud de demo */
.sac-demo {
	background: #eaeff3;
}

.sac-contact-line {
	display: block;
	margin: 14px 0;
	font-weight: 600;
}

.sac-form {
	width: 100%;
	padding: 32px;
	border: 1px solid var(--sac-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 32px #24394b10;
}

.sac-form:focus {
	outline: none;
}

.sac-c .sac-form-title {
	font-size: 21px;
	letter-spacing: -.02em;
}

.sac-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.sac-field.full {
	grid-column: 1 / -1;
}

.sac-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 650;
}

.sac-field :where(input, select) {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #a5b1bb;
	border-radius: 6px;
	background: #fff;
	color: var(--sac-ink);
}

.sac-field :where(input, select):focus-visible {
	outline: 3px solid var(--sac-focus);
	outline-offset: 2px;
}

.sac-consent {
	margin-top: 18px;
	font-size: 13px;
	line-height: 1.5;
}

.sac-consent a {
	color: var(--sac-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sac-consent input {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
}

.sac-consent .wpcf7-list-item {
	margin: 0;
}

.sac-form .sac-btn {
	width: 100%;
	margin-top: 20px;
}

.sac-form .sac-btn:disabled {
	cursor: progress;
	opacity: .7;
}

.sac-form .wpcf7-spinner {
	display: block;
	margin: 10px auto 0;
}

.sac-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #a1260d;
	font-size: 12px;
}

.sac-form .wpcf7-not-valid {
	border-color: #a1260d;
}

.sac-form .wpcf7 form .wpcf7-response-output {
	margin: 15px 0 0;
	padding: 16px;
	border: 1px solid #b6d9ec;
	border-radius: 8px;
	background: #e4edf5;
	color: var(--sac-ink);
	font-size: 14px;
}

.sac-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: #2f7d4f;
	background: #e9f6ee;
}

.sac-form .wpcf7 form:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output {
	border-color: #a1260d;
	background: #fdf0ed;
}

.sac-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sac-contact-fallback {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Contacto */
.sac-contact-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
}

.sac-contact-list dt {
	margin-bottom: 6px;
	color: var(--sac-teal);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.sac-contact-list dd {
	margin: 0;
	font-weight: 600;
}

.sac-contact-list dd a {
	display: block;
	padding: 4px 0;
}

/* Responsive */
@media (min-width: 851px) {
	.sac-reports .sac-split > :last-child {
		order: -1;
	}
}

@media (max-width: 1050px) {
	.sac-hero-grid {
		gap: 28px;
	}

	.sac-split {
		gap: 40px;
	}

	.sac-float {
		right: 0;
	}

	.sac-sector-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 850px) {
	.sac-hero-grid,
	.sac-split {
		grid-template-columns: 1fr;
	}

	.sac-split {
		gap: 38px;
	}

	.sac-hero-copy > .sac-lead {
		max-width: 600px;
	}

	.sac-mock-shell {
		width: 100%;
		max-width: 590px;
		margin: auto;
	}

	.sac-app {
		min-height: 370px;
	}

	.sac-app-main {
		padding: 22px;
	}

	.sac-module-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sac-flow {
		grid-template-columns: repeat(4, 1fr);
		gap: 30px 15px;
	}

	.sac-reg-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sac-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 30px;
	}

	.sac-form {
		max-width: 650px;
	}

	.sac-demo .sac-split > .sac-demo-copy {
		order: 2;
	}
}

@media (max-width: 700px) {
	.sac-research-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 600px) {
	.sac-section {
		padding: 52px 0;
	}

	.sac-hero {
		padding-top: 30px;
	}

	.sac-hero h1 {
		font-size: 36px;
	}

	.sac-hero .sac-label {
		font-size: 9px;
	}

	.sac-hero-note {
		margin-bottom: 0;
	}

	.sac-caption {
		font-size: 11px;
	}

	.sac-intro {
		padding: 40px 0 28px;
	}

	.sac-tabs {
		gap: 8px;
	}

	.sac-tabs button {
		padding: 9px 12px;
	}

	.sac-client-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	.sac-client:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: 100%;
		max-width: 250px;
	}

	.sac-client {
		padding: 8px 2px;
	}

	.sac-client img {
		height: 60px;
	}

	.sac-client figcaption {
		font-size: 13px;
		white-space: nowrap;
	}

	.sac-demo {
		padding-top: 32px;
	}

	.sac-form {
		padding: 22px;
	}
}

@media (max-width: 520px) {
	.sac-actions {
		gap: 10px;
	}

	.sac-actions .sac-btn {
		gap: 16px;
		padding: 12px 17px;
	}

	.sac-hero-foot {
		flex-wrap: wrap;
		gap: 12px;
		font-size: 11px;
	}

	.sac-mock-shell {
		padding-bottom: 35px;
	}

	.sac-app {
		grid-template-columns: 61px 1fr;
		min-height: 305px;
	}

	.sac-sidebar {
		padding: 14px 7px;
		font-size: 7px;
	}

	.sac-sidebar b {
		font-size: 16px;
	}

	.sac-app-main {
		padding: 15px 10px;
	}

	.sac-app-head b {
		font-size: 14px;
	}

	.sac-kpi {
		padding: 8px 6px;
		font-size: 8px;
	}

	.sac-kpi strong {
		font-size: 18px;
	}

	.sac-chart {
		padding: 10px;
	}

	.sac-chart svg {
		height: 90px;
	}

	.sac-chart-title,
	.sac-chart-title span {
		font-size: 8px;
	}

	.sac-float {
		bottom: 8px;
		padding: 12px 14px;
		font-size: 10px;
	}

	.sac-float strong {
		font-size: 11px;
	}

	.sac-module-grid {
		grid-template-columns: 1fr;
	}

	.sac-module {
		padding: 24px;
	}

	.sac-module .sac-icon {
		margin-bottom: 20px;
	}

	.sac-flow {
		grid-template-columns: repeat(2, 1fr);
	}

	.sac-flow-section {
		padding: 55px 0;
	}

	.sac-flow li {
		font-size: 13px;
	}

	.sac-ledger {
		padding: 21px;
	}

	.sac-sector {
		padding: 22px 16px;
	}

	.sac-sector :where(h2, h3) {
		font-size: 17px;
	}

	.sac-sector p {
		font-size: 12px;
	}

	.sac-report {
		padding: 20px;
	}

	.sac-fields {
		grid-template-columns: 1fr;
	}

	.sac-banner :where(h2) {
		font-size: 27px;
	}
}

@media (max-width: 360px) {
	.sac-ledger-total {
		gap: 10px;
	}

	.sac-ledger-total strong {
		font-size: 20px;
	}
}