body{
  margin:0;
  font-family:'Poppins', sans-serif;
  background:#f3f3f3;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

/* CONTENEDOR */
.phone{
  width:380px;
  height:780px;
  background:#fff;
  border-radius:40px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  position:relative;
}

@media(max-width:768px){
  .phone{
    width:100%;
    height:100vh;
    border-radius:0;
  }
}

/* FONDO */
.bg{
  position:absolute;
  width:100%;
  height:100%;
  background:url('descarga.jpeg') center/cover no-repeat;
}

/* CONTENIDO */
.content{
  position:relative;
  padding: 120px 30px 25px;
  text-align:center;
}

/* TITULOS */
.title-script{
  font-family:'Great Vibes', cursive;
  font-size:42px;
  color:#b57c8f;
}

.title-main{
  font-family:'Playfair Display', serif;
  font-size:27px;
  letter-spacing:4px;
  color:#d7a1b0;
}

.subtitle{
  font-size:11px;
  letter-spacing:4px;
  color:#777;
  margin-top:5px;
}

/* NOMBRE */
.name{
  font-family:'Great Vibes', cursive;
  font-size:40px;
  color:#a96c80;
  margin:25px 0;
}

/* FECHA */
.date{
  font-family:'Playfair Display', serif;
  margin-top:10px;
}

.month{
  font-size:12px;
  letter-spacing:3px;
  color:#888;
}

.day{
  font-size:42px;
  color:#d7a1b0;
  margin:5px 0;
}

.row2{
  display:flex;
  justify-content:center;
  gap:10px;
  font-size:12px;
  letter-spacing:2px;
  color:#555;
}

/* UBICACIÓN */
.location{
  margin-top:15px;
  font-size:13px;
  color:#777;
}

/* BOTONES */
.btn{
  margin-top:20px;
  padding:12px;
  border:none;
  border-radius:20px;
  width:100%;
  cursor:pointer;
  font-size:12px !important;
}

.btn-si{
  background:#d9a5b3;
  color:#fff;
}

.btn-no{
  background:#ccc;
  color:#333;
}

/* INPUTS */
input{
  width:89%;
  padding:12px;
  margin-top:10px;
  border-radius:10px;
  border:1px solid #ddd;
}

.hidden{display:none;}
.input-error{
  border:2px solid #dc3545 !important;
}

.input-ok{
  border:2px solid #28a745 !important;
}
.contador{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

.contador button{
  width:35px;
  height:35px;
  border:none;
  border-radius:50%;
  background:#d9a5b3;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.contador input{
  width:50px;
  text-align:center;
  border:1px solid #ddd;
  border-radius:10px;
  height: 15px;
  font-size:14px;
  cursor: none;
  outline: none;
  margin: 0;
}
.gracias-box{
  animation: fadeZoom 0.6s ease;
}

.gracias-box .icon{
  font-size:50px;
  margin-bottom:15px;
  animation: float 2s ease-in-out infinite;
}

.gracias-box h2{
  margin-bottom: 10px;
  font-family: 'Great Vibes', cursive;
  font-size: 42px;
  color: #b57c8f;
  font-weight: 100;
  margin-top: 0;
}

.gracias-box p{
  font-size:13px;
  color:#666;
}

/* ANIMACIÓN ENTRADA */
@keyframes fadeZoom{
  from{
    opacity:0;
    transform:scale(0.8);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* ANIMACIÓN FLOTANTE */
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}
.loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(255,255,255,0.85);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.loader-box{
  text-align:center;
  animation:fadeIn 0.3s ease;
}

.spinner{
  width:40px;
  height:40px;
  border:4px solid #f3d1dc;
  border-top:4px solid #d9a5b3;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:auto;
  margin-bottom:10px;
}

.loader p{
  font-size:13px;
  color:#666;
}

/* animaciones */
@keyframes spin{
  to{transform:rotate(360deg);}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.hidden{
  display:none !important;
}
.nota {
  font-size: 11px;
  margin-top: 76px;
}