/* ================================================================
   MB ARCH — HubSpot Form Style Overrides
   Matches the site's design: Inter + Outfit, #006B68 accent, glass cards
   ================================================================ */

/* Container wrapper */
.mbarch-hubspot-embed {
    width: 100%;
    max-width: 100%;
}

/* ---- Labels ---- */
.mbarch-hubspot-embed label,
.mbarch-hubspot-embed .hs-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--color-text-muted, #6b7280) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
    display: block !important;
}

/* ---- Inputs, selects, textareas ---- */
.mbarch-hubspot-embed input[type="text"],
.mbarch-hubspot-embed input[type="email"],
.mbarch-hubspot-embed input[type="tel"],
.mbarch-hubspot-embed input[type="number"],
.mbarch-hubspot-embed input[type="date"],
.mbarch-hubspot-embed textarea,
.mbarch-hubspot-embed select,
.mbarch-hubspot-embed .hs-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)) !important;
    background: var(--color-card, #FDF8F0) !important;
    color: var(--color-text-primary, #1A1A1A) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.875rem !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    outline: none !important;
    line-height: 1.5 !important;
}

.mbarch-hubspot-embed input:focus,
.mbarch-hubspot-embed textarea:focus,
.mbarch-hubspot-embed select:focus,
.mbarch-hubspot-embed .hs-input:focus {
    border-color: var(--color-accent, #006B68) !important;
    background: #fff !important;
}

.mbarch-hubspot-embed textarea,
.mbarch-hubspot-embed .hs-input[type="textarea"] {
    min-height: 100px !important;
    resize: vertical !important;
}

/* ---- Submit button ---- */
.mbarch-hubspot-embed input[type="submit"],
.mbarch-hubspot-embed button[type="submit"],
.mbarch-hubspot-embed .hs-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    background: var(--color-accent, #006B68) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
}

.mbarch-hubspot-embed input[type="submit"]:hover,
.mbarch-hubspot-embed button[type="submit"]:hover,
.mbarch-hubspot-embed .hs-button:hover {
    background: var(--color-accent-hover, #005552) !important;
    transform: translateY(-1px) !important;
}

/* ---- Validation errors ---- */
.mbarch-hubspot-embed .hs-error-msgs,
.mbarch-hubspot-embed .hs_error_rollup {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
}

.mbarch-hubspot-embed .hs-error-msgs li,
.mbarch-hubspot-embed .hs_error_rollup li {
    font-size: 0.75rem !important;
    color: #dc2626 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mbarch-hubspot-embed .hs-error-msgs a,
.mbarch-hubspot-embed .hs_error_rollup a {
    color: #dc2626 !important;
    text-decoration: none !important;
}

/* ---- Required field asterisk ---- */
.mbarch-hubspot-embed .hs-required {
    color: #dc2626 !important;
    font-size: 0.75rem !important;
    margin-left: 2px !important;
}

/* ---- Field descriptions ---- */
.mbarch-hubspot-embed .hs-field-desc {
    font-size: 0.75rem !important;
    color: var(--color-text-muted, #6b7280) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* ---- Form spacing ---- */
.mbarch-hubspot-embed .hs-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.mbarch-hubspot-embed .hs-fieldtype-text,
.mbarch-hubspot-embed .hs-fieldtype-email,
.mbarch-hubspot-embed .hs-fieldtype-phone,
.mbarch-hubspot-embed .hs-fieldtype-number,
.mbarch-hubspot-embed .hs-fieldtype-textarea,
.mbarch-hubspot-embed .hs-fieldtype-select,
.mbarch-hubspot-embed .hs-fieldtype-date {
    margin: 0 !important;
}

/* ---- Multi-field rows (HS uses .hs-fieldtype-* inside .hs-form) ---- */
.mbarch-hubspot-embed .hs-form .hs-fieldtype-text + .hs-fieldtype-text,
.mbarch-hubspot-embed .hs-form .hs-fieldtype-email + .hs-fieldtype-phone {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

/* ---- Success message ---- */
.mbarch-hubspot-embed .submitted-message {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    color: var(--color-accent, #006B68) !important;
    font-weight: 600 !important;
    padding: 1.5rem !important;
    text-align: center !important;
    background: rgba(0, 107, 104, 0.05) !important;
    border: 1px solid rgba(0, 107, 104, 0.15) !important;
    border-radius: 8px !important;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .mbarch-hubspot-embed .hs-form .hs-fieldtype-text + .hs-fieldtype-text,
    .mbarch-hubspot-embed .hs-form .hs-fieldtype-email + .hs-fieldtype-phone {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Dark backgrounds (hero sections) ---- */
.mbarch-hubspot-embed[data-form-key="hero"] label,
.mbarch-hubspot-embed[data-form-key="hero"] .hs-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mbarch-hubspot-embed[data-form-key="hero"] input[type="text"],
.mbarch-hubspot-embed[data-form-key="hero"] input[type="email"],
.mbarch-hubspot-embed[data-form-key="hero"] input[type="tel"],
.mbarch-hubspot-embed[data-form-key="hero"] textarea,
.mbarch-hubspot-embed[data-form-key="hero"] select,
.mbarch-hubspot-embed[data-form-key="hero"] .hs-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

.mbarch-hubspot-embed[data-form-key="hero"] input::placeholder,
.mbarch-hubspot-embed[data-form-key="hero"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.mbarch-hubspot-embed[data-form-key="hero"] input:focus,
.mbarch-hubspot-embed[data-form-key="hero"] textarea:focus,
.mbarch-hubspot-embed[data-form-key="hero"] .hs-input:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--color-accent, #006B68) !important;
}

.mbarch-hubspot-embed[data-form-key="hero"] input[type="submit"],
.mbarch-hubspot-embed[data-form-key="hero"] button[type="submit"],
.mbarch-hubspot-embed[data-form-key="hero"] .hs-button {
    background: var(--color-accent, #006B68) !important;
    color: #fff !important;
}

.mbarch-hubspot-embed[data-form-key="hero"] .hs-error-msgs li,
.mbarch-hubspot-embed[data-form-key="hero"] .hs_error_rollup li {
    color: #fca5a5 !important;
}

/* ---- Consultoria lead uses #FFD305 accent ---- */
.mbarch-hubspot-embed[data-form-key="consultoria_lead"] input[type="submit"],
.mbarch-hubspot-embed[data-form-key="consultoria_lead"] button[type="submit"],
.mbarch-hubspot-embed[data-form-key="consultoria_lead"] .hs-button {
    background: #FFD305 !important;
    color: var(--color-accent-text, #1A1A1A) !important;
}

.mbarch-hubspot-embed[data-form-key="consultoria_lead"] input[type="submit"]:hover,
.mbarch-hubspot-embed[data-form-key="consultoria_lead"] button[type="submit"]:hover,
.mbarch-hubspot-embed[data-form-key="consultoria_lead"] .hs-button:hover {
    background: #e6bf00 !important;
}

/* ---- Diseño form uses green submit ---- */
.mbarch-hubspot-embed[data-form-key="diseño"] input[type="submit"],
.mbarch-hubspot-embed[data-form-key="diseño"] button[type="submit"],
.mbarch-hubspot-embed[data-form-key="diseño"] .hs-button {
    background: #22c55e !important;
}

.mbarch-hubspot-embed[data-form-key="diseño"] input[type="submit"]:hover,
.mbarch-hubspot-embed[data-form-key="diseño"] button[type="submit"]:hover,
.mbarch-hubspot-embed[data-form-key="diseño"] .hs-button:hover {
    background: #16a34a !important;
}