/* ── Villas de Granada · Landing de registro (paleta dorado + carbón) ──────── */
:root {
    --vg-carbon: #171717;
    --vg-carbon2: #2B2B2B;
    --vg-ambar: #E8A20C;
    --vg-oro:   #F6B717;
    --vg-amar:  #FFD23F;
    --vg-grad: linear-gradient(120deg, #FFD23F 0%, #F6B717 40%, #E8A20C 100%);

    --bs-primary: var(--vg-carbon2);
    --bs-primary-rgb: 43, 43, 43;
}

body { color: var(--vg-carbon); background: #fff; }

a { color: var(--vg-carbon2); }
a:hover { color: var(--vg-carbon); }

.btn-primary {
    --bs-btn-bg: var(--vg-carbon2); --bs-btn-border-color: var(--vg-carbon2);
    --bs-btn-hover-bg: var(--vg-carbon); --bs-btn-hover-border-color: var(--vg-carbon);
    --bs-btn-active-bg: var(--vg-carbon); --bs-btn-active-border-color: var(--vg-carbon);
    --bs-btn-disabled-bg: var(--vg-carbon2); --bs-btn-disabled-border-color: var(--vg-carbon2);
}
.btn-outline-primary {
    --bs-btn-color: var(--vg-carbon2); --bs-btn-border-color: var(--vg-carbon2);
    --bs-btn-hover-bg: var(--vg-carbon2); --bs-btn-hover-border-color: var(--vg-carbon2);
}
.btn-warning {
    --bs-btn-bg: var(--vg-oro); --bs-btn-border-color: var(--vg-oro); --bs-btn-color: #241c00;
    --bs-btn-hover-bg: var(--vg-ambar); --bs-btn-hover-border-color: var(--vg-ambar); --bs-btn-hover-color: #241c00;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.reg-navbar { background: var(--vg-carbon); }
.reg-logo { height: 36px; filter: brightness(0) invert(1); }
.reg-navbar .btn-outline-light { --bs-btn-border-color: rgba(255,255,255,.4); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.reg-hero {
    background:
        radial-gradient(1200px 400px at 50% -120px, rgba(246,183,23,.20), transparent),
        #fff;
    border-bottom: 4px solid transparent;
    border-image: var(--vg-grad) 1;
}
.reg-accent {
    background: var(--vg-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.reg-badge {
    background: var(--vg-carbon); color: var(--vg-amar);
    font-weight: 600; letter-spacing: .04em; padding: .5em 1em; border-radius: 2rem;
}

/* ── Planes ─────────────────────────────────────────────────────────────── */
.reg-plan {
    position: relative;
    border: 1px solid var(--bs-border-color); border-radius: 1rem;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.reg-plan:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.10); }

/* Estado seleccionado */
.reg-plan-selected {
    border: 2px solid var(--vg-ambar);
    box-shadow: 0 12px 30px rgba(232,162,12,.28);
}
.reg-plan-check {
    position: absolute; top: .6rem; right: .6rem;
    color: var(--vg-ambar); font-size: 1.4rem; line-height: 1;
    opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.reg-plan-selected .reg-plan-check { opacity: 1; transform: scale(1); }
.reg-plan-selected .reg-cta { background: var(--vg-ambar); border-color: var(--vg-ambar); color: #241c00; }

/* Indicador de plan en el formulario */
.reg-plan-sel {
    display: flex; align-items: center; gap: .75rem;
    background: var(--bs-body-bg); border: 1px solid var(--vg-oro);
    border-left: 4px solid var(--vg-oro);
    border-radius: .75rem; padding: .75rem 1rem;
}
.reg-plan-destacado {
    border: 2px solid var(--vg-oro); box-shadow: 0 12px 30px rgba(246,183,23,.20);
    position: relative;
}
.reg-plan-tag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--vg-grad); color: #241c00; font-weight: 700; font-size: .75rem;
    padding: .25em 1em; border-radius: 2rem;
}
.reg-precio { color: var(--vg-carbon); }
.reg-beneficios li { padding: .28rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.reg-beneficios li:last-child { border-bottom: 0; }
.reg-beneficios .bi-check-lg { color: var(--vg-ambar); font-weight: 700; }

/* ── Formulario ─────────────────────────────────────────────────────────── */
.reg-form-section { background: var(--bs-secondary-bg); }
.reg-form-section .card { border-radius: 1rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--vg-oro); box-shadow: 0 0 0 .2rem rgba(246,183,23,.25);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.reg-footer { background: var(--vg-carbon); color: #cfcfcf; }
.reg-logo-footer { height: 34px; filter: brightness(0) invert(1); }
.reg-footer a { color: #e9e9e9; }

/* Aviso por WhatsApp en la pantalla de éxito */
.reg-aviso {
    background: rgba(37,211,102,.08);
    border: 1px solid rgba(37,211,102,.35);
    border-radius: 1rem; padding: 1.25rem;
}

html { scroll-behavior: smooth; }

/* ── Botón flotante de Ayuda (WhatsApp de soporte) ──────────────────────── */
.reg-ayuda {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.15rem;
    background: #25D366;
    color: #fff;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.reg-ayuda:hover, .reg-ayuda:focus {
    color: #fff;
    background: #1EBE57;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.reg-ayuda i { font-size: 1.35rem; line-height: 1; }
@media (max-width: 575.98px) {
    .reg-ayuda { right: 16px; bottom: 16px; padding: .65rem 1rem; }
}