:root {
   --sky: #A2D9F5;
   --sky-light: #CDEFFF;
   --blue: #3A7CA5;
   --orange: #F9A66C;
   --green: #B0E57C;
   --white: #fff;
 }

 .h1 .h2 h3 .h4 {
   font-family: 'Chewy', cursive;
 }

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

 body {
   font-family: 'Chewy', cursive;
   background: linear-gradient(180deg, var(--sky-light), #ffffff 70%);
   overflow-x: hidden;
   color: #333;
 }


 .cloud {
   position: absolute;
   background: #fff;
   border-radius: 50%;
   box-shadow: 60px 0 0 20px #fff;
   animation: float 18s linear infinite;
   opacity: 0.8;
 }

 .cloud.small {
   width: 80px;
   height: 50px;
   top: 15%;
   left: -100px;
   animation-delay: 2s;
 }

 .cloud.big {
   width: 140px;
   height: 80px;
   top: 25%;
   left: -150px;
 }

 @keyframes float {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(120vw);
   }
 }

 .ground {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 180px;
   background: linear-gradient(180deg, var(--green), #9dd36a);
 }

 /* 🎈 Globos */
 .balloon {
   position: absolute;
   bottom: -120px;
   animation: rise 10s linear infinite;
 }

 .balloon:nth-child(1) {
   left: 15%;
   animation-delay: 0s;
 }

 .balloon:nth-child(2) {
   left: 45%;
   animation-delay: 3s;
 }

 .balloon:nth-child(3) {
   left: 70%;
   animation-delay: 5s;
 }

 @keyframes rise {
   0% {
     transform: translateY(0) scale(1);
   }

   100% {
     transform: translateY(-110vh) scale(1.1);
   }
 }

 /* ===== HERO ===== */
 .hero {
   text-align: center;
   padding: 40px 20px 40px;
   color: var(--blue);
   position: relative;
   z-index: 2;
 }

 .hero h1 {
   font-size: clamp(36px, 8vw, 64px);
   color: var(--blue);
   text-shadow: 2px 3px #fff;
 }

 .hero h2 {
   font-size: clamp(22px, 5vw, 32px);
   color: var(--orange);
   margin-bottom: 10px;
 }

 .hero p {
   font-size: 20px;
   color: #333;
 }

 .hero img.character {
   width: 200px;
   animation: bounce 3s ease-in-out infinite;
 }

 @keyframes bounce {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-12px);
   }
 }

 /* ===== BOTÓN VIDEO ===== */
 .play-intro {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(90deg, #3a7ca5, var(--blue));
   color: #fff;
   text-decoration: none;
   padding: 10px 16px;
   border-radius: 999px;
   border: 1px solid rgba(0, 0, 0, .08);
   box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
   transition: transform .3s ease;
   font-family: 'Chewy', cursive;
 }

 .play-intro:hover {
   transform: translateY(-2px) scale(1.05);
 }

 .play-intro,
 .btn {
   white-space: nowrap;
   /* evita que el texto se divida */
 }

 /* ===== CARD ===== */
 .card {
   max-width: 720px;
   background: var(--white);
   margin: 0 auto;
   border-radius: 30px;
   padding: 30px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   z-index: 2;
   position: relative;
   transform: translateY(-20px);
   font-family: 'Chewy', cursive;
 }

 .card h3 {
   text-align: center;
   color: var(--orange);
   font-size: 26px;
   margin-bottom: 20px;
 }

 .row {
   display: flex;
   align-items: center;
   gap: 14px;
   margin: 10px 0;
 }

 .icon {
   font-size: 28px;
 }

 .detail {
   background: #fff7e0;
   border-left: 6px solid var(--orange);
   border-radius: 14px;
   padding: 12px 18px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }

 /* ===== CONTADOR ===== */
 .countdown {
   display: flex;
   justify-content: center;
   gap: 5px;
   color: #3a7ca5;
   font-size: 18px;
   margin-top: 10px;
 }

 .timer {
   text-align: center;
   background: rgb(214 242 255);
   padding: 12px 20px;
   border-radius: 10px;
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, .2);
 }

 .timer span {
   display: block;
   font-size: 26px;
   font-weight: 700;
   color: #3a7ca5;
 }

 /* ===== BOTÓN ===== */
 .cta {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 16px;
   font-family: 'Chewy', cursive;

   /* para que se acomoden si la pantalla es pequeña */
   margin-top: 20px;
 }

 .btn {
   background: linear-gradient(90deg, var(--blue), var(--blue));
   color: #fff;
   padding: 12px 20px;
   border-radius: 999px;
   text-decoration: none;
 
   transition: transform .2s;
   font-family: 'Chewy', cursive;
   border-color: transparent;
 }

 .btn:hover {
   transform: scale(1.08)
 }

 /* ===== SPOTIFY ===== */
 .spotify {
   max-width: 720px;
   background: var(--white);
   border-radius: 30px;
   padding: 30px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
   z-index: 2;
   position: relative;
   font-family: 'Chewy', cursive;
   margin-bottom: 40px;
 }

 .spotify h3 h2 {
   text-align: center;
   color: var(--blue);
   font-size: 26px;
   margin-bottom: 20px;
 }

 .spotify iframe {
   border-radius: 12px;
   width: 100%;
   max-width: 400px;
   height: 152px;
 }

 /* ===== GALERIA ===== */
 .galeria {
   text-align: center;
   margin: 30px auto;
   max-width: 500px;
 }

 .galeria h2 {
   color: var(--blue);
   margin-bottom: 10px;
   font-family: 'Chewy', cursive;
 }

 /* 🎨 Vista previa pequeña de galería */
 .galeria {
   text-align: center;
   background: #e2f5ff;
   border-radius: 22px;
   box-shadow: 0 6px 20px rgba(58, 124, 165, 0.2);
   padding: 20px;
   margin: 30px auto;
   max-width: 700px;
 }

 .galeria h2 {
   color: #3a7ca5;
   font-family: 'Chewy', cursive;
   margin-bottom: 12px;
 }

 .thumbs.preview {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 10px;
   justify-content: center;
 }

 .thumbs.preview img {
   width: 100%;
   height: 110px;
   object-fit: cover;
   border-radius: 14px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   cursor: pointer;
   transition: transform .3s ease;
 }

 .thumbs.preview img:hover {
   transform: scale(1.05);
 }

 /* Centrar el botón */
 .galeria .cta {
   margin-top: 15px;
 }





 /* ===== LIGHTBOX ===== */
 .lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .85);
   display: none;
   place-items: center;
   z-index: 60
 }

 .lightbox.show {
   display: grid
 }

 .lb-wrap {
   position: relative;
   width: min(92vw, 940px)
 }

 .lb-main img,
 .lb-main video {
   width: 100%;
   border-radius: 12px;
 }

 .lb-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 8px;
   color: #fff
 }

 .icon-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .25);
   display: grid;
   place-items: center;
   color: #fff;
   background: rgba(255, 255, 255, .08);
   cursor: pointer;
 }

 .icon-btn:hover {
   background: rgba(255, 255, 255, .18)
 }

 .counter {
   font-weight: 700
 }

 /* ===== FOOTER ===== */
 footer {
   text-align: center;
   color: #555;
   margin-top: 30px;
   padding-bottom: 40px;
   position: relative;
 }

 footer img.qr {
   width: 100px;
   border-radius: 12px;
   margin-top: 8px;
 }

 footer p {
   font-size: 14px;
   opacity: .8
 }

 footer .family {
   display: flex;
   justify-content: center;
   align-items: flex-end;
   gap: 10px;
   margin-top: 20px;
 }

 footer .family img {
   height: 120px;
 }

 .shell {
   max-width: 420px;
   margin: 0 auto;
   padding: 10px;
 }

 .phone {
   background: linear-gradient(180deg, var(--panel), var(--panel-2));
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 28px;
   box-shadow: var(--shadow);
   padding: 18px;
   position: relative;
   overflow: hidden;
   border: solid #3a7ca5;
 }

 /* ===== MODAL VIDEO BLUEY ===== */
 .modal-video {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .8);
   backdrop-filter: blur(6px);
   justify-content: center;
   align-items: center;
   z-index: 9999;
   animation: fadeIn .25s ease;
 }

 .modal-video.show {
   display: flex;
 }

 .modal-video-content {
   position: relative;
   width: min(92vw, 760px);
   background: #eaf8ff;
   border-radius: 20px;
   padding: 12px;
   box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
 }

 .modal-video video {
   width: 100%;
   border-radius: 12px;
   background: #000;
   outline: none;
 }

 .close-video {
   position: absolute;
   top: 8px;
   right: 8px;
   background: #3a7ca5;
   color: #fff;
   border: none;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   font-size: 20px;
   cursor: pointer;
   transition: transform .2s, background .2s;
   z-index: 9999;
 }

 .close-video:hover {
   transform: rotate(90deg);
   background: #f9a66c;
 }

 /* ===== MODAL GALERÍA BLUEY ===== */
 .modal-gallery-bluey {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(6px);
   justify-content: center;
   align-items: center;
   z-index: 9999;
 }

 .modal-gallery-bluey.show {
   display: flex;
 }

 .modal-content-gallery {
   position: relative;
   background: #eaf8ff;
   border-radius: 20px;
   padding: 20px;
   width: 90%;
   max-width: 700px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
   animation: fadeIn .3s ease;
 }

 .close-gallery {
   position: absolute;
   top: 12px;
   right: 12px;
   background: #3a7ca5;
   border: none;
   color: white;
   font-size: 22px;
   border-radius: 50%;
   width: 36px;
   height: 36px;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s;
   z-index: 9999;
 }

 .close-gallery:hover {
   background: #f9a66c;
   transform: rotate(90deg);
 }

 /* Imagen principal */
 .gallery-view {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
 }

 .gallery-view img {
   width: 100%;
   max-height: 420px;
   object-fit: cover;
   border-radius: 16px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
 }

 /* Botones de navegación */
 .nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: #3a7ca5;
   color: white;
   font-size: 26px;
   border: none;
   border-radius: 50%;
   width: 42px;
   height: 42px;
   cursor: pointer;
   transition: background .3s, transform .2s;
 }

 .nav-btn:hover {
   background: #3a7ca5;
   transform: scale(1.1);
 }

 .nav-btn.prev {
   left: -12px;
 }

 .nav-btn.next {
   right: -12px;
 }

 /* Miniaturas del modal */
 .thumbs {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 8px;
 }

 .thumbs img {
   width: 70px;
   height: 70px;
   object-fit: cover;
   border-radius: 12px;
   cursor: pointer;
   transition: transform .3s, border .3s;
   border: 2px solid transparent;
 }

 .thumbs img:hover,
 .thumbs img.active {
   transform: scale(1.05);
   border-color: #3a7ca5;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: scale(.96);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 /* ===== EFECTOS DE CONFETI Y FUEGOS ===== */
 #confettiCanvas {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 10000;
 }

 /* ===== EFECTO DE BOTONES NEÓN AZUL PARPADEANTE ===== */
 @keyframes pulseGlow {

   0%,
   100% {
     box-shadow: 0 0 8px #3a7ca5, 0 0 16px #4fc3f7, 0 0 24px #81d4fa;
     background: linear-gradient(90deg, #3a7ca5, #4fc3f7);
     transform: scale(1);
   }

   50% {
     box-shadow: 0 0 14px #4fc3f7, 0 0 28px #81d4fa, 0 0 40px #b3e5fc;
     background: linear-gradient(90deg, #4fc3f7, #81d4fa);
     transform: scale(1.05);
   }
 }

 .play-intro,
 .btn {
   animation: pulseGlow 2.5s ease-in-out infinite;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 /* Pequeño efecto al pasar el mouse */
 .play-intro:hover,
 .btn:hover {
   transform: scale(1.1);
   box-shadow: 0 0 20px #29b6f6, 0 0 40px #4fc3f7;
 }

 /* ===== BOTÓN FLOTANTE DE COMPARTIR ===== */
.share-button {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 9999;
  background: linear-gradient(90deg, #3a7ca5, #4fc3f7);
  color: white;
  font-family: 'Chewy', cursive;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: pulseGlow 2.5s ease-in-out infinite;
  transition: transform 0.2s, box-shadow 0.2s;
}

.share-button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px #4fc3f7, 0 0 40px #81d4fa;
}

/* ===== BOTÓN DE UBICACIÓN ===== */
.map-button {
  position: fixed;
  bottom: 20px;
  right: 16px;
  z-index: 9999;
  background: linear-gradient(90deg, #3a7ca5, #4fc3f7);
  color: white;
  font-family: 'Chewy', cursive;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: pulseGlow 2.5s ease-in-out infinite;
  transition: transform 0.2s, box-shadow 0.2s;
}

.map-button:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px #4fc3f7, 0 0 40px #81d4fa;
}

/* Versión para pantallas pequeñas */
@media (max-width: 600px) {
  .map-button {
    bottom: 14px;
    right: 10px;
    font-size: 14px;
    padding: 8px 14px;
  }
}

/* 💡 Mantiene el efecto de parpadeo azul igual que los botones */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 8px #3a7ca5, 0 0 16px #4fc3f7, 0 0 24px #81d4fa;
  }
  50% {
    box-shadow: 0 0 14px #4fc3f7, 0 0 28px #81d4fa, 0 0 40px #b3e5fc;
  }
}

/* Adaptación para móviles */
@media (max-width: 600px) {
  .share-button {
    top: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 14px;
  }
}