@import url("http://hello.myfonts.net/count/32aa08");html,body,p,h1,h2,h3,ul{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}ul{list-style:none !important}@font-face{font-family:'Formular';src:url("../assets/fonts/32AA08_0_0.eot");src:url("../assets/fonts/32AA08_0_0-.eot#iefix") format("embedded-opentype"),url("../assets/fonts/32AA08_0_0.woff2") format("woff2"),url("../assets/fonts/32AA08_0_0.woff") format("woff"),url("../assets/fonts/32AA08_0_0.ttf") format("truetype");font-weight:300;font-style:normal}@font-face{font-family:'Formular';src:url("../assets/fonts/32AA08_1_0.eot");src:url("../assets/fonts/32AA08_1_0-.eot#iefix") format("embedded-opentype"),url("../assets/fonts/32AA08_1_0.woff2") format("woff2"),url("../assets/fonts/32AA08_1_0.woff") format("woff"),url("../assets/fonts/32AA08_1_0.ttf") format("truetype");font-weight:400;font-style:normal}::-moz-selection{background-color:#000;color:#fff}::selection{background-color:#000;color:#fff}::-moz-selection{background-color:#000;color:#fff}img{max-width:100%;height:auto;vertical-align:middle}.show-for-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.logo{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:10;width:100px;height:100px}.logo .heydays-logo{-webkit-transition:all 0.15s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.75s cubic-bezier(0.4, 0, 0.2, 1)}.logo .heydays-logo:hover{opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9)}@media (min-width: 640px){.logo{width:200px;height:200px}}.heydays-logo .letter{fill:#fff}.image{background-size:cover;background-position:center center;background-repeat:no-repeat}html{font-size:100%}body{font-family:'Formular', 'Helvetica Neue', 'Helvetica', sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:300;color:#fff;font-size:18px;line-height:1.44em}@media (min-width: 640px){body{font-size:20px}}h1,h2,h3,p,ul,li{font-weight:300;font-size:1em}a{color:#fff;text-decoration:none}html,body{width:100%;height:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}#page{position:relative;width:100%;height:100%}ul{padding:2%}@media (min-width: 700px){ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}}.footer,.header{padding:0;position:absolute;width:100%;z-index:10;-webkit-transition:all 0.75s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.75s cubic-bezier(0.4, 0, 0.2, 1)}.header{top:0;left:0;opacity:0;-webkit-transform:translate(0, -150px);transform:translate(0, -150px)}.header.visible{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0)}.footer{bottom:0;left:0;opacity:0;-webkit-transform:translate(0, 150px);transform:translate(0, 150px)}.footer.visible{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0)}.slider{opacity:0;-webkit-transition:all 0.75s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.75s cubic-bezier(0.4, 0, 0.2, 1)}.slider.visible{opacity:1;-webkit-transform:translate(0, 0);transform:translate(0, 0)}.graphic-container{background-color:#000;width:100%;height:100%;z-index:1}.slider,.image,.graphic-container,.slide{width:100%;height:100%}.slider{overflow:hidden}.slide{position:absolute;top:0;left:0;-webkit-perspective:1000;background-color:#000}.slide img{-webkit-perspective:1000}.slide.visible{z-index:2;-webkit-transition:opacity .75s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity .75s cubic-bezier(0.4, 0, 0.2, 1)}.slide.next{z-index:1}.slide.queued{z-index:-1;display:none}.lazyhide{opacity:0;-webkit-transition:opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1)}.lazyhide.lazyloaded{opacity:1}/* ======= LAYOUT: home (slider) y secciones ======= */


html,body,#page { height:100%; margin:0; }

.graphic-container {
  position: relative;
  width: 100%;
  height: 100vh; /* o min-height según necesidad */
  background-color: #000;
  z-index: 1;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: all .75s cubic-bezier(0.4,0,0.2,1);
}
.slider.visible { opacity: 1; transform: translate(0,0); }

.slide {
  position: absolute;
  inset: 0;
  background-color: #000;
  z-index: 0;
}
.slide.visible { z-index: 2; transition: opacity .75s cubic-bezier(0.4,0,0.2,1); opacity: 1; }
.slide.next    { z-index: 1; opacity: 0; }
.slide.queued  { z-index: -1; display: none; }

.image {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .75s cubic-bezier(0.4,0,0.2,1);
}
.image.lazyhide.lazyloaded {
  opacity: 1;
}

.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1100;
  transition: opacity .6s ease, visibility .6s ease, transform .3s ease;
}
.logo.hidden { opacity: 0; visibility: hidden; }

.full-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  text-align: center;
  padding: 40px;
}

header.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
}

header.header nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 20px 40px;
}

header.header nav a {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.25s ease;
  color: #fff;
}
header.header nav a.active {
  transform: scale(1.4);
  opacity: 1;
}
header.header.nav-dimmed nav a:not(.active) {
  opacity: 0.35;
}
header.header.nav-dimmed nav a:not(.active):hover {
  opacity: 1;
}

.gd-section {
  background: #000;
  color: #fff;
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.gd-container {
  width: 100%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  height: 100%;
}
.gd-left { position: relative; }
.gd-intro { transition: opacity 0.4s ease; }
.gd-detail {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gd-detail.active {
  opacity: 1;
  pointer-events: auto;
}
.gd-close {
  position: absolute;
  top: -10px; right: -10px;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}
.gd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.gd-item {
  background-size: cover;
  background-position: center;
  padding-bottom: 75%;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease;
}
.gd-item:hover {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .gd-container {
    grid-template-columns: 1fr;
  }
}