body {
   font-family: 'IBM Plex Sans', sans-serif;
   margin: 0;
}

h1 {
   font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 2rem;
   margin-top: 2rem;
   color: var(--azul-destaque);
}

h2 {
   font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 1.5rem;
   margin-top: 2rem;
   margin-bottom: 1.4rem;
   color: var(--azul-principal); 
}

p {
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 1rem;
   text-align: justify;
   line-height: 1.5;
   margin-bottom: 10px;
}

ol {
   margin-left: 25px;
   font-weight: 600;
}

ol li {
   font-weight: normal;
}

ul {
   margin-left: 25px;
}

.depoimentos {
   margin-top: 2rem;
   display: flex;
   flex-direction: column;
   background-color: var(--cinza-00);
   padding-bottom: 2rem;
   padding-left: 30px;
   padding-right: 30px;
}

.depoimento-img {
   width: 100px; 
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
}

.depoimento-text {
   margin-top: 20px;
   font-style: italic;
}

.depoimento-autor {
   text-align: right;
   font-weight: 600;
   font-size: 0.9rem;
}

.fundo_cinza {
   width: 100%;
   background-color: var(--cinza-00);
   padding-top: 20px;
   padding-bottom: 20px;
}

/* Adicionar estas regras ao arquivo contato.css */

/* Desktop styles (mantém layout atual) */
body {
   font-family: 'IBM Plex Sans', sans-serif;
   margin: 0;
}

h1 {
   font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 2rem;
   margin-top: 2rem;
   color: var(--azul-destaque);
}

h2 {
   font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 600;
   font-size: 1.5rem;
   margin-top: 2rem;
   margin-bottom: 1.4rem;
   color: var(--azul-principal); 
}

p {
   font-family: 'IBM Plex Sans', sans-serif;
   font-size: 1rem;
   text-align: justify;
   line-height: 1.5;
   margin-bottom: 10px;
}

ol {
   margin-left: 25px;
   font-weight: 600;
}

ol li {
   font-weight: normal;
}

ul {
   margin-left: 25px;
}

/* Seção de Depoimentos */
.depoimentos {
   margin-top: 2rem;
   display: flex;
   flex-direction: column;
   background-color: var(--cinza-00);
   padding: 2rem 30px;
   border-radius: 8px;
}

.depoimentos h2 {
   text-align: center;
   margin-bottom: 2rem;
}

.depoimentos .row {
   display: flex;
   flex-direction: row;
   gap: 30px;
   align-items: stretch;
}

.depoimentos .col {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 20px;
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.depoimento-img {
   width: 100px; 
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 20px;
}

.depoimento-text {
   margin-top: 0;
   margin-bottom: 20px;
   font-style: italic;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--cinza-75);
   flex-grow: 1;
}

.depoimento-autor {
   text-align: center;
   font-weight: 600;
   font-size: 0.9rem;
   color: var(--azul-principal);
   margin-top: auto;
}

.fundo_cinza {
   width: 100%;
   background-color: var(--cinza-00);
   padding-top: 20px;
   padding-bottom: 20px;
}

/* RESPONSIVE STYLES */
@media screen and (max-width: 1024px) {
   /* Tablet adjustments */
   .depoimentos {
      padding: 1.5rem 20px;
   }
   
   .depoimentos .row {
      gap: 20px;
   }
   
   .depoimento-img {
      width: 80px;
      height: 80px;
   }
   
   .depoimento-text {
      font-size: 0.95rem;
   }
   
   .depoimento-autor {
      font-size: 0.85rem;
   }
}

@media screen and (max-width: 768px) {
   /* Mobile - Layout empilhado */
   
   /* Ajustes gerais para mobile */
   h1 {
      font-size: 1.8rem !important;
      text-align: center !important;
      margin-top: 1.5rem !important;
   }
   
   h2 {
      font-size: 1.4rem !important;
      text-align: center !important;
      margin-top: 1.5rem !important;
   }
   
   p {
      font-size: 0.95rem !important;
      text-align: justify !important;
   }
   
   ol, ul {
      margin-left: 20px !important;
   }
   
   /* Layout de colunas para mobile */
   .row {
      flex-direction: column !important;
   }
   
   .col-8, .col-4 {
      width: 100% !important;
      padding: 0 10px !important;
   }
   
   /* Formulário sticky desabilitado no mobile */
   .sticky-column {
      position: static !important;
      top: auto !important;
      margin-top: 2rem;
   }
   
   .form-wrapper {
      margin-bottom: 2rem;
   }
   
   /* Seção de depoimentos mobile */
   .depoimentos {
      margin-top: 1.5rem !important;
      padding: 1.5rem 15px !important;
      background-color: var(--cinza-00);
   }
   
   .depoimentos h2 {
      font-size: 1.4rem !important;
      margin-bottom: 1.5rem !important;
   }
   
   .depoimentos .row {
      flex-direction: column !important;
      gap: 20px !important;
   }
   
   .depoimentos .col {
      flex: none !important;
      width: 100% !important;
      margin-bottom: 20px;
      padding: 20px 15px;
   }
   
   .depoimento-img {
      width: 80px !important;
      height: 80px !important;
      margin-bottom: 15px;
   }
   
   .depoimento-text {
      font-size: 0.9rem !important;
      line-height: 1.5 !important;
      margin-bottom: 15px !important;
      text-align: center !important;
   }
   
   .depoimento-autor {
      font-size: 0.8rem !important;
      text-align: center !important;
      margin-top: 10px;
   }
}

@media screen and (max-width: 480px) {
   /* Mobile pequeno */
   h1 {
      font-size: 1.6rem !important;
   }
   
   h2 {
      font-size: 1.3rem !important;
   }
   
   p {
      font-size: 0.9rem !important;
   }
   
   .depoimentos {
      padding: 1rem 10px !important;
   }
   
   .depoimentos .col {
      padding: 15px 10px;
   }
   
   .depoimento-img {
      width: 70px !important;
      height: 70px !important;
   }
   
   .depoimento-text {
      font-size: 0.85rem !important;
   }
   
   .depoimento-autor {
      font-size: 0.75rem !important;
   }
   
   ol, ul {
      margin-left: 15px !important;
   }
}

/* Correções específicas para o formulário sticky no mobile */
@media screen and (max-width: 768px) {
   .content-wrapper {
      margin-top: 60px !important;
   }
   
   .sticky-column {
      position: static !important;
      top: auto !important;
      height: auto !important;
      margin-bottom: 0 !important;
   }
   
   .form-wrapper {
      margin-top: 2rem;
      padding: 15px;
   }
   
   .page-form-container {
      padding: 15px !important;
   }
   
   .page-form-container h2 {
      font-size: 1.3rem !important;
      text-align: center !important;
   }
}

/* Utility classes para mobile */
@media screen and (max-width: 768px) {
   .mobile-center {
      text-align: center !important;
   }
   
   .mobile-stack {
      flex-direction: column !important;
   }
   
   .mobile-full-width {
      width: 100% !important;
   }
   
   .mobile-margin {
      margin: 1rem 0 !important;
   }
}

/* CSS adicional para melhorar a seção de depoimentos - Adicionar ao contato.css */

/* Estilos para o placeholder do segundo depoimento */
.depoimento-placeholder {
   opacity: 0.6;
   border: 2px dashed var(--azul-principal);
   background-color: #f8f9fa !important;
}

.depoimento-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   min-height: 200px;
}

.depoimento-img-placeholder {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: var(--cinza-25);
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.depoimento-img-placeholder::before {
   content: "📋";
   font-size: 2rem;
   opacity: 0.5;
}

.depoimento-text-placeholder {
   font-style: italic;
   color: var(--cinza-50) !important;
   text-align: center;
   font-size: 0.9rem;
}

.depoimento-autor-placeholder {
   color: var(--cinza-50) !important;
   font-size: 0.8rem;
   text-align: center;
}

/* Melhorias no depoimento existente */
.depoimento-item:first-child {
   border-left: 4px solid var(--azul-principal);
}

.depoimento-autor small {
   display: block;
   font-weight: normal;
   color: var(--cinza-50);
   margin-top: 5px;
   line-height: 1.3;
}

/* Hover effects para desktop */
@media screen and (min-width: 769px) {
   .depoimento-item {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .depoimento-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
   }
   
   .depoimento-placeholder:hover {
      transform: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   }
}

/* Responsividade específica para depoimentos */
@media screen and (max-width: 768px) {
   /* Mobile - Esconder placeholder se necessário */
   .depoimento-placeholder {
      display: none; /* Opcional: esconder o placeholder no mobile */
   }
   
   /* Ou manter mas ajustar o estilo */
   /* .depoimento-placeholder {
      margin-top: 1rem;
      padding: 15px;
      min-height: 150px;
   }
   
   .depoimento-empty {
      min-height: 120px;
   }
   
   .depoimento-img-placeholder {
      width: 60px;
      height: 60px;
      margin-bottom: 10px;
   }
   
   .depoimento-img-placeholder::before {
      font-size: 1.5rem;
   } */
   
   /* Melhorar o depoimento principal no mobile */
   .depoimento-item:first-child {
      border-left: none;
      border-top: 4px solid var(--azul-principal);
   }
   
   .depoimento-autor small {
      font-size: 0.75rem;
   }
}

@media screen and (max-width: 480px) {
   .depoimento-autor small {
      font-size: 0.7rem;
   }
}

/* Animação sutil para carregamento */
.depoimentos {
   animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Estilo especial para destaque de citação */
.depoimento-text b {
   color: var(--azul-destaque);
   font-weight: 600;
}

.depoimento-text .amar {
   color: var(--azul-destaque);
   font-weight: 600;
}