/* ============================================================
   UPALELO · FUN LAYER — capa interactiva y juguetona
   Vanilla CSS, sin librerías. Colores de marca:
   naranja #E74011 · teal #0E7C72 · amarillo #FFC93C
   morado #7C5CBF · cielo #3E92CC
   ============================================================ */

/* ---------- globos flotantes (hero + bandas) ---------- */
.fun-balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fun-balloons i{position:absolute;width:26px;height:33px;border-radius:50%/54% 54% 46% 46%;
  opacity:.92;animation:fun-bob 5.2s ease-in-out infinite}
.fun-balloons i::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:6px;
  background:inherit;transform:translateX(-50%);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fun-balloons i b{position:absolute;left:50%;top:calc(100% + 3px);width:12px;height:15px;
  transform:translateX(-80%) rotate(8deg);border-right:1.6px solid rgba(101,67,33,.35);border-radius:50%}
.fun-balloons i:nth-child(1){background:#E74011;left:5%;top:64px}
.fun-balloons i:nth-child(2){background:#3E92CC;left:12%;top:152px;width:20px;height:26px;animation-delay:.9s}
.fun-balloons i:nth-child(3){background:#7C5CBF;right:6%;top:58px;width:30px;height:38px;animation-delay:.4s}
.fun-balloons i:nth-child(4){background:#0E7C72;right:13%;top:160px;width:19px;height:24px;animation-delay:1.5s}
.fun-balloons i:nth-child(5){background:#FFC93C;left:45%;top:6px;width:17px;height:22px;animation-delay:2.1s}
@keyframes fun-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-11px) rotate(3deg)}}

/* versión pequeña para las bandas de Escuelas / Fiestas */
.fun-balloons-sm i{width:20px;height:26px}
.fun-balloons-sm i:nth-child(1){left:4%;top:100px}
.fun-balloons-sm i:nth-child(2){left:auto;right:5%;top:84px;width:24px;height:30px}
.fun-balloons-sm i:nth-child(3){left:auto;right:13%;top:176px;width:16px;height:20px}

/* ---------- título del selector de tobogán ---------- */
.fun-chooser-title{text-align:center;font-size:27px;font-weight:700;color:var(--ink,#2D3142);
  margin:34px 16px 2px;letter-spacing:.2px}
.fun-chooser-title::before,.fun-chooser-title::after{content:"★";font-size:19px;margin:0 8px;
  display:inline-block;vertical-align:3px;animation:fun-bob 3.4s ease-in-out infinite}
.fun-chooser-title::before{color:#FFC93C}
.fun-chooser-title::after{color:#E74011;animation-delay:1.2s}
@media (min-width:820px){.fun-chooser-title{font-size:34px}}

/* ---------- wiggle & bounce en botones ---------- */
@keyframes fun-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.4deg) scale(1.04)}
  55%{transform:rotate(2.4deg) scale(1.04)}80%{transform:rotate(-1.2deg)}}
.slide-nav a,.cta,.book-btn{transition:transform .18s ease,box-shadow .25s ease}
.slide-nav a:hover,.cta:hover{animation:fun-wiggle .45s ease}
.slide-nav a:active,.cta:active,.book-btn:active,.portal-btn:active{transform:scale(.95)}

/* ---------- tarjetas "¿Cuál es tu tobogán?" ---------- */
a.card.fun-choice{transition:transform .3s ease,box-shadow .25s ease,opacity .6s ease}
a.card.fun-choice:hover{transform:translateY(-4px) rotate(-.5deg)}
a.card.fun-choice:active{transform:scale(.985)}
.fun-choice .photo{overflow:hidden}
.fun-choice .photo img{transition:transform .5s ease}
.fun-choice:hover .photo img{transform:rotate(-1.4deg) scale(1.05)}
.fun-choice:active .photo img{transform:rotate(1.2deg) scale(1.03)}
.fun-choice:hover .enter{animation:fun-wiggle .45s ease}
@keyframes fun-pop{0%{transform:scale(1)}35%{transform:scale(.95) rotate(-1.2deg)}
  70%{transform:scale(1.02) rotate(.6deg)}100%{transform:scale(1)}}
.fun-choice.fun-pop{animation:fun-pop .26s ease}

/* ---------- fotos que se inclinan jugando (subpáginas) ---------- */
.mainphoto img{transition:transform .5s ease}
.mainphoto figure:hover img,.mainphoto>img:hover{transform:rotate(-1.2deg) scale(1.04)}

/* ---------- la estrella que se tira del tobogán ---------- */
.fun-rider{filter:drop-shadow(0 2px 2px rgba(122,74,0,.25))}

/* ---------- movimiento reducido: todo quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .fun-balloons i,.fun-chooser-title::before,.fun-chooser-title::after{animation:none}
  .slide-nav a:hover,.cta:hover,.fun-choice:hover .enter{animation:none}
  a.card.fun-choice:hover,.fun-choice:hover .photo img,.fun-choice:active .photo img,
  .mainphoto figure:hover img,.mainphoto>img:hover{transform:none}
}