@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Saira-SemiBold';
    src: url("../fonts/Saira-SemiBold.ttf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Saira-Light';
    src: url("../fonts/Saira-Light.ttf") format('opentype'); 
    font-weight: normal;
    font-style: normal;
}
:root {
    --aqua: #00A0AF;
	--verde: #8DBB00;
	--negro: #000000;
	--gris: #1F242D;
	--Saira-SemiBold: 'Saira-SemiBold';
	--Saira-Light: 'Saira-Light';
}
.container__page1 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	height: auto;
	min-height: 750px;
}

.page1__image {
	grid-area: 1 / 1 / 4 / 2;
	align-content: flex-end;
    justify-self: end;
}
.page1__texto { 
	grid-area: 2 / 2 / 4 / 4;
	padding-right: 15%;
}
.container__page1 h1{
	font-family: var(--Saira-SemiBold);
	font-size: 3.75rem;
	line-height: 3.75rem;
	letter-spacing: 1rem;
}
.page1__texto p{
	font-family: var(--Saira-Light);
	font-size: 1rem;
	margin-top: .5rem;
}
.page1__texto h2, .page2__texto h2{
	font-family: var(--Saira-SemiBold);
	font-size: 1rem;
	margin-bottom: 0;
}

.container__page2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	height: auto;
	min-height: 580px;
}

.page2__texto { 
	grid-area: 1 / 1 / 4 / 3; 
	padding-left: 15%;
	padding-top: 5%;
}
.page2__image { 
	grid-area: 1 / 3 / 4 / 4; 
	padding-right: 15%;
}
.page2__texto ul li{
	font-family: var(--Saira-Light);
	font-size: 1rem;
	margin-bottom: 2rem;
}
.page2__texto span{
	font-family: var(--Saira-SemiBold);
}
.page2__texto {
	font-family: var(--Saira-Light);
}
.container__page3 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	min-height: 354px;
    align-items: center;
	padding: 0 7% 0 0;
}

.page3__image { 
	grid-area: 1 / 1 / 2 / 2; 
}
.page3__image img{
	max-width: 100%;
	padding-right: 30%;
}
.page3__texto {
	grid-area: 1 / 2 / 2 / 3;
	justify-items: center;
}
.page3__texto h3{
	font-family: var(--Saira-SemiBold);
	font-size: 1.875rem;
	text-align: center;
	padding: 0 5%;
}
.page3__texto-logo{
	width: 108px;
	height: auto;
}
#gabinete__1{
	position: relative;
}
#logo__mitad {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 4rem;
    height: 115%;
	max-height: 100vh;
	max-width: 70vw; 
}
@media screen and (max-width: 1380px) {
.container__page3 {
    padding: 0 4% 0 0;
}
}
@media screen and (max-width: 1189px) {
	.container__page3{
        padding: 0 2% 0 0;
    }
}
@media screen and (max-width: 946px) {
.page3__texto h3 {
    font-size: 1.5rem;
}
.container__page3 {
    padding: 0 3% 0 0;
}
}
@media screen and (max-width: 790px) {
.page1__texto {
    grid-area: 1 / 2 / 4 / 4;
}	
.container__page1 h1 {
    font-size: 1.75rem;
    line-height: 1.75rem;
    letter-spacing: .5rem;
}
.page1__image, .page1__texto {
    align-content: center;
}
.text-desktop{
	display: none;
	}
}
@media screen and (max-width: 750px) {
	#gabinete__1{
		display: none;
	}
.container__page1 {
    grid-template-rows: repeat(1, 1fr);
    height: auto;
    min-height: 850px;
}
.page1__texto {
    grid-area: 1 / 1 / 2 / 4;
    padding: 0 10%;
	text-align: justify;
    }
.container__page2 {
    grid-template-rows: repeat(2, auto);
}
.page2__texto { 
	grid-area: 2 / 1 / 4 / 4; 
    padding: 0 10%;
	text-align: justify;
}
.page2__image { 
	grid-area: 1 / 1 / 2 / 4;
	padding: 0;
	text-align: center
}
.page2__image img{
	width: 70%;	
	}
.container__page3 {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
	padding-right: 0;
	padding-top: 8%;
}
.page3__image { 
	grid-area: 1 / 1 / 2 / 2;
}
.page3__texto {
	grid-area: 2 / 1 / 3 / 2;
	justify-items: center;
	padding-bottom: 5%;
}
.page3__image {
    z-index: 1;
    position: relative;
}
#bocina{
	width: 100%;
	}
}