@font-face {
  font-family: 'iBrand';
  src: url('/fonts/ibrand.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}

body {
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  color: #23232b;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: hidden;

}
/* Usamos clamp para el tamaño del logo y mensaje */
.logo {
  width: clamp(120px, 25vw, 300px);
  margin-bottom: 2.5rem;
  animation: logoPop 1.2s cubic-bezier(.68,-0.55,.27,1.55);
  max-width: 90vw;
  max-height: clamp(60px, 18vh, 300px);
}
@keyframes logoPop {
  0% { transform: scale(0.7) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.1) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.mensaje {
  max-width: 50%;
  font-size: clamp(0.9rem, 4vw, 1.4rem);
  font-weight: 900;
  margin-bottom: 2rem;
  text-align: center;
  color: #23232b;
  letter-spacing: 0.5px;
  animation: fadeInUp 1.2s 0.3s both;
  padding: 0 clamp(20px, 8vw, 100px);
}
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.countdown {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 2.2rem;
  animation: fadeInUp 1.2s 0.5s both;
}
.countdown-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.countdown-digits {
  background-color: transparent;
  display: flex;
  gap: 0.3rem;
  min-width: 90px;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.2rem;
}
/* Flip clock styles */
.digit-box {
  background: linear-gradient(180deg, #D60094  0%, #FE018B 100%);
  padding: 0 10px;
  color: #fff;
  font-family: 'Monaque', 'Segoe UI', Arial, sans-serif;
  font-size: 2.7rem;
  font-weight: 900;
  width: 38px;
  height: 70px;
  border-radius: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-shadow: 0 2px 8px #ff008a33;
  text-shadow: 0 2px 8px #c9005e33;
  transition: background 0.3s;
}
/* Elimino reglas de digit-top, digit-bottom, digit-flip-top, digit-flip-bottom */
.digit-top, .digit-bottom, .digit-flip-top, .digit-flip-bottom {
  display: none !important;
}

.count-label {
  font-size: 1.1rem;
  font-weight: 400;
  color: #23232b;
  opacity: 0.85;
  margin-top: 0.7rem;
  letter-spacing: 0.5px;
}
.volveremos {
  font-size: 1.25rem;
  color: #a8006b;
  margin-top: 1.5rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.2px;
  animation: fadeInUp 1.2s 0.7s both;
}
/* Elimino .brillo */
.brillo { display: none !important; }
.container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  box-sizing: border-box;
  padding-top: 3.5vh;
  padding-bottom: 3.5vh;
}
.footer-img-container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  gap: 1.2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 1.2s 0.8s both;
}
.footer-img-container .banner {
  width: 60%;
  display: block;
  height: auto;
}
.footer-img-container .heart {
  width: 5%;
  display: block;
  height: auto;
}
.heart {
  width: 80px;
  display: block;
  margin: 0 auto;
  animation: pulseHeart 1.2s infinite cubic-bezier(.66,0,.34,1);
}

@keyframes pulseHeart {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 #ff008a44); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 16px #ff008a88); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 #ff008a44); }
}

.social-section {
  margin-top: 2rem;
  text-align: center;
  animation: fadeInUp 1.2s 1.1s both;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.social-title {
  font-size: 1.0rem;
  font-weight: 300;
  margin-bottom: 0.7rem;
  color: #b0b0b8;
  letter-spacing: 0.1px;
  text-align: center;
}
.social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 0.7rem;
}
.social-link {
  color: #ff008a;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px #ff008a11;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}
.social-link svg {
  width: 22px;
  height: 22px;
}
.social-link:hover {
  color: #bc0166;
  background: #f9e6f2;
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 4px 16px #ff008a22;
}
.social-link.linkedin:hover { color: #0077b5; }
.social-link.tiktok:hover { color: #000; }
.social-link.instagram:hover { color: #e1306c; }
.social-link.facebook:hover { color: #1877f3; }

@media (min-width: 1920px) {
  .mensaje {
    font-size: clamp(1.1rem, 4vw, 2rem);
  }
}
/*  */
@media (max-width: 900px) {
  .social-section { margin-top: 1.2rem; }
  .social-icons { gap: 0.7rem; }
  .social-title { font-size: 0.95rem; }
  .social-link { width: 32px; height: 32px; }
  .social-link svg { width: 18px; height: 18px; }
  .logo {
    width: clamp(90px, 20vw, 180px);
    margin-bottom: 1.2rem;
    max-width: 90vw;
    max-height: clamp(40px, 14vh, 180px);
  }
  .mensaje {
    font-size: clamp(0.9rem, 3vw, 1.5rem);
    padding: 0 clamp(10px, 6vw, 80px);
  }


  .countdown {
    gap: 1.2rem;
  }
  .digit-box {
    font-size: 1.5rem;
    width: 28px;
    height: 44px;
    padding: 0 6px;
    border-radius: 8px;
  }
  .countdown-digits {
    min-width: 48px;
    min-height: 36px;
    padding: 0 4px;
  }
  .count-label {
    font-size: 0.8rem;
  }
  .logo {
    width: clamp(60px, 30vw, 170px);
    margin-bottom: 0.7rem;
    max-width: 95vw;
    max-height: clamp(30px, 12vh, 170px);
  }
 
  .container {
    min-height: 100dvh;
    height: 100dvh;
  }
  .countdown {
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .digit-box {
    font-size: 1rem;
    width: 18px;
    height: 28px;
    padding: 0 2px;
    border-radius: 4px;

  }
  .countdown-digits {
    min-width: 28px;
    min-height: 20px;
    padding: 0 2px;
  }
  .count-label {
    font-size: 0.6rem;
  }
  .logo {
    width: 170px;
    margin-bottom: 0.7rem;
  }
  .volveremos {
    font-size: 0.8rem;
  }
  .footer-img-container {
    width: 100% !important;
  }
  .footer-img-container .banner {
    width: 60%;
    display: block;
    height: auto;
  }
  .footer-img-container .heart {
    width: 10%;
    display: block;
    height: auto; 
    font-size: clamp(0.7rem, 4vw, 1.1rem);
    padding: 0 clamp(4px, 4vw, 60px);
  }
}

@media (max-width: 600px) {
  .social-section { margin-top: 0.7rem; }
  .social-icons { gap: 0.4rem; }
  .social-title { font-size: 0.85rem; }
  .social-link { width: 26px; height: 26px; }
  .social-link svg { width: 14px; height: 14px; }
  .digit-box {
    height: 32px;
    min-height: 32px;
    font-size: 1.1rem;
  }
}



@media (max-height: 700px) {
  .logo {
    max-height: clamp(20px, 8vh, 120px);
  }
  .mensaje {
    font-size: clamp(0.7rem, 2vw, 1.1rem);
    padding: 0 clamp(4px, 2vw, 30px);
  }
  .footer-img-container {
    width: 60%;
  }
  .countdown-digits, .digit-box {
    height: 64px;
  }
}

@media (max-height: 700px) and (max-width: 600px) {
  .countdown-digits, .digit-box {
    min-height: 32px;
    height: 32px!important;
  }
  .container {
    min-height: 100dvh;
    height: 100dvh;
  }
}