/* Pedido de presupuesto: usa los campos del formulario de contacto y las opciones del test de planes */
.budget-form {
    background: var(--sky);
    border: .08rem solid var(--line);
    border-radius: var(--radius);
    gap: 1.5rem;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.budget-topic,
.budget-group {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.budget-topic legend,
.budget-group legend {
    color: var(--text);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.05rem, 1.9vw, 1.2rem);
    font-weight: 800;
    line-height: 1.3;
    padding: 0;
}

.budget-form .plan-quiz-options {
    margin-top: .75rem;
}

/* Cantidad de productos o de páginas: aparece debajo de la opción marcada */
.budget-extra {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin: -.2rem 0 .2rem 2.2rem;
}

.budget-extra[hidden] {
    display: none;
}

.budget-extra select,
.budget-extra input {
    background: var(--surface);
    border: .08rem solid var(--field-border);
    border-radius: .75rem;
    color: var(--text);
    font: inherit;
    font-size: 1rem;
    max-width: 14rem;
    padding: .65rem .9rem;
}

.budget-extra select:focus,
.budget-extra input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 .2rem rgba(23, 105, 224, .35);
    outline: none;
}

.budget-send-hint {
    color: var(--muted);
    font-size: .9375rem;
    margin: 0;
}

.budget-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.budget-form .budget-actions .button {
    align-self: auto;
}

.budget-form .contact-form-status {
    font-size: .9375rem;
    margin: 0;
    min-height: 1.4em;
}

@media (max-width: 35rem) {
    .budget-form .contact-form-row {
        grid-template-columns: 1fr;
    }

    .budget-extra {
        margin-left: 0;
    }
}

/* Precio de referencia al lado de cada opción */
.budget-form .plan-quiz-option > span:first-of-type {
    flex: 1;
}

.budget-price {
    color: var(--blue);
    font-family: "Manrope", sans-serif;
    font-size: .875rem;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

.budget-prices-note {
    border-left: .25rem solid var(--blue);
    color: var(--text);
    font-size: .9375rem;
    line-height: 1.5;
    margin: 0;
    padding-left: .9rem;
}

@media (max-width: 35rem) {
    .budget-form .plan-quiz-option {
        flex-wrap: wrap;
    }

    .budget-price {
        flex-basis: 100%;
        margin-left: 1.8rem;
        white-space: normal;
    }
}

/* Aclaración corta debajo de una opción (qué es una sección, una página secundaria, etc.) */
.budget-form .plan-quiz-option {
    flex-wrap: wrap;
}

.budget-desc {
    color: var(--muted);
    flex-basis: 100%;
    font-size: .875rem;
    line-height: 1.45;
    margin-top: -.35rem;
    padding-left: 1.8rem;
}

.budget-help {
    color: var(--muted);
    font-size: .9375rem;
    margin: 0;
}

/* "¿Sobre qué es tu pedido?": opciones como pastillas, igual que en el formulario de contacto del inicio */
.budget-topic .plan-quiz-options {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.budget-topic .plan-quiz-option {
    border: .08rem solid var(--field-border);
    border-radius: 999rem;
    font-family: "Manrope", sans-serif;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    padding: .65rem 1.1rem;
    position: relative;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* El círculo del radio queda oculto pero sigue funcionando con teclado y lectores */
.budget-topic .plan-quiz-option input {
    height: 1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.budget-topic .plan-quiz-option:has(input:checked) {
    background: var(--blue);
    border-color: var(--blue);
    box-shadow: none;
    color: var(--white);
}

:root[data-theme="dark"] .budget-topic .plan-quiz-option:has(input:checked) {
    color: #0b1f4b;
}

.budget-topic .plan-quiz-option:has(input:focus-visible) {
    box-shadow: 0 0 0 .2rem rgba(23, 105, 224, .3);
}

/* Línea de privacidad a 12 px de los botones (este formulario deja 24 px entre elementos) */
.budget-form .form-privacy {
    margin-top: -.75rem;
}