/*
	Autor: 
		PUM! estudio

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





/* 0 Inicializadores */

@charset "UTF-8";

@font-face { font-family: 'nantes'; src: url('../fonts/nantes-regular.ttf'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'nantes'; src: url('../fonts/nantes-regular-italic.ttf'); font-weight: 400; font-style: italic;}
@font-face { font-family: 'at'; src: url('../fonts/at-surt-regular.otf'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'at'; src: url('../fonts/at-surt-regular-oblique.otf'); font-weight: 400; font-style: italic;}
@font-face { font-family: 'at'; src: url('../fonts/at-surt-semibold.otf'); font-weight: 600; font-style: normal;}
@font-face { font-family: 'at'; src: url('../fonts/at-surt-semibold-oblique.otf'); font-weight: 600; font-style: italic;}
@font-face { font-family: 'at'; src: url('../fonts/at-surt-medium.otf'); font-weight: 500; font-style: normal;}

:root { 
	--sand:			#F7F2ED;
	--sand-d: 		#EBE4DD;
	--sand-dd: 		#DDD1C5;
	--gray:			#7E7E7E;
	--salmon:		#FFA985;
	--salmon-d:		#E2794C;
	--salmon-dd:	#D23F00;
	--bezier: 		cubic-bezier(0.2, 0.75, 0.55, 0.92);
	--shadow:   	-3rem 3.5rem 4.7rem rgba(0, 0, 0, 0.003), -2.9rem 3.2rem 4.3rem rgba(0, 0, 0, 0.01), -2.5rem 2.7rem 3.6rem rgba(0, 0, 0, 0.025), -1.8rem 2rem 2.7rem rgba(0, 0, 0, 0.04), -1rem 1.1rem 1.5rem rgba(0, 0, 0, 0.07), 0rem 0rem 0rem rgba(0, 0, 0, 0.1);
}

::selection { background: var(--sand-d); color: #000;}
::-moz-selection { background: var(--sand-d); color: #000;}
::-webkit-selection { background: var(--sand-d); color: #000;}




/* 1 Esctructura */

html { background: #000;}
body { background-color: var(--sand-d);}

.header { padding: 2.8rem 2rem; position: absolute; z-index: 10; top: 0; left: 0; width: 100%;}
.header #logo { display: block;}
.header #logo svg { display: block; width: 11rem; height: auto;}

.header-home #logo { visibility: hidden;}
.header-white #logo svg { fill: #FFF;}
.header-black #logo svg { fill: #000;}

.header .menu { position: fixed; z-index: 10; top: 2.8rem; right: 2rem;}
.header .menu-lang { padding: 1.4rem 1.6rem 1.1rem 1.6rem; background: #FFF; border-radius: 2rem; margin-left: 1.8rem; box-shadow: var(--shadow);}
.header .menu-lang li { padding: 0 .4rem;}
.header .menu-lang li a { color: var(--gray);}
.header .menu-lang li a:hover,
.header .menu-lang li a.active { color: #000;}
.header .menu-main li + li .cta { margin-left: 1.8rem; }
.header .menu-main .cta { background-color: #FFFFFF; box-shadow: var(--shadow);}
.header .btn-menu { margin-left: 1.8rem; background-color: var(--sand); box-shadow: var(--shadow);}

.menu-popup { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; transform: translateY(-100%); background: #FFF; overflow: hidden}
.menu-popup-header { padding: 2.8rem 2rem; position: absolute; top: 0; width: 100%; z-index: 2;}
.menu-popup-header button { box-shadow: var(--shadow);}
.menu-popup-content { position: relative; z-index: 1; height: 100%; overflow: auto; padding: 14rem 0 2.8rem 0;}
.menu-popup-content-rrss { gap: 1.5rem;}
.active-menu .menu-popup { transform: translateY(0);}

.nav-breadcrumbs li + li { margin-left: .4rem; }
.nav-breadcrumbs li + li:before { content: "/ "; }
.nav-breadcrumbs a { opacity: .7;}
.nav-breadcrumbs a:hover { opacity: 1;}

.content { position: relative; z-index: 1; min-height: 100vh; padding-bottom: 12rem;}
.content img,
.content video { width: 100%;}

.footer { position: relative; z-index: 5; background-color: #000;}
.footer-news { background-color: var(--salmon); color: #000; padding: 9rem 0;}
.footer-news input[type=text] { margin-right: 4rem;}
.footer-main { background-color: #000; color: #FFF; padding: 4rem 0 2.4rem 0;}
.footer-main a { color: #FFF; text-decoration: underline;}
.footer-main .cta { margin: 0 1rem 1rem 0; text-decoration: none;}
.footer-rrss a + a { margin-left: 1.5rem;}
.footer-nav li + li { margin-left: 3rem;}
.footer-logo img { width: 14rem;}
.footer-address-tlfs { gap: .8rem;}
.footer-powered { position: relative;}
/* .footer-powered:before { content: ''; position: absolute; width: .05rem; height: 100%; background: #FFF; left: 48%;} */
.footer .txt-footer-small img {width: 100%;}
.col-main { width: 100%; max-width: 121rem; padding: 0 2rem;}
.col-main-g { width: 100%; max-width: 192rem; padding: 0 2rem;}

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

.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-60-b { margin-bottom: 6rem;}
.m-80-b { margin-bottom: 8rem;}
.m-120-b { margin-bottom: 12rem;}




/* 2 Texto */

html, body { font-family: 'nantes', serif;}
html { font-size: .690vw;}
body { font-size: 1.6rem; line-height: 1.75em;}

a { color: #000; text-decoration: none;}

h1, h2, h3, h5, h6 { font-family: 'at', sans-serif; font-weight: 600;}
h4 { font-family: 'nantes', serif; font-weight: 700;}
h6 { font-weight: 400;}

.menu { font-size: 1.2rem; line-height: 1em; font-family: 'at', sans-serif;}

.txt-h1  	 { font-size: 10rem; line-height: 1em; letter-spacing: -0.02em; font-weight: 650; font-family: 'at', sans-serif;}
.txt-h2	  	 { font-size: 3.2rem; line-height: 1.3em; letter-spacing: -0.01em; font-weight: 600; font-family: 'at', sans-serif;}
.txt-h3	  	 { font-size: 2.4rem; line-height: 1.45em; letter-spacing: -0.01em; font-weight: 600; font-family: 'at', sans-serif;}
.txt-h4	  	 { font-size: 2rem; line-height: 1.7em; font-weight: 700; font-family: 'nantes', serif;}
.txt-h5	  	 { font-size: 1.6rem; line-height: 1.4em; letter-spacing: -0.01em; font-weight: 600; font-family: 'at', sans-serif;}
.txt-body  	 { font-size: 1.6rem; line-height: 1.75em;}
.txt-h6, 
.txt-link  	 { font-size: 1.4rem; line-height: 1.7em; letter-spacing: -0.01em; font-weight: 400; font-family: 'at', sans-serif;}
.txt-caption { font-size: 1.4rem; line-height: 1.5em; letter-spacing: -0.01em; font-weight: 300; font-family: 'at', sans-serif;}
.txt-cta 	 { font-size: 1.4rem; line-height: .82em; letter-spacing: 0.01em; font-family: 'at', sans-serif;}

.content-txt h1 { font-size: 10rem; line-height: 1em; letter-spacing: -0.02em; margin-bottom: .8rem;}
.content-txt h2	{ font-size: 3.2rem; line-height: 1.3em; margin-bottom: 2.4rem;}
.content-txt h3	{ font-size: 2.4rem; line-height: 1.45em; margin-bottom: 2.4rem;}
.content-txt h4	{ font-size: 2rem; line-height: 1.7em; margin-bottom: 1.6rem; font-weight: 700;}
.content-txt h5	{ font-size: 1.6rem; line-height: 1.4em;}
.content-txt p, 
.content-txt ul, 
.content-txt ol	{ font-size: 1.6rem; line-height: 1.75em; margin-bottom: 1.6em;}
.content-txt h6	{ font-size: 1.4rem; line-height: 1.7em; font-weight: 400;}
.content-txt li { line-height: 1.5em; margin-bottom: .25em;}
.content-txt ul, 
.content-txt ol	{ padding-left: 1.8em;}
.content-txt h1, 
.content-txt h2, 
.content-txt h3, 
.content-txt h4, 
.content-txt h5 { margin-top: 4rem;}
.content-txt > :first-child { margin-top: 0;}
.content-txt > :last-child { margin-bottom: 0;}
.content-txt a { color: var(--salmon-dd); text-decoration: underline;}

.txt-salmon { color: var(--salmon-dd);}

.txt-footer-h1 		{ font-size: 6.2rem; line-height: 1.2em; letter-spacing: -0.03em;}
.txt-footer-h2 		{ font-size: 1.6rem; line-height: 1.5em; letter-spacing: 0;}
.txt-footer-body	{ font-size: 1.4rem; line-height: 1.6em;}
.txt-footer-h6 		{ font-size: 1rem; line-height: 1.6em;}
.txt-footer-small 	{ font-size: .8rem; line-height: 1.5em; font-family: 'at', sans-serif;  letter-spacing: 0.03em;}

.menu-popup { font-family: 'at', sans-serif;}
.menu-popup .txt-h2	{ font-size: 4.8rem; line-height: 1.2em; letter-spacing: -0.02em; font-weight: 650; font-family: 'at', sans-serif;}

.footer-nav { font-size: 1.2rem; line-height: 1.6em; letter-spacing: -0.01em; font-family: 'at', sans-serif; color: #7E7E7E; font-weight: 600;}
.footer-nav a { color: #7E7E7E; font-weight: 600; text-decoration: none;}
.footer-nav a:hover { color: #FFF;}
.nav-breadcrumbs { font-size: 1.2rem; line-height: 1.6em; letter-spacing: -0.01em; font-family: 'at', sans-serif;}

.footer-news{    font-size: 1rem;
    line-height: 1.6rem;
    padding-top: 1rem;}



/* 3 Contenido */

.content-in { position: relative; z-index: 3;}


/* content-claim */

.content-claim { position: relative; padding: 15rem 0 6rem 0; color: #FFF;}
.content-claim .col-main-g { position: relative; z-index: 2;}
.content-claim .content-logo img { width: 22rem;}
.content-claim .txt-h5 h3 { font-size: 2.2rem; line-height: 1.6em; font-weight: 500;}
.content-claim a { color: #FFF;}

.content-bg { position: fixed; z-index: 1; width: 100%; height: 90%; left: 0; top: 0; pointer-events: none; background: #000;}
.content-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7;}


/* content-header */

.content-header { position: relative; padding: 15rem 0 0 0; color: #000; z-index: 5;}
.content-header .col-main-g { position: relative; z-index: 2;}
.content-header .txt-h5 h3 { font-size: 2.2rem; line-height: 1.6em; font-weight: 500;}


/* content-logos */

.content-logos-box { background-color: var(--sand-dd); border-radius: 2rem; padding: 6rem;}
.content-logos-box img { max-width: 100%; width: auto;}
.content-logos-item { padding: 3rem;}


/* content-ctas */

.content-ctas { display: flex; gap: .8rem;}


/* nav-anchor */

.nav-anchor a { display: inline-flex; align-items: baseline; color: var(--gray);}
.nav-anchor a:before { content: ''; display: block; width: 0; height: 0; background: var(--salmon-dd); border-radius: 100%; transition: .2s ease-out;}
.nav-anchor a.active:before { width: 1rem; height: 1rem; margin-right: .8rem;}
.nav-anchor a:hover,
.nav-anchor a.active { color: #000;}

.nav-sticky { position: sticky; top: 6rem;}


/* content-full */

.content-full { width: 128rem; transform: translateX(-33.333%);}


/* .nav-legend */

.nav-legend ul { list-style: none;}
.nav-legend ul li { display: flex;}
.nav-legend ul .circle { display: block; width: 1.8rem; height: 1.8rem; margin-right: 1.6rem; background-color: var(--gray); border-radius: 50%; flex-shrink: 0;}


/* .content-404 */

.content-404 { min-height: 50vh;}





/* 4 Componentes */

.cta { display: inline-flex; justify-content: center; align-items: center; padding: 1.4rem 1.6rem 1.1rem 1.6rem; border-radius: 2rem; text-decoration: none;}

.cta,
.cta-main { background-color: var(--sand-d); color: #000;}
.cta:hover,
.cta-main:hover,
a:hover .cta-main,
.header .cta:hover { background-color: var(--salmon); color: #000;}
.cta-white { background-color: #FFF; color: #000;}
.cta-white:hover,
a:hover .cta-white { background-color: var(--salmon); color: #000;}
.cta-black { background-color: #000; color: #FFF;}
.cta-black:hover,
a:hover .cta-black { background-color: var(--salmon); color: #000;}
.cta-border { background-color: transparent; border: .1rem solid #FFF; color: #FFF; padding: 1.3rem 1.5rem 1rem 1.5rem;}
.cta-border:hover,
a:hover .cta-border { background-color: #FFF; color: #000;}


.tag { display: inline-flex; justify-content: center; align-items: center; padding: 1.4rem 1.6rem 1.1rem 1.6rem; border-radius: .8rem; text-decoration: none; background-color: var(--salmon); color: #000;}


.link { color: var(--salmon-dd); text-decoration: underline;}
.link:after { content: ''; display: inline-block; width: .8rem; height: .8rem; background: url(../img/icon-arrow-link.svg) center no-repeat; margin-left: .2rem;}


/* form */

input, select, textarea { width: 100%; min-height: 3.6rem; border-radius: .5rem; background-color: #FFF; padding: 1.2rem 1.6rem .8rem 1.6rem;}
select { background-color: #FFF; padding: 1rem 4.8rem 1rem 1.6rem; white-space: nowrap; background: #FFF url(../img/icon-arrow-select.svg) no-repeat calc(100% - 1.6rem) center;}
label { padding-bottom: .5rem;}
input[type=checkbox],
input[type=radio] { width: 2rem; height: 2rem; min-height: 2rem; border: 2px solid var(--negro); padding: 0; background-position: center;}
input[type=submit] { width: auto;}


/* Cards */

.content-card { display: block; background: #FFF; overflow: hidden; border-radius: 2rem; box-shadow: var(--shadow); height: 100%;}
.content-card img { display: block;}

.content-card-s .content-card-box { padding: 3.2rem 1.8rem 1.8rem 1.8rem;}
.content-card-s .content-img { position: relative; width: 100%; padding-top: 60%;}
.content-card-s .content-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.content-card-s a { text-decoration: none;}

.content-card-h { display: flex; align-items: stretch; min-height: 34rem;}
.content-card-h .content-img { position: relative; width: 100%;}
.content-card-h .content-img img { width: 100%; height: 100%; object-fit: cover;}
.content-card-h .content-card-box { display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem 3.2rem 1.8rem 3.2rem;}
.content-card-h-middle .content-img,
.content-card-h-middle .content-card-box { width: 50%;}
.content-card-h-middle-s .content-img { width: 45% }
.content-card-h-middle-s .content-card-box { width: 55%; padding: 2.4rem 2.4rem 1.8rem 2.4rem;}
.content-card-img-r .content-img { order: 2;}

.content-card-l .content-card-box { padding: 4.8rem 5.2rem;}
.content-card-l.content-card-h .content-img { position: relative;}
.content-card-l.content-card-h .content-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.content-card-num { box-shadow: none; background-color: var(--sand);}

.content-card-row { border-top: 1px solid #DDD1C5; padding-top: 3rem; padding-bottom: 5.4rem; margin-top: 1.6rem;}
.content-card-actions ul { list-style: none;}

.content-card-doc .content-img { position: relative; width: 100%; padding-top: 120%;}
.content-card-doc .content-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; box-shadow: var(--shadow);}
.content-card-doc .content-ctas .cta { box-shadow: var(--shadow);}

.content-card-icon .content-card-box { padding: 3.6rem 2.4rem 1.8rem 1.8rem;}

.content-card-source .content-card-box { padding: 1.6rem 1.2rem;}
.content-card-source .content-card-box .txt-h5 { min-height: 5em;}
.content-card-source .content-img { padding-top: 140%;}

.content-card-partner { background-color: var(--sand); box-shadow: none; min-height: auto;}
.content-card-partner .content-card-box { width: 65%; padding: 2.4rem 2.4rem 3.2rem 4.8rem;}
.content-card-partner .content-img { width: 35%;}

.content-council { background-color: var(--sand);}

.content-card-twitter #ctf a:hover { opacity: .5;}
.content-card-twitter #ctf .ctf-out-of-tweets { display: none;}
.content-card-twitter #ctf .ctf-item { padding: 0 0 4rem 0; overflow: hidden;}
.content-card-twitter #ctf.ctf-feed-1.ctf-regular-style .ctf-item, 
.content-card-twitter #ctf.ctf-feed-1 .ctf-header { border-bottom: none!important;}
.content-card-twitter #ctf.ctf-narrow .ctf-tweet-content { padding: 0;}
.content-card-twitter #ctf .ctf-tweet-actions, 
.content-card-twitter #ctf .ctf-tweet-content { margin-left: 0; margin-top: 0; max-width: 100%;}
.content-card-twitter #ctf .ctf-author-name, 
.content-card-twitter #ctf .ctf-author-screenname, 
.content-card-twitter #ctf .ctf-tweet-meta, 
.content-card-twitter #ctf .ctf-verified { margin-left: 0; margin-right: 0;}
.content-card-twitter #ctf .ctf-author-name { font-weight: 400!important; margin-top: 0; margin-right: .8rem;}
.content-card-twitter #ctf .ctf-author-box-link { display: flex; flex-wrap: wrap; flex-direction: row;}
.content-card-twitter #ctf.ctf-styles .ctf-author-screenname, 
.content-card-twitter #ctf.ctf-styles .ctf-context, 
.content-card-twitter #ctf.ctf-styles .ctf-screename-sep, 
.content-card-twitter #ctf.ctf-styles .ctf-tweet-meta { font-size: inherit;}
.content-card-twitter #ctf.ctf-styles .ctf-author-screenname { display: inline;} 
.content-card-twitter #ctf .ctf-screename-sep { display: none;}
.content-card-twitter #ctf.ctf-styles .ctf-tweet-meta { width: 100%; order: -2; margin-bottom: 1.4rem;}
.content-card-twitter #ctf.ctf-styles .ctf-tweet-meta a { color: var(--salmon-dd) !important;}



/* content-img-txt */

.content-img-txt .content-img img { border-radius: 2rem;}


/* content-image */

.content-image .content-img img { border-radius: 2rem;}


/* content-video */

.content-video .content-img { position: relative; width: 100%; padding-top: 47%;}
.content-video .content-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


/* content-filter-item */

.content-filter-item span { position: relative; z-index: 2; margin-right: -.5rem}


/* .content-pag */

.content-pag { gap: .8rem;}
.content-pag .cta.active { background-color: #FFF;}


/* .content-card-acordeon */

.content-card-acordeon-item { background-color: var(--sand); box-shadow: none;}
.content-card-acordeon-item button { text-align: left; padding: 3.2rem;}
.content-card-acordeon-item button .circle { display: block; width: 1.8rem; height: 1.8rem; margin-right: 1.6rem; background-color: var(--gray); border-radius: 50%; margin-top: .3em; flex-shrink: 0;}
.content-card-acordeon-item button .icon { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-left: 1.6rem; position: relative; margin-top: .1em; flex-shrink: 0;}
.content-card-acordeon-item button .txt-h3 { flex-grow: 1;}
.content-card-acordeon-item button .icon:before,
.content-card-acordeon-item button .icon:after { content: ''; position: absolute; display: block; height: .25rem; width: 1.6rem; border-radius: 2.5rem; background: #000;}
.content-card-acordeon-item button .icon:after { transform: rotate(90deg);}
.content-card-acordeon-item button.active .icon:after { transform: rotate(0);}
.content-card-acordeon-item .content-box { padding: 0 3.2rem; display: none;}
.content-card-acordeon-item .content-card-box-item .row.m-32-b:last-child { margin-bottom: 0;}




/* 5 Animation - Transition */

a,
button,
.cta,
.btn-menu,  
.btn-menu:before, 
.btn-menu:after,
.header,
.menu,
.menu-popup,
.content-card-acordeon-item button .icon:before,
.content-card-acordeon-item button .icon:after { transition: all .4s var(--bezier);}

.content-bg { transition: transform 2s var(--bezier);}

[data-view] { opacity: 0; transition: opacity 1.6s var(--bezier);}
[data-view].view { opacity: 1;}

[data-view="item"].view:nth-child(1) 	{ transition-delay: 0.1s;} 
[data-view="item"].view:nth-child(2) 	{ transition-delay: 0.2s;} 
[data-view="item"].view:nth-child(3) 	{ transition-delay: 0.3s;} 
[data-view="item"].view:nth-child(4) 	{ transition-delay: 0.4s;} 
[data-view="item"].view:nth-child(5) 	{ transition-delay: 0.5s;}
[data-view="item"].view:nth-child(6) 	{ transition-delay: 0.6s;}
[data-view="item"].view:nth-child(7) 	{ transition-delay: 0.7s;}
[data-view="item"].view:nth-child(8) 	{ transition-delay: 0.8s;}
[data-view="item"].view:nth-child(9) 	{ transition-delay: 0.9s;}

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



/* THE END -- :P */