@media (max-width: 575.98px) {
	#products #right p {
		font-size: 12px !important;
	} #formulario .block {
		padding: 10px !important;
	} #osmosis iframe {
		min-width: 360px !important;
		min-height: 265px !important;	
	} .modal .modal-body {
		padding: 40px 8px !important;
	}
} @media (min-width: 575.98px) and (max-width: 767.98px) {
} @media (min-width: 767.98px) and (max-width: 991.98px) {
} @media (min-width: 991.98px) and (max-width: 1199.98px) {
} @media (min-width: 1199.98px) {
}

/* BANNER — la imagen de cada slide ya trae su propio mensaje/título
diseñado, así que acá solo se posicionan el botón de contacto y los
controles del carrusel (flechas laterales + barras de avance) sobre ella. */
#banner-top {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	margin-top: 63px;
	min-height: 500px;
	/* flex en vez de "height:100%" en cascada por .container/.row/.col-lg-12:
	un min-height en el padre no cuenta como altura "definida" para que un
	height:100% funcione en los hijos — el banner se achicaba al tamaño del
	botón en vez de ocupar los 500px reales. Con flex, el propio #banner-top
	ya es quien manda la altura (el navegador SÍ la resuelve a partir de
	min-height para un contenedor flex) y justify-content empuja el
	contenido al fondo sin depender de ninguna altura porcentual. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
} #banner-top .col-lg-12 {
	padding-bottom: 70px;
}

/* El título/subtítulo de cada slide está dibujado dentro de la imagen (ver
Banner.jsx), siempre pegado al lado izquierdo, en una imagen muy ancha
(2200x924, ~2.38:1). A 500px de alto fijo, un celular angosto solo alcanza a
mostrar una franja muy angosta del centro de esa imagen — se perdía buena
parte del título. Por debajo de 992px se deja de forzar la altura y se usa
el aspect-ratio real de la imagen: así el ancho de pantalla completo entra
sin recortar el texto, solo se recorta (si acaso) un poco de alto. Como el
alto queda atado al ancho por el aspect-ratio, los paddings en % (que en
CSS siempre se calculan sobre el ancho del contenedor, nunca sobre su alto)
terminan guardando la misma proporción visual que a 500px fijo. */
@media (max-width: 991.98px) {
	#banner-top {
		min-height: 0;
		aspect-ratio: 2200 / 924;
	} #banner-top .col-lg-12 {
		padding-bottom: 5%;
	} #banner-cta {
		/* 40% más chico que el tamaño de escritorio (18px / 14px 30px / ícono
		22px — ver regla base de #banner-cta más abajo). */
		font-size: 10.8px !important;
		padding: 8.4px 18px !important;
	} #banner-cta img {
		width: 13.2px !important;
		margin-left: 7.2px !important;
	} #slider-banners .custom_dots {
		/* !important: esta misma clase se vuelve a declarar más abajo en el
		archivo (bottom: 35px, sin media query) — por orden de cascada esa
		regla posterior le ganaría a esta aunque el media query sí aplique. */
		bottom: 2.5% !important;
	}
}

#banner-cta {
	display: inline-flex;
	align-items: center;
	background-color: #ffffff;
	color: #0C1B33;
	font-weight: 700;
	font-size: 18px;
	padding: 14px 30px;
	border-radius: 2px;
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease;
} #banner-cta:hover {
	color: #0C1B33;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
} #banner-cta img {
	width: 22px;
	margin-left: 12px;
}

/* Flechas laterales — círculo negro semitransparente con un chevron claro
encima, superpuestas sobre la imagen (Carousel arrowsOverlay, ver Banner.jsx).
!important solo en background: Carousel.jsx pone `background: 'transparent'`
inline en el botón (para los carruseles SIN overlay, donde sí debe ser
transparente) — un estilo inline le gana a cualquier regla externa sin
importar la especificidad, así que sin esto el círculo no se veía. */
#slider-banners .arrow_custom_left, #slider-banners .arrow_custom_right {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
	transition: opacity 200ms ease;
} #slider-banners .arrow_custom_left:hover, #slider-banners .arrow_custom_right:hover {
	opacity: 1;
} #slider-banners .arrow_custom_left img, #slider-banners .arrow_custom_right img {
	width: 11px;
} #slider-banners .arrow_custom_right img {
	transform: scaleX(-1);
}

/* Barras de avance — alineadas con el borde izquierdo del botón de
contacto. El botón vive dentro de un .container de Bootstrap, que a partir
de 576px se centra con margen automático y tiene su propio max-width por
breakpoint (540/720/960/1140px) + 15px de padding — las barras cuelgan
directo del carrusel (a todo lo ancho), así que no pueden compartir el
mismo left fijo: hay que calcular el mismo offset que resulta de centrar
ese .container en cada breakpoint para que ambos arranquen en el mismo
punto exacto. */
#slider-banners .custom_dots {
	list-style-type: none;
	position: absolute;
	left: 15px;
	bottom: 35px;
	display: flex;
	padding: 0;
	margin: 0;
} @media (min-width: 576px) {
	#slider-banners .custom_dots { left: calc((100vw - 540px) / 2 + 15px); }
} @media (min-width: 768px) {
	#slider-banners .custom_dots { left: calc((100vw - 720px) / 2 + 15px); }
} @media (min-width: 992px) {
	#slider-banners .custom_dots { left: calc((100vw - 960px) / 2 + 15px); }
} @media (min-width: 1200px) {
	#slider-banners .custom_dots { left: calc((100vw - 1140px) / 2 + 15px); }
}
#slider-banners .custom_dots li {
	width: 28px;
	height: 3px;
	margin-right: 8px;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 2px;
	transition: background-color 200ms ease;
} #slider-banners .custom_dots .slick-active {
	background-color: #ffffff;
}


#osmosis {
	padding: 50px 0px 30px 0px;
} #osmosis2 {
	background-color: #E2E6F1; 
	padding: 90px 0px 30px 0px;
} #osmosis2 iframe {
	min-width: 800px;
	min-height: 590px;
	max-width: 100%;
}
/* El video (a diferencia del iframe de arriba) no debe tener min-width: en
celular, min-width le gana a max-width:100% cuando chocan, así que se
quedaba forzado a 800px de ancho y se salía del contenedor — había que
hacer scroll horizontal para verlo completo. Se mide por su propio
aspect-ratio (16:9, el .mp4 va re-codificado a 720p) en vez de un alto fijo
en px, para no quedar ni estirado ni con barras negras en ningún ancho. */
#home-video {
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
}

#overview {
	padding: 0px;
	background-color: #e1e6ec;
} #overview iframe {
	min-width: 800px;
	min-height: 590px;	
}

#products {
	padding: 0px 0px 0px;
} #products #right {
	background-color: #60aeff;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	padding: 60px;
} #products #right h6 {
	color: #1d3c58;
} #products p {
	color: #fff;
} #products .parraph {
	font-size: 12px;
} #products a {
	color: #1d3c58;
	text-decoration: underline;
	font-family: "Mazzard-Medium" !important;
} #products #slider-products div img {
	max-width: 100%;
	padding: 0px 5px;
} #products input[type='range'],
  input[type='range']::-webkit-slider-runnable-track,
  input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
	background-color: #60aeff;
} #products input[type=range]::-webkit-slider-thumb {
  background-color: #60aeff;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  margin-top: -9px;
} #products input[type=range]::-moz-range-thumb {
  background-color: #60aeff;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
} #products input[type=range]::-ms-thumb {
  background-color: #60aeff;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
} #products input[type=range]::-webkit-slider-runnable-track {
  background-color: #fff;
  height: 2px;
} #products input[type=range]:focus::-webkit-slider-runnable-track {
  outline: none;
} #products input[type=range]::-moz-range-track {
  background-color: #fff;
  height: 3px;
} #products input[type=range]::-ms-track {
  background-color: #60aeff;
  height: 3px;
} #slider-products .slick-list img {
	max-width: 100%;
	max-height: 600px;
}

#quote-your-own-project {
	margin-top: -19px;
}

#formulario {
	margin-top: -19px;
	padding: 60px 0px;
	background-image: url("/img/projects/BACK.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
} #formulario .block {
	width: 80%;
	background-color: #fff;
	box-shadow: 5px 5px 20px #666;
	padding: 50px 100px;
} #formulario p {
	color: #233543;
	font-family: "Mazzard-Bold";
} #formulario span {
	color: #5a5a5a;
	font-family: "Mazzard-Light";
} #formulario #help {
	position: absolute;
	right: -30px;
} #formulario #help img {
	width: 20px;
} #formulario label {
	color: #5a5a5a;
	font-family: "Mazzard-Light";	
} #formulario input, #formulario select, #formulario textarea {
	border-radius: 0px;
	border: 1px solid #c2c2c4;
} #formulario .yellow {
	background-color: #fffff0;
}

#otherproducts {
	margin-top: -19px;
	padding: 60px 0px;
	background-color: #ffffff;
} #otherproducts .block {
	width: 250px;
} #otherproducts p {
	font-size: 12px;
} #otherproducts #right .productInLine {
	max-width: 100%;
	max-height: 250px;
} #otherproducts #slider-otherproducts div img {
	max-width: 100%;
	max-height: 250px;
	padding: 0px 5px;
} #otherproducts #catalog img {
	max-height: 42px !important;
}


#brands {
	padding: 60px 0px;
	background-color: #00b0ff;
} #brands h2{
	color: #fff;
} #brands p {
	color: #0449ae;
} #brands #slider-brands div img {
	max-width: 100%;
	padding: 0px 5px;
}

#projects {
	padding: 80px 0px;
} #projects a {
	text-decoration: none;
	color: #094eb5;
} #projects p {
	display: block;/* or inline-block */
	display: -webkit-block;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow: hidden;
	max-height: 76px;
} #projects .readmore  {
	margin-bottom: 10px;
}

/* Alinea el botón "Read more" a la misma altura en toda la fila — .col-lg-3
ya queda igual de alto que sus hermanos (align-items:stretch por defecto del
.row flex de Bootstrap), pero .block adentro no heredaba esa altura y se
quedaba con su alto natural (según cuánto texto tuviera cada proyecto), así
que el botón terminaba a distinta altura en cada tarjeta. */
#projects .block {
	height: 100%;
	display: flex;
	flex-direction: column;
} #projects .block .box-start-center {
	margin-top: auto;
}

#faq {
	padding: 60px 0px;
} #faq .card {
	border: 0px;
} #faq .card-header {
	background-color: #fff; /* white */
	border: 0px;
	padding: 20px 0px;
	border-top: 1px solid #0b4eb6; /* gray */
	border-radius: 0px;
} #faq .card-body {
	padding: 0px 0px 0px 0px;
	padding-bottom: 30px;
} #faq a {
	text-decoration: none;
	color: #0b4eb6; /* blue */
} #faq svg {
	min-width: 14px !important;
	min-height: 14px !important;
	max-width: 14px !important;
	max-height: 14px !important;
}

#contacto {
	padding: 60px 0px;
	background-color: #eff0f4;
} #contacto input, #contacto textarea, #contacto select {
	border: 1px solid #c6c7c9;
	border-radius: 5px;
	padding: 5px 0px 5px 10px;
	font-family: "Mazzard-LightItalic";
	color: #7e7e7e;
}