/* ==========================================================
   common.css  –  Variáveis, reset e estilos base
   Usado por todas as seções do site.
   ========================================================== */

/* ── Fontes ── */
@font-face {
  font-family: 'Aboreto';
  src: url('../assets/fonts/otf/Aboreto-Regular.otf') format('opentype'),
       url('../assets/fonts/ttf/Aboreto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Variáveis ── */
:root {
  /* Opção B — Algodão dominante, verde como detalhe */
  --verde-escuro:    #221E18;  /* espresso quente — quase preto, sem tom floresta */
  --verde-musgo:     #34503E;  /* verde botânico — usado só em texto e detalhes   */
  --verde-medio:     #4A7260;  /* sage — bordas e acentos sutis                   */
  --dourado:         #C9A55E;  /* ouro antigo — mais âmbar, menos amarelo         */
  --dourado-claro:   #DCC07A;  /* champanhe                                       */
  --dourado-brilho:  #EDCF8E;  /* realce dourado                                  */
  --algodao-claro:   #FDF5E6;  /* algodão egípcio claro — seções 2 e 4    */
  --algodao-medio:   #FAEBD7;  /* algodão egípcio médio — seções 1, 3 e 5 */
  --algodao-escuro:  #D4C9B8;  /* algodão egípcio forte — reservado para acentos        */
  --texto-escuro:    #221E18;
  --texto-claro:     #FAF8F4;
  --sombra-suave:    0 4px 24px rgba(0,0,0,0.18);
  --sombra-forte:    0 8px 40px rgba(0,0,0,0.35);
  --fonte-titulo:    'Aboreto', Georgia, 'Times New Roman', serif;
  --fonte-corpo:     'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --raio:            10px;
  --transicao-padrao: .85s cubic-bezier(.33, 1, .68, 1);
  --max-largura:     1160px;
}

/* ── Reset ── */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;           /* impede o iOS/Safari de ajustar cores no modo escuro */
}

body {
  font-family:             var(--fonte-corpo);
  background-color:        var(--algodao-claro);
  color:                   var(--texto-escuro);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}

img {
  display:   block;
  max-width: 100%;
  height:    auto;
}

/* ── Seções ── */

.secao {
  padding:    80px 20px;
  text-align: center;
}

.bege {
  background-color: var(--algodao-medio);  /* algodão médio — seções 1, 3, 5 */
  color:            var(--texto-escuro);
}

.algodao {
  background-color: var(--algodao-claro);  /* algodão claro — seções 2, 4 */
  color:            var(--texto-escuro);
}

/* ── Títulos ── */

h2 {
  font-family:   var(--fonte-titulo);
  font-size:     clamp(28px, 4vw, 48px);
  line-height:   1.2;
  margin-bottom: 12px;
}

.bege h2 {
  color: var(--dourado);             /* ouro sobre bege — contraste premium */
}

.algodao h2 {
  color: var(--verde-musgo);         /* verde botânico como detalhe de título */
}

.subtitulo {
  font-size:     clamp(15px, 2vw, 18px);
  line-height:   1.7;
  margin-top:    0;
  margin-bottom: 40px;
  opacity:       0.88;
}

/* ── Separador dourado ── */
.linha-dourada {
  display:       block;
  width:         64px;
  height:        2px;
  background:    var(--dourado);
  margin:        0 auto 40px;
  border-radius: 2px;
}

/* ── Bloco de explicação (Seção 2) ── */

.metodo-container {
  display:         flex;
  gap:             40px;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  max-width:       960px;
  margin:          0 auto;
}

.explicacao {
  max-width:   640px;
  text-align:  center;
  line-height: 1.7;
  color:       var(--verde-musgo);  /* verde como detalhe de texto */
  font-size:   16px;
}

.explicacao p {
  margin-bottom: 16px;
}

.explicacao p:last-child {
  margin-bottom: 0;
}

/* ── Pilares do Método (Seção 3) ── */

.pilares-container {
  display:         flex;
  gap:             32px;
  justify-content: center;
  flex-wrap:       wrap;
  max-width:       960px;
  margin:          0 auto;
}

.pilar {
  flex:          1 1 240px;
  max-width:     280px;
  text-align:    center;
  padding:       32px 24px;
  border:        1px solid rgba(72, 114, 96, .20);  /* borda verde sutil */
  border-radius: var(--raio);
  background:    var(--algodao-claro);
}

.pilar-nome {
  font-family:   var(--fonte-titulo);
  font-size:     clamp(17px, 2vw, 20px);
  color:         var(--dourado);
  margin-bottom: 14px;
  line-height:   1.3;
}

.pilar p {
  font-size:   15px;
  line-height: 1.7;
  color:       var(--verde-musgo);
  opacity:     0.9;
}

/* ── Carrossel de feedbacks (Seção 4) ── */

#feedbacks-grid {
  position:  relative;   /* âncora para os botões absolutos */
  max-width: 960px;
  margin:    0 auto;
  /* overflow: hidden fica em .feedbacks-viewport */
}

/* Janela do carrossel — faz o clip horizontal */
.feedbacks-viewport {
  overflow:     hidden;
  touch-action: pan-y; /* alvo real dos touch events; delega horizontal ao JS */
}

.feedbacks-track {
  display:     flex;
  gap:         16px;
  align-items: center;
  cursor:      grab;
}

.feedbacks-track:active {
  cursor: grabbing;
}

/* 3 colunas no desktop */
.feedback-card {
  flex: 0 0 calc((100% - 32px) / 3);
}

.feedback-card img {
  width:            100%;
  height:           auto;
  display:          block;
  border-radius:    10px;
  box-shadow:       0 2px 12px rgba(0, 0, 0, 0.09);
  -webkit-user-drag: none;
  user-select:      none;
}

/* Botões laterais — overlay quase imperceptível */
.feedbacks-btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;

  width:           34px;
  height:          34px;
  border-radius:   50%;
  border:          none;
  background:      rgba(255, 255, 255, 0.30);
  color:           rgba(34, 30, 24, 0.38);
  font-size:       15px;
  line-height:     1;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0.55;

  -webkit-backdrop-filter: blur(3px);
  backdrop-filter:          blur(3px);
  transition:      opacity .25s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;
  appearance:      none;
  -webkit-appearance: none;
}

.feedbacks-btn--prev { left:  10px; }
.feedbacks-btn--next { right: 10px; }

@media (hover: hover) {
  .feedbacks-btn:hover {
    opacity:    1;
    background: rgba(255, 255, 255, 0.65);
  }
}

.feedbacks-btn:active {
  opacity:    1;
  background: rgba(255, 255, 255, 0.65);
}

/* 2 colunas no mobile */
@media (max-width: 560px) {
  .feedback-card {
    flex: 0 0 calc(50% - 8px);
  }
}

/* ── Botão CTA premium (divisória entre seções) ── */

.divisoria-wapp {
  position: relative;
  z-index:  10;
  display:  flex;
  justify-content: center;
  height: 0;
}

.botao-wapp {
  position:   absolute;
  top:        0;
  transform:  translateY(-50%);

  display:         inline-block;
  width:           min(450px, calc(100% - 40px));
  padding:         20px 40px;

  background:      linear-gradient(135deg, var(--dourado-brilho) 0%, var(--dourado) 60%, #a8894f 100%);
  color:           var(--verde-escuro);
  text-decoration: none;

  font-family:     var(--fonte-corpo);
  font-weight:     800;
  font-size:       16px;
  letter-spacing:  0.8px;
  text-transform:  uppercase;
  text-align:      center;

  border:          none;
  border-radius:   var(--raio);

  box-shadow:
    0 6px 24px rgba(191,160,106,0.45),
    0 2px 8px  rgba(0,0,0,0.15);

  transition:
    transform   .25s cubic-bezier(.33, 1, .68, 1),
    box-shadow  .25s cubic-bezier(.33, 1, .68, 1),
    filter      .25s ease;

  white-space: nowrap;
  cursor:      pointer;
  -webkit-tap-highlight-color: transparent;
}

.botao-wapp:hover {
  transform:  translateY(calc(-50% - 3px));
  box-shadow:
    0 10px 32px rgba(191,160,106,0.55),
    0 4px 12px  rgba(0,0,0,0.18);
  filter: brightness(1.08);
}

.botao-wapp:active {
  transform:  translateY(calc(-50% - 1px));
  box-shadow:
    0 4px 16px rgba(191,160,106,0.4),
    0 2px 4px  rgba(0,0,0,0.12);
}

/* Variante de destaque — botão pós prova social (entre seção 4 e 5) */
.botao-wapp--destaque {
  width:          min(520px, calc(100% - 40px));
  padding:        22px 48px;
  font-size:      17px;
  letter-spacing: 1.2px;
  box-shadow:
    0 8px 32px rgba(201,165,94,0.55),
    0 2px 8px  rgba(0,0,0,0.18);
}

.botao-wapp--destaque:hover {
  box-shadow:
    0 14px 40px rgba(201,165,94,0.65),
    0 4px 14px  rgba(0,0,0,0.20);
}

/* ── Responsivo ── */

@media (max-width: 768px) {
  .secao {
    padding: 60px 16px;
  }

  .metodo-container {
    flex-direction: column;
  }
}