.hero .accent {
  font-style: italic
}

/* HERO */
.hero {
  background: linear-gradient(170deg, var(--bege) 0%, var(--creme) 60%)
}

.hero-banner {
  width: 100%;
  overflow: hidden;
  background: var(--bege)
}

.hero-banner img {
  width: 100%;
  height: auto;
  display: block
}

.hero-text {
  max-width: 680px;
  padding: 36px 0 8px
}

.hero-tick {
  display: block;
  width: 50px;
  height: 2px;
  background: var(--ouro);
  margin-bottom: 22px;
  position: relative
}

.hero-tick::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--ouro);
  border-top: 2px solid var(--ouro);
  transform: rotate(45deg)
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-bottom: 18px;
  color: var(--verde);
  letter-spacing: -.01em
}

.hero-sub {
  font-size: 1rem;
  color: var(--suave);
  margin-bottom: 28px;
  max-width: 420px
}

.hero-actions {
  display: flex;
  gap: 13px;
  flex-wrap: wrap
}

.hero-banner,
.hero-text {
  animation: fade-up .8s ease both
}

.hero-text {
  animation-delay: .1s
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* PORTAIS DE CATEGORIA */
.portais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
  margin-bottom: 48px
}

.portal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px 22px;
  border-radius: var(--r-lg);
  color: var(--creme);
  transition: var(--ease);
  box-shadow: var(--shadow);
  text-decoration: none
}

.portal:hover {
  transform: translateY(-3px);
  filter: brightness(1.07)
}

.portal-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.portal-ico svg {
  width: 26px;
  height: 26px;
  color: #fff
}

.portal-nome {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff
}

.portal-desc {
  font-size: .84rem;
  color: rgba(255, 255, 255, .82);
  line-height: 1.5;
  flex: 1
}

.portal-link {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px
}

.portal-link svg {
  width: 14px;
  height: 9px
}

.p-est {
  background: var(--salvia)
}

.p-mis {
  background: var(--vinho)
}

.p-ter {
  background: var(--terapia)
}

/* DESTAQUES */
.destaques-luance {
  margin-bottom: 54px
}

.dl-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px
}

.dl-header h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem)
}

.dl-header a {
  font-size: .82rem;
  color: var(--claro);
  transition: var(--ease)
}

.dl-header a:hover {
  color: var(--ambar)
}

.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

/* SOBRE A LUANCE (versão enxuta — a história completa mora em /sobre) */
.sobre-luance {
  margin-top: 8px;
  margin-bottom: 54px
}

.sobre-luance__intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 38px
}

.sobre-luance__mark {
  display: block;
  width: 32px;
  height: 29px;
  margin: 0 auto 20px;
  background-color: var(--ouro);
  opacity: .85;
  -webkit-mask: url('/assets/img/logo.svg') center/contain no-repeat;
  mask: url('/assets/img/logo.svg') center/contain no-repeat
}

.sobre-luance__kicker {
  display: block;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 500;
  margin-bottom: 14px
}

.sobre-luance__intro h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 14px
}

.sobre-luance__intro p {
  color: var(--suave);
  font-size: .96rem;
  line-height: 1.7;
  margin: 0 auto
}

.sobre-luance__cta {
  margin-top: 20px;
  display: flex;
  justify-content: center
}

.sobre-luance__cta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--verde);
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--ouro);
  transition: var(--ease)
}

.sobre-luance__cta a:hover {
  gap: 11px;
  color: var(--ambar)
}

.sobre-luance__cta a svg {
  width: 14px;
  height: 9px
}

/* DIFERENCIAIS */
.diferenciais {
  background: var(--creme2);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  padding: 26px 32px;
  margin-bottom: 54px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.dif {
  display: flex;
  align-items: center;
  gap: 14px
}

.dif-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bege);
  color: var(--ambar);
  display: flex;
  align-items: center;
  justify-content: center
}

.dif-icon svg {
  width: 22px;
  height: 22px
}

.dif h4 {
  font-size: 1rem;
  margin-bottom: 2px
}

.dif p {
  font-size: .8rem;
  color: var(--suave)
}

/* FAIXA WHATSAPP */
.wband {
  background: var(--verde);
  border-radius: var(--r-lg);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 60px
}

.wband-left {
  display: flex;
  align-items: center;
  gap: 16px
}

.wband-ico {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--whats2);
  display: flex;
  align-items: center;
  justify-content: center
}

.wband-ico svg {
  width: 23px;
  height: 23px;
  color: #fff
}

.wband-text h3 {
  color: var(--creme);
  font-size: 1.3rem;
  margin-bottom: 2px
}

.wband-text p {
  color: rgba(246, 242, 234, .7);
  font-size: .85rem
}

@media(max-width:980px) {
  .hero-text {
    padding: 28px 0 8px
  }
}

@media(max-width:860px) {
  .sobre-luance__intro {
    padding-left: 8px;
    padding-right: 8px
  }
}

@media(max-width:720px) {

  .portais,
  .dl-grid,
  .diferenciais {
    grid-template-columns: 1fr
  }

  .diferenciais {
    gap: 18px;
    padding: 22px
  }
}

@media(max-width:560px) {
  .hero-actions .btn {
    flex: 1;
    justify-content: center
  }

  .wband {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start
  }
}