:root {
  /* paleta no padrão Uniforte: azul royal + laranja de destaque + verde WhatsApp */
  --navy: oklch(0.22 0.09 255);
  --navy2: oklch(0.28 0.13 255);
  --blue: oklch(0.38 0.16 255);
  --blue2: oklch(0.5 0.19 255);
  --petrol: oklch(0.4 0.17 250);
  --cyan: oklch(0.55 0.19 255);
  --cyan-l: oklch(0.7 0.16 255);
  --ice: oklch(0.96 0.012 250);
  --wa: oklch(0.62 0.17 145);
  --wa2: oklch(0.53 0.15 145);
  --amber: oklch(0.7 0.19 45);
  --amber2: oklch(0.78 0.18 55);
  --call: oklch(0.58 0.22 25);
  --ink: oklch(0.18 0.04 250);
  --body: oklch(0.34 0.03 252);
  --muted: oklch(0.48 0.03 255);
  --bg: oklch(0.985 0.006 250);
  --white: #fff;
  --line: oklch(0.9 0.012 250);
  --soft: oklch(0.96 0.012 250);
  --g-deep: linear-gradient(135deg, oklch(0.28 0.13 255) 0%, oklch(0.4 0.17 250) 55%, oklch(0.5 0.19 255) 100%);
  --g-accent: linear-gradient(135deg, oklch(0.38 0.16 255) 0%, oklch(0.55 0.19 255) 100%);
  --g-cyan: linear-gradient(135deg, oklch(0.55 0.19 255), oklch(0.34 0.15 255));
  --g-wa: linear-gradient(135deg, oklch(0.68 0.16 145), oklch(0.55 0.16 145));
  --g-amber: linear-gradient(135deg, oklch(0.72 0.2 45), oklch(0.78 0.18 55));
  --maxw: 1180px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--body);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px
}

h1,
h2,
h3,
h4 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.14;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.015em
}

a {
  text-decoration: none;
  color: inherit
}

img {
  max-width: 100%;
  display: block
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px
}

.center {
  text-align: center
}

.narrow {
  max-width: 900px
}

.grad-text {
  background: var(--g-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 13px;
  border: 0;
  cursor: pointer;
  transition: transform .14s, filter .14s;
  text-align: center
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto
}

.btn-wa {
  background: var(--g-wa);
  color: #fff;
  box-shadow: 0 8px 22px rgba(22, 163, 74, .32)
}

.btn-wa:hover {
  transform: translateY(-2px);
  filter: brightness(1.05)
}

.btn-call {
  background: var(--g-accent);
  color: #fff;
  box-shadow: 0 8px 22px rgba(21, 101, 192, .3)
}

.btn-call:hover {
  transform: translateY(-2px)
}

.btn-phone {
  background: linear-gradient(135deg, #d92d20, #a41515);
  color: #fff;
  box-shadow: 0 8px 22px rgba(217, 45, 32, .28)
}

.btn-phone:hover {
  transform: translateY(-2px);
  filter: brightness(1.04)
}

.btn-ghost {
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--line)
}

.btn-ghost:hover {
  border-color: var(--cyan)
}

.btn-glass {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .4)
}

.btn-glass:hover {
  background: rgba(255, 255, 255, .2)
}

/* top bar */
.topbar {
  background: var(--navy);
  color: #bfe6ec;
  font-size: 13px
}

.topbar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 22px
}

.topbar a {
  color: #eaffff;
  font-weight: 600
}

.topbar .l {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.topbar svg {
  width: 14px;
  height: 14px;
  color: var(--cyan)
}

@media(max-width:620px) {
  .topbar .hidem {
    display: none
  }
}

/* nav */
header.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 250, 251, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line)
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px
}

.logo {
  display: flex;
  align-items: center
}

.logo img {
  height: 44px;
  width: auto;
  display: block
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px
}

.menu a {
  font-size: 15px;
  font-weight: 500;
  color: #42565d
}

.menu a:hover {
  color: var(--blue)
}

.menu .btn-wa,
.menu .btn-wa:hover {
  color: #fff
}

.nav .btn {
  padding: 9px 16px;
  font-size: 14px
}

.burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px
}

@media(max-width:980px) {
  .menu {
    position: fixed;
    inset: 68px 0 auto 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 22px 18px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-160%);
    transition: transform .25s
  }

  .menu.open {
    transform: none
  }

  .menu a {
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
  }

  .menu .btn {
    margin-top: 12px
  }

  .burger {
    display: block
  }
}

/* photo slot with i9 seal */
.shot {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--g-cyan);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4/3
}

.shot.tall {
  aspect-ratio: 3/4
}

.shot.wide {
  aspect-ratio: 16/10
}

.shot .hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, .92);
  text-align: center;
  padding: 16px;
  font-size: 13.5px;
  font-family: 'Poppins';
  font-weight: 600
}

.shot .hint svg {
  width: 34px;
  height: 34px;
  opacity: .9
}

.shot .hint small {
  font-weight: 400;
  opacity: .8;
  font-family: 'Inter';
  font-size: 12px
}

.shot .seal {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(7, 34, 58, .55);
  backdrop-filter: blur(3px);
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em
}

.shot .seal img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

/* hero */
.hero {
  position: relative;
  background: var(--g-deep);
  color: #cfe6ec;
  overflow: hidden;
  background-image: url('fotos/grupoi9-hero-desktop copiar.webp');
  background-size: cover;
  background-position: top center;
  min-height: 60vh
}

.hero .wrap {
  position: relative;
  z-index: 2;
  padding: 54px 22px 60px
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 42px;
  align-items: center
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #bdeef5;
  background: rgba(24, 182, 201, .16);
  border: 1px solid rgba(24, 182, 201, .4);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
  text-transform: uppercase
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(24, 182, 201, .25)
}

.hero h1 {
  color: #fff;
  font-size: clamp(32px, 4.8vw, 52px);
  font-weight: 800
}

.hero h1 .grad-text {
  background: linear-gradient(120deg, #5BD6E4, #9fc2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero .sub {
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  margin: 20px 0 0;
  max-width: 50ch
}

.hero .cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px
}

.hero .micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 14px;
  color: #9dc2c9
}

.hero .micro span {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.hero .micro svg {
  width: 16px;
  height: 16px;
  color: var(--cyan)
}

@media(max-width:980px) {
  .hero {
    background-image: url('fotos/grupoi9-hero-mobile copiar.webp');
    padding-top: 200px;
    min-height: auto
  }

  .hero-grid {
    grid-template-columns: 1fr
  }
}

/* trust3 */
.trust3 {
  background: #fff;
  border-bottom: 1px solid var(--line)
}

.trust3 .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 26px 22px
}

.trust3 .t {
  display: flex;
  gap: 13px;
  align-items: flex-start
}

.trust3 .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--g-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto
}

.trust3 .ic svg {
  width: 22px;
  height: 22px
}

.trust3 h3 {
  font-size: 16px;
  margin-bottom: 3px
}

.trust3 p {
  margin: 0;
  font-size: 13.5px
}

@media(max-width:760px) {
  .trust3 .wrap {
    grid-template-columns: 1fr;
    gap: 14px
  }
}

/* sections */
section.s {
  padding: 66px 0
}

.kick {
  display: inline-block;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--g-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 11px
}

section.s h2 {
  font-size: clamp(26px, 3.5vw, 38px)
}

.center h2 {
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto
}

.lead {
  font-size: 18px;
  color: var(--body);
  max-width: 62ch;
  margin: 14px 0 0
}

.center .lead {
  margin: 14px auto 0
}

.prose p {
  font-size: 17px;
  margin: 0 0 15px
}

.prose p:last-child {
  margin-bottom: 0
}

/* services grid */
.svc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 42px
}

@media(max-width:920px) {
  .svc {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:560px) {
  .svc {
    grid-template-columns: 1fr
  }
}

.scard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s
}

.scard:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(11, 79, 138, .13)
}

.scard .shot {
  border-radius: 0;
  aspect-ratio: 16/10
}

.scard .in {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.scard .tagline {
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 7px
}

.scard h3 {
  font-size: 19px;
  margin-bottom: 7px
}

.scard p {
  margin: 0 0 16px;
  font-size: 14.5px
}

.scard .btns {
  margin-top: auto;
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.scard .btns .btn {
  flex: 1;
  padding: 11px 12px;
  font-size: 13.5px
}

.scard .btns .btn-ghost {
  flex-basis: 100%
}

/* stats band */
.stats {
  background: var(--g-deep);
  color: #fff;
  position: relative;
  overflow: hidden
}

.stats:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 300px at 50% 0, rgba(24, 182, 201, .25), transparent 60%)
}

.stats .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 42px 22px;
  text-align: center
}

.stat b {
  font-family: 'Poppins';
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  display: block;
  background: linear-gradient(120deg, #fff, #9fd9e2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.stat span {
  font-size: 13.5px;
  color: #aecdd4
}

@media(max-width:680px) {
  .stats .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px
  }
}

/* split block */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center
}

.split.rev .txt {
  order: 2
}

@media(max-width:860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .split.rev .txt {
    order: 0
  }
}

.split .kick {
  margin-bottom: 11px
}

/* value strip */
.vstrip {
  background: var(--g-accent);
  color: #fff
}

.vstrip .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  padding: 18px 22px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 15px
}

.vstrip span {
  display: inline-flex;
  align-items: center;
  gap: 9px
}

.vstrip svg {
  width: 18px;
  height: 18px
}

/* segments */
.segs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px
}

@media(max-width:760px) {
  .segs {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:460px) {
  .segs {
    grid-template-columns: 1fr
  }
}

.seg {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink)
}

.seg .d {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--g-accent);
  flex: 0 0 auto
}

/* reviews — Google style */
.rev-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 18px;
  margin-bottom: 8px
}

.rev-head b {
  font-family: 'Poppins';
  font-size: 18px;
  color: var(--ink)
}

.rev-head .st {
  color: #FF9F1C;
  letter-spacing: 2px
}

.revs-carousel {
  position: relative;
  width: 100%;
  margin-top: 34px;
  text-align: left
}

.revs-track-container {
  overflow: hidden;
  width: 100%;
}

.revs-track {
  display: flex;
  gap: 18px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.revs-track .rev {
  flex: 0 0 calc((100% - 2 * 18px) / 3);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .revs-track .rev {
    flex: 0 0 calc((100% - 18px) / 2);
  }
}

@media (max-width: 600px) {
  .revs-track .rev {
    flex: 0 0 100%;
  }
}

.revs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.revs-btn {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  font-size: 20px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.revs-btn:hover {
  background: var(--ice);
  border-color: var(--blue);
  color: var(--blue);
}

.revs-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #fdfdfd;
  border-color: var(--line);
  color: var(--muted);
}

.revs-dots {
  display: flex;
  gap: 8px;
}

.revs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.revs-dot.active {
  background: var(--blue);
  transform: scale(1.2);
}

.rev {
  background: #F5F5F5;
  border: none;
  border-radius: 24px;
  padding: 24px;
  position: relative
}

.rev:before {
  display: none
}

.rev-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between
}

.rev-user {
  display: flex;
  align-items: center;
  gap: 12px
}

.rev-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--g-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins';
  font-weight: 700;
  flex-shrink: 0;
  font-size: 14px;
  overflow: hidden
}

.rev-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rev-info {
  display: flex;
  flex-direction: column;
  margin-top: 2px
}

.rev-info b {
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 17px;
  color: #1F1F1F;
  display: block;
  line-height: 1.2;
  letter-spacing: -0.01em
}

.rev-info span {
  font-size: 15px;
  color: #757575;
  margin-top: 2px
}

.rev-glogo {
  flex-shrink: 0;
  margin-left: 8px;
  margin-top: 4px;
  width: 24px;
  height: 24px
}

.rev-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 16px;
  margin-bottom: 14px
}

.rev-stars svg {
  width: 20px;
  height: 20px;
  fill: #FABB05
}

.rev-stars .rev-verified {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  fill: none
}

.rev p {
  margin: 0;
  font-size: 17px;
  color: #1F1F1F;
  line-height: 1.45
}

/* whyus */
.why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px
}

@media(max-width:860px) {
  .why {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .why {
    grid-template-columns: 1fr
  }
}

.wcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px
}

.wcard .ic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--g-cyan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 13px
}

.wcard .ic svg {
  width: 23px;
  height: 23px
}

.wcard h3 {
  font-size: 16.5px;
  margin-bottom: 6px
}

.wcard p {
  margin: 0;
  font-size: 14px
}

/* cities */
.cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
  text-align: left
}

@media(max-width:860px) {
  .cities {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:480px) {
  .cities {
    grid-template-columns: 1fr
  }
}

.city {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: transform .15s, border-color .15s
}

.city:hover {
  transform: translateY(-3px);
  border-color: var(--cyan)
}

.city .pin {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--g-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px
}

.city .pin svg {
  width: 19px;
  height: 19px
}

.city b {
  font-family: 'Poppins';
  font-size: 18px;
  color: var(--ink);
  display: block;
  margin-bottom: 3px
}

.city span {
  font-size: 13.5px;
  color: var(--muted)
}

.city .more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blue)
}

/* form */
.formsec {
  background: var(--g-deep);
  color: #cfe6ec;
  position: relative;
  overflow: hidden
}

.formsec:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 320px at 90% 0, rgba(24, 182, 201, .26), transparent 60%),
              linear-gradient(135deg, oklch(0.28 0.13 255 / 0.82) 0%, oklch(0.4 0.17 250 / 0.88) 55%, oklch(0.5 0.19 255 / 0.92) 100%),
              url('fotos/fundo_orcamento.webp') no-repeat center center;
  background-size: auto, auto, cover;
}

.formsec .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 40px;
  align-items: center;
  padding: 60px 22px
}

@media(max-width:860px) {
  .formsec .wrap {
    grid-template-columns: 1fr;
    gap: 28px
  }
}

.formsec h2 {
  color: #fff;
  font-size: clamp(26px, 3.5vw, 38px);
}

.formsec .lead {
  color: #aecdd4
}

.benefits {
  list-style: none;
  padding: 0;
  margin: 22px 0 0
}

.benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 15.5px;
  color: #eaffff
}

.benefits svg {
  width: 20px;
  height: 20px;
  color: var(--cyan);
  flex: 0 0 auto
}

.formcard {
  background: #fff;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28)
}

.formcard h3 {
  font-size: 20px;
  margin-bottom: 4px
}

.formcard .fp {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 18px
}

.field {
  margin-bottom: 13px
}

.field label {
  display: block;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  font-family: 'Inter';
  font-size: 15px;
  color: var(--ink);
  background: #fbfdfe;
  outline: none;
  transition: border-color .15s
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--cyan)
}

.field textarea {
  resize: vertical;
  min-height: 62px
}

.formcard .btn-wa {
  width: 100%;
  margin-top: 6px;
  font-size: 16px;
  padding: 15px
}

.formcard .fnote {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 0
}

/* faq */
.faq {
  max-width: 800px;
  margin: 34px auto 0;
  text-align: left
}

.q {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden
}

.q button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 18px 22px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 16.5px;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center
}

.q .chev {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex: 0 0 auto;
  transition: transform .2s
}

.q.open .chev {
  transform: rotate(180deg)
}

.q .ans {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s
}

.q .ans p {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 15.5px
}

/* cta band */
.ctaband {
  background: var(--g-accent);
  color: #fff;
  border-radius: 24px;
  padding: 50px 38px;
  text-align: center;
  position: relative;
  overflow: hidden
}

.ctaband:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 80% 0, rgba(255, 255, 255, .22), transparent 60%)
}

.ctaband>* {
  position: relative;
  z-index: 2
}

.ctaband h2 {
  color: #fff
}

.ctaband p {
  color: #e6f6f9;
  margin: 13px auto 0;
  max-width: 48ch;
  font-size: 18px
}

.ctaband .cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
  flex-wrap: wrap
}

.ctaband .phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: 'Poppins';
  font-weight: 800;
  font-size: clamp(22px, 3vw, 30px);
  color: #fff
}

.ctaband .phone svg {
  width: 25px;
  height: 25px
}

/* breadcrumb (city/service) */
.pcrumb {
  background: var(--soft);
  border-bottom: 1px solid var(--line)
}

.pcrumb .wrap {
  padding: 13px 22px;
  font-size: 13.5px;
  color: var(--muted)
}

.pcrumb a {
  color: var(--blue)
}

/* related/chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px
}

.chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 10px 18px;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 14.5px;
  color: var(--blue);
  transition: border-color .15s, transform .15s
}

.chips a:hover {
  border-color: var(--cyan);
  transform: translateY(-2px)
}

.list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0
}

.list li {
  position: relative;
  padding: 10px 0 10px 32px;
  border-bottom: 1px solid var(--line);
  font-size: 16px
}

.list li:last-child {
  border-bottom: 0
}

.list li:before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--g-accent)
}

.list li:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg)
}

.resp {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 24px;
  margin-top: 18px
}

.resp .big {
  font-family: 'Poppins';
  font-weight: 800;
  font-size: clamp(28px, 5vw, 42px);
  background: var(--g-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1
}

.resp .t b {
  font-family: 'Poppins';
  color: var(--ink);
  font-size: 16px;
  display: block
}

.resp .t span {
  font-size: 14px;
  color: var(--muted)
}

/* footer */
footer.ft {
  background: var(--navy);
  color: #8fb0bb;
  font-size: 14px
}

footer.ft .wrap {
  padding: 46px 22px
}

.ft-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 26px;
  margin-bottom: 20px
}

.ft .logo {
  color: #fff
}

.ft-col b {
  color: #fff;
  font-family: 'Poppins';
  font-size: 14px;
  display: block;
  margin-bottom: 9px
}

.ft-col a,
.ft-col span {
  display: block;
  color: #8fb0bb;
  margin-bottom: 6px
}

.ft-cols {
  display: flex;
  gap: 46px;
  flex-wrap: wrap
}

.ft-links {
  font-size: 13px;
  line-height: 2;
  margin-bottom: 14px
}

.ft-links a {
  color: #9fc2c9
}

.ft-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: #5f828d
}

/* sticky bottom bar */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(7, 34, 58, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: stretch;
  height: 64px
}

.sticky a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 13px;
  border-right: 1px solid rgba(255, 255, 255, .1)
}

.sticky a:last-child {
  border-right: 0
}

.sticky a svg {
  width: 19px;
  height: 19px
}


.sticky .call {
  background: linear-gradient(135deg, #d92d20, #a41515);
}

.sticky .wa {
  background: var(--g-wa)
}

.sticky .info {
  font-weight: 600;
  font-size: 11.5px;
  color: #aecdd4;
  flex: 1.2
}

.sticky .info b {
  color: #fff;
  font-size: 13px
}

@media(min-width:981px) {
  .sticky .info {
    flex: 1.6
  }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s, transform .6s
}

.reveal.in {
  opacity: 1;
  transform: none
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none
  }
}

/* method cards (service pages) */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px
}

@media(max-width:680px) {
  .grid2 {
    grid-template-columns: 1fr
  }
}

.grid2 .item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px
}

.grid2 .item .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--g-cyan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px
}

.grid2 .item .ic svg {
  width: 22px;
  height: 22px
}

.grid2 .item h3 {
  font-size: 17px;
  margin-bottom: 6px
}

.grid2 .item p {
  margin: 0;
  font-size: 14.5px
}

/* Differential section (Maquinário de Ponta) */
.diff-section {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.diff-cards {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.diff-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.diff-card .ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--g-cyan);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.diff-card h3 {
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.diff-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.5;
}