/* ============================================================
   sections.css — composição de cada seção da home
   (hero, visão geral, quem somos, serviços — fundiária, ambiental
    e consultoria — e contato)
   Depende de: tokens.css, base.css, components.css
   ============================================================ */

/* ---------- hero ----------
   A foto ocupa a seção inteira; por cima dela, um degradê no verde da marca
   que é sólido à direita (onde fica o texto) e some em direção à esquerda,
   deixando a foto aparecer. As cores são fixas, não seguem o tema: o texto
   é sempre claro sobre o verde. A borda de baixo é inclinada. */
.hero{
  --hero-green:92,107,53;        /* #5c6b35 — --accent do tema claro */
  --hero-green-deep:47,56,27;    /* tom mais escuro do mesmo verde */
  position:relative; isolation:isolate; overflow:hidden;
  color:#fff; background:rgb(var(--hero-green-deep));
  padding-top:calc(var(--header-h) + 6rem); padding-bottom:8rem;
  min-height:min(92vh,820px); display:flex; align-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4.5vw),48% 100%,0 calc(100% - 2.5vw));
}
.hero__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:30% center; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  /* sombra no alto, para o cabeçalho transparente ficar legível sobre a foto */
  background:linear-gradient(180deg, rgba(14,18,9,.55) 0, rgba(14,18,9,0) calc(var(--header-h) + 5rem)),
    linear-gradient(90deg,
    rgba(var(--hero-green),0) 0%,
    rgba(var(--hero-green),.25) 28%,
    rgba(var(--hero-green),.82) 48%,
    rgba(var(--hero-green-deep),.96) 70%,
    rgb(var(--hero-green-deep)) 100%);
}
.hero .container{ display:flex; justify-content:flex-end; width:100%; }
.hero__copy{ width:min(100%,560px); }
.hero h1{ font-size:clamp(2.4rem,1.6rem + 3.4vw,3.9rem); line-height:1.16; letter-spacing:-.01em; margin-bottom:1.3rem; color:#fff; }
.hero h1 em{ font-style:italic; color:#dfe3c9; }
.hero p.lede{ color:rgba(255,255,255,.92); max-width:48ch; margin-bottom:.9rem; font-size:1.08rem; }
/* linha de apoio abaixo da chamada: lista o que fazemos, em corpo menor */
.hero__support{ color:rgba(255,255,255,.78); max-width:52ch; margin-bottom:2.1rem; font-size:.95rem; }
/* botões sobre o verde: o primário vira claro para não sumir no fundo */
.hero .btn--primary{ background:#fff; color:#3f4a25; }
.hero .btn--primary:hover{ background:#dfe3c9; }
.hero .btn--outline{ border-color:rgba(255,255,255,.7); color:#fff; }
.hero .btn--outline:hover{ border-color:#fff; background:rgba(255,255,255,.1); }
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- faixa de visão geral ---------- */
.intro-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:3rem; }
.intro-item{ display:flex; gap:1rem; align-items:flex-start; }
.intro-item .ic-wrap{
  width:44px; height:44px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.intro-item h3{ font-size:1.05rem; margin-bottom:.35rem; }
.intro-item p{ color:var(--ink-soft); font-size:.94rem; }

/* ---------- faixas brancas ----------
   Quem somos, Fundiária e Consultoria em branco; Ambiental e Contato ficam
   no fundo da página, alternando as faixas. No tema escuro, --bg-white é
   um tom só um pouco mais claro que o fundo. */
#quem-somos,
#fundiaria,
#consultoria{ background:var(--bg-white); }

/* fio fino entre uma seção e a seguinte, marcando a divisão */
.section + .section{ border-top:1px solid var(--line); }

/* ---------- quem somos ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about-copy p{ color:var(--ink-soft); margin-top:1rem; }

/* Foto com cantos arredondados; --radius controla a curva. */
.photo-offset{ --radius:18px; }
.photo-offset img{
  display:block; width:100%; height:auto;
  border-radius:var(--radius);
}
.badge-year{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-label); font-size:.78rem;
  letter-spacing:.06em; color:var(--accent-strong); background:var(--accent-soft); padding:.4rem .8rem; border-radius:2px; margin-top:1.5rem;
}

/* números em destaque: faixa de ponta a ponta sobre a foto da paisagem,
   com uma camada escura por cima para o texto branco ficar legível (igual
   nos dois temas). Os três números ficam no .container, alinhados ao resto
   do conteúdo. No celular viram uma coluna só. */
.stats{
  margin-top:4.5rem; color:#fff;
  background:
    linear-gradient(rgba(14,18,9,.35), rgba(14,18,9,.35)),
    url('../img/08-paisagem-lavoura-numeros.jpg') center 60% / cover no-repeat;
}
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.stat{ padding:clamp(3rem,6vw,4.5rem) 1.5rem; text-align:center; }
.stat__number{
  font-family:var(--font-display); font-weight:700; line-height:1; letter-spacing:-.02em;
  font-size:clamp(2.6rem,1.8rem + 2.6vw,3.6rem); color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.stat__prefix{ margin-right:.04em; }
.stat__unit{ font-size:.5em; letter-spacing:0; margin-left:.12em; color:#dfe3c9; }
.stat__label{
  margin-top:.8rem; font-family:var(--font-label); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.86);
}
@media (max-width:640px){
  .stats__grid{ grid-template-columns:1fr; padding-block:1.5rem; }
  .stat{ padding:1.25rem 1rem; }
}

/* missão, visão e valores: três colunas soltas numa faixa com o fundo da
   página (bege), de ponta a ponta. A faixa leva o espaçamento de baixo da
   seção, para o bege ir até a divisa com a seção seguinte. */
#quem-somos{ padding-bottom:0; }
.purpose-band{ background:var(--bg); padding-block:clamp(4.25rem,8vw,7rem); }
.purpose-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.purpose-item .ic-wrap{
  width:40px; height:40px; border:1px solid rgba(var(--inverse-rgb),.25); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--accent);
}
.purpose-item h3{ font-size:1.1rem; margin-bottom:.5rem; }
.purpose-item p{ color:var(--ink-soft); font-size:.93rem; }

/* ---------- serviços (fundiária, ambiental, consultoria) ----------
   Cada grupo é uma seção: o título fica numa coluna estreita à esquerda,
   separado por um fio, e os cartões ocupam o resto da largura. */
.svc-group{ display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:clamp(1.75rem,3.5vw,2.75rem); align-items:start; }
.svc-intro{ border-right:1px solid var(--line); padding-right:clamp(1rem,2vw,1.75rem); }
/* O título quebra entre palavras, nunca no meio delas — o que exigiria
   partir "Regularização"/"Regularización" ao meio nesta coluna estreita.
   O corpo do título é menor que o das outras seções justamente para a
   palavra mais longa caber inteira na largura da coluna. */
.svc-intro .title{
  font-size:clamp(1.65rem,1.1rem + 1.6vw,2.1rem);
  overflow-wrap:normal; word-break:keep-all; hyphens:none;
}
.svc-intro .lede{ margin-top:.9rem; font-size:.97rem; }

/* Título em cartão (grupo com foto): foto em cima, faixa verde-escura com
   título e texto embaixo, cantos retos. As cores são fixas, como no hero:
   o texto é sempre claro sobre o verde, nos dois temas. */
.svc-intro--photo{
  border-right:none; padding-right:0; overflow:hidden;
  background:rgb(47,56,27); color:#fff;
}
.svc-intro__img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.svc-intro__body{ padding:1.3rem 1.3rem 1.5rem; }
.svc-intro--photo .title{ color:#fff; }
.svc-intro--photo .title em{ color:#dfe3c9; }
.svc-intro--photo .lede{ color:rgba(255,255,255,.82); }

/* Seis colunas de apoio: o --span de cada cartão (vem do HTML) diz quantas
   ele ocupa, o que dá fileiras de até três cartões — 5 cartões viram 3 + 2,
   com os dois de baixo mais largos, fechando a largura. */
.svc-cards{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; }

.svc-card{
  grid-column:span var(--span,2);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:2px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }

.svc-card__body{ flex:1 1 auto; padding:1rem 1.1rem 1.3rem; }
.svc-card__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem;
  text-decoration:none; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.svc-card__head h3{ font-size:1rem; line-height:1.28; transition:color .2s ease; }
.svc-card__arrow{
  width:18px; height:18px; flex-shrink:0; margin-top:.2rem; color:var(--accent);
  stroke:currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .2s ease;
}
.svc-card__head:hover h3{ color:var(--accent-strong); }
.svc-card__head:hover .svc-card__arrow{ transform:translateX(3px); }

/* lista de subserviços, com o chevron ">" desenhado em CSS */
.svc-list{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.45rem; }
.svc-list li{ position:relative; padding-left:1rem; font-size:.82rem; line-height:1.45; color:var(--ink-soft); }
.svc-list li::before{
  content:""; position:absolute; left:1px; top:.45em; width:5px; height:5px;
  border-top:1.4px solid var(--accent); border-right:1.4px solid var(--accent); transform:rotate(45deg);
}

/* ---------- contato ----------
   Os canais ocupam a largura inteira: uma coluna por unidade, mais
   e-mail e WhatsApp, quebrando conforme a largura disponível. */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.75rem 2.5rem; }
.info-row{ display:flex; gap:.9rem; align-items:flex-start; }
.info-row .ic-wrap{ color:var(--accent); flex-shrink:0; margin-top:.15rem; }
.info-row p{ color:var(--ink-soft); min-width:0; }
.info-row .strong{ color:var(--ink); font-weight:600; }
/* o e-mail é mais largo que a coluna no celular: quebra em vez de vazar */
.info-row a{ overflow-wrap:anywhere; }

/* ---------- responsivo ---------- */

/* A coluna do título aperta os cartões antes mesmo do tablet: aqui o título
   sobe para cima deles e a fileira passa a usar a largura inteira. */
@media (max-width:1180px){
  .svc-group{ grid-template-columns:1fr; gap:2rem; }
  .svc-intro{ border-right:none; padding-right:0; }
  .svc-intro .lede{ max-width:60ch; }
  /* em uma coluna só o cartão não estica na largura toda */
  .svc-intro--photo{ max-width:420px; }
}

@media (max-width:960px){
  /* sem espaço para foto e texto lado a lado: o verde cobre a foto de
     baixo para cima e o texto ocupa a largura toda */
  .hero{ min-height:0; padding-bottom:6rem; }
  .hero::before{
    background:linear-gradient(180deg,
      rgba(var(--hero-green),.35) 0%,
      rgba(var(--hero-green),.8) 40%,
      rgba(var(--hero-green-deep),.95) 100%);
  }
  .hero .container{ justify-content:flex-start; }
  .intro-grid, .purpose-grid{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .intro-grid, .purpose-grid{ grid-template-columns:1fr; }

  /* menos ar entre os blocos: no celular tudo vira uma coluna só e o
     espaçamento pensado para o desktop deixa a rolagem interminável */
  .hero{ padding-top:calc(var(--header-h) + 2.5rem); padding-bottom:4.5rem; }
  .intro-grid{ gap:1.75rem; margin-top:2rem; }
  .purpose-grid{ gap:2rem; }
  .svc-group{ gap:1.5rem; }
  /* no celular cada cartão ocupa a linha toda, independente do --span */
  .svc-cards{ grid-template-columns:1fr; }
  .svc-card{ grid-column:auto; }}