/* ==========================================================================
   Página inicial
   ========================================================================== */

/* Header transparente sobre o hero; fica branco ao rolar (ver site.js). */
.page-home .site-header { position: fixed; left: 0; right: 0; background: linear-gradient(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-home .site-header.is-scrolled { background: var(--white); }
.page-home .site-footer { margin-top: 0; }

/* ---------- Hero ---------- */
.home-hero { position: relative; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden; background: #cfe0e8; }
.home-hero picture, .home-hero__img { display: block; width: 100%; height: 100%; }
.home-hero__img { object-fit: cover; object-position: 50% 70%; }
.home-hero__link { position: absolute; inset: 0; }
.home-hero__scroll {
  position: absolute; left: 50%; bottom: var(--space-5); translate: -50% 0;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgb(255 255 255 / 0.9); color: var(--green-700); box-shadow: var(--shadow);
  animation: hero-bounce 2.4s var(--ease) infinite;
}
.home-hero__scroll .icon { rotate: 90deg; width: 26px; height: 26px; }
@keyframes hero-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (min-width: 768px) {
  /* Desktop: a altura segue a proporção da própria imagem (--hero-ratio, definida na view): nada é cortado nas laterais. */
  .home-hero { height: auto; aspect-ratio: var(--hero-ratio, 1.61); min-height: 560px; max-height: none; }
  .home-hero__img { object-position: 50% 62%; }
}

/* ---------- Conheça a Família do Sítio ---------- */
.home-about { position: relative; isolation: isolate; padding-block: var(--section-y); overflow: hidden; background: #1a4229; }
.home-about__bg, .home-about__bg picture, .home-about__bg img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.home-about__bg img { object-fit: cover; }
.home-about__grid { display: grid; gap: var(--space-6); align-items: center; }
.home-about__card {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); background: var(--white);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.home-about__card h1 { font-size: var(--text-2xl); }
.home-about__card p { font-size: var(--text-md); margin-bottom: var(--space-5); }
.home-about__product { justify-self: center; width: min(100%, 520px); }
.home-about__img { width: 100%; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 0.35)); }

@media (min-width: 1024px) {
  .home-about { padding-block: var(--space-9); }
  .home-about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); }
  .home-about__card { max-width: 560px; }
}

/* ---------- Sítio Verde ---------- */
.home-green { position: relative; isolation: isolate; background: #839800; color: var(--white); }
.home-green__bg { position: relative; height: clamp(200px, 25vw, 300px); overflow: hidden; }
.home-green__bg picture, .home-green__bg img { display: block; width: 100%; height: 100%; }
.home-green__bg img { object-fit: cover; object-position: 0 50%; }
.home-green__inner { padding-block: var(--space-6) var(--space-7); }
.home-green__card { max-width: 760px; }
.home-green__card h2 { margin-bottom: var(--space-4); }
.home-green__card h2 span { display: inline-block; padding: 0.15em 0.4em; background: var(--white); color: var(--green-600); border-radius: var(--radius-sm); }
.home-green__card p { margin-bottom: var(--space-5); font-size: var(--text-md); }

/* Texto sobre fundo escuro para garantir contraste (o verde-oliva da imagem não passa AA com texto branco). */
.home-green__card { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); background: rgb(0 76 46 / 0.92); border-radius: var(--radius-lg); }

@media (min-width: 1200px) {
  .home-green { min-height: clamp(380px, 30vw, 560px); display: flex; align-items: center; }
  .home-green__bg { position: absolute; inset: 0; height: auto; z-index: -1; }
  .home-green__bg img { object-position: 0 50%; }
  .home-green__inner { display: flex; justify-content: flex-end; padding-block: var(--space-7); }
  .home-green__card { width: min(46%, 520px); }
}
@media (min-width: 1440px) {
  .home-green__card { width: min(40%, 480px); }
}