/* =========================================================================
 * PÁGINAS DE SEGMENTO — layout novo (direção de arte v1.0)
 * Referência: docs/direcao-de-arte-conag/ e a página de Planos (css/lp-planos.css).
 * Só é carregado quando o segmento usa o layout novo (hoje, Café, Cana, Citros, Grãos e Pecuária).
 * Escrito do celular para o computador. Tudo fica dentro de .lpSeg; o modal,
 * "Quem usa, Recomenda" e as marcas continuam com o visual do geral.css.
 * A DM Sans e a tipografia dos botões vêm de php/fonte-site.php (css/tipografia.css).
 * ========================================================================= */

.lpSeg {
  --segBrancoQuente: #f8f9f5;
  --segEscuro: #172823;
  --segTexto: #202c29;
  --segTextoSuave: #4b5563;
  --segTextoMudo: #6b7280;
  --segVerde: #2f6b45;
  --segVerdeHover: #275a3a;
  --segAzulFechado: #0c8a8a;
  --segBorda: #e5e7eb;
  --segSombra: 0 20px 45px -25px rgba(23,40,35,.4);
  position: relative;
  padding: 64px 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  color: var(--segTexto);
  -webkit-font-smoothing: antialiased;
}
.lpSeg h1, .lpSeg h2, .lpSeg h3, .lpSeg p, .lpSeg a, .lpSeg li { font-family: inherit; }
.lpSeg p { margin: 0 0 12px; }
.lpSeg p:last-child { margin-bottom: 0; }
.lpSeg a:focus-visible { outline: 3px solid var(--segAzulFechado); outline-offset: 4px; }
.lpSeg .container { position: relative; }

/* --- Elementos comuns --- */
.lpSegSelo {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
  color: var(--segTextoMudo);
}
.lpSegSelo::before { content: ''; flex: 0 0 28px; height: 1px; background: currentColor; }
.lpSegTitulo {
  margin: 0; font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
  color: var(--segTexto);
}
.lpSegTitulo strong { font-weight: 500; }
.lpSegCabecalho { max-width: 760px; margin: 0 0 40px; }
.lpSegCentro { text-align: center; }

.lpSegBtn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 17px 23px; border-radius: 5px; background: var(--segVerde);
  font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff !important; text-decoration: none !important;
  transition: background .2s;
}
.lpSegBtn:hover, .lpSegBtn:focus { background: var(--segVerdeHover); }
.lpSegBtn i { font-size: 13px; transition: transform .2s; }
.lpSegBtn:hover i { transform: translateX(4px); }

/* --- Abertura: banner de largura total, com o texto sempre sobre a foto ---
 * Celular: abertura-celular.webp (4:5) ocupa o bloco; degradê escuro de baixo até a metade
 * e o texto em branco na parte de baixo.
 * Computador (992px+): abertura.webp de fundo e o texto no terço esquerdo, com o degradê
 * escuro só desse lado; o produtor, o tablet e a lente de vidro ficam livres à direita. */
.lpSeg.lpSegAbertura { position: relative; overflow: hidden; padding: 0; background: var(--segEscuro); } /* .lpSeg.: vence o padding geral das seções no tablet */
.lpSegBanner { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #e7ebe5; }
.lpSegBanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lpSegBanner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(23,40,35,.92) 0%, rgba(23,40,35,.8) 28%, rgba(23,40,35,.35) 42%, rgba(23,40,35,0) 52%);
}
.lpSegAbertura > .container { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 24px; }
.lpSegAbertura .lpSegSelo { margin-bottom: 10px; color: rgba(255,255,255,.85); }
.lpSegH1 {
  margin: 0 0 10px; font-size: 36px; font-weight: 500; line-height: 1.08; letter-spacing: -.03em;
  color: #fff; overflow-wrap: anywhere;
}
.lpSegH1 strong { font-weight: 500; }
.lpSegSub { max-width: 34em; margin-bottom: 18px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.9); }
.lpSegSub strong { font-weight: 600; color: inherit; }
.lpSegAbertura .lpSegBtn { padding-top: 15px; padding-bottom: 15px; }

/* --- Seção 3: ciclo da safra em blocos de texto e imagem --- */
.lpSegCiclo { background: #fff; }
.lpSegBloco { padding: 40px 0; border-top: 1px solid var(--segBorda); }
.lpSegBloco:last-child { padding-bottom: 0; }
.lpSegBlocoTexto { margin-bottom: 24px; font-size: 16px; line-height: 1.65; color: var(--segTextoSuave); }
.lpSegBlocoTexto p:first-of-type strong:first-child {
  display: block; margin-bottom: 4px; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
  color: var(--segTexto);
}
.lpSegBlocoTexto p:first-of-type strong:first-child + br { display: none; }
.lpSegRecorte { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: #f3f5f3; box-shadow: var(--segSombra); }
.lpSegRecorte img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Seção 4: mesmo formato da seção do painel da home (bgGestao + posicaoContainerGestao do geral.css) ---
 * A mídia é posicionada (z-index) para ficar por cima do bloco branco que sobe por baixo dela,
 * como a img-gestao.png da home. A tipografia é a desta página (DM Sans, tamanhos e pesos),
 * não a da home. */
.lpSegGestaoTexto, .lpSegGestaoTexto h2, .lpSegGestaoTexto h3, .lpSegGestaoTexto p,
.lpSegGestaoFim .lpSegGestaoApos { font-family: 'DM Sans', system-ui, -apple-system, sans-serif; }
.lpSegGestaoTexto { color: #fff; }
.lpSegGestaoTexto h3 {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 16px;
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.lpSegGestaoTexto h3::before { content: ''; flex: 0 0 28px; height: 1px; background: currentColor; }
.lpSegGestaoTexto h2 { margin: 0 0 16px; font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: #fff; } /* = .lpSegTitulo */
.lpSegGestaoTexto h2 strong { font-weight: 500; }
.lpSegGestaoTexto p { max-width: 760px; margin: 0 auto 40px; font-size: 16px; line-height: 1.65; color: #fff; }
.lpSegGestaoMidia {
  position: relative; z-index: 1; width: 93%; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: clamp(16px, 4.4vw, 48px); background: #fff;
  box-shadow: 0 18px 36px 4px rgba(0,0,0,.18); /* a sombra da img-gestao.png */
}
.lpSegGestaoMidia video, .lpSegGestaoMidia img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lpSegVideoEstatico { display: none !important; }
.lpSegVideoEstatico.lpSegSemVideo { display: block !important; }
/* O bloco branco sobe 300px (120px no celular) como na home; o texto começa abaixo da mídia. */
.lpSegGestaoFim { min-height: 0; padding-top: 290px !important; }
.lpSegGestaoFim .lpSegGestaoApos { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.65; color: var(--fTema2); }
/* Botão em pílula da home, com o texto no tamanho e no peso dos botões desta página. */
.lpSegGestaoFim .btnRedondo a { padding: 15px 26px; font-size: 14px; line-height: 1.2; }
.lpSegGestaoFim .btnRedondo a i { font-size: 18px; }

/* --- FAQ (markup e visual do geral.css; aqui só o peso do texto) --- */
#faqPT .panel-title a { font-weight: 700; }
#faqPT .panel-collapse .panel-body { font-weight: 400; }

/* --- Tablet --- */
@media (min-width: 768px) {
  .lpSeg { padding: 96px 0; }
  .lpSegTitulo, .lpSegGestaoTexto h2 { font-size: 40px; }
  .lpSegGestaoTexto p, .lpSegGestaoFim .lpSegGestaoApos { font-size: 18px; }
  .lpSegGestaoTexto p { margin-bottom: 60px; }
  .lpSegCabecalho { margin-bottom: 56px; }
  .lpSegBtn { display: inline-flex; width: auto; }
  .lpSegBlocoTexto { font-size: 18px; }
  .lpSegBlocoTexto p:first-of-type strong:first-child { font-size: 26px; }
}

/* --- Computador --- */
@media (min-width: 992px) {
  .lpSegAbertura { display: flex; align-items: center; height: min(55.9vw, 820px); min-height: 540px; }
  .lpSegBanner { position: absolute; inset: 0; aspect-ratio: auto; }
  .lpSegBanner img { object-position: right top; }
  .lpSegBanner::after {
    background: linear-gradient(90deg, rgba(23,40,35,.9) 0%, rgba(23,40,35,.8) 30%, rgba(23,40,35,.45) 41%, rgba(23,40,35,0) 49%);
  }
  .lpSegAbertura > .container { position: relative; padding-bottom: 0; }
  .lpSegAberturaTexto { max-width: 400px; }
  .lpSegAbertura .lpSegSelo { margin-bottom: 16px; }
  .lpSegH1 { margin-bottom: 16px; font-size: clamp(56px, 4.2vw, 60px); line-height: 1.04; } /* maior que o título da Seção 4 (52,5px) */
  .lpSegSub { margin-bottom: 28px; font-size: 17px; line-height: 1.8; }
  .lpSegAbertura .lpSegBtn { padding-top: 17px; padding-bottom: 17px; }

  /* Blocos lado a lado, alternando o lado da imagem. No celular o texto vem sempre antes. */
  .lpSegBloco { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; padding: 64px 0; }
  .lpSegBloco::before, .lpSegBloco::after { display: none; }
  .lpSegBlocoTexto { margin-bottom: 0; }
  .lpSegBloco:nth-of-type(even) { grid-template-columns: 1.15fr 1fr; }
  .lpSegBloco:nth-of-type(even) .lpSegRecorte { order: -1; }
}
@media (min-width: 1200px) {
  .lpSegAberturaTexto { max-width: 440px; }
}

/* Movimento reduzido: só a imagem estática na Seção 4. */
@media (prefers-reduced-motion: reduce) {
  .lpSeg *, .lpSeg *::before, .lpSeg *::after { transition: none !important; }
  .lpSegGestaoMidia video { display: none; }
  .lpSegVideoEstatico { display: block !important; }
}

/* --- Tablet (768 a 991px): a foto larga inteira, com o texto sobre a parte de baixo --- */
@media (min-width: 768px) and (max-width: 991px) {
  .lpSegH1 { font-size: 44px; } /* maior que os títulos de seção (40px) */
  .lpSegBanner { aspect-ratio: 1920 / 1072; }
  .lpSegBanner img { object-position: right top; }
}

/* --- Celular (até 767px) --- */
@media (max-width: 767px) {
  /* Abertura: o rótulo sai do bloco de texto e vai para o topo da foto, acima do produtor,
     numa pílula de vidro fosco (estilo iPhone) com sombra, para ter leitura sobre o céu e as folhas.
     O grid empilha foto e texto na mesma célula; assim o rótulo se posiciona pela seção. */
  .lpSegAbertura { display: grid; }
  .lpSegBanner, .lpSegAbertura > .container { grid-area: 1 / 1; }
  .lpSegAbertura > .container { position: static; align-self: end; z-index: 1; width: 100%; }
  .lpSegAbertura .lpSegSelo {
    position: absolute; top: 12px; left: 16px; z-index: 2; display: inline-flex; max-width: calc(100% - 32px);
    margin: 0; padding: 7px 13px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: #fff;
    background: rgba(23,40,35,.42); border: 1px solid rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
  }
  .lpSegAbertura .lpSegSelo::before { display: none; }
  /* Foto clara atrás do título ('degradeAlto' no segmento): o degradê sobe até perto do rótulo. */
  .lpSegDegradeAlto .lpSegBanner::after {
    background: linear-gradient(0deg, rgba(23,40,35,.92) 0%, rgba(23,40,35,.85) 40%, rgba(23,40,35,.55) 62%, rgba(23,40,35,0) 80%);
  }
  .lpSegDegradeAlto .lpSegH1 { text-shadow: 0 1px 14px rgba(0,0,0,.3); }

  .lpSegGestaoFim { padding-top: 110px !important; }
  /* Mídia na largura toda da área segura (16px de margem); a versão vertical, se existir, em 4:5. */
  .lpSegGestaoMidia { width: 100%; }
  .lpSegGestaoMidia.lpSegComCelular { aspect-ratio: 4 / 5; }

}

/* =========================================================================
 * Mídia ausente em img/segmentos/<código>/: a parte fica só com o texto.
 * Abertura sem abertura.webp: fundo branco quente e texto escuro. Bloco sem imagem: texto em
 * uma coluna. Seção 4 sem mídia: só o texto no azul.
 * Fica no fim do arquivo para vencer as regras da abertura com foto, inclusive as do celular.
 * ========================================================================= */
.lpSeg.lpSegAberturaClara { display: block; height: auto; min-height: 0; padding: 48px 0 56px; background: var(--segBrancoQuente); }
.lpSegAberturaClara > .container { position: relative; padding-bottom: 0; }
.lpSegAberturaClara .lpSegAberturaTexto { max-width: 640px; }
.lpSegAberturaClara .lpSegSelo {
  position: static; display: flex; max-width: none; margin: 0 0 12px; padding: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--segTextoMudo);
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lpSegAberturaClara .lpSegSelo::before { display: block; }
.lpSegAberturaClara .lpSegH1 { margin-bottom: 14px; font-size: 32px; color: var(--segTexto); overflow-wrap: normal; }
.lpSegAberturaClara .lpSegSub { margin-bottom: 24px; font-size: 16px; line-height: 1.65; color: var(--segTextoSuave); }

.lpSegBlocoSoTexto .lpSegBlocoTexto { max-width: 760px; margin-bottom: 0; }

/* Sem mídia, o bloco branco sobe só o bastante para mostrar o azul nos cantos arredondados. */
.lpSegGestao.lpSegGestaoSemMidia { padding-bottom: 110px !important; }
.lpSegGestaoSemMidia .lpSegGestaoTexto p { margin-bottom: 0; }
.lpSegGestaoFim.lpSegGestaoSemMidia { margin-top: -50px; padding-top: 64px !important; }

@media (min-width: 768px) {
  .lpSegAberturaClara .lpSegH1 { font-size: 44px; }
  .lpSegAberturaClara .lpSegSub { font-size: 18px; }
}
@media (min-width: 992px) {
  .lpSeg.lpSegAberturaClara { padding: 80px 0; }
  .lpSegAberturaClara .lpSegH1 { font-size: clamp(44px, 3.6vw, 52px); line-height: 1.06; }
  .lpSegBloco.lpSegBlocoSoTexto { display: block; }
}