/* ==========================================================================
   Registro de negocio — capa visual del modal por pasos
   Solo presentación e interacción. No cambia nombres de campos ni el envío.
   Se carga después de home.css, así que refina lo que ya existe.
   ========================================================================== */

.business-register-modal {
    --reg-primary: var(--primary, #3255d7);
    --reg-primary-dark: var(--primary-dark, #23409f);
    --reg-ink: var(--ink, #15223a);
    --reg-muted: var(--muted, #64748b);
    --reg-line: rgba(50, 85, 215, 0.14);
    --reg-ok: #16a34a;
}

.business-register-modal .modal-content {
    border-radius: 28px;
    box-shadow: 0 40px 90px rgba(11, 23, 48, 0.28);
}

.business-register-modal .register-modal-panel {
    background: linear-gradient(180deg, #f9fbff 0%, #f4f7fd 100%);
}

/* ---------- Cabecera ---------------------------------------------------- */

.business-register-modal .modal-header {
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    background: #fff;
    border-bottom: 1px solid var(--reg-line);
}

.business-register-modal .modal-title {
    margin-top: 0.35rem;
    font-size: 1.45rem;
    letter-spacing: -0.015em;
}

.register-modal-sub {
    margin: 0.3rem 0 0;
    color: var(--reg-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

/* ---------- Riel de pasos (panel lateral) ------------------------------- */

.reg-rail {
    position: relative;
    display: grid;
    gap: 0.15rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.reg-rail-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 14px;
    opacity: 0.62;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.reg-rail-item::before {
    content: "";
    position: absolute;
    top: 2.55rem;
    left: 1.62rem;
    width: 2px;
    height: calc(100% - 2.1rem);
    background: rgba(255, 255, 255, 0.22);
}

.reg-rail-item:last-child::before { display: none; }

.reg-rail-item.is-active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(2px);
}

.reg-rail-item.is-done { opacity: 0.92; }

.reg-rail-dot {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.82rem;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.reg-rail-item.is-active .reg-rail-dot {
    background: #fff;
    color: var(--reg-primary);
    border-color: #fff;
    transform: scale(1.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.reg-rail-item.is-done .reg-rail-dot {
    background: var(--reg-ok);
    border-color: var(--reg-ok);
    color: #fff;
}

.reg-rail-text { display: grid; min-width: 0; }
.reg-rail-text strong { font-size: 0.9rem; font-weight: 850; line-height: 1.2; }
.reg-rail-text small { color: rgba(255, 255, 255, 0.78); font-size: 0.74rem; line-height: 1.3; }

.reg-rail-foot {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.reg-rail-foot p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    line-height: 1.35;
}

.reg-rail-ring {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#fff calc(var(--reg-progress, 0) * 1%), rgba(255, 255, 255, 0.22) 0);
    transition: background 0.45s ease;
}

.reg-rail-ring::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(11, 23, 48, 0.72);
}

.reg-rail-ring span {
    position: relative;
    z-index: 1;
    font-size: 0.76rem;
    font-weight: 900;
}

/* ---------- Barra de avance + pestañas ---------------------------------- */

.reg-progress {
    position: relative;
    height: 4px;
    flex: 0 0 auto;
    overflow: hidden;
    background: rgba(50, 85, 215, 0.12);
}

.reg-progress > span {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, var(--reg-primary), #16a34a);
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.reg-tabs {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.75rem 1.5rem;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid var(--reg-line);
    scrollbar-width: none;
}

.reg-tabs::-webkit-scrollbar { display: none; }

.reg-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    color: var(--reg-muted);
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-size: 0.83rem;
    font-weight: 800;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.reg-tab span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.16);
    font-size: 0.7rem;
    font-weight: 900;
}

.reg-tab:hover { color: var(--reg-primary-dark); background: rgba(50, 85, 215, 0.06); }

.reg-tab.is-active {
    color: var(--reg-primary-dark);
    border-color: rgba(50, 85, 215, 0.24);
    background: rgba(50, 85, 215, 0.09);
}

.reg-tab.is-active span { background: var(--reg-primary); color: #fff; }

.reg-tab.is-done span {
    background: var(--reg-ok);
    color: #fff;
    font-size: 0;
}

.reg-tab.is-done span::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.6rem;
}

/* ---------- Pasos ------------------------------------------------------- */

.reg-step { display: none; }

.reg-step.is-active {
    display: block;
    animation: regStepFade 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes regStepFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .reg-step.is-active { animation: none; }
}

.business-register-modal .register-form-section {
    padding: 1.15rem 1.25rem 1.25rem;
    border-color: var(--reg-line);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 32, 76, 0.05);
}

.business-register-modal .register-section-title {
    padding-bottom: 0.85rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed var(--reg-line);
}

.business-register-modal .register-section-title > i {
    color: #fff;
    background: linear-gradient(135deg, var(--reg-primary), #5468ea);
    box-shadow: 0 10px 20px rgba(50, 85, 215, 0.24);
}

/* ---------- Campos ------------------------------------------------------ */

.business-register-modal .register-input .form-control,
.business-register-modal .register-input .form-select {
    background: #fbfcff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.business-register-modal .register-input .form-control:hover,
.business-register-modal .register-input .form-select:hover {
    border-color: rgba(50, 85, 215, 0.45);
}

.business-register-modal .register-input .form-control:focus,
.business-register-modal .register-input .form-select:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(50, 85, 215, 0.12);
}

.business-register-modal .register-location-area [hidden] {
    display: none !important;
}

.business-register-modal .register-location-area .form-control,
.business-register-modal .register-location-area .form-select {
    padding-left: 2.65rem;
}

.business-register-modal .register-input:focus-within > i {
    color: var(--reg-primary-dark);
    transform: translateY(-50%) scale(1.08);
}

.business-register-modal .register-input > i { transition: transform 0.18s ease, color 0.18s ease; }
.business-register-modal .register-input-textarea:focus-within > i { transform: scale(1.08); }

.register-input.is-complete .form-control,
.register-input.is-complete .form-select {
    border-color: rgba(22, 163, 74, 0.42);
    background: rgba(22, 163, 74, 0.04);
}

.register-input.is-complete::after {
    content: "\f00c";
    position: absolute;
    top: 50%;
    right: 0.9rem;
    z-index: 2;
    color: var(--reg-ok);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    transform: translateY(-50%);
    animation: regTick 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
    pointer-events: none;
}

.register-input.register-password-input.is-complete::after,
.register-input.is-complete:has(.form-select)::after { content: none; }

.register-input.register-input-textarea.is-complete::after { top: 1.15rem; transform: none; }

@keyframes regTick {
    from { opacity: 0; transform: translateY(-50%) scale(0.5); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

.reg-counter {
    display: block;
    margin-top: 0.3rem;
    color: var(--reg-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: right;
}

.reg-chip-count {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    margin-left: 0.35rem;
    color: var(--reg-primary-dark);
    border-radius: 999px;
    background: rgba(50, 85, 215, 0.1);
    font-size: 0.72rem;
    font-weight: 800;
    vertical-align: middle;
}

.reg-chip-count.is-empty { color: var(--reg-muted); background: rgba(100, 116, 139, 0.12); }

/* ---------- Tarjetas de servicio ---------------------------------------- */

.reg-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem;
    margin-top: 0.15rem;
}

.reg-service-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 2.6rem 0.95rem 0.95rem;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid rgba(50, 85, 215, 0.16);
    border-radius: 18px;
    background: #fff;
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

/* Un resplandor que crece desde la esquina al activarse. */
.reg-service-card::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(50, 85, 215, 0.16), rgba(50, 85, 215, 0));
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.reg-service-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.reg-service-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--reg-primary);
    border-radius: 15px;
    background: rgba(50, 85, 215, 0.09);
    font-size: 1.05rem;
    transition: color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.reg-service-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.reg-service-text strong {
    color: var(--reg-ink);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.2;
}

.reg-service-text small {
    color: var(--reg-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Marca de selección: círculo vacío que se convierte en palomita. */
.reg-service-mark {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: transparent;
    border: 2px solid rgba(100, 116, 139, 0.32);
    border-radius: 50%;
    background: transparent;
    font-size: 0.65rem;
    transform: translateY(-50%);
    transition: color 0.2s ease, border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.reg-service-card:hover {
    border-color: rgba(50, 85, 215, 0.42);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 32, 76, 0.09);
}

.reg-service-card:hover .reg-service-icon { transform: scale(1.05); }
.reg-service-card:hover .reg-service-mark { border-color: rgba(50, 85, 215, 0.5); }

.reg-service-card:has(input:focus-visible) {
    outline: 3px solid rgba(50, 85, 215, 0.35);
    outline-offset: 2px;
}

/* ---- Estado activo ---- */

.reg-service-card:has(input:checked) {
    border-color: var(--reg-primary);
    background: linear-gradient(135deg, rgba(50, 85, 215, 0.09), rgba(84, 104, 234, 0.04));
    box-shadow: 0 16px 32px rgba(50, 85, 215, 0.16);
}

.reg-service-card:has(input:checked)::before {
    opacity: 1;
    transform: scale(1);
}

.reg-service-card:has(input:checked) .reg-service-icon {
    color: #fff;
    background: linear-gradient(135deg, var(--reg-primary), #5468ea);
    box-shadow: 0 10px 20px rgba(50, 85, 215, 0.32);
}

.reg-service-card:has(input:checked) .reg-service-text strong { color: var(--reg-primary-dark); }

.reg-service-card:has(input:checked) .reg-service-mark {
    color: #fff;
    border-color: var(--reg-primary);
    background: var(--reg-primary);
    transform: translateY(-50%) scale(1.06);
}

.reg-service-card:active { transform: translateY(0) scale(0.99); }

/* Pulso corto al cambiar de estado, lo dispara el JS. */
.reg-service-card.is-toggling .reg-service-icon { animation: regServicePop 0.34s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes regServicePop {
    0% { transform: scale(1); }
    45% { transform: scale(1.16) rotate(-6deg); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .reg-service-card,
    .reg-service-card::before,
    .reg-service-icon,
    .reg-service-mark { transition: none; }

    .reg-service-card.is-toggling .reg-service-icon { animation: none; }
}

/* ---------- Zona de fotos ----------------------------------------------- */

.reg-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 2.2rem 1.25rem;
    margin-top: 0.85rem;
    color: var(--reg-primary-dark);
    text-align: center;
    cursor: pointer;
    border: 2px dashed rgba(50, 85, 215, 0.32);
    border-radius: 18px;
    background: rgba(50, 85, 215, 0.03);
    font-weight: 800;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.reg-dropzone > i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    color: #fff;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--reg-primary), #5468ea);
    font-size: 1.15rem;
    box-shadow: 0 12px 26px rgba(50, 85, 215, 0.26);
}

.reg-dropzone:hover {
    border-color: var(--reg-primary);
    background: rgba(50, 85, 215, 0.07);
}

.reg-dropzone.is-dragover {
    border-color: var(--reg-ok);
    background: rgba(22, 163, 74, 0.08);
    transform: scale(1.01);
}

.business-register-modal .business-gallery-preview figure {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    animation: regPhotoIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes regPhotoIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.reg-photo-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 23, 48, 0.68);
    font-size: 0.7rem;
    transition: background 0.18s ease, transform 0.18s ease;
}

.reg-photo-remove:hover { background: #dc2626; transform: scale(1.08); }

/* ---------- Fuerza de contraseña ---------------------------------------- */

.reg-strength {
    padding: 0.9rem 1rem;
    border: 1px solid var(--reg-line);
    border-radius: 16px;
    background: #fbfcff;
}

.reg-strength-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.16);
}

.reg-strength-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #dc2626;
    transition: width 0.35s ease, background 0.35s ease;
}

.reg-strength-label {
    margin-top: 0.5rem;
    color: var(--reg-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.reg-strength-label strong { color: var(--reg-ink); }

.reg-strength-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.reg-strength-rules li {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--reg-muted);
    font-size: 0.76rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.reg-strength-rules li.is-ok { color: var(--reg-ok); }
.reg-strength-rules li.is-ok i { color: var(--reg-ok); }

.reg-match {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.76rem;
    font-weight: 800;
}

.reg-match.is-ok { color: var(--reg-ok); }
.reg-match.is-off { color: #b42318; }

/* ---------- Políticas --------------------------------------------------- */

.business-register-modal .policy-box {
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(50, 85, 215, 0.07), rgba(22, 163, 74, 0.05));
}

.business-register-modal .policy-box .form-check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.business-register-modal .policy-box .form-check:has(input:checked) {
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.07);
}

.business-register-modal .policy-box .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    margin: 0.15rem 0 0;
    cursor: pointer;
}

/* ---------- Pie de página ----------------------------------------------- */

.business-register-modal .reg-footer {
    gap: 0.55rem;
    background: #fff;
    border-top: 1px solid var(--reg-line);
}

.reg-footer-spacer { flex: 1 1 auto; }

.reg-nav-next,
.business-register-modal [data-reg-submit] {
    min-width: 168px;
    justify-content: center;
}

.reg-step-shake { animation: regShake 0.34s ease; }

@keyframes regShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ---------- Responsivo -------------------------------------------------- */

@media (max-width: 991.98px) {
    .reg-rail,
    .reg-rail-foot { display: none; }

    .reg-tabs { padding: 0.6rem 1rem; }
    .reg-tab { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
    .business-register-modal .modal-title { font-size: 1.25rem; }
    .reg-footer-spacer { display: none; }

    .business-register-modal .reg-footer {
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .business-register-modal .reg-footer .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- Legibilidad del panel lateral ------------------------------- */

.business-register-modal .register-modal-visual-overlay {
    background:
        linear-gradient(180deg, rgba(11, 23, 48, 0.62) 0%, rgba(11, 23, 48, 0.42) 38%, rgba(11, 23, 48, 0.94) 100%),
        linear-gradient(90deg, rgba(11, 23, 48, 0.5), rgba(11, 23, 48, 0));
}

.business-register-modal .register-modal-visual-content {
    padding: 1.5rem 1.4rem 1.6rem;
    text-shadow: 0 1px 12px rgba(11, 23, 48, 0.55);
}

.business-register-modal .register-modal-visual-content strong {
    margin-top: 1rem;
    font-size: 1.22rem;
}

/* ---------- Plan elegido dentro del registro ---------------------------- */

.reg-plan-summary {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border: 1.5px solid rgba(50, 85, 215, 0.18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(50, 85, 215, 0.07), rgba(84, 104, 234, 0.03)), #fff;
}

.reg-plan-summary.is-paid {
    border-color: rgba(50, 85, 215, 0.34);
    box-shadow: 0 14px 30px rgba(50, 85, 215, 0.12);
}

.reg-plan-head {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}

.reg-plan-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--reg-primary), #5468ea);
    font-size: 1.05rem;
    box-shadow: 0 10px 20px rgba(50, 85, 215, 0.26);
}

.reg-plan-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.reg-plan-eyebrow {
    color: var(--reg-primary-dark);
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.reg-plan-copy strong {
    color: var(--reg-ink);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.2;
}

.reg-plan-copy small {
    color: var(--reg-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.reg-plan-price {
    display: grid;
    flex: 0 0 auto;
    text-align: right;
}

.reg-plan-price strong {
    color: var(--reg-ink);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.1;
}

.reg-plan-price small {
    color: var(--reg-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Aviso de cobro manual: solo aparece en planes de paga fuera de inauguración. */
.reg-plan-note {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    margin: 0.85rem 0 0;
    color: #78350f;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.1);
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.5;
}

.reg-plan-note i {
    margin-top: 0.15rem;
    color: #b45309;
}

.reg-plan-change {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin-top: 0.7rem;
    color: var(--reg-primary-dark);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.reg-plan-change:hover { color: var(--reg-primary); }

@media (max-width: 575.98px) {
    .reg-plan-head {
        flex-wrap: wrap;
        gap: 0.6rem;
    }

    .reg-plan-price {
        width: 100%;
        text-align: left;
    }
}

/* ==========================================================================
   Modal de registro en pantallas pequeñas — qué se queda fijo
   --------------------------------------------------------------------------
   Antes el desplazamiento vivía en .modal-body, así que TODO lo de arriba
   quedaba clavado: la foto de portada (140px) y la cabecera (186px). Entre
   eso y el pie, de 742px de modal solo 224 servían para escribir.

   Ahora el que se desplaza es .modal-content entero:

     · la portada se va con el scroll, porque es decorativa;
     · la cabecera, la barra de avance y las pestañas quedan fijas arriba,
       que es lo que hace falta para saber en qué paso vas;
     · el pie queda fijo abajo, para no perder "Continuar" de vista.

   Las pestañas van dentro del <form> y la cabecera fuera, así que no pueden
   compartir un contenedor fijo sin mover el marcado (y el asistente busca las
   pestañas dentro del formulario). En su lugar cada una se fija por separado
   y se apilan con --reg-head-h, que business-register.js mantiene al día con
   la altura real de la cabecera.
   ========================================================================== */

@media (max-width: 991.98px) {
    /* La animación de entrada del panel aplica un transform, y un ancestro
       transformado anula el `position: sticky` de sus descendientes: la
       cabecera y las pestañas se despegaban al bajar. Aquí pesa más que la
       cabecera aguante que el efecto de entrada. */
    .business-register-modal .register-step-panel {
        animation: none;
    }

    /* Bootstrap pone overflow:hidden aquí por .modal-dialog-scrollable. */
    .business-register-modal .modal-content {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Deja de ser una franja de altura fija para pasar a ser contenido que
       se desplaza como cualquier otro. */
    .business-register-modal .register-modal-visual {
        flex: 0 0 auto;
        height: 132px;
    }

    /* El panel y el formulario dejan de encogerse para caber: ahora miden lo
       que mide su contenido y el que recorta es .modal-content.

       Es lo que hace posible lo de arriba: `sticky` nunca puede salirse de su
       contenedor, así que mientras el panel valía 610px la cabecera se
       despegaba en cuanto se pasaba de ahí. */
    .business-register-modal .register-modal-panel,
    .business-register-modal form {
        flex: 0 0 auto;
        overflow: visible;
    }

    /* Cabecera más compacta: ahora está siempre a la vista, así que cada
       píxel que ocupa se lo quita al formulario. */
    .business-register-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 4;
        padding-top: 0.85rem;
        padding-bottom: 0.7rem;
    }

    .business-register-modal .modal-title {
        margin-top: 0.25rem;
        font-size: 1.1rem;
        line-height: 1.25;
    }

    .business-register-modal .register-modal-sub {
        margin-bottom: 0;
        font-size: 0.78rem;
    }

    .business-register-modal .reg-progress {
        position: sticky;
        top: var(--reg-head-h, 116px);
        z-index: 4;
        /* Su pista es translúcida a propósito. Fija, eso dejaba ver el
           formulario pasando por detrás de la franja, así que se compone el
           mismo color sobre blanco: se ve igual, pero tapa. */
        background: linear-gradient(rgba(50, 85, 215, 0.12), rgba(50, 85, 215, 0.12)) #fff;
    }

    .business-register-modal .reg-tabs {
        position: sticky;
        /* Justo debajo de la barra de avance. Las dos alturas las mide
           business-register.js: darlas por fijas aquí dejaría un hueco o una
           superposición en cuanto cambie el alto de cualquiera de las dos. */
        top: calc(var(--reg-head-h, 116px) + var(--reg-progress-h, 4px));
        z-index: 4;
        box-shadow: 0 6px 14px rgba(11, 23, 48, 0.06);
    }

    /* El scroll ya no es suyo: si lo conserva, se anidan dos áreas
       desplazables y el gesto se reparte entre las dos. */
    .business-register-modal .modal-body {
        overflow: visible;
    }

    .business-register-modal .reg-footer {
        position: sticky;
        bottom: 0;
        z-index: 4;
        box-shadow: 0 -6px 16px rgba(11, 23, 48, 0.08);
    }
}

/* ==========================================================================
   Hero de la página — el perro debajo del texto en pantallas medias
   --------------------------------------------------------------------------
   La foto es una capa de fondo (position: absolute; inset: 0) pensada para dos
   columnas: el texto a la izquierda y el perro a la derecha. Al pasar a una
   sola columna esa capa se queda detrás del texto, así que el perro salía
   pisando el párrafo y los botones, y medio tapado por el degradado.

   Aquí deja de ser fondo y pasa a ser un bloque más del hero, colocado
   después del texto con `order`. El marcado no cambia: la foto sigue siendo
   el primer hijo de la sección.
   ========================================================================== */

@media (max-width: 991.98px) {
    .business-register-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        padding-bottom: 0;
    }

    .business-register-hero .container { order: 1; }

    .business-register-media {
        position: relative;
        inset: auto;
        order: 2;
        height: clamp(230px, 46vw, 330px);
        margin-top: 1.5rem;
        background: transparent;
    }

    .business-register-photo {
        position: relative;
        width: 100%;
        height: 100%;
        /* Centrado y apoyado abajo: ya no compite con el texto, así que se
           puede ver entero. */
        object-position: center bottom;
    }

    /* El degradado existía solo para que el texto se leyera por encima de la
       foto. Con la foto debajo, sobra. */
    .business-register-media::after {
        display: none;
    }
}