/* =============================================================================
   Agroperforma — versão curta (versao-curta.html)

   Carregado depois de main.css e mobile.css, só por esta página.
   Reestruturação pedida na reunião Lucas / Alexandre / Renan: página mais
   curta, focada em lucro, previsibilidade e liberdade para delegar.
   ============================================================================= */

/* ---------- token novo: laranja dos botões (pedido do Alexandre) ----------
   Texto verde-escuro sobre laranja: contraste ~8:1. Branco sobre laranja
   ficaria em ~2,6:1 e reprovaria. */
:root{
  --ap-laranja:#F28C1E;
  --ap-laranja-400:#FF9D33;
  --ap-laranja-600:#D97A12;
  --ap-shadow-laranja:0 10px 28px rgba(242,140,30,.32);
}
.btn{background:var(--ap-laranja);border-color:var(--ap-laranja);color:var(--ap-forest-900)}
.btn:hover{background:var(--ap-laranja-400);border-color:var(--ap-laranja-400);color:var(--ap-forest-900);box-shadow:var(--ap-shadow-laranja)}
.btn:active{background:var(--ap-laranja-600);border-color:var(--ap-laranja-600)}
@media (hover:none){
  .btn:hover{background:var(--ap-laranja);box-shadow:none}
  .btn:active{background:var(--ap-laranja-600);border-color:var(--ap-laranja-600)}
}
.btn{font-size:14px}
.btn--sm{font-size:12.5px}

/* ---------- abertura curta: foto de fundo em cover ----------
   Cena: confinamento, gado, estrutura de nutrição/indústria e os dois
   profissionais. No desktop a composição fica ampla (centro ligeiramente
   abaixo, para não cortar o gado); no celular o foco vai para a direita,
   onde estão os dois profissionais e os silos. O véu verde-escuro é mais
   denso do lado do texto e abre para a direita. */
.abre{
  background:var(--ap-forest-900) url("../images/hero-confinamento-industria.jpg") 50% 62% / cover no-repeat;
}
.abre::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(1,38,32,.90) 0%,rgba(1,38,32,.80) 38%,rgba(1,38,32,.52) 64%,rgba(1,38,32,.28) 100%),
    linear-gradient(180deg,rgba(1,26,21,.35) 0%,rgba(1,26,21,0) 30%,rgba(1,26,21,0) 70%,rgba(1,26,21,.45) 100%);
}
.abre__interno{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr);
  align-items:center;min-height:clamp(520px,58vw,700px);
  padding:clamp(48px,7vw,104px) 20px clamp(48px,7vw,104px);
}
.abre__texto{max-width:640px}
.abre__titulo{
  font-size:clamp(34px,4.5vw,62px);font-weight:var(--ap-weight-black);
  line-height:1;letter-spacing:.005em;text-transform:uppercase;text-wrap:balance;
  color:var(--ap-text-inverse);
}
.abre__sub{margin-top:clamp(20px,2.6vw,30px);max-width:44ch;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.86)}
.abre__acao{display:grid;gap:14px;margin-top:clamp(28px,3vw,40px);max-width:460px}

/* ---------- o problema ---------- */
.problema__titulo{max-width:22ch}
.lista-dores{margin-top:clamp(32px,4vw,52px)}

/* ---------- para quem é ---------- */
.publicos__titulo{margin-top:24px;max-width:24ch;font-size:clamp(27px,3.6vw,50px);line-height:1.02}
.publicos{
  display:grid;grid-template-columns:1fr;
  gap:clamp(14px,2vw,24px);margin-top:clamp(32px,4vw,52px);
}
/* 5 perfis: 3+2 no tablet, 5 em linha no desktop largo (evita cartão órfão) */
@media (min-width:600px){.publicos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){.publicos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.publicos{grid-template-columns:repeat(5,1fr)}}
.publico{
  padding:clamp(20px,2.4vw,28px);border-radius:var(--ap-radius-lg);
  background:var(--ap-offwhite);border:1px solid var(--ap-border-subtle);
}
.publico__nome{font-family:var(--ap-font-display);font-size:var(--ap-text-eyebrow);font-weight:var(--ap-weight-black);letter-spacing:.16em;text-transform:uppercase;color:var(--ap-green-800)}
.publico__frase{margin-top:12px;font-size:clamp(16px,1.4vw,18px);font-weight:var(--ap-weight-semibold);line-height:1.4;color:var(--ap-text-strong)}

/* ---------- o que é a Agroperforma ---------- */
.oquee__logo{display:block;height:clamp(44px,5.4vw,72px);width:auto}
.oquee__pergunta{margin-top:clamp(24px,3vw,36px);max-width:16ch;font-size:clamp(34px,5.6vw,80px);line-height:.96}
.oquee__resposta{margin-top:clamp(22px,2.6vw,30px);max-width:60ch;font-size:clamp(17px,1.5vw,21px);line-height:1.58;color:var(--ap-text-inverse-muted)}
.oquee__rotulo{margin-top:clamp(40px,5vw,64px)}
.ganhos{margin-top:18px;border-top:2px solid var(--ap-green-500)}
.ganho{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px clamp(20px,4vw,56px);padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--ap-border-dark)}
.ganho h3{display:flex;gap:18px;align-items:baseline;font-size:clamp(21px,2.2vw,29px);font-weight:var(--ap-weight-black);text-transform:uppercase;color:var(--ap-text-inverse)}
.ganho h3 span{font-size:14px;color:var(--ap-green-500)}
.ganho p{font-size:16px;line-height:1.6;color:var(--ap-text-inverse-muted)}

/* ---------- mentores: divisória entre "o que é" e "quem conduz" ---------- */
#mentores{border-top:1px solid var(--ap-border-dark)}

/* ---------- mentores: o texto sai de cima do rosto ----------
   A foto vira um quadro próprio e o selo (rótulo + frase) fica numa faixa
   escura abaixo dela, dentro do mesmo card. Uma transição suave no pé da
   foto evita corte seco. */
#mentores .moldura{display:flex;flex-direction:column;background:var(--ap-forest-800)}
#mentores .mentor__foto{display:block;aspect-ratio:1/1;height:auto;object-position:center 20%}
#mentores .mentor__veu{inset:0 0 auto 0;aspect-ratio:1/1;height:auto;opacity:.55}
#mentores .mentor__selo{
  position:relative;left:auto;right:auto;bottom:auto;
  padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,32px) clamp(26px,3vw,36px);
  background:var(--ap-forest-800);
}
#mentores .mentor__selo::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:72px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,61,50,0) 0%,var(--ap-forest-800) 100%);
}
#mentores .mentor__verbo{font-size:clamp(28px,3.2vw,44px);line-height:1}
#mentores .mentor__risco{z-index:2}

/* ---------- celular ---------- */
@media (max-width:767px){
  /* celular: a cena fica no alto (rostos dos dois profissionais e silos,
     com véu leve) e o texto desce para a base, sobre o chão e o gado, onde
     o véu é denso e o contraste é maior. */
  .abre{background-image:url("../images/hero-confinamento-industria-mobile.jpg");background-position:64% 0%}
  .abre::before{background:linear-gradient(180deg,rgba(1,38,32,.26) 0%,rgba(1,38,32,.40) 30%,rgba(1,38,32,.86) 52%,rgba(1,38,32,.94) 100%)}
  .abre__interno{grid-template-columns:1fr;min-height:640px;align-items:end;padding:290px 22px 40px;gap:0}
  .abre__titulo{font-size:clamp(30px,8.4vw,36px);line-height:1.04;letter-spacing:-.01em}
  .abre__sub{margin-top:18px;font-size:16.5px;line-height:1.58;max-width:none}
  .abre__acao{margin-top:24px;max-width:none}
  .problema__titulo{max-width:none}
  .lista-dores{margin-top:26px}
  .publicos__titulo{font-size:clamp(23px,6.6vw,27px);line-height:1.1}
  .publicos{gap:12px;margin-top:26px}
  .publico{padding:18px 18px 20px}
  .publico__frase{font-size:16.5px;line-height:1.42;margin-top:8px}
  .oquee__logo{height:40px}
  .oquee__pergunta{font-size:clamp(30px,8.6vw,36px);line-height:1.02;margin-top:22px}
  .oquee__resposta{margin-top:18px;font-size:16.5px;line-height:1.6}
  .oquee__rotulo{margin-top:36px}
  .ganho{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .ganho h3{font-size:19px;gap:14px}
  .ganho p{font-size:15.5px;line-height:1.55}
  .mentores__cabecalho{padding:48px 22px 24px}
  /* retrato mais baixo no celular: a seção dos mentores era 2,7 telas */
  .mentor__foto{aspect-ratio:4/3;object-position:center 12%}
  #mentores .mentor__foto,#mentores .mentor__veu{aspect-ratio:4/3}
  #mentores .mentor__selo{padding:16px 20px 26px}
  #mentores .mentor__selo::before{height:48px}
  #mentores .mentor__verbo{font-size:clamp(26px,7.4vw,32px)}
  .mentores__grade{gap:40px;padding-bottom:36px}
  .mentor__bio{font-size:15.5px;line-height:1.58}
  .faq__interno{padding-block:44px}
  .secao__interno{padding-block:46px}
  .passo__titulo{font-size:clamp(28px,8vw,34px)}
}
@media (max-width:400px){
  .abre__titulo{font-size:clamp(28px,8.2vw,33px)}
  .oquee__pergunta{font-size:clamp(28px,8.4vw,33px)}
}