:root { 
    --agua: #75e8ff; 
    --dark-blue: #0a192f; 
}

/* --- FONDO GENERAL (El escritorio detrás del celular) --- */
body {
    margin: 0;
    background: #050c18; 
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', sans-serif;
    color: white;
}

/* --- EL TELÉFONO MOCKUP --- */
.phone-mockup {
    width: 360px;
    height: 740px;
    background: radial-gradient(circle, #1a2a44 0%, #050c18 100%);
    border: 12px solid #1a1a1a;
    border-radius: 40px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
    scrollbar-width: none; 
}
.phone-mockup::-webkit-scrollbar { display: none; }

.main-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ELEMENTOS GRÁFICOS --- */
.logo-container { margin-bottom: 10px; text-align: center; }
.app-logo { width: 90px; filter: drop-shadow(0 0 10px var(--agua)); }

.speaky-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
}

.speaky-character {
    width: 140px;
    filter: drop-shadow(0 0 10px var(--agua));
    animation: float 3s ease-in-out infinite;
}

.speech-bubble {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: bold;
    border: 2px solid var(--agua);
    margin-top: -5px;
    text-align: center;
    width: 85%;
}

/* --- FORMULARIOS Y CAJAS --- */
.form-card {
    background: rgba(19, 19, 19, 0.9);
    backdrop-filter: blur(15px);
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}

.form-card h2 {
    font-size: 1.4rem;
    color: var(--agua);
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.hidden { display: none !important; }

/* --- INPUTS Y BOTONES --- */
input {
    width: 100%;
    padding: 14px;
    margin: 8px 0;
    border-radius: 12px;
    font-size: 15px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    box-sizing: border-box;
}

.btn-primary {
    background: var(--agua);
    color: var(--dark-blue);
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    margin-top: 15px;
    font-size: 16px;
    transition: 0.3s;
}
.btn-primary:hover { background: white; }

.btn-back { 
    background: none; 
    color: var(--agua); 
    border: none; 
    cursor: pointer; 
    margin-bottom: 10px; 
    font-weight: bold;
}

.terms-link { color: var(--agua); font-weight: bold; text-decoration: none; }
.terms-container { font-size: 0.85rem; margin-top: 10px; display: flex; align-items: center; gap: 8px;}
.terms-container input { width: auto; }

p { font-size: 0.9rem; text-align: center; }
p a { color: var(--agua); text-decoration: none; font-weight: bold; }

/* --- ANIMACIONES --- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* --- PARA VERLO EN CELULARES REALES (FUERA DE LA PC) --- */
@media (max-width: 480px) {
    body { background: radial-gradient(circle, #1a2a44 0%, #050c18 100%); }
    .phone-mockup {
        width: 100%;
        height: 100vh;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}