/* custom font */

@font-face {
	font-family: 'Boldye';
	src: url('fonts/Boldye/Boldye.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit-Bold';
	src: url('fonts/Outfit-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Outfit-SemiBold';
	src: url('fonts/Outfit-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Outfit-Medium';
	src: url('fonts/Outfit-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Outfit-Regular';
	src: url('fonts/Outfit-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Outfit-Light';
	src: url('fonts/Outfit-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}


/* root
------------------------------------------------------------------------------------------------------  */

:root {
	
	/* font  */
	--font: 'Outfit-Regular', sans-serif;	
	--font-bold: 'Outfit-Bold', sans-serif;
	--font-semibold: 'Outfit-SemiBold', sans-serif;
	--font-medium: 'Outfit-Medium', sans-serif;
	--font-light: 'Outfit-Light', sans-serif;
	
	/* colors */
	--color-primary: #EAC12B;
    --color-secondary: #1C1C1C; 
	--color-white: #fff; 
}

*, *::before, *::after { 
	box-sizing: border-box; 
	margin: 0; 
	padding: 0; 
}

body {    
    font-family: var(--font);     
    padding-top: 80px;  
}

h1 {
	font-family: 'Boldye';
	color: var(--color-primary);   
}

h1 span {
	color: var(--color-white);
}

a {
	text-decoration: none;
}

.background-primary{
	background-color: var(--color-primary);
}

.background-secondary{
	background-color: var(--color-secondary);
}


/* header
------------------------------------------------------------------------------------------------------  */

header {
    width: 100%;
    padding: 0;
    z-index: 999;
    margin-top: -80px;
}

header .header-bar {
	background-color: var(--color-secondary);   	 
	text-align: center;
}

header .header-bar img {
	max-width: 17rem;
	margin-left: 6rem;
}

header .header-bar h1 {
	line-height: 4rem;
}

header .header-button {
	font-family: 'Boldye';
	color: var(--color-primary); 
	font-size: 2rem;  
	line-height: 0em;
	padding: 13px 17px;
	padding-top: 20px;
	border-radius: 10px;
	border: 2px solid var(--color-primary);	
}

/*header .header-button:hover {
	opacity: 0.8;
}*/


/* hero
------------------------------------------------------------------------------------------------------  */

.hero {
	display: flex;
	align-items: center; 
	justify-content: center; 
	text-align: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	padding: 0;
	height: 450px;
}

.hero .content-hero-box{
	max-width: 575px;
	width: 85%;
	border-radius: 25px;
	margin-top: 26rem;
}

.hero .content-hero-box .hero-box {
	background-color: var(--color-secondary);
	width: 100%;
	border-radius: 25px;
}

.hero .content-hero-box .hero-box .claim {
	font-family: var(--font-bold);
	color: var(--color-white);
    font-size: clamp(1.8rem, 4vw, 2.3rem);
}

.hero .content-hero-box .hero-box .tel {
	font-family: 'Boldye';
	color: var(--color-primary);
}

.hero .content-hero-box .hero-box .horario {
    font-family: var(--font-semibold);
    color: var(--color-white);
    font-size: clamp(1rem, 2vw, 1.5rem); 
    line-height: 1.2em;
}

.hero .content-hero-box .arrow {
	width: 100%;
	text-align: center;
}

.hero .content-hero-box .arrow img {
	width: 80px;
	margin-top: 1rem;
}


/* alquilar
------------------------------------------------------------------------------------------------------  */

.alquilar {
	margin-top: 10rem;
	max-width: 900px;
}

.alquilar h2 {
	color: var(--color-primary);
	font-family: var(--font-semibold);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1em; 
	width: 80%;
}

.alquilar .item {
    display: flex;          
    align-items: center;    
    gap: 10px;              
    width: 80%;
	margin-bottom: 1rem;
}

.alquilar .item img {
    width: 90px;
    flex-shrink: 0;         
}

.alquilar .item .item-title {
    font-family: var(--font-semibold);
    color: var(--color-white);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    line-height: 1.1em;
    display: block;   
    margin-left: 10px;     
}


/* trasteros
------------------------------------------------------------------------------------------------------  */

.trasteros {
	max-width: 900px;
}

.trasteros h2 {
	color: var(--color-secondary);
	font-family: var(--font-semibold);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1em; 
	width: 80%;
}

.trasteros .col-imagen {
	width: 65%;
	padding-top: 1.8rem;
}

.trasteros .col-imagen img{
	max-width: 550px;
	width: 100%;
}

.trasteros .col-items {
	width: 35%;
	margin-left: -4rem;
}

.trasteros .col-items .item {
    display: flex;         
    align-items: center;    
    gap: 10px;              
    width: 100%;
	margin-bottom: 0.9rem;
}

.trasteros .col-items .item img {
    width: 60px;
    flex-shrink: 0;         
}

.trasteros .col-items .item .item-title {
    font-family: var(--font-medium);
    color: var(--color-secondary);
    font-size: clamp(1rem, 2vw, 1.6rem);
    line-height: 1.1em;
	margin-left: 0.8rem;
    display: block;	
    max-width: 150px;           
    flex-grow: 1;           
}
                                                                

/* ubicacion
------------------------------------------------------------------------------------------------------  */

.ubicacion {
	max-width: 900px;
}

.ubicacion h2 {
	color: var(--color-secondary);
	font-family: var(--font-semibold);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1em; 
	width: 80%;
}

.ubicacion strong {
	font-family: var(--font-bold);
}

.ubicacion .direc{
    display: flex;         
    align-items: center;   
    gap: 8px;              
	width: 100%;
}

.ubicacion .direc img {
    width: 60px;
    flex-shrink: 0;         
}

.ubicacion .direc .text-direc {
    font-family: var(--font-light);
    color: var(--color-secondary);
    font-size: clamp(1rem, 2vw, 1.6rem);
    line-height: 1.1em;
	margin-left: 0.8rem;
    display: block;	
    flex-grow: 1;          
}

.ubicacion .direc .text-direc strong {
	font-family: var(--font-medium);
}

.ubicacion .ubic-info {
    padding-left: 15px;        
}


/* mes-gratis
------------------------------------------------------------------------------------------------------  */

.mes-gratis {
	max-width: 900px;
}

.mes-gratis h2 {
	color: var(--color-primary);
	font-family: var(--font-semibold);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1em; 
	width: 80%;
}


/* amigo
------------------------------------------------------------------------------------------------------  */

.amigo {
	display: flex;
	align-items: center; 
	justify-content: center; 
	text-align: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	padding: 0;
	height: 300px;
}

.amigo .content-amigo-box{
	max-width: 575px;
	width: 85%;
	border-radius: 25px;
	margin-top: 17rem;

}

.amigo .content-amigo-box img {
	width: 100%;
}

.amigo .content-amigo-box .arrow {
	width: 100%;
	text-align: center;
}

.amigo .content-amigo-box .arrow img {
	width: 80px;
	margin-top: -5rem;
}


/* back to top
------------------------------------------------------------------------------------------------------  */

#back-to-top {
    color: #fff;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    display: none;
    text-align: center;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    z-index: 10000;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color .1s linear;
    -moz-transition: background-color .1s linear;
    -webkit-transition: background-color .1s linear;
    -o-transition: background-color .1s linear;
    background-color: var(--color-primary); 
    cursor: pointer;
    padding-top: 10px;
}

#back-to-top:hover {
    background-color: var(--color-secondary);     
}


/* animaciones
------------------------------------------------------------------------------------------------------  */

.anim-zoom {
	transform: scale(0.5);
    transition: transform 1s;
}
.anim-zoom-active {
	transform : scale(1);
}





/* footer
------------------------------------------------------------------------------------------------------  */

footer {
    margin-top: 15rem;
	color: var(--color-white);
	font-size: 0.9rem;
	line-height: 1.1em;
}

footer .footer-logo {    
    max-width: 200px;
    display: block; 
    margin-bottom: 10px;
}

footer .footer-logo img {    
    width: 100%;
}

footer .tit {
	font-family: var(--font-semibold);
}

footer small {
	font-family: var(--font-light);
}

footer a {
    color: var(--color-white); 
}

footer a:hover {
    color: var(--color-primary); 
}


/* responsive
------------------------------------------------------------------------------------------------------  */

@media (max-width: 990px) {

	header .header-bar h1 {
		line-height: 3.3rem;
	}

}

@media (max-width: 767px) {

	header .header-bar img {
		max-width: 12.5rem;
		margin-left: 0px;
	}

	header .header-button {
		float: none !important;
		display: table;         
		margin: 40px auto 0;    
	}

	header .header-bar h1 {
		line-height: 2.8rem;
	}

	.trasteros .col-imagen {
		width: 100%;
		padding-top: 0px;
	}

	.trasteros .col-imagen img{
		max-width: 100%;
	}

	.trasteros .col-items {
		width: 100%;
		margin-left: 0rem;
		margin-top: 2rem;
		display: flex;        
		flex-wrap: wrap;       
		gap: 0.6rem;    
	}

	.trasteros .col-items .item {
		display: flex;         
		align-items: center;   
		gap: 4px;             
		width: calc(50% - 0.45rem); 
		margin-bottom: 0.2rem; 
	}

	.trasteros .col-items .item img {
		width: 45px;
	}
	
	.ubicacion .ubic-info {
	    padding-left: 0;
	    margin-top: 15px;
	            
	}

	footer .footer-main {	
		text-align: center;
	}
    
}

@media (max-width: 500px) {

	header .header-bar h1 {
		line-height: 2.5rem;
	}

	.hero {
		height: 400px;
	}

}