/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

#logo img,
.footer-logo {
	height: 44px;
	width: auto;
}

/* Contraste de botones con color primario azul */
.button.bg-color,
a.button.bg-color,
.btn.bg-color {
	color: #fff !important;
}

.button.bg-color:hover,
a.button.bg-color:hover,
.btn.bg-color:hover {
	background-color: var(--cnvs-themecolor) !important;
	color: #fff !important;
}

/* CTA outline: texto oscuro sin fondo, blanco solo en hover */
.card .button.button-border.border-color,
.card .button.button-border.border-color.h-bg-color {
	color: #212529 !important;
	background-color: transparent !important;
}

.card .button.button-border.border-color:hover,
.card .button.button-border.border-color.h-bg-color:hover {
	background-color: var(--cnvs-themecolor) !important;
	border-color: var(--cnvs-themecolor) !important;
	color: #fff !important;
}

.bg-appstore.dark .button.button-light.button-border.border-color.color {
	color: var(--cnvs-themecolor) !important;
}

.bg-appstore.dark .button.button-light.button-border.border-color.color:hover {
	color: #fff !important;
	background-color: var(--cnvs-themecolor) !important;
	border-color: var(--cnvs-themecolor) !important;
}


.section-showcase-sticky {
	--obrasite-bg: #ffffff;
	--obrasite-surface: #f4f4f5;
	--obrasite-foreground: #11181c;
	--obrasite-heading: #18181b;
	--obrasite-muted: #52525b;
	--obrasite-subtle: #71717a;
	--obrasite-border: #e4e4e7;
}

.section-showcase-sticky #list-example {
	position: relative;
	background: var(--obrasite-bg) !important;
}

.section-showcase-sticky .list-group-item,
.section-showcase-sticky .list-group-item.active {
	background-color: var(--obrasite-bg);
}

.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide {
	background-color: var(--obrasite-bg) !important;
	color: var(--obrasite-muted);
	border-bottom: 1px solid var(--obrasite-border);
}

.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide h2,
.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide .display-4 {
	color: var(--obrasite-heading) !important;
}

.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide p {
	color: var(--obrasite-muted) !important;
	opacity: 1 !important;
}

.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide h2 .nocolor {
	color: var(--obrasite-subtle);
	opacity: 1 !important;
}

.section-showcase-sticky .list-group-content > div.obrasite-showcase-slide .color {
	color: var(--cnvs-themecolor) !important;
}

/* Sticky showcase: capturas de producto nítidas sin upscale */
.sticky-showcase-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

#list-item-2-target .sticky-showcase-img,
#list-item-3-target .sticky-showcase-img,
#list-item-4-target .sticky-showcase-img {
	object-fit: cover;
	object-position: center center;
}

/* Hero móvil */
@media (max-width: 991.98px) {
	.section-1 {
		overflow-x: clip;
	}

	.hero-mobile-devices .hero-mobile-phone {
		position: absolute;
		right: 0;
		bottom: -20%;
		width: clamp(130px, 34%, 200px);
		height: auto;
	}

	.section-showcase-sticky .list-group-content > div {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* Formulario de contacto */
.contact-form-wrap {
	max-width: 740px;
	width: 100%;
}

.contact-form-section {
	padding-bottom: 4rem;
}

@media (min-width: 992px) {
	.contact-form-section {
		padding-bottom: 5rem;
	}

	.contact-form-wrap {
		max-width: 580px;
	}

	.contact-form-section .card-body {
		padding: 2rem 2.25rem !important;
	}

	.contact-form-section h2 {
		font-size: 1.75rem;
	}

	.contact-form-section .lead {
		font-size: 1.1rem;
	}
}

@media (max-width: 767.98px) {
	.contact-form-section .card {
		border-radius: 1rem;
	}

	.contact-form-section h2 {
		font-size: clamp(1.75rem, 6.5vw, 2.25rem);
	}

	.contact-form-section .lead {
		font-size: 1.05rem;
	}

	.contact-form-section .form-control-lg,
	.contact-form-section .form-select,
	.contact-form-section .input-group-lg > .form-control,
	.contact-form-section .input-group-lg > .form-select {
		font-size: 1rem;
		min-height: 3rem;
	}

	.contact-form-section .btn {
		font-size: 1rem;
		padding-top: 0.9rem !important;
		padding-bottom: 0.9rem !important;
	}
}