/* ==========================================================================
   Arkos Incorporadora — folha de estilo única
   Mobile-first. Sem dependências externas. Sem build.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --azul: #10318f;
  --azul-escuro: #0b2266;
  --azul-claro: #2c4fc0;
  --laranja: #e57818;
  --laranja-escuro: #c8630c;
  /* O laranja da marca dá só 2,99:1 com branco — abaixo dos 4,5:1 do WCAG AA.
     Sobre laranja usamos texto escuro (5,56:1) e, quando o laranja é o próprio
     texto sobre fundo claro, usamos este tom mais fechado (5,08:1 no branco). */
  --sobre-laranja: #1c1b26;
  --laranja-texto: #a85a0c;
  --grafite: #2d2c3e;
  --grafite-claro: #3d3b52;
  --tinta: #1c1b26;
  --texto: #3a3947;
  --texto-suave: #6b6a7a;
  --linha: #e2e1e8;
  --fundo: #ffffff;
  --fundo-alt: #f5f5f8;
  --zap: #25d366;
  --zap-escuro: #128c7e;

  --container: 1200px;
  --raio: 10px;
  --raio-g: 18px;
  --sombra: 0 2px 8px rgba(28, 27, 38, .08);
  --sombra-m: 0 8px 24px rgba(28, 27, 38, .12);
  --sombra-g: 0 18px 48px rgba(28, 27, 38, .18);
  --transicao: 200ms cubic-bezier(.4, 0, .2, 1);
  --altura-header: 76px;

  --fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* superfícies e realces usados pelos componentes novos */
  --vidro: rgba(255, 255, 255, .08);
  --grad-azul: linear-gradient(135deg, #10318f 0%, #2c4fc0 100%);
  --grad-laranja: linear-gradient(135deg, #e57818 0%, #f59b3f 100%);
  --grad-escuro: linear-gradient(160deg, #2d2c3e 0%, #1c1b26 100%);
  --anel: 0 0 0 1px rgba(16, 49, 143, .08);
}

@media (max-width: 900px) {
  :root { --altura-header: 64px; }
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-header) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  /* trava o estouro horizontal — o bug do site antigo */
  overflow-x: hidden;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.15;
  color: var(--tinta);
  font-weight: 800;
  letter-spacing: -.015em;
  /* evita que palavra longa estoure a caixa em telas estreitas */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, .98rem + .8vw, 1.5rem); }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------- estrutura -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, .5rem + 2.5vw, 2.5rem);
}

.secao { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.secao--alt { background: var(--fundo-alt); }
.secao--escura { background: var(--grafite); color: #d8d7e2; }
.secao--escura h2, .secao--escura h3 { color: #fff; }

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--laranja);
  color: var(--sobre-laranja);
  font-weight: 700;
  border-radius: 0 0 var(--raio) 0;
}
.pular-para-conteudo:focus { left: 0; }

.titulo-secao { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.titulo-secao p { color: var(--texto-suave); max-width: 62ch; margin-inline: auto; }

.olho {
  display: inline-block;
  margin-bottom: .75rem;
  color: var(--laranja-texto);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* sobre fundo escuro o laranja fechado some (2,68:1); ali o laranja da marca
   é que passa no AA (4,55:1) — por isso a cor depende do fundo, não do componente */
.hero__conteudo .olho,
.secao--escura .olho,
.cta-faixa .olho,
.numeros .olho { color: var(--laranja); }

/* ----------------------------------------------------------------- botão -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;              /* alvo de toque confortável */
  padding: .8rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
.btn:active { transform: translateY(0); }

.btn--primario { background: var(--laranja); color: var(--sobre-laranja); }
.btn--primario:hover { background: var(--laranja-escuro); color: var(--sobre-laranja); }

.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-escuro); color: #fff; }

.btn--contorno { border-color: currentColor; color: var(--azul); background: transparent; }
.btn--contorno:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

.btn--claro { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn--claro:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.btn--zap { background: var(--zap); color: #06301b; }
.btn--zap:hover { background: #1fbe5b; color: #06301b; }

.btn--bloco { width: 100%; }

/* ---------------------------------------------------------------- header -- */
.cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--altura-header);
  background: var(--grafite);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
  transition: background var(--transicao), box-shadow var(--transicao);
}
.cabecalho--rolado { background: rgba(45, 44, 62, .97); box-shadow: var(--sombra-m); }

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .cabecalho--rolado {
    background: rgba(45, 44, 62, .88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
}

.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img {
  width: auto;
  height: clamp(30px, 4.5vw, 42px);
}

.nav { display: none; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .2rem + 1.4vw, 1.9rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: block;
  padding: .5rem .15rem;
  color: #fff;
  font-size: .93rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.nav__link:hover { color: var(--laranja); }
.nav__link[aria-current="page"] { color: var(--laranja); border-bottom-color: var(--laranja); }

.sociais { display: flex; align-items: center; gap: .5rem; }
.sociais__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), transform var(--transicao);
}
.sociais__link:hover {
  background: var(--laranja);
  border-color: var(--laranja);
  color: #fff;
  transform: translateY(-2px);
}
.sociais__link svg { width: 19px; height: 19px; fill: currentColor; }

.cabecalho .sociais { display: none; }

/* botão hambúrguer */
.menu-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--raio);
  color: #fff;
}
.menu-btn__caixa { position: relative; width: 24px; height: 16px; }
.menu-btn__caixa span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao), top var(--transicao);
}
.menu-btn__caixa span:nth-child(1) { top: 0; }
.menu-btn__caixa span:nth-child(2) { top: 6.75px; }
.menu-btn__caixa span:nth-child(3) { top: 13.5px; }

.menu-btn[aria-expanded="true"] .menu-btn__caixa span:nth-child(1) { top: 6.75px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__caixa span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__caixa span:nth-child(3) { top: 6.75px; transform: rotate(-45deg); }

/* menu mobile */
.menu-mobile {
  position: fixed;
  inset-block-start: var(--altura-header);
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1rem, .5rem + 2.5vw, 2.5rem) 2.5rem;
  background: var(--grafite);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu-mobile[data-aberto="true"] { visibility: visible; opacity: 1; transform: translateY(0); }

.menu-mobile__lista { margin: 0 0 auto; padding: 0; list-style: none; }
.menu-mobile__lista li + li { border-top: 1px solid rgba(255,255,255,.12); }
.menu-mobile__link {
  display: block;
  padding: 1.05rem .25rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.menu-mobile__link[aria-current="page"] { color: var(--laranja); }

.menu-mobile__rodape { margin-top: 2rem; }
.menu-mobile__rodape .sociais { justify-content: center; margin-top: 1.25rem; }

/* trava o scroll do fundo quando o menu está aberto */
body[data-menu-aberto="true"] { overflow: hidden; }

@media (min-width: 981px) {
  .nav { display: block; }
  .cabecalho .sociais { display: flex; }
  .menu-btn { display: none; }
  .menu-mobile { display: none; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 78vh;
  margin-top: var(--altura-header);
  overflow: hidden;
  background: var(--grafite);
}
@supports (min-height: 78svh) { .hero { min-height: 78svh; } }

.hero--alto { min-height: 88vh; }
@supports (min-height: 88svh) { .hero--alto { min-height: 88svh; } }

.hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(28,27,38,.86) 0%, rgba(28,27,38,.42) 45%, rgba(28,27,38,.30) 100%);
}
.hero__conteudo {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  color: #fff;
  max-width: 62ch;
}
.hero__conteudo h1 { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero__conteudo p {
  font-size: clamp(1rem, .93rem + .4vw, 1.2rem);
  color: rgba(255,255,255,.93);
}
.hero__selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .4rem 1rem;
  background: var(--laranja);
  border-radius: 100px;
  color: var(--sobre-laranja);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* ------------------------------------------------------------- carrossel -- */
.carrossel { position: relative; }
.carrossel__trilho { position: relative; }
.carrossel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
  pointer-events: none;
}
.carrossel__slide[data-ativo="true"] { position: relative; opacity: 1; pointer-events: auto; }

/* quando o carrossel É o hero, os slides empilham na mesma célula de grid:
   a altura passa a ser a do slide mais alto e não há salto entre trocas */
/* stretch (e não `end`, herdado de .hero) para o slide ocupar toda a altura;
   sem isso a imagem de fundo fica só na faixa de baixo */
.hero[data-carrossel] { display: grid; align-items: stretch; }
.hero[data-carrossel] > .carrossel__slide {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  align-items: end;
  opacity: 0;
  pointer-events: none;
}
.hero[data-carrossel] > .carrossel__slide[data-ativo="true"] { opacity: 1; pointer-events: auto; }

.carrossel__pontos {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: .6rem;
}
/* a barra visível tem 5px, mas o botão tem 24px de altura clicável
   (mínimo do WCAG 2.2 para alvo de toque): o padding entra na área de
   clique e o background-clip mantém a pintura só no miolo */
.carrossel__ponto {
  width: 34px;
  height: 24px;
  padding: 9.5px 0;
  border: 0;
  border-radius: 100px;
  background: rgba(255,255,255,.42);
  background-clip: content-box;
  transition: background var(--transicao), width var(--transicao);
}
.carrossel__ponto[aria-selected="true"] { background: var(--laranja); background-clip: content-box; width: 52px; }

/* ----------------------------------------------------------------- cards -- */
.grade {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card-valor {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.card-valor:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
  border-color: transparent;
}
.card-valor__icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg, var(--azul), var(--azul-claro));
  border-radius: 14px;
  color: #fff;
}
.card-valor__icone svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }
.card-valor h3 { margin-bottom: .4rem; }
.card-valor p { color: var(--texto-suave); font-size: .95rem; }

/* card de empreendimento */
.emp {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.emp:hover { transform: translateY(-5px); box-shadow: var(--sombra-g); }
.emp__midia { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fundo-alt); }
.emp__midia img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.emp:hover .emp__midia img { transform: scale(1.05); }
.emp__status {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  padding: .35rem .85rem;
  background: var(--laranja);
  border-radius: 100px;
  color: var(--sobre-laranja);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.emp__corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.35rem, 1.1rem + 1vw, 2rem); }
/* o título do card é h3 na home (dentro de uma seção com h2) e h2 na página de
   empreendimentos (onde vem logo abaixo do h1): mesmo tamanho nos dois casos */
.emp__corpo h2, .emp__corpo h3 { font-size: clamp(1.15rem, .98rem + .8vw, 1.5rem); }
.emp__corpo p { color: var(--texto-suave); font-size: .95rem; }
.emp__local {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .75rem;
  color: var(--texto-suave);
  font-size: .85rem;
  font-weight: 600;
}
.emp__local svg { width: 15px; height: 15px; flex-shrink: 0; stroke: var(--laranja); fill: none; stroke-width: 2; }
.emp__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: 1.35rem; }

/* --------------------------------------------------------- ficha técnica -- */
.ficha {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.ficha__item { padding: 1.5rem 1.25rem; background: #fff; text-align: center; }
.ficha__valor {
  display: block;
  color: var(--azul);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
}
.ficha__rotulo {
  display: block;
  margin-top: .3rem;
  color: var(--texto-suave);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* listas de itens/diferenciais */
.blocos {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.bloco {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--linha);
  border-top: 4px solid var(--laranja);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.bloco h3 { color: var(--azul); }
.lista-check { margin: 0; padding: 0; list-style: none; }
.lista-check li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .7rem;
  font-size: .95rem;
}
.lista-check li:last-child { margin-bottom: 0; }
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--laranja);
  /* checkmark desenhado em máscara — sem dependência de fonte de ícone */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------- texto + imagem -- */
.dupla {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 3vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 861px) {
  .dupla { grid-template-columns: 1fr 1fr; }
  .dupla--invertida .dupla__midia { order: -1; }
}
.dupla__midia img {
  width: 100%;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-m);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dupla__texto p { color: var(--texto-suave); }

/* --------------------------------------------------------------- galeria -- */
.galeria {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.galeria__item {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--fundo-alt);
  border: 0;
  border-radius: var(--raio);
  cursor: zoom-in;
}
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.galeria__item:hover img { transform: scale(1.06); }
.galeria__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16,49,143,0);
  transition: background var(--transicao);
}
.galeria__item:hover::after { background: rgba(16,49,143,.18); }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, .5rem + 2vw, 3rem);
  background: rgba(15,14,22,.94);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.lightbox[data-aberto="true"] { visibility: visible; opacity: 1; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--raio);
  object-fit: contain;
}
.lightbox__fechar,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.13);
  border: 0;
  border-radius: 50%;
  color: #fff;
  transition: background var(--transicao);
}
.lightbox__fechar:hover, .lightbox__nav:hover { background: rgba(255,255,255,.3); }
.lightbox__fechar { top: 1rem; right: 1rem; font-size: 1.6rem; line-height: 1; }
.lightbox__nav svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.lightbox__nav--ant { left: clamp(.5rem, 2vw, 2rem); }
.lightbox__nav--prox { right: clamp(.5rem, 2vw, 2rem); }
.lightbox__contador {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  font-weight: 600;
}
@media (max-width: 600px) {
  .lightbox__nav { width: 44px; height: 44px; }
}

/* ----------------------------------------------------------- formulários -- */
.form { display: grid; gap: 1.1rem; }
.form__linha { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 641px) { .form__linha { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: .4rem; }
.campo > label { font-size: .88rem; font-weight: 700; color: var(--tinta); }
.campo input, .campo textarea, .campo select {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  /* impede o zoom automático do Safari iOS ao focar um campo */
  font-size: 16px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(16,49,143,.13);
  outline: none;
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #cf3535; }
.campo__erro { color: #cf3535; font-size: .82rem; font-weight: 600; min-height: 1.1em; }

.form__acoes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.form__aviso { font-size: .85rem; color: var(--texto-suave); }

/* newsletter */
.newsletter { text-align: center; }
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
  max-width: 540px;
  margin: 1.75rem auto 0;
}
.newsletter__form input {
  flex: 1 1 240px;
  min-width: 0;             /* deixa o input encolher em telas estreitas */
  min-height: 48px;
  padding: .75rem 1.1rem;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--raio);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 16px;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.55); }
.newsletter__form input:focus { outline: none; border-color: var(--laranja); background: rgba(255,255,255,.13); }
.newsletter__estado { margin-top: .9rem; font-size: .9rem; font-weight: 600; min-height: 1.3em; }
.newsletter__estado[data-tipo="ok"] { color: #64e39a; }
.newsletter__estado[data-tipo="erro"] { color: #ffb3a7; }

/* ------------------------------------------------------------------- CTA -- */
.cta-faixa {
  padding-block: clamp(2.75rem, 2rem + 4vw, 5rem);
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: #fff;
  text-align: center;
}
.cta-faixa h2 { color: #fff; }
.cta-faixa p { max-width: 60ch; margin-inline: auto; color: rgba(255,255,255,.88); }
.cta-faixa__acoes { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.9rem; }

/* --------------------------------------------------------------- contato -- */
.contato-grade {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 901px) { .contato-grade { grid-template-columns: 1fr 1.15fr; } }

/* item de grid tem min-width:auto por padrão e não encolhe abaixo do conteúdo:
   sem isso, o e-mail longo estoura a coluna em telas de 320–375px */
.contato-grade > *, .contato-item > div { min-width: 0; }
.contato-item a, .rodape a { overflow-wrap: anywhere; }

.contato-item { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.contato-item__icone {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: rgba(16,49,143,.09);
  border-radius: 12px;
  color: var(--azul);
}
.contato-item__icone svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; }
.contato-item h3 { margin-bottom: .15rem; font-size: 1rem; }
.contato-item a { font-weight: 600; text-decoration: none; }
.contato-item a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- rodapé -- */
.rodape { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 0; background: var(--grafite); color: rgba(255,255,255,.7); }
.rodape__grade {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  padding-bottom: 2.5rem;
}
.rodape img { height: 40px; width: auto; margin-bottom: 1.1rem; }
.rodape h3 { margin-bottom: 1rem; color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li { margin-bottom: .6rem; }
.rodape a { color: rgba(255,255,255,.7); font-size: .93rem; text-decoration: none; transition: color var(--transicao); }
.rodape a:hover { color: var(--laranja); }
.rodape p { font-size: .93rem; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
}
.rodape .sociais__link { border-color: rgba(255,255,255,.3); }

/* ==========================================================================
   Widget de WhatsApp — botão fixo + prévia de conteúdo
   ========================================================================== */
.zap {
  position: fixed;
  inset-block-end: max(1.15rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1.15rem, env(safe-area-inset-right));
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  /* o container não intercepta cliques; só os filhos */
  pointer-events: none;
}
.zap > * { pointer-events: auto; }

/* botão flutuante */
.zap__botao {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  background: var(--zap);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 22px rgba(37,211,102,.42), var(--sombra-m);
  color: #fff;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.zap__botao:hover { transform: scale(1.07); box-shadow: 0 10px 30px rgba(37,211,102,.55); }
.zap__botao svg { width: 33px; height: 33px; fill: currentColor; }
.zap__botao .zap__x { display: none; }
.zap__botao[aria-expanded="true"] .zap__zap { display: none; }
.zap__botao[aria-expanded="true"] .zap__x { display: block; }

/* anel pulsante — só chama atenção enquanto o painel está fechado */
.zap__botao::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--zap);
  opacity: .55;
  animation: zap-pulso 2.4s ease-out infinite;
  z-index: -1;
}
.zap__botao[aria-expanded="true"]::before { animation: none; opacity: 0; }
@keyframes zap-pulso {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.zap__contador {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  background: #c81e1e;
  border: 2px solid #fff;
  border-radius: 100px;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

/* balão-teaser */
.zap__teaser {
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(76vw, 268px);
  padding: .7rem .9rem .7rem 1rem;
  background: #fff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--sombra-g);
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta);
  transform-origin: bottom right;
  animation: zap-entra 300ms cubic-bezier(.34,1.4,.64,1) both;
}
.zap__teaser[hidden] { display: none; }
.zap__teaser-fechar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  background: var(--fundo-alt);
  border: 0;
  border-radius: 50%;
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1;
}
.zap__teaser-fechar:hover { background: var(--linha); }

@keyframes zap-entra {
  from { opacity: 0; transform: scale(.86) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* painel de prévia */
.zap__painel {
  width: min(calc(100vw - 2rem), 356px);
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ece5dd;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  transform-origin: bottom right;
  visibility: hidden;
  opacity: 0;
  transform: scale(.9) translateY(14px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.zap__painel[data-aberto="true"] { visibility: visible; opacity: 1; transform: scale(1) translateY(0); }

.zap__cabecalho {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  padding: .9rem 1rem;
  background: var(--zap-escuro);
  color: #fff;
}
.zap__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 5px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.zap__avatar img { width: 100%; height: 100%; object-fit: contain; }
.zap__cabecalho strong { display: block; font-size: .95rem; line-height: 1.25; }
.zap__online { display: flex; align-items: center; gap: .35rem; font-size: .76rem; opacity: .92; }
.zap__online::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #6ef295;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(110,242,149,.7);
  animation: zap-online 2s infinite;
}
@keyframes zap-online {
  0%   { box-shadow: 0 0 0 0 rgba(110,242,149,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(110,242,149,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,242,149,0); }
}

.zap__corpo {
  flex: 1;
  padding: 1rem .9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* textura leve do WhatsApp, em SVG inline */
  background-color: #ece5dd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg fill='%23d9d0c5' fill-opacity='.42'%3E%3Ccircle cx='6' cy='6' r='1.4'/%3E%3Ccircle cx='27' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='33' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}

.zap__balao {
  position: relative;
  max-width: 88%;
  margin-bottom: .85rem;
  padding: .7rem .9rem;
  background: #fff;
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 1px 1px rgba(0,0,0,.13);
  font-size: .89rem;
  line-height: 1.5;
  color: #101b20;
}
.zap__balao strong { color: var(--azul); }
.zap__balao-hora {
  display: block;
  margin-top: .2rem;
  color: #8d9599;
  font-size: .68rem;
  text-align: right;
}

.zap__rotulo-opcoes {
  margin: 1.1rem 0 .55rem;
  color: #5b6469;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
}

.zap__opcoes { display: grid; gap: .5rem; }
.zap__opcao {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .85rem;
  background: #fff;
  border: 0;
  border-left: 3px solid var(--laranja);
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.13);
  text-align: left;
  text-decoration: none;
  color: #101b20;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.zap__opcao:hover { transform: translateX(3px); box-shadow: 0 3px 10px rgba(0,0,0,.16); background: #f7fdf9; }
.zap__opcao-emoji { flex-shrink: 0; font-size: 1.25rem; line-height: 1; }
.zap__opcao-txt { min-width: 0; }
.zap__opcao-titulo { display: block; font-size: .87rem; font-weight: 700; line-height: 1.3; }
.zap__opcao-sub { display: block; color: #6b7478; font-size: .76rem; line-height: 1.35; }

.zap__rodape {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
  padding: .65rem;
  background: #f0f0f0;
}
.zap__rodape input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: .55rem .95rem;
  background: #fff;
  border: 0;
  border-radius: 100px;
  font-size: 16px;
}
.zap__rodape input:focus { outline: 2px solid var(--zap); outline-offset: -1px; }
.zap__enviar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--zap);
  border: 0;
  border-radius: 50%;
  color: #fff;
  transition: background var(--transicao);
}
.zap__enviar:hover { background: #1fbe5b; }
.zap__enviar svg { width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 420px) {
  .zap__botao { width: 55px; height: 55px; }
  .zap__botao svg { width: 30px; height: 30px; }
  .zap__painel { width: calc(100vw - 1.6rem); }
}

/* ---------------------------------------------------- utilitários finais -- */
.so-leitor-tela {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.revelar { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms ease; }
.revelar[data-visivel="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecalho, .zap, .menu-mobile, .lightbox, .cta-faixa,
  .ao-topo, .barra-mobile, .progresso { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   COMPONENTES ADICIONAIS — interatividade e refino visual
   ========================================================================== */

/* --------------------------------------------- barra de progresso de leitura */
.progresso {
  position: fixed;
  inset-block-start: var(--altura-header);
  inset-inline: 0;
  z-index: 98;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.progresso__barra {
  height: 100%;
  width: 0;
  background: var(--grad-laranja);
  transition: width 90ms linear;
}

/* ---------------------------------------------------------- faixa de números */
.numeros {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--grad-escuro);
  color: #fff;
  overflow: hidden;
}
.numeros::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -12%;
  width: 55%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(229,120,24,.22) 0%, transparent 68%);
  pointer-events: none;
}
.numeros__grade {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  text-align: center;
}
.numeros__valor {
  display: block;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  background: var(--grad-laranja);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.numeros__rotulo {
  display: block;
  margin-top: .55rem;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- FAQ */
.faq { max-width: 860px; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: #fff;
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: box-shadow var(--transicao), border-color var(--transicao);
}
.faq__item + .faq__item { margin-top: .85rem; }
.faq__item[data-aberto="true"] { box-shadow: var(--sombra-m); border-color: rgba(16,49,143,.28); }

.faq__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: clamp(1rem, .85rem + .6vw, 1.4rem) clamp(1.1rem, .9rem + .8vw, 1.6rem);
  background: transparent;
  border: 0;
  text-align: left;
  font-size: clamp(.98rem, .93rem + .3vw, 1.1rem);
  font-weight: 700;
  color: var(--tinta);
  line-height: 1.4;
}
.faq__botao:hover { color: var(--azul); }
.faq__sinal {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(16,49,143,.09);
  transition: background var(--transicao), transform var(--transicao);
}
.faq__sinal::before, .faq__sinal::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 11px;
  height: 2.2px;
  background: var(--azul);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--transicao), opacity var(--transicao);
}
.faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[data-aberto="true"] .faq__sinal { background: var(--laranja); }
.faq__item[data-aberto="true"] .faq__sinal::before,
.faq__item[data-aberto="true"] .faq__sinal::after { background: #fff; }
.faq__item[data-aberto="true"] .faq__sinal::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(.4, 0, .2, 1);
}
.faq__item[data-aberto="true"] .faq__resposta { grid-template-rows: 1fr; }
.faq__resposta > div { overflow: hidden; }
.faq__resposta p {
  margin: 0;
  padding: 0 clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.1rem, .95rem + .6vw, 1.5rem);
  color: var(--texto-suave);
  font-size: .95rem;
}
.faq__resposta p + p { padding-top: 0; }

/* ------------------------------------------------------------- simulador */
.simulador {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
  padding: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-m);
}
@media (min-width: 861px) { .simulador { grid-template-columns: 1fr 1fr; } }

.simulador__controles { display: grid; gap: 1.5rem; }
.controle__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}
.controle__topo label { font-size: .88rem; font-weight: 700; color: var(--tinta); }
.controle__valor {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

/* range estilizado nos dois motores (WebKit e Gecko) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  padding: 0;
  margin: 0;
  background: var(--linha);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--laranja);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--sombra-m);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--laranja);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--sombra-m);
  cursor: grab;
}
input[type="range"]:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }

.simulador__resultado {
  padding: clamp(1.35rem, 1.1rem + 1vw, 2rem);
  background: var(--grad-azul);
  border-radius: var(--raio-g);
  color: #fff;
  text-align: center;
}
.simulador__rotulo {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.simulador__parcela {
  display: block;
  margin: .5rem 0 .25rem;
  font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.simulador__detalhe { color: rgba(255,255,255,.82); font-size: .88rem; }
.simulador__aviso {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  line-height: 1.5;
}
.simulador__resultado .btn { margin-top: 1.25rem; }

/* ------------------------------------------------------------------ preço */
.preco {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 2vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.6rem, 1.2rem + 1.8vw, 3rem);
  background: var(--grad-azul);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  color: #fff;
}
@media (min-width: 861px) { .preco { grid-template-columns: 1fr 1fr; } }

.preco h2 { color: #fff; margin-bottom: .35rem; }
.preco__rotulo {
  display: block;
  margin-bottom: .3rem;
  color: rgba(255,255,255,.82);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.preco__valor {
  display: block;
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.preco__nota { margin-top: .6rem; color: rgba(255,255,255,.8); font-size: .84rem; }
.preco__lista { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.preco__lista li {
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .65rem;
  font-size: .96rem;
  color: rgba(255,255,255,.94);
}
.preco__lista li:last-child { margin-bottom: 0; }
.preco__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--laranja);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.preco__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* etiqueta de preço dentro do card de empreendimento */
.emp__preco {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linha);
}
.emp__preco small { color: var(--texto-suave); font-size: .78rem; font-weight: 600; }
.emp__preco strong { color: var(--azul); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }

/* ----------------------------------------------------------------- filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
}
.filtro {
  padding: .55rem 1.25rem;
  background: #fff;
  border: 1.5px solid var(--linha);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--texto-suave);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.filtro:hover { border-color: var(--azul); color: var(--azul); }
.filtro[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
[data-filtravel][hidden] { display: none !important; }

/* --------------------------------------------------------- voltar ao topo */
.ao-topo {
  position: fixed;
  inset-block-end: max(1.15rem, env(safe-area-inset-bottom));
  inset-inline-start: max(1.15rem, env(safe-area-inset-left));
  z-index: 190;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: rgba(45, 44, 62, .92);
  border: 0;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--sombra-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicao), visibility var(--transicao),
              transform var(--transicao), background var(--transicao);
}
.ao-topo[data-visivel="true"] { opacity: 1; visibility: visible; transform: none; }
.ao-topo:hover { background: var(--azul); }
.ao-topo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ------------------------------------------------- barra fixa no celular */
.barra-mobile {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 180;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linha);
  box-shadow: 0 -4px 18px rgba(28,27,38,.14);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform var(--transicao);
}
.barra-mobile[data-visivel="true"] { transform: none; }
.barra-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 54px;
  background: #fff;
  color: var(--tinta);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
}
.barra-mobile a:last-child { background: var(--zap); color: #06301b; }
.barra-mobile svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }

/* a barra ocupa a base: sobe os botões flutuantes para não colidir */
@media (max-width: 860px) {
  body[data-barra="true"] .zap { inset-block-end: calc(54px + max(1rem, env(safe-area-inset-bottom))); }
  body[data-barra="true"] .ao-topo { inset-block-end: calc(54px + max(1rem, env(safe-area-inset-bottom))); }
}
@media (min-width: 861px) { .barra-mobile { display: none; } }

/* ------------------------------------------------------- selos de confiança */
.selos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.selo {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
}
.selo svg { width: 15px; height: 15px; stroke: var(--laranja); fill: none; stroke-width: 2.5; }

/* ----------------------------------------------------- etapas da obra */
.etapas { display: grid; gap: 1.5rem; }
.etapa {
  position: relative;
  padding-left: 2.5rem;
}
.etapa::before {
  content: "";
  position: absolute;
  inset-block-start: .35rem;
  inset-inline-start: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--linha);
  box-shadow: 0 0 0 4px #fff;
}
.etapa::after {
  content: "";
  position: absolute;
  inset-block-start: 1.7rem;
  inset-inline-start: 7px;
  width: 2px;
  height: calc(100% + .3rem);
  background: var(--linha);
}
.etapa:last-child::after { display: none; }
.etapa[data-concluida="true"]::before { background: var(--laranja); }
.etapa[data-atual="true"]::before {
  background: var(--azul);
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(16,49,143,.18);
}
.etapa h4 { margin-bottom: .2rem; font-size: 1rem; color: var(--tinta); }
.etapa p { margin: 0; color: var(--texto-suave); font-size: .9rem; }

/* ------------------------------------------------ refinos de profundidade */
.card-valor { position: relative; overflow: hidden; }
.card-valor::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--grad-laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}
.card-valor:hover::before { transform: scaleX(1); }

.emp { position: relative; }
.emp__midia::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,27,38,.35), transparent 55%);
  pointer-events: none;
}

.secao--alt { position: relative; }

/* utilitários que substituem os style="" inline (necessário para a CSP) */
.centralizado { text-align: center; }
.sem-topo { padding-top: 0; }
.sem-base { margin-bottom: 0; }
.espaco-acima { margin-top: 2.5rem; }
.espaco-acima-p { margin-top: 1rem; }
.texto-suave { color: var(--texto-suave); }
.texto-mini { font-size: .88rem; color: var(--texto-suave); margin: .2rem 0 0; }
.titulo-medio { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.lista-contatos { margin-top: 2rem; }
.rodape__base--limpo { border-top: 0; }
.sem-margem { margin: 0; }
.form-espaco { margin-top: 1.5rem; }
.texto-limitado { max-width: 56ch; margin: 0 auto 2rem; color: var(--texto-suave); }
.abaixo-header { margin-top: var(--altura-header); }
.acoes-centro { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* o segundo slide usa <h2> (só pode haver um <h1> por página),
   mas precisa do mesmo peso visual do primeiro */
.hero__titulo {
  color: #fff;
  font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .35);
}