@charset "UTF-8";

:root {
	--xxl:128px;
	--xl:64px;
	--l:32px;
	--m:24px;
	--s:16px;
	--xs:8px;
	--xxs:5px;
	--no:0px;
	--gap: 30px;

	--main-color: #46d6ac;
	--secondary-color: #1c1b34;
	--gris-claro: #dddddd;

	--main-font: "Raleway", sans-serif;
	--secondary-font: "Dosis", sans-serif;

	--body-font-size: 16px;
	--h1-font-size: 58px;
	--h2-font-size: 40px;
	--h3-font-size: 25px;
	--h4-font-size: 22px;
	--h5-font-size: 20px;
	--h6-font-size: 14px;
	--p-font-size: 16px;

	--wrapper-width: 1300px;
}

/* GENERAL */
* {background-repeat:no-repeat; background-size: cover; background-position: center center; box-sizing: border-box;}
body {font-family: var(--main-font, sans-serif); overflow-x: hidden; font-size: var(--body-font-size); margin:0; color:#474747; font-weight: 400;}

img, picture, video {height: auto; max-width: 100%; position: relative; vertical-align: middle;}
picture > img { max-width: none; }
figure, iframe {max-width: 100%;}
main {position: relative;}
label {display: inline-block;}

.wrapper {margin: auto; max-width:var(--wrapper-width, 1400px); width: 100%;}
.overflow {overflow:hidden;}
.relative {position:relative;}
.absolute {position:absolute;}
.sticky {position:sticky; top: var(--header-height, 0px); }
.left {float:left}
.right {float:right !important}
.center {margin-left:auto; margin-right:auto;}
.displaynone, .display-none {display:none}
.displayblock, .display-block {display:block}
.displayinlineblock, .display-inline-block {display:inline-block}
.rounded {border-radius: 100%;}
.blur {filter:blur(5px);}
.pointer {cursor:pointer;}
.scroll-y { overflow-y: auto; }
.scroll-x { overflow-x: auto; }

/* TEXTS */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {font-family: var(--secondary-font, sans-serif); margin: 0 0 0.5em 0; line-height: 1.3em; font-weight: 800;}
h1, .h1 {font-size:  var(--h1-font-size, 65px); line-height: 1em;}
h2, .h2 {font-size:  var(--h2-font-size, 40px);}
h3, .h3 {font-size:  var(--h3-font-size, 30px);}
h4, .h4 {font-size:  var(--h4-font-size, 24px);}
h5, .h5 {font-size:  var(--h5-font-size, 16px); font-family: var(--main-font); font-weight: 500;}
h6, .h6 {font-size:  var(--h6-font-size, 14px);}
p, .p {margin: 0 0 1em 0; line-height: 1.6em; font-size: var(--p-font-size);}
a {color: inherit; text-decoration:none;}
a:hover, a:focus, :focus {text-decoration:none; outline: none;}
.underline {text-decoration:underline;}
ul {list-style: none; padding: 0; margin: 0;}
li {line-height: 1.3em; margin-bottom: 1em;}
hr {clear: both;  display: block; margin: 3em 0;}
.main-font {font-family: var(--main-font, sans-serif);}
.secondary-font {font-family: var(--secondary-font, sans-serif);}

.small {font-size: 0.7em;}
.big {font-size: 1.3em;}

.w-l, .light {font-weight: 100;}
.w-n, .normal {font-weight: 400;}
.w-b, .bold, .strong, b, strong {font-weight:900}
.italic, i {font-style: italic;}
.uppercase {text-transform:uppercase;}
.align-c {text-align:center}
.align-l {text-align:left}
.align-r {text-align:right}

.lt-sp-1 {letter-spacing: 0.1em;}
.lt-sp-2 {letter-spacing: 0.2em;}
.lt-sp-3 {letter-spacing: 0.3em;}
.lt-sp-4 {letter-spacing: 0.4em;}
.lt-sp-5 {letter-spacing: 0.5em;}
.lt-sp-6 {letter-spacing: 0.6em;}
.lt-sp-7 {letter-spacing: 0.7em;}
.lt-sp-8 {letter-spacing: 0.8em;}
.lt-sp-9 {letter-spacing: 0.9em;}
.lt-sp-10 {letter-spacing: 1em;}

.btn {padding:0.5em 3em; display:inline-block; cursor:pointer; font-weight:700; text-decoration: none; }
.btn-arrow i {font-size: 1.5em; margin-left: 0.5em; position: relative; top: 0.2em;}
.btn-arrow:hover i {margin-left: 0.7em;}
.btn-icon {padding-right: 3em; position: relative;}
.btn-icon-content {position: absolute; right: 1em; width: 1em; display: flex; align-items: center; top: 0; height: 100%;}
.btn.break, .btn.block {display: block; width: fit-content;}

/* FLEX */
.flex {display:flex; flex-flow: wrap; gap:var(--gap)}
.flex.center {justify-content: center;}
.flex.space-around {justify-content: space-around;}
.flex.space-between {justify-content: space-between;}
.flex.space-evenly {justify-content: space-evenly;}
.flex.start {justify-content: start;}
.flex.end {justify-content: end;}
.flex.vcenter {align-items: center;}
.flex.stretch {align-items: stretch;}
.flex.vstart {align-items: flex-start;}
.flex.vend {align-items: flex-end;}
.flex.stretch > div > div, .flex.stretch > div > article { height: 100%; }
.flex.nowrap {flex-flow: nowrap;}
.flex.column {flex-direction: column;}
.flex.column-reverse {flex-direction: column-reverse;}

.zindex-1 {z-index: 1;}
.zindex-2 {z-index: 2;}
.zindex-3 {z-index: 3;}
.zindex-4 {z-index: 4;}
.zindex-5 {z-index: 5;}

/* COLUMNS */
.col1-1, .col2-2, .col3-3, .col4-4, .col5-5, .col6-6, .col7-7, .col8-8 {--cols: 1; --num: 1;}
.col1-2, .col2-4, .col3-6, .col4-8 {--cols: 2; --num: 1;}
.col1-3, .col2-6 {--cols: 3; --num: 1;}
.col2-3, .col4-6 {--cols: 3; --num: 2;}
.col1-4, .col2-8 {--cols: 4; --num: 1;}
.col3-4, .col6-8 {--cols: 4; --num: 3;}
.col1-5 {--cols: 5; --num: 1;}
.col2-5 {--cols: 5; --num: 2;}
.col3-5 {--cols: 5; --num: 3;}
.col4-5 {--cols: 5; --num: 4;}
.col1-6 {--cols: 6; --num: 1;}
.col5-6 {--cols: 6; --num: 5;}
.col1-7 {--cols: 7; --num: 1;}
.col2-7 {--cols: 7; --num: 2;}
.col3-7 {--cols: 7; --num: 3;}
.col4-7 {--cols: 7; --num: 4;}
.col5-7 {--cols: 7; --num: 5;}
.col6-7 {--cols: 7; --num: 6;}
.col1-8 {--cols: 8; --num: 1;}
.col3-8 {--cols: 8; --num: 3;}
.col5-8 {--cols: 8; --num: 5;}
.col7-8 {--cols: 8; --num: 7;}
.auto-width > [class*="col1-"], .auto-width > [class*="col2-"], .auto-width > [class*="col3-"], .auto-width > [class*="col4-"], .auto-width > [class*="col5-"], .auto-width > [class*="col6-"] {width: auto;}
[class*="col1-"],[class*="col2-"], [class*="col3-"], [class*="col4-"], [class*="col5-"], [class*="col6-"] {float:left; box-sizing: border-box; 
	width: calc( ( ( 100% - ( var(--gap) * ( ( var(--cols) / var(--num) ) - 1 ) ) ) / var(--cols) ) * var(--num) );
}

/* PADDINGS */
.pd-0 {padding:var(--no);}
.pd-xxs {padding:var(--xxs);}
.pd-xs {padding:var(--xs);}
.pd-s {padding:var(--s);}
.pd-m {padding:var(--m);}
.pd-l {padding:var(--l);}
.pd-xl {padding:var(--xl);}
.pd-xxl {padding:var(--xxl);}
.pd-t-0 {padding:var(--no);}
.pd-t-xxs {padding-top:var(--xxs);}
.pd-t-xs {padding-top:var(--xs);}
.pd-t-s {padding-top:var(--s);}
.pd-t-m {padding-top:var(--m);}
.pd-t-l {padding-top:var(--l);}
.pd-t-xl {padding-top:var(--xl);}
.pd-t-xxl {padding-top:var(--xxl);}
.pd-b-0 {padding-bottom:var(--no);}
.pd-b-xxs {padding-bottom:var(--xxs);}
.pd-b-xs {padding-bottom:var(--xs);}
.pd-b-s {padding-bottom:var(--s);}
.pd-b-m {padding-bottom:var(--m);}
.pd-b-l {padding-bottom:var(--l);}
.pd-b-xl {padding-bottom:var(--xl);}
.pd-b-xxl {padding-bottom:var(--xxl);}
.pd-l-0 {padding-left:var(--no);}
.pd-l-xxs {padding-left:var(--xxs);}
.pd-l-xs {padding-left:var(--xs);}
.pd-l-s {padding-left:var(--s);}
.pd-l-m {padding-left:var(--m);}
.pd-l-l {padding-left:var(--l);}
.pd-l-xl {padding-left:var(--xl);}
.pd-l-xxl {padding-left:var(--xxl);}
.pd-r-0 {padding-right:var(--no);}
.pd-r-xxs {padding-right:var(--xxs);}
.pd-r-xs {padding-right:var(--xs);}
.pd-r-s {padding-right:var(--s);}
.pd-r-m {padding-right:var(--m);}
.pd-r-l {padding-right:var(--l);}
.pd-r-xl {padding-right:var(--xl);}
.pd-r-xxl {padding-right:var(--xxl);}

/* MARGINS */
.pd-0 {margin:var(--no);}
.mg-xxs {margin:var(--xxs);}
.mg-xs {margin:var(--xs);}
.mg-s {margin:var(--s);}
.mg-m {margin:var(--m);}
.mg-l {margin:var(--l);}
.mg-xl {margin:var(--xl);}
.mg-xxl {margin:var(--xxl);}
.mg-t-0 {margin:var(--no);}
.mg-t-xxs {margin-top:var(--xxs);}
.mg-t-xs {margin-top:var(--xs);}
.mg-t-s {margin-top:var(--s);}
.mg-t-m {margin-top:var(--m);}
.mg-t-l {margin-top:var(--l);}
.mg-t-xl {margin-top:var(--xl);}
.mg-t-xxl {margin-top:var(--xxl);}
.mg-b-0 {margin-bottom:var(--no);}
.mg-b-xxs {margin-bottom:var(--xxs);}
.mg-b-xs {margin-bottom:var(--xs);}
.mg-b-s {margin-bottom:var(--s);}
.mg-b-m {margin-bottom:var(--m);}
.mg-b-l {margin-bottom:var(--l);}
.mg-b-xl {margin-bottom:var(--xl);}
.mg-b-xxl {margin-bottom:var(--xxl);}
.mg-l-0 {margin-left:var(--no);}
.mg-l-xxs {margin-left:var(--xxs);}
.mg-l-xs {margin-left:var(--xs);}
.mg-l-s {margin-left:var(--s);}
.mg-l-m {margin-left:var(--m);}
.mg-l-l {margin-left:var(--l);}
.mg-l-xl {margin-left:var(--xl);}
.mg-l-xxl {margin-left:var(--xxl);}
.mg-r-0 {margin-right:var(--no);}
.mg-r-xxs {margin-right:var(--xxs);}
.mg-r-xs {margin-right:var(--xs);}
.mg-r-s {margin-right:var(--s);}
.mg-r-m {margin-right:var(--m);}
.mg-r-l {margin-right:var(--l);}
.mg-r-xl {margin-right:var(--xl);}
.mg-r-xxl {margin-right:var(--xxl);}

.mg-t--xxs {margin-top:calc( -1 * var(--xxs));}
.mg-t--xs {margin-top:calc( -1 * var(--xs));}
.mg-t--s {margin-top:calc( -1 * var(--s));}
.mg-t--m {margin-top:calc( -1 * var(--m));}
.mg-t--l {margin-top:calc( -1 * var(--l));}
.mg-t--xl {margin-top:calc( -1 * var(--xl));}
.mg-t--xxl {margin-top:calc( -1 * var(--xxl));}
.mg-b--xxs {margin-bottom:calc( -1 * var(--xxs));}
.mg-b--xs {margin-bottom:calc( -1 * var(--xs));}
.mg-b--s {margin-bottom:calc( -1 * var(--s));}
.mg-b--m {margin-bottom:calc( -1 * var(--m));}
.mg-b--l {margin-bottom:calc( -1 * var(--l));}
.mg-b--xl {margin-bottom:calc( -1 * var(--xl));}
.mg-b--xxl {margin-bottom:calc( -1 * var(--xxl));}

/* GAP */
.gp-0 {--gap:var(--no);}
.gp-xxs {--gap:var(--xxs);}
.gp-xs {--gap:var(--xs);}
.gp-s {--gap:var(--s);}
.gp-m {--gap:var(--m);}
.gp-l {--gap:var(--l);}
.gp-xl {--gap:var(--xl);}
.gp-xxl {--gap:var(--xxl);}

/* BORDERS */
[class*="bd-w"] {border-style: solid; border-color:currentColor;}
.bd-w-0 {border-width: 0;}
.bd-w-1 {border-width: 1px;}
.bd-w-2 {border-width: 2px;}
.bd-w-3 {border-width: 3px;}
.bd-w-4 {border-width: 4px;}
.bd-w-5 {border-width: 5px;}
.bd-w-10 {border-width: 10px;}

.bd-r-0 {border-radius:var(--no);}
.bd-r-xxs {border-radius:var(--xxs);}
.bd-r-xs {border-radius:var(--xs);}
.bd-r-s {border-radius:var(--s);}
.bd-r-m {border-radius:var(--m);}
.bd-r-l {border-radius:var(--l);}
.bd-r-xl {border-radius:var(--xl);}
.bd-r-xxl {border-radius:var(--xxl);}
.bd-r-full {border-radius: 100%;}

/* MAX WIDTH */
.mx-w-100 {max-width: 100px;}
.mx-w-200 {max-width: 200px}
.mx-w-300 {max-width: 300px}
.mx-w-400 {max-width: 400px}
.mx-w-500 {max-width: 500px}
.mx-w-600 {max-width: 600px}
.mx-w-700 {max-width: 700px}
.mx-w-800 {max-width: 800px}
.mx-w-900 {max-width: 900px}
.mx-w-1000 {max-width: 1000px}

/* COLOR */
.current {color:currentColor;}
.main-color, .hov-main-color:hover  {color: var(--main-color, red);}
.secondary-color, .hov-secondary-color:hover {color: var(--secondary-color, orange);}
.blanco, .hov-blanco:hover {color: var(--blanco, #ffffff);}
.gris-claro, .hov-gris-claro:hover {color: var(--gris-claro, #f5f5f5);}
.gris-medio, .hov-gris-medio:hover {color: var(--gris-medio, #bdbdbd);}
.gris-oscuro, .hov-gris-oscuro:hover {color: var(--gris-oscuro, #474747);}
.negro, .hov-negro:hover {color: var(--negro, #000000);}
.verde, .hov-verde:hover {color: var(--verde, green);}
.verde-claro, .hov-verde-claro:hover {color: var(--verde-claro, lightgreen);}
.verde-oscuro, .hov-verde-oscuro:hover {color: var(--verde-oscuro, darkgreen);}
.azul, .hov-azul:hover {color: var(--azul, blue);}
.azul-claro, .hov-azul-claro:hover {color: var(--azul-claro, lightblue);}
.azul-oscuro, .hov-azul-oscuro:hover {color: var(--azul-oscuro, darkblue);}
.rojo, .hov-rojo:hover {color: var(--rojo, red);}
.rojo-claro, .hov-rojo-claro:hover {color: var(--rojo-claro, rgb(255, 135, 135) );}
.rojo-oscuro, .hov-rojo-oscuro:hover {color: var(--rojo-oscuro, darkred );}
.rosa, .hov-hov-rosa:hover {color: var(--rosa, rgb(255, 100, 150) );}
.rosa-claro, .hov-rosa-claro:hover {color: var(--rosa-claro, pink );}
.rosa-oscuro, .hov-rosa-oscuro:hover {color: var(--rosa-oscuro, rgb(220, 40, 100) );}
.amarillo, .hov-amarillo:hover {color: var(--amarillo, yellow);}
.amarillo-claro, .hov-amarillo-claro:hover {color: var(--amarillo-claro, lightyellow );}
.amarillo-oscuro, .hov-amarillo-oscuro:hover {color: var(--amarillo-oscuro, rgb(180, 180, 0) );}
.morado, .hov-morado:hover {color: var(--morado, purple);}
.morado-claro, .hov-morado-claro:hover {color: var(--morado-claro, rgb(200, 0, 200) );}
.morado-oscuro, .hov-morado-oscuro:hover {color: var(--morado-oscuro, rgb(60, 0, 60) );}
.naranja, .hov-naranja:hover {color: var(--morado, orange );}
.naranja-claro, .hov-naranja-claro:hover {color: var(--morado-claro, rgb(255, 200, 100) );}
.naranja-oscuro, .hov-naranja-oscuro:hover {color: var(--morado-oscuro, darkorange );}

/* BACKGROUND COLOR */
.bg-main-color, .bg-hov-main-color:hover {background-color: var(--main-color, red);}
.bg-secondary-color, .bg-hov-secondary-color:hover {background-color: var(--secondary-color, orange);}
.bg-blanco, .bg-hov-blanco:hover {background-color: var(--blanco, #ffffff);}
.bg-gris-claro, .bg-hov-gris-claro:hover {background-color: var(--gris-claro, #f5f5f5);}
.bg-gris-medio, .bg-hov-gris-medio:hover {background-color: var(--gris-medio, #bdbdbd);}
.bg-gris-oscuro, .bg-hov-gris-oscuro:hover {background-color: var(--gris-oscuro, #474747);}
.bg-negro, .bg-hov-negro:hover {background-color: var(--negro, #000000);}
.bg-verde, .bg-hov-verde:hover {background-color: var(--verde, green);}
.bg-verde-claro, .bg-hov-verde-claro:hover {background-color: var(--verde-claro, lightgreen);}
.bg-verde-oscuro, .bg-hov-verde-oscuro:hover {background-color: var(--verde-oscuro, darkgreen);}
.bg-azul, .bg-hov-azul:hover {background-color: var(--azul, blue);}
.bg-azul-claro, .bg-hov-azul-claro:hover {background-color: var(--azul-claro, lightblue);}
.bg-azul-oscuro, .bg-hov-azul-oscuro:hover {background-color: var(--azul-oscuro, darkblue);}
.bg-rojo, .bg-hov-rojo:hover {background-color: var(--rojo, red);}
.bg-rojo-claro, .bg-hov-rojo-claro:hover {background-color: var(--rojo-claro, rgb(255, 135, 135) );}
.bg-rojo-oscuro, .bg-hov-rojo-oscuro:hover {background-color: var(--rojo-oscuro, darkred);}
.bg-rosa, .bg-hov-rosa:hover {background-color: var(--rosa, rgb(255, 100, 150));}
.bg-rosa-claro, .bg-hov-rosa-claro:hover {background-color: var(--rosa-claro, pink);}
.bg-rosa-oscuro, .bg-hov-rosa-oscuro:hover {background-color: var(--rosa-oscuro, rgb(220, 40, 100) );}
.bg-amarillo, .bg-hov-amarillo:hover {background-color: var(--amarillo, yellow);}
.bg-amarillo-claro, .bg-hov-amarillo-claro:hover {background-color: var(--amarillo-claro, lightyellow );}
.bg-amarillo-oscuro, .bg-hov-amarillo-oscuro:hover {background-color: var(--amarillo-oscuro, rgb(180, 180, 0) );}
.bg-morado, .bg-hov-morado:hover {background-color: var(--morado, purple);}
.bg-morado-claro, .bg-hov-morado-claro:hover {background-color: var(--morado-claro, rgb(200, 0, 200) );}
.bg-morado-oscuro, .bg-hov-morado-oscuro:hover {background-color: var(--morado-oscuro, rgb(60, 0, 60) );}
.bg-naranja, .bg-hov-naranja:hover {background-color: var(--morado, orange);}
.bg-naranja-claro, .bg-hov-naranja-claro:hover {background-color: var(--morado-claro, rgb(255, 200, 100) );}
.bg-naranja-oscuro, .bg-hov-naranja-oscuro:hover {background-color: var(--morado-oscuro, darkorange );}
.bg-trans-blanco {background-color:rgba(255,255,255,0.9);}
.bg-transparente {background-color:transparent;}
.bg-parallax {background-repeat: no-repeat; background-position-x: center;}
.bg-size {background-position-x:center; background-size:auto;}

.bg-overlay {position: relative;}
.bg-overlay > div:not(.bg-img-container) {z-index: 2; position: relative;}
.bg-overlay:before {content:""; z-index: 1; position: absolute; top:0; bottom:0; left:0; right:0; opacity:0.6;}
.bg-overlay.bg-overlay-negro:before {background-color: #000000;}
.bg-overlay.bg-overlay-blanco:before {background-color: #ffffff;}
.animation, .btn, [class*="hov-"] {
	-webkit-transition: all ease-in-out 500ms;
	-moz-transition: all ease-in-out 500ms;
	-o-transition: all ease-in-out 500ms;
	transition: all ease-in-out 500ms;
}
.shadow {
	-webkit-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
	-moz-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
	box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
}

.shadow-inset {
	-webkit-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.15) inset;
	-moz-box-shadow: 1px 1px 15px -1px rgba(0,0,0,0.15) inset;
	box-shadow: 1px 1px 15px -1px rgba(0, 0, 0, 0.15) inset;
}
.shadow.shadow-inset {
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15) inset, 0px 0px 10px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15) inset, 0px 0px 10px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15) inset, 0px 0px 10px 0px rgba(0,0,0,0.15);
}

/* RESPONSIVE */
.desk-show {display: inherit;}
.desk-hide {display: none;}

/* CONTENT */
.yt-container, .video-container {position: relative; width: 100%; height: 0; padding-bottom: 56.4%;}
.yt-container iframe, .video-container iframe, .video-container video {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}


/* POPUP */
.popup, .pop-up {display:none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1000; overflow-y: auto;}
.popup-inner, .pop-up-inner {position: absolute;z-index: 1001; width: max-content; top: 50%; left: 50%; max-width: calc(100% - 40px); max-height: calc(100% - 80px); 
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.popup-bg, .pop-up-bg {position: fixed; width: 100%; height: 100%; cursor: pointer; z-index: 1000; background-color: rgba(0,0,0,0.6); }
.popup-close, .pop-up-close { position: absolute; width: 40px; text-align: center; line-height: 40px; top: -10px; right: -10px; background-color: var(--main-color); font-size: 18px; border-radius: 100px; color: #ffffff; cursor: pointer;}
.popup-close:hover, .pop-up-close:hover { background-color: var(--negro); }

/* FORMS */
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=url], input[type=password], textarea, select { background-color: #ffffff; border-radius: 5px; box-shadow: 1px 1px 3px -1px rgba(0,0,0,0.2); width: 100%; padding: 10px 20px; border: none; font-size: 16px; font-weight: 600; line-height: 16px; color: var(--negro); font-family: var(--main-font, sans-serif); font-size: var(--body-font-size); }
input[type="checkbox"], input[type="radio"] {width: 20px; height: 20px; border-radius: 10px; border: solid 2px #ccc;}
input[type=submit] {border: solid 2px #ffffff; border-radius: 60px; background-color: var(--main-color, red); color: #fff; padding: 15px 40px; font-size: 17px; font-weight: 600; cursor:pointer;}
::-webkit-input-placeholder, :-ms-input-placeholder, :-moz-placeholder, ::-moz-placeholder {font-family: var(--main-font, sans-serif); font-size: var(--body-font-size); }


/* OTROS */
header { 
	-webkit-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0);
	-moz-box-shadow: 0px 2px 2px -1px rgba(0,0,0,0);
	box-shadow: 0px 2px 2px -1px rgba(0,0,0,0);
}
header.glue {
	-webkit-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
	-moz-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
	box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.13);
}
.main-menu, .main-menu-mobile { font-weight: 700; text-transform: uppercase; }
.main-menu ul { margin: 0; }
.main-menu ul li { margin: 0; }
.top-menu { height: 35px; overflow: hidden; }
.glue .top-menu { height: 0px; }
.main-menu-mobile { position: fixed; right: calc( -1 *100% - var(--xxl)); top: 0; width: calc( 100% - var(--xxl)); height: 100%; }
.main-menu-mobile.active { right:0; }
.menu-icon { width:100%; max-width: 25px; }
.col-logo { width: 200px; }
.col-logo p { font-size: 13px; width: max-content; }
.col-logo p a { text-decoration: underline; }

.col-nav { width: calc( 100% - 200px - var(--l) ); }
.glue .col-logo { width: 100px; }

ul.disc {  }
ul.disc li { position: relative; padding-left: 18px; }
ul.disc li:before { content: ""; position: absolute; top: calc( ( var(--p-font-size) / 2 ) - 2px ); left: 0; width: 8px; height: 8px; border-radius: 100%; background-color: var(--main-color); }

.card-txt a { position: absolute; bottom: var(--l); }

span.error { display: block; margin-top: var(--s); padding: var(--xs); color: #a30000; background-color: #ffc8c8; border: solid 1px currentColor; border-radius: var(--xxl); }
span.success { display: block; margin-top: var(--s); padding: var(--xs); color: #007905; background-color: #b6ffb7; border: solid 1px currentColor; border-radius: var(--xxl); }

.logo-float { position: absolute; width: 100%; max-width: 350px; top: 30%; left: calc(50% - 175px); }
.dibujo-anima { animation: dibujo-anima 5s cubic-bezier(0.9, 0.15, 0.15, 0.9) alternate infinite;}
.icon_proceso { max-width: 150px; }
.icon_saleforce { max-height: 20px; }
.icon_accordion {position: absolute; max-width: 26px; top: -3px; right: 0; }
.active .icon_accordion {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#proceso { background: url(../img/nave_espacial.png) right 20% top 2% no-repeat; background-size: auto; }

@keyframes dibujo-anima {
	0% { 
		-webkit-transform: translate(-20%, 20%); 
		-moz-transform: translate(-20%, 20%); 
		-ms-transform: translate(-20%, 20%); 
		-o-transform: translate(-20%, 20%); 
		transform: translate(-20%, 20%); 
	}
	100% { 
		-webkit-transform: translate(20%, -20%); 
		-moz-transform: translate(20%, -20%); 
		-ms-transform: translate(20%, -20%); 
		-o-transform: translate(20%, -20%); 
		transform: translate(20%, -20%); 
	}
}

/* RESPONSIVE */
@media only screen and (max-width:1440px) {
	:root {		
		--body-font-size: 16px;
		--h1-font-size: 70px;
		--h2-font-size: 40px;
		--h3-font-size: 26px;
		--h4-font-size: 22px;
		--h5-font-size: 20px;
		--h6-font-size: 14px;
	}
	.wrapper {
		padding-left: var(--l);
		padding-right: var(--l);
	}

	/* OTROS */
	.col-logo { max-width: 150px; }
	.col-nav { width: calc( 100% - 150px - var(--l) ); }
	.main-menu { font-size: 14px; }
	.icon_saleforce { max-height: 18px; }
}

@media only screen and (max-width:1024px) {

	:root {
		--xxl:128px;
		--xl:64px;
		--l:32px;
		--m:24px;
		--s:16px;
		--xs:8px;
		--xxs:5px;
		--no:0px;
		--gap: 30px;
		
		--body-font-size: 16px;
		--h1-font-size: 70px;
		--h2-font-size: 40px;
		--h3-font-size: 26px;
		--h4-font-size: 22px;
		--h5-font-size: 20px;
		--h6-font-size: 14px;
	}	

	/* COLUMNS */
	.col1-8, .col3-8, .col1-7 {--cols: 4; --num: 1;}
	.col1-3, .col2-6, .col2-3, .col4-6, .col5-8, .col6-8 {--cols: 2; --num: 1;}

	.coltab1-1, .coltab2-2, .coltab3-3, .coltab4-4, .coltab5-5, .coltab6-6, .coltab7-7, .coltab8-8 {--cols: 1; --num: 1;}
	.coltab1-2, .coltab2-4, .coltab3-6, .coltab4-8 {--cols: 2; --num: 1;}
	.coltab1-3, .coltab2-6 {--cols: 3; --num: 1;}
	.coltab2-3, .coltab4-6 {--cols: 3; --num: 2;}
	.coltab1-4, .coltab2-8 {--cols: 4; --num: 1;}
	.coltab3-4, .coltab6-8 {--cols: 4; --num: 3;}
	.coltab1-5 {--cols: 5; --num: 1;}
	.coltab2-5 {--cols: 5; --num: 2;}
	.coltab3-5 {--cols: 5; --num: 3;}
	.coltab4-5 {--cols: 5; --num: 4;}
	.coltab1-6 {--cols: 6; --num: 1;}
	.coltab5-6 {--cols: 6; --num: 2;}
	.coltab1-7 {--cols: 7; --num: 1;}
	.coltab2-7 {--cols: 7; --num: 2;}
	.coltab3-7 {--cols: 7; --num: 3;}
	.coltab4-7 {--cols: 7; --num: 4;}
	.coltab5-7 {--cols: 7; --num: 5;}
	.coltab6-7 {--cols: 7; --num: 6;}
	.coltab1-8 {--cols: 8; --num: 1;}
	.coltab3-8 {--cols: 8; --num: 3;}
	.coltab5-8 {--cols: 8; --num: 5;}
	.coltab7-8 {--cols: 8; --num: 7;}

	/* RESPONSIVE */
	.tab-show {display: inherit !important;}
	.tab-hide {display: none !important;}
	.align-tab-l { text-align: left; }
	.align-tab-c { text-align: center; }
	.align-tab-r { text-align: right; }

	/* OTROS */
	.col-logo { max-width: 200px; }
	.col-nav { width: calc( 100% - 200px - var(--l) ); }
	#proceso { background-position: right var(--l) top 2%; background-size: contain; }
}

@media only screen and (max-width:770px) {

	:root {
		--xxl:128px;
		--xl:64px;
		--l:32px;
		--m:24px;
		--s:16px;
		--xs:8px;
		--xxs:5px;
		--no:0px;
		--gap: 24px;
		
		--body-font-size: 16px;
		--h1-font-size: 40px;
		--h2-font-size: 30px;
		--h3-font-size: 26px;
		--h4-font-size: 22px;
		--h5-font-size: 18px;
		--h6-font-size: 14px;
	}	

	.mob-order-1{order:1;}
	.mob-order-2{order:2;}
	.mob-order-3{order:3;}
	.mob-order-4{order:4;}
	.mob-order-5{order:5;}
	.mob-order-6{order:6;}
	.mob-order-6{order:7;}
	.mob-order-6{order:8;}

	/* COLUMNS */
	.col1-2, .col2-4, .col3-6, .col1-3, .col2-6, .col2-3, .col4-6, .col1-4, .col3-4, .col1-5, .col2-5, .col3-5, .col4-5, .col1-6, .col1-7, .col1-8,	.col3-8, .col5-8, .col7-8 {--cols: 1; --num: 1;}
	.colmob1-1, .colmob2-2, .colmob3-3, .colmob4-4, .colmob5-5, .colmob6-6, .colmob7-7, .colmob8-8 {--cols: 1; --num: 1;}
	.colmob1-2, .colmob2-4, .colmob3-6, .colmob4-8 {--cols: 2; --num: 1;}
	.colmob1-3, .colmob2-6 {--cols: 3; --num: 1;}
	.colmob2-3, .colmob4-6 {--cols: 3; --num: 2;}
	.colmob1-4, .colmob2-8 {--cols: 4; --num: 1;}
	.colmob3-4, .colmob6-8 {--cols: 4; --num: 3;}
	.colmob1-5 {--cols: 5; --num: 1;}
	.colmob2-5 {--cols: 5; --num: 2;}
	.colmob3-5 {--cols: 5; --num: 3;}
	.colmob4-5 {--cols: 5; --num: 4;}
	.colmob1-6 {--cols: 6; --num: 1;}
	.colmob5-6 {--cols: 6; --num: 5;}
	.colmob1-7 {--cols: 7; --num: 1;}
	.colmob2-7 {--cols: 7; --num: 2;}
	.colmob3-7 {--cols: 7; --num: 3;}
	.colmob4-7 {--cols: 7; --num: 4;}
	.colmob5-7 {--cols: 7; --num: 5;}
	.colmob6-7 {--cols: 7; --num: 6;}
	.colmob1-8 {--cols: 8; --num: 1;}
	.colmob3-8 {--cols: 8; --num: 3;}
	.colmob5-8 {--cols: 8; --num: 5;}
	.colmob7-8 {--cols: 8; --num: 7;}	

	/* RESPONSIVE */
	.mob-show {display: inherit !important;}
	.mob-hide {display: none !important;}
	.align-mob-l { text-align: left; }
	.align-mob-c { text-align: center; }
	.align-mob-r { text-align: right; }

	/* OTROS */
	.card-img img { width: 100%; }
	.logo-float { max-width: 200px; top: 10%; left: calc(50% - 100px); }
	.icon_saleforce { max-height: 15px; }
}

@media only screen and (max-width:550px) {
	:root {
		--xxl: 64px;
		--xl: 36px;
		--l: 24px;
		--m: 16px;
		--s: 12px;
		--xs: 8px;
		--xxs: 5px;
		--no: 0px;
		--gap: 16px;
		
		--body-font-size-des: 15px;
		--h1-font-size-des: 32px;
		--h2-font-size-des: 28px;
		--h3-font-size-des: 24px;
		--h4-font-size-des: 22px;
		--h5-font-size-des: 18px;
		--h6-font-size-des: 14px;
	}

	/* OTROS */
	.col-logo { max-width: 150px; }
	.col-nav { width: calc( 100% - 150px - var(--l) ); }
	.icon_proceso { max-width: 80px; }
	.icon_logos { max-width: 200px; }
	.dibujo-anima { max-width: 160px; }
}