/* ===== Tidy Yard - faixa de folhagem entre o conteudo e o rodape ===== */
:root{ --leaf-h: min(30vw, 380px); }

main > section:last-of-type{
  position: relative;
  padding-bottom: calc(28px + var(--leaf-h) * .62);
}

main > section:last-of-type::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--leaf-h);
  background:
    linear-gradient(to bottom, rgba(21,58,40,0) 70%, rgba(21,58,40,.45) 90%, #153A28 100%),
    url("/img/footer-foliage.webp") center bottom / cover no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ===== Comparador antes/depois - gesto no celular ===== */
.ba-frame, .ba-range{ touch-action: pan-y; }   /* rolagem vertical segue normal; arraste horizontal fica com o slider */
.ba-frame{ -webkit-user-select: none; user-select: none; }
.ba-frame img{ -webkit-user-drag: none; }

/* ===== Cabecalho no celular ===== */
@media (max-width: 640px){
  .brand-name{ white-space: nowrap; }
  .brand-name small{ white-space: nowrap; }
  header .nav-phone{ display: none; }   /* telefone ja aparece na barra do topo e na barra fixa inferior */
}

/* ===== Faixas animadas (marquee) em telas de toque ===== */
/* :hover fica "grudado" depois de um toque e congela a faixa - so pausa com mouse */
@media (hover: none){
  .mq:hover .mq-track,
  .tk:hover .tk-track,
  .rev-belt:hover .tk-track{ animation-play-state: running !important; }
}

/* ===== Faixas animadas quando o aparelho pede "reduzir movimento" ===== */
/* o site parava as faixas; aqui elas seguem andando, porem bem mais devagar */
@media (prefers-reduced-motion: reduce){
  .mq-track{ animation: mq 78s linear infinite !important; }
  .tk .tk-track{ animation: mq 114s linear infinite !important; }
  .rev-belt .tk-track{ animation: mq 138s linear infinite !important; }
  .rspin{ animation: spin 540s linear infinite !important; }
}


/* ===== Areas - grade de 5 colunas (12/09/2026) ===== */
/* Escopo: apenas grades com exatamente 5 cartoes (pagina /areas).
   /reviews (3 e 4 cartoes) e /who-we-serve/commercial (4) ficam como estao. */
@media (min-width: 1120px){
  .area-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }
  .area-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) .area-card{ padding: 26px 20px; }
  .area-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) .area-card h3{ font-size: 17.5px; line-height: 1.25; margin-bottom: 10px; }
  .area-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))) .area-card p{ font-size: 13.6px; line-height: 1.6; }
}
/* Tablet: 3 + 2 em vez de 2 + 2 + 1 */
@media (min-width: 720px) and (max-width: 1119.98px){
  .area-grid:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}