﻿@charset "UTF-8";

@font-face { font-family: 'Diatype'; src: url('../fonts/ABCDiatype-Regular.woff2') format('woff2'), url('../fonts/ABCDiatype-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Diatype'; src: url('../fonts/ABCDiatype-RegularItalic.woff2') format('woff2'), url('../fonts/ABCDiatype-RegularItalic.woff') format('woff'); font-weight: 400; font-style: italic;}
@font-face { font-family: 'Diatype Mono'; src: url('../fonts/ABCDiatypeMono-Regular.woff2') format('woff2'), url('../fonts/ABCDiatypeMono-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Diatype Mono'; src: url('../fonts/ABCDiatypeMono-RegularItalic.woff2') format('woff2'), url('../fonts/ABCDiatypeMono-RegularItalic.woff') format('woff'); font-weight: 400; font-style: italic;}

::selection { background: #EEEEEE; color: #000;}
::-moz-selection { background: #EEEEEE; color: #000;}
::-webkit-selection { background: #EEEEEE; color: #000;}

:root {
	--und: 1.25rem;
	--und2: 2.5rem;
	--marg-l: 8rem;
	--marg-m: 6rem;
}

/* General */

html { animation: fadein 1.5s;}

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

.padd { padding: var(--und);}
.padd-h { padding: 0 var(--und);}

.col-main { width: 100%; /* max-width: 1920px; */}
.col-main { width: 100%; max-width: 1920px;}



/* Tipografía */

html, body { font-family: 'Diatype', sans-serif;}
html { font-size: .52vw;}
body { font-size: 3.5rem; line-height: 1.2em; letter-spacing: -0.007em;}

.content-txt h1,
.content-txt h2,
.content-txt h3,
.content-txt h4,
.content-txt h5,
.content-txt h6,
.content-txt p { padding-bottom: 1.2em;}
.content-txt > :last-child { padding-bottom: 0;}

.btn-small { font-size: 1.8rem; font-family: 'Diatype Mono';}
.fancybox-infobar,
.fancybox-caption  { font-size: 1.6rem; font-family: 'Diatype Mono';}
.colum-txt { font-size: 1.6rem; line-height: 1.3em; font-family: 'Diatype Mono';}


/* Header & Footer */

.header { position: fixed; top: 0; z-index: 20; height: var(--marg-l); width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: center; background-color: #FFF;}
.header .col-main { width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: space-between;}

.menu ul { display: flex; list-style: none;}
.menu ul li + li { margin-left: 1em;}

.footer { height: 40rem; width: 100%; padding: 0 var(--und); display: flex; align-items: flex-end; justify-content: center; background-color: #FFF;}
.footer .col-main { width: 100%; padding: var(--und2) var(--und); display: flex; align-items: center; justify-content: space-between;}
.footer .btn img { display: none;}

.footer .btn-loc:hover 	{ background-color: rgb(235,175,85);}
.footer .btn-mail:hover { background-color: rgb(215,215,215);}
.footer .btn-tel:hover 	{ background-color: rgb(180,70,45);}
.footer .btn-inst:hover { background-color: rgb(190,215,175);}

.btn { height: 7rem; display: flex; justify-content: center; align-items: center; padding: 0 var(--und2); border: 2px solid #000; border-radius: 3.5rem;}
.btn-small { height: 3.6rem; display: flex; justify-content: center; align-items: center; padding: 0 var(--und); border: 1px solid #000; border-radius: 1.8rem;}



/* Content */ 

.content { padding-top: var(--marg-l);}
.content img { max-width: 100%; display: block; height: auto; width: auto;}

.content-slider { width: 100%; overflow: hidden; height: calc(100vh - 16rem);}
.content-slider-item,
.content-slider-item-in { width: 100%; height: calc(100vh - 16rem); display: flex; align-items: center; justify-content: center;}
.content-slider-item-in { max-width: 192rem; padding: var(--und2) calc( var(--marg-l) + var(--und2));}
.content-slider-item img { width: 100%; height: 100%; display: block; object-fit: contain;}
.content-slider .flickity-button { background: transparent; width: 50%; height: 100%; border-radius: 0; opacity: 0;}
.content-slider .flickity-button svg { display: none;} 
.content-slider .flickity-prev-next-button.previous { left: 0;  cursor: url(../img/icon-arrow-l.png) 21 38, auto;}
.content-slider .flickity-prev-next-button.next { right: 0;  cursor: url(../img/icon-arrow-r.png) 21 38, auto;}

.content-slider.activo-info .flickity-button { width: 20%;} 

.content-slider-info { min-height: var(--marg-l); width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: center;}
.content-slider-info .col-main { width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: space-between;}
.content-slider-info .slide-title { padding-right: var(--und2);}

.content-slider-item .content-info-slide { visibility: hidden; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 2; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: #d9d9d9;}
.content-slider-item .content-info-slide.active { visibility: visible; opacity: 1;}
.content-slider-item .content-info-slide .content-txt { padding-right: var(--und2); padding-left: var(--und2); max-width: 120rem;}
.content-slider-item .content-info-slide a { text-decoration: underline;}

.content-acordeon .content-slider-info .col-main { align-items: flex-end; padding: var(--und);}

.content-acordeon .content-slider,
.content-acordeon .content-slider-item,
.content-acordeon .content-slider-item-in { height: calc(100vh - 24rem);}

.content-acordeon .content-acordeon .content-slider,
.content-acordeon .content-acordeon .content-slider-item,
.content-acordeon .content-acordeon .content-slider-item-in { height: calc(100vh - 40rem);}

.content-grid { width: 100%; padding: 0 var(--und); display: flex; justify-content: center; background-color: #FFF;}
.content-grid .col-main { width: 100%; padding: 0 var(--und); display: flex; flex-wrap: wrap;}
.content-grid-item { display: block; position: relative; overflow: hidden;}
.content-grid-item h2 { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 3; padding: 1.6rem; opacity: 0;}
.content-grid-item img { width: 100%;}
.content-grid-item .img-front { position: relative; z-index: 1;}
.content-grid-item .img-back { position: absolute; z-index: 2; top: 0; left: 0; opacity: 0;}
.content-grid-item:hover .img-back,
.content-grid-item:active .img-back,
.content-grid-item:hover h2,
.content-grid-item:active h2 { opacity: 1;}

.content-modul { padding-bottom: var(--marg-m);}
.content-modul-g { padding-bottom: var(--marg-l);}

.content-project { width: 100%; padding: var(--marg-m) var(--und); display: flex; justify-content: center; background-color: #FFF;}
.content-project .col-main { width: 100%; padding: 0 var(--und); display: flex; flex-wrap: wrap;}

.content-img-main { text-align: center;}
.content-img-main .content-img { display: flex; align-items: flex-start; justify-content: center;}
.content-img-main img { max-height: calc(100vh - 25rem);}
.content-txt-main,
.content-img-one { padding-right: var(--marg-m); padding-left: var(--marg-m); }
.content-txt-main .content-txt { max-width: 120rem;}
.content-img-one figure { display: flex; align-items: flex-start; justify-content: center;}
.content-img-one img { max-height: calc(90vh);}
.content-img-two { padding-left: var(--marg-l); padding-right: var(--marg-l);}
.content-img-two .content-modul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.content-img-two figure { padding: 12.5rem;}

.content-practice { background: #d9d9d9;}

.bg-rojo { background-color: #b4462d;}
.bg-verde { background-color: #bed7af;}
.bg-amarillo { background-color: #ebaf55;}
.bg-gris { background-color: #b4b4b4;}

.content-acordeon { border-bottom: 2px solid #000;}
.content-acordeon:last-child { border-bottom: none;}
.content-acordeon .content-acordeon-info { display: none;}
.content-acordeon.active .content-acordeon-info { display: block;}

.content-acordeon-header { width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: center;}
.content-acordeon-header .col-main { width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: space-between;}
.content-acordeon-header button { height: var(--marg-l); flex-grow: 1; text-align: left;}
.content-acordeon-header button.btn-info-slide { flex-grow: 0; flex-shrink: 0; display: none;}
.content-acordeon-header button.btn-cerrar-info-slide { flex-grow: 0; flex-shrink: 0; display: none;}
.content-acordeon.active .content-acordeon-header button.btn-info-slide { display: block;}

.content-acordeon-info-txt { padding-top: var(--marg-m);}

.content-txt-more { display: none;}

.content-acordeon-info .colum-group { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 var(--marg-l);}
.content-acordeon-info .colum-group .colum { display: flex; flex-wrap: wrap; width: calc(3/7 * 100%);}
.content-acordeon-info .colum-group .colum > div { padding-right: var(--und2);}

.content-acordeon-draws { background-color: #000;}
.content-acordeon-draws > .content-acordeon-header { position: sticky; top: var(--marg-l); z-index: 3; background-color: #000; color: #FFF;}
.content-acordeon-draws > .content-acordeon-header > h3 > button { color: #FFF;}

.content-acordeon-draws .content-acordeon { border-bottom: 0; }
.content-acordeon-draws .content-acordeon .content-acordeon-header button { text-align: right;} 

.content-prev-next { margin-top: var(--marg-m);}
.content-prev-next-in { width: 24rem; display: flex; justify-content: space-between;}
.content-prev-next a { display: flex; align-items: center; position: relative;}
.content-prev-next a img { display: block; height: 9rem;}
.content-prev-next a span { position: absolute; white-space: nowrap; opacity: 0;}
.content-prev-next a:hover span { opacity: 1;}
.content-prev-next .link-next span { left: 100%; margin-left: 2rem}
.content-prev-next .link-prev span { right: 100%; margin-right: 2rem}



/* Components */

.fancybox-slide--image { overflow: visible; padding: var(--marg-m) calc(var(--marg-m) * 2);}

.fancybox-bg { background: #FFF;}
.fancybox-is-open .fancybox-bg { opacity: 1;}

.fancybox-toolbar { opacity: 1;}

.fancybox-button svg { display: none;}
.fancybox-button { border-radius: 0; opacity: 0; padding: 0; width: 2.8rem; height: 2.8rem; background-color: transparent;}
.fancybox-button--thumbs,
.fancybox-button--zoom { display: none !important;}
.fancybox-button.fancybox-button--close { position: absolute; right: 6rem; top: 6rem;  background: url(../img/icon-cross.svg) no-repeat center; background-size: contain; opacity: 1!important;}
.fancybox-button.disabled { display: none;}

.fancybox-navigation .fancybox-button--arrow_right { right: 6rem; background: url(../img/icon-arrow-r-s.svg) no-repeat center right; background-size: contain;}
.fancybox-navigation .fancybox-button--arrow_left { left: 6rem; background: url(../img/icon-arrow-l-s.svg) no-repeat center left; background-size: contain;}
.fancybox-navigation .fancybox-button { padding: 0; width: 3.6rem; height: 3.6rem; background-color: transparent;}
.fancybox-navigation .fancybox-button svg { display: none;}

.fancybox-caption:before,
.fancybox-caption:after { display: none;}
.fancybox-caption { color: #000; background: transparent; height: var(--marg-m); line-height: var(--marg-m); padding: 0 var(--marg-m);}

.fancybox-infobar { color: #000; height: var(--marg-m); line-height: var(--marg-m); min-width: var(--marg-m); mix-blend-mode: normal; padding: 0 var(--marg-m); pointer-events: none; text-align: right; top: auto; bottom: 0; left: auto; right: 0;}



/* Animate */

.escoder { opacity: 0;}

.content-grid-item img,
.content-grid-item h2,
.content-info-slide,
.content-slider-info,
.content-prev-next a span { transition: opacity .6s ease;}
.content-acordeon { transition: height .6s ease;}
.menu { transition: transform .6s ease, top .2s ease;}

@keyframes fadein { from { opacity: 0;} to { opacity: 1;} }



