/* =======================
   CUSTOM FONTS SEQUEL
   ======================= */
@font-face {
    font-family: 'SequelBlack46';
    src: url('./fonts/sequel/Sequel100Black-46.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SequelBlack76';
    src: url('./fonts/sequel/Sequel100Black-76.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

/* Fonts loaded in HTML: Montserrat italic for phrase, Bebas Neue for countdown */
:root{
  --overlay: rgba(0,0,0,0.0);
  --white: #ffffff;
  --muted: rgba(255,255,255,0.85);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:var(--white);
  background:#000;
  -webkit-font-smoothing:antialiased;
}

/* Background image */
.bg{
  position:fixed;
  inset:0;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.6) saturate(0.95);
  z-index:-2;
}

/* dark overlay */
.overlay{
  position:fixed;
  inset:0;
  background: var(--overlay);
  z-index:-1;
}

/* logo - desktop responsive */
header .logo{
  width: clamp(60px, 15vw, 60px);
  height: auto;
  display: block;
  margin: clamp(50px, 5vw, 50px) auto 0 auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}

/* Hero copy */
.hero-copy { max-width:920px; padding: 0 10px; }

/* ✅ Prepárate → SequelBlack46 */
.prepararte{
  font-family: 'SequelBlack46', sans-serif !important;
  font-style: normal;
  font-weight: 700;
  font-size:1.1rem;
  margin:0;
  opacity:0.95;
}

/* ✅ Su luz está por brillar → SequelBlack76 */
.hero-title{
  font-family: 'SequelBlack76', sans-serif !important;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(1.9rem, 6.5vw, 3.6rem);
  margin: .25rem 0;
  line-height:1.02;
  letter-spacing: -0.02em;
}

/* ✅ Isaías 60:1 → SequelBlack46 */
.ref{
  font-family: 'SequelBlack46', sans-serif !important;
  margin:0;
  font-size:0.95rem;
  opacity:0.9;
}

/* Countdown */
.countdown-wrap{ width:100%; display:flex; justify-content:center; }
.countdown{
  display:flex;
  gap: 28px;
  align-items:baseline;
  justify-content:center;
  padding: 18px 22px;
  border-radius: 14px;
  background: transparent;
}
.unit{ text-align:center; min-width:100px; }

/* ELIMINADO el efecto de fade-in/slide */
.num{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.6rem, 10vw, 5.4rem);
  line-height:1;
  font-weight:400;
  opacity:1 !important;
  transform: none !important;
  transition: none !important;
}

.label{
  font-size:0.95rem;
  margin-top:6px;
  opacity:0.95;
}

/* small footer */
footer{ color:var(--muted); font-size:0.9rem; }
.social img{ width:26px; height:auto; filter: brightness(0) invert(1); opacity:0.95; }

/* =======================
   RESPONSIVE MOBILE
   ======================= */
@media (max-width: 576px){

  /* Logo - más pequeño y responsive */
  header .logo{
    width: clamp(40px, 15vw, 60px);
    height: auto;
    margin: clamp(50px, 5vw, 0px) auto; /* mismo espacio arriba y abajo */
    display: block;
  }

  /* Hero copy - espacio uniforme */
  .hero-copy{
    padding: 0 10px;
    margin: clamp(0px, 5vw, 30px) auto; /* mismo espacio arriba y abajo que logo */
  }

  /* Countdown - espacio uniforme */
  .countdown-wrap{
    margin: clamp(15px, 5vw, 30px) auto; /* mismo espacio que logo y frase */
  }

  /* Ajustes tipográficos para móviles */
  .unit{ min-width:68px; }
  .num{ font-size: clamp(2rem, 16vw, 4rem); }
  .hero-title{ font-size: clamp(1.6rem, 8vw, 2.6rem); }
}