#formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) var(--spacing-md);
  background-color: var(--gray);
  width: 100%;

  .formulario__wrapper {
    width: 100%;
    max-width: 100%;

    .formulario__header {
      text-align: center;

      .title {
        color: var(--dark-blue);
      }

      .body {
        color: var(--white);
      }
    }

    .formulario__card {

      background: linear-gradient(180deg,
        rgb(255, 252, 255) 0%,
        rgb(249, 255, 255) 100%
        );
      padding: var(--spacing-lg) var(--spacing-md);
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

      .formulario__form_group {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        /* border: 1px solid green; */

        .form-field {
          display: flex;
          flex-direction: column;
          gap: 0.35rem;

          .caption {
            color: var(--red);
            line-height: 1.4;
          }

          .body {
            color: var(--gray);
            opacity: 0.85;
          }

          input {
            /* padding: 1rem 1.2rem; */
            padding: 0.9rem 0.5rem;
            border-radius: 10px;
            border: 1px solid #e0e0e0;
            font-size: 1rem;
            transition: all 0.2s ease;
          }

          input.error {
            border-color: var(--red);
            box-shadow: 0 0 0 2px rgba(211, 48, 61, 0.2);
          }

          input:focus {
            border-color: var(--dark-blue);
            box-shadow: 0 0 0 3px rgba(48, 114, 185, 0.15);
            outline: none;
          }
        }

        .formulario__submit {
          width: fit-content;
          margin-top: var(--spacing-md);
          padding: 0.8rem 1.6rem;
          border-radius: 50px;
          border: none;
          background: linear-gradient(135deg, var(--dark-blue), var(--green));
          color: var(--white);
          font-weight: 600;
          cursor: pointer;
          transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
        }

        .formulario__submit:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        .formulario__submit:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

      }
    }
  }

  @media (min-width: 768px) {
    .formulario__wrapper {
      max-width: 610px;
      /* border: 1px solid yellow; */
      
      
      .formulario__card {
        
        .formulario__form_group {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-lg);
        }

        .formulario__submit {
          grid-column: span 2;
        }
        padding: var(--spacing-xl) var(--spacing-xl);
        margin: 0 auto;
        max-width: 95%;
      }
    }
  }

  @media (min-width: 1024px) {
    .formulario__wrapper {
      max-width: 700px;

      .formulario__card {
        max-width: 85%;
      }
    }
  }

  @media (min-width: 1280px) {
    .formulario__wrapper {
      max-width: 850px;

      .formulario__card {
        max-width: 75%;
      }
    }
  }

  @media (min-width: 1536px) {
    .formulario__wrapper {
      width: var(--container-full);
    }
  }
}