/* ==========================================================================
   DOBRA 4: O AFRO E O MOVIMENTO NEGRO (SEÇÃO HISTÓRICA ORIGINAL)
   Fidelidade absoluta ao layout original de projetoceaa.com.br
   Estrutura:
   - Divisão 60% / 40%:
     * Esquerda: Fundo #2A2D39 com overlay da estampa original totem_afro03.png
       Título, citação de impacto com justificativa histórica, referência e botão pill.
     * Direita: Fotografia histórica de Lélia Gonzalez e José Maria Nunes Pereira
       (Figura-10-1.jpg / leila_gonzalez.jpg) cobrindo 100% da altura da seção.
   - Sem sombras (box-shadow: none !important)
   - Tipografia limpa sans-serif (Inter / Plus Jakarta Sans)
   ========================================================================== */

/* ==========================================================================
   FAIXA DE ESTAMPA ANCESTRAL ORIGINAL (bg_afro02 NO TOPO DA DOBRA 4)
   Ajuste de precisão: zero espaçamento entre o meandro e a dobra 4
   ========================================================================== */
.dobra4-tribal-top-band {
  width: 100%;
  height: 28px;
  background-color: #FFFFFF;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/bg_afro02_meander.webp');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 28px;
  box-shadow: none !important;
  border: none !important;
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
  font-size: 0;
  z-index: 30;
}

.dobra4-movimento-section {
  position: relative;
  width: 100%;
  display: flex;
  background-color: #2A2D39;
  overflow: hidden;
  box-shadow: none !important;
  border: none !important;
  box-sizing: border-box;
}

/* Coluna Esquerda: Conteúdo Histórico (60%) */
.dobra4-content-col {
  position: relative;
  width: 60%;
  background-color: #2A2D39;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5.5rem 4rem 5.5rem 3rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Overlay da Estampa Ancestral Oficial (totem_afro03.png com opacidade original) */
.dobra4-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/totem_afro03.webp');
  background-repeat: repeat;
  background-position: center center;
  background-size: 260px auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

.dobra4-inner-wrap {
  position: relative;
  z-index: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
}

.dobra4-title {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 2.125rem;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 1.75rem 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.dobra4-quote-text {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.85;
  color: #FFFFFF;
  text-align: justify;
  margin: 0 0 1.75rem 0;
  opacity: 0.95;
}

.dobra4-citation {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6;
  color: #FFFFFF;
  text-align: left;
  margin: 0 0 2rem 0;
  opacity: 0.95;
}

.dobra4-btn-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.dobra4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #2581CC;
  color: #FFFFFF;
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 2.4rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: none !important;
  border: 2px solid #2581CC;
  transition: all 0.25s ease;
}

.dobra4-btn:hover {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.dobra4-caption {
  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.75rem;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.75;
  margin: 0;
  line-height: 1.5;
}

/* Coluna Direita: Fotografia Histórica (40%) */
.dobra4-image-col {
  position: relative;
  width: 40%;
  min-height: 100%;
  background-color: #2A2D39;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/2026/01/Figura-10-1.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: none !important;
}

/* Responsividade */
@media (max-width: 1024px) {
  .dobra4-content-col {
    width: 60%;
    padding: 4rem 3rem 4rem 2.5rem;
    justify-content: center;
  }
  .dobra4-inner-wrap {
    max-width: 100%;
  }
  .dobra4-image-col {
    width: 40%;
  }
  .dobra4-title {
    font-size: 1.5rem;
    text-align: left;
  }
  .dobra4-quote-text {
    text-align: left !important;
    text-justify: none !important;
    line-height: 1.75;
    word-break: normal;
    hyphens: auto;
  }
  .dobra4-citation {
    text-align: left !important;
    line-height: 1.55;
  }
}

@media (max-width: 860px) {
  /* ==========================================================================
   FAIXA DE ESTAMPA ANCESTRAL ORIGINAL (bg_afro02 NO TOPO DA DOBRA 4)
   Ajuste de precisão: zero espaçamento entre o meandro e a dobra 4
   ========================================================================== */
.dobra4-tribal-top-band {
  width: 100%;
  height: 28px;
  background-color: #FFFFFF;
  background-image: url('https://media.visuals.com.br/visuals-medias/ceaa/images/brand/bg_afro02_meander.webp');
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 28px;
  box-shadow: none !important;
  border: none !important;
  margin: 0;
  padding: 0;
  display: block;
  line-height: 0;
  font-size: 0;
  z-index: 30;
}

.dobra4-movimento-section {
    flex-direction: column;
  }
  .dobra4-content-col {
    width: 100%;
    padding: 3.5rem 1.75rem;
  }
  .dobra4-image-col {
    width: 100%;
    min-height: 380px;
    height: 380px;
  }
}

@media (max-width: 640px) {
  .dobra4-quote-text,
  .dobra4-citation {
    text-align: justify !important;
    text-justify: inter-word !important;
  }
}