:root{
  --ink:#1a1a1a;
  --muted:#6b6b6b;
  --pink:#ff4fa3;
  --pink-soft:#ffd1e8;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:"Poppins", sans-serif;
  background:
    radial-gradient(circle at 20% 10%, #fff, transparent 40%),
    radial-gradient(circle at 80% 0%, #ffe9f5, transparent 35%),
    linear-gradient(180deg, #fff7fb, #ffffff);
  display:flex;
  align-items:center;
  justify-content:center;
}

.wrap{
  width:100%;
  padding:20px;
}

.card{
  max-width:720px;
  margin:auto;
  background:white;
  border-radius:28px;
  padding:40px 30px;
  text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  animation: fadeUp .6s ease;
}

.logo{
  width: 190px;
  margin-bottom:10px;
}

.headline{
  font-size:32px;
  margin:10px 0 25px;
  font-weight:800;
  letter-spacing:-0.5px;
}

.countdown{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
  margin-top:10px;
}

.unit{
  background: linear-gradient(180deg, #fff, #fff6fb);
  border-radius:18px;
  padding:18px 10px;
  border:1px solid #00000010;
}

.num{
  font-size:36px;
  font-weight:800;
  background: linear-gradient(135deg, var(--pink), #ff7ac2);

  background-clip: text;              /* estándar */
  -webkit-background-clip: text;      /* Chrome/Safari */
  
  color: transparent;                 /* estándar */
  -webkit-text-fill-color: transparent;
}


.lbl{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* Animación suave */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}


.headline{
  font-size:32px;
  margin:10px 0 25px;
  font-weight:800;
  letter-spacing:-0.5px;
  color:#4b2e2a; /* marrón browNY */
}