@font-face {
    font-family: 'Swiza';
    src: url('../faces/Swiza-Bold.eot');
    src: url('../faces/Swiza-Bold.eot?#iefix') format('embedded-opentype'),
        url('../faces/Swiza-Bold.woff2') format('woff2'),
        url('../faces/Swiza-Bold.woff') format('woff'),
        url('../faces/Swiza-Bold.svg#Swiza-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Swiza';
    src: url('../faces/Swiza-Medium.eot');
    src: url('../faces/Swiza-Medium.eot?#iefix') format('embedded-opentype'),
        url('../faces/Swiza-Medium.woff2') format('woff2'),
        url('../faces/Swiza-Medium.woff') format('woff'),
        url('../faces/Swiza-Medium.svg#Swiza-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Swiza';
    src: url('../faces/Swiza-Regular.eot');
    src: url('../faces/Swiza-Regular.eot?#iefix') format('embedded-opentype'),
        url('../faces/Swiza-Regular.woff2') format('woff2'),
        url('../faces/Swiza-Regular.woff') format('woff'),
        url('../faces/Swiza-Regular.svg#Swiza-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

html * {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
  font-family: "Swiza", sans-serif;
  color: white;
  margin: 0;
  font-weight:400;
  padding:0;
  font-size:0.85rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
  background-color:#9F9A94;
}

::before, ::after {box-sizing: border-box;}

:root {
  --animate-delay:0.5s;
  --select-border:blue;
  --select-focus:blue;
}

a {font-family: "Swiza", sans-serif; font-weight:400;}



#loader {position:absolute; width: 100%; height:100%; background-color:#9F9A94; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:214px; height:200px; top:50%; left:50%; margin-left:-107px; margin-top:-100px; opacity:0;}

.aviso { display:none !important; width:100%;  height:100%; max-width:100%; min-height:100vh; padding: 0; margin:0; position:absolute;  z-index:99999999999; background-color:black;}
.aviso h1 {font-size:1.5rem; font-weight:600; color:white; width:600px; height:100vh; margin: 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
    min-height: 100dvh; /* Use dynamic viewport height */
	
}

header {width:100%; height:160px !important; position:fixed !important; background-color:#9F9A94; top:0; left:0; display:flex; flex-direction:row; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
#hide-header {transition: all .5s ease!important;}   

.primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:2vw; top:3vh; z-index:9999; margin:0; padding:0;}
.primary-navigation ul {display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:0; z-index:9999; margin:0; padding:0; list-style: none;}
.primary-navigation a{ width:34px; height:auto; text-decoration:none; font-family: "Swiza", serif; font-size:1.5rem; font-style:italic; font-weight:400; padding:0; margin-left:4rem; color:#373332;}
.primary-navigation a:hover, .primary-navigation a.active {color:black; text-decoration:underline;}
.primary-navigation a img {width:34px; height:auto;}

.burger { display:none; border: 0; width:60px; height:auto; padding: 0;  background: url("../images/menu.svg") no-repeat bottom;  position: absolute; top:2vh; right:2vh; z-index:99999; cursor: pointer;}
.mobile-nav-toggle { cursor: pointer; display:none; border: 0; width:130px; height:40px; padding: 0; color:black; background: url("../images/logo_grajales.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; top:1.5rem; z-index:99999;}

.logo {position:absolute; left:2vw; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:120px; width:auto; }

main {
    /* The main content will grow to fill available space due to 1fr in grid-template-rows */
    overflow-y: auto; /* Add scroll to main content if it's taller than the viewport */
}

.partial-screen-section {
    height: 94dvh; /* Full height of the viewport */
    display: flex;
    justify-content: flex-start;
    align-items: center;
	overflow:hidden;
}


.full-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
	flex-direction:column;
    justify-content: flex-start;
    align-items: center;
	margin:200px 0 5rem 0;
}

.escaparate {width:96%; height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:2vw; align-items:start; margin:0 2% 3rem 2%; padding:0;}
.escaparate img {width:100%; height:auto; margin:0 0 2rem 0; padding:0;}
.escaparate p {width:auto; height:auto; font-family: "Swiza", serif; font-size:1.75rem; font-weight:500; color:#D3D1CF; margin:0; padding:0;}



.galeria {width:96%; height:auto; display:grid; grid-template-columns: repeat(2, 1fr); gap:2vw; align-items:start; margin:0 2%; padding:0; grid-auto-flow: dense;}
.galeria img {width:100%; height:auto; display:block; margin:0; padding:0;}

/* Verticales = 50% */
.galeria img:not(.horizontal) {grid-column: span 1;}

/* Horizontales = 100% */
.galeria img.horizontal {grid-column: span 2;}

.escaparate-mobile, .galeria-mobile {display:none;}

footer {width:96%; height:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center; margin:0; padding:2%;}
footer p {width:auto; height:auto; font-family: "Swiza", sans-serif; font-size:1.25rem; font-weight:400; color:#373332; margin:0; padding:0; }
.address {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between; align-items:start; text-decoration:none;}
.address a {width:auto; height:auto; font-family: "Swiza", sans-serif; font-size:1.5rem; font-weight:500; color:#F0EFEE; display:flex; align-items:center; margin:0.5rem 0 0 0; padding:0; text-decoration:none;}
.address a img {width:34px; height:auto; margin:0 1rem 0 0; padding:0;}
.address a:hover {color:white;}
.correo {width:auto; height:auto; margin:0; padding:0;}
.correo a {width:auto; height:auto; font-family: "Swiza", serif; font-size:1.5rem; font-weight:500; color:#F0EFEE; text-decoration:none;}
.correo a:hover {color:white;}
.redes {width:auto; height:auto; margin:0; padding:0;}
.redes a {width:28px; height:28px; margin:0 !important; padding:0;}
.redes a img {width:28px; height:auto; margin:0.5rem 1rem 0 0; padding:0;}



@media (max-width:35em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#9F9A94; left:0px; top:0px; z-index: 9999999999; }
  #logotipo {position:relative; width:150px; height:140px; top:50%; left:50%; margin-left:-75px; margin-top:-70px; opacity:0;}
	
  header {width:100%; height:160px !important; position:fixed !important;  top:0; left:0; background-color:#9F9A94; display:flex; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
  #hide-header {transition: all .5s ease!important;} 
  .primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:5vw; top:3vh; z-index:9999; margin:0; padding:0;}
  .primary-navigation a{ width:auto; height:auto; text-decoration:none; font-family: "EB Garamond", serif; font-size:1.15rem; font-style:italic; font-weight:400; padding:0; margin-left:1.25rem; color:#373332;}
  
   .logo {position:absolute; left:5vw; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
   .logo img {height:120px; width:auto;}
   
   .partial-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
    justify-content: flex-start;
    align-items: center;
	overflow:auto;
	margin-top:60px;
    }
   
    .full-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
	flex-direction:column;
    justify-content: flex-start;
    align-items: center;
	margin:200px 0 3rem 0;
    }
	
    .escaparate, .galeria {display:none;}
	
	
	.escaparate-mobile {width:90%; height:auto; display:grid; grid-template-columns:1fr; gap:2vw; align-items:start; margin:0 5% 2rem 5%; padding:0;}
	.escaparate-mobile img {width:100%; height:auto; margin:0 0 1rem 0; padding:0;}

	.escaparate-mobile p {width:auto; height:auto; font-family: "Swiza", serif; font-size:1.25rem; line-height:2rem; font-weight:500; color:#D3D1CF; margin:0; padding:0;}

	.galeria-mobile {width:90%; height:auto; display:flex; flex-direction:column; gap:2rem; margin:0 5%; padding:0;}
	.galeria-mobile img {width:100%; height:auto; display:block; margin:0; padding:0;}

	.galeria-mobile img, .galeria img.horizontal { width:100%; height:auto; display:block;}


footer {width:96%; height:auto; display:none; flex-direction:row; justify-content:space-between; align-items:center; margin:0; padding:2%;}
footer p {width:auto; height:auto; font-family: "Swiza", sans-serif; font-size:1.25rem; font-weight:400; color:#373332; margin:0; padding:0; }
.address {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between; align-items:start;}
.address a {width:auto; height:auto; font-family: "Swiza", sans-serif; font-size:1.5rem; font-weight:500; color:#F0EFEE; margin:0; padding:0;}
.address a img {width:34px; height:auto; margin:0; padding:0;}
.address a:hover {color:black; text-decoration:underline;}
.correo {width:auto; height:auto; margin:0; padding:0;}
.correo a {width:auto; height:auto; font-family: "Swiza", serif; font-size:1.5rem; font-weight:500; color:#F0EFEE; text-decoration:none;}
.correo a:hover {color:black; text-decoration:underline;}
.redes {width:auto; height:auto; margin:0; padding:0;}
.redes a {width:28px; height:28px; margin:0; padding:0;}
.redes a img {width:28px; height:auto; margin:0; padding:0;}
footer a {width:auto; height:auto; font-family: "Swiza", serif; font-size:1.5rem; font-weight:400; color:#F0EFEE; text-decoration:none;}
	
}




@media only screen and (orientation:landscape) and (max-width:992px){.aviso {display:block !important; width:100%; height:100% !important;} .page-container {display:none;}}