<style>

        /* =========================================================
           GENERAL
        ========================================================= */

        body {
            min-height: 100vh;
            background:
                linear-gradient(135deg, #f8fafc 0%, #eef4ff 100%);
            color: #1e293b;
        }


        /* =========================================================
           NAVBAR
        ========================================================= */

        .main-navbar {
            background: #111827;
            box-shadow: 0 2px 15px rgba(15, 23, 42, .10);
        }

        .navbar-content {
            min-height: 64px;
        }

        .back-button {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            border: 1px solid rgba(255,255,255,.25);
            border-radius: 10px;

            color: #fff;
            background: rgba(255,255,255,.06);

            transition: all .2s ease;
        }

        .back-button:hover {
            color: #fff;
            background: rgba(255,255,255,.14);
            transform: translateX(-2px);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 10px;

            color: #fff;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
        }

        .brand-icon {
            width: 38px;
            height: 38px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 10px;
            background: rgba(255,255,255,.10);
        }


        /* =========================================================
           CONTENEDOR
        ========================================================= */

        .form-container {
            max-width: 850px;
            margin: 45px auto;
        }


        /* =========================================================
           CARD
        ========================================================= */

        .main-card {
            border: 1px solid rgba(226,232,240,.9);
            border-radius: 20px;
            background: #fff;

            box-shadow:
                0 15px 40px rgba(15,23,42,.07);

            overflow: hidden;
        }

        .card-content {
            padding: 38px;
        }


        /* =========================================================
           ENCABEZADO
        ========================================================= */

        .form-header {
            text-align: center;
            margin-bottom: 35px;
        }

        .header-icon {
            width: 58px;
            height: 58px;

            margin: 0 auto 16px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 16px;

            background: #eff6ff;
            color: #2563eb;

            font-size: 24px;
        }

        .form-title {
            margin-bottom: 8px;

            color: #0f172a;

            font-size: 24px;
            font-weight: 700;
            line-height: 1.3;
        }

        .form-subtitle {
            max-width: 600px;
            margin: 0 auto;

            color: #64748b;

            font-size: 14px;
            line-height: 1.6;
        }


        /* =========================================================
           SECCIONES
        ========================================================= */

        .section-title {
            display: flex;
            align-items: center;
            gap: 9px;

            margin-bottom: 18px;

            color: #334155;
            font-size: 15px;
            font-weight: 600;
        }

        .section-title i {
            color: #2563eb;
        }


        /* =========================================================
           FORMULARIO
        ========================================================= */

        .form-label {
            margin-bottom: 7px;

            color: #334155;
            font-size: 14px;
            font-weight: 600;
        }

        .form-control,
        .form-select {
            min-height: 46px;

            padding: 10px 14px;

            border: 1px solid #dbe1ea;
            border-radius: 10px;

            color: #1e293b;
            background-color: #fff;

            transition:
                border-color .2s ease,
                box-shadow .2s ease,
                background-color .2s ease;
        }

        .form-control::placeholder {
            color: #94a3b8;
        }

        .form-control:hover,
        .form-select:hover {
            border-color: #cbd5e1;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #2563eb;

            box-shadow:
                0 0 0 3px rgba(37,99,235,.10);

            outline: none;
        }

        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }

        .form-text {
            margin-top: 6px;

            color: #64748b;
            font-size: 12px;
        }


        /* =========================================================
           SELECT DE CANTIDAD
        ========================================================= */

        .cantidad-wrapper {
            padding: 20px;

            border: 1px solid #dbeafe;
            border-radius: 14px;

            background: #f8fbff;
        }

        .cantidad-wrapper .form-select {
            background-color: #fff;
        }


        /* =========================================================
           INVITADOS
        ========================================================= */

        #contenedorInvitados {
            margin-top: 25px;
        }

        .invitado-card {
            position: relative;

            margin-bottom: 16px;
            padding: 22px;

            border: 1px solid #e2e8f0;
            border-radius: 14px;

            background: #fafcff;

            transition: all .2s ease;
        }

        .invitado-card:hover {
            border-color: #bfdbfe;

            box-shadow:
                0 5px 18px rgba(15,23,42,.05);
        }

        .invitado-header {
            display: flex;
            align-items: center;
            gap: 10px;

            margin-bottom: 20px;
        }

        .invitado-number {
            width: 32px;
            height: 32px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 9px;

            background: #eff6ff;
            color: #2563eb;

            font-size: 13px;
            font-weight: 700;
        }

        .invitado-title {
            margin: 0;

            color: #1e293b;
            font-size: 15px;
            font-weight: 600;
        }


        /* =========================================================
           INFORMACIÓN
        ========================================================= */

        .info-box {
            display: flex;
            gap: 12px;
            align-items: flex-start;

            margin-bottom: 28px;
            padding: 15px 17px;

            border: 1px solid #dbeafe;
            border-radius: 12px;

            background: #eff6ff;

            color: #475569;
            font-size: 13px;
            line-height: 1.5;
        }

        .info-box i {
            margin-top: 2px;
            color: #2563eb;
            font-size: 16px;
        }


        /* =========================================================
           BOTÓN
        ========================================================= */

        .submit-button {
            min-height: 50px;

            border: none;
            border-radius: 11px;

            background: #2563eb;
            color: #fff;

            font-size: 15px;
            font-weight: 600;

            box-shadow:
                0 5px 14px rgba(37,99,235,.18);

            transition: all .2s ease;
        }

        .submit-button:hover {
            background: #1d4ed8;

            transform: translateY(-1px);

            box-shadow:
                0 7px 18px rgba(37,99,235,.25);
        }

        .submit-button:active {
            transform: translateY(0);
        }


        /* =========================================================
           DIVISOR
        ========================================================= */

        .form-divider {
            height: 1px;
            margin: 30px 0;

            background: #e2e8f0;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 768px) {

            .form-container {
                margin: 25px 15px;
            }

            .card-content {
                padding: 28px 22px;
            }

            .form-title {
                font-size: 21px;
            }

            .form-header {
                margin-bottom: 28px;
            }

            .invitado-card {
                padding: 18px;
            }

        }


        @media (max-width: 576px) {

            .navbar-content {
                min-height: 58px;
            }

            .brand span {
                max-width: 210px;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .form-container {
                margin: 18px 10px;
            }

            .main-card {
                border-radius: 16px;
            }

            .card-content {
                padding: 24px 17px;
            }

            .header-icon {
                width: 52px;
                height: 52px;
            }

            .form-title {
                font-size: 19px;
            }

            .form-subtitle {
                font-size: 13px;
            }

            .cantidad-wrapper {
                padding: 16px;
            }

            .invitado-card {
                padding: 16px;
            }

            .info-box {
                padding: 13px;
            }

            .submit-button {
                min-height: 48px;
            }

        }

    </style>