@import "./page-composition.css";

/* 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
  }
}

/* Sector photographs stay in their own column, with a separate credit band. */
.commercial { --gold-button-bg: #c9a45c; --gold: #78531d; }
:root[data-theme="dark"] .commercial { --gold: #d8b878; }
.commercial .btn--solid { background: var(--gold-button-bg); border-color: #9b772f; color: #17140f; }
.commercial .btn--solid:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.commercial .offer-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 48px; max-width: none; width: 100%; margin: 0; padding: 72px max(24px, calc((100vw - var(--wrap)) / 2)); background: #17140f; color: #f7f3ea; }
.commercial .offer-intro { max-width: 760px; }
.commercial .offer-hero h1 { font-size: clamp(40px,5.2vw,68px); line-height: 1.06; margin-block: 22px; }
.commercial .offer-hero .eyebrow { color: #d8b878; }
.commercial .offer-lead { max-width: 650px; font-size: clamp(20px,2.3vw,24px); line-height: 1.6; margin: 24px 0 30px; }
.commercial .offer-region { max-width: 620px; color: #e4ded1; }
.commercial .offer-photo { position: static; min-width: 0; margin: 0; overflow: hidden; border-radius: 28px 4px; background: #0f0d0a; }
.commercial .offer-photo picture { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; }
.commercial .offer-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.commercial .offer-photo figcaption { position: static; color: #e4ded1; margin: 0; padding: 16px 20px; font-size: 12px; line-height: 1.7; background: #0f0d0a; }
.commercial .offer-problems h2 { max-width: 760px; }
.commercial .offer-problems h3 { font: 600 30px/1.15 var(--serif); }
.commercial .offer-problems li { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.commercial .offer-demo { background: var(--surface2); }
.commercial .offer-demo img { border-radius: 24px; }
.commercial .offer-demo-grid { gap: 48px; }
.commercial .offer-contact { background: var(--surface2); }
.commercial .offer-contact .form { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.commercial .offer-faq { max-width: var(--wrap); }
.commercial .offer-faq summary { position: relative; display: block; list-style: none; font-weight: 600; padding: 16px 36px 16px 0; }
.commercial .offer-faq summary::-webkit-details-marker { display: none; }
.commercial .offer-faq summary::after { content: "+"; position: absolute; right: 4px; color: var(--gold); }
.commercial .offer-faq details[open] summary::after { content: "−"; }
.commercial .offer-faq details:first-of-type { border-top: 1px solid var(--line); }
.commercial .offer-faq details p { max-width: 75ch; color: var(--muted); }
.commercial .rc2-related { display: flex; flex-wrap: wrap; gap: 12px 28px; width: 100%; padding-top: 12px; }
.commercial .rc2-related a { min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:800px) {
  .commercial .offer-hero { padding: 56px 24px; }
  .commercial .offer-hero h1 { font-size: clamp(36px,9.8vw,50px); }
  .commercial .offer-problems ol { gap: 20px; }
  .commercial .offer-problems li,.commercial .offer-contact .form { padding: 24px; }
}

@media (max-width: 899px) {
  .commercial .offer-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .commercial .offer-photo picture { aspect-ratio: 4 / 3; }
}