:root {

            --primary: #a4104b;
            --primary-light: #f53f98;
            --primary-dark: #7f0d3a;

            --text: #1f2937;
            --text-soft: #5b6472;

            --bg: #f4f6f9;
            --card: #ffffff;

            --border: #dbe2ea;

            --shadow:
                0 10px 30px rgba(0, 0, 0, .06);

            --transition:
                all .25s ease;
        }

        * {

            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {

            scroll-behavior: smooth;
        }

        body {

            font-family: 'Poppins', sans-serif;

            background:
                linear-gradient(rgba(255, 255, 255, .94),
                    rgba(255, 255, 255, .94)),
                url('img/background.svg');

            background-size: cover;

            background-attachment: fixed;

            color: var(--text);

            min-height: 100vh;

            overflow-x: hidden;
        }

        /* DARK MODE */

        body.dark-mode {

            --bg: #0f172a;

            --card: #162033;

            --text: #f8fafc;

            --text-soft: #cbd5e1;

            --border: rgba(255, 255, 255, .10);

            background:
                linear-gradient(rgba(5, 8, 15, .95),
                    rgba(5, 8, 15, .95)),
                url('img/background.svg');
        }

        /* THEME BUTTON */

        .theme-toggle {

            position: fixed;

            top: 1.2rem;
            right: 1.2rem;

            width: 58px;
            height: 58px;

            border: none;

            border-radius: 18px;

            background: white;

            font-size: 1.1rem;

            cursor: pointer;

            z-index: 9999;

            box-shadow:
                0 10px 25px rgba(0, 0, 0, .10);

            transition: var(--transition);
        }

        body.dark-mode .theme-toggle {

            background: #1e293b;

            color: white;
        }

        .theme-toggle:hover {

            transform:
                translateY(-2px);
        }

        /* HERO */

        .survey-hero {

            padding:
                5rem 1.2rem 3rem;
        }

        .survey-hero-content {

            max-width: 980px;

            margin: auto;

            text-align: center;
        }

        .survey-logo {

            width:
                clamp(150px, 20vw, 220px);

            margin-bottom: 2rem;
        }

        body.dark-mode .survey-logo {

            content:
                url("img/200 AÑOS (BLANCO).png");
        }

        .survey-title {

            font-size:
                clamp(2rem, 5vw, 3.2rem);

            line-height: 1.2;

            letter-spacing: -.03em;

            text-wrap: balance;

            font-weight: 800;

            color: var(--primary);

            max-width: 900px;

            margin:
                0 auto 1.8rem;
        }

        body.dark-mode .survey-title {

            color: white;
        }

        .survey-description {

            max-width: 900px;

            margin: auto;

            text-align: justify;

            text-justify: inter-word;

            font-size: 1.03rem;

            line-height: 2.05;

            letter-spacing: .01em;

            color: var(--text-soft);

            padding:
                0 .5rem;
        }

        body.dark-mode .survey-description {

            color:
                rgba(255, 255, 255, .82);
        }

        /* WRAPPER */

        .survey-wrapper {

            width: 100%;

            max-width: 1200px;

            margin: auto;

            padding:
                0 1rem 5rem;
        }

        .survey-form {

            background: var(--card);

            border:
                1px solid var(--border);

            border-radius: 30px;

            padding:
                clamp(1.5rem, 3vw, 3rem);

            box-shadow: var(--shadow);

            overflow: hidden;
        }

        /* SECTIONS */

        .survey-section {

            margin-bottom: 3rem;

            padding:
                .5rem 0 3rem;

            border-bottom:
                1px solid var(--border);
        }

        .survey-section:last-child {

            border-bottom: none;

            margin-bottom: 0;
        }

        .survey-section-title {

            display: flex;

            align-items: flex-start;

            gap: 1rem;

            margin-bottom: 2rem;
        }

        .survey-number {

            width: 50px;
            height: 50px;

            min-width: 50px;

            border-radius: 14px;

            background:
                linear-gradient(to right,
                    var(--primary),
                    var(--primary-light));

            color: white;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 700;

            box-shadow:
                0 8px 18px rgba(164, 16, 75, .15);
        }

        .survey-section-title h2 {

            flex: 1;

            font-size:
                clamp(1.1rem, 2vw, 1.45rem);

            line-height: 1.7;

            letter-spacing: -.01em;

            text-wrap: pretty;

            font-weight: 700;

            text-align: left;
        }

        /* OPTIONS */

        .options-grid,
        .priority-grid {

            display: grid;

            grid-template-columns:
                repeat(auto-fit,
                    minmax(280px, 1fr));

            gap: 1rem;
        }

        .option-card,
        .priority-card {

            position: relative;

            display: block;

            cursor: pointer;
        }

        .option-card input,
        .priority-card input {

            position: absolute;

            opacity: 0;
        }

        .option-content,
        .priority-content {

            display: flex;

            align-items: center;

            justify-content: flex-start;

            gap: 1rem;

            min-height: 92px;

            padding:
                1.2rem 1.35rem;

            border-radius: 20px;

            background: white;

            border:
                2px solid var(--border);

            transition: var(--transition);

            box-shadow:
                0 3px 10px rgba(0, 0, 0, .03);

            text-align: left;
        }

        body.dark-mode .option-content,
        body.dark-mode .priority-content {

            background: #162033;
        }

        /* RADIO */

        .option-content::before,
        .priority-content::before {

            content: "";

            width: 22px;
            height: 22px;

            min-width: 22px;

            border-radius: 50%;

            border:
                2px solid #b8c1cf;

            transition: var(--transition);
        }

        body.dark-mode .option-content::before,
        body.dark-mode .priority-content::before {

            border-color:
                rgba(255, 255, 255, .45);
        }

        /* CHECKED */

        .option-card input:checked+.option-content,
        .priority-card input:checked+.priority-content {

            border-color:
                var(--primary);

            background:
                rgba(164, 16, 75, .05);

            box-shadow:
                0 10px 24px rgba(164, 16, 75, .08);
        }

        body.dark-mode .option-card input:checked+.option-content,
        body.dark-mode .priority-card input:checked+.priority-content {

            background:
                rgba(245, 63, 152, .12);
        }

        .option-card input:checked+.option-content::before,
        .priority-card input:checked+.priority-content::before {

            background:
                var(--primary);

            border-color:
                var(--primary);

            box-shadow:
                inset 0 0 0 5px white;
        }

        /* HOVER */

        .option-card:hover .option-content,
        .priority-card:hover .priority-content {

            border-color:
                var(--primary-light);

            transform:
                translateY(-2px);
        }

        /* TEXT */

        .option-content span,
        .priority-content h3 {

            width: 100%;

            text-align: left;

            font-size: .98rem;

            line-height: 1.75;

            letter-spacing: .01em;

            font-weight: 600;

            color: var(--text);

            word-break: break-word;
        }

        body.dark-mode .option-content span,
        body.dark-mode .priority-content h3 {

            color: white;
        }

        /* SELECT */

        .survey-select {

            width: 100%;

            height: 66px;

            border-radius: 20px;

            border:
                2px solid var(--border);

            background: white;

            padding: 0 1rem;

            font-family: 'Poppins', sans-serif;

            font-size: 1rem;

            font-weight: 500;

            color: var(--text);

            transition: var(--transition);
        }

        body.dark-mode .survey-select {

            background: #162033;

            color: white;
        }

        /* TEXTAREA */

        .survey-textarea {

            width: 100%;

            min-height: 180px;

            border-radius: 20px;

            border:
                2px solid var(--border);

            background: white;

            padding: 1.3rem;

            font-family: 'Poppins', sans-serif;

            font-size: 1rem;

            line-height: 1.95;

            letter-spacing: .01em;

            text-align: justify;

            text-justify: inter-word;

            resize: vertical;

            transition: var(--transition);
        }

        body.dark-mode .survey-textarea {

            background: #162033;

            color: white;
        }

        body.dark-mode .survey-textarea::placeholder {

            color: #ffffff;

            opacity: .60;
        }

        .survey-textarea::placeholder {

            color: #111827;

            opacity: .65;
        }

        .survey-select:focus,
        .survey-textarea:focus {

            outline: none;

            border-color:
                var(--primary);

            box-shadow:
                0 0 0 4px rgba(164, 16, 75, .12);
        }

        /* BUTTON */

        .submit-wrapper {

            display: flex;

            justify-content: center;

            margin-top: 3rem;
        }

        .submit-btn {

            border: none;

            padding:
                1.15rem 3.2rem;

            border-radius: 18px;

            background:
                linear-gradient(to right,
                    var(--primary),
                    var(--primary-light));

            color: white;

            font-family: 'Poppins', sans-serif;

            font-size: 1rem;

            font-weight: 700;

            letter-spacing: .02em;

            cursor: pointer;

            transition: var(--transition);

            box-shadow:
                0 10px 25px rgba(164, 16, 75, .18);
        }

        .submit-btn:hover {

            transform:
                translateY(-3px);

            box-shadow:
                0 15px 35px rgba(164, 16, 75, .24);
        }

        /* RESPONSIVE */

        @media(max-width:768px) {

            .survey-description {

                text-align: left;

                font-size: .98rem;

                line-height: 1.9;

                padding: 0;
            }

            .options-grid,
            .priority-grid {

                grid-template-columns: 1fr;
            }

            .survey-form {

                border-radius: 24px;
            }

            .submit-btn {

                width: 100%;
            }

            .survey-section {

                margin-bottom: 2.5rem;

                padding-bottom: 2.5rem;
            }

            .survey-section-title h2 {

                font-size: 1.05rem;

                line-height: 1.65;
            }

            .option-content,
            .priority-content {

                min-height: auto;

                padding: 1.15rem;
            }

            .option-content span,
            .priority-content h3 {

                font-size: .96rem;

                line-height: 1.65;
            }
        }

        /* ========================================= */
        /* TOASTIFY */
        /* ========================================= */

        .toastify {

            border-radius: 18px !important;

            font-family:
                'Poppins',
                sans-serif !important;

            font-weight: 600 !important;

            letter-spacing: .01em;

            padding:
                16px 18px !important;

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border:
                1px solid rgba(255, 255, 255, .12);

            box-shadow:
                0 12px 30px rgba(0, 0, 0, .12) !important;
        }

        body.dark-mode .toastify {

            border:
                1px solid rgba(255, 255, 255, .08);

            box-shadow:
                0 14px 35px rgba(0, 0, 0, .45) !important;
        }

        .toast-close {

            opacity: .9 !important;
        }

        /* ========================================= */
/* OTRA COLONIA */
/* ========================================= */

.otra-colonia-wrapper {

    margin-top: 1.2rem;

    animation:
        fadeIn .25s ease;
}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform:
            translateY(-6px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}