/* =============================================================================
   Agro Performa — refinamento mobile da variante.

   Carregado SOMENTE por nova-abordagem.html. A página aprovada (index.html)
   não enxerga este arquivo e continua byte a byte como foi aprovada.

   Princípio: nenhuma palavra da copy muda. O que muda é composição —
   escala tipográfica própria de celular, ritmo vertical, quebras de linha,
   recorte de imagem e área de toque.
   ============================================================================= */

/* ====================== DIMENSÕES DO HERO ======================
   Os dois blocos abaixo do hero são dimensões da operação comercial.
   Mesmas regras visuais dos blocos equivalentes do main.css (seção #hero),
   com nomes da nova narrativa. O main.css não muda: o index.html usa os nomes antigos. */
.hero__dimensoes{padding-bottom:clamp(48px,6vw,88px)}
.dimensoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(20px,4vw,64px)}
.dimensao{padding-top:30px;display:grid;grid-template-columns:1fr auto;gap:clamp(14px,3vw,32px);align-items:end}
.dimensao + .dimensao{border-left:1px solid var(--ap-border-dark);padding-left:clamp(0px,4vw,56px)}
.dimensao__nome{margin-top:14px;font-size:clamp(21px,2vw,28px);font-weight:var(--ap-weight-black);line-height:1.2;text-transform:uppercase;letter-spacing:.01em;color:var(--ap-text-inverse)}
.dimensao__numero{font-size:clamp(44px,5vw,76px);font-weight:var(--ap-weight-black);line-height:.82;color:rgba(255,255,255,.1)}

/* ====================== QUEM CONDUZ — trechos de leitura ======================
   Verde claro + negrito só em quem cada mentor atende e no resumo das áreas de
   atuação. Mesmo padrão nos dois cards. */
.mentores__grade .mentor__bio strong{color:var(--ap-green-400);font-weight:var(--ap-weight-bold)}

/* ====================== ATÉ 767px — COMPOSIÇÃO DE CELULAR ==================== */
@media (max-width: 767px){

  /* --- respiro lateral: 20px era apertado para tipografia deste tamanho --- */
  .wrap{padding-inline:22px}

  /* --- ritmo vertical: seções mais curtas, respiro entre mensagens --- */
  .secao__interno{padding-block:52px}
  h2 + p,h2 + .texto-longo,h2 + .grade,h2 + .escada,h2 + .trilha{margin-top:16px}

  /* ============================ HERO ============================ */
  .hero__topo{padding:36px 0 30px;gap:30px}

  /* O H1 passa a escalar por vw com teto próprio de celular.
     Antes: 37px em 5 linhas. Agora: ~31px em 4 linhas, com mais ar entre elas. */
  .hero__titulo{
    font-size:clamp(27px, 8.1vw, 33px);
    line-height:1.06;
    letter-spacing:-.015em;
  }
  .hero__sub{
    margin-top:20px;
    font-size:16px;
    line-height:1.62;
    color:var(--ap-text-inverse-muted);
  }
  .hero__acao{margin-top:26px;gap:12px;max-width:none}
  .nota-cta{font-size:13.5px}

  /* a foto do hero deixa de ser um retângulo alto: recorte próprio de celular */
  /* height:auto é obrigatório: sem ele o atributo height do HTML vence o aspect-ratio */
  .hero__foto{aspect-ratio:4/3;height:auto;max-height:none;object-position:58% 40%}
  .hero__risco{left:-6px;width:38%;height:3px}

  /* as duas dimensões viram blocos empilhados com divisória, não colunas */
  .hero__dimensoes{padding-bottom:44px}
  .dimensoes{gap:0}
  .dimensao{
    padding:22px 0;
    grid-template-columns:1fr auto;
    gap:14px;
    align-items:center;
    border-top:1px solid var(--ap-border-dark);
  }
  .dimensao + .dimensao{border-left:0;padding-left:0}
  .dimensao__nome{margin-top:8px;font-size:19px;line-height:1.24}
  .dimensao__numero{font-size:44px;line-height:1}

  /* ======================= TÍTULOS DE SEÇÃO ======================= */
  /* Antes vários H2 caíam em 6 e 7 linhas. Escala própria resolve sem cortar texto. */
  .titulo-secao{font-size:clamp(23px, 6.6vw, 27px);line-height:1.1;letter-spacing:-.015em}
  .dependencia__titulo{font-size:clamp(32px, 10.5vw, 44px);line-height:1}
  /* balance equilibra 2-3 linhas; pretty evita palavra órfã em títulos mais longos */
  .hero__titulo,.dependencia__titulo{text-wrap:balance}
  .titulo-secao,.dobra__titulo,.mentores__titulo,.passo__titulo{text-wrap:pretty}

  /* ======================= O PROBLEMA ======================= */
  .lista-dores{margin-top:28px}
  .dor{grid-template-columns:34px 1fr;gap:10px;padding:16px 0}
  .dor__txt{font-size:17px;line-height:1.42}
  .dor__n{font-size:13px}
  .problema__fecho{margin-top:26px;font-size:18px;line-height:1.4;max-width:none}

  /* ======================= DOBRA FOTOGRÁFICA ======================= */
  .dobra__interno{padding:110px 0 56px}
  .dobra__titulo{font-size:clamp(26px, 7.4vw, 32px);line-height:1.08}
  .dobra__sub{margin-top:18px;font-size:16px;line-height:1.6}

  /* ======================= O TERRITÓRIO ======================= */
  .territorio__sub{margin-top:20px;font-size:16px;line-height:1.62}
  /* os conceitos viram lista organizada, não um bloco de texto corrido */
  .territorio__lista{
    margin-top:30px;display:grid;gap:0;
    font-size:17px;line-height:1.3;
  }
  .territorio__lista span{padding:11px 0;border-bottom:1px solid var(--ap-border-dark)}
  .territorio__lista .barra{display:none}
  .territorio__lista span:last-child{border-bottom:0}

  /* ======================= OS TRÊS PÚBLICOS ======================= */
  .perfis__cabecalho{gap:14px}
  .perfis__intro{font-size:16px;line-height:1.6}
  .perfis__grade{gap:16px;margin-top:30px}
  /* cada público vira um cartão fechado: reconhecimento imediato */
  .perfis__grade > div{
    background:var(--ap-offwhite);
    border:1px solid var(--ap-border-subtle);
    border-radius:var(--ap-radius-lg);
    padding:20px;
  }
  .perfil__rotulo{margin-bottom:12px}
  .perfil__frase{font-size:18px;line-height:1.34;padding-left:14px}
  .faixa-foto{margin-top:30px}
  .faixa-foto img.foto{height:auto;aspect-ratio:16/9;min-height:0;max-height:230px}
  .faixa-foto__legenda{font-size:16px;line-height:1.3;max-width:20ch}

  /* ======================= AS QUATRO FRENTES ======================= */
  .oquee__sub{margin-top:20px;font-size:16px;line-height:1.62}
  .frentes{margin-top:32px}
  .frente{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .frente h3{font-size:20px;gap:14px}
  .frente p{font-size:15.5px;line-height:1.58}

  /* ======================= SCORE ======================= */
  .score{gap:28px}
  .score__titulo{font-size:clamp(21px, 5.9vw, 25px)}
  .score__sub{margin-top:18px;font-size:16px;line-height:1.62}
  /* duas colunas compactas: as nove dimensões cabem sem fonte miúda */
  .score__dimensoes{grid-template-columns:1fr 1fr;gap:0 18px}
  .score__dimensoes li{font-size:15.5px;padding:12px 0}

  /* ======================= MENTORES ======================= */
  /* cada mentor ganha o seu próprio momento, um embaixo do outro */
  .mentores__cabecalho{padding:52px 0 26px}
  .mentores__titulo{font-size:clamp(25px, 7.2vw, 31px);line-height:1.08}
  .mentores__grade{gap:48px;padding-bottom:40px}
  .mentor__foto{aspect-ratio:4/5;height:auto;object-position:center 15%}
  .mentor__verbo{font-size:clamp(27px, 7.6vw, 34px);line-height:1.04}
  .mentor__selo{left:20px;right:20px;bottom:22px}
  .mentor__nome{margin-top:20px;font-size:24px}
  .mentor__areas{margin-top:8px;font-size:11.5px;letter-spacing:.12em;line-height:1.5}
  .mentor__bio{margin-top:14px;font-size:16px;line-height:1.62;max-width:none}
  .mentor__credenciais{margin-top:18px;padding-top:18px;gap:12px;max-width:none}
  .mentor__credenciais li{font-size:15.5px;grid-template-columns:26px 1fr}
  .mentores__faixa{padding-bottom:52px}
  .mentores__faixa .foto{height:auto;aspect-ratio:16/9;min-height:0;max-height:220px}

  /* ======================= CRESCIMENTO QUE DEPENDE DE POUCOS ======= */
  /* empilha naturalmente; título e texto nunca disputam largura */
  .dependencia{gap:24px}
  .dependencia__citacao{font-size:19px;line-height:1.38;max-width:none}
  .dependencia__nota{margin-top:16px;font-size:16px;line-height:1.62;max-width:none}

  /* ======================= BLOCO VERDE ======================= */
  /* escada com progressão real: cada degrau maior que o anterior */
  .virada__interno{gap:10px}
  .degrau--1{font-size:20px}
  .degrau--2{font-size:22px}
  .degrau--3{font-size:24px}
  .degrau--4{font-size:26px}
  .degrau--5{font-size:30px;line-height:1.08;margin-top:4px}
  .degrau{line-height:1.12}

  /* ======================= É PARA VOCÊ / NÃO É PARA ======================= */
  .qualificacao{gap:16px;margin-top:24px}
  .cartao-sim,.cartao-nao{padding:24px 20px}
  .qualificacao h3{font-size:20px;margin-bottom:16px}
  .qualificacao ul{gap:13px}
  .qualificacao li{grid-template-columns:20px 1fr;gap:11px;font-size:15.5px;line-height:1.5}

  /* ======================= FAQ ======================= */
  .faq__interno{padding-block:52px}
  .faq__titulo{margin-bottom:22px;font-size:clamp(21px, 5.9vw, 25px)}
  .faq__botao{padding:18px 20px;gap:16px;font-size:16px;min-height:60px;line-height:1.4}
  .faq__resposta p{padding:0 20px 20px;font-size:15.5px;line-height:1.62}

  /* ======================= CTA FINAL ======================= */
  .passo__titulo{font-size:clamp(27px, 7.8vw, 34px);line-height:1.06}
  .passos{gap:18px;margin-top:30px}
  .passo{padding-top:14px}
  .passo p:last-child{font-size:15.5px;line-height:1.5}
  .passo__acao{margin-top:30px;max-width:none}

  /* ======================= BOTÕES ======================= */
  /* largura total e alvo de toque generoso */
  .btn{width:100%;min-height:56px;font-size:13.5px;padding:16px 20px}
  .btn--sm{width:auto;min-height:44px;font-size:12px;padding:10px 16px}
  .acoes{gap:12px}

  /* ======================= CABEÇALHO ======================= */
  .cabecalho__interno{min-height:62px;gap:12px}
  .cabecalho__logo{height:21px}

  /* ======================= RODAPÉ ======================= */
  .rodape__interno{padding-block:52px}
  .rodape__logo{height:30px}
  .rodape__texto{margin-top:24px;font-size:15px;line-height:1.62}
  .rodape__posicionamento{margin-top:22px;font-size:19px;line-height:1.3}
  .rodape__divisoria{margin-top:32px}
  .rodape__base{margin-top:18px;gap:12px;font-size:11px;line-height:1.5}
}

/* ============ ATÉ 400px — telas estreitas (320, 360, 375, 390) ============ */
@media (max-width: 400px){
  .wrap{padding-inline:20px}
  .hero__titulo{font-size:clamp(25px, 7.9vw, 31px)}
  .titulo-secao{font-size:clamp(22px, 6.4vw, 25px)}
  /* precisa vir depois de .titulo-secao para não ser sobrescrito */
  .dependencia__titulo{font-size:clamp(30px, 9.8vw, 40px);line-height:1}
  .score__dimensoes{gap:0 14px}
  .score__dimensoes li{font-size:14.5px}
  .btn{font-size:12.5px;padding:16px 16px}
  .faq__botao{padding:17px 17px;font-size:15.5px}
  .qualificacao li{font-size:15px}
}

/* ================= ATÉ 340px — o piso (320px) ================= */
@media (max-width: 340px){
  .wrap{padding-inline:16px}
  .hero__titulo{font-size:24px;line-height:1.08}
  .titulo-secao{font-size:21px}
  .dependencia__titulo{font-size:30px}
  .score__dimensoes{grid-template-columns:1fr}
  .dimensao__numero{font-size:36px}
  .degrau--5{font-size:26px}
  .btn{font-size:12px;letter-spacing:.04em}
}

/* ============ TOQUE: feedback no celular, hover só onde há mouse ============ */
@media (hover: none){
  .btn:hover{transform:none;box-shadow:var(--ap-shadow-1, none);background:var(--ap-green-500)}
  .btn:active{transform:scale(.985);background:var(--ap-green-600);border-color:var(--ap-green-600)}
  .faq__botao:hover{background:transparent}
  .faq__botao:active{background:var(--ap-green-050)}
}

/* =============================================================================
   CORREÇÕES ESTRUTURAIS — valem em todas as larguras

   Encontradas durante a auditoria mobile. Existem também na página aprovada
   (index.html), que não foi alterada. Ao promover esta variante, levar para
   o main.css.
   ============================================================================= */

/* 1. O atalho `padding` em .hero__topo e .mentores__* zerava o padding-inline
      herdado de .wrap. Entre 768px e 1180px, onde o max-width ainda não cria
      recuo, o texto encostava na borda da tela. */
.hero__topo,
.mentores__cabecalho,
.mentores__grade,
.mentores__faixa,
.hero__dimensoes{
  padding-inline:20px;
}

/* 2. O H1 escalava por 9.4cqi sobre um container que, no tablet, ocupa a
      largura inteira — por isso ficava MAIOR em 768px (72px) do que em
      1024px (48px). O teto passa a considerar também a largura da janela. */
@media (min-width:768px) and (max-width:1023px){
  .hero__titulo{font-size:clamp(34px, 6.4vw, 50px)}
}

/* =============================================================================
   HERO MANIFESTO — headline longa em largura total (só nesta variante)

   A headline tem ~100 caracteres. Na coluna ao lado da foto ela caía em 7
   linhas estreitas. Aqui ela ocupa a largura do hero em quatro versos que
   seguem o sentido da frase (quem / o que fazem / com o quê / resultado);
   texto de apoio + CTA e foto ficam lado a lado abaixo.
   No celular os versos fluem juntos e a ordem segue H1 → texto → CTA → foto.
   ============================================================================= */
/* flex-start: sem ele o texto de apoio centralizava contra a foto e abria um
   vão entre a headline e o parágrafo, empurrando o CTA para fora da dobra */
.hero__topo--manifesto{container-type:inline-size;align-items:flex-start}
.hero__manifesto{flex:1 1 100%}
.hero__verso{display:block}
/* o respiro entre headline e parágrafo passa a ser o gap do hero: no desktop o
   parágrafo alinha com o topo da foto; no celular não dobra o espaço (gap + margem) */
.hero__topo--manifesto .hero__sub{margin-top:0}

/* tamanho pela largura do hero: o verso mais longo ("O agro está cheio de
   especialistas", ~19.2em) ocupa quase toda a linha, com folga de ~3% */
@media (min-width:768px){
  .hero__topo--manifesto .hero__manifesto{
    font-size:clamp(34px, 5.05cqi, 72px);
    line-height:1;
    letter-spacing:0;
    text-wrap:nowrap;
  }
}

/* celular: os versos continuam sendo blocos. A fonte é calculada para que
   "que sabem transformar" (~13.13em, o verso do meio mais longo) caiba
   inteiro; o primeiro e o último verso se dividem em duas linhas equilibradas.
   Resultado: 6 linhas com sentido, em vez de 7 quebradas no meio das ideias.
   Abaixo de ~360px o piso de 23px prevalece e os versos do meio podem quebrar. */
@media (max-width:767px){
  .hero__topo--manifesto .hero__manifesto{
    font-size:clamp(23px, 7.45cqi, 34px);
    line-height:1.06;
  }
  .hero__verso{text-wrap:balance}
}