*{  
  margin:0;  
  padding:0;  
  box-sizing:border-box;  
  font-family:'Poppins',sans-serif;  
}  
  
body{  
  background:#7A2A8A;  
  color:white;  
}  
  
/* Contenedor con escala y alineación */  
.app-container {  
  min-height: 100vh;  
  display:flex;  
  flex-direction: column;  
  justify-content: flex-start; /* elementos alineados arriba */  
  transform: scale(0.96);  
  transform-origin: top center;  
  padding-top: 40px; /* espacio desde el top */  
  padding-bottom: 40px;  
}  
  
/* ===== MODAL PREMIUM ===== */  
.modal-overlay{  
  position:fixed;  
  inset:0;  
  background:rgba(0,0,0,0.75);  
  backdrop-filter:blur(10px);  
  display:flex;  
  justify-content:center;  
  align-items:center;  
  z-index:9999;  
  animation:fadeIn 0.5s ease;  
}  
  
.modal{  
  background:linear-gradient(135deg,#8E44AD,#1FC3B2);  
  padding:28px 22px;  
  border-radius:22px;  
  width:88%;  
  max-width:380px;  
  text-align:center;  
  position:relative;  
  box-shadow:0 25px 50px rgba(0,0,0,0.5);  
  animation:zoom 0.6s ease;  
}  
  
.modal h2{  
  font-size:20px;  
  margin-bottom:10px;  
}  
  
.modal p{  
  font-size:13px;  
  margin:7px 0;  
  line-height:1.45;  
}  
  
.highlight{  
  font-weight:700;  
  font-size:15px;  
  color:#ffe082;  
}  
  
.countdown{  
  position:absolute;  
  top:12px;  
  right:12px;  
  background:white;  
  color:#8E44AD;  
  width:34px;  
  height:34px;  
  border-radius:50%;  
  display:flex;  
  align-items:center;  
  justify-content:center;  
  font-weight:bold;  
  font-size:13px;  
}  
  
.close-btn{  
  position:absolute;  
  top:12px;  
  left:12px;  
  font-size:19px;  
  cursor:pointer;  
  display:none;  
  font-weight:bold;  
}  
  
.socials{  
  display:flex;  
  justify-content:center;  
  gap:20px;  
  margin-top:18px;  
}  
  
.socials img{  
  width:30px;  
  transition:0.3s;  
}  
  
.socials img:hover{  
  transform:scale(1.2);  
}  
  
@keyframes fadeIn{  
  from{opacity:0}  
  to{opacity:1}  
}  
  
@keyframes zoom{  
  from{transform:scale(0.85);opacity:0}  
  to{transform:scale(1);opacity:1}  
}  
  
/* HEADER */  
.header{  
  display:flex;  
  justify-content:space-between;  
  align-items:center;  
  padding:22px 18px;  
}  
  
.header h1{  
  font-size:24px;  
  font-weight:700;  
}  
  
.help{  
  width:30px;  
  height:30px;  
  border:2px solid white;  
  border-radius:50%;  
  display:flex;  
  align-items:center;  
  justify-content:center;  
  font-weight:bold;  
  cursor:pointer;  
}  
  
/* SLIDER */  
.content{  
  text-align:center;  
  padding:0 18px;  
}  
  
.slider{  
  position:relative;  
  width:100%;  
  max-width:280px;  
  margin:18px auto;  
  overflow:hidden;  
  border-radius:18px;  
}  
  
.slide{  
  width:100%;  
  display:none;  
  border-radius:18px;  
}  
  
.slide.active{  
  display:block;  
}  
  
.dots{  
  margin-top:12px;  
  display:flex;  
  justify-content:center;  
  gap:7px;  
}  
  
.dot{  
  width:7px;  
  height:7px;  
  background:#d1a8e6;  
  border-radius:50%;  
  cursor:pointer;  
  transition:0.3s;  
}  
  
.dot.active{  
  width:22px;  
  border-radius:10px;  
  background:white;  
}  
  
/* BUTTONS */  
.buttons{  
  width: 100%;  
  padding: 18px;  
  margin-top: 20px; /* separa del slider */  
  display: flex;  
  flex-direction: column;  
  gap: 12px; /* espacio entre botones */  
  align-items: center;  
}  
  
.btn{  
  width:100%;  
  padding:14px;  
  border:none;  
  border-radius:11px;  
  font-size:15px;  
  font-weight:600;  
  cursor:pointer;  
}  
  
.btn-primary{  
  background:#1FC3B2;  
  color:white;  
}  
  
.btn-secondary{  
  background:#8E44AD;  
  color:white;  
}  
  
.divider{  
  text-align:center;  
  margin:9px 0;  
  opacity:0.8;  
  font-size:13px;  
}  
  
.google-btn{  
  width:100%;  
  background:white;  
  color:#444;  
  padding:14px;  
  border-radius:11px;  
  display:flex;  
  align-items:center;  
  justify-content:center;  
  gap:9px;  
  font-weight:600;  
  cursor:pointer;  
}  
  
.google-btn img{  
  width:19px;  
}  
  
/* MEDIA QUERY para pantallas pequeñas */  
@media (max-width:400px){  
  .modal{  
    max-width:320px;  
    padding:22px 18px;  
  }  
  .modal h2{font-size:18px;}  
  .modal p{font-size:12px;}  
  .countdown{width:30px;height:30px;font-size:12px;}  
  .socials img{width:26px;}  
  .header h1{font-size:22px;}  
  .btn{padding:12px;font-size:14px;}  
  .slider{max-width:240px;}  
}