/* ======================================================
   PÁGINA DE CONTATO
====================================================== */

.pagina-institucional {

      min-height: calc(100vh - 80px);

      padding: 70px 0 90px;

      background:
            linear-gradient(180deg,
                  #f8fafc 0%,
                  #ffffff 100%);

}


/* ======================================================
   CARD PRINCIPAL
====================================================== */

.pagina-institucional-card {

      width: 100%;

      max-width: 850px;

      margin: 0 auto;

      padding: 55px;

      background: #ffffff;

      border: 1px solid #e5e7eb;

      border-radius: 22px;

      box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.08);

}


/* ======================================================
   CABEÇALHO
====================================================== */

.pagina-institucional-card>header {

      margin-bottom: 40px;

      padding-bottom: 30px;

      border-bottom: 1px solid #e5e7eb;

}


.pagina-institucional-titulo {

      margin: 0 0 14px;

      color: #111827;

      font-family: 'Merriweather', serif;

      font-size: clamp(2rem,
                  4vw,
                  2.8rem);

      font-weight: 900;

      line-height: 1.2;

}


.pagina-institucional-subtitulo {

      max-width: 680px;

      margin: 0;

      color: #64748b;

      font-size: 1.05rem;

      line-height: 1.8;

}


/* ======================================================
   FORMULÁRIO
====================================================== */

.contato-form {

      width: 100%;

}


/* ======================================================
   LABEL
====================================================== */

.contato-form .form-label {

      display: block;

      margin-bottom: 9px;

      color: #1e293b;

      font-size: 0.95rem;

      font-weight: 700;

}


/* ======================================================
   INPUTS
====================================================== */

.contato-form .form-control {

      min-height: 54px;

      padding: 14px 16px;

      color: #1e293b;

      background-color: #ffffff;

      border: 1px solid #dbe1e8;

      border-radius: 12px;

      font-size: 0.96rem;

      box-shadow: none;

      transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease;

}


.contato-form textarea.form-control {

      min-height: 180px;

      resize: vertical;

      line-height: 1.7;

}


/* ======================================================
   PLACEHOLDER
====================================================== */

.contato-form .form-control::placeholder {

      color: #94a3b8;

}


/* ======================================================
   FOCO
====================================================== */

.contato-form .form-control:focus {

      color: #111827;

      background-color: #ffffff;

      border-color: #64748b;

      outline: none;

      box-shadow:
            0 0 0 4px rgba(100, 116, 139, 0.12);

}


/* ======================================================
   BOTÃO
====================================================== */

.contato-form .btn {

      min-height: 52px;

      padding: 13px 28px;

      border: none;

      border-radius: 11px;

      color: #ffffff;

      background: #111827;

      font-size: 0.95rem;

      font-weight: 700;

      transition:
            transform 0.2s ease,
            box-shadow 0.2s ease,
            background-color 0.2s ease;

}


.contato-form .btn:hover {

      color: #ffffff;

      background: #1f2937;

      transform: translateY(-2px);

      box-shadow:
            0 10px 25px rgba(15, 23, 42, 0.18);

}


.contato-form .btn:active {

      transform: translateY(0);

}


/* ======================================================
   ALERTA DE SUCESSO
====================================================== */

.pagina-institucional-card .alert-success {

      margin-bottom: 30px;

      padding: 18px 20px;

      color: #166534;

      background: #f0fdf4;

      border: 1px solid #bbf7d0;

      border-radius: 12px;

      line-height: 1.7;

}


/* ======================================================
   ALERTA DE ERRO
====================================================== */

.pagina-institucional-card .alert-danger {

      margin-bottom: 30px;

      padding: 18px 20px;

      color: #991b1b;

      background: #fef2f2;

      border: 1px solid #fecaca;

      border-radius: 12px;

      line-height: 1.7;

}


/* ======================================================
   ANIMAÇÃO SUAVE
====================================================== */

.pagina-institucional-card {

      animation:
            contatoCardEntrada 0.45s ease both;

}


@keyframes contatoCardEntrada {

      from {

            opacity: 0;

            transform:
                  translateY(15px);

      }

      to {

            opacity: 1;

            transform:
                  translateY(0);

      }

}


/* ======================================================
   RESPONSIVIDADE
====================================================== */

@media (max-width: 991.98px) {

      .pagina-institucional {

            padding: 55px 0 70px;

      }


      .pagina-institucional-card {

            max-width: 760px;

            padding: 42px;

            border-radius: 18px;

      }

}


@media (max-width: 767.98px) {

      .pagina-institucional {

            padding: 35px 0 55px;

      }


      .pagina-institucional-card {

            padding: 30px 22px;

            border-radius: 16px;

            box-shadow:
                  0 12px 35px rgba(15,
                        23,
                        42,
                        0.06);

      }


      .pagina-institucional-card>header {

            margin-bottom: 30px;

            padding-bottom: 24px;

      }


      .pagina-institucional-titulo {

            font-size: 1.9rem;

      }


      .pagina-institucional-subtitulo {

            font-size: 0.95rem;

            line-height: 1.7;

      }


      .contato-form .form-control {

            min-height: 50px;

            padding: 12px 14px;

      }


      .contato-form textarea.form-control {

            min-height: 150px;

      }


      .contato-form .btn {

            width: 100%;

      }

}


@media (max-width: 400px) {

      .pagina-institucional-card {

            padding: 25px 18px;

      }


      .pagina-institucional-titulo {

            font-size: 1.65rem;

      }

}