/*
	Autor: 
		PUM! estudio

	Index:
		1 -- Structure
			1.1 -- Header
			1.2 -- Footer
		2 -- Text
		3 -- Interaction
			3.1 -- CTAs
			3.2 -- Tooltip
			3.3 -- Inputs
			3.4 -- Cursor
		4 -- Icons
		5 -- Animation
		6 -- Components
*/

@charset "UTF-8";


/* 1 -- Structure */

html { background-color: var(--bg-html); scroll-behavior: smooth;}
body { background-color: var(--bg-body); color: var(--c-txt);}

.col-main { width: 100%; padding: 0 var(--padd-main); max-width: 152rem;}

@media ( max-width: 720px ) { .col-main { padding: 0 var(--padd-main-s);} }


/* 1.1 -- Header */

.header { position: sticky; top: 0; left: 0; z-index: 100; width: 100%; padding: var(--unit-10) 0; color: var(--c-white); background-color: var(--c-orange);}
.header:before { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;}
.header a:not(.cta-box) { color: var(--c-white);}
.header-logo { position: relative; z-index: 3;}
.header-logo a,
.header-logo img { display: block;}
.header-logo img { height: var(--unit-14); width: auto;}
.scroll-up .header { transform: translateY(0);}
.scroll-up .header::before { opacity: 1;}
.scroll-down .header { transform: translateY(-100%);}

.header .cta-menu { display: none; color: transparent;}
.header .menu { position: relative; z-index: 2;}

@media ( max-width: 1065px ) {

	.header { position: fixed; padding: var(--unit-6) 0;}
	.header .menu { position: fixed; top: 0; left: 0; padding: var(--unit-38) var(--unit-6) 12rem var(--unit-6); height: 100dvh; width: 100%; background-color: var(--c-orange); transform: translateX(-100%); }
	.header .menu-main { height: 100%;}
	.header .menu-main li:has(:not(.cta-box)) { width: 100%; border-top: var(--border-1-w);}
	.header .menu-main .cta:not(.cta-box) { display: block; padding: var(--unit-4) 0; font-size: 1.8rem;}
	.header .cta-menu { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: var(--unit-11); height: var(--unit-11); overflow: hidden; text-indent: -9999px;}
	.header .cta-menu::before,
	.header .cta-menu::after { content: ''; display: block; width: 100%; height: 1px; background-color: var(--c-white); position: absolute;}
	.header .cta-menu::before { transform: translateY(-4px);}
	.header .cta-menu::after { transform: translateY(4px);}

	.menu-active,
	.menu-active body { overflow: hidden;}
	.menu-active .header .menu { transform: translateX(0); }
	.menu-active .header .cta-menu::before { transform: translateY(0) rotate(-45deg);}
	.menu-active .header .cta-menu::after { transform: translateY(0) rotate(45deg);}

}


/* 1.2 -- Footer */

.content,
.footer { position: relative; z-index: 90;}

.footer { background-color: var(--c-orange); color: var(--c-white);}
.footer * { color: var(--c-white);}
.footer-row { padding: var(--unit-6) 0;}
.footer-row:first-child { border-bottom: var(--border-1-w);}
.footer-row:last-child { border-top: var(--border-1-w);}
.footer-logo { padding: 20rem 0;}
.footer-logo img { width: 100%; height: auto;}

@media ( max-width: 720px ) {
	.footer-logo { padding: var(--unit-20) 0;}
	.footer .cta { font-size: 1.4rem;}
	.footer-links .cta { font-size: 1.1rem; white-space: nowrap;}
}



/* 2 -- Text */

html, body, input, button, select, textarea { font-family: var(--font-2); font-style: normal;}
html { font-size: 10px}
body { font-size: var(--txt-body-s); line-height: var(--txt-body-s-lh);}

@media ( max-width: 1280px ) 	{ html { font-size: 10px;} }
@media ( max-width: 720px )  	{ html { font-size: 2vw;} }
@media ( max-width: 480px )  	{ html { font-size: 2.66667vw;} }

.txt-contact							{ font-family: var(--font); font-size: var(--txt-contact); line-height: var(--txt-contact-lh); font-weight: var(--txt-contact-fw); letter-spacing: var(--txt-contact-ls);}
.content-txt h1, .txt-title-xl			{ font-family: var(--font); font-size: var(--txt-title-xl); line-height: var(--txt-title-xl-lh); font-weight: var(--txt-title-xl-fw); letter-spacing: var(--txt-title-xl-ls);}
.content-txt h2, .txt-title-l			{ font-family: var(--font); font-size: var(--txt-title-l); line-height: var(--txt-title-l-lh); font-weight: var(--txt-title-l-fw); letter-spacing: var(--txt-title-l-ls);}
.content-txt h3, .txt-title-s			{ font-family: var(--font); font-size: var(--txt-title-s); line-height: var(--txt-title-s-lh); font-weight: var(--txt-title-s-fw); letter-spacing: var(--txt-title-s-ls);}
.content-txt h4, .txt-body-m 	 		{ font-size: var(--txt-body-m); line-height: var(--txt-body-m-lh); font-weight: var(--txt-body-m-fw); letter-spacing: var(--txt-body-m-ls);}
.content-txt h5, .txt-body-s	 		{ font-size: var(--txt-body-s); line-height: var(--txt-body-s-lh); font-weight: var(--txt-body-s-fw); letter-spacing: var(--txt-body-s-ls);}
.content-txt h6, .txt-body-xs 	 		{ font-size: var(--txt-body-xs); line-height: var(--txt-body-xs-lh); font-weight: var(--txt-body-xs-fw); letter-spacing: var(--txt-body-xs-ls);}
.content-txt p, 
.content-txt ul, 
.content-txt ol							{ font-size: var(--txt-body-s); line-height: var(--txt-body-s-lh); font-weight: var(--txt-body-s-fw); letter-spacing: var(--txt-body-s-ls);}
.cta, input[type=submit]				{ font-size: var(--txt-cta); line-height: var(--txt-cta-lh); font-weight: var(--txt-cta-fw); letter-spacing: var(--txt-cta-ls); text-decoration: none;}

.content-txt h1,
.content-txt h2,
.content-txt h3 { margin-bottom: var(--unit-4); margin-top: var(--unit-8);}
.content-txt h4 { margin-bottom: 0; margin-top: 0;}
.content-txt h5 { margin-bottom: var(--txt-body-s-lh);}
.content-txt h6 { margin-bottom: var(--txt-body-xs-lh);}
.content-txt p,
.content-txt ul, 
.content-txt ol { margin-bottom: var(--txt-body-s-lh);}
.content-txt ul, 
.content-txt ol	{ padding-left: var(--unit-4);}
.content-txt li { margin-bottom: var(--unit-2);}
.content-txt h1:first-child,
.content-txt h2:first-child,
.content-txt h3:first-child { margin-top: 0;}
.content-txt h3 + h4 { margin-top: calc(0px - var(--unit-2));}
.content-txt p + ul { margin-top: calc(0px - var(--txt-body-s-lh));}
.content-txt :last-child { margin-bottom: 0;}

.content-txt a { text-decoration: underline; color: var(--c-orange);}
.content-txt a.hover { opacity: .6;}
a, button { color: var(--c-black);}

.txt-strong, strong, b { font-weight: var(--fw-strong);}

.txt-a-l { text-align: left;}
.txt-a-c { text-align: center;}
.txt-a-r { text-align: right;}

.txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.txt-upper { text-transform: uppercase;}

.header a,
.footer a { text-decoration: none;}

.txt-orange { color: var(--c-orange);}
.txt-grey { color: var(--c-grey-1);}


/* 3 -- Interaction */

::selection { background: var(--c-black); color: var(--c-white);}
::-moz-selection { background: var(--c-black); color: var(--c-white);}
::-webkit-selection { background: var(--c-black); color: var(--c-white);}

:focus { color: var(--c-white);}
::placeholder { color: var(--c-black);}
:focus::placeholder { color: var(--c-black);}

a:focus,
a:active { color: var(--c-black);}

/* 3.1 -- CTAs */

.cta { display: inline-flex; align-items: center; justify-content: center; cursor: pointer;}
.cta-box { padding: var(--unit-4) var(--unit-10); border-radius: var(--unit-12); box-shadow: 0 0 var(--unit-2) 0 #00000000;}
.cta.icon { gap: var(--unit-2);}
.cta-primary { background-color: var(--c-white); color: var(--c-black); box-shadow: 0 0 var(--unit-2) 0 #FF502B00;}
.hover.cta-primary,
.hover .cta-primary { box-shadow: 0 0 var(--unit-2) 0 #eacbc5;}
.cta-secondary { background-color: var(--c-orange); color: var(--c-white); box-shadow: 0 0 var(--unit-2) 0 #FFECE800;}
.hover.cta-secondary,
.hover .cta-secondary { box-shadow: 0 0 var(--unit-2) 0 #eacbc5;}


@media ( max-width: 1280px ) {

	.cta-box { padding: var(--unit-3) var(--unit-6);}

}

/* 3.2 -- Tooltip */

.tooltip { position: relative;}
.tooltip .tooltip-cta { position: relative; display: inline-flex; width: var(--unit-5); height: var(--unit-5); align-items: center; justify-content: center; border-radius: 100%; border: .1rem solid var(--c-black);}
.tooltip .tooltip-cta.hover,
.tooltip .tooltip-cta.active { background-color: var(--c-white); border-color: var(--c-white); color: var(--c-black);}
.tooltip .tooltip-content { position: absolute; visibility: hidden; opacity: 0; bottom: 120%; left: 0; width: 100vw; min-width: 12rem; max-width: 28rem; background-color: var(--c-black); padding: var(--unit-4);}
.tooltip .tooltip-content.pos-r { left: auto; right: 0;}
.tooltip .tooltip-cta.hover + .tooltip-content { visibility: visible; opacity: 1;}

/* 3.3 -- Input */

input, select, textarea { width: 100%;}
input[type=submit] { width: auto;}

/* -- Campos de texto  */
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], 
select, 
textarea { font-size: var(--txt-input); line-height: var(--txt-input-lh); font-weight: var(--txt-input-fw); letter-spacing: var(--txt-input-ls); padding: var(--input-padd); border-radius: var(--input-border-rad); background-color: var(--input-color-bg); color: var(--input-color); border: var(--input-border);}
textarea { min-height: var(--unit-30);}

/* -- Botón  */
input[type=submit] { -webkit-appearance: none!important; appearance: none!important; font-size: var(--txt-submit); line-height: var(--txt-submit-lh); font-weight: var(--txt-submit-fw); letter-spacing: var(--txt-submit-ls); border-radius: var(--submit-border-rad); padding: var(--submit-padd) !important; background: var(--submit-color-bg); color: var(--submit-color); border: var(--submit-border);  box-shadow: 0 0 var(--unit-2) 0 #FFECE800;}
input[type=submit].hover { box-shadow: 0 0 var(--unit-2) 0 #eacbc5;}

/* -- Checkbox */
input[type=checkbox],
input[type=radio] { width: var(--unit-4); height: var(--unit-4); border: var(--border-1-b); background-color: transparent; background-size: 0 0; background-position: center; background-repeat: no-repeat; border-radius: var(--unit);}
input[type=radio] + * { color: var(--c-white); margin-top: -.1rem;}
input[type=checkbox] { background-image: var(--icon-check);}
input[type=radio] { background-image: var(--icon-radio);}
input[type=checkbox]:checked,
input[type=radio]:checked { border-color: var(--c-black); background-color: transparent; background-size: var(--unit-2) var(--unit-2);}
input[type=radio]:checked + * { color: var(--c-black);}

/* -- Labels */
label, legend { cursor: pointer; font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls);}

/* -- Select  */
select { padding-right: var(--unit-14); background: transparent; color: var(--c-black); border: var(--input-border); background-repeat: no-repeat; background-position: calc(100% - var(--unit-4)) center; background-image: var(--icon-arrow-drop); background-size: var(--unit-6);}

/* -- :focus  */
input:focus, textarea:focus, select:focus { color: var(--c-black); border-color: var(--c-orange);}
:focus::placeholder { color: var(--c-black); border-color: var(--c-grey-2);}




/* 3.4 -- Cursor */

#cursor { position: fixed; top: -100px; left: -100px; width: 0; height: 0; z-index: 9998; display: flex; align-items: center; overflow: hidden; justify-content: center; overflow: visible; transform: translate(-50%, -50%); transform-origin: center; pointer-events: none;}
#cursor:after { content: ''; position: absolute; display: block; width: var(--unit); height: var(--unit); background: var(--c-black); border: var(--border-1-b); border-radius: 50%; z-index: 1;}
#cursor.hover:after { width: var(--unit-16); height: var(--unit-16); background: transparent;}
.window-inactive #cursor::after,
.mobile-device #cursor { display: none;}




/* 4 -- Icons */

.icon::after { content: ''; display: block; width: var(--unit-6); height: var(--unit-6); background-position: center; background-repeat: no-repeat; background-size: contain;}
.icon-xs::after { width: var(--unit-4); height: var(--unit-4);}
.icon-s::after { width: var(--unit-5); height: var(--unit-5);}
.icon-m::after { width: var(--unit-6); height: var(--unit-6);}
.icon-l::after { width: var(--unit-8); height: var(--unit-8);}
.icon-xl::after { width: var(--unit-12); height: var(--unit-12);}
.icon-arrow-r::after { background-image: var(--icon-arrow-r);}
.icon-arrow-l::after { background-image: var(--icon-arrow-l);}
.icon-arrow-t::after { background-image: var(--icon-arrow-t);}
.icon-arrow-b::after { background-image: var(--icon-arrow-b);}
.icon-arrow-drop::after { background-image: var(--icon-arrow-drop);}
.icon-download::after { background-image: var(--icon-download);}




/* 5 -- Animation */

a, button, .cta,
.icon::after,
.num,
.header,
.header::before,
.header .cta-menu::before,
.header .cta-menu::after,
.menu,
.tooltip-cta,
.tooltip-content,
input, select, textarea,
::placeholder { transition: all .8s var(--bezier);}

input[type="checkbox"],
input[type="radio"], 
#cursor:after { transition: all .2s var(--bezier);}

[data-view] { opacity: 0; transition: all 1.2s var(--bezier);}
[data-view].view { opacity: 1; transform: translate(0);}

[data-view]:nth-child(n+2) { transition-delay: .2s;}
[data-view]:nth-child(n+3) { transition-delay: .3s;}
[data-view]:nth-child(n+4) { transition-delay: .4s;}
[data-view]:nth-child(n+5) { transition-delay: .5s;}
[data-view]:nth-child(n+6) { transition-delay: .6s;}
[data-view]:nth-child(n+7) { transition-delay: .7s;}
[data-view]:nth-child(n+8) { transition-delay: .8s;}
[data-view]:nth-child(n+9) { transition-delay: .9s;}


@keyframes fadein { 0% { opacity: 0;} 100% { opacity: 1;} }



/* The end -- :P */