.hero-wrap{
    padding-top: 3.25rem;
    padding-bottom: 2.25rem;
}

.hero-title{
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.03;
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
}

.hero-lead{
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 40ch;
}

.hero-grid{
  min-height: clamp(420px, 72vh, 760px);
}

.hero-content{
  text-align: left;
}

.hero-justica{
  width: min(100%, 25em);
  max-width: 420px;
  margin-inline: auto;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.10));
}

.hero-actions .btn{
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-figure{
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    filter: drop-shadow(0 14px 22px rgba(0,0,0,.12));
}

.service-card{
    border: 0;
    background: var(--card);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 18px 30px rgba(0,0,0,.08);
    height: 100%;
}

.service-img{
    height: 220px;
    background-size: cover;
    background-position: center;
}

.img-1{
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(180,220,160,.35) 60%), linear-gradient(135deg, rgba(140,190,120,.35), rgba(255,255,255,.0)); 
}

.img-2{
    background-image: radial-gradient(circle at 55% 45%, rgba(210,255,160,.65), rgba(215,160,235,.35) 55%), linear-gradient(135deg, rgba(160,110,85,.35), rgba(255,255,255,.0)); 
}

.img-3{
    background-image: radial-gradient(circle at 70% 25%, rgba(255,190,190,.55), rgba(80,190,195,.35) 55%), linear-gradient(135deg, rgba(60,175,180,.35), rgba(255,255,255,.0)); 
}

.service-card h3{
    font-weight: 800;
    letter-spacing: -0.02em;
    font-size: 1.35rem;
}

.service-card p{
    color: var(--muted);
    margin-bottom: 1.1rem;
}

.inf-card{
  display: block;
  text-decoration: none;
  color: var(--ink);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 18px 20px;
  border-radius: var(--radius-xl);

  /* mais próximo do “glass” do template */
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(15,15,18,.10);
  backdrop-filter: blur(10px);

  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.inf-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(0,0,0,.10);
  border-color: rgba(15,15,18,.16);
}

.inf-card::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--wht-brown, #ffc506);
  transition: width .45s ease;  
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  z-index: 2;
}

.inf-card:hover::before{
  width: 100%;
}

.inf-card-title{
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.06rem;
  color: rgba(15,15,18,.92);
}

.inf-card-meta{
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: .86rem;
  color: rgba(15,15,18,.55);
}

.inf-card-dot{
    opacity: .7; 
}

.inf-card-sub{
  margin: 0;
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(15,15,18,.68);
}

.inf-grid{
  align-items: stretch;
}

.ticker{
    padding:14px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    position:relative;
}

.ticker-track{
    display:flex; gap:0;
    white-space:nowrap;
    animation: ticker-scroll 30s linear infinite;
}

.ticker:hover .ticker-track{
    animation-play-state:paused
}

@keyframes ticker-scroll{
    0%{transform:translateX(0)} 100%{transform:translateX(-50%)}
}

.ticker-item{
    display:inline-flex; align-items:center; gap:10px;
    padding:0 32px;
    font-size:.82rem; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted2);
}

.ticker-sep{
    display:inline-block; width:5px; height:5px; border-radius:50%;
    background:linear-gradient(135deg, var(--wht-brown), var(--blk-brown));
    flex-shrink:0;
}

@media (max-width: 991.98px){

  .hero-wrap{
    padding-top: 2.25rem;
    padding-bottom: 1.5rem;
  }

  .hero-grid{
    min-height: unset;
  }

  .hero-content{
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
  }

  .hero-lead{
    max-width: 52ch;
    margin-inline: auto;
  }

  .hero-actions{
    justify-content: center;
  }

  .hero-justica{
    width: min(100%, 21em);
    max-width: 340px;
  }

  .ticker-item{
    padding: 0 24px;
    font-size: .78rem;
    letter-spacing: .06em;
  }

  .inf-card{
    padding: 17px 18px;
  }

  .inf-card-title{
    font-size: 1rem;
  }

  .inf-card-sub{
    font-size: .95rem;
  }
}

@media (max-width: 767.98px){
    .hero-wrap{
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .hero-content{
        text-align: center;
    }

    .hero-title{
        font-size: clamp(1.85rem, 8vw, 2.55rem);
        line-height: 1.08;
        margin-bottom: .9rem !important;
    }

    .hero-lead{
        font-size: .98rem;
        line-height: 1.65;
        max-width: 34ch;
        margin-inline: auto;
        margin-bottom: 1.25rem !important;
    }

    .hero-justica{
        width: min(82vw, 280px);
        max-width: 280px;
    }

    .hero-actions{
        flex-direction: column;
        align-items: stretch;
        gap: .75rem !important;
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
    }

    .hero-actions .btn{
        width: 100%;
        padding: .9rem 1rem;
        font-size: .96rem;
    }

    .ticker{
        padding: 12px 0;
    }

    .ticker-track{
        animation-duration: 24s;
    }

    .ticker-item{
        padding: 0 18px;
        font-size: .72rem;
        letter-spacing: .05em;
    }

    #inf{
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .inf-grid{
        gap: 1rem !important;
    }

    .inf-card{
        padding: 16px 16px;
        border-radius: 22px;
    }

    .inf-card-title{
        font-size: .98rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .inf-card-meta{
        font-size: .78rem;
        gap: 6px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .inf-card-sub{
        font-size: .92rem;
        line-height: 1.55;
    }
}

@media (max-width: 575.98px){
    .container{
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero-title{
        font-size: clamp(1.7rem, 8.4vw, 2.15rem);
    }

    .hero-lead{
        font-size: .95rem;
        max-width: 30ch;
    }

    .hero-justica{
        width: min(78vw, 240px);
        max-width: 240px;
    }

    .btn-cta,
    .btn-secondary-soft{
        font-size: .92rem;
        padding: .85rem 1rem;
    }

    .ticker-item{
        padding: 0 14px;
        font-size: .68rem;
    }

    .ticker-sep{
        width: 4px;
        height: 4px;
    }

    .inf-card{
        padding: 15px 14px;
    }

    .inf-card-title{
        font-size: .94rem;
    }

    .inf-card-sub{
        font-size: .89rem;
    }
}
