/* Overlay del funnel "Empezá gratis" (flag ONBOARDING_FUNNEL). */
.ob-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #F9F5EE;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    font-family: 'Poppins', sans-serif;
}
.ob-card {
    position: relative;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 560px;
    width: 100%;
    padding: 2.5rem 2rem 2rem;
    margin: auto 0;
}
.ob-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
}
.ob-close:hover { color: #333; }
.ob-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.ob-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
}
.ob-dot.active { background: #0b6146; }
.ob-title {
    color: #0b6146;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 1.5rem;
    text-align: center;
}
.ob-subtitle {
    color: #5a4a3a;
    font-size: 0.98rem;
    line-height: 1.45;
    margin: -0.9rem 0 1.3rem;
    text-align: center;
}
.ob-options {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}
.ob-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid #e0ddd6;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    cursor: pointer;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.15s, background-color 0.15s;
    margin: 0;
}
.ob-check:hover { border-color: #0b6146; }
.ob-check input { accent-color: #0b6146; width: 18px; height: 18px; flex-shrink: 0; }
/* Clase puesta por onboarding.js al (des)marcar: :has() no existe en los
   Android/iOS viejos del tráfico real de Ads. */
.ob-check.ob-checked {
    border-color: #0b6146;
    background: rgba(11, 97, 70, 0.06);
}
.ob-next {
    background-color: #0b6146;
    color: white;
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 1.1rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
}
.ob-next:hover { background-color: #094a37; }
.ob-next:disabled { opacity: 0.7; cursor: default; }
.ob-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 0.9rem;
    box-sizing: border-box;
}
.ob-input:focus {
    outline: none;
    border-color: #0b6146;
    box-shadow: 0 0 0 0.2rem rgba(11, 97, 70, 0.25);
}
.ob-error {
    color: #c62828;
    font-size: 0.95rem;
    margin-bottom: 0.9rem;
}
.ob-error a { color: #0b6146; font-weight: 500; }
/* Paso 3 con STEALTH_FREE: Google + ojo de contraseña + link a login. */
.ob-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem;
    background: white;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #3c4043;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.ob-google:hover { background-color: #f8f9fa; }
.ob-google:disabled { opacity: 0.6; cursor: default; }
.ob-google svg { width: 20px; height: 20px; flex-shrink: 0; }
.ob-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: #999;
    font-size: 0.85rem;
}
.ob-divider::before, .ob-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}
.ob-password { position: relative; }
.ob-password .ob-input { padding-right: 2.8rem; }
.ob-eye {
    position: absolute;
    right: 0.6rem;
    top: 0;
    height: calc(100% - 0.9rem);
    background: none;
    border: none;
    color: #777;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 0.3rem;
}
.ob-eye:hover { color: #0b6146; }
.ob-eye svg { width: 22px; height: 22px; }
.ob-eye.ob-eye--off { color: #0b6146; }
.ob-login {
    margin: 1.1rem 0 0;
    text-align: center;
    color: #666;
    font-size: 0.95rem;
}
.ob-login a { color: #0b6146; font-weight: 500; text-decoration: none; }
.ob-login a:hover { text-decoration: underline; }
@media (max-width: 576px) {
    .ob-overlay { padding: 1rem 0.75rem; }
    .ob-card { padding: 2rem 1.25rem 1.5rem; }
    .ob-title { font-size: 1.2rem; }
}