@import url(vars.css);
@import url(qanelas.css);


html{
	width: 100vw;
	margin: 0px;
	padding: 0px;
	background-color: var(--bgcolor-claro01);
	scrollbar-width: thin;
	scrollbar-color: #757575 rgba(0,0,0,0.15);
	scrollbar-height: thin;
	overflow-x:hidden;
	font-size: 16px;
}

body{
	color: var(--color-texto);
	font-family: "Qanelas", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 1rem;
	font-weight: 500;
	margin: 0px;
	padding: 0px;
}



*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background-repeat: no-repeat;
	scrollbar-width: thin;
	scrollbar-color: #757575 rgba(0,0,0,0.15);
	scrollbar-height: thin;
}

a, a:active, a:visited{
	outline: none;
	text-decoration: none;
	color: var(--color-anclas);
}
a:hover {
	background-color:var(--azulclaro-fondo)
}

.btn-cta,.btn-cta:active{
	border-radius: var(--border-radius);
	color: #fff !important;
	box-shadow: var(--box-shadow);
	background-color: var(--pleca-verde);
}

.btn-cta:hover{
	box-shadow: none;
	background-color: var(--azuloscuro);
	background-color: var(--pleca-azul-oscuro);
}

p {
	margin: 0;
}
h1,h2,h3,h4,h5,h6{
	font-weight: 600;
	font-family: 'Qanelas',Arial, Helvetica, sans-serif;
	line-height: normal;
	color: var(--color-titulos);
	margin: 0;
}

h1{
	font-size: 1.6rem;
}

h2{
	font-size: 1.4rem;
}

h3{
	font-size: 1.2rem;
}

h4{
	font-size: 1rem;
}

h5{
	font-size: 1rem;
}

h6{
	font-size: 1rem;
}


li{
	margin: 0.35rem 0;
}
.nowrap{
	white-space:nowrap;
}
.text-mini, .mini-text{
	font-size: 0.75rem !important;
}
.text-big, .big-text{
	font-size: 1.1rem !important;
}

small, .small{
	font-size: 0.8rem !important;
}
.i{
	font-style: italic;
}
.b{
	font-weight: 600;
}
.center{
	text-align:center;
}
.right{
	text-align: right !important;
}
.hidden,.hideMe{
	display: none !important;
}

.dimmed-color{
	color: var(--text-color-dimmed);
}

.highlite{
	color: var(--text-color-high);
}

.border, .borders, .bordes{
	border: 1px solid var(--bordes);
} 
.round-corners{
	border-radius: var(--border-radius);
}

.w100{
	width: 100% !important;
	display: inline-block;
}
.w75{ 
	width: 75% !important;
	display: inline-block;
}
.w50{ 
	width: 50% !important;
	display: inline-block;
}
.w30{
	width: 30% !important;
	display: inline-block;
}
.w20{
	width: 20% !important;
	display: inline-block;
}

.w15rem{ 
	width: 15rem !important;
}
.w10rem{
	width: 10rem !important;
}
.w9rem{ 
	width: 9rem !important;
}
.w8rem{
	width: 8rem !important;
}

.w7rem{
	width: 7rem !important;
}

.w6rem{
	width: 6rem !important;
}

.w5rem{
	width: 5rem !important;
}

.wAuto{ 
	width: auto !important;
}

.wFit{ 
	width: fit-content !important;
}

.p0 {
	padding: 0rem !important;
}
.p1{ 
	padding: 1rem !important;
}
.p05{
	padding: 0.5rem !important;
}
.p1m, .p15 { 
	padding: 1.5rem !important;
}
.p2{
	padding: 2rem !important;
}
.p25 {
	padding: 2.5rem !important;
}
.p3{
	padding: 3rem !important;
}
.FR{
	float:right;
}

.m0{
	margin: 0 !important;
}
.mb05{
	margin-bottom: 0.5rem !important;
}
.mb075{
	margin-bottom: 0.75rem !important;
}
.mb15{
	margin-bottom: 1.5rem !important;
}
.mb1{
	margin-bottom: 1rem !important;
}
.mb2{
	margin-bottom: 2rem !important;
}
.mb3{
	margin-bottom: 3rem !important;
}
.mt05{
	margin-top: 0.5rem !important;
}
.mt075{
	margin-top: 0.75rem !important;
}
.mt15{
	margin-top: 1.5rem !important;
}
.mt1{
	margin-top: 1rem !important;
}
.mt2{
	margin-top: 2rem !important;
}
.mt3{
	margin-top: 3rem !important;
}
.cc{
	width: 100%;
	margin: auto;
	max-width: var(--cc-width);
	display: block;
}

.sombra{
	box-shadow: var(--box-shadow);
}

.azulclaro{
	color: var(--azulclaro);
}
.naranja{
	color: var(--naranja);
}
.azuloscuro{
	color: var(--azuloscuro);
}

.on-fire{
	display:block;
	background-image:url(gfx/fire.png);
	aspect-ratio: 50 / 72;
	background-size: cover;
}

/*------------------------------------------------------------------------

	Secciones

-------------------------------------------------------------------------*/

header {
	width: 100%;
	height: var(--header-height);
	z-index: 300;
	background-color: #fff;
	position:fixed;
	top:0;
	left:0;
	box-shadow: 0 2px 7px rgba(0,0,0,0.1);
}

.header-box{
	display:flex;
	height: var(--header-height);
	gap: 1rem;
}
.header-logo{
	flex: 0 1 7rem;
	display:flex;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.25rem 0 1rem;
}
.header-logo a, .header-logo img{
	width:100%;
	display: inline-block;
}

.header-logo span{
	display: none;
}

.header-opciones{
	flex: 0 1 100%;
	display:flex;
	gap: 0.7rem;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding-right: 1rem;
}

.header-cta{
	white-space:nowrap;
	height: 2rem;
	line-height:100%;
	line-height:2rem;
	padding: 0 0.5rem 0 1rem;
	font-size: 0.94rem;
}

.header-cta img{
	vertical-align: middle;
	width: 1rem;
}

.header-tel{
	background-image: url(iconos/azulc/phone-call.svg);
	height: 2rem;
	width: 2rem;
	background-position:center;
	border: 1px solid var(--bordes);
	background-size: 50%;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}


.header-tel>*{
	display:none;
}


main {
	margin-top: var(--header-height);
	min-height: calc(100vh - 5rem - var(--header-height));
}

footer{
	background-color: var(--azuloscuro);
	min-height: 5rem; 
	min-height: 100vh;
}

/* CLASES COMUNES -------*/

.section-title{
	background-color:var(--azuloscuro);
	color: #fff;
	display:inline-block;
	width: fit-content;
	/* white-space:nowrap; */
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	border-radius: 2rem;
	font-weight: 500;
}

.pildora-azul{
	font-size: 0.9rem;
	border-radius: 2rem;
	background-color:var(--azulclaro-fondo);
	padding: 0.1rem 0.3rem;
	color: var(--azulclaro);
}

.pildora-azuloscuro{
	font-size: 0.86rem;
	border-radius: 2rem;
	background-color:var(--azuloscuro);
	padding: 0.1rem 0.3rem;
	color: #fff;
}

/* HERO ------------------------------------------------------------------*/

#hero {
	background-color: var(--bgcolor-claro01);
	background-size: auto 100%;
	background-position: center;
}

.hero-chd{
	background: linear-gradient( to right, var(--bgcolor-claro01) 80%, transparent 140%);
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hero-texts{
	display:flex;
	flex-direction:column;
	gap: 1.3rem;
	padding: 2rem 1.5rem;
}

.hero-texts p{
	font-size: 1.1rem;
}

.hero-subtitle{
	font-size: 3rem !important;
	line-height: 2.9rem;
	padding-right: 1rem;
	margin: 0.5rem 0 !important;
	font-weight: 600;
}

.hero-subtitle2{
	font-size: 1.24rem !important;
	line-height: normal;
	padding-right: 3rem;
}

.hero-subtitle2 span{
	font-weight: 600;
}

.hero-barra-iconos{
	display:inline-block;
}

.hero-icons, .hero-icons-rotulos{
	display:flex;
	padding: 0 0.3rem;
	
}

.hero-icons img{
	width: 50%;
}

.hero-ico-box {
	flex: 0 0 20%;
}

.hero-iconos-sep{
	flex: 0 1 2rem;
	min-width: 1rem;
}

.hero-icons-ico{
	text-align:center;
}

.hero-icons-rotulo{
	font-size: 0.8rem;
	text-align:center;
	/* letter-spacing: -0.02rem; */
}

.hero-icons-rotulos{
	border-radius: 0.3rem;
	background-color:#f2f2ef;
	padding: 0.15rem 0.3rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #e7e7e175;
}

.hero-icons-rotulos .hero-iconos-sep{
	background-image:url(iconos/color-texto/plus.svg);
	background-size: 1rem;
	background-position:center;
	height: 1rem;
}

#hero p{
	margin:0;
}

.hero-cards{
	display:flex;
	gap: 4%;
	flex-wrap:wrap;
}

.hero-cards>div{
	flex: 0 0 48%;
	border:1px solid var(--bordes);
	border-radius:var(--border-radius);
	background-color:#fff;
	padding: 0.5rem;
	justify-content:center;
	align-items:center;
	border: 2px solid var(--bordes);
	z-index: 1;
}

.hero-cards>small{
	flex: 0 0 100%;
	margin-top:0.5rem;
}

.hero-cards-7dias{
	display:flex;
	flex-direction:row;
	gap: 0.5rem;
}

.hero-cards-7dias .icono{
	flex: 0 0 1.8rem;
	width: 100%;
	margin: auto;
}

.hero-cards-7dias>span{
	flex: 0 1 100%;
	font-size: 0.85rem;
}

.hero-cards-precio{
	display:flex;
	flex-direction:column;
	position:relative;
}

.hero-cards-precio h2{
	font-size: 0.91rem;
	flex: 0 0 auto;
	font-weight: 500;
	color: var(--color-texto);
}
.hero-cards-precio>div{
	flex: 0 0 auto;
	display:flex;
	flex-direction:column;
	width: 100%;
	align-items: center;
}
.hero-card-precio{
	font-size: 1rem;
	font-weight: 600;
	width: 100%;
	text-align:center;
	opacity: 0.5;
}
.hero-card-precio-oferta{
	color:var(--naranja);
	color: var(--azuloscuro);
	font-weight:600;
	font-size: 1.3rem;
	text-decoration: none;
	display:flex;
	gap: 0.2rem;
	align-items: flex-end;
}

.hero-card-precio-oferta span{
	color:var(--anaranjado);
	text-decoration: none;
	font-weight:600;
}
.hero-card-precio-oferta .hero-moneda{
	font-size: 0.8rem;
	margin-bottom: 0.1rem;
}

.hero-cards-precio .hero-hoy{
	font-size: 0.9rem;
	font-weight:700;
	line-height: 2.5rem;
	position:absolute;
	width: 2.6rem;
	height:2.6rem;
	background-color: var(--naranja);
	border-radius: 7px;
	color: #fff;
	top: -1rem;
	right: -0.75rem;
	text-align: center;
	box-shadow:var(--box-shadow);
	transform:rotate(10deg);
}


.hero-cta{
	font-size: 1.1rem;
	padding: 0.7rem;
	margin-top:0.5rem;
	display:inline;
	text-align: center;
}

.hero-cta img{
	width: 1rem;
	vertical-align:middle;
}


.hero-promos{
	display: none;
}

/* COMO FUNCIONA ---------------------------------------------------------*/

#como-funciona{
	background-color: white;
}

.como-box{
	padding: 3rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.como-subtitulo{
	font-size: 2rem;
	font-weight: 600;
	line-height: 2rem;
	color: var(--azuloscuro);
	padding-right: 30%;
}

.como-subtext{
	font-size: 1.1rem;
}

.como-cards{
	width: 100%;
	display:flex;
	flex-direction:column;
	gap: 1.5rem;
	margin: 1rem 0;
}
.como-card{
	border: 1px solid var(--bordes);
	display:flex;
	flex-direction:column;
	gap: 0.2rem;
	border-radius: 0.5rem;
	box-shadow:var(--box-shadow);
}

.como-card>*{
	flex: 0 0 auto;
	width: 100%;
	padding: 0 1.6rem;
}

.como-card-foto{
	width: 100%;
	flex: 0 0 6rem;
	overflow:hidden;
	padding: 0 0.8rem;
	margin-top: 0.8rem;
	margin-bottom: 0.5rem;
}

.como-card-foto img{
	width: 100%;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.como-card-linea-ico{
	display:flex;
	justify-content: space-between;
}
.como-card-icono{
	flex: 0 0 2.3rem;
}
.como-card-icono img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.como-card-no{
	flex: 0 0 auto;
	font-weight: 800;
	font-size: 1.9rem;
	opacity: 0.5;
}
.como-card h3{
	font-size: 1.2rem;
	font-weight: 400;
}
.como-card-objetivo{
	font-size: 1rem;
	font-weight: 600;
	color: var(--azulclaro);
	display: flex;
	justify-content: space-between;
}
.como-card button.como-card-mas{
	flex: 0 0 2.5rem;
	height: 1.2rem;
	padding: 0;
	text-align:right;
	background-color: transparent;
	border: 0;
}
.como-card button.como-card-mas::before{
	content: "+";
	text-align: center;
	background-color: var(--azulclaro) !important;
	border-radius: 1rem;
	width: 1.2rem;
	height: 1.2rem;
	display:inline-block;
}

.como-card.abierta button.como-card-mas::before{
	content: "-";
	text-align: center;
	background-color: var(--azuloscuro) !important;
	line-height: 1rem;
}

.como-card-mas img{
	width: auto;
	height: 100%;
	display: none;
}
.como-card-descripcion{
	height: 0;
	overflow:hidden;
	transition: height 1s ease;
	max-height: fit-content;
}

.como-card.abierta .como-card-descripcion{
	height: 50vh;
	transition: height 0.5s ease;
}

.como-card-iconos{
	margin-bottom: 1rem;
	margin-top: 0.2rem;
}

.como-card-iconos, .como-card-iconos .pildora-azul{
	display:flex;
	gap: 0.3rem;
	align-items: center;
}
.como-card-iconos .pildora-azul{
	display:flex;
	gap: 0.3rem;
	margin: 0;
	align-items: center;
}
.como-card-iconos img{
	height: 1rem;
	width: auto;
}

.como-nota-marketing{
	font-size: 0.9rem;
}

.como-conclusion{
	font-size: 1.3rem;
	color: var(--azulclaro);
	font-weight: 500;
}

.como-cta-box{
	margin-top: 1rem;
	display:flex;
	flex-direction:column;
	gap: 1.5rem;
	
}



.como-cta-tip{
	padding: 1rem;
	position:relative;
	line-height: 0.95rem;
	overflow:hidden;
	background-color: var(--bgcolor-claro01);
	/* border-left:8px solid var(--azuloscuro); */
	color: var(--azuloscuro);
	border-radius: var(--border-radius);
}

.como-cta-tip img{
	height: 2.5rem;
	margin-bottom: 0.2rem;
}

.como-cta .btn-cta{
	display: block;
	font-size: 1.1rem;
	padding: 0.7rem;
	margin-top: 0.5rem;
	text-align: center;
}

.como-cta img{
	width: 1.5rem;
	vertical-align:middle;
}

/* PORQUE  ---------------------------------------------------------------*/

#porque{
	width: 100%;
	display:inline-block;
	position:relative;
	/* margin: 2rem 0; */
}

.pq-title-box{
	width: 100%;
	display:flex;
	flex-direction:column;
	background-color:var(--azuloscuro);
	padding: 1.5rem;
	gap: 1rem;
	background:radial-gradient(circle at center, #153266 0%, #153266 15%, #0d182c 75%);
	text-shadow: 3px 3px rgba(0,0,0,0.5);
	background:radial-gradient(
	ellipse at 50% 35%,
	#153266 0%,
	#112440 40%,
	#0d182c 75%
);
}

#pq-title{
	flex: 0 0 auto;
	padding: 0 7%;
	font-size: 2.1rem;
	text-align: center;
	line-height: 2.5rem;
	color: #fff;
}

.pq-title-arr{
	width: 5rem;
	height: 5rem;
	background-color: #fff;
	border-radius: 3rem;
	margin-bottom: -5rem;
	margin: 0rem auto -4.5rem auto;
	border: 1px solid var(--bordes);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
	display: flex;
	justify-content: center;
	align-items: center;
}
.pq-title-arr img{
	width: 70%;
}

.pq-title-subtext{
	flex: 0 0 auto;
	padding: 0 5%;
	font-size: 1.4rem;
	text-align: center;
	line-height: 1.5rem;
	color: var(--naranja);
	font-weight: 600;
	color: var(--texto-verde);
}



.pq-box{
	width: 100%;
	display:flex;
	padding: 3rem 1.5rem 4rem 1.5rem;
	flex-direction:column;
	gap: 1.2rem;
	margin-top: 1rem;
}

.pq-tusitio{
	text-align:center;
	font-size: 1rem;
}

.pq-tusitio .pildora-azuloscuro{
	font-size: inherit;
	padding: 0.15rem 0.6rem;
	vertical-align:middle;
}


.pq-cards-box{
	width: 100%;
	margin: 1rem 0;
	display:inline-block;
}

.pq-card {
	border: 1px solid var(--bordes);
	border-radius: var(--border-radius);
	display:inline-block;
	padding: 1rem;
	margin: 1rem 0;
}



.pq-card h3{
	font-size: 1.2rem;
	text-transform:uppercase;
	letter-spacing: -0.02rem;
}
.pq-card h3, .pq-card p{
	text-align:center;
	margin-bottom: 0.5rem;
}

.pq-lista-val>div{
	text-align:center;
}

.pq-lista-val>div img{
	max-width: 14rem;
	margin: 0.8rem 0;
}

.pq-card ul{
	list-style: none;
	padding:0;
}
.pq-card li{
	margin: 0.5rem 0;
	padding-left: 2.8rem;
	background-size: 1.8rem;
}

.pq-card li{
	background-image: url(iconos/ok.svg);
}

.pq-card.webpa li{
	background-image: url(iconos/ok-no.svg);
}
.pq-card li strong{
	width: 100%;
	display:inline-block;
	color: var(--azuloscuro);
}

.pq-card.ique{
	border: 2px solid var(--naranja);
	box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
	border-color: var(--azulclaro);
}


.pq-conclusion{
	text-align: center;
	font-size: 1.1rem;
}
.pq-conclusion strong{
	text-transform:uppercase;
	font-size: 1.6rem;
	padding: 0.5rem 0;
	/* white-space:nowrap; */
	display: block;
	font-weight: 800;
}

.pq-cta{
	width: 100%;
	display:block;
	padding: 0.7rem 0rem !important;
	text-align:center;
	margin: 0.5rem 0;
	font-size: 1rem;
	font-weight:500;
}

.pq-cta img{
	vertical-align:middle;
	margin-left: 0.2rem;
	width: 1.5rem;
}


/* MARKETING --------------------------------------------------------------*/

#marketing{
	background-color: #fff;
	background-image:url(gfx/mark-fondo.svg);
	background-position: right 2rem top 2rem;
	background-size: 70%;
	background-attachment:fixed;
	position:relative;
	padding: 5rem 0 0rem 0;
	display:inline-block;
}

.mark-top, .mark-cards, .mark-cta{
	width: 100%;
	display: inline-block;
	padding: 3rem 2rem;
}

.mark-top-flex{
	display: flex;
	flex-direction:column-reverse;
}

.mark-top-foto{
	flex: 0 0 10rem;
	overflow:hidden;
	border-radius:var(--border-radius);
	box-shadow: var(--box-shadow);
	border: 7px solid #fff;
}

.mark-top-foto img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.mark-top-textos{
	display: flex;
	flex-direction:column;
	gap: 1.5rem;
}

#mark-title{
	margin-top: -13rem;
	margin-bottom: 12rem;
}

.mark-subtitle{
	font-size: 2.2rem;
	line-height: 2.3rem;
	color: var(--azuloscuro);
	font-weight: 600;
}

.mark-cards{
	background-color: var(--azulclaro-fondo);
	background-color: var(--bgcolor-claro01);
}
.mark-cards-box{
	display:flex;
	flex-direction:column;
	gap: 2rem;
}

.mark-card{
	background-color:#fff;
	padding: 1rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--bordes);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.mark-card h3{
	font-weight: 600;
	font-size: 1.4rem;
	text-transform: uppercase;
}

.mark-card ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.mark-card li{
	display: flex;
	align-items:center;
}
.mark-card li span{
	flex: 0 0 1.5rem;
	border: 1px solid var(--bordes);
	border-radius: 0.3rem;
	margin-right: 0.7rem;
	padding: 0.3rem;
	aspect-ratio: 1 / 1;
}
.mark-card li img{
	width: 1.4rem;
	vertical-align: middle;
}

.mark-hr{
	height: 1px;
	width: 100%;
	display: block;
	background-color:var(--bordes);
	margin: 0.5rem 0;
}

.mark-card.ique{
	border: 2px solid var(--azulclaro);
	box-shadow: 4px 4px 6px rgba(0,0,0,0.2);
	position:relative;
}
.mark-pil-opcional{
	font-size: 0.9rem;
	position: absolute;
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--azulclaro);
	border-radius: 0.3rem;
	background-color: #fff;
	top: -1.3rem;
	left: 1rem;
}

.mark-cta-flex{
	display:flex;
	flex-direction:column;
	gap: 2rem;
}

.mark-cta-hint{
	flex: 0 0 auto;
	padding: 1rem;
	position: relative;
	line-height: 0.95rem;
	overflow: hidden;
	background-color: var(--bgcolor-claro01);
	color: var(--azuloscuro);
	border-radius: var(--border-radius);
}
.mark-cta-box{
	flex: 0 0 auto;
}

.mark-btn-cta{
	width: 100%;
	display: block;
	padding: 0.7rem 0.5rem !important;
	text-align: center;
	margin: 0.5rem 0;
	font-size: 1.1rem;
	/* white-space:nowrap; */
}

.mark-btn-cta img{
	vertical-align:middle;
}


/* CTA ------------------------------------------------------------------ */

#cta{
	box-sizing:border-box;
	position: relative;
	padding: 1rem 0;
	background-color: #fff;
	border-top: 1px solid var(--bordes);
}

#cta>*{
	box-sizing:border-box;
}

.cta-textos{
	padding: 3rem 2rem 1rem 2rem;
	display: flex;
	flex-direction:column;
	gap: 1rem;
}

.cta-subtitulo{
	font-size: 2.4rem;
	line-height: 2.4rem;
	padding-right: 10%;
	color: var(--azuloscuro);
	font-weight: 600;
	margin: 0.75rem 0;
}

.cta-calculadora-hint{
	width: 100%;
	background-color: var(--bgcolor-claro01);
	border-radius: var(--border-radius);
	padding: 0.75rem;
	display: flex;
}

.cta-calculadora-hint p{
	flex: 0 1 100%;
}

.cta-calculadora-hint img{
	flex: 0 1 4rem;
	height: 100%;
}

#sticky-sentinel{
	height:1px;
	width:100%;
	visibility:hidden;
	position:static;
}
#cta-sticky-col {
	position: sticky;
	top: calc(var(--header-height, 0px) - 0.5rem);
	height:auto;
	display:flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow-anchor: none;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.cta-card-fijo{
	flex-shrink: 0 !important;
	flex-grow: 0  !important;
	flex-basis:auto;
}

.cta-card-colapsable{
	flex-shrink: 1 !important;
	flex-grow: 0 !important;
	flex-basis:auto;
	overflow: hidden;
	display:inline-block;
	width: 100%;
	min-height:0;
	height: 0;
	max-height: min-content;
}

#cta-sticky-col.abierto .cta-card-colapsable{
	height: 50vh;
}

#cta-roi-expand{
	border: 0;
	padding: 0.1rem 1rem;
	font-size: 0.84rem;
	margin-top: 0.5rem;
	background-color: var(--azulclaro);
	width: auto;
	margin: 1rem auto 0 auto;
	display:flex;
	align-items:center;
	gap: 0.3rem;
}
#cta-roi-expand::before{
	content: "Ver cálculo y proyección";
	
}
#cta-roi-expand::after{
	width: 1rem;
	height: 1rem;
	display:block;
	content: " ";
	background-image: url(iconos/blanco/arrow-down.svg);
	background-size: 1rem;
}

#cta-sticky-col.abierto #cta-roi-expand::after{
	background-image: url(iconos/blanco/arrow-up.svg);
}

#cta-sticky-col.abierto #cta-roi-expand::before{
	content: "Ocultar";
	
}

.cta-card-fijo,.cta-card-colapsable{
	display:flex;
	flex-direction:column;
	transition: height 0.3s ease;
}

.cta-card-fijo>*,.cta-card-colapsable>*{
	flex: 0 0 auto;
	width: 100%;
}

.cta-cotizador{
	padding: 0.75rem;
	/* background-color:purple; */
	overflow-anchor:none;
	position: relative;
}


.cta-card{
	background-color:#fff;
	padding: 1rem;
	border-radius: var(--border-radius);
	border: 1px solid var(--bordes);
	margin: 0.5rem 0;
}


.cta-roi-subtitulo-box{
	display:inline-block;
	padding: 0 0.4rem;
	border-radius: 0.5rem;
	font-size: 0.98rem;
	line-height: 1.4rem;
	width: min-content;
	white-space:nowrap;
	font-weight: 400;
}
#cta-inversion-title{
	background-color: var(--bgcolor-claro01);
	color: var(--azuloscuro);
	margin-bottom: 0.7rem;
}
#cta-retorno-title{
	background-color:var(--pleca-verde);
	color: #fff;
	margin: 0.6rem 0 0.2rem 0;
}

.cta-renglon-monto{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	font-size: 0.9rem;
	/* line-height: 1.8rem; */
	border-bottom: 1px solid var(--bordes);
	padding: 0.5rem 0;
	margin: 0;
}

.cta-renglon-monto .rotulo{
	flex: 0 1 100%;
	
}

.cta-renglon-monto .monto{
	flex: 0 0 auto;
}

.cta-renglon-monto span.rotulo,.cta-renglon-monto span.monto{
	font-size: 0.9rem;
}
.cta-renglon-monto strong.rotulo,.cta-renglon-monto strong.monto{
	font-size: 1.1rem;
	font-weight:600;
	line-height: 1.1rem;
}



.cta-cotizador .pildora-azul{
	white-space:nowrap;
	width: min-content;
	margin-bottom: 0.5rem;
}

.cta-roi-visor{
	border-radius: 0.5rem;
	padding: 0.35rem;
	display:flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	margin: 0.5rem 0 0 0;
}

.cta-roi-visor.verde{
	background-color:var(--verdeclaro-fondo);
	border: 1px solid var(--verde-borde);
}

.cta-roi-visor.verde *{
	color: var(--texto-verde);
}

.cta-roi-visor.azul{
	background-color:var(--azulclaro-fondo);
	border: 1px solid var(--azulclaro-borde);
}
.cta-roi-visor.azul *{
	color: var(--azulclaro);
}

.cta-roi-visor-rot{
	font-size: 0.9rem;
	flex: 1 1 50%;
	line-height: 1.6rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.cta-roi-visor-val{
	font-size: 1.1rem;
	font-weight:600;
	flex: 0 1 50%;
	text-align:right;
}

.cta-roi-2domes h4{
	font-size: 0.8rem;
	flex: 0 0 calc(100% - 10rem);
	white-space:nowrap;
	font-weight: 500;
}
.cta-roi-2domes strong{
	font-size: 1.1rem;
	flex: 0 0 10rem;
	text-align:right;
}
#lblDetalleMes2, .cta-punto-equilibrio-text{
	font-size: 0.9rem;
	padding: 0.3rem 0;
}

.cta-proyeccion-titulo{
	margin-top: 0.7rem;
	font-size: 0.96rem;
	color:var(--azuloscuro);
	font-weight:500;
}


.table-projections { 
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-top: 0.5rem;
}
.table-projections th, .table-projections td {
	padding: 0.4rem 0.2rem;
	text-align: center;
	border-bottom: 1px solid var(--bordes);
	font-size: 0.9rem;
}

#tblProyeccion tr:last-child td {
	border-bottom: 0;
	padding-bottom:0;
}

.table-projections th {
	background: #f8fafc;
	font-weight: 500;
	color: #475569;
	font-size: 0.8rem;
}

.table-projections-utilidad{
	font-weight:600;
	color: var(--texto-verde);
}

#cta-forma{
	min-height: 100vh;
	top: 0.75rem;
	left: 0.75rem;
}

#cta-forma-title{
	background-color: var(--bgcolor-claro01);
	color: var(--azuloscuro);
	margin-bottom: 0.7rem;
}

.cta-form-paso-no{
	display: flex;
	align-items:center;
	gap: 0.5rem;
	
}

.cta-form-paso-no .no{
	flex: 0 0 3rem;
	font-weight: 800;
	font-size: 2.5rem;
	color:var(--azulclaro);
}

.cta-form-paso-no .texto{
	flex: 0 1 55%;
	font-size: 0.9rem;
	font-weight: 500;
}

.cta-form-paso-no .input-box{
	flex: 0 0 min-content;
	display:flex;
	gap: 0.5rem;
	align-items: center;
}

.cta-form-paso-no .input-box span{
	font-size: 0.8rem;
}
.cta-form-paso-no .input-box input{
	flex: 0 0 6rem;
	width: 6rem;
	border: 1px solid var(--bordes);
	height: 2.5rem;
	border-radius: 0.5rem;
	text-align: center;
	color: var(--azulclaro);
	font-size: 1.4rem;
	outline: none;
	font-weight: 700;
}

.section-label { 
	font-size: 0.9rem; 
	font-weight: 600;
	text-transform: uppercase;
	margin: 1rem 0 0.5rem 0;
	letter-spacing: 0.7px;
	
}
.option-item { 
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--bordes);
	font-size: 0.9rem;
}
.option-item label { 
	display: flex; 
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	flex-grow: 1;
}
.option-item.disabled { 
	opacity: 0.5; 
	pointer-events: none;
}

.price-tag { 
	font-weight: 600; 
	
}
.price-strike { 
	text-decoration: line-through; 
	color: #94a3b8; 
	font-size: 12px; 
	margin-right: 4px;
}
.free-tag { 
	color: var(--texto-verde); 
	font-weight: bold;
}

.cta-boton-cta-box{
	padding: 1rem 0;
}

button.btn-cta{
	border: 0;
	font-size: 1.2rem;
}
button.btn-cta img{
	width: 1.7rem !important;
}

@media (min-width:768px){
	#cta{
		padding: 3rem 8%; 
	}

}


@media (min-width:1024px){
	body{
		font-weight: 400;
	}
	#cta{
		width: 100%;
		padding: 1rem;
	}

	.cta-card-fijo,
	.cta-card-colapsable{
		flex:none;
		overflow:visible;
		height: auto;
	}

	
	#cta-sticky-col.abierto .cta-card-colapsable{
		height: auto;
	}

	.cta-cotizador{
		display:flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		width: 100%;
		gap: 1rem;
		padding: 0;
	}
	#sticky-sentinel{
		display:none;
	}

	#cta-roi-expand{
		display:none;
	}

	.cta-col{
		flex: 0 0 calc(50% - 1rem);
		/* margin-bottom: 3rem; */
	}

	.cta-textos{
		padding: 2rem;
		gap: 0.75rem;
		padding-right: 50%;
	}

	.cta-subtitulo{
		font-size: 2.8rem;
		line-height:2.8rem;
		padding-right: 0;
	}

	.cta-texto{
		font-size: 1.2rem;
	}
	#cta-sticky-col{
		height:auto;
		max-height:none;
		min-height:0;
		position:sticky;
		top: var(--header-height);
		border:  2px solid var(--azulclaro);
	}

	.cta-renglon-monto strong.rotulo,.cta-renglon-monto strong.monto{
		font-size: 1.1rem;
	}

	.cta-roi-visor-rot {
		font-size: 0.95rem;
	}
	.cta-roi-visor-val {
		font-size: 1.3rem;
	}
	.cta-roi-visor {
		padding: 0.7rem;
		margin: 0.75rem 0;
	}

	.cta-proyeccion-titulo {
		font-size: 1rem;
		font-weight: 600;
	}

	.section-label { 
		font-size: 1rem; 
		margin: 1rem 0 0.5rem 0;
	}
	.option-item { 
		font-size: 1rem;
	}
	.price-strike { 
		text-decoration: line-through; 
		color: #94a3b8; 
		font-size: 0.85rem; 
		margin-right: 4px;
	}

	
	.cta-form-paso-no{
		gap: 1rem;
		
	}
	
	.cta-form-paso-no .no{
		flex: 0 0 3rem;
		font-size: 3rem;
	}
	
	.cta-form-paso-no .texto{
		flex: 0 1 55%;
		font-size: 1rem;
	}
	
	.cta-form-paso-no .input-box{
		/* gap: 1rem; */
	}
	
	.cta-form-paso-no .input-box span{
		/* font-size: 1rem; */
	}
	.cta-form-paso-no .input-box input{
		flex: 0 0 6rem;
		width: 6rem;
		height: 3rem;
		font-size: 1.7rem;
	}

	.cta-card {
		margin: 0.7rem 0 0 0 !important;
	}

	.cta-calculadora-hint{
		flex-direction:row-reverse;
		gap: 1rem;
	}

}



@media (min-width:1250px){
	#cta{
		width: 100%;
		padding: 5%;
	}

	.cta-textos{
		padding: 2rem 0 1rem 0;
		gap: 1rem;
		padding-right: 50%;
	}

	.cta-card{
		padding: 1.5rem;
	}

	.cta-cotizador{
		gap: 2rem;
	}
	
}




/* FIN CTA ---------------------------------------------------------------------------------------------------*/

/* -----------------------------------------------------------------------

----	FORMAS

--------------------------------------------------------------------------
.website-feld {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 200px;
	height: 50px;
	overflow: hidden;
}
.field-container{
	width: 100%;
	margin: 1rem 0;
	display: block;
	position: relative;
}

.field-container.ob label::before{
	content: "* ";
	color: red;
	
}
.field-container label{
	padding-bottom: 0.3rem;
	display: block;
}
.fld{
	width: 100%;
}

.label-cond{
	display: flex !important;
	align-items: flex-start;
}

.label-cond span{
	flex: 0 1 100%;
	padding-left: 0.5rem;
}

input, select, textarea{
	border: 1px solid var(--bordes);
	border-radius: 0.5rem;
	padding: 0 0.7rem;
	width: 100%;
	outline: none;
	line-height: 1.5rem;
	height: 2.3rem;
	font-size: 1rem;
}

textarea{
	height: auto;
}

option{
	font-size: 1rem;
}

input[type="checkbox"]{
	width: 1rem;
	height:auto;
}

input[type="tel"]{
	max-width: 15rem;
}

*/

:root{
	--boton-borde: 1px solid red;
	--boton-color-fondo: red;
	--boton-color-texto: #fff;
}

button{
	border: var(--boton-borde);
	background-color: var(--boton-color-fondo);
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
	width: 100%;
	outline: none;
	line-height: 1.2rem;
	color: var(--boton-color-texto);
	font-size: 1rem;
	cursor: pointer;
	white-space: nowrap;
}

button:disabled{
	opacity: 0.5;
	cursor: not-allowed;
}

button img{
	width: 1rem !important;
	
	vertical-align: middle;
}


.field-container .etqErr {
	font-size: 0.8rem;
	color: var(--boton-naranja) ;
	position: absolute;
	right: 0;
	top: 0; /* Align with label or field top depending on preference */
}

.field-container.error :is(input, textarea, select, .field-mask, .lang-input) {
	border-color: var(--boton-naranja) !important;
}

@media (min-width: 640px) {
	h1{
		font-size: 2.3rem;
	}
	
	h2{
		font-size: 2rem;
	}

	h3{
		font-size: 1.75rem;
	}

	h4{
		font-size: 1.5rem;
	}

	h5{
		font-size: 1.25rem;
	}

	h6{
		font-size: 1.1rem;
	}
	

}


@media (min-width: 768px) {
	/* CLASES COMUNES -------*/

	.section-title{
		padding: 0.2rem 0.9rem;
		font-size: 0.96rem;
	}
	
	/* HERO ------------------------------------------------------------------*/

	.hero-chd{
		background: linear-gradient( to right, var(--bgcolor-claro01) 65%, transparent 150%);
	}

	.hero-texts{
		padding: 3rem 15% 3rem 3rem;
		gap: 1.7rem;
	}
	
	.hero-texts p{
		font-size: 1.1rem;
	}
	
	.hero-subtitle{
		font-size: 3.4rem !important;
		line-height: 3.3rem;
		
	}
		
	.hero-subtitle2{
		font-size: 1.6rem !important;
		line-height: 1.6rem;
	}
	
	
	.hero-barra-iconos{
		display:inline-block;
		width: 80%;
	}
	
	.hero-icons, .hero-icons-rotulos{
		padding: 0 0.5rem;
	}
	
	.hero-icons-rotulo{
		font-size: 0.9rem;
		line-height: 1rem;
	}

	.hero-icons-rotulos .hero-iconos-sep{
		background-size: 100%;
	}

	.hero-p-empieza{
		padding-right: 25%;
		font-size: 1.2rem !important;
	}
	
	.hero-cards{
		width: 90%;
	}
	
	.hero-cards-7dias>span{
		font-size: 1rem;
	}
	
	
	.hero-cards-precio h2{
		font-size: 1rem;
	}
	.hero-card-precio{
		font-size: 1.1rem;
	}
	.hero-card-precio-oferta{
		font-size: 1.4rem;
		gap: 0.2rem;
	}
	
	.hero-card-precio-oferta span{
		font-weight:600;
	}
	.hero-card-precio-oferta .hero-moneda{
		font-size: 0.8rem;
	}
	
	.hero-card-precio-oferta .hero-hoy{
		font-size: 1.1rem;
		text-decoration: none;
	}
	
	
	.hero-cta{
		font-size: 1.1rem;
		padding: 0.7rem;
		margin-top:0.5rem;
		display:inline;
		white-space: nowrap;
		width: min-content;
	}
	
	.hero-cta img{
		width: 1.5rem;
		vertical-align:middle;
	}



/* COMO FUNCIONA ---------------------------------------------------------*/

	.como-box{
		padding: 4rem 3rem;
		
	}
	
	.como-subtitulo{
		font-size: 2.6rem;
		line-height: 2.6rem;
		padding-right: 15%;
	}
	
	.como-subtext{
		font-size: 1.2rem;
	}
	
	.como-cards{
		width: 100%;
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		gap: 1rem;
		justify-content: center;
	}
	.como-card{
		flex: 0 1 calc(50% - 0.5rem);
		border: 1px solid var(--bordes);
		box-shadow:none;
		gap: 0.35rem;
		border-radius: 0;
		background-color: #ffffff85;
	}
	
	.como-card-foto{
		flex: 0 0 6rem;
		margin-bottom: 0.7rem;
	}
	
	
	.como-card-linea-ico{
		display:flex;
		justify-content: space-between;
	}
	.como-card-icono{
		flex: 0 0 2.5rem;
	}
	.como-card-no{
		font-size: 2rem;
		opacity: 0.25;
	}
	.como-card h3{
		font-size: 1.3rem;
		letter-spacing: -0.02rem;
	}
	.como-card-objetivo{
		font-size: 1rem;
	}
	
	.como-card-iconos{
		margin-bottom: 1rem;
		margin-top: 0.5rem;
	}
	
	.como-nota-marketing{
		font-size: 0.9rem;
	}
	
	.como-conclusion{
		font-size: 1.4rem;
	}
	
	.como-cta-box{
		display:flex;
		gap: 3rem;
		flex-direction: row-reverse;
		align-items: center;
	}
	

	
	.como-cta-tip img{
		height: 2.5rem
	}

	.como-cta-tip{
		padding: 0.8rem;
		flex: 0 1 100%;
	}

	.como-cta{
		flex: 1 0 fit-content;
		text-align: center;
	}
	.como-cta .btn-cta{
		font-size: 1.1rem;
	}




/* PORQUE  ---------------------------------------------------------------*/

	
	.pq-title-box{
		padding: 2rem 15%;
		gap: 1rem;
	}
	
	
	
	
	
	.pq-box{
		width: 100%;
		display:flex;
		padding: 2rem 2rem;
		flex-direction:column;
		gap: 0.8rem;
	}
	
	.pq-tusitio{
		font-size: 1.2rem;
		padding: 0.5rem 8%;
	}
	
	.pq-tusitio .pildora-azuloscuro{
		font-size: inherit;
		padding: 0.10rem 0.6rem;
		vertical-align:middle;
	}

	
	
	.pq-cards-box{
		margin: 1.5rem 0;
		display:flex;
		gap: 1.5rem;
		align-items:stretch;
	}
	
	.pq-card {
		height:auto;
		display:flex;
		flex-direction: column;
	}
	.pq-cta{
		width: 70%;
		margin: 2rem 15%;
		
	}

	.pq-conclusion{
		font-size: 1.5rem;
	}
	.pq-conclusion strong{
		text-transform:uppercase;
		font-size: 2rem;
		padding: 0.5rem 0;
		white-space:nowrap;
		display: block;
		font-weight: 800;
	}

	.pq-cta-box{
		text-align:center;
	}
	.pq-cta{
		width: auto;
		display:inline-block;
		padding: 0.7rem 1rem !important;
		margin: 0.5rem auto;
		font-size: 1.1rem;
	}
/* MARKETING --------------------------------------------------------------*/

	#marketing{
		padding: 3rem 0;
		
	}

	.mark-top, .mark-cards, .mark-cta{
		padding: 2rem;
	}

	.mark-top-flex{
		display: flex;
		flex-direction:row;
		gap: 3rem;
	}
	
	.mark-top-foto{
		flex: 0 0 45%;
	}
	
	.mark-top-textos{
		flex: 0 1 100%;
		display: flex;
	}
	
	#mark-title{
		margin-top: 0rem;
		margin-bottom: 0rem;
	}
	
	.mark-subtitle{
		font-size: 2rem;
		line-height: 1.9rem;
	}

	.mark-cards-box{
		flex-direction:row;
		gap: 2rem;
	}
	.mark-cta-flex{
		flex-direction:column;
		padding: 0 0%;
		gap: 2rem;
		align-items: center;
	}

	.mark-cta-hint{
		padding: 0.8rem;
		flex: 1 1 100%;
	}
	.mark-cta-box{
		flex: 1 1 fit-content;
		text-align: center;
		
	}



}

/*1024*/

@media (min-width: 1024px){
	:root{
		--header-height: 5rem;
	}
	.header-logo{
		flex: 0 0 20%;
		gap: 1rem;
	}

	.header-logo a{
		flex: 0 0 7rem;
	}
	
	.header-logo span{
		flex: 0 1 100%;
		display: block;
		font-size: 1rem;
		padding-left: 1rem;
		border-left:  1px solid var(--bordes);
		min-height:2.5rem;
	}
	
	.header-opciones{
		gap: 1rem;
	}
	
	.header-cta{
		height: 2.5rem;
		line-height: 2.4rem;
		font-size: 0.9rem;
		margin-right: 1rem;
	}
	
	.header-cta img{
		vertical-align: middle;
		width: 1.1rem;
	}
	
	.header-tel{
		height: 2.5rem;
		width: auto;
		border: 0;
		border-radius: unset;
		box-shadow: unset;
		font-size: 0.95rem;
		font-weight:600;
		background-position:left;
		background-size: 1rem;
		padding-left: 1.3rem;
		white-space: nowrap;
	}

	.header-tel>*{
		line-height: 2.5rem;
		display:block;
	}
	
	

	/* HERO -----------------------------------------------------------------------------*/
	#hero{
		background-position: left 40%;
	}
	.hero-chd{
		background: linear-gradient( to right, var(--bgcolor-claro01) 70%, transparent 100%);
		display:flex;
		flex-direction:row;
	}
	
	.hero-texts{
		padding: 4rem;
		flex: 0 1 80%;
		gap: 2.2rem;
	}
	.hero-barra-iconos{
		display:inline-block;
		width: 70%;
	}
	
	.hero-icons, .hero-icons-rotulos{
		padding: 0 0.5rem;
	}
	

	.hero-cards{
		width: 67%;
	}
	

	.pq-card {
		padding: 1.5rem 1.5rem 0.75rem 1.5rem;
	}

/* COMO FUNCIONA ---------------------------------------------------------*/

	.como-box{
		padding: 4rem;
	}
	
	.como-subtitulo{
		font-size: 2.8rem;
		line-height: 2.8rem;
		padding-right: 25%;
	}
	
	.como-subtext{
		font-size: 1.3rem;
	}

	
	.como-cards{
		gap: 2rem;
		padding: 0 2rem;
	}
	.como-card{
		flex: 0 1 calc(50% - 1rem);
		
	}
	
	
	.como-nota-marketing{
		font-size: 1rem;
	}
	
	.como-conclusion{
		font-size: 1.6rem;
	}
	
	.como-cta-box{
		gap: 6rem;
	}
	
	.como-cta-tip img{
		height: 3rem
	}

	.como-cta-tip{
		padding: 1rem;
		font-size:1.1rem;
		line-height: 1.2rem;
	}

	.como-cta .btn-cta{
		font-size: 1.2rem;
		letter-spacing: -0.03rem;
	}

/* PORQUE  ---------------------------------------------------------------*/

	
	.pq-title-box{
		padding: 2rem 20%;
	}
		
	
	.pq-box{
		padding: 3rem;
		flex-direction:column;
		gap: 0.8rem;
	}
	
	.pq-tusitio{
		font-size: 1.2rem;
		padding: 0.5rem 15%;
	}
	
	.pq-tusitio .pildora-azuloscuro{
		font-size: inherit;
		padding: 0.10rem 0.6rem;
		vertical-align:middle;
	}

	
	
	.pq-cards-box{
		margin: 1.5rem 0;
		display:flex;
		gap: 1.5rem;
		align-items:stretch;
	}
	
	.pq-card {
		height:auto;
		display:flex;
		flex-direction: column;
	}
	.pq-cta{
		width: 70%;
		margin: 2rem 15%;
		
	}

	.pq-conclusion{
		font-size: 1.5rem;
	}
	.pq-conclusion strong{
		text-transform:uppercase;
		font-size: 2rem;
		padding: 0.5rem 0;
		white-space:nowrap;
		display: block;
		font-weight: 800;
	}

	.pq-cta-box{
		text-align:center;
	}
	.pq-cta{
		width: auto;
		display:inline-block;
		padding: 0.7rem 1rem !important;
		margin: 0.5rem auto;
		font-size: 1.2rem;
	}
	
	h1{
		font-size: 2.5rem;
	}
	
	h2{
		font-size: 2.15rem;
	}

	h3{
		font-size: 1.9rem;
	}

	h4{
		font-size: 1.65rem;
	}

	h5{
		font-size: 1.4rem;
	}

	h6{
		font-size: 1.2rem;
	}
	
/* MARKETING --------------------------------------------------------------*/

	.mark-top, .mark-cards, .mark-cta{
		padding: 3rem;
	}

	.mark-top-flex{
		gap: 4rem
	}
	
	.mark-top-foto{
		flex: 0 0 40%;
	}

	.mark-top-textos{
		gap:1.5rem;
	}
	
	.mark-subtitle{
		font-size: 2.5rem;
		line-height: 2.5rem;
	}

	.mark-top-textos-p{
		font-size: 1.2rem;
	}
	.mark-card{
		gap: 0.7rem;
		padding: 1.5rem;
	}
	
}

/* 1280 */

@media (min-width: 1250px) {

	.header-box,.header-logo{
		padding-left: 0;
		padding-right: 0;
	}

	.header-cta{
		font-size: 1.06rem;
		margin-right: 0;
		padding: 0 0.8rem 0 1rem;
	}
	
	.header-tel{
		font-size: 1.1rem;
		background-size: 1.2rem;
		padding-left: 1.5rem;
	}
	
	.header-opciones{
		gap: 1.25rem;
		justify-content: flex-end;
	}
	
	h1{
		font-size: 3rem;
	}

	h2{
		font-size: 2.68rem;
	}

	h3{
		font-size: 2.36rem;
	}

	h4{
		font-size: 2.04rem;
	}

	h5{
		font-size: 1.72rem;
	}

	h6{
		font-size: 1.4rem;
	}
	
	
	/* HERO -----------------------------------------------------------------------------*/
	#hero{
		min-height: calc(100vh - var(--header-height));
		background-size: 80% 100% ;
		background-position: right
	}
	.hero-chd{
		background: linear-gradient( to right, var(--bgcolor-claro01) 50%, transparent 80%);
		display:flex;
		flex-direction:row;
		min-height: calc(100vh - var(--header-height));
	}
	
	.hero-texts{
		padding: 3rem 0 3rem 3rem;
		flex: 0 0 60%;
		gap: 1.5rem;
	}

	.hero-promos{
		flex: 0 0 40%;
		display:inline-block;
		position:relative;
	}

	.hero-promos-devices-img{
		position: absolute;
		bottom: 5%;
		width: 135%;
		right: 2rem;
	}

	.hero-promos-devices-img img{
		width: 100%;
		aspect-ratio: 45 / 28;
		height:auto;
	}

	.hero-subtitle{
		font-size: 3.6rem !important;
		line-height: 3.4rem;
		margin: 0;
		padding-right: 10%;
	}

	.hero-subtitle2{
		font-size: 1.6rem !important;
		line-height: 1.7rem;
		padding-right: 35%;
	}


	.hero-subtitle2 span{
		white-space:nowrap;
	}
	
	.hero-barra-iconos{
		width: 70%;
		margin: 0.3rem 0;
	}
	
	.hero-icons, .hero-icons-rotulos{
		padding: 0 1rem;
	}
	
	
	.hero-cards{
		width: 67%;
	}
	
	
/* COMO FUNCIONA ---------------------------------------------------------*/

	.como-box{
		padding: 4rem 3rem;
		gap: 1.5rem;
	}

	#como-funciona .cc{
		max-width: 1366px;
	}
	
	.como-subtitulo{
		font-size: 3.5rem;
		line-height: 3.5rem;
		padding-right: 40%;
		margin: 0.5rem 0;
	}
	
	.como-subtext{
		font-size: 1.5rem;
	}

	
	
	.como-cards{
		gap: 0;
		padding: 0;
	}
	.como-card{
		flex: 0 0 25%;
		
	}

	.como-card-foto{
		flex: 0 0 10rem;
	}
	.como-card-icono{
		flex: 0 0 2.5rem;
	}	
	.como-nota-marketing{
		font-size: 1rem;
	}
	
	.como-conclusion{
		font-size: 1.8rem;
		line-height: 1.9rem;
		padding: 0 22%;
		text-align: center;
	}
	
	.como-cta-box{
		gap: 7rem;
	}

	.como-cta-tip{
		flex: 0 0 50%;
	}
	
	.como-cta-tip img{
		height: 3rem
	}


	.como-cta .btn-cta{
		font-size: 1.3rem;
		letter-spacing: 0;
		padding: 0.8rem 1rem;
	}


/* PORQUE  ---------------------------------------------------------------*/

	
	.pq-title-box{
		padding: 4.5rem 0 3rem 0;
		gap: 1.5rem;
	}
		
	#pq-title{
		font-size: 3rem;
	}


	.pq-title-arr{
		margin: 0.5rem auto -5.5rem auto;
	}

	
	.pq-box{
		padding: 3rem;
		flex-direction:column;
		gap: 0.8rem;
	}
	.pq-title-subtext{
		font-size: 2rem;
		padding: 0 15%;
		line-height: 2.1rem;
	}
	.pq-tusitio{
		font-size: 1.2rem;
		padding: 0.5rem 15%;
	}
	
	.pq-tusitio .pildora-azuloscuro{
		font-size: inherit;
		padding: 0.10rem 0.6rem;
		vertical-align:middle;
	}

	
	
	.pq-cards-box{
		margin: 1.5rem 0;
		display:flex;
		gap: 1.5rem;
		align-items:stretch;
	}
	
	.pq-card {
		height:auto;
		display:flex;
		flex-direction: column;
	}
	.pq-cta{
		width: 70%;
		margin: 2rem 15%;
		
	}

	.pq-conclusion{
		font-size: 1.5rem;
	}
	.pq-conclusion strong{
		text-transform:uppercase;
		font-size: 2rem;
		padding: 0.5rem 0;
		white-space:nowrap;
		display: block;
		font-weight: 800;
	}

	.pq-cta-box{
		text-align:center;
	}
	.pq-cta{
		width: auto;
		display:inline-block;
		padding: 0.7rem 1rem !important;
		margin: 0.5rem auto;
		font-size: 1.2rem;
	}
	
	.pq-cards-box{
		gap: 2rem;
	}
	
	.pq-card {
		height:auto;
		display:inline-block;
	}

	
	.pq-card h3{
		font-size: 1.3rem;
	}
	.pq-card p{
		font-size: 1.1rem;
	}
	.pq-card li{
		margin: 0.9rem 0;
	}

	.pq-card li strong{
		font-size: 1.1rem;
	}

	.pq-card li span{
		font-size: 1rem;
	}
	
	.pq-card h3, .pq-card p{
		text-align:left;
	}

	.pq-lista-val{
		display:flex;
		flex-direction:row-reverse;
		gap: 1rem;
	}
	.pq-lista-val ul{
		flex: 0 1 67%;
		margin: 0;
	}
	.pq-lista-val div{
		flex: 0 0 33%;
	}

	.pq-lista-val div img{
		width: 100%;
		max-width: unset;
	}
	

	.pq-cta-box{
		padding: 1rem 0;
	}

	.pq-cta{
		font-size: 1.3rem;
		width: 50%;
		margin: 0.75rem 25% 0 25%;
	}

/* MARKETING --------------------------------------------------------------*/

	#marketing{
		/* padding: 3rem; */
	}
	
	.mark-top-textos{
		gap:1.7rem;
	}
	
	.mark-subtitle{
		font-size: 2.7rem;
		line-height: 2.7rem;
	}

	.mark-top-textos-p{
		font-size: 1.3rem;
	}	


	.mark-top{
		padding: 2rem 7rem;
	}

	.mark-cta{
		padding: 1rem 7rem 2rem;
	}

	.mark-cards{
		padding: 3rem 7rem;
	}

	.mark-top-flex{
		gap: 4rem
	}
	
	.mark-top-foto{
		flex: 0 0 40%;
	}

	.mark-top-textos{
		gap:1.5rem;
	}
	
	.mark-subtitle{
		font-size: 2.5rem;
		line-height: 2.5rem;
	}

	.mark-top-textos-p{
		font-size: 1.2rem;
	}
	.mark-cta-flex{
		gap: 2rem;
		margin-top:1rem;
	}
	
}


@media (min-width: 1440px) {

	.cc{
		max-width: 1366px;
	}
	
	/* HERO -----------------------------------------------------------------------------*/

	.hero-chd{
		justify-content:space-around;
	}
	
	.hero-texts{
		padding: 4rem 0 4rem 11rem;
		flex: 0 0 50%;
		gap: 1.58rem;
	}

	.hero-promos{
		flex: 0 0 45%;
	}

	.hero-promos-devices-img{
		position: absolute;
		bottom: 0%;
		width: 120%;
		right: 6rem;
	}

	.hero-promos-devices-img img{
		width: 100%;
	}

	.hero-subtitle{
		font-size: 4.5rem !important;
		line-height: 4rem;
	}

	.hero-subtitle2{
		font-size: 1.8rem !important;
		line-height: 2rem;
		padding-right: 25%;
	}
	.hero-subtitle2 span{
		white-space:nowrap;
	}
	.hero-barra-iconos{
		width: 70%;
		margin: 0.3rem 0;
	}

	

	.hero-cards{
		width: 67%;
	}

	/* COMO FUNCIONA ---------------------------------------------------------*/
	
	.como-box{
		padding: 6rem 0rem;
		gap: 2.5rem;
	}
	
	.como-card h3{
		font-size: 1.5rem;
	}

	.como-card-objetivo{
		font-size: 1.05rem;
	}

/* MARKETING --------------------------------------------------------------*/

	#marketing{
		padding: 4rem 0;
	}

	.mark-top-textos{
		gap:2rem;
	}
	
	.mark-subtitle{
		font-size: 3rem;
		line-height: 3rem;
	}

	.mark-top-textos-p{
		font-size: 1.5rem;
	}
	.mark-top{
		padding: 2rem 0;
	}

	.mark-cta-flex{
		flex-direction:row;
		gap: 12%;
	}

	.mark-cta-box{
		flex: 0 0 40%;
	}

	.mark-btn-cta{
		width: fit-content;
		padding: 1.5rem;
		font-size: 1.2rem;
	}

	.mark-cards-box{
		padding: 0;
		gap: 3rem;
	}
}