.general-container {
     display: flex;
     flex-direction: row;
     width: 100vw;
     min-height: 100vh;
     justify-content: center;
     align-items: center;
     /* fondo principal */
     font-family: var(--font-family-base);
     color: var(--text-primary);
     padding: var(--space-8) 0;
     box-sizing: border-box;
}

.form-container {
     display: flex;
     flex-direction: column;
     width: 50%;
     max-width: var(--content-md);
     padding: var(--space-8);
     border-radius: var(--radius-lg);
     background-color: var(--surface);
     /* surface card */
     box-shadow: var(--card-shadow);
}

.alt-contact,
.success-message {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin-top: var(--space-4);
}

.form-container h2 {
     font-size: var(--font-size-2xl);
     font-weight: var(--font-weight-semibold);
     margin-bottom: var(--space-6);
     color: var(--text-primary);
}

.form-group {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--space-4);
}

.form-group label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
     color: var(--text-secondary);
     margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea {
     padding: var(--space-3) var(--space-4);
     border: 1px solid var(--input-border);
     border-radius: var(--radius-md);
     font-size: var(--font-size-base);
     background-color: var(--input-bg);
     color: var(--text-primary);
     transition: border var(--transition-normal), box-shadow var(--transition-normal);
}

.form-group input:focus,
.form-group textarea:focus {
     outline: none;
     border-color: var(--input-focus);
     box-shadow: var(--input-focus-shadow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
     color: var(--text-muted);
     opacity: 1;
}

button.button.primary {
     background-color: var(--button-primary-bg);
     color: var(--button-primary-text);
     border: none;
     padding: var(--space-3) var(--space-6);
     border-radius: var(--radius-md);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     cursor: pointer;
     box-shadow: var(--button-primary-shadow);
     transition: background-color var(--transition-normal), transform var(--transition-fast);
     display: flex;
     justify-self: center;
}

button.button.primary:hover {
     background-color: var(--button-primary-hover);
     transform: var(--scale-hover);
}

button.button.primary:active {
     background-color: var(--button-primary-active);
     transform: var(--scale-active);
}

.alt-contact a {
     margin-left: var(--space-2);
}

/* 📱 Mobile & small tablets */
@media (max-width: 768px) {
     .form-container {
          width: 90%;
          /* take all width */
          max-width: none;
          /* remove cap */
          margin: 0 var(--space-4);
          /* breathing space on sides */
          border-radius: var(--radius-md);
          /* softer on small screens */
          padding: var(--space-6);
     }
}