body { font-family: 'Mulish', 'Muli', sans-serif; color: #414141; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: bold; color: #202020; }
/* height:auto is required alongside the width/height attributes on <img>.
   Without it a width-constrained image keeps its attribute height and
   stretches vertically. */
img { max-width: 100%; height: auto; }
hr { border-top: 2px solid rgba(32, 32, 32, 0.25); }

/* Tipografia */
.entry-title { margin-bottom: 1em; font-size: 30px; line-height: 37px; }
.entry-title::after { content: ''; display: block; height: 5px; width: 200px; margin-top: .5em; background: #3C874F; }
.text-center .entry-title::after { margin: .5em auto 0; }
.lead { font-size: 25px; font-weight: normal; line-height: 40px; }

/* Buttons */
button:focus, button:active { outline: none; }
.btn { padding: .8em 2.5em; font-size: 22px; }
.btn-light { background: transparent !important; color: #FFF !important; border: 4px solid #FFF; }
.btn-light img { margin: -2px 7px 0 0; }
.btn-light:hover { background: #3C874F !important; border-color: #3C874F; }

/* Header */
.navbar { background: rgba(0, 0, 0, 0.8); }
.navbar-brand { width: 152px; }
.navbar-toggler { border: none; }
.navbar-toggler span { position: relative; display: inline-block; vertical-align: middle; height: 2px; width: 22px; margin-top: -4px; background: #FFF !important; text-align: initial; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.navbar-toggler span::before, .navbar-toggler span::after { content: ''; position: absolute; height: 100%; width: 100%; background-color: #FFF; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.navbar-toggler span::before { -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); }
.navbar-toggler span::after { -webkit-transform: translateY(7px); -ms-transform: translateY(7px); transform: translateY(7px); }
.open .navbar-toggler span { background: rgba(255, 255, 255, 0) !important; }
.open .navbar-toggler span::before { -webkit-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
.open .navbar-toggler span::after { -webkit-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); }
/* Single CTA, always visible - the stacked-menu padding and dividers that
   used to separate nav items are no longer needed. */
.navbar-nav .nav-item { padding: 0; border-bottom: 0; }
.navbar-nav .nav-link { font-size: 22px; font-weight: bold; color: #FFF !important; line-height: 28px; text-align: center; }
.navbar-nav .nav-link.active { text-decoration: underline; }
/* Scrollspy marks the CTA active on the download section; the green pill
   should not pick up an underline when it does. */
.navbar-nav .nav-link.current.active { text-decoration: none; }
.navbar-nav .nav-link.current { display: block; padding: .8em; background: #39B54A; border-radius: 4px; -webkit-border-radius: 4px; }
.navbar-nav .nav-link.current:hover { background: #3C874F; text-decoration: none; }

/* Footer */
.site-footer { padding: 2em 0 0; background: #202020; }
.site-footer .site-logo { margin-bottom: 3em; }
.site-footer a { color: #FFF; }
.site-footer h4 { font-family: 'Mulish', 'Muli', sans-serif; font-size: 22px; font-weight: bold; color: #FBD65F; line-height: 28px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer ul li a { opacity: 0.8; font-size: 22px; font-weight: bold; color: #FFF; color: #FFFFFF; line-height: 36px; }
.site-footer p { opacity: 0.8; font-family: 'Mulish', 'Muli', sans-serif; font-size: 22px; font-weight: bold; color: #FFF; line-height: 28px; }
.site-footer .btn-download { margin: .6em auto; }
.site-footer .site-copy { margin-top: 1em; padding: 1em 0; border-top: .5px solid #3e3d3d; }
.site-footer .site-copy p { font-size: 16px; font-weight: 200; letter-spacing: 0.1px; line-height: 20px; }
.site-footer .site-copy ul { margin: 0; padding: 0; list-style: none; }
.site-footer .site-copy ul li { display: inline-block; vertical-align: middle; }
.site-footer .site-copy ul li a { padding: 10px; font-size: 16px; font-weight: bold; color: #FFF; letter-spacing: 0.1px; line-height: 20px; text-decoration: underline; }

/* Banner */
/* The photo is a bright sunset: white text over it measured 1.9:1 and the
   yellow eyebrow 1.3:1, both well under the 3:1 minimum for large text.
   A scrim over the photo carries the type instead of restyling it. */
.banner { padding: 10em 0 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.40) 100%), url(../images/banner-movil.webp) no-repeat center center; background-size: cover; color: #FFF; text-align: center; -webkit-background-size: cover; }
/* Was an h1; now a paragraph, because the big line below it is the real
   heading. Keeps the styling, loses the false semantics. */
.banner .eyebrow { margin-bottom: .3em; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: bold; color: #FBD65F; }
.banner h1 { margin-bottom: 1em; font-size: 40px; font-weight: 600; color: #FFF; }
.banner .heromobil { width: 80%; margin: 5em 0 -6em; }

/* Sections */
.content-sections { padding: 3em 0; }

/* about */
#about { padding-top: 7em; }
#about ol { counter-reset: line; margin: 0; padding: 0; list-style: none; }
#about ol > li { position: relative; margin-bottom: .5em; }
#about ol > li:before { content: counter(line); counter-increment: line; display: inline-block; height: 78px; width: 78px; margin: 1em 0; background: #3C874F; font-family: 'Montserrat', sans-serif; font-size: 25px; font-weight: 700; color: #FFF; line-height: 78px; text-align: center; border-radius: 50%; -webkit-border-radius: 50%; }
#about ol > li h3 { font-size: 25px; color: #000; }
#about ol > li p { font-size: 18px; }

/* Pricing */
#pricing { padding-bottom: 0; background: #F9F9F9; }
.pricing-content { padding: 3em 0; }
.price { font-family: 'Montserrat', sans-serif; font-size: 60px; font-weight: bold; color: #3C874F; line-height: 73px; }

/* Testimonials */
#testimonials { background: #F9F9F9; }
.carousel-indicators { position: relative; bottom: 0; margin: 1em 0 0; }
/* Bootstrap 5 renders indicators as <button> bars rather than <li>; these
   restore the round dots. */
.carousel-indicators [data-bs-target] { height: 19px; width: 19px; margin: 0 6px; background: #8F8E94; border: 0; border-radius: 50%; opacity: 1; -webkit-border-radius: 50%; }
.carousel-indicators .active { background: #3C874F; opacity: 1; }
.carousel .lead { color: #202020; }
.carousel img { margin: 1em auto; }
.carousel .name { margin-bottom: 0; font-size: 25px; font-weight: bold; color: #202020; line-height: 40px; }
.carousel span { font-size: 20px; font-style: italic; color: #8F8E94; line-height: 25px; }

/* download */
#download { background: #39B54A; color: #FFF; }
#download .entry-title { color: #FFF; }
#download img { margin: 1em auto; }

/*--------------------------------------------------------------
# Media queries
--------------------------------------------------------------*/
@media (min-width:768px) {
	#download img { height: 88px; }
}
@media (min-width:992px) {
	.text-lg-start .entry-title::after { margin: .5em 0 0; }
	/* The 37px line-height inherited from the mobile rule is shorter than the
	   50px type, so any title that wraps collapses onto itself. */
	.entry-title { font-size: 50px; line-height: 60px; }
	.content-sections { padding: 4em 0; }
	.navbar-nav .nav-item { padding: 0; border-bottom: 0; }
	.navbar-nav .nav-link.current { padding: 5px 12px; }
	.site-footer .site-copy p { margin: 0; }
	/* Weighted left, where the headline sits, so the sunset and the phone
	   mockup on the right stay bright. */
	.banner { text-align: left; background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.70) 32%, rgba(0,0,0,.45) 52%, rgba(0,0,0,.12) 74%, rgba(0,0,0,0) 100%), url(../images/banner-desktop.webp) no-repeat center center; -webkit-background-size: cover; background-size: cover; }
	.banner .eyebrow { font-size: 30px; line-height: 36px; }
	.banner h1 { font-size: 60px; }
	.banner .heromobil { width: 100%; margin: 0em 0 -7em; }
	#about { padding-top: 8em; }
	#about ol > li { margin: 0; padding-bottom: 3em; padding-left: 4em; border-left: 0.5px dashed #979797; }
	#about ol > li:before { position: absolute; left: -39px; z-index: 2; margin: 0; }
	#about ol > li:last-child { border-left: 0; }
	.pricing-content { padding: 0 2em; }
	#download img { height: 88px; margin: 1em .5em; }
}
@media (min-width:1200px) {
	.banner h1 { margin-bottom: .5em; font-size: 70px; line-height: 86px; }
	.pricing-content { width: 60%; padding: 0 3em 0 6em; }
	.pricing-image { width: 50%; }
	.price { font-size: 80px; line-height: 97px; }
	.carousel { width: 60%; margin: 0 auto; }
}

/* Modals */
.modal-content { border: 0; border-radius: 6px; }
.modal-header { align-items: center; padding: 1.1em 1.4em; background: #202020; border: 0; border-radius: 6px 6px 0 0; }
.modal-title { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold; color: #FFF; }
/* .btn-close-white on the button supplies the white glyph against the dark
   header; only the resting opacity needs adjusting. */
.modal-header .btn-close { opacity: .8; }
.modal-header .btn-close:hover, .modal-header .btn-close:focus { opacity: 1; }
.modal-body { padding: 1.5em; font-size: 17px; line-height: 28px; }
.modal-body h6 { margin: 1.6em 0 .4em; font-size: 19px; color: #3C874F; }
.modal-body h6:first-of-type { margin-top: 1.2em; }
.modal-body p { margin-bottom: 1em; }
.modal-body ul { margin: 0 0 1em; padding-left: 1.2em; }
.modal-body li { margin-bottom: .5em; }
.modal-body a { color: #3C874F; font-weight: bold; }
.modal-date { font-size: 15px; color: #8F8E94; }
.modal-body .contact-btn { display: inline-block; margin: .2em 0 .6em; padding: .7em 1.6em; background: #3C874F; font-size: 19px; color: #FFF; border-radius: 4px; }
.modal-body .contact-btn:hover, .modal-body .contact-btn:focus { background: #2F6B3E; color: #FFF; text-decoration: none; }
.contact-addr { margin-top: 1.8em; font-size: 15px; color: #8F8E94; }

/* Contact form */
.contact-form { margin-top: 1.4em; }
.cf-field { margin-bottom: 1.1em; }
.cf-field label { display: block; margin-bottom: .35em; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: bold; color: #202020; }
.cf-field input, .cf-field textarea { display: block; width: 100%; padding: .6em .8em; background: #FFF; border: 2px solid #DDD; border-radius: 4px; font-family: 'Mulish', 'Muli', sans-serif; font-size: 17px; color: #414141; }
.cf-field input:focus, .cf-field textarea:focus { border-color: #3C874F; outline: 0; }
.cf-field input.cf-invalid, .cf-field textarea.cf-invalid { border-color: #D63A2F; }
.cf-hint { margin: .5em 0 0; font-size: 14px; line-height: 21px; color: #8F8E94; }
/* Off-screen rather than display:none - some bots skip hidden inputs. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .contact-btn { border: 0; cursor: pointer; }
.contact-form .contact-btn[disabled] { opacity: .6; cursor: default; }
.cf-status { margin: .9em 0 0; min-height: 1.4em; font-size: 16px; }
.cf-status.cf-ok { color: #3C874F; font-weight: bold; }
.cf-status.cf-err { color: #D63A2F; font-weight: bold; }

/* Contact: steer app problems to in-app support, where the report arrives with
   diagnostics attached. Styled as a notice rather than body copy because it
   has to be read before anyone starts typing. */
.cf-notice { padding: 1em 1.1em; margin-bottom: 1.1em; background: #F2F7F3; border-left: 5px solid #3C874F; border-radius: 4px; font-size: 16px; line-height: 25px; }
.cf-notice strong { color: #202020; }