/* =========================================================
   MCRH Market - site institucional
   Identidade: Manual de Marca, Estudio Jaune (autoridade)
   Amarelo #FFC734 / Preto acinzentado #28292B / Preto #0D0D0D
   Branco #FFFFFF / Cinza claro #DEDEDE
   Tipografia: Hanken Grotesk (Bold titulos, Medium destaques, Regular textos)
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --amarelo: #FFC734;
  --grafite: #28292B;
  --preto: #0D0D0D;
  --branco: #FFFFFF;
  --cinza: #DEDEDE;

  --cinza-fundo: #F4F4F4;
  --cinza-texto: #5B5C5F;      /* 6.1:1 sobre branco */
  --cinza-claro-texto: #CFCFD1;/* 10.4:1 sobre grafite */
  --borda: #E3E3E4;
  --borda-escura: #3C3D40;

  --raio: 16px;
  --raio-g: 26px;
  --wrap: 1180px;
  --topo-h: 76px;

  --t: 220ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grafite);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; }
img { height: auto; display: block; border: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6.2vw, 3.45rem); }
h2 { font-size: clamp(1.65rem, 4.4vw, 2.6rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* ---------- Foco visivel ---------- */
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 6px;
}
.secao--claro :focus-visible,
.secao--cinza :focus-visible,
.final :focus-visible { outline-color: var(--grafite); }

.pular {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--grafite); color: var(--branco);
  padding: 12px 18px; border-radius: 10px; font-weight: 500;
  text-decoration: none; transition: top var(--t);
}
.pular:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--estreito { max-width: 840px; }

.secao { position: relative; padding: clamp(60px, 9vw, 110px) 0; overflow: hidden; }
.secao--claro { background: var(--branco); }
.secao--cinza  { background: var(--cinza-fundo); }
.secao--escuro { background: var(--grafite); color: var(--branco); }

.cab { max-width: 760px; margin: 0 0 clamp(34px, 5vw, 56px); }
.cab__sub { font-size: 1.07rem; color: var(--cinza-texto); margin: 0; }
.secao--escuro .cab__sub { color: var(--cinza-claro-texto); }

.olho {
  font-weight: 700; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amarelo); margin: 0 0 .9em;
}
.olho--escuro { color: var(--grafite); }
.olho--escuro::before {
  content: ""; display: inline-block; width: 22px; height: 3px;
  background: var(--amarelo); border-radius: 2px;
  vertical-align: middle; margin-right: 10px; transform: translateY(-1px);
}

/* Marca d'agua: simbolo grande em baixa opacidade sobre o preto */
.secao__marca, .hero__marca {
  position: absolute; pointer-events: none; user-select: none;
  opacity: .035; width: min(680px, 72vw); height: auto; z-index: 0;
}
.secao__marca { right: -16%; bottom: -22%; opacity: .025; }
.hero__marca  { right: -10%; top: 4%; opacity: .03; }
.secao > .wrap { position: relative; z-index: 1; }

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: 12px 22px;
  font-weight: 700; font-size: .97rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; border-radius: 999px;
  cursor: pointer; transition: transform var(--t), background-color var(--t), color var(--t), border-color var(--t);
  text-align: center;
}
.btn--g { min-height: 54px; padding: 15px 30px; font-size: 1.03rem; }
.btn--bloco { width: 100%; }

.btn--amarelo { background: var(--amarelo); color: var(--grafite); border-color: var(--amarelo); }
.btn--amarelo:hover { background: #F2B91F; border-color: #F2B91F; transform: translateY(-2px); }

.btn--preto { background: var(--grafite); color: var(--branco); border-color: var(--grafite); }
.btn--preto:hover { background: var(--preto); border-color: var(--preto); transform: translateY(-2px); }

.btn--linha { background: transparent; color: var(--branco); border-color: rgba(255,255,255,.45); }
.btn--linha:hover { border-color: var(--branco); background: rgba(255,255,255,.08); transform: translateY(-2px); }

/* ---------- Menu fixo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--grafite);
  border-bottom: 1px solid var(--borda-escura);
  transition: box-shadow var(--t);
}
.topo--rolado { box-shadow: 0 10px 30px rgba(13,13,13,.28); }
.topo__in { display: flex; align-items: center; gap: 16px; min-height: var(--topo-h); }

.topo__logo { display: flex; align-items: center; flex: 0 0 auto; padding: 6px 2px; }
.topo__logo img { width: 182px; height: auto; }

.menu { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.menu__ul { display: flex; align-items: center; gap: 22px; }
.menu__ul a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--branco); text-decoration: none;
  font-size: .95rem; font-weight: 500; position: relative;
}
.menu__ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: var(--amarelo); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.menu__ul a:hover::after, .menu__ul a[aria-current="true"]::after { transform: scaleX(1); }

.hamb {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 11px;
  background: transparent; border: 1px solid var(--borda-escura); border-radius: 12px;
  cursor: pointer;
}
.hamb__l {
  display: block; height: 2px; background: var(--branco); border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.hamb__l + .hamb__l { margin-top: 5px; }
.hamb[aria-expanded="true"] .hamb__l:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] .hamb__l:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] .hamb__l:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(13,13,13,.5);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--grafite); color: var(--branco);
  padding: calc(var(--topo-h) + clamp(44px, 7vw, 86px)) 0 clamp(56px, 8vw, 96px);
}
/* Linha amarela do telhado: no celular fica no rodape do hero, atras do
   mockup; no desktop desliza para a coluna da imagem, longe do texto. */
.hero__telhado {
  position: absolute; left: -9%; bottom: -86px;
  width: min(520px, 88%); height: auto; z-index: 0;
}
.hero__in {
  position: relative; z-index: 2;
  display: grid; gap: clamp(34px, 5vw, 56px);
  align-items: center;
}
.hero h1 { margin-bottom: .35em; }
.hero__sub {
  font-size: clamp(1.03rem, 2.2vw, 1.2rem); font-weight: 500;
  color: var(--cinza-claro-texto); max-width: 34ch; margin-bottom: 1.8em;
}
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__selos {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 30px; font-size: .9rem; font-weight: 500; color: var(--cinza-claro-texto);
}
.hero__selos li { display: flex; align-items: center; gap: 8px; }
.hero__selos li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amarelo); flex: 0 0 auto;
}
.hero__img { position: relative; }
.hero__img img {
  width: 100%; border-radius: var(--raio-g);
  box-shadow: 0 26px 60px rgba(13,13,13,.45);
}
.hero__img::after {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 120px; height: 120px; border-radius: 0 0 var(--raio-g) 0;
  border-right: 10px solid var(--amarelo); border-bottom: 10px solid var(--amarelo);
  z-index: -1;
}

/* ---------- Mix de produtos ---------- */
.mix { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
.mix__lista { display: grid; gap: 14px; }
.mix__lista li {
  display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto;
  column-gap: 16px; align-items: center;
  padding: 16px 18px; background: var(--cinza-fundo);
  border-radius: var(--raio); border: 1px solid var(--borda);
}
.mix__lista b { font-weight: 700; font-size: 1.04rem; align-self: end; }
.mix__lista span:not(.mix__ic) { font-size: .94rem; color: var(--cinza-texto); align-self: start; }
.mix__ic {
  grid-row: 1 / 3; width: 52px; height: 52px; border-radius: 50%;
  background: var(--grafite); display: grid; place-items: center;
}
.mix__ic svg { width: 26px; height: 26px; fill: none; stroke: var(--amarelo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mix__fig { margin: 0; display: grid; place-items: center; }
.mix__fig picture { display: block; }
.mix__fig img { width: min(330px, 76%); filter: drop-shadow(0 22px 34px rgba(13,13,13,.14)); }

.destaques {
  display: grid; gap: 18px;
  margin-top: clamp(38px, 5vw, 64px);
}
.destaque {
  padding: 26px 24px; border-radius: var(--raio-g);
  background: var(--branco); border: 1px solid var(--borda);
}
.destaque__ic {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--amarelo); margin-bottom: 18px;
}
.destaque__ic svg { width: 28px; height: 28px; fill: none; stroke: var(--grafite); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.destaque p { margin: 0; color: var(--cinza-texto); font-size: .97rem; }

/* ---------- Cards (condominios) ---------- */
.cards { display: grid; gap: 18px; }
.card {
  padding: 28px 26px; border-radius: var(--raio-g);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--borda-escura);
  transition: border-color var(--t), transform var(--t), background-color var(--t);
}
.card:hover { border-color: rgba(255,199,52,.55); background: rgba(255,255,255,.07); transform: translateY(-3px); }
.card__ic {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--amarelo); margin-bottom: 18px;
}
.card__ic svg { width: 28px; height: 28px; fill: none; stroke: var(--grafite); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card p { margin: 0; color: var(--cinza-claro-texto); font-size: .97rem; }
.card--foto { padding: 0; overflow: hidden; position: relative; min-height: 230px; }
.card--foto picture { position: absolute; inset: 0; display: block; }
.card--foto img { width: 100%; height: 100%; object-fit: cover; object-position: 16% 50%; }

.perfil {
  margin-top: clamp(34px, 5vw, 58px);
  display: grid; gap: clamp(26px, 4vw, 46px); align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--raio-g);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--borda-escura);
}
.perfil h3 { font-size: 1.35rem; margin-bottom: .7em; }
.perfil__ul { display: grid; gap: 10px; margin-bottom: 20px; }
.perfil__ul li {
  position: relative; padding-left: 21px;
  font-size: 1.02rem; color: var(--branco);
}
.perfil__ul li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--amarelo);
}
.perfil__nota { color: var(--cinza-claro-texto); font-size: .95rem; margin-bottom: 24px; }
.perfil__fig { margin: 0; }
.perfil__fig picture { display: block; }
.perfil__fig img { width: 100%; border-radius: var(--raio); }

/* ---------- Passos ---------- */
.passos { display: grid; gap: 18px; counter-reset: p; }
.passo {
  position: relative; padding: 30px 26px 26px;
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g);
}
.passo__n {
  position: absolute; top: 22px; right: 24px;
  font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: var(--cinza); letter-spacing: -.04em;
}
.passo__ic {
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--grafite); margin-bottom: 18px;
}
.passo__ic svg { width: 28px; height: 28px; fill: none; stroke: var(--amarelo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.passo p { margin: 0; color: var(--cinza-texto); font-size: .97rem; }

/* ---------- Quem somos ---------- */
.hist { display: grid; gap: clamp(30px, 4vw, 54px); align-items: start; }
.hist__txt p { color: var(--cinza-texto); max-width: 56ch; }
.hist__frase {
  font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--grafite); line-height: 1.3; letter-spacing: -.02em;
  margin-top: 1.3em; padding-left: 18px; border-left: 5px solid var(--amarelo);
}
.socios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.socio {
  padding: 22px 18px; text-align: center;
  background: var(--cinza-fundo); border: 1px dashed var(--borda); border-radius: var(--raio-g);
}
.socio__foto {
  width: 96px; height: 96px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--cinza);
  display: grid; place-items: center; overflow: hidden;
}
.socio__foto img { width: 46px; height: auto; opacity: .3; }
.socio b { display: block; font-size: 1rem; }
.socio span { display: block; font-size: .88rem; color: var(--cinza-texto); }
.socios__nota { margin: 14px 0 0; font-size: .85rem; color: var(--cinza-texto); text-align: center; }

/* Caracteristicas: aneis concentricos do manual (p.05) */
.carac {
  position: relative; margin-top: clamp(44px, 6vw, 76px);
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 48px);
  background: var(--amarelo); border-radius: var(--raio-g); overflow: hidden;
  display: grid; gap: clamp(26px, 4vw, 44px); align-items: center;
}
.carac__anel {
  position: relative; display: grid; place-items: center;
  width: min(260px, 70vw); aspect-ratio: 1; margin: 0 auto;
}
.carac__anel::before, .carac__anel::after {
  content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--branco);
}
.carac__anel::before { inset: 0; }
.carac__anel::after { inset: 13%; }
.carac__centro {
  position: relative; z-index: 1; text-align: center;
  font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .04em; color: var(--grafite);
}
.carac__ul { display: grid; gap: 16px; }
.carac__ul li {
  padding: 16px 20px; background: rgba(255,255,255,.55);
  border-radius: var(--raio); border: 1px solid rgba(255,255,255,.8);
}
.carac__ul b { display: block; font-size: 1.05rem; color: var(--grafite); }
.carac__ul span { font-size: .95rem; color: var(--grafite); }

/* ---------- Mapa / unidades ---------- */
.mapa { display: grid; gap: 22px; }
.mapa__box[hidden] { display: none; }
.mapa__box {
  border-radius: var(--raio-g); overflow: hidden;
  border: 1px solid var(--borda-escura); background: var(--cinza-fundo);
}
#mapa { width: 100%; height: clamp(320px, 52vh, 520px); }
/* Regras do Leaflet escopadas por #mapa: o leaflet.css e carregado sob
   demanda e, sem o escopo, venceria por ordem de origem. */
#mapa.leaflet-container { font-family: inherit; background: #EDEDED; }
#mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.06); }
#mapa .leaflet-control-attribution {
  font-size: 11px; max-width: 100%; white-space: normal; line-height: 1.5;
  padding: 2px 11px 2px 7px;
}
#mapa .leaflet-popup-content-wrapper { border-radius: 12px; }
#mapa .leaflet-popup-content { margin: 12px 14px; font-size: .92rem; }
#mapa .leaflet-popup-content b { display: block; font-size: 1rem; }

.pin { display: grid; place-items: center; }
.pin__corpo {
  width: 38px; height: 38px; border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  background: var(--grafite); border: 2px solid var(--amarelo);
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(13,13,13,.35);
  transition: transform var(--t), background-color var(--t);
}
#mapa .pin .pin__corpo img { width: 21px; height: auto; transform: rotate(45deg); }
.pin--ativo .pin__corpo { transform: rotate(-45deg) scale(1.22); background: var(--preto); }

.unidades { display: grid; gap: 14px; }
.unidade { }
.unidade__btn {
  width: 100%; display: grid; grid-template-columns: 96px 1fr; gap: 16px;
  align-items: center; text-align: left;
  padding: 12px; border-radius: var(--raio);
  background: rgba(255,255,255,.045); border: 1px solid var(--borda-escura);
  color: var(--branco); font: inherit; cursor: pointer;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}
.unidade__btn:hover { border-color: rgba(255,199,52,.6); background: rgba(255,255,255,.08); }
.unidade__btn[aria-pressed="true"] {
  border-color: var(--amarelo); background: rgba(255,199,52,.12);
}
.unidade__foto {
  width: 96px; height: 76px; border-radius: 10px; overflow: hidden;
  background: var(--borda-escura); display: block;
}
.unidade__foto picture { display: block; width: 100%; height: 100%; }
.unidade__foto img { width: 100%; height: 100%; object-fit: cover; }
.unidade__nome { display: block; font-weight: 700; font-size: 1.02rem; }
.unidade__bairro { display: block; font-size: .9rem; color: var(--cinza-claro-texto); }
.unidade__tag {
  display: inline-block; margin-top: 6px;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grafite); background: var(--amarelo);
  padding: 3px 9px; border-radius: 999px;
}

.unidade--cta .unidade__btn {
  grid-template-columns: 1fr; text-align: center;
  border-style: dashed; padding: 22px 18px; text-decoration: none;
}
.unidade--cta .unidade__nome { font-size: 1.06rem; }
.unidade--cta .unidade__bairro { margin-top: 4px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--amarelo); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 15px 20px; cursor: pointer;
  font-weight: 700; font-size: 1.03rem; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__mais {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px;
  border-radius: 50%; background: var(--amarelo);
}
.faq__mais::before, .faq__mais::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 2.4px; border-radius: 2px; background: var(--grafite);
  transform: translate(-50%, -50%); transition: transform var(--t);
}
.faq__mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__mais::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__corpo { padding: 0 20px 18px; }
.faq__corpo p { margin: 0; color: var(--cinza-texto); font-size: .98rem; max-width: 68ch; }

/* ---------- Chamada final ---------- */
.final {
  position: relative; background: var(--amarelo); color: var(--grafite);
  padding: clamp(58px, 8vw, 100px) 0 clamp(82px, 10vw, 120px);
  overflow: hidden;
}
.final__in { display: grid; gap: clamp(30px, 4vw, 54px); align-items: start; position: relative; z-index: 1; }
.final__txt p { color: var(--grafite); max-width: 44ch; }
.final__frase {
  font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.14rem); line-height: 1.35;
  letter-spacing: -.01em; margin-bottom: .9em; max-width: 30ch;
  padding-left: 16px; border-left: 5px solid var(--grafite);
}
.final__dir { margin-top: 14px; font-weight: 500; font-size: .98rem; }
.final__dir a {
  color: var(--grafite);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.final__casinhas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  height: 46px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22108%22%20height%3D%2266%22%20viewBox%3D%220%200%20108%2066%22%3E%3Cpath%20d%3D%22M0%2060%20L54%2012%20L72%2028%20L72%2019%20L82%2019%20L82%2037%20L108%2060%22%20fill%3D%22none%22%20stroke%3D%22%2328292B%22%20stroke-width%3D%228%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 75px 46px;
}
@media (min-width: 760px) { .final__casinhas { height: 64px; background-size: 105px 64px; } }

.form {
  background: var(--branco); border-radius: var(--raio-g);
  padding: clamp(24px, 3.4vw, 34px);
  box-shadow: 0 18px 44px rgba(40,41,43,.14);
}
.form__tit { font-weight: 700; font-size: 1.12rem; margin-bottom: 18px; }
.campo { margin-bottom: 15px; }
.campo-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo label {
  display: block; font-size: .86rem; font-weight: 500;
  color: var(--cinza-texto); margin-bottom: 6px;
}
.campo input, .campo select {
  width: 100%; min-height: 48px; padding: 11px 14px;
  font: inherit; font-size: 1rem; color: var(--grafite);
  background: var(--branco);
  border: 1.5px solid var(--borda); border-radius: 12px;
  transition: border-color var(--t);
}
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328292B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.campo input:focus, .campo select:focus { border-color: var(--grafite); }
.campo input[aria-invalid="true"] { border-color: var(--grafite); border-width: 2px; }
.erro { margin: 6px 0 0; font-size: .84rem; font-weight: 500; color: var(--grafite); }
.erro::before { content: "! "; font-weight: 700; }
.form__nota { margin: 12px 0 0; font-size: .84rem; color: var(--cinza-texto); text-align: center; }

/* ---------- Rodape ---------- */
.rodape { background: var(--preto); color: var(--branco); padding: clamp(46px, 6vw, 72px) 0 0; }
.rodape__in { display: grid; gap: 36px; }
.rodape__marca img { width: 108px; height: auto; }
.rodape__slogan {
  margin: 16px 0 0; font-weight: 700; font-size: 1.1rem;
  color: var(--amarelo); letter-spacing: -.01em;
}
.rodape h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cinza-claro-texto); margin-bottom: 14px;
}
.rodape ul { display: grid; gap: 2px; }
.rodape li { font-size: .97rem; color: var(--cinza-claro-texto); display: flex; align-items: center; min-height: 44px; }
.rodape a {
  color: var(--cinza-claro-texto); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--t);
}
.rodape a:hover { color: var(--amarelo); }
.rodape__fim {
  margin-top: clamp(34px, 5vw, 54px);
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid #222;
}
.rodape__fim p { margin: 0; font-size: .86rem; color: #8A8B8E; }

/* ---------- WhatsApp flutuante ---------- */
.wa-flut {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 13px 20px 13px 17px;
  background: var(--grafite); color: var(--branco);
  border: 2px solid var(--amarelo); border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  box-shadow: 0 12px 28px rgba(13,13,13,.34);
  transition: transform var(--t), background-color var(--t);
}
.wa-flut:hover { background: var(--preto); transform: translateY(-2px); }
.wa-flut svg { width: 23px; height: 23px; flex: 0 0 auto; color: var(--amarelo); }

/* ---------- Animacoes de entrada ---------- */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal--2 { transition-delay: .09s; }
.reveal--3 { transition-delay: .18s; }
.reveal.visivel { opacity: 1; transform: none; }
.sem-js .reveal { opacity: 1; transform: none; }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (max-width: 1079px) {
  .hamb { display: block; }
  .menu {
    position: fixed; inset: var(--topo-h) 0 auto 0; z-index: 95;
    margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--grafite); border-bottom: 1px solid var(--borda-escura);
    padding: 10px 20px 22px;
    max-height: calc(100vh - var(--topo-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
    box-shadow: 0 20px 40px rgba(13,13,13,.4);
  }
  .menu--aberto { transform: none; opacity: 1; visibility: visible; }
  .menu__ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__ul li + li { border-top: 1px solid var(--borda-escura); }
  .menu__ul a { min-height: 54px; font-size: 1.05rem; width: 100%; }
  .menu__ul a::after { display: none; }
  .menu__cta { margin-top: 16px; width: 100%; min-height: 52px; }
}

@media (min-width: 560px) {
  .destaques { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .mix__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
  body { font-size: 17.5px; }
  .mix { grid-template-columns: 1.35fr .65fr; }
  .mix__lista { grid-template-columns: 1fr; }
  .mix__lista li { grid-template-columns: 56px 1fr; }
  .carac { grid-template-columns: minmax(200px, .8fr) 1.2fr; }
  .carac__ul { grid-template-columns: repeat(2, 1fr); }
  .final__in { grid-template-columns: 1fr 1fr; align-items: center; }
  .hist { grid-template-columns: 1.25fr .75fr; }
  .perfil { grid-template-columns: 1fr 1fr; }
  .rodape__in { grid-template-columns: 1.3fr 1fr 1.2fr; }
  .mapa { grid-template-columns: 1.15fr .85fr; align-items: start; }
  .mapa--sem-mapa { grid-template-columns: 1fr; }
  .mapa--sem-mapa .mapa__lista { max-height: none; }
  .mapa--sem-mapa .unidades { grid-template-columns: repeat(2, 1fr); }
  .mapa__lista { max-height: clamp(320px, 52vh, 520px); overflow-y: auto; padding-right: 4px; }
}

@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; }
  .hero__telhado { left: 47%; right: auto; bottom: -104px; width: min(600px, 54%); }
  .destaques { grid-template-columns: repeat(3, 1fr); }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .mix__lista { grid-template-columns: repeat(2, 1fr); }
  .mix { grid-template-columns: 1.5fr .5fr; }
}

@media (min-width: 1080px) {
  .topo__logo img { width: 200px; }
  .wa-flut { right: 24px; bottom: 24px; }
}

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

/* ---------- Impressao ---------- */
@media print {
  .topo, .wa-flut, .menu-backdrop, .hero__telhado, .secao__marca, .hero__marca, #mapa { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .secao--escuro, .hero, .final { background: #fff !important; color: #000 !important; }
  .reveal { opacity: 1; transform: none; }
}