/* Fondo con gradiente */  
body {  
  font-family: 'Poppins', sans-serif;  
  background: linear-gradient(135deg, #667eea, #764ba2);  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  min-height: 100vh;  
  margin: 0;  
  padding: 20px;  
}  

/* Caja principal */  
.container {  
  background: #fff;  
  padding: 35px 25px;  
  border-radius: 20px;  
  width: 100%;  
  max-width: 360px;  
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);  
  text-align: center;  
  animation: fadeIn 0.7s ease-in-out;  
}  

h2 {  
  font-size: 1.6em;  
  margin-bottom: 20px;  
  color: #222;  
  font-weight: 600;  
}  

h2 i {  
  color: #667eea;  
}  

/* Grupo input */  
.input-group {  
  display: flex;  
  align-items: center;  
  background: #f7f7f7;  
  border: 1.5px solid #ddd;  
  border-radius: 12px;  
  padding: 10px 14px;  
  margin-bottom: 18px;  
  transition: 0.3s;  
}  

.input-group:focus-within {  
  border-color: #667eea;  
  box-shadow: 0 0 6px rgba(102,126,234,0.25);  
}  

.input-group i {  
  color: #888;  
  font-size: 1.1em;  
  margin-right: 10px;  
}  

.input-group input {  
  flex: 1;  
  border: none;  
  outline: none;  
  background: transparent;  
  font-size: 1em;  
  padding: 6px 0;  
}  

/* Botones */  
.btn {  
  width: 100%;  
  padding: 13px;  
  margin-top: 12px;  
  border: none;  
  border-radius: 12px;  
  font-size: 1em;  
  font-weight: 600;  
  color: #fff;  
  cursor: pointer;  
  transition: transform 0.2s ease, background 0.3s ease;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: 8px;  
}  

.btn-primary {  
  background: linear-gradient(135deg, #667eea, #764ba2);  
}  

.btn-primary:hover {  
  background: linear-gradient(135deg, #5a6fd6, #693d96);  
  transform: translateY(-2px);  
}  

.btn-secondary {  
  background: linear-gradient(135deg, #ff758c, #ff7eb3);  
}  

.btn-secondary:hover {  
  background: linear-gradient(135deg, #e7547a, #ff5f9e);  
  transform: translateY(-2px);  
}  

/* Animación */  
@keyframes fadeIn {  
  from { opacity: 0; transform: translateY(-20px); }  
  to { opacity: 1; transform: translateY(0); }  
}  

/* Responsive */  
@media (max-width: 480px) {  
  h2 { font-size: 1.4em; }  
  .container { padding: 28px 18px; }  
}