/* =========================
   HOME (página inicial)
   ========================= */

/* Fundo com o bg amarelo fornecido + fallback amarelo */
.home-hero{
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* camada 1: fallback amarelo; camada 2: seu SVG */
  background-image:
    linear-gradient(135deg, #FECD06, #e4b600),
    url("/assets/icons/bg-amarelo.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}

/* Container central */
.home-container{
  width: 100%;
  max-width: 1080px;
  padding: 0 24px;
}
@media (min-width: 768px){
  .home-container{ padding: 0 40px; }
}

/* Cabeçalho: ícone + textos */
.home-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 28px;
}
@media (min-width: 768px){
  .home-header{ gap: 16px; margin-bottom: 36px; }
}

/* Ícone da caixa via máscara (assets/icons/rastreio.svg) */
.home-logo-mask{
  display: block;
  width: 88px; height: 88px;
  background-color: #142427; /* cor do ícone */
  -webkit-mask-image: url("/assets/icons/rastreio.svg");
  mask-image: url("/assets/icons/rastreio.svg");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
@media (min-width: 768px){
  .home-logo-mask{ width: 96px; height: 96px; }
}

/* Títulos ao lado do ícone */
.home-title-wrap{ display: flex; flex-direction: column; text-align: left; line-height: 1; }
.home-title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 56px);
  color: #142427;
}
.home-subtitle{
  margin-top: -4px;
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 400;
  color: #142427;
}

/* Headline */
.home-headline{
  margin: 0 auto 18px;
  max-width: 1240px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(22px, 4.5vw, 40px);
}

/* Botão verde (sem bold exagerado) + “sombra” base */
.home-cta{
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 500;
  color: #fff;
  background: #16a34a;
  padding: 22px 24px;
  border-radius: 10px;
  transition: transform .15s ease;
  outline: none;
}
@media (min-width: 768px){
  .home-cta{ padding: 26px 24px; max-width: 840px; margin: 0 auto; }
}
.home-cta:hover{ transform: translateY(1px); }
.home-cta:active{ transform: translateY(2px); }
.home-cta:focus{ box-shadow: 0 0 0 4px rgba(0,0,0,.12); }

/* sombra elíptica sob o botão (efeito do Next) */
.home-cta::after{
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -3px;
  height: 6px;
  background: rgba(0,0,0,.15);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  filter: blur(4px);
}