/*
	Autor: 
		PUM! estudio

	Indice de contenidos: 
		0 Inicializadores
		1 Estructura
		2 texto
		3 Contenedores
		4 Componentes
		5 Animación
*/




/* 0 Inicializadores */

@charset "UTF-8";

:root { 
	--b: #000;
	--w: #FFF;
	--bright-gray: #F5F5F5;
	--gray: #9E9E9E;
	--blue:  #1C2347;
	--blue-50: #495990;
	--bright-blue: #5690FC;
	--sky-blue: #00C6E3;
	--bright-green: #55C957;
	--yellow-green: #B6CB36;
	--yellow: #F0BD37;
	--red: #FF6454;
	--aubergine: #BF0085;
}

::selection { background: var(--bright-gray); color: var(--b);}
::-moz-selection { background: var(--bright-gray); color: var(--b);}
::-webkit-selection { background: var(--bright-gray); color: var(--b);}




/* 1 Esctructura */

.header { position: sticky; top: 0; z-index: 100; width: 100%; height: 8rem; border-bottom: .4rem var(--gray) solid; background-color: var(--w);}
.header .col-main { display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem;}
.header #logo,
.header #logo svg { position: relative; z-index: 2; display: block; width: 7.6rem; height: auto;}
.header a { text-decoration: none;}
.header .menu { flex-grow: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 1.8rem 0 2.4rem;}
.header .menu-main { flex-grow: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 2.2rem;}
.header .menu-main a { height: 8rem; display: flex; align-items: center; justify-content: center; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; padding: 0 1.6rem;}
.header .menu-main a:hover { background-color: var(--bright-gray); border-bottom-color: var(--gray);}
.header .menu-main a.active { background-color: var(--bright-blue); color: var(--w); border-bottom-color: var(--gray);}
.header .menu-tools { display: flex; align-items: center; gap: 1.8rem;}

.header .cta-menu { display: none;}

.footer { background-color: var(--blue); color: var(--w); padding: 6rem 0 4rem 0;}
.footer .col-main { padding: 0 2.5rem;}
.footer a { text-decoration: none; color: var(--w);}
.footer a:hover { opacity: .5;}
.footer .logo,
.footer .logo svg { display: block; width: 10.1rem; height: auto;}
.footer .logo svg path { fill: var(--w);}
.footer-rrss { gap: .8rem;}
.footer-rrss a { display: block;}
.footer-rrss img { display: block; width: 4rem; height: 4rem;}
.footer-address p { margin-bottom: 1rem;}
.footer-logos { gap: 1rem;}
.footer-logo { display: flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; padding: 1.2rem; background-color: var(--w); border-radius: 100%;}
.footer-logo img { display: block; max-width: 100%; max-height: 100%;}
.footer-legal ul { gap: .8rem;}

.col-main { width: 100%; max-width: 152rem; padding: 0 4.5rem;}

.padd { padding: 1.5rem;}
.padd-h { padding: 0 1.5rem;}

.m-8-b 	{ margin-bottom: .8rem;}
.m-16-b { margin-bottom: 1.6rem;}
.m-24-b { margin-bottom: 2.4rem;}
.m-32-b { margin-bottom: 3.2rem;}
.m-40-b { margin-bottom: 4rem;}
.m-48-b { margin-bottom: 4.8rem;}
.m-64-b { margin-bottom: 6.4rem;}
.m-80-b { margin-bottom: 8rem;}
.m-128-b { margin-bottom: 12.8rem;}




/* 2 Texto */

html, body, * { font-family: 'Inter', sans-serif;}
html { font-size: 10px;}
body { font-size: 2.2rem; line-height: 145%; color: var(--blue);}

a { color: var(--blue);}

.txt-h1, .content-txt h1 											 { font-weight: 700; font-size: 4.4rem; line-height: 120%;}
.txt-h2, .content-txt h2 											 { font-weight: 700; font-size: 3.2rem; line-height: 130%;}
.txt-h3, .content-txt h3											 { font-weight: 700; font-size: 2.4rem; line-height: 130%;}
.txt-h4, .content-txt h4 											 { font-weight: 700; font-size: 2.2rem; line-height: 145%;}
.txt-h5, .content-txt h5, 											 
.txt-body, .content-txt p, .content-txt ul, .content-txt ol, label	 { font-weight: 400; font-size: 2.2rem; line-height: 140%;}
.txt-body strong, .txt-body b, .content-txt strong, .content-txt b	 { font-weight: 700;}
.txt-caption, .content-txt h5, input, textarea						 { font-weight: 400; font-size: 1.7rem; line-height: 110%;}
.txt-caption-small													 { font-weight: 400; font-size: 1.4rem; line-height: 110%;}
.txt-cta 															 { font-weight: 400; font-size: 2rem; line-height: 140%;}

.content-txt h1,
.content-txt h2,
.content-txt h3	{ margin-bottom: 2.4rem;}
.content-txt h4	{ margin-bottom: 1.6rem;}
.content-txt h5, 
.content-txt p, 
.content-txt ul, 
.content-txt ol	{ margin-bottom: 1.4em;}
.content-txt ul, 
.content-txt ol	{ margin-bottom: 1.4em; padding-left: 1em;}
.content-txt li { line-height: 1.4em; margin-bottom: .75em;}

.txt-gray { color: var(--gray);}



/* 3 contenido */

.content img,
.content video { display: block; max-width: 100%; height: auto;}

.cta { display: inline-flex; padding: 1.4rem 2.4rem; border-radius: 1.2rem; flex-shrink: 0; background-color: var(--blue); color: var(--w);}
.cta:hover { background-color: var(--bright-blue); color: var(--w);}
.cta-circle { display: inline-flex; align-items: center; justify-content: flex-start; gap: 1.6rem; text-decoration: none;}
.cta-circle::before { content: ''; display: block; align-items: center; justify-content: center; width: 8rem; height: 8rem; border-radius: 100%; background: var(--bright-blue) url(../img/icon/icon-xl-arrow-right.svg) no-repeat center; background-size: 5.6rem 5.6rem; flex-shrink: 0;}
.cta-circle.download::before,
a.download .cta-circle::before,
.cta-circle[download]::before,
a[download] .cta-circle::before { background-image: url(../img/icon/icon-xl-arrow-download.svg);}
.cta-circle:hover::before,
a:hover .cta-circle::before { background-color: var(--b);}

.content-box { margin: 6.4rem 0;}

.content-back { margin: 3.2rem 0 -3.2rem 0;}
.content-back a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;}
.content-back a::before { content: ''; display: block; width: 2.4rem; height: 2.4rem; background: url(../img/icon/icon-s-arrow-left.svg) no-repeat center; background-size: 2.4rem 2.4rem; flex-shrink: 0;}

.content-img img { aspect-ratio: 16/9; object-fit: cover; border-radius: 1.2rem;}

.content-card { display: flex; flex-direction: column; justify-content: space-between; gap: 5.6rem; height: 100%; padding: 4rem; border: .4rem solid #CCC; border-radius: 1.6rem; text-decoration: none;}
.content-card .content-info { display: flex; flex-direction: column; gap: 1.6rem;}
.content-card .content-info-txt { display: flex; flex-direction: column; gap: 2.4rem;}

.content-info-item + .content-info-item { margin-top: 5.4rem;}

.content-info-icon img { display: block; max-height: 9.6rem; width: auto;}

.content-ctas-in { display: flex; flex-direction: column; gap: 2.4rem;}

.content-title + .content-text,
.content-title + .content-ctas,
.content-title + .content-info,
.content-text + .content-text,
.content-text + .content-ctas,
.content-ctas + .content-text { margin-top: -2.4rem;}

                                       

/* 4 Animation - Transition */

a,
a:before,
a :before,
button,
input,
section,
textarea,
path,
.cta,
.header,
.header:after,
.header:before,
.menu { transition: all .4s ease;}

@keyframes rotacion {
	from { transform: rotate(0);}
	to 	 { transform: rotate(360deg);}
}




/* THE END -- :P */