/* ═══════════════════════════════════════════════
   SOBRE.CSS — Rafaella Araújo Psicóloga
   Página Sobre
   ═══════════════════════════════════════════════ */

/* ── HERO SOBRE ── */
.hero-sobre {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 60px 24px;
}

@media (min-width: 1200px) {
  .hero-sobre {
    min-height: 320px;
  }
}

.hero-sobre-bg {
  position: absolute;
  inset: 0;
  background-image: url('img/fundo-heros.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Camada: #EBC2BF com 85% de opacidade */
.hero-sobre-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(235, 194, 191, 0.85);
  z-index: 1;
}

.hero-sobre-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.hero-sobre-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0.25em;
  color: var(--texto-escuro, #4A3030);
  display: block;
  margin-bottom: 25px;
}

.hero-sobre-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: var(--texto-medio, #5C3A3A);
  max-width: 900px;
  line-height: 1.35;
}

/* ── AJUSTES NA SEÇÃO CONHEÇA. SOBRE ── */
.sobre-conheca {
  padding-top: 100px;
  min-height: auto;
  /* Garante que o fundo não corte */
  padding-bottom: 0;
}

.sobre-conheca .conheca-photo-wrapper {
  max-width: 650px;
  /* Teto maior ainda para a foto não limitar */
  width: 100%;
}

.sobre-conheca .conheca-left {
  flex: 1.3;
  min-width: 450px;
  /* Garante que a foto nunca fique "esmagada" */
}

.sobre-conheca-bottom-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background: linear-gradient(to bottom,
      rgba(247, 230, 226, 0) 0%,
      rgba(247, 230, 226, 0.30) 30%,
      rgba(247, 230, 226, 0.60) 60%,
      #F7E6E2 100%);
  z-index: 5;
  pointer-events: none;
}

.sobre-conheca .conheca-desc {
  font-size: 0.95rem;
  /* Um pouco mais legível */
  line-height: 1.8;
  color: #6a4f4f;
  /* Tom levemente mais suave para grandes blocos de texto */
}

/* ── FORMAÇÃO E EXPERIÊNCIA ── */
.formacao-experiencia {
  margin-top: 45px;
}

.formacao-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  color: var(--texto-escuro, #4A3030);
  margin-bottom: 25px;
  font-weight: 500;
}

.formacao-tags {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.formacao-tag {
  border: 1px solid rgba(138, 90, 90, 0.6);
  /* Cor da borda suave baseada no layout */
  border-radius: 20px;
  padding: 8px 18px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--texto-medio, #5C3A3A);
  background-color: rgba(253, 222, 220, 0.35);
  /* Leve fundo rosinha, quase transparente */
  display: inline-block;
  transition: all 0.3s ease;
}

.formacao-tag:hover {
  background-color: rgba(253, 222, 220, 0.7);
  box-shadow: 0 2px 8px rgba(138, 90, 90, 0.1);
}

/* Responsivo específico para a imagem e assinatura na página Sobre */
@media (max-width: 1300px) and (min-width: 1101px) {
  .sobre-conheca .conheca-inner {
    padding: 0 20px;
    gap: 20px;
  }

  .sobre-conheca .conheca-left {
    flex: 1.5;
    /* Prioriza agressivamente a foto */
    min-width: 480px;
    /* Medida mínima travada para a foto */
  }
}

@media (max-width: 1100px) {
  .sobre-conheca .conheca-inner {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .sobre-conheca .conheca-right {
    order: 1;
    text-align: center;
    width: 100%;
    padding-bottom: 0;
  }

  .sobre-conheca .conheca-left {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    min-width: auto;
  }

  .sobre-conheca .conheca-title {
    text-align: center;
  }

  .sobre-conheca .formacao-title {
    text-align: center;
  }

  .sobre-conheca .formacao-tags {
    align-items: center;
    /* Centraliza as tags de formação */
  }
}

@media (max-width: 992px) {
  .hero-sobre {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .sobre-conheca .conheca-signature {
    font-size: clamp(5rem, 18vw, 6.5rem) !important;
  }
}

@media (max-width: 768px) {
  .hero-sobre-title {
    font-size: 1.8rem;
  }

  .hero-sobre-subtitle {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .formacao-title {
    font-size: 1.6rem;
  }

  .formacao-tag {
    font-size: 0.85rem;
    padding: 8px 15px;
  }
}

@media (max-width: 500px) {
  .sobre-conheca .conheca-signature {
    font-size: 4.8rem !important;
  }
}


/* ── COMPONENTES REUTILIZÁVEIS NAS NOVAS SEÇÕES ── */
.section-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: #613A3A;
  display: block;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  font-weight: 600;
  color: #613A3A;
  line-height: 1.25;
  margin-bottom: 30px;
}

.section-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #613A3A;
  line-height: 1.75;
  margin-bottom: 20px;
}

.section-buttons {
  display: flex;
  gap: 15px;
  margin-top: 35px;
}

/* ── SEÇÃO: ABORDAGEM PSICOLÓGICA ── */
.abordagem-section {
  position: relative;
  padding: 120px 24px;
  overflow: hidden;
}

.abordagem-bg {
  position: absolute;
  inset: 0;
  background-image: url('img/fundo-florido.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

.abordagem-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(243, 182, 178, 0.7);
  /* #F3B6B2 com 70% opacidade */
  z-index: 1;
}

.abordagem-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 60px;
}

.abordagem-left {
  flex: 1;
  max-width: 480px;
}

.abordagem-right {
  flex: 1;
  max-width: 600px;
}

/* ── SEÇÃO: ATUAÇÃO COMPLEMENTAR ── */
.atuacao-section {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 600px;
}

/* Fundo vai apenas no lado direito, onde têm o texto, simulando a união */
.atuacao-right {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 100px 40px 100px 60px;
  background-image: url('img/fundo-atuacao.png');
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}

.atuacao-overlay-right {
  position: absolute;
  inset: 0;
  background-color: rgba(253, 222, 220, 0.85);
  /* #FDDEDC com 85% opacidade */
  z-index: 1;
}

.atuacao-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
}

/* O inner flex pra colar a foto na esquerda */
.atuacao-left {
  flex: 1;
  position: relative;
  max-width: 50%;
  /* Obriga a não ultrapassar o centro */
  display: flex;
}

.atuacao-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Degrade da imagem da esquerda para fundir na direita */
.atuacao-gradient {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 250px;
  background: linear-gradient(to right,
      rgba(253, 222, 220, 0) 0%,
      rgba(253, 222, 220, 0.3) 30%,
      rgba(253, 222, 220, 0.7) 70%,
      #FDDEDC 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── RESPONSIVO PARA AS NOVAS SEÇÕES ── */
@media (max-width: 1100px) {
  .abordagem-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0px;
    padding: 0 10px;
  }

  .abordagem-left {
    max-width: 90%;
    /* Ajuste para o título não ficar tão estreito */
  }

  .abordagem-right {
    max-width: 85%;
    /* Ajuste para o texto não ficar tão largo e facilitar a leitura */
  }

  .section-buttons {
    justify-content: center;
  }

  .atuacao-section {
    flex-direction: column;
    min-height: auto;
    /* Remove altura mínima no mobile */
  }

  .atuacao-left,
  .atuacao-img {
    height: 655px !important;
    /* Respeitando o limite de até 600px */
  }

  .atuacao-left {
    max-width: 100%;
    overflow: hidden;
  }

  /* degrade agora é vertical (embaixo) para fundir com a section atuacao-right abaixo dela */
  .atuacao-gradient {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    /* Segue a altura do pai */
    background: linear-gradient(to bottom,
        rgba(253, 222, 220, 0) 0%,
        rgba(253, 222, 220, 0.3) 30%,
        rgba(253, 222, 220, 0.7) 70%,
        #FDDEDC 100%);
  }

  .atuacao-right {
    padding: 60px 30px 80px 30px;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .section-title {
    font-size: 2.2rem;
  }

  .abordagem-section {
    padding: 60px 20px;
  }

  .atuacao-right {
    padding: 40px 20px 60px 20px;
  }

  .atuacao-left,
  .atuacao-img {
    height: 500px !important;
    /* Ajuste para mobile dentro do limite solicitado */
  }

  .section-buttons {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .section-buttons>a {
    text-align: center;
    margin: 0;
    /* zera resíduos */
  }
}

/* ── SEÇÃO: VALORES E FORMA DE TRABALHAR ── */
.valores-section {
  position: relative;
  padding: 100px 24px;
}

.valores-bg {
  position: absolute;
  inset: 0;
  background-image: url('img/fundo-florido.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

.valores-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(255, 244, 243, 0.70);
  /* #FFF4F3 com 70% de transparência */
  z-index: 1;
}

.valores-inner {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
}

.valores-header {
  margin-bottom: 50px;
}

.valores-grid {
  display: grid;
  grid-template-columns: repeat(2, 334px);
  justify-content: center;
  gap: 35px;
}

.valor-card {
  background: #DAD6C7;
  border: 1px solid #8A5A5A;
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  padding: 40px;
  width: 100%;
  max-width: 334px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: transform 0.3s ease;
}

.valor-card:hover {
  transform: translateY(-5px);
}

.valor-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  color: #613A3A;
  margin-bottom: 15px;
  font-weight: 600;
}

.valor-desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  color: #613A3A;
  line-height: 1.7;
  margin: 0;
}

/* ── SEÇÃO: AGENDAR SESSÃO ── */
.agendar-sessao-section {
  background-color: #EBC2BF;
  padding: 80px 24px;
  display: flex;
  justify-content: center;
}

.agendar-inner {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;
}

.agendar-left {
  flex: 1;
  max-width: 700px;
}

.agendar-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: #626154;
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.agendar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 600;
  color: #626154;
  line-height: 1.3;
  margin: 0;
}

.agendar-right {
  flex-shrink: 0;
}

/* ── RESPONSIVO VALORES E AGENDAR ── */
@media (max-width: 992px) {
  .valores-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .valores-section {
    padding: 70px 20px;
  }

  .valor-card {
    padding: 30px 20px;
    width: 100%;
    max-width: 334px;
  }

  .valor-title {
    font-size: 1.5rem;
  }

  .agendar-sessao-section {
    padding: 60px 20px;
  }

  .agendar-inner {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .agendar-left {
    max-width: 100%;
    margin-bottom: 0;
  }

  .agendar-title {
    font-size: 2rem;
  }

  .agendar-right {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .agendar-right .btn-hero-primary {
    text-align: center;
  }
}