.popup-content {

  background: #fff;

  padding: 40px 32px;

  border-radius: 12px;

  box-shadow: 0 4px 32px rgba(0,0,0,0.18);

  position: relative;

  min-width: 320px;

  max-width: 90vw;

  min-height: 100px;

}      

      

      

      

      .popup {

    display: none;

    position: fixed;

    z-index: 9999;

    left: 0;

    top: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    justify-content: center;

    align-items: center;

        }

        .custom-popup {

            background: #0070f3;

            padding: 0;

            border-radius: 24px;

            width: 95%; max-width: 420px;

            position: relative;

            box-shadow: 0 8px 32px rgba(0,0,0,0.18);

            overflow: hidden;

        }

        .close {

            position: absolute; right: 18px; top: 18px;

            font-size: 28px; color: #fff; cursor: pointer;

            z-index: 2;

        }

        .form-header {

            background: #a1c75f;

            padding: 32px 32px 16px 32px;

            text-align: center;

        }

        .form-header h1 {

            color: rgb(41, 39, 39);

            font-size: 1.6rem;

            margin-bottom: 8px;

        }

        .subtitle {

            color: rgb(41, 39, 39);

            font-size: 1rem;

            margin-bottom: 0;

        }

        .form-step {

            display: none;

            background: #d0e6ac;

            padding: 32px 32px 16px 32px;

            border-radius: 0 0 0px 0px;

        }

        .form-step.active { display: block; }

        .tab-group {

            display: flex;

            justify-content: center;

            gap: 12px;

            margin-bottom: 24px;

        }

        .tab-btn {

            background: #e0e7ef;

            color: #0070f3;

            border: none;

            border-radius: 8px 8px 0 0;

            padding: 10px 22px;

            font-size: 1rem;

            cursor: pointer;

            transition: background 0.2s, color 0.2s;

        }

        .tab-btn.active {

            background: #fff;

            color: #0070f3;

            font-weight: bold;

            box-shadow: 0 2px 8px rgba(0,0,0,0.06);

        }

        .white-box {

            background: #fff;

            border-radius: 12px;

            padding: 18px 16px;

            margin-bottom: 24px;

            box-shadow: 0 1px 4px rgba(0,0,0,0.04);

        }

        .fecha-label {

            font-weight: 500;

            color: #222;

            margin-bottom: 10px;

            display: block;

        }

        .radio-group {

            display: flex;

            flex-direction: column;

            gap: 10px;

            margin-top: 8px;

        }

        .radio-group label {

            font-size: 1rem;

            color: #333;

            cursor: pointer;

        }

        input[type="radio"] {

            accent-color: #0070f3;

            margin-right: 8px;

        }

        input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea {

            width: 100%;

            padding: 12px 14px;

            margin-bottom: 16px;

            border: 1px solid #cfd8dc;

            border-radius: 8px;

            font-size: 1rem;

            background: #fff;

            box-sizing: border-box;

        }

        textarea {

            resize: vertical;

            min-height: 80px;

        }

        .main-btn {

            margin-top: 12px;

            padding: 12px 0;

            width: 100%;

            border: none; border-radius: 8px;

            background: #00c48c; color: #fff;

            font-size: 1.1rem;

            font-weight: bold;

            cursor: pointer;

            transition: background 0.2s;

        }

        .main-btn:hover { background: #00a06c; }

        .prev-btn {

    margin-top: 12px;
    padding: 12px 0;
    width: 100%;
    border: none;
    border-radius: 8px;
    background: #ff1010;
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;

        }

        .form-footer {

            background: #f7faff;

            padding: 18px 32px 18px 32px;

            border-radius: 0 0 24px 24px;

            text-align: center;

        }

        .privacidad {

            color: #7a869a;

            font-size: 0.95rem;

            margin-top: 10px;

        }

        .privacidad a { color: #0070f3; text-decoration: underline; }

        .progress-bar {

            width: 100%;

            height: 7px;

            background: #e0e7ef;

            border-radius: 6px;

            margin-bottom: 8px;

            overflow: hidden;

        }

        .progress {

            height: 100%;

            background: linear-gradient(90deg, #00c48c 60%, #0070f3 100%);

            width: 0%;

            border-radius: 6px;

            transition: width 0.3s ease-in-out;

        }

        .privacidad-check {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            font-size: 0.9rem;

            color: #555;

            line-height: 1.4;

            margin-top: 12px;

        }

        .privacidad-check input[type="checkbox"] {

            margin: 0;

            margin-top: 2px;

            accent-color: #0070f3;

        }



.buttonform_tele {

    position: fixed;

    background: none;

    bottom: 32px;

    right: 32px;

    z-index: 10001;

    border-radius: 50%;

    border: none;

    box-shadow: 0 4px 16px rgba(0,0,0,0.18);

    padding: 0;

    width: 64px;

    height: 64px;

    cursor: pointer;

    transition: box-shadow 0.2s;

    display: none;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: translateY(80px) scale(0.8);

    animation: aparecer-globo 1s cubic-bezier(.22,1.61,.36,1) 0.2s forwards, flotar-globo 3.5s ease-in-out 1.2s infinite alternate;

}



@keyframes aparecer-globo {

    0% {

        opacity: 0;

        transform: translateY(80px) scale(0.8);

    }

    80% {

        opacity: 1;

        transform: translateY(-10px) scale(1.05);

    }

    100% {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@keyframes flotar-globo {

    0% {

        transform: translateY(0) scale(1);

        box-shadow: 0 4px 16px rgba(0,0,0,0.18);

    }

    50% {

        transform: translateY(-12px) scale(1.03) rotate(-2deg);

        box-shadow: 0 12px 32px rgba(0,0,0,0.12);

    }

    100% {

        transform: translateY(0) scale(1);

        box-shadow: 0 4px 16px rgba(0,0,0,0.18);

    }

}



.buttonform_tele:hover {

    box-shadow: 0 8px 32px rgba(0,0,0,0.28);





}



.buttonform_tele img {

    width: 60px;

    height: 60px;

    display: block;

    border-radius: 50%;

    pointer-events: none;

}

@media (max-height: 660px) {
    .custom-popup {
        overflow: auto;
        max-height: 99vh; /* Altura máxima cuando se activa el scroll */
    }
}

@media (max-width: 600px) {

    .tab-btn {
        padding: 0 4%;
    }
}