/* =========================================================
   HONOR CANARIO URBANFEST
   ELEMENTOS FLOTANTES GLOBALES
   ========================================================= */


/* Evita que Kadence recorte elementos */

.entry-content,
.content-area,
.site-main,
.wp-site-blocks,
.wp-block-kadence-rowlayout,
.kt-row-layout-inner,
.kt-row-column-wrap {

    overflow: visible !important;

}


/* Contenedor general */

.hcu-floating-elements{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    min-height:3000px;

    pointer-events:none;

    z-index:9999;

    overflow:visible !important;

    isolation:isolate;

}


/* Estilos generales */

.hcu-float{

    position:absolute;

    display:block;

    height:auto;

    z-index:10000;

    pointer-events:auto;

    transition:
    scale .35s ease,
    rotate .35s ease;

    animation:
    hcuFloat 6s ease-in-out infinite;

    will-change:
    translate,
    scale,
    rotate;

}


/* Hover */

.hcu-float:hover{

    scale:1.18;

    rotate:5deg;

}



/* =========================================================
   POSICIONES
   ========================================================= */


/* Smiley */

.hcu-float--smiley{

    width:290px;

    top:300px;

    right:7%;

    animation-delay:.5s;

}


/* nube izquierda */

.hcu-float--nube-2{

    width:280px;

    top:850px;

    left:2%;

    animation-delay:1.3s;

}


/* estrella superior */

.hcu-float--star-1{

    width:320px;

    top:240px;

    left:22%;

    animation-delay:2s;

}


/* estrella inferior */

.hcu-float--star-2{

    width:165px;

    top:1450px;

    right:16%;

    animation-delay:2.6s;

}


/* nube central inferior */

.hcu-float--nube-1{

    width:260px;

    top:1850px;

    left:75%;

    animation-delay:3s;

}



/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes hcuFloat {

    0%{

        translate:0 0;

    }

    50%{

        translate:0 -20px;

    }

    100%{

        translate:0 0;

    }

}




/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:768px){

.hcu-floating-elements{

min-height:2400px;

}


.hcu-float--smiley{

width:155px;

top:180px;

right:5%;

}


.hcu-float--nube-2{

width:200px;

top:650px;

left:-20px;

}


.hcu-float--star-1{

width:158px;

top:120px;

left:3%;

}


.hcu-float--star-2{

width:142px;

top:1200px;

right:6%;

}


.hcu-float--nube-1{

width:165px;

top:1050px;

left:55%;

}

}


/* =========================================================
   HONOR CANARIO URBANFEST 2026 - HERO MUY PRONTO
   ========================================================= */

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.honor-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fondo */

.honor-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Contenido central */

.honor-center {
  position: relative;
  z-index: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  width: min(90%, 760px);
  margin: 0 auto;
}

/* Logo */

.honor-logo {
  width: clamp(280px, 42vw, 620px);
  height: auto;
  display: block;
  margin-bottom: 34px;
}

/* Texto */

.hero-content h1 {
  margin: 0;

  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 2px;

  color: #eaf6ad;
  text-transform: uppercase;
}

/* Redes */

.socials {
  margin-top: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;

  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  color: #eaf6ad;
}

.socials a {
  color: #eaf6ad;
  text-decoration: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.socials a:hover {
  opacity: 0.75;
  transform: scale(1.06);
}

.socials span {
  color: #eaf6ad;
}

/* =========================================================
   ELEMENTOS FLOTANTES DEL HERO
   ========================================================= */

.honor-float {
  position: absolute;
  z-index: 10;
  height: auto;
  pointer-events: auto;

  animation: honorFloat 6s ease-in-out infinite;
  transition: scale 0.35s ease, rotate 0.35s ease;
  will-change: translate, scale, rotate;
}

.honor-float:hover {
  scale: 1.16;
  rotate: 5deg;
}

/* Posiciones */

.honor-float--nube-1 {
  width: clamp(100px, 13vw, 210px);
  top: 8%;
  left: 3%;
  animation-delay: 0.2s;
}

.honor-float--nube-2 {
  width: clamp(120px, 16vw, 260px);
  right: 6%;
  bottom: 16%;
  animation-delay: 1.2s;
}

.honor-float--smiley {
  width: clamp(70px, 9vw, 140px);
  right: 8%;
  top: 11%;
  animation-delay: 2s;
}

.honor-float--star-1 {
  width: clamp(42px, 5vw, 82px);
  left: 18%;
  top: 22%;
  animation-delay: 1.6s;
}

.honor-float--star-2 {
  width: clamp(46px, 5.5vw, 90px);
  left: 12%;
  bottom: 18%;
  animation-delay: 2.5s;
}

/* Animación */

@keyframes honorFloat {
  0% {
    translate: 0 0;
  }

  50% {
    translate: 0 -20px;
  }

  100% {
    translate: 0 0;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  .honor-center {
    width: 88%;
  }

  .honor-logo {
    width: clamp(260px, 78vw, 440px);
    margin-bottom: 24px;
  }

  .socials {
    gap: 10px;
    flex-wrap: wrap;
  }

  .honor-float--nube-1 {
    width: 120px;
    top: 7%;
    left: -4%;
  }

  .honor-float--nube-2 {
    width: 135px;
    right: -5%;
    bottom: 18%;
  }

  .honor-float--smiley {
    width: 72px;
    right: 4%;
    top: 8%;
  }

  .honor-float--star-1 {
    width: 42px;
    left: 14%;
    top: 73%;
  }

  .honor-float--star-2 {
    width: 46px;
    left: 8%;
    bottom: 14%;
  }
}

@media (max-width: 480px) {
  .honor-logo {
    width: 92vw;
  }

  .hero-content h1 {
    letter-spacing: 1px;
  }

  .honor-float--nube-1 {
    width: 105px;
    top: 9%;
    left: -8%;
  }

  .honor-float--nube-2 {
    width: 120px;
    right: -10%;
    bottom: 22%;
  }

  .honor-float--smiley {
    width: 62px;
    right: 3%;
    top: 9%;
  }

  .honor-float--star-1 {
    width: 36px;
    left: 10%;
    top: 24%;
  }

  .honor-float--star-2 {
    width: 40px;
    left: 6%;
    bottom: 17%;
  }
/* Banner responsive Home */

.hcu-home-banner {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f1f2c7;
}

.hcu-home-banner__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}/* =========================================================
   GIF ARTISTA LATERAL
   ========================================================= */

.hcu-gif-section {
  position: relative;
  overflow: visible !important;
}

.hcu-section-gif {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  z-index: 50;
}

.hcu-section-gif--artist {
  width: clamp(180px, 22vw, 420px);

  right: 4%;
  bottom: -8px;
}

/* Tablet */

@media (max-width: 1024px) {
  .hcu-section-gif--artist {
    width: clamp(160px, 28vw, 320px);
    right: -2%;
    bottom: -6px;
  }
}

/* Móvil */

@media (max-width: 768px) {
  .hcu-section-gif--artist {
    width: 170px;
    right: -35px;
    bottom: -4px;
  }
}.hcu-section-gif--artist {
    transition: transform .3s ease;
}

.hcu-section-gif--artist:hover {
    transform: translateY(-8px) scale(1.05);
}