@charset "UTF-8";

@media ( min-width: 1520px ) {
	.content-block .content-modul.content-img-full:last-child,
	.content-block .content-modul.content-maps:last-child { margin-bottom: 8rem;}
}

@media ( max-width: 1440px ) {
	.footer .col-main-l { padding: 0 2.4rem;}
}

@media ( max-width: 1280px ) {
	html { font-size: .7812vw;}
	.footer .col-main-l { padding: 0 2.4rem;}
}

@media ( max-width: 1200px ) {

	/* 1 Esctructura */

	.col1-12-m { width: 8.333%;} .col2-12-m { width: 16.666%;} .col3-12-m { width: 25%;} .col4-12-m { width: 33.333%;} .col5-12-m { width: 41.666%;} .col6-12-m { width: 50%;} .col7-12-m { width: 58.333%;} .col8-12-m { width: 66.666%;} .col9-12-m { width: 75%;} .col10-12-m { width: 83.333%;} .col11-12-m { width: 91.333%;} .col12-12-m { width: 100%;}
 	.col1-10-m { width: 10%;} .col2-10-m { width: 20%;} .col3-10-m { width: 30%;} .col4-10-m { width: 40%;} .col5-10-m { width: 50%;} .col6-10-m { width: 60%;} .col7-10-m { width: 70%;} .col8-10-m { width: 80%;} .col9-10-m { width: 90%;} .col10-10-m { width: 100%;}
}



@media ( max-width: 960px ) {

	/* 1 Esctructura */

	.col1-12-s { width: 8.333%;} .col2-12-s { width: 16.666%;} .col3-12-s { width: 25%;} .col4-12-s { width: 33.333%;} .col5-12-s { width: 41.666%;} .col6-12-s { width: 50%;} .col7-12-s { width: 58.333%;} .col8-12-s { width: 66.666%;} .col9-12-s { width: 75%;} .col10-12-s { width: 83.333%;} .col11-12-s { width: 91.333%;} .col12-12-s { width: 100%;}
 	.col1-10-s { width: 10%;} .col2-10-s { width: 20%;} .col3-10-s { width: 30%;} .col4-10-s { width: 40%;} .col5-10-s { width: 50%;} .col6-10-s { width: 60%;} .col7-10-s { width: 70%;} .col8-10-s { width: 80%;} .col9-10-s { width: 90%;} .col10-10-s { width: 100%;}

	.header { height: 7.2rem; display: flex; align-items: center;}
	.header .col-main { padding: 0 1rem;}
	.header::after { content: ''; display: block; position: fixed; z-index: 50; left: 0; top: 0; width: 100%; height: 100dvh; background-color: var(--b); opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none;}
	.header .cta-menu { position: relative; z-index: 200; display: flex; gap: .6rem;}
	.header .cta-menu:after { content: ''; display: block; width: 2.2rem; height: 2.2rem; background-image: url(../img/icon/icon-m-burguer.svg); background-size: 2.2rem 2.2rem; background-position: center; background-repeat: no-repeat; transition: all .4s ease;}
	
	.header .menu { position: fixed; top: 0; left: 5.4rem; z-index: 100; transform: translateX(100%); background-color: var(--w); display: block; width: calc(100% - 5.4rem); padding: 7.2rem 2rem; height: 100dvh; overflow: auto;}
	.header .menu-main { flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; gap: 0; flex-shrink: 0; padding: 0;}
	.header .menu-main li { width: 100%;}
	.header .menu-main a { display: block; text-align: center; width: 100%; height: auto; border: 0; padding: 1.2rem 0;}
	.header .menu-tools { flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; gap: 0; flex-shrink: 0;}
	.header .menu-tools li { width: 100%;}
	.header .menu-tools a.cta { display: block; text-align: center; width: 100%; height: auto; border: 0; padding: 1.2rem 0; border-radius: 0; background-color: transparent; color: var(--blue);}
	.header .menu-tools a:hover { background-color: var(--bright-gray); border-bottom-color: var(--gray);}
	.header .menu-tools a.active { background-color: var(--bright-blue); color: var(--w); border-bottom-color: var(--gray);}

	.active-menu body { overflow: hidden;}
	.active-menu .header .menu { transform: translateX(0);}
	.active-menu .header .cta-menu { color: transparent;}
	.active-menu .header .cta-menu:after { background-image: url(../img/icon/icon-m-close.svg);}
	.active-menu .header::after { opacity: .3;}
	
	.footer .col-main { padding: 0 1rem;}
	.footer-rrss { justify-content: center;}
	.footer-address p { margin-bottom: .2rem;}
	.footer-logos { justify-content: center; gap: 1.6rem;}
	.footer-logo { width: 6rem; height: 6rem;}
	.footer-legal ul { gap: .8rem; flex-direction: column; align-items: center; justify-content: center;}

	.col-main { padding: 0 1rem;}

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

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




	/* 2 Texto */

	html { font-size: 1.2vw;}
	body { font-size: 1.8rem; line-height: 140%;}

	.txt-a-c-s { text-align: center;}

	.txt-h1, .content-txt h1 											 { font-weight: 700; font-size: 3rem; line-height: 120%;}
	.txt-h2, .content-txt h2 											 { font-weight: 700; font-size: 2.4rem; line-height: 130%;}
	.txt-h3, .content-txt h3											 { font-weight: 700; font-size: 2rem; line-height: 120%;}
	.txt-h4, .content-txt h4 											 { font-weight: 700; font-size: 2rem; line-height: 140%;}
	.txt-h5, .content-txt h5, 											 
	.txt-body, .content-txt p, .content-txt ul, .content-txt ol, label	 { font-weight: 400; font-size: 1.8rem; line-height: 140%;}
	.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: 1.6rem; line-height: 140%;}
														 

	.content-txt h1,
	.content-txt h2,
	.content-txt h3	{ margin-bottom: 1.6rem;}
	.content-txt h4	{ margin-bottom: .8rem;}


	
	/* 3 contenido */

	.cta-circle::before { width: 6rem; height: 6rem; background-size: 4rem 4rem;}

	.content-box,
	.content-back { margin: 3.2rem 0;}

	.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: 0;}
	
	.content-img img { aspect-ratio: 3/4;}

	.content-card { gap: 3.2rem; padding: 2.8rem 2.4rem;}

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

@media ( max-width: 840px ) {
	html { font-size: 1.666vw;}
}

@media ( max-width: 620px ) {
	html { font-size: 2.666vw;}
}