.vc-buttons {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

.vc-buttons.vc-buttons--2 > * {
    flex: 1 1 220px;
}

/* Botones principales: redondeado real de 50 px, bold y sin uppercase. */
.vc-buttons .vc-trigger,
.vc-buttons a.vc-trigger,
.vc-buttons button.vc-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 0 !important;
    border-radius: 50px !important;
    background-color: var(--vc-bg) !important;
    color: var(--vc-color) !important;
    font-family: inherit;
    font-size: var(--vc-size);
    font-weight: 700 !important;
    line-height: 1.25;
    text-decoration: none !important;
    text-align: center;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.vc-buttons .vc-trigger:hover {
    color: var(--vc-color) !important;
    filter: brightness(.96);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(34, 25, 21, .13);
}

.vc-trigger:focus-visible,
.vc-modal button:focus-visible {
    outline: 3px solid #2d6cdf;
    outline-offset: 3px;
}

.vc-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647 !important;
    display: grid;
    place-items: center;
    padding: 22px;
    box-sizing: border-box;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
}

.vc-modal[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.vc-modal .vc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(25, 20, 18, .63);
    backdrop-filter: blur(3px);
}

/* Fondo blanco del popup. */
.vc-modal .vc-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 44px));
    overflow: auto;
    box-sizing: border-box;
    background: #FFFFFF !important;
    color: #1A1A1A;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    padding: clamp(30px, 6vw, 62px);
    text-transform: none;
}

.vc-modal .vc-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3E4046;
    font: 300 34px/1 Arial, sans-serif;
    cursor: pointer;
}

.vc-modal .vc-close:hover {
    background: #F5F1EA;
}

/* “Reserva tu plaza”: sin mayúsculas forzadas ni separación. */
.vc-modal .vc-kicker {
    margin: 0 0 13px;
    color: #B96E73 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Título principal del popup. */
.vc-modal .vc-dialog h2 {
    margin: 0 50px 15px 0;
    color: #3E4046 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(29px, 5vw, 45px);
    font-weight: 400;
    line-height: 1.08;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vc-modal .vc-intro {
    color: #1A1A1A;
    font-size: 16px;
    line-height: 1.65;
    text-transform: none;
}

/* Las modalidades siempre quedan apiladas, una sobre otra. */
.vc-modal .vc-options {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 13px;
    width: 100%;
    margin-top: 30px;
}

/* Tarjetas beige, sin borde y con radio de 20 px. */
.vc-modal .vc-option,
.vc-modal button.vc-option {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 55px 20px 22px;
    border: 0 !important;
    border-radius: 20px !important;
    outline-offset: 3px;
    background: #F5F1EA !important;
    color: #1A1A1A !important;
    text-align: left;
    text-transform: none !important;
    cursor: pointer;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.vc-modal .vc-option:hover {
    border: 0 !important;
    background: #F5F1EA !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(74, 48, 38, .08);
}

/* Modalidad Presencial / Modalidad Online. */
.vc-modal .vc-option .vc-option-title {
    display: block !important;
    width: 100%;
    margin: 0 0 6px;
    color: #B96E73 !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 1.35;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Texto debajo del título de modalidad. */
.vc-modal .vc-option .vc-option-summary {
    display: block !important;
    width: 100%;
    color: #1A1A1A !important;
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 18px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.5;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Negrita opcional escrita con <strong> o <b> en el administrador. */
.vc-modal .vc-option .vc-option-summary strong,
.vc-modal .vc-option .vc-option-summary b {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700 !important;
}

.vc-modal .vc-option i {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    color: #ADA89E !important;
    font-size: 24px;
    font-style: normal;
}

.vc-modal .vc-back {
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #B96E73;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.vc-modal .vc-detail-copy {
    margin-top: 25px;
    color: #1A1A1A;
    font-size: 17px;
    line-height: 1.75;
}

.vc-modal .vc-detail-copy p {
    margin: 0 0 1em;
}

.vc-modal .vc-dialog {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .vc-buttons,
    .vc-buttons.vc-buttons--2 {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vc-modal {
        padding: 12px;
    }

    .vc-modal .vc-dialog {
        max-height: calc(100vh - 24px);
        padding: 42px 23px 30px;
        border-radius: 13px;
    }

    .vc-modal .vc-dialog h2 {
        margin-right: 25px;
    }

    .vc-modal .vc-option {
        padding: 17px 48px 17px 17px;
    }
}