/* G&Ms offers: common identity, sector-specific reading compositions. */
.commercial .btn--solid{
  color: #fffefa
}
:root[data-theme=dark] .commercial .btn--solid{
  color: #152826
}
.commercial .btn--outline{
  color: var(--ink)
}
.commercial .btn--solid:hover,.commercial .btn--outline:hover{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg)
}
.commercial{
  --gold: #725730
}
.commercial .btn,.commercial .form label,.commercial .form-status{
  font-size: 14px
}
.commercial .form label{
  display: block;
  margin-bottom: 8px
}
.commercial .form-status{
  line-height: 1.7
}
.commercial .form-row{
  margin-bottom: 18px
}
:root[data-theme=dark] .commercial{
  --gold: #d8b878
}
.commercial{
  font-size: 16px
}
.offer-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 26px;
  border-bottom: 1px solid var(--line)
}
.offer-brand{
  font: 600 38px/1 var(--serif);
  text-decoration: none
}
.offer-brand span{
  display: block;
  font: 12px/1.8 var(--sans);
  letter-spacing: .06em
}
.offer-header nav{
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap
}
.offer-header nav a,.offer-footer a,.offer-services a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px
}
.offer-hero{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  padding-block: 85px
}
.offer-hero h1{
  font-size: clamp(50px,6vw,86px);
  line-height: 1;
  max-width: 800px
}
.offer-lead{
  font-size: 18px;
  line-height: 1.8;
  max-width: 620px;
  margin: 30px 0
}
.offer-region{
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 480px;
  margin-top: 24px
}
.offer-index{
  align-self: end;
  border-left: 1px solid var(--line);
  padding-left: 32px
}
.offer-index ol{
  list-style: none;
  margin: 0;
  padding: 0
}
.offer-index li{
  border-top: 1px solid var(--line);
  padding: 24px 0
}
.offer-index li span,.offer-number{
  font-size: 12px;
  color: var(--gold)
}
.offer-index h3{
  font: 600 28px/1.15 var(--serif);
  margin: 10px 0 0
}
.commercial h2{
  font-size: clamp(40px,4.6vw,64px);
  line-height: 1.08
}
.offer-services-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 38px;
  margin-top: 42px
}
.offer-services-grid article{
  border-top: 1px solid var(--line);
  padding-top: 22px
}
.offer-services-grid h3{
  font: 600 34px/1.1 var(--serif);
  margin-block: 14px
}
.offer-services-grid p:not(.offer-number){
  line-height: 1.8;
  color: var(--muted)
}
.offer-demo{
  background: var(--bg-soft,var(--bg));
  border-block: 1px solid var(--line)
}
.offer-demo-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 65px;
  align-items: center
}
.offer-demo figure{
  margin: 0
}
.offer-demo img{
  width: 100%;
  height: auto;
  border: 1px solid var(--line)
}
.offer-demo figcaption{
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 16px
}
.offer-demo ul{
  padding-left: 20px;
  margin-block: 25px;
  line-height: 1.9
}
.offer-demo p{
  line-height: 1.8
}
.offer-process ol{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 28px;
  padding: 0;
  list-style: none;
  margin-top: 36px
}
.offer-process li{
  border-top: 1px solid var(--line);
  padding-top: 20px
}
.offer-process h3{
  font: 600 28px/1.2 var(--serif)
}
.offer-process p{
  line-height: 1.8;
  color: var(--muted)
}
.offer-faq{
  max-width: 900px
}
.offer-faq details{
  border-bottom: 1px solid var(--line);
  padding-block: 16px
}
.offer-faq summary{
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer
}
.offer-faq details p{
  line-height: 1.8;
  margin-block: 16px
}
.offer-contact{
  border-block: 1px solid var(--line)
}
.offer-contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px
}
.offer-contact p{
  line-height: 1.8
}
.offer-contact .form{
  min-width: 0
}
.offer-contact input,.offer-contact select,.offer-contact textarea{
  font-size: 16px;
  max-width: 100%
}
.offer-footer{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 30px;
  font-size: 14px
}
.niche-proposals{
  grid-column: 1/-1;
  display: flex;
  gap: 10px 20px;
  flex-wrap: wrap
}
.niche-proposals p{
  width: 100%;
  margin-bottom: 0
}
.niche-proposals a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  text-decoration: underline
}
.commercial--educacao .offer-index{
  border-left: 0;
  border-top: 1px solid var(--line);
  padding: 30px 0 0
}
.commercial--educacao .offer-index ol{
  display: grid;
  gap: 16px
}
.commercial--educacao .offer-index li{
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: 30px 30px 6px 6px
}
.commercial--petshop .offer-index{
  border: 1px solid var(--line);
  border-radius: 44px;
  padding: 28px
}
.commercial--petshop .offer-index li:first-child{
  border: 0
}
.commercial--marmoraria .offer-hero{
  grid-template-columns: 1fr;
  gap: 35px
}
.commercial--marmoraria .offer-index{
  border: 0;
  padding: 0
}
.commercial--marmoraria .offer-index ol{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px
}
.commercial--gestao-financeira .offer-index{
  background: var(--gold-wash);
  padding: 32px;
  border: 0
}
.commercial--ortopedia .offer-hero{
  grid-template-columns: 1fr 1fr
}
.commercial--ortopedia .offer-index li{
  padding: 30px 0
}
.commercial--clinicas .offer-demo-grid{
  grid-template-columns: 1fr
}
.commercial--clinicas .offer-demo figure{
  max-width: 900px
}
.commercial--clinicas .offer-demo-grid>div{
  max-width: 800px
}
.commercial--odontologia .offer-index{
  border-radius: 80px 0 0 0;
  padding-top: 50px
}
@media(max-width:800px){
  .offer-header{
    align-items: flex-start;
    flex-direction: column
  }
  .offer-header nav{
    gap: 12px 20px
  }
  .offer-hero,.commercial--ortopedia .offer-hero,.offer-demo-grid,.offer-contact-grid{
    grid-template-columns: 1fr;
    gap: 36px
  }
  .offer-hero{
    padding-block: 50px
  }
  .offer-services-grid,.offer-process ol{
    grid-template-columns: 1fr;
    gap: 24px
  }
  .offer-index{
    padding-left: 0;
    border-left: 0
  }
  .commercial--marmoraria .offer-index ol{
    grid-template-columns: 1fr;
    gap: 0
  }
  .offer-demo-grid{
    gap: 32px
  }
  .offer-contact .btn{
    max-width: 100%;
    white-space: normal
  }
  .commercial h1{
    font-size: clamp(48px,12vw,68px)
  }
}
@media(prefers-reduced-motion:reduce){
  .commercial *{
    animation: none!important;
    transition: none!important;
    scroll-behavior: auto!important
  }
}