/* SAC Empresa Landing: hero con el video de Martín + sección "Para bares, restaurantes y comercios". */
.sce-hero-w,
.sce-sec {
	--sce-blue: #1a8bd6;
	--sce-btn: #0f76bf;
	--sce-btn-h: #00487b;
	--sce-navy: #0f2238;
	--sce-ink: #252525;
	--sce-mute: #4a5868;
	--sce-line: #e6ebf0;
	--sce-soft: #f4f8fb;
	--sce-green: #22b35e;
}

.sce-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	margin: -1px !important;
}

/* ---------- Hero ---------- */
.elementor-widget-video.sce-hero-w > .elementor-widget-container {
	overflow: visible !important;
	transform: none !important;
}

.sce-hero {
	display: flex;
	justify-content: center;
	padding: 24px 0 36px;
}

.sce-hero-frame {
	position: relative;
	width: min(100%, 380px, calc((100vh - 170px) * 0.5625));
	min-width: 250px;
	aspect-ratio: 9 / 16;
	border-radius: 28px;
	overflow: hidden;
	background: var(--sce-navy);
	box-shadow: 0 34px 70px -28px rgba(15, 34, 56, 0.55), 0 0 0 1px rgba(15, 34, 56, 0.06);
	isolation: isolate;
}

@supports (height: 100svh) {
	.sce-hero-frame {
		width: min(100%, 380px, calc((100svh - 170px) * 0.5625));
	}
}

.sce-hero-video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	cursor: pointer;
	background: var(--sce-navy);
}

.sce-hero .sce-sound {
	position: absolute !important;
	left: 50% !important;
	bottom: 20px !important;
	top: auto !important;
	transform: translateX(-50%);
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 11px 18px 11px 14px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--sce-navy) !important;
	font: 600 14px/1 Roboto, system-ui, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
	z-index: 2;
	transition: transform 0.2s ease, background 0.2s ease;
}

.sce-hero .sce-sound::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: inherit;
	border: 2px solid rgba(255, 255, 255, 0.75);
	animation: sce-ring 2.2s ease-out infinite;
	pointer-events: none;
}

@keyframes sce-ring {
	0% { opacity: 0.9; transform: scale(0.96); }
	70%, 100% { opacity: 0; transform: scale(1.12); }
}

.sce-hero .sce-sound:hover {
	background: #eef6fc !important;
}

.sce-hero .sce-sound:focus-visible {
	outline: 3px solid var(--sce-blue);
	outline-offset: 3px;
}

.sce-sound svg {
	width: 20px;
	height: 20px;
	color: var(--sce-btn);
}

.sce-sound-i {
	display: inline-flex;
}

.sce-i-sound,
.sce-has-sound .sce-i-mute {
	display: none;
}

/* Con sonido: botón chico arriba a la derecha, para no tapar el video. */
.sce-has-sound .sce-i-sound {
	display: inline-flex;
}

.sce-hero.sce-has-sound .sce-sound {
	left: auto !important;
	right: 14px !important;
	top: 14px !important;
	bottom: auto !important;
	transform: none;
	padding: 10px !important;
	background: rgba(15, 34, 56, 0.55) !important;
	backdrop-filter: blur(6px);
	box-shadow: none;
}

.sce-has-sound .sce-sound svg {
	color: #fff;
}

.sce-has-sound .sce-sound-t,
.sce-has-sound .sce-sound::after {
	display: none;
}

.sce-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.18);
	z-index: 1;
	pointer-events: none;
}

.sce-progress i {
	display: block;
	height: 100%;
	background: var(--sce-blue);
	transform-origin: left;
	transform: scaleX(0);
}

@media (max-width: 767px) {
	.sce-hero {
		padding: 28px 0 8px;
	}

	.sce-hero-frame {
		width: min(82vw, 330px);
		min-width: 0;
		border-radius: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sce-hero .sce-sound::after {
		animation: none;
	}
}

/* ---------- Sección "Para bares, restaurantes y comercios" ---------- */
.sce-sec {
	background: #fff;
	border-top: 1px solid var(--sce-line);
	padding: 96px 24px;
	color: var(--sce-ink);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	scroll-margin-top: 80px;
}

.sce-sec *,
.sce-sec *::before,
.sce-sec *::after {
	box-sizing: border-box;
}

.sce-in {
	max-width: 1180px;
	margin: 0 auto;
}

.sce-top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 48px 64px;
	align-items: center;
}

.sce-copy {
	grid-column: 1;
	grid-row: 1;
}

.sce-anim {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	width: 100%;
	max-width: 460px;
	margin: 0;
}

.sce-pains {
	grid-column: 1 / -1;
	grid-row: 2;
}

.sce-sec .sce-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: var(--sce-btn);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sce-eyebrow span {
	width: 28px;
	height: 3px;
	border-radius: 3px;
	background: var(--sce-blue);
}

.sce-sec .sce-title {
	margin: 0 0 18px;
	color: var(--sce-navy);
	font-family: Roboto, system-ui, sans-serif;
	font-size: clamp(32px, 3.4vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.sce-sec .sce-lead {
	margin: 0 0 26px;
	color: var(--sce-mute);
	font-size: 18px;
	line-height: 1.6;
	max-width: 620px;
}

.sce-sec .sce-rubros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sce-rubros li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px 8px 11px;
	border: 1px solid #d9e6f1;
	border-radius: 999px;
	background: var(--sce-soft);
	color: var(--sce-navy);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.sce-rubros svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--sce-blue);
}

/* Animación que estaba en el hero */
.sce-anim-frame {
	position: relative;
	aspect-ratio: 1;
	border-radius: 24px;
	overflow: hidden;
	background: #f3f6f9;
	box-shadow: 0 28px 60px -30px rgba(15, 34, 56, 0.45), 0 0 0 1px rgba(15, 34, 56, 0.06);
}

.sce-anim-frame video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.sce-anim figcaption {
	margin: 16px 0 0;
	padding-left: 14px;
	border-left: 3px solid var(--sce-blue);
	color: var(--sce-mute);
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
}

/* Lo que pasa hoy → cómo lo resuelve */
.sce-sec .sce-pains {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sce-pain {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--sce-line);
	border-radius: 18px;
	background: #fbfcfd;
}

.sce-pain-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #e8f3fb;
	color: var(--sce-btn);
}

.sce-pain-i svg {
	width: 21px;
	height: 21px;
}

.sce-sec .sce-pain-q {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	color: #5b6672;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

/* La cruz roja marca "lo que pasa hoy"; abajo, en negro, cómo lo resuelve SAC Empresa. */
.sce-pain-q::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fdecea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d64541' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.sce-sec .sce-pain-a {
	margin: 0;
	color: var(--sce-ink);
	font-size: 15px;
	line-height: 1.5;
}

/* Calculadora + botones */
.sce-calc {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.85fr);
	gap: 32px 36px;
	align-items: center;
	margin-top: 64px;
	padding: 36px 40px;
	border-radius: 26px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(26, 139, 214, 0.32), transparent 55%),
		var(--sce-navy);
	color: #fff;
	overflow: hidden;
}

.sce-sec .sce-calc-q {
	display: block;
	margin: 0 0 18px;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.sce-calc-row {
	display: flex;
	align-items: center;
	gap: 18px;
}

.sce-calc input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	min-width: 0;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--sce-blue) var(--p, 7%), rgba(255, 255, 255, 0.18) var(--p, 7%));
	cursor: pointer;
}

.sce-calc input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	border: 7px solid var(--sce-blue);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.sce-calc input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 7px solid var(--sce-blue);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.sce-calc input[type="range"]:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.6);
	outline-offset: 6px;
}

.sce-calc-n {
	flex: none;
	min-width: 64px;
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.sce-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}

.sce-sec .sce-presets button {
	margin: 0 !important;
	padding: 6px 11px !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85) !important;
	font: 500 13px/1.2 Roboto, system-ui, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.sce-presets button b {
	font-weight: 700;
}

.sce-sec .sce-presets button:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
}

.sce-sec .sce-presets button[aria-pressed="true"] {
	border-color: var(--sce-blue) !important;
	background: var(--sce-blue) !important;
	color: #fff !important;
}

.sce-calc-out {
	padding: 4px 0 4px 36px;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.sce-sec .sce-calc-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	color: #fff;
	line-height: 1;
}

.sce-cur {
	font-size: 18px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.sce-calc-price b {
	font-size: 60px;
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sce-per {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.75);
}

.sce-sec .sce-calc-big {
	margin: 0 0 6px;
	color: #fff;
	font-size: 17px;
	line-height: 1.45;
}

.sce-sec .sce-calc-det {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.45;
}

.sce-sec .sce-calc-fine {
	display: flex;
	gap: 8px;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	line-height: 1.45;
}

.sce-calc-fine svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	color: #61ce70;
}

.sce-is-big .sce-calc-price .sce-cur,
.sce-is-big .sce-calc-price .sce-per,
.sce-is-big .sce-calc-det {
	display: none;
}

.sce-is-big .sce-calc-price b {
	font-size: 34px;
	letter-spacing: -0.01em;
}

.sce-sec .sce-try {
	margin: 0 0 12px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.sce-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sce-sec a.sce-store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px 9px 12px;
	border-radius: 12px;
	background: #fff;
	color: var(--sce-navy) !important;
	text-decoration: none !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sce-sec a.sce-store:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.sce-store svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.sce-store span {
	display: flex;
	flex-direction: column;
}

.sce-store small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--sce-mute);
}

.sce-sec a.sce-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: #fff !important;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 255, 255, 0.35) !important;
	text-underline-offset: 4px;
}

.sce-sec a.sce-wa:hover {
	text-decoration-color: #fff !important;
}

.sce-wa svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: #25d366;
}

.sce-sec a:focus-visible {
	outline: 3px solid var(--sce-blue);
	outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1024px) {
	.sce-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: 32px 40px;
	}

	.sce-sec .sce-pains {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sce-calc {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: 32px;
	}

	.sce-ctas {
		grid-column: 1 / -1;
		padding-top: 24px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
}

/* Celular */
@media (max-width: 767px) {
	.sce-sec {
		padding: 64px 16px;
	}

	.sce-top {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sce-copy,
	.sce-anim,
	.sce-pains {
		grid-column: 1;
		grid-row: auto;
	}

	.sce-anim {
		justify-self: stretch;
		max-width: none;
	}

	.sce-sec .sce-pains {
		grid-template-columns: minmax(0, 1fr);
	}

	.sce-sec .sce-lead {
		font-size: 17px;
	}

	.sce-rubros li {
		font-size: 13px;
		padding: 7px 12px 7px 10px;
	}

	.sce-pain {
		flex-direction: row;
		padding: 16px;
	}

	.sce-calc {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 40px;
		padding: 26px 20px;
		border-radius: 22px;
	}

	.sce-calc-out {
		padding: 22px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}

	.sce-calc-price b {
		font-size: 52px;
	}

	.sce-ctas {
		grid-column: auto;
	}

	.sce-sec a.sce-store {
		flex: 1 1 140px;
		justify-content: center;
	}
}

/* ---------- Botón de la web app (app.sacempresa.com) ---------- */
/* Hero: debajo de los botones de las tiendas, mismo alto (60 px) y estilo, y el ancho de los dos juntos (2 × 202 + 12). */
.sce-webapp-w {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex: 0 0 100%;
	/* Los botones de las tiendas tienen 5 px de margen abajo: así quedan 12 px entre las dos filas, como entre los botones. */
	margin: -14px 0 0;
}

.sce-webapp-w a.sce-webapp {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: 416px;
	max-width: 100%;
	height: 60px;
	padding: 0 18px;
	border: 1.5px solid #a6a6a5;
	border-radius: 9px;
	background: #040707;
	color: #fff !important;
	font-family: Roboto, system-ui, sans-serif;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sce-webapp-w a.sce-webapp:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(4, 7, 7, 0.25);
}

.sce-webapp-w a.sce-webapp:focus-visible {
	outline: 3px solid #1a8bd6;
	outline-offset: 3px;
}

.sce-webapp svg {
	width: 34px;
	height: 34px;
	flex: none;
}

.sce-webapp span {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	text-align: left;
}

.sce-webapp small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

.sce-webapp b {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #fff;
}

@media (max-width: 767px) {
	.sce-webapp-w {
		justify-content: center;
		margin-top: -16px;
	}

	.sce-webapp-w a.sce-webapp {
		width: 346px;
		height: 50px;
		gap: 12px;
	}

	.sce-webapp svg {
		width: 28px;
		height: 28px;
	}

	.sce-webapp b {
		font-size: 18px;
	}

	.sce-webapp small {
		font-size: 10px;
	}
}

/* Sección: en computadora la columna es angosta, los tres uno debajo del otro y del mismo ancho;
   en tablet y celular, Google Play y App Store en una fila y la web app debajo, de todo el ancho (como en el hero). */
.sce-stores:has(.sce-store-web) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.sce-stores:has(.sce-store-web) a.sce-store span {
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.sce-stores:has(.sce-store-web) {
		grid-template-columns: 1fr 1fr;
	}
}

.sce-stores:has(.sce-store-web) a.sce-store {
	justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
}

.sce-stores a.sce-store-web {
	grid-column: 1 / -1;
}

.sce-store-web svg {
	color: var(--sce-btn);
}