/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }

html, body {
    height:100%; 
    font-family:'Poppins',sans-serif;
    background:#0d1b2a; 
    overflow:hidden;
    display:flex; 
    justify-content:center; 
    align-items:center;
}

/* Partículas (si quieres usar particles.js) */
#particles-js { position:absolute; width:100%; height:100%; z-index:0; }

/* Contenedor principal de formulario */
.form-box {
    position:relative; z-index:1;
    width:95%; max-width:750px; 
    padding:3.5rem 3rem;
    border-radius:1.8rem;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 25px 50px rgba(0,0,0,0.35);
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn { 
    from { opacity:0; transform:translateY(-25px); }
    to { opacity:1; transform:translateY(0); } 
}

.form-box h2 { 
    text-align:center; 
    color:#fff; 
    font-weight:600; 
    margin-bottom:2.5rem; 
    font-size:2.2rem; 
}

/* Formulario con 2 columnas */
.form-row {
    display:flex; 
    gap:2rem; 
    margin-bottom:1.8rem;
}

.form-row .form-group {
    flex:1;
    position:relative;
}

.form-group input, .form-group select {
    width:100%; 
    height:55px; 
    padding:0 2rem;
    border-radius:1rem; 
    border:1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.15); 
    color:#fff; 
    font-size:1rem; 
    transition: all 0.3s ease;
}

.form-group input::placeholder, 
.form-group select { 
    color: rgba(255,255,255,0.7);
    font-size:1rem;
}

.form-group input:focus, 
.form-group select:focus {
    border-color:#00c6ff; 
    background: rgba(255,255,255,0.22);
    box-shadow:0 0 12px rgba(0,198,255,0.5); 
    outline:none;
}

/* Estilo para el select de servicios */
.form-group select {
    background-color: #1a2536; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */
    font-size: 1rem;
}

/* Estilo para las opciones dentro del select */
.form-group select option {
    background-color: #1a2536; /* Fondo oscuro para las opciones */
    color: #fff; /* Texto blanco para las opciones */
}

/* Estilo al pasar el mouse sobre las opciones dentro del select */
.form-group select option:hover {
    background-color: #007bff; /* Azul para las opciones al pasar el ratón */
    color: #fff; /* Texto blanco */
}

/* Iconos dentro de los inputs */
.form-group .input-icon {
    position:absolute; left:18px; top:50%; transform:translateY(-50%);
    color: rgba(255,255,255,0.75); font-size:1.2rem;
}

/* Checkbox estilizado */
.checkbox-group {
    display:flex; 
    align-items:center; 
    margin-bottom:2rem;
    color:#fff;
    font-size:1rem;
}

.checkbox-group input[type="checkbox"] {
    margin-right:1rem;
    width:22px;
    height:22px;
    cursor:pointer;
}

/* Botones */
.btn {
    width:100%; 
    height:55px; 
    border-radius:2rem; 
    border:none; 
    font-size:1.2rem; 
    font-weight:600; 
    color:#fff;
    background: linear-gradient(45deg,#00c6ff,#007bff);
    box-shadow:0 8px 20px rgba(0,123,255,0.5); 
    cursor:pointer; 
    transition: all 0.3s ease; 
    margin-top:1.5rem;
}

.btn:hover {
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(0,123,255,0.8);
    background: linear-gradient(45deg,#007bff,#00a1cc);
}

.btn-recover {
    display:inline-block; 
    padding:0.5rem 1.2rem; 
    border-radius:2rem; 
    color:#fff; 
    text-decoration:none; 
    transition: all 0.3s ease; 
    margin-top:0.8rem;
}

.btn-recover:hover { 
    background: #ff4b4b; 
}

/* Pie de página */
.footer { text-align:center; margin-top:1.5rem; font-size:0.9rem; color: rgba(255,255,255,0.7); }

@media(max-width:768px) { 
    .form-row { 
        flex-direction:column; 
        gap:1.5rem; 
    } 
}