/* 1. Cores, fontes e larguras reutilizadas no site. */
:root {
  --navy:#0c1b12;
  --blue:#1b5637;
  --blue2:#31744c;
  --gold:#b9d28d;
  --silver:#c7d0ca;
  --ink:#202a23;
  --muted:#68746c;
  --line:#dfe5e0;
  --paper:#f3f5f3;
  --white:#fff;
  --max:1200px;
  --sans:Arial,Helvetica,sans-serif;
  --display:'Arial Narrow',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  overflow-x:clip
}
body {
  margin:0;
  max-width:100%;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select {
  font:inherit
}
.container {
  width:min(var(--max),calc(100% - 56px));
  margin:0 auto
}
/* 2. Cabeçalho e navegação. */
.site-header {
  position:relative;
  z-index:10;
  background:var(--navy);
  color:#fff
}
.header-inner {
  position:relative;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex:none
}
.brand-logo {
  display:block;
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:50%;
  background:#000
}
.header-instagram {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--silver);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .2s
}
.header-instagram:hover {
  color:var(--gold)
}
.header-instagram svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.header-instagram .instagram-dot {
  fill:currentColor;
  stroke:none
}
.header-actions {
  display:flex;
  align-items:center;
  gap:18px;
  flex:none
}
.nav-toggle {
  display:none
}
.brand-symbol {
  width:38px;
  height:38px;
  border:1px solid var(--gold);
  display:grid;
  place-items:center;
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:23px;
  transform:rotate(45deg)
}
.brand-symbol span {
  transform:rotate(-45deg)
}
.brand-name {
  font-size:14px;
  font-weight:700;
  letter-spacing:.17em;
  white-space:nowrap
}
.brand-name small {
  display:block;
  font-size:8px;
  font-weight:400;
  letter-spacing:.24em;
  color:var(--silver);
  margin-top:4px
}
.main-nav {
  display:flex;
  align-items:center;
  gap:27px
}
.main-nav a {
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#e2e8e3;
  transition:color .2s
}
.main-nav a:hover {
  color:var(--gold)
}
.header-cta,.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:46px;
  padding:0 20px;
  background:var(--gold);
  border:1px solid var(--gold);
  color:#142018;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .2s,color .2s,transform .2s;
  cursor:pointer
}
.header-cta:hover,.btn:hover {
  background:#cde0a9;
  transform:translateY(-1px)
}
.header-cta {
  min-height:38px;
  padding:0 15px;
  font-size:9px
}
/* 3. Banner principal e carrossel. */
.hero {
  height:min(620px,calc(100vh - 78px));
  min-height:500px;
  position:relative;
  overflow:hidden;
  background:#13251a;
  color:#fff
}
.hero-slides,.hero-slide {
  position:absolute;
  inset:0
}
.hero-slide {
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease,visibility .8s;
  background-position:center;
  background-size:cover
}
.hero-slide.active {
  opacity:1;
  visibility:visible
}
.hero-slide:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,20,12,.88) 0%,rgba(11,31,19,.64) 48%,rgba(10,25,15,.06) 100%)
}
.hero-content {
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center
}
.hero-copy {
  max-width:590px;
  padding-bottom:18px;
  animation:rise .75s ease both
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--gold)
}
.eyebrow:before {
  content:"";
  height:1px;
  width:31px;
  background:currentColor
}
.hero h1 {
  font-family:var(--display);
  font-size:clamp(48px,6vw,76px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:.035em;
  text-transform:uppercase;
  margin:25px 0 19px;
  max-width:660px
}
.hero p {
  max-width:475px;
  color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.75;
  margin:0 0 28px
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.btn-outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.65)
}
.btn-outline:hover {
  background:#fff;
  color:var(--navy)
}
.hero-pager {
  position:absolute;
  z-index:3;
  right:max(28px,calc((100vw - var(--max))/2));
  bottom:35px;
  display:flex;
  align-items:center;
  gap:9px
}
.hero-pager button {
  width:28px;
  height:28px;
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
  cursor:pointer
}
.hero-pager button.active {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy)
}
.slide-count {
  font-size:9px;
  letter-spacing:.12em;
  color:#fff;
  margin-left:7px
}
.hero-scroll {
  position:absolute;
  left:max(28px,calc((100vw - var(--max))/2));
  bottom:37px;
  z-index:3;
  color:rgba(255,255,255,.72);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.16em;
  display:flex;
  align-items:center;
  gap:12px
}
.hero-scroll:before {
  content:"";
  width:32px;
  height:1px;
  background:var(--gold)
}
/* 4. Atalhos logo abaixo do banner. */
.quick-strip {
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 22px rgba(18,45,28,.05);
  position:relative;
  z-index:3
}
.quick-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.quick-link {
  min-height:100px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 23px;
  border-right:1px solid var(--line);
  transition:background .2s
}
.quick-link:first-child {
  border-left:1px solid var(--line)
}
.quick-link:hover {
  background:#f2f5f2
}
.quick-icon {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--blue);
  flex:none
}
.quick-icon svg {
  width:25px;
  height:25px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5
}
.quick-link strong {
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase
}
.quick-link small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:6px
}
/* 5. Espaçamento padrão das seções. */
.section {
  padding:88px 0
}
.section-heading {
  text-align:center;
  max-width:720px;
  margin:0 auto 39px
}
.kicker {
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--blue2)
}
h2 {
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.025em;
  text-transform:uppercase;
  font-size:clamp(34px,4vw,48px);
  line-height:1.08;
  margin:13px 0
}
.section-heading p {
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
  margin:0
}
/* 6. Cartões de categorias. */
.products {
  background:#f1f4f1
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.product-card {
  background:#fff;
  border:1px solid #e0e6e1;
  min-height:208px;
  position:relative;
  padding:25px 25px 22px;
  display:flex;
  flex-direction:column;
  transition:transform .2s,box-shadow .2s,border .2s
}
.product-card:hover {
  transform:translateY(-3px);
  border-color:#c3d2c6;
  box-shadow:0 14px 30px rgba(20,54,34,.08)
}
.product-card:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:3px;
  width:0;
  background:var(--gold);
  transition:width .25s
}
.product-card:hover:before {
  width:100%
}
.product-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--blue);
  background:#edf3ee;
  margin-bottom:25px
}
.product-icon svg {
  width:23px;
  height:23px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5
}
.product-card h3 {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 8px
}
.product-card p {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 18px;
  max-width:290px
}
.product-card a {
  margin-top:auto;
  color:var(--blue);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700
}
.product-card a span {
  font-size:16px;
  margin-left:7px;
  vertical-align:-1px
}
/* 7. Apresentação da Capital Pleno. */
.about {
  background:#fff
}
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px
}
.about-visual {
  height:395px;
  position:relative;
  background:#dce5de;
  overflow:hidden
}
.about-visual img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.about-visual:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(9,27,16,.38),transparent 57%)
}
.photo-caption {
  position:absolute;
  z-index:1;
  left:25px;
  bottom:23px;
  color:#fff;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.17em
}
.about-copy .kicker {
  margin-bottom:12px
}
.about-copy h2 {
  max-width:490px
}
.about-copy p {
  max-width:520px;
  color:var(--muted);
  font-size:13px;
  line-height:1.85
}
.benefit-row {
  display:flex;
  gap:22px;
  margin-top:25px;
  padding-top:19px;
  border-top:1px solid var(--line)
}
.benefit {
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#294835
}
.benefit:before {
  content:"✓";
  color:var(--gold);
  margin-right:7px
}
/* 8. Etapas de atendimento. */
.process {
  background:var(--navy);
  color:#fff
}
.process .kicker {
  color:var(--gold)
}
.process .section-heading p {
  color:#c1cbc3
}
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:45px
}
.step {
  padding:0 24px;
  border-left:1px solid rgba(255,255,255,.2);
  position:relative;
  cursor:pointer;
  text-align:left;
  color:inherit;
  background:transparent;
  font-family:inherit;
  width:100%;
  transition:background .2s,box-shadow .2s
}
.step:hover,.step.is-active {
  background:rgba(185,210,141,.07)
}
.step.is-active {
  box-shadow:inset 2px 0 var(--gold)
}
.step:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px
}
.step:first-child {
  border-left:0
}
.step-num {
  font-family:Georgia,serif;
  font-size:31px;
  color:var(--gold);
  line-height:1
}
.step h3 {
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:20px 0 10px
}
.step p {
  font-size:11px;
  line-height:1.7;
  color:#c1cbc3;
  margin:0;
  max-width:220px
}
/* 9. Formulário e área de contato. */
.contact {
  background:#f1f4f1
}
.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:75px;
  align-items:start
}
.contact-copy {
  padding-top:17px
}
.contact-copy h2 {
  max-width:430px
}
.contact-copy p {
  max-width:350px;
  color:var(--muted);
  font-size:13px;
  line-height:1.8
}
.contact-aside {
  margin-top:27px;
  padding-top:19px;
  border-top:1px solid #d8e0da;
  font-size:10px;
  line-height:1.8;
  color:#657269
}
.contact-details {
  display:grid;
  gap:12px;
  margin-top:22px
}
.contact-details a {
  display:flex;
  flex-direction:column;
  gap:5px;
  width:fit-content
}
.contact-details a:hover strong {
  color:var(--blue2)
}
.contact-label {
  color:var(--muted);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase
}
.contact-details strong {
  color:var(--ink);
  font-size:13px;
  font-weight:600
}
.whatsapp-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 16px;
  margin-top:20px;
  background:var(--blue);
  border:1px solid var(--blue);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  transition:background .2s,transform .2s
}
.whatsapp-cta:hover {
  background:#215f3d;
  color:#fff;
  transform:translateY(-2px)
}
.whatsapp-cta svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}.lead-form {
  background:#fff;
  padding:32px;
  border:1px solid #e1e5e8;
  box-shadow:0 16px 38px rgba(17,40,25,.06)
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px
}
.field {
  display:flex;
  flex-direction:column;
  gap:7px
}
.field.full {
  grid-column:1/-1
}
.field label {
  font-size:10px;
  font-weight:700;
  letter-spacing:.035em
}
.field input,.field select {
  height:45px;
  border:1px solid #d8dfe3;
  background:#fff;
  padding:0 12px;
  font-size:12px;
  color:var(--ink);
  outline:none;
  border-radius:0
}
.field input:focus,.field select:focus {
  border-color:#4d7c5c;
  box-shadow:0 0 0 3px rgba(49,116,76,.12)
}
.lead-form .btn {
  width:100%;
  margin-top:20px;
  background:var(--blue);
  color:#fff;
  border-color:var(--blue)
}
.lead-form .btn:hover {
  background:#215f3d
}
.form-note {
  text-align:center;
  color:#8a949b;
  font-size:9px;
  line-height:1.5;
  margin:11px 0 0
}
.form-status {
  display:none;
  background:#eef4ee;
  color:#365640;
  padding:12px;
  margin-top:13px;
  font-size:11px;
  line-height:1.5
}
.form-status.show {
  display:block
}
.form-status.is-error {
  color:#8b3027
}
.form-trap {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden
}
/* 10. Perguntas frequentes. */
.faq {
  background:#fff
}
.faq-list {
  max-width:820px;
  margin:0 auto;
  border-top:1px solid var(--line)
}
.faq details {
  border-bottom:1px solid var(--line)
}
.faq summary {
  list-style:none;
  padding:19px 4px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  gap:20px
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary:after {
  content:"+";
  font-size:19px;
  font-weight:400;
  color:var(--blue)
}
.faq details[open] summary:after {
  content:"−"
}
.faq details p {
  margin:0;
  padding:0 30px 19px 4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.75
}
/* 11. Rodapé. */
.footer {
  background:var(--navy);
  color:#d5dbe0;
  padding:39px 0 20px
}
.footer-main {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-start
}
.footer .brand-name {
  color:#fff
}
.footer .brand-logo {
  width:82px;
  height:82px
}
.final-cta {
  background:var(--navy);
  color:#fff;
  text-align:center;
  padding:58px 0
}
.final-cta .kicker {
  color:var(--gold)
}
.final-cta h2 {
  margin:13px auto 10px;
  max-width:750px
}
.floating-simulation {
  position:fixed;
  z-index:9;
  right:22px;
  bottom:78px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  background:var(--blue);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 8px 24px rgba(12,27,18,.24);
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:background .2s,transform .2s
}
.floating-simulation:hover {
  background:var(--blue2);
  transform:translateY(-2px)
}
.floating-simulation-icon {
  display:grid;
  width:23px;
  height:23px;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold);
  font-size:13px
}
.footer-copy {
  font-size:10px;
  line-height:1.75;
  color:#aeb8c0;
  margin:15px 0 0
}
.footer-links {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  padding-top:12px
}
.footer-links a {
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ccd3d8
}
.footer-links a:hover {
  color:var(--gold)
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:15px;
  margin-top:27px;
  display:flex;
  justify-content:space-between;
  color:#89959e;
  font-size:9px
}
/* 12. Animação curta do conteúdo do banner. */
@keyframes rise {
  from {
  opacity:0;
  transform:translateY(15px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}
/* Ajustes para telas médias, como tablets. */
@media(max-width:900px) {
  .main-nav {
  gap:14px
}
.main-nav a {
  font-size:8px
}
.header-instagram {
  font-size:8px;
  gap:5px
}
.quick-link {
  padding:14px
}
.about-grid {
  gap:40px
}
/* 3. Banner principal e carrossel. */
.hero {
  height:560px
}
.steps {
  gap:0
}
.step {
  padding:0 15px
}

}
/* Ajustes para celulares. */
@media(max-width:650px) {
  .container {
  width:calc(100% - 34px)
}
.header-inner {
  height:68px
}
.brand-logo {
  width:52px;
  height:52px
}
.brand-name {
  font-size:12px
}
.main-nav {
  display:none
}
.header-instagram {
  margin-left:0
}
.header-actions {
  gap:9px;
  margin-left:auto
}
.main-nav {
  display:none;
  position:absolute;
  z-index:12;
  top:100%;
  left:-17px;
  right:-17px;
  padding:7px 24px 14px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 22px rgba(0,0,0,.2)
}
.main-nav.is-open {
  display:flex
}
.main-nav a {
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:10px
}
.main-nav a:last-child {
  border-bottom:0
}
.header-instagram {
  gap:0
}
.header-instagram span {
  display:none
}
.header-instagram svg {
  width:19px;
  height:19px
}
.nav-toggle {
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:var(--silver);
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  cursor:pointer
}
.nav-toggle svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round
}
.floating-simulation {
  right:14px;
  bottom:64px;
  min-height:43px;
  padding:0 13px;
  font-size:9px
}
.header-cta {
  min-height:35px;
  padding:0 11px;
  font-size:8px
}
/* 3. Banner principal e carrossel. */
.hero {
  height:auto;
  min-height:570px;
  max-height:720px
}
.hero-slide {
  background-position:62% center
}
.hero-slide:after {
  background:linear-gradient(90deg,rgba(6,20,12,.84),rgba(10,25,15,.35)),linear-gradient(0deg,rgba(10,25,15,.35),transparent)
}
.hero-content {
  align-items:flex-start;
  padding-top:112px;
  padding-bottom:75px
}
.hero-copy {
  max-width:100%
}
.hero h1 {
  font-size:clamp(42px,12vw,58px);
  margin:19px 0 14px
}
.hero p {
  font-size:13px;
  max-width:390px
}
.hero-actions {
  gap:8px
}
.hero-actions .btn {
  min-height:43px;
  padding:0 12px;
  font-size:8px
}
.hero-pager {
  right:17px;
  bottom:20px
}
.hero-scroll {
  left:17px;
  bottom:27px;
  font-size:8px
}
.quick-grid {
  grid-template-columns:1fr 1fr
}
.quick-link {
  min-height:76px;
  padding:12px 8px;
  gap:8px
}
.quick-link:nth-child(2) {
  border-right:0
}
.quick-link:nth-child(n+3) {
  border-top:1px solid var(--line)
}
.quick-link:first-child {
  border-left:0
}
.quick-icon {
  width:28px
}
.quick-icon svg {
  width:21px
}
.quick-link strong {
  font-size:8px
}
.quick-link small {
  font-size:9px
}
/* 5. Espaçamento padrão das seções. */
.section {
  padding:65px 0
}
.section-heading {
  margin-bottom:29px
}
.product-grid {
  grid-template-columns:1fr 1fr;
  gap:9px
}
.product-card {
  min-height:185px;
  padding:17px 14px
}
.product-icon {
  width:35px;
  height:35px;
  margin-bottom:20px
}
.product-card h3 {
  font-size:10px
}
.product-card p {
  font-size:10px
}
.about-grid {
  grid-template-columns:1fr;
  gap:30px
}
.about-visual {
  height:260px;
  order:2
}
.about-copy {
  order:1
}
.about-copy h2 {
  font-size:38px
}
.benefit-row {
  gap:11px;
  flex-wrap:wrap
}
.benefit {
  font-size:8px
}
.steps {
  grid-template-columns:1fr 1fr;
  row-gap:28px
}
.step {
  min-height:130px;
  padding:0 12px
}
.step:nth-child(odd) {
  border-left:0;
  padding-left:0
}
.step h3 {
  font-size:10px;
  margin:14px 0 8px
}
.step p {
  font-size:10px
}
.contact-grid {
  grid-template-columns:1fr;
  gap:24px
}
.contact-copy {
  padding:0
}
.contact-copy h2 {
  font-size:39px
}
.contact-aside {
  margin-top:15px
}
  .contact-details {
    gap:10px
  }
.lead-form {
  padding:20px
}
.form-grid {
  gap:12px 9px
}
.field input,.field select {
  height:42px;
  font-size:11px
}
.footer-main,.footer-bottom {
  flex-direction:column
}
.footer-links {
  gap:13px
}
.footer-bottom {
  gap:7px
}

}
/* Respeita a preferência de movimento reduzido do dispositivo. */
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*:before,*:after {
  animation:none!important;
  transition:none!important
}

}