@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

:root{
  --gold:#d4a437;
  --gold-soft:#f2d47a;
  --white:#ffffff;
  --green:#25D366;
}

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

html{
  min-height:100%;
  background:#000;
}

body{
  min-height:100svh;
  font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#000;
  color:var(--white);
  overflow-x:hidden;
}

.video-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  background:#000;
}

.overlay{
  position:fixed;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.55) 46%,rgba(0,0,0,.26)),
    linear-gradient(0deg,rgba(0,0,0,.76),rgba(0,0,0,.08) 48%,rgba(0,0,0,.35));
  z-index:1;
  pointer-events:none;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.18) 0 1px, transparent 1px);
  background-size:34px 34px,47px 47px;
  z-index:2;
}

.topbar{
  position:fixed;
  top:clamp(18px,4vw,34px);
  left:clamp(20px,5vw,70px);
  right:clamp(20px,5vw,70px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index:10;
}

.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:clamp(1.9rem,5vw,2.55rem);
  line-height:1;
  font-weight:900;
  color:var(--gold);
  letter-spacing:-.1em;
}

.status{
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero{
  position:relative;
  z-index:4;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:115px clamp(22px,8vw,120px) 150px;
  max-width:1020px;
  animation:intro .9s ease both;
}

.eyebrow{
  margin-bottom:16px;
  color:var(--gold-soft);
  font-size:clamp(.62rem,1.6vw,.78rem);
  font-weight:800;
  letter-spacing:.38em;
  text-transform:uppercase;
  max-width:100%;
}

h1{
  max-width:100%;
  font-size:clamp(3.1rem,10vw,8.8rem);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.075em;
  text-transform:uppercase;
  word-break:normal;
}

h1 span{
  display:block;
}

.slogan{
  margin-top:20px;
  font-size:clamp(1.1rem,2.7vw,2.25rem);
  font-weight:800;
  color:var(--gold);
  max-width:95%;
}

.line{
  width:min(230px,60vw);
  height:3px;
  margin:24px 0;
  background:linear-gradient(90deg,var(--gold),transparent);
  animation:lineMove 3.8s ease-in-out infinite;
}

.desc{
  max-width:680px;
  font-size:clamp(.92rem,1.6vw,1.12rem);
  line-height:1.75;
  color:rgba(255,255,255,.86);
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(72px, 96px));
  gap:12px;
  margin-top:24px;
  max-width:100%;
}

.countdown div{
  padding:14px 10px;
  border:1px solid rgba(212,164,55,.48);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:18px;
  text-align:center;
}

.countdown strong{
  display:block;
  font-size:clamp(1.45rem,4vw,2rem);
  line-height:1;
  color:var(--gold-soft);
  font-weight:900;
}

.countdown span{
  display:block;
  margin-top:7px;
  font-size:.63rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.76);
}

.phrases{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  max-width:760px;
}

.phrases span{
  padding:10px 15px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:.76rem;
  font-weight:700;
}

.quote{
  margin-top:24px;
  max-width:590px;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
  font-style:italic;
  line-height:1.55;
}

.bottom-info{
  position:fixed;
  left:clamp(22px,8vw,120px);
  right:140px;
  bottom:30px;
  display:flex;
  gap:20px;
  z-index:5;
}

.bottom-info article{
  min-width:210px;
  padding-left:16px;
  border-left:3px solid var(--gold);
}

.bottom-info strong{
  display:block;
  font-size:.76rem;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.12em;
}

.bottom-info span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.76);
  font-size:.84rem;
}

.wa{
  position:fixed;
  right:clamp(18px,4vw,34px);
  bottom:clamp(88px,12vh,110px);
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  z-index:20;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}

.wa svg{
  width:34px;
  height:34px;
  fill:#fff;
}

.wa:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 18px 35px rgba(0,0,0,.35);
}

@keyframes intro{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes lineMove{
  0%,100%{width:min(230px,60vw);opacity:.9}
  50%{width:min(330px,76vw);opacity:1}
}

/* TABLET Y CELULAR */
@media(max-width:900px){

  body{
    min-height:100svh;
    overflow-y:auto;
  }

  .overlay{
    background:
      linear-gradient(180deg,rgba(0,0,0,.70),rgba(0,0,0,.66)),
      linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.12) 50%,rgba(0,0,0,.45));
  }

  .topbar{
    top:18px;
    left:22px;
    right:22px;
    justify-content:flex-start;
  }

  .logo{
    font-size:3rem;
    line-height:1;
    min-width:auto;
    min-height:auto;
  }

  .status{
    display:none;
  }

  .hero{
    min-height:100svh;
    padding:96px 22px 80px;
    justify-content:center;
  }

  .eyebrow{
    letter-spacing:.22em;
    line-height:1.6;
  }

  h1{
    font-size:clamp(3rem,17vw,5.6rem);
    line-height:.9;
    letter-spacing:-.07em;
  }

  .slogan{
    margin-top:16px;
    max-width:100%;
  }

  .desc{
    line-height:1.65;
  }

  .countdown{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:7px;
    width:100%;
    max-width:430px;
  }

  .countdown div{
    padding:11px 4px;
    border-radius:14px;
  }

  .countdown span{
    font-size:.52rem;
    letter-spacing:.08em;
  }

  .phrases{
    gap:8px;
  }

  .phrases span{
    font-size:.68rem;
    padding:8px 11px;
  }

  .quote{
    font-size:.84rem;
  }

  .bottom-info{
    display:none;
  }

  .wa{
    right:22px;
    bottom:22px;
    width:58px;
    height:58px;
  }
}

/* CELULARES PEQUEÑOS */
@media(max-width:420px){

  .topbar{
    top:18px;
    left:22px;
    right:22px;
  }

  .logo{
    font-size:3rem;
  }

  .hero{
    padding-top:88px;
    padding-bottom:90px;
  }

  .eyebrow{
    font-size:.58rem;
    letter-spacing:.18em;
  }

  h1{
    font-size:clamp(2.75rem,18vw,4.4rem);
  }

  .countdown{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:290px;
  }

  .countdown div{
    padding:12px 6px;
  }

  .wa{
    width:56px;
    height:56px;
  }
}