/* ==========================================================================
   Esgomil Design System — Padrão: Primeira dobra (hero)
   Composição: texto à esquerda, mascote sobre círculo amarelo à direita,
   mangote se desenhando na base, letreiro corrido e cards de serviço.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-6);
  align-items: center;
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; min-width: 0; }
.hero__title { display: flex; flex-direction: column; }
.hero__title .line { display: block; }
.hero__title .word { display: inline-block; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__stats { margin-top: var(--space-2); padding-top: var(--space-5); border-top: var(--border-w) solid var(--border); align-self: stretch; }

/* Arte */
.hero__art {
  position: relative;
  aspect-ratio: 1 / 1.05;
  max-width: 100%;
  min-width: 0;
}
.hero__circle {
  position: absolute;
  left: 8%; right: 0; bottom: 6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-amarelo);
}
.hero__circle::after { /* anel tracejado, lembra o corrugado do mangote */
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px dashed var(--color-preto);
  opacity: 0.18;
  animation: spin 60s linear infinite;
}
.hero__mascot {
  position: absolute;
  right: -2%; bottom: 0;
  width: 96%;
  filter: drop-shadow(0 24px 30px rgb(17 17 17 / 0.25));
  /* a ilustração termina em névoa; o degradê funde a base com o fundo */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}
.hero__seal { position: absolute; left: -2%; top: 4%; width: 26%; }
.hero__seal .seal-spin { width: 100%; }

/* Estrada: o caminhão ocupa 56% da largura e o SVG do mangote cobre a estrada
   inteira com a MESMA proporção (1000 × 208,4). Assim 1 unidade do SVG = 0,28 px
   da imagem original do caminhão e a válvula traseira cai sempre no lugar certo. */
.hero__road { position: relative; margin-top: var(--space-6); }
.hero__road .truck { width: 56%; }
.hero__hose { position: absolute; inset: 0 var(--gutter); width: calc(100% - 2 * var(--gutter)); height: 100%; z-index: 0; overflow: visible; pointer-events: none; }

/* Cards */
.hero__services { padding-block: var(--space-7) var(--space-8); }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

@media (max-width: 900px) {
  /* celular: a cena inteira encolhe junto, como a do caminhão-pipa */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__art { width: min(100%, 460px); margin-inline: auto; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hero__circle::after { animation: none; } }