/* ==========================================================================
   HCP ENGENHARIA — STYLES
   Tokens do kit_preparado da HCP. Simbolo = a casa ambar; 2o motivo = a janela de 4
   folhas, que tileia na divisoria. Clonado da LP comercial da Projex e re-skinado.
   ========================================================================== */

:root {

  /* --- KIT DE MARCA HCP (kit_preparado, publicado no Drive) ----------------
     Os dois motivos vem do kit em data URI: funcionam em file://, print e PDF
     (playbook 15.1). mark-full = a casa ambar recortada por cor do vetor;
     mark-band = a janela de 4 folhas, que tileia como regua e divisoria. */
  --mark-full: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAACWCAYAAADnutvAAAAMWUlEQVR42u2dy29bxxXGz5k714pEUhZpyUAQKEUaA0UTkEkfQBcF6rhS/wRp1Vipm0iRH0mKLgo0AWQh7qaLNM3TjoPaZIsClbZFd0HsfQsEKhKndZqFhSAWSVERST3ImTunC+phSpREUUPq8up8W5uGJf30ne/MmQcAy4qIAGlqyAEAmEsm/ppNJf4BAEATE4IIkL9DrD3BySQTby7/7WlamfoeZVKJmxWAIJAA8W+EBXBgekjg8LSXTibe7o3Ii5m88gCA+rpdmSvqv/SenXmWCAQAECJQUL52wT9+e+DEIs7FbEEpRHQQUWbySveE5c+zqXgKEQxcBgySAzE8FsDJpJ56KxaRF3MFrQDQ3bB1RJkrKNUTdp/N/DmexEkw09NDgSlhXLYODE78rWjYvTSfVxoR5Q6fULGI6y4s6Rt9z86co6khB4amTbuXMHaeA5Wq+NvRsLyUq5QqucvvqJsrKBUNyV9kkvEPcXjagwA4EMNzAHBiEffifF7rB0vVngBF3F9mU4nrQQCI4TkQOLuVqp0B6gnL5zMBAIjhaSDjNAZONUCxAADEgXl/jvNeLCzHc8XqrqrBf1mdiLhurqA/7BuZeaEdQzQ7T73gpOJXT0Tc8flCvRlnbweaLygVi8jnM8n2dCB2njrBiYXdsVxBKTvgbG/jvynq671nZ0bbyYHYeQ4VnKoQ/UImlfignRyI4TlUcLa08W0GEJetHcDJpuJXe1oCTo2V6KK+3tcGJYydp6bjJK72hN2x+bzSrQOnqo1vCwdi59nmOImrPSE5liu20nFqt/ELBf1B78jMmF8dSDA4W8AJy7H5QqsdZ7sDZfNK90TkaCaZuOZXB0IGpxqc1mac9nYgweCsZxx74BCAIQBjayHRrw4k2HESV2MWwTFEpkOieMhFYYiMtTbehwAJLlWOPXAMed2djihr+rKk6D/Hu6QwhjxrXVjEGc2mElf9AlDg4KGJnb+mmuE4b2dWZQx54U7H0R7dU6DPeAg/KSvzRXeX4xCRthOitY6G5Vg66Q+ARNDAwUkw68dgds04oUqpamxbRW1wPI/uLS6WBx8Z+ezew2dn0tmiGihp80Wk05E2AEJEuTZM9QVAIjjgnJY4CWYuGb+cXr37ozVgxE4Zx1Y7vuE4mmbzpfJg//iduzQ15NDUkPP42Gf3ckVtFaDNEibH0sn4oQIkggPObZ2+Gf/tyePuhCAsAwBMT68ddanRjtt2nEK5PNB/7s7djydOSxye9nB42qsCSJm7kU5H2s1Aciybir9/WAC1PTz0cQWc+8n4q8fD8ncLRc8AaQIA6Os7XSPjNMNxcHAdnDOTtzfcpQqgJT1YspyBcgWtesLui+lDAki0PThnbut0Mv5qLCSv5Je1AgABSAgAEPlvEXF42sskE9ea4Tha02zFcT7ZBs4OAA2UPLLvQIcEkGh7cG7EX+0JySuLS1obgw4iAHgVeH449i+VSSauRcPOqM12vFapqgVOTYAKqgkOpFQs5L6YTcbfayVAot0dpycirywue9oQOpvjFheIAOeSieuxiBy1tXW0nlJVF0BLeqCk7Ibo+YLSPRF3PN1CgNpttoX08WlnA5yQvLK4vOE4SATU1SFwadl7XDjw077YseuZnCoDwjGbjpMvlfcFThX4U0MODk97/7v2xKOxsPyoQ4pThRVP2yin6/uBcgX1/smRf59v9ixMtJnjVIOz5G2AU/X3hDAE0G80GQISFhcAZ/P5Cjg0NeTsF5xtDlTUAyVFdh0or3Qs4o5nU4l3m+1Aoq3a8SrH8bQh2AbOpkVB2cbXVxWO8+WB/vHNdrzhH3FVCVMDJa/SxttaSKzsiXbOp5sMkGindrzacXYGZ60go92uCjfAacRxdg/RlTbergNpHQs559M3mweQaJdwfP9m/LV6HMeW9tOO23EgPVC2uJCIiHK+qHWsW57PJhPvNAMg0S7gxMLy9Uo7vjc4ZdTO+lqPHXDuWAenFkBLS3pwVdtr4xHWSlhEXkg3ASDRPuBU2vF6HMf13DwCriL6G5ytAD0y9tm9hSbMwiohWl6w7UC+hIemhpwqcJZ13aXKEAA6dMYQfKdcmVKgn8FpRRf2QIi+kEkm3rYFEPpvs9aEQJw09/8Ufy3Wve44+8s4HS6CZwCUV/93p2odJ785HT9IV9XwL87aOlA07H70kMRT+RVPCwvrQESkT0RcmSvqd06OzFw66DqQ8J3j4KSZuxG/0Nvjvv7Nkm4oHJcUGaWJsNGVYwvtuA0HWiiqgVVtvui2uR+oqHQs4lzMpOJvHdSBfAXPrU/TCAAgBP3YEBkDAA12VaLez1XPqrApXdVBAFop2h1lIKCcz2sdDbmXMqmnDgSQLzOPAVwGAtHsmrptI5cPwKkVopvTxisdDTuX0gdwIOHTY6xN/38dZjj2TRtfVCoWkpcyyfgfGwHoSB69eXBW5VdwdmrjyxZHGUDozhe0jkbcl6oAqrOREkcWHE2zhZK/wanpQAU9WNJke1O9jkbkS5lU4k0cnvZgqj4H8ik8hK0qVY1Oxw81AxXVgFWANkK083ImuQZQHQ7kK3giXxeRAJAAy4ityTiH0Y7bcKDlohpYVZaP9RS1jkbky3PJ+hxI+Okk5w8Gv20QgATgY0oTgKUZzLbpeBuUqroy0JLdUcb6LOxE2Hk5k0r8Ya8QLXx3z3EycS3cKX6WXzEGEZ12mI4frgNtAmRtU31R62hYvpK5uTtAwm/gRMNyNL/seQItb+Rqc8fZPQNVALK4qV7mCkpHu51X5nYBSPgKnIgcnS8obd1xCsFwnL2Gqat2p/Eyl9f6RMR5JZNMvFErRAs/OU5TTnIWylZ3APoZIOvbORBlpYQ5v5pbB+iBEI1+cRzb56q2tuPt1FU1cxpPBAQIBESECERrt1Ft22tBlbEiISACebGwdBcK+o2+5/79641pfGDBCbjj7AbQV9eeeLRr7VhPfsVTonIsCRHRkQ6CdBCkAHAEAiJU2QjR5r4ozxBoj0BpAmOg3B1yjuWXvd+fHJn5DU0NORhkxzlK4NQCqDMkP+rpkqeUR0AEUCx5YDxYAID7hDSHhBlCWASAJTS0DIgOIHQBQBgAYojQR0QPI0DfMVeEXInQedyFzNeld08+N3MRg+c4ONA//smRBGcrQF++891vxWIdb2pt7iLiP9HzPndQf9U98nkOob4NYDT1xLGs7ujtMOYx5VGcEL7vShxYVebveDjh2BmdL2ht/9IBDGRX1YgmJkBMTu58qSZNgIAnhxA+TSM8U/1nt24BPPPkSdptl+HcjaeexkNpxxt+6IxL1X4BuvzkEEJfGm/dAngGbhu4DLQ2+qnPeQAq+EwPCfg0jbcAYP37i5xxWA1cFYwwAYjtDE7l0gEc7D/3yZFox/0m2RpwnGY5zuAD03F2HGjzOwlrO47mUsXw+CXjIIMTJHhalXG4HYdgvXrTinb8oDdysXzoPDs5jm1wMnkGJ1DOw9Nxdh6/t+NtuVmd4anz9ZjKRi59aPccs6A9FgmrHSe+NuS06zhK02yxzBknUPDUeATEOjieR/cYnIAF5toPnTVvOs7hOCCZZ2s4btqzQwUOx4FyHm7HWQ05T8vacXacYDlPMx+s55FDgOGp/Xw0b6tg7VG2toETkvbB4QXA4DnP1uejY6HKK8DW2/G1A3kcjgPiPLWej84Vm3t2nMEJADwtC8drN6tzqQpI2dpWqpoQjpWm2eIRPDsefHjWcgefq2I1FJjTyfh7vRF3PMvgsPYDTzoZT3Z3ybP5Za0BLO855owTaMmuDufs4rJnEJqwWX2zHWdwgthtLa8aDy2/AvzgZnVux4PcqiNYv672FJcqnqofZDrO4DA8e7znSaZqVsWOw3uYob7dhaarwxG8WZ3h2S84JB1EzzPZYllxqWJ4YD9Li9ThoiiumNn+c3fu0gQIZHA48+zDfUAIlBVwdr44kcXw7PyqGoPD8LBYDA+L4WExPCyGh8VieFgMD4vhYTE8LIaHxWJ4WAwPi+FhMTwsFsPDYnhYDA+L4WExPCwWw8NieFgMD4vhYbEYHhbDw2J4WEcSHiKGj+GBRi/iZXgYHhaL4WExPCyGh8XwsFgMD4vhYTE8LIaHxfCwWAwPi+FhMTwshofFYnhYDA+L4WExPCyGh8VieFgMD4vhYTE8LBZse92Y+NvAaggeIQD3+yFDgEKwcx15eDwDhQY+ZzwPBEBDn2UFRP8HIYP60QyuuFQAAAAASUVORK5CYII=');
  --mark-band: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAB7CAYAAABQMi9CAAABb0lEQVR42u3dIVLDUBCA4d1MJYNgEtsbcBJEXw0eh8WBxDJortFUUMExOggsOnAE+jgCkfT1+/Sa3T8u4uWm9C+Z2UeDyma6njO3Kf1zZi5bvUGOpf+MRheMQ1yV7bT7a2wswz4yLlu9QRc0T2SRERmRERmRERmREVlkREZkREZkREZkRBYZkREZkREZkREZkUV2ApERGZERGZERGZERWWRERmRERmRERmREFhmRERmRERmRERmRRUZkjt+iRtx3Uc9aXG61/drNmavx89hFd3HKNwAAAAAA+EdyXPe3tdbzFpdbj99Pc+bG9XBT62Fo9QaLqPGQ2S0b/YhnRY4ad5ldk8/dj6vh3a/G8D8ZkREZkREZkREZkUVGZERGZERGZERGZJERGZERGZERGZERWWRERmRERmRERmRERmSRERmRERmRERmREVlkREZkREZkREZkRBYZkRGZOIrn7l8zoj/lI9Sobxn50eJuZTvtfgFBsThHs4QhfwAAAABJRU5ErkJggg==');

  --brand: #EAA22F; --brand-2: #B15116; --brand-light: #F2C57D;
  --brand-soft: #EAA22F1a;
  /* Raio 0: medido na folha da janela do simbolo (kit, geometria.radius_px). */
  --radius-btn: 0px; --radius-card: 0px;

  /* Marca */
  --color-primary: #EAA22F;          /* ambar do telhado */
  --color-primary-strong: #B15116;   /* terracota da janela e do lettering */
  --color-primary-soft: #FDF3E4;     /* tint claro */
  /* O ambar com texto branco da 2.0:1 e reprova. Quem clica e quem le usa a
     terracota (5.6:1). O ambar fica no grafico. Token --cta do kit. */
  --cta: var(--color-primary-strong);

  /* Institucional / superficies (familia quente, derivada do ambar) */
  --color-ink: #251804;
  --color-ink-2: #3A2408;
  --color-ink-3: #B15116;
  --color-graphite: #3B332A;
  --color-slate: #5A5048;

  /* Neutras */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8F6F3;
  --color-bg-mute: #F0EBE4;
  --color-line: #E6E0D8;
  --color-text: #1F1710;
  --color-text-mute: #5A5048;
  --color-on-dark: #F7EFE4;
  --color-on-dark-mute: #D9CBB8;
  /* Cinza aco do lettering HCP, 3a cor do manual */
  --color-aco: #8B8B8C;

  /* Acento luxo */
  --color-gold: #C7A35D;

  /* Verde = pontos de conversao (form, popup, CTA fixo) */
  --color-green: #1FA858;
  --color-green-deep: #148244;
  --color-green-light: #2BD46E;

  /* Header fixo */
  --header-h: 92px;

  /* Tipografia: o manual pede Ofelia Display, que nao tem versao web.
     Substituta: Jost, geometrica da mesma familia da Futura. */
  --font-display: "Jost", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-pad: clamp(20px, 4vw, 40px);
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;

  /* Sombras (quentes, na familia do ink) */
  --shadow-sm: 0 4px 14px rgba(37, 24, 4, 0.07);
  --shadow: 0 12px 40px rgba(37, 24, 4, 0.12);
  --shadow-lg: 0 24px 60px rgba(37, 24, 4, 0.18);
  --shadow-accent: 0 16px 40px rgba(234, 162, 47, 0.30);

  /* Transicoes */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .2s var(--ease);
  --t: .35s var(--ease);
  --t-slow: .6s var(--ease);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { list-style: none; }

/* ==========================================================================
   GEOMETRIA ANGULAR (13.1) — a logo é um HEXÁGONO (retas + chanfros),
   então o site inteiro é angular. Exceção: o FAB do WhatsApp continua
   redondo (botão de marca reconhecível) e os marcadores hexagonais usam
   clip-path (não dependem de border-radius).
   ========================================================================== */
*, *::before, *::after { border-radius: var(--radius-btn, 5px); }

/* Marcador/ícone hexagonal da marca (pointy-top, igual à logo) */
.hex {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

::selection { background: var(--color-primary); color: var(--color-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ==========================================================================
   TIPOGRAFIA UTILITÁRIA
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 18px;
}
.eyebrow--dark { color: var(--color-ink); }
.eyebrow--light { color: var(--color-primary); }

/* Tarja de destaque (alto contraste sobre a foto do hero) */
.eyebrow--badge {
  color: #fff;
  background: rgba(38,25,5, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 10px 18px;
  margin-bottom: 22px;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  max-width: 100%;
}
.eyebrow--badge .eyebrow__dot { background: var(--color-primary); }
@media (max-width: 600px) {
  .eyebrow--badge { white-space: normal; line-height: 1.5; padding: 12px 20px;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
}

/* Marcador de TODO eyebrow = hexágono da marca (não uma bolinha genérica) */
.eyebrow::before {
  content: "";
  width: 11px; height: 12px;
  background: var(--color-primary);
  -webkit-mask: var(--mark-band) center/contain no-repeat;
  mask: var(--mark-band) center/contain no-repeat;
  flex: 0 0 auto;
}
.eyebrow__dot { display: none; }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  max-width: 22ch;
  text-wrap: balance;
}
.section-title--light { color: #fff; }

.section-lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--color-text-mute);
  max-width: 60ch;
  margin-bottom: 44px;
}
.section-lead--light { color: var(--color-on-dark-mute); }
.section-lead--short { max-width: 50ch; }

.accent {
  color: var(--color-primary);
  position: relative;
  /* nowrap só em telas grandes — em mobile pode quebrar */
}
@media (min-width: 900px) {
  .accent { white-space: nowrap; }
}

/* Régua sob o acento = barra chanfrada nas pontas (traço do hexágono),
   não uma linha arredondada genérica. */
.hero__headline .accent::after,
.section-title .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 5px;
  background: var(--color-primary);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  opacity: .85;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

/* TODOS os botões têm pontas HEXAGONAIS (identidade da marca) */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  transition: transform var(--t-fast), background var(--t), color var(--t), filter var(--t);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; position: relative; z-index: 2; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

/* Brilho que atravessa o botão secundário (sheen) */
.btn--ghost-light::after {
  content: "";
  position: absolute;
  top: 0; left: -130%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: btnShine 4.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes btnShine { 0% { left: -130%; } 55%, 100% { left: 140%; } }

.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--block { width: 100%; }

/* =====================================================================
   Botões preenchidos = corpo hexagonal (::before) + ANEL DE PULSO que
   expande e some (::after), igual ao ctaPulse do Militão/Moura.
   Como o clip-path apaga box-shadow, o anel é um pseudo hexagonal
   que cresce (inset negativo) por trás do corpo e desaparece.
   ===================================================================== */
.btn--accent, .btn--green {
  background: transparent;   /* o corpo colorido vem do ::before */
  clip-path: none;           /* remove o clip do .btn base p/ o anel escapar */
  overflow: visible;
  isolation: isolate;
}
.btn--accent { color: var(--color-ink); }
.btn--green  { color: #fff; }
.btn--accent:hover, .btn--green:hover { color: #fff; }

.btn--accent::before, .btn--green::before,
.btn--accent::after,  .btn--green::after {
  content: "";
  position: absolute; inset: 0;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  pointer-events: none;
}
/* corpo (fica na frente do anel, atrás do texto) */
.btn--accent::before { z-index: -1; background: var(--color-primary); transition: filter var(--t), background var(--t); }
.btn--green::before  { z-index: -1; background: linear-gradient(115deg, var(--color-green-light) 0%, var(--color-green) 55%, var(--color-green-deep) 100%); transition: filter var(--t); }
/* ANEL que pulsa: cresce ~13px pra fora e some */
.btn--accent::after { z-index: -2; background: var(--color-primary); animation: ringPulse 1.7s ease-out infinite; }
.btn--green::after  { z-index: -2; background: var(--color-green-light); animation: ringPulse 1.7s ease-out infinite; }
@keyframes ringPulse {
  0%   { inset: 0;      opacity: .55; }
  70%  { inset: -13px;  opacity: 0; }
  100% { inset: -13px;  opacity: 0; }
}
.btn--accent:hover::before { background: var(--color-primary-strong); }
.btn--green:hover::before  { filter: brightness(1.08); }

.btn--ghost {
  background: var(--color-bg-mute);
  color: var(--color-ink);
}
.btn--ghost:hover { background: #E8E2DA; }

/* Secundário sobre imagem = hexágono fosco translúcido */
.btn--ghost-light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.24); }

.btn--compact { padding: 12px 22px; font-size: 14px; animation: none; }
/* folga do texto para as pontas anguladas nos botões grandes */
.btn--lg { padding-left: 36px; padding-right: 36px; }

/* =================================================================
   READ PROGRESS BAR                                                  */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft));
  z-index: 1000;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* =================================================================
   SITE HEADER — fundo sólido da marca + faixa de nav deslizante      */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(115deg, #3A2408 0%, #251804 60%, #1C1203 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 30%, #F2C57D 50%, var(--color-primary) 70%, transparent);
  opacity: 0.8;
}
.site-header.is-solid {
  background: linear-gradient(115deg, rgba(64,41,9,0.92) 0%, rgba(48,31,7,0.94) 60%, rgba(38,25,5,0.95) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,0.7);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 100%;
}
.site-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.site-header__brand img { height: 62px; width: auto; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35)); }

/* faixa de nav: acompanha a rolagem, desliza até a seção atual (todas as telas) */
.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a[data-section] {
  flex: 0 0 auto;
  padding: 8px 17px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color 0.2s var(--ease), background 0.25s var(--ease);
}
.site-nav a[data-section]:hover { color: #fff; background: rgba(255,255,255,0.16); }
/* seção atual: chip BRANCO hexagonal (cor diferente do botão turquesa do header) */
.site-nav a[data-section].current {
  color: var(--color-ink);
  background: #fff;
  font-weight: 700;
}
.site-header__cta { flex-shrink: 0; margin-left: 4px; }

@media (max-width: 900px) {
  :root { --header-h: 74px; }
  .site-header__cta { display: none; }
  .site-header__brand img { height: 46px; }
  /* SEM hambúrguer: os nomes continuam sempre visíveis, deslizando pro lado */
  .site-nav { margin-left: 12px; gap: 8px; }
  .site-nav a[data-section] {
    padding: 6px 14px;
    font-size: 13px;
    color: #fff;
    background: rgba(255,255,255,0.12);
  }
  .site-nav a[data-section].current { background: #fff; color: var(--color-ink); }
}

/* ==========================================================================
   HERO (sem navbar — logo embutida no início do conteúdo)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 44px) 0 110px; /* topo livre do header fixo */
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}

.hero__brand {
  display: block;            /* força quebra após a logo */
  width: fit-content;        /* o anchor envolve só a imagem */
  margin-bottom: 32px;
  transition: opacity var(--t-fast);
  line-height: 0;
}
.hero__brand:hover { opacity: 0.85; }
.hero__brand img {
  /* Proporção real após o crop (2696x1750 ≈ 1.54:1).
     Definimos width pelo viewport e deixamos a height seguir
     o aspect-ratio dos atributos width/height do <img>. */
  width: clamp(180px, 20vw, 280px);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  display: block;
}
.eyebrow--light {
  /* Quando dentro do hero, garante alinhamento à esquerda */
  align-self: flex-start;
}
@media (max-width: 600px) {
  /* No mobile a logo fica centralizada acima do conteúdo */
  .hero__brand {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
  }
  .hero__brand img { width: clamp(180px, 50vw, 240px); }
  /* Botões do hero ocupam a largura toda (mais fáceis de tocar) */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroZoom 18s var(--ease) infinite alternate;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* escuro à esquerda (texto) e mais leve à direita (casa aparece mais) */
  background:
    linear-gradient(90deg, rgba(38,25,5, 0.90) 0%, rgba(38,25,5, 0.70) 34%, rgba(38,25,5, 0.30) 66%, rgba(38,25,5, 0.18) 100%),
    linear-gradient(180deg, transparent 45%, rgba(38,25,5, 0.45) 100%);
}
@media (max-width: 760px) {
  /* Celular: escuro atrás do texto (topo) e mais leve embaixo para a
     casa aparecer; leve reforço no rodapé da dobra para contraste. */
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(38,25,5, 0.88) 0%,
        rgba(38,25,5, 0.74) 34%,
        rgba(38,25,5, 0.30) 60%,
        rgba(38,25,5, 0.20) 78%,
        rgba(38,25,5, 0.55) 100%);
  }
  /* Imagem mobile já é retrato enquadrado na casa */
  .hero__bg img { object-position: center; }
}

@keyframes heroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.08); }
}

.hero__content {
  position: relative;
  /* usa a largura do container (alinha o texto com a logo e as outras dobras) */
  text-align: left;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 26px;
  max-width: 20ch;
  text-wrap: balance;
}
/* no hero o acento pode quebrar naturalmente (evita linha gigante e desalinhada) */
.hero__headline .accent { color: var(--color-primary); white-space: normal; }
.hero__headline .accent::after {
  height: 4px;
  bottom: -3px;
}

.hero__sub {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--color-on-dark-mute);
  max-width: 60ch;
  margin-bottom: 36px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Chamada "Conheça a Romualdo" — em FLUXO (nunca sobre os botões), todas as telas */
.hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 4vh, 44px);
  padding-top: clamp(18px, 2.6vh, 26px);
  border-top: 1px solid rgba(255,255,255,0.16);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
.hero__cue:hover { color: var(--color-primary); }
/* Chevron dentro de um selo HEXAGONAL (borda hexagonal, não quadrada) */
.hero__cue-chevron {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 35px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(234,162,47, 0.22);
  color: #fff;
  animation: cueBounce 1.8s ease-in-out infinite;
}
.hero__cue:hover .hero__cue-chevron { background: var(--color-primary); color: var(--color-ink); }
.hero__cue-chevron svg { width: 16px; height: 16px; }
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 900px) {
  .hero { padding-bottom: 72px; }
}

/* ==========================================================================
   PROOF
   ========================================================================== */

.proof {
  background: var(--color-ink);
  color: #fff;
  padding: 36px 0;
  position: relative;
  z-index: 2;
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  align-items: center;
}
.proof__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Autoridade em foco único: +15 anos bem destacado */
.proof--single { padding: clamp(40px, 6vw, 64px) 0; }
.proof__solo {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 56px); flex-wrap: wrap;
}
.proof__seal {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
}
.proof__seal img {
  width: clamp(58px, 6vw, 76px); height: auto; display: block;
  filter: drop-shadow(0 6px 22px rgba(234,162,47, 0.42));
  animation: sealPulse 3.6s var(--ease) infinite alternate;
}
@keyframes sealPulse {
  from { filter: drop-shadow(0 6px 18px rgba(234,162,47, 0.30)); }
  to   { filter: drop-shadow(0 6px 30px rgba(234,162,47, 0.60)); }
}
@media (max-width: 640px) {
  .proof__seal { padding-bottom: 4px; }
}
.proof__solo-num {
  flex: 0 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(46px, 7vw, 78px); color: var(--color-primary);
  line-height: 0.9; letter-spacing: -0.03em;
  text-shadow: 0 8px 40px rgba(234,162,47,0.30);
}
.proof__solo-num small {
  display: block; margin-top: 7px;
  font-size: 0.22em; color: var(--color-on-dark-mute); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.proof__solo-label {
  flex: 1 1 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px);
  color: var(--color-on-dark); line-height: 1.55;
  border-left: 3px solid var(--color-primary); padding-left: 26px;
}
.proof__solo-label strong { color: #fff; font-weight: 600; }
.proof__solo-label .proof__hl { color: var(--color-primary); font-weight: 700; }
@media (max-width: 640px) {
  .proof__solo { flex-direction: column; text-align: center; gap: 18px; }
  .proof__solo-label { border-left: 0; border-top: 3px solid var(--color-primary); padding-left: 0; padding-top: 16px; }
}
.proof__num--word {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  font-size: clamp(22px, 2.6vw, 32px);
}
.proof__arrow { color: var(--color-on-dark-mute); font-weight: 400; }
.proof__item {
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.08);
  padding: 6px 14px;
}
.proof__item:first-child { border-left: 0; }
.proof__num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.proof__num small {
  font-size: 0.45em;
  color: var(--color-on-dark-mute);
  font-weight: 500;
  margin-left: 4px;
}
.proof__label {
  font-size: 13px;
  color: var(--color-on-dark-mute);
  margin-top: 8px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .proof__grid--3 { grid-template-columns: 1fr; }
  .proof__item { border-left: 0; }
}

/* ==========================================================================
   OFFER (DARK)
   ========================================================================== */

.offer {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z' fill='none' stroke='%2314C8CC' stroke-opacity='0.06' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 56px 64px,
    var(--color-ink);
  color: #fff;
  padding: clamp(70px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.offer::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(234,162,47, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.offer::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(234,162,47, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.offer__head { max-width: 700px; margin-bottom: 50px; position: relative; }

.offer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
}

.offer__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.offer__card:hover {
  transform: translateY(-4px);
  border-color: rgba(234,162,47, 0.4);
  background: rgba(234,162,47, 0.06);
}
.offer__card--featured {
  background: linear-gradient(160deg, rgba(234,162,47, 0.12), rgba(234,162,47, 0.02));
  border-color: rgba(234,162,47, 0.35);
}

.offer__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--color-on-dark);
  margin-bottom: 20px;
}
.offer__badge--accent {
  background: var(--color-primary);
  color: var(--color-ink);
}

.offer__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  color: #fff;
  margin-bottom: 8px;
}
.offer__lead {
  color: var(--color-on-dark-mute);
  margin-bottom: 24px;
  font-size: 15.5px;
}

.offer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.offer__list li {
  position: relative;
  padding-left: 28px;
  color: var(--color-on-dark);
  font-size: 15px;
  line-height: 1.6;
}
.offer__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 17px; height: 18px;
  -webkit-mask: var(--mark-band) center/contain no-repeat;
  mask: var(--mark-band) center/contain no-repeat;
  background: var(--color-primary);
}
.offer__list li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 11px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
  transform: rotate(-45deg);
}
.offer__list strong { color: #fff; font-weight: 600; }

.offer__note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  font-size: 13.5px;
  color: var(--color-on-dark-mute);
  text-align: center;
}

@media (max-width: 760px) {
  .offer__grid { grid-template-columns: 1fr; }
  .offer__card { padding: 28px; }
}

/* ===== Exemplos de financiamento (cards) ===== */
.financing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
  position: relative;
}
.financing__card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.financing__card:hover {
  transform: translateY(-5px);
  border-color: rgba(234,162,47,0.45);
  background: rgba(234,162,47,0.06);
}
.financing__card--featured { border-color: rgba(234,162,47,0.4); background: linear-gradient(180deg, rgba(234,162,47,0.10), rgba(255,255,255,0.02)); }
.financing__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-ink-2); }
.financing__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.financing__card:hover .financing__img img { transform: scale(1.05); }
.financing__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.financing__tier {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; padding: 7px 12px; margin-bottom: 16px;
  background: rgba(255,255,255,0.08); color: var(--color-on-dark);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.financing__tier--accent { background: var(--color-primary); color: var(--color-ink); }
.financing__type { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 14px; }
.financing__type span { color: var(--color-primary); }
.financing__specs { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.financing__specs li { color: var(--color-on-dark-mute); font-size: 14px; padding-left: 18px; position: relative; line-height: 1.5; }
.financing__specs li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 10px; background: var(--color-primary); -webkit-mask: var(--mark-band) center/contain no-repeat;
  mask: var(--mark-band) center/contain no-repeat; }
.financing__price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.financing__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-on-dark-mute); }
.financing__value { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.92); }
.financing__installment { margin-top: auto; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 2px; }
.financing__inst-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-primary); }
.financing__inst-value { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.1; }
.financing__inst-value small { font-size: 0.5em; font-weight: 500; color: var(--color-on-dark-mute); margin-left: 2px; }
.financing__cta { text-align: center; margin-top: 40px; position: relative; }

@media (max-width: 860px) { .financing__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   EXPERTS / RESPONSÁVEL
   ========================================================================== */

.experts {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--color-bg-soft);
  position: relative;
}
.experts__inner {
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.experts__photo {
  /* Hexágono: chanfro no canto superior-esquerdo e inferior-direito
     (retângulo com 2 cantos opostos cortados = 6 lados). A borda
     turquesa aparece pelo padding + fundo em degradê. */
  --hex-cut: 34px;
  position: relative;
  border-radius: 0;
  padding: 3px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  clip-path: polygon(var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)), calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut));
  filter: drop-shadow(0 24px 46px rgba(37,24,4, 0.24));
}
.experts__photo img {
  width: 100%; height: auto;
  display: block;
  position: relative;
  z-index: 1;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  clip-path: polygon(calc(var(--hex-cut) - 3px) 0, 100% 0, 100% calc(100% - (var(--hex-cut) - 3px)), calc(100% - (var(--hex-cut) - 3px)) 100%, 0 100%, 0 calc(var(--hex-cut) - 3px));
}
.experts__caption {
  position: absolute;
  left: 18px; right: 18px; bottom: 20px;
  z-index: 2;
  background: rgba(37,24,4, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 15px 30px;
  border-radius: 0;
  /* Pontas hexagonais nas laterais (igual aos botões da marca) */
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 14px;
}
.experts__caption strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.experts__caption span {
  color: var(--color-on-dark-mute);
  font-size: 13px;
  margin-top: 4px;
}

.experts__copy { max-width: 600px; }
/* título da dobra ocupa a coluna toda (evita quebra em 3 linhas com "com quem" solto) */
.experts__copy .section-title { max-width: none; margin-bottom: 22px; }
.experts__copy .section-title .accent { white-space: normal; }
.experts__lead {
  font-size: 16.5px;
  color: var(--color-text-mute);
  margin-bottom: 18px;
}
.experts__cta {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--color-line);
}

.experts__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}
.experts__points li {
  display: flex;
  align-items: center;
  gap: 18px;
}
.experts__points-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary-strong);
  min-width: 60px;
  line-height: 1;
}
.experts__points-text {
  color: var(--color-ink);
  font-weight: 500;
  font-size: 15.5px;
}

@media (max-width: 860px) {
  .experts__inner { grid-template-columns: 1fr; }
  .experts__photo { max-width: 420px; margin: 0 auto; }
}

/* ==========================================================================
   GALLERY (carrossel infinito automático — “marquee”)
   ========================================================================== */

.gallery {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--color-bg);
  overflow: hidden;
  position: relative;
}
.gallery__head { margin-bottom: 48px; }
.gallery__cta {
  text-align: center;
  margin-top: 56px;
}

.marquee-wrap { position: relative; }
/* Setas hexagonais para controlar a galeria */
.marquee__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 50px; height: 56px;
  display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-ink);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(234,162,47,0.4));
  transition: transform var(--t), background var(--t);
}
.marquee__nav:hover { background: var(--color-primary-strong); transform: translateY(-50%) scale(1.08); }
.marquee__nav:active { transform: translateY(-50%) scale(0.96); }
.marquee__nav svg { width: 22px; height: 22px; }
.marquee__nav--prev { left: clamp(8px, 3vw, 32px); }
.marquee__nav--next { right: clamp(8px, 3vw, 32px); }
@media (max-width: 600px) {
  .marquee__nav { width: 42px; height: 48px; }
  .marquee__nav svg { width: 18px; height: 18px; }
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Máscara nas bordas para fade-in/out elegante */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  padding: 8px 0;
  cursor: grab;
  /* Permite scroll vertical da página, captura swipe horizontal */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.marquee.is-dragging { cursor: grabbing; }

.marquee__track {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
}
.marquee__item img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* impede que o browser inicie o drag-to-save da imagem */
}

.marquee__item {
  position: relative;
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 400px);
  height: clamp(320px, 42vw, 520px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-soft);
  box-shadow: 0 10px 30px rgba(37,24,4, 0.10);
  isolation: isolate;
}
.marquee__item img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.marquee__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(37,24,4, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.marquee__item figcaption {
  position: absolute;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 2;
  font-family: var(--font-display);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.marquee__item figcaption::before {
  content: "";
  width: 11px; height: 12px;
  -webkit-mask: var(--mark-band) center/contain no-repeat;
  mask: var(--mark-band) center/contain no-repeat;
  background: var(--color-primary);
  flex: 0 0 auto;
}
.marquee__item:hover img {
  transform: scale(1.06);
}

@media (max-width: 600px) {
  .marquee__track { gap: 14px; }
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
}

/* ==========================================================================
   PROCESS / COMO FUNCIONA
   ========================================================================== */

.process {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(234,162,47,0.08), transparent 55%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 1; }

/* ===== PASSOS em grade 2×2 (visual + reveal dinâmico) ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 920px;
  margin: 48px auto 0;
}
.step {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line);
  padding: 30px 30px 28px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease),
              box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.step.on { opacity: 1; transform: translateY(0); }
.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(48,31,7,0.11);
  border-color: rgba(234,162,47,0.45);
}
/* barra de acento no topo que "desenha" ao revelar */
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease) .18s;
}
.step.on::before { transform: scaleX(1); }
/* número-fantasma gigante ao fundo */
.step__ghost {
  position: absolute; top: -26px; right: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 172px; line-height: 1;
  color: var(--color-primary);
  opacity: 0.22; pointer-events: none; user-select: none;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.step:hover .step__ghost { opacity: 0.32; transform: translateY(4px); }
/* ícone hexagonal em degradê — "pop" ao entrar */
.step__icon {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  width: 60px; height: 66px; margin-bottom: 14px;
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-strong));
  color: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: 0 10px 24px rgba(234,162,47,0.38);
  transform: scale(0.4) rotate(-18deg); opacity: 0;
  transition: transform .55s cubic-bezier(.2,1.35,.4,1) .16s, opacity .4s .16s,
              box-shadow .35s var(--ease);
}
.step__icon svg { width: 27px; height: 27px; }
.step.on .step__icon { transform: scale(1) rotate(0); opacity: 1; }
.step:hover .step__icon {
  box-shadow: 0 14px 32px rgba(234,162,47,0.58);
  transform: translateY(-3px);
}
.step__kicker {
  position: relative; z-index: 1; display: block;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary);
  margin-bottom: 6px;
}
.step__title {
  position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 21px); color: var(--color-ink);
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px;
}
.step__text { position: relative; z-index: 1; font-size: 15px; color: var(--color-text-mute); line-height: 1.6; }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* ===== TIMELINE (vitrine do processo — trilho que preenche + nós que acendem) ===== */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 46px auto 0;
}
.timeline__track, .timeline__fill {
  position: absolute;
  left: 30px; width: 3px;
  z-index: 0;
}
.timeline__track { top: 34px; bottom: 34px; background: var(--color-line); }
.timeline__fill {
  top: 34px; height: 0;
  background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 0 14px rgba(234,162,47,0.5);
  transition: height .7s var(--ease);
  z-index: 1;
}

.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: start;
  padding-bottom: 24px;
}
.timeline__step:last-child { padding-bottom: 0; }

.timeline__marker {
  position: relative; z-index: 2;
  width: 60px; height: 66px;
  display: grid; place-items: center;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  box-shadow: inset 0 0 0 2px rgba(234,162,47,0.28);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.timeline__step.on .timeline__marker {
  background: var(--color-primary-strong);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--color-primary), 0 10px 24px rgba(234,162,47,0.5);
  transform: scale(1.06);
}

.timeline__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  padding: 20px 24px;
  box-shadow: 0 6px 20px rgba(48,31,7,0.05);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
/* passo aceso ganha destaque (o texto NUNCA some, mesmo sem JS) */
.timeline__step.on .timeline__card {
  border-color: rgba(234,162,47,0.4);
  box-shadow: 0 14px 32px rgba(48,31,7,0.10);
  transform: translateX(3px);
}
/* seta (losango angular) apontando do card para o nó */
.timeline__card::before {
  content: "";
  position: absolute; left: -8px; top: 24px;
  width: 14px; height: 14px;
  background: #fff;
  border-left: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  transform: rotate(45deg);
  transition: border-color .4s var(--ease);
}
.timeline__step.on .timeline__card::before { border-color: rgba(234,162,47,0.35); }
.timeline__card h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 22px);
  color: var(--color-ink); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  margin-bottom: 8px;
}
.timeline__card p { font-size: 15px; color: var(--color-text-mute); line-height: 1.6; }

@media (max-width: 560px) {
  .timeline__step { grid-template-columns: 50px 1fr; gap: 16px; }
  .timeline__track, .timeline__fill { left: 24px; }
  .timeline__marker { width: 48px; height: 54px; font-size: 18px; }
  .timeline__card { padding: 16px 18px; }
}

/* ===== Comparativo: pedreiro solto × Romualdo ===== */
.compare { max-width: 920px; margin: 46px auto 0; }
.compare__lead {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600; color: var(--color-ink);
  max-width: 60ch; margin: 0 auto 28px; line-height: 1.4;
}
.compare__lead strong { color: #d23b3b; font-weight: 700; }

.compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

.compare__col {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-line);
  padding: 28px 26px;
}
.compare__col--bad { border-top: 4px solid #d23b3b; }
.compare__col--good {
  border: 1px solid rgba(234,162,47,0.4);
  border-top: 4px solid var(--color-primary);
  overflow: hidden;
  animation: compareGlow 2.8s ease-in-out infinite;
}
@keyframes compareGlow {
  0%, 100% { box-shadow: 0 18px 44px rgba(234,162,47,0.16); }
  50%      { box-shadow: 0 22px 56px rgba(234,162,47,0.34); }
}
/* brilho que atravessa o card vencedor */
.compare__col--good::after {
  content: ""; position: absolute; top: -60%; left: -45%;
  width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(234,162,47,0.16), transparent);
  transform: rotate(12deg);
  animation: cardSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

.compare__seal {
  position: absolute; top: 0; right: 0;
  background: var(--color-green); color: #fff;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 14px 7px 18px;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
.compare__tag {
  display: inline-block;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px;
}
.compare__tag--bad { color: #d23b3b; }
.compare__tag--good { color: var(--color-green-deep); }
.compare__title {
  font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 20px);
  color: var(--color-ink); font-weight: 700; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--color-line);
}

.compare__list { display: flex; flex-direction: column; gap: 15px; }
.cmp { display: flex; align-items: flex-start; gap: 12px; }
.cmp__ic {
  flex: 0 0 auto; width: 24px; height: 26px; margin-top: 1px;
  display: grid; place-items: center; color: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.cmp__ic svg { width: 12px; height: 12px; }
.cmp__ic--x { background: #d23b3b; }
.cmp__ic--check { background: var(--color-green); }
.cmp__txt {
  position: relative; font-size: 14.5px; line-height: 1.45;
  color: var(--color-text); padding-bottom: 4px;
  transition: color .4s var(--ease);
}
.compare__col--good .cmp__txt strong { color: var(--color-ink); font-weight: 600; }
/* o "risco" (linha vermelha) fica SEMPRE ABAIXO da frase, nunca por cima */
.compare__col--bad .cmp[data-strike] .cmp__txt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: #d23b3b;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.compare__col--bad .cmp.is-struck .cmp__txt::after { transform: scaleX(1); }
.compare__col--bad .cmp.is-struck .cmp__txt { color: var(--color-slate); }

@media (max-width: 720px) {
  .compare__grid { grid-template-columns: 1fr; }
}

/* ===== Dobra "Não arrisque / pedreiro solto" (clara e discreta) ===== */
.risk-band {
  position: relative;
  color: var(--color-text);
  padding: clamp(56px, 7vw, 92px) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}
/* 2 colunas: frase (+CTA) à esquerda, lista de riscos à frente */
.risk-band__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(250px, 360px) 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.risk-band__aside .section-title--light {
  color: var(--color-ink); max-width: 13ch; margin-bottom: 26px;
}
.eyebrow--onred { color: #c0392b; }
.eyebrow--onred::before { background: #c0392b; }
.accent-red { color: #c0392b; font-weight: inherit; }

.risk-band__list { margin: 0; display: flex; flex-direction: column; }
.rb {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-line);
}
.rb:last-child { border-bottom: 0; }
.rb__ic {
  flex: 0 0 auto; width: 26px; height: 29px;
  display: grid; place-items: center;
  background: #c0392b; color: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.rb__ic svg { width: 13px; height: 13px; }
.rb__txt {
  position: relative;
  font-size: clamp(15px, 1.5vw, 16px); line-height: 1.4;
  color: var(--color-text); padding-bottom: 3px;
  transition: color .4s var(--ease);
}
/* linha vermelha do "risco" SEMPRE abaixo da frase */
.rb__txt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: #c0392b;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.rb.is-struck .rb__txt::after { transform: scaleX(1); }
.rb.is-struck .rb__txt { color: var(--color-text-mute); }

.risk-band__cta { margin-top: 0; }
@media (max-width: 760px) {
  /* Ordem no celular: título, lista de riscos e, por último, o botão.
     display:contents no aside faz o título e o CTA virarem itens do flex. */
  .risk-band__inner { display: flex; flex-direction: column; gap: 26px; }
  .risk-band__aside { display: contents; }
  .risk-band__aside .section-title--light { max-width: none; order: 1; margin: 0; }
  .risk-band__list { order: 2; }
  .risk-band__cta { order: 3; }
}

/* ==========================================================================
   OBJECTIONS / FAQ
   ========================================================================== */

.objections {
  padding: clamp(70px, 9vw, 120px) 0;
  background: var(--color-bg);
}
.objections__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}
/* item ímpar sozinho na última linha ocupa a largura toda (evita buraco) */
.objections__grid .objection:last-child:nth-child(odd) { grid-column: 1 / -1; }
.objection {
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.objection[open] {
  background: #fff;
  border-color: rgba(234,162,47, 0.4);
  box-shadow: var(--shadow-sm);
}
.objection summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-ink);
  line-height: 1.4;
}
.objection summary::-webkit-details-marker { display: none; }
.objection__icon {
  position: relative;
  width: 22px; height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  border: 1px solid rgba(234,162,47, 0.4);
  transition: transform var(--t), background var(--t);
}
.objection__icon::before, .objection__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--color-primary-strong);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  transition: transform var(--t);
}
.objection__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.objection[open] .objection__icon { background: var(--color-primary); border-color: var(--color-primary); }
.objection[open] .objection__icon::before { background: var(--color-ink); }
.objection[open] .objection__icon::after  { transform: translate(-50%, -50%) rotate(0); background: var(--color-ink); }

.objection p {
  margin-top: 14px;
  color: var(--color-text-mute);
  font-size: 15px;
  line-height: 1.7;
}

@media (max-width: 760px) { .objections__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   VIABILITY / FORM
   ========================================================================== */

.viability {
  padding: clamp(70px, 9vw, 120px) 0;
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.viability::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,162,47, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.viability__inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  position: relative;
}

.viability__copy { padding-top: 12px; }

.viability__note {
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--color-on-dark-mute);
  border-left: 3px solid var(--color-primary);
  padding-left: 14px;
  line-height: 1.6;
}
.viability__note strong { color: #fff; }

/* FORM */
.form {
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.form::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; height: 6px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.form__title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.form__subtitle {
  font-size: 14px;
  color: var(--color-text-mute);
  margin-bottom: 22px;
}

.form__field {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}
.form__field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.form__field input,
.form__field select {
  padding: 13px 14px;
  border: 1.5px solid var(--color-line);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  color: var(--color-ink);
  background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.form__field input::placeholder { color: #A39A90; }
.form__field input:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(234,162,47, 0.18);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form__consent {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--color-text-mute);
  line-height: 1.55;
  text-align: center;
}

.form__feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
}
.form__feedback.is-success {
  background: rgba(234,162,47, 0.12);
  color: var(--color-ink);
  border: 1px solid rgba(234,162,47, 0.4);
}
.form__feedback.is-error {
  background: #FEEBEC;
  color: #A0231A;
  border: 1px solid #F4C7C9;
}

button[type="submit"].btn {
  margin-top: 6px;
}

@media (max-width: 960px) {
  .viability__inner { grid-template-columns: 1fr; }
  .form { padding: 28px; }
}
@media (max-width: 480px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FORMULÁRIO 2 ETAPAS (padrão construção financiada — 13.7)
   ========================================================================== */
.form-head { max-width: 640px; margin: 0 auto 26px; text-align: center; }
.form-head .eyebrow { justify-content: center; }
.form-head .section-title { max-width: none; margin-left: auto; margin-right: auto; }
.form-head .section-lead { margin-left: auto; margin-right: auto; margin-bottom: 0; }

.steps-indicator {
  display: flex; align-items: center; justify-content: center; gap: 0;
  max-width: 460px; margin: 0 auto 24px; position: relative; z-index: 1;
}
.step-item { display: flex; align-items: center; gap: 10px; }
.step-circle {
  width: 34px; height: 34px; flex: 0 0 34px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  display: grid; place-items: center;
  background: rgba(255,255,255,0.14); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  transition: background var(--t), color var(--t);
}
.step-circle.active { background: var(--color-primary); color: var(--color-ink); }
.step-circle.complete { background: var(--color-green); color: #fff; }
.step-label { font-size: 13.5px; color: var(--color-on-dark-mute); font-weight: 500; }
.step-item.active .step-label { color: #fff; }
.step-connector { flex: 1 1 auto; height: 2px; background: rgba(255,255,255,0.16); margin: 0 14px; position: relative; overflow: hidden; }
.step-connector-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-primary); transition: width .4s var(--ease); }

.form-card {
  background: #fff; color: var(--color-text);
  max-width: 560px; margin: 0 auto;
  padding: 34px; box-shadow: var(--shadow-lg);
  position: relative;
}
.form-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--color-primary);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.form-step { display: none; }
.form-step.active { display: block; animation: formFade 0.35s var(--ease); }
@keyframes formFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.form-step-title { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); margin-bottom: 18px; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-weight: 500; color: var(--color-ink); }
.form-group input, .form-group select {
  padding: 13px 14px; border: 1.5px solid var(--color-line);
  font: inherit; font-size: 15px; color: var(--color-ink); background: #fff; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input::placeholder { color: #A39A90; }
.form-group input:focus, .form-group select:focus {
  outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(234,162,47,0.18);
}
.form-group input.error, .form-group select.error { border-color: #c83232; background: #fff6f6; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-actions { display: flex; gap: 12px; margin-top: 6px; align-items: stretch; }
.form-actions .btn--back { flex: 0 0 auto; }
.btn--back { background: var(--color-bg-mute); color: var(--color-ink); }
.btn--back:hover { background: #E6E0D8; color: var(--color-ink); }

.form-success { display: none; text-align: center; padding: 22px 10px; }
.form-success.show { display: block; animation: formFade 0.4s var(--ease); }
.form-success h3 { font-family: var(--font-display); font-size: 21px; color: var(--color-ink); margin-bottom: 8px; }
.form-success p { color: var(--color-text-mute); font-size: 15px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }

.form-prereq { text-align: center; font-size: 13px; color: var(--color-on-dark-mute); margin: 20px auto 0; max-width: 560px; }

.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; max-width: 640px; margin: 20px auto 0; position: relative; z-index: 1; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-on-dark-mute); }
.trust-item svg { width: 17px; height: 17px; color: var(--color-primary); }

@media (max-width: 480px) {
  .form-card { padding: 26px 20px; }
  .form-row { grid-template-columns: 1fr; }
  .step-label { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* =================================================================
   DIVISÓRIA HEXAGONAL — o símbolo da marca separando as dobras       */
.hex-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 0;
  background: var(--color-bg);
}
.hex-divider--dark { background: var(--color-ink); }
.hex-divider::before,
.hex-divider::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 120px);
  background: linear-gradient(90deg, transparent, rgba(234,162,47,0.5));
}
.hex-divider::after { transform: scaleX(-1); }
.hex-divider__mark {
  width: 18px; height: 20px;
  background: var(--color-primary);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  flex: 0 0 auto;
}
.hex-divider__mark--sm { width: 11px; height: 12px; opacity: 0.5; }

/* Textura de favo (hexágonos) em baixíssima opacidade nas dobras escuras */
.hex-texture { position: relative; }
.hex-texture > .container,
.hex-texture > * { position: relative; z-index: 1; }
.hex-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z' fill='none' stroke='%2314C8CC' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: 56px 64px;
}

/* Rodapé enxuto: sem navegação e sem contato direto (o caminho é o funil) */
.site-footer {
  background: #1C1203;
  color: var(--color-on-dark);
  padding: 64px 0 40px;
  text-align: center;
}
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-footer__logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 24px;
}
.site-footer__logo img {
  width: clamp(150px, 16vw, 190px);
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
.site-footer__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}
.site-footer__divider::before,
.site-footer__divider::after {
  content: "";
  height: 1px;
  width: 56px;
  background: linear-gradient(90deg, transparent, rgba(234,162,47,0.5));
}
.site-footer__divider::after { transform: scaleX(-1); }
.site-footer__tagline {
  color: var(--color-on-dark-mute);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 60ch;
  margin-bottom: 30px;
}
.site-footer__info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-bottom: 34px;
}
.site-footer__info-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--color-on-dark-mute);
}
.site-footer__info-item svg {
  width: 18px; height: 18px;
  color: var(--color-primary);
  flex: 0 0 18px;
}
.site-footer__copy {
  font-size: 12.5px;
  color: var(--color-on-dark-mute);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  width: 100%;
  max-width: 720px;
}
.site-footer__dev {
  font-size: 12.5px;
  color: var(--color-on-dark-mute);
  margin-top: 8px;
}
.site-footer__dev { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* Selo M² BLACK = botão de contorno hexagonal (vazado) */
.dev-badge {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--color-primary);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.10em;
  transition: transform var(--t-fast);
}
.dev-badge::before {
  content: ""; position: absolute; inset: 1.6px;
  background: #1C1203;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  z-index: 0;
  transition: background var(--t);
}
.dev-badge span { position: relative; z-index: 1; color: var(--color-primary); transition: color var(--t); }
.dev-badge:hover { transform: translateY(-2px); }
.dev-badge:hover::before { background: var(--color-primary); }
.dev-badge:hover span { color: var(--color-ink); }

/* =================================================================
   CTA FIXO (barra full-width, todas as versões)                      */
.mobile-cta {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  z-index: 850;
  display: flex;
  justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(37,24,4, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.1);
  transform: translateY(120%);
  transition: transform 0.35s var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { width: 100%; max-width: 560px; }
.mobile-cta .btn--green::after { animation: none; opacity: 0; } /* barra fixa não pulsa */

/* =================================================================
   FAB WhatsApp — sempre redondo                                      */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 95;
  width: 58px; height: 58px;
  border: 0; cursor: pointer;
  border-radius: 50% !important; /* exceção proposital à identidade angular */
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), bottom 0.3s var(--ease);
  animation: waPulse 2.6s var(--ease) infinite;
}
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 18px 36px -8px rgba(37,211,102,0.75); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 0 rgba(37,211,102,0.5); }
  50%      { box-shadow: 0 14px 30px -8px rgba(37,211,102,0.6), 0 0 0 12px rgba(37,211,102,0); }
}
.wa-fab.lifted { bottom: calc(94px + env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  .wa-fab { width: 52px; height: 52px; }
  .wa-fab.lifted { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .wa-fab svg { width: 28px; height: 28px; }
}

/* =================================================================
   LEAD POPUP (40s)                                                   */
.lead-popup { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; }
.lead-popup[hidden] { display: none; }
.lead-popup__backdrop { position: absolute; inset: 0; background: rgba(38,25,5,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: popupFade 0.3s var(--ease); }
/* O popup carrega o formulario completo em 2 passos e nao cabe em tela baixa.
   O overlay centraliza por grid (place-items:center): card maior que a tela
   transborda pros DOIS lados e o topo fica inalcancavel, sem scroll pra
   recuperar. 40px = os 20px de padding do overlay, dos dois lados. */
.lead-popup__card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-lg); padding: 40px 32px 34px; box-shadow: var(--shadow-lg); animation: popupRise 0.4s var(--ease); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@keyframes popupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.lead-popup__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: #A39A90; cursor: pointer; transition: color 0.2s var(--ease); }
.lead-popup__close:hover { color: var(--color-ink); }
.lead-popup__title { font-family: var(--font-display); font-size: 24px; color: var(--color-ink); margin-bottom: 8px; line-height: 1.2; }
.lead-popup__sub { font-size: 14.5px; color: var(--color-text-mute); margin-bottom: 22px; line-height: 1.6; }
.lead-popup__form .btn { margin-top: 4px; }
.lead-popup__success { display: none; text-align: center; padding: 10px 0; }
.lead-popup__success.show { display: block; animation: popupFade 0.4s var(--ease); }
.lead-popup__success h3 { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); margin-bottom: 6px; }
.lead-popup__success p { color: var(--color-text-mute); font-size: 14.5px; line-height: 1.6; }
.success-icon {
  width: 58px; height: 62px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  display: grid; place-items: center; margin: 0 auto 14px;
  background: rgba(31,168,88,0.16); color: var(--color-green);
}
.success-icon svg { width: 28px; height: 28px; }

.error-msg { display: none; font-size: 12.5px; color: #c83232; font-weight: 500; margin-top: 4px; }
.error-msg.show { display: block; }
.form__field input.error { border-color: #c83232; background: #fff6f6; }

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger sutil para grids */
[data-reveal]:nth-child(2) { transition-delay: .06s; }
[data-reveal]:nth-child(3) { transition-delay: .12s; }
[data-reveal]:nth-child(4) { transition-delay: .18s; }
[data-reveal]:nth-child(5) { transition-delay: .24s; }
[data-reveal]:nth-child(6) { transition-delay: .30s; }

/* Reveal genérico (aplicado via JS a títulos, cards, provas, form etc.) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Cascata nos grids (itens entram em sequência) */
.offer__grid .offer__card:nth-child(2) { transition-delay: .12s; }
.proof__grid .proof__item:nth-child(2) { transition-delay: .09s; }
.proof__grid .proof__item:nth-child(3) { transition-delay: .18s; }
.objections__grid .objection:nth-child(2) { transition-delay: .06s; }
.objections__grid .objection:nth-child(3) { transition-delay: .12s; }
.objections__grid .objection:nth-child(4) { transition-delay: .18s; }

/* Sheen que atravessa o card em destaque da oferta (vida na dobra) */
.offer__card--featured { overflow: hidden; }
.offer__card--featured::after {
  content: ""; position: absolute; top: -60%; left: -40%;
  width: 40%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(234,162,47,0.14), transparent);
  transform: rotate(12deg);
  animation: cardSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardSheen { 0% { left: -40%; } 60%, 100% { left: 130%; } }

/* Microinteração: cards de objeção e provas sobem no hover */
.objection:hover { transform: translateY(-3px); }
.proof__item { transition: transform var(--t); }
.proof__item:hover { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], .reveal, .timeline__card, .step { opacity: 1; transform: none; }
  .step__icon { opacity: 1; transform: none; }
  .step::before { transform: scaleX(1); }
  .hero__bg img { animation: none; }
}


/* ==========================================================================
   CAMADA DE IDENTIDADE HCP
   O simbolo da HCP e a casa ambar recortada por cor do vetor: nao da pra descrever
   entao ele entra como MASCARA (--mark-full) e a crista do telhado como
   faixa tileavel (--mark-band). Substitui a gramatica hexagonal do Romualdo.
   ========================================================================== */

.section-title::after {
  content: ""; display: block; width: 46px; max-width: 92px; height: 4px;
  margin-top: 14px; background: var(--brand);
  -webkit-mask: var(--mark-band) left center/auto 100% repeat-x;
  mask: var(--mark-band) left center/auto 100% repeat-x;
  transition: width .6s var(--ease);
}
.section-title--light::after { background: var(--brand-light); }

.hex-divider { display: block; height: 26px; padding: 0; background: var(--color-bg-soft); }
.hex-divider::before, .hex-divider::after { content: none; }
.hex-divider__mark {
  display: block; width: 100%; height: 26px; background: var(--brand); opacity: .45;
  -webkit-mask: var(--mark-band) left center/auto 100% repeat-x;
  mask: var(--mark-band) left center/auto 100% repeat-x;
}

.hex-texture { position: relative; isolation: isolate; }
.hex-texture::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--brand-light);
  -webkit-mask: var(--mark-full) right -6% bottom -10%/34% no-repeat;
  mask: var(--mark-full) right -6% bottom -10%/34% no-repeat;
  opacity: .07;
}
.hex-texture > * { position: relative; z-index: 1; }

.proof__seal img { filter: drop-shadow(0 0 18px rgba(234,162,47, .45)); }

/* ==========================================================================
   DOBRAS PRÓPRIAS DA HCP
   O Romualdo é construção financiada e tem foto de obra; a HCP é B2B
   comercial e não tem acervo. Estas dobras substituem hero com foto,
   galeria e exemplos por faixa de renda.
   ========================================================================== */

/* --- Hero sem foto: o fundo é a própria marca, nunca imagem de banco ------ */
.hero--flat {
  min-height: auto; height: auto; padding: calc(var(--header-h) + 96px) 0 96px;
  background:
    radial-gradient(1200px 620px at 82% 18%, rgba(234,162,47, .20), transparent 62%),
    linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 58%, #43290A 100%);
  color: var(--color-on-dark);
}
.hero--flat .hero__bg, .hero--flat .hero__overlay { display: none; }
.hero--flat .hero__content { position: relative; max-width: 900px; }
.hero--flat .hero__sub { color: var(--color-on-dark-mute); max-width: 66ch; }
.hero--flat::after { opacity: .10; }

/* --- Statbar (gramática do Icconne, 3 números) ---------------------------- */
.statbar { background: var(--color-bg-soft); padding: 56px 0; border-bottom: 1px solid var(--color-line); }
.statbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.statbar__item { position: relative; padding-left: 22px; }
.statbar__item::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  background: var(--brand);
  -webkit-mask: var(--mark-band) center/100% auto repeat-y;
  mask: var(--mark-band) center/100% auto repeat-y;
}
.statbar__seal { position: absolute; right: 8px; top: -6px; opacity: .16; }
.statbar__seal img { width: 52px; height: auto; }
.statbar__num {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 4.4vw, 3.1rem); color: var(--color-ink);
}
.statbar__num small { font-size: .42em; margin-left: .18em; color: var(--brand-2); font-weight: 600; }
.statbar__label { margin-top: 10px; color: var(--color-text-mute); font-size: .96rem; max-width: 30ch; }

/* --- Diferencial (4 cards numerados) -------------------------------------- */
.diff { padding: 96px 0; background: var(--color-bg); }
.diff__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.diff__card {
  position: relative; padding: 30px 28px 28px; background: var(--color-bg-soft);
  border: 1px solid var(--color-line); border-left: 4px solid var(--brand);
  border-radius: var(--radius-card); transition: transform var(--t), box-shadow var(--t);
}
.diff__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.diff__num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--brand); opacity: .34; margin-bottom: 14px;
}
.diff__title { font-family: var(--font-display); font-size: 1.16rem; color: var(--color-ink); margin-bottom: 10px; }
.diff__text { color: var(--color-text-mute); font-size: .99rem; line-height: 1.62; }

/* --- Gestão / camada de proteção ------------------------------------------ */
.gestao { padding: 96px 0; background: var(--color-bg-soft); }
.gestao__inner { display: grid; grid-template-columns: 1.25fr .85fr; gap: 46px; align-items: start; }
.gestao__lead { color: var(--color-text-mute); font-size: 1.04rem; line-height: 1.72; margin-top: 20px; }
.gestao__list { margin-top: 24px; display: grid; gap: 12px; }
.gestao__list li { position: relative; padding-left: 30px; color: var(--color-text); line-height: 1.55; }
.gestao__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 17px;
  background: var(--brand);
  -webkit-mask: var(--mark-band) center/contain no-repeat;
  mask: var(--mark-band) center/contain no-repeat;
}
.gestao__cta { margin-top: 30px; }
.gestao__aside {
  padding: 34px 30px; background: var(--color-ink); color: var(--color-on-dark);
  border-radius: var(--radius-card);
}
.gestao__aside-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 20px; color: #fff; }
.gestao__tags { display: grid; gap: 10px; }
.gestao__tags li {
  padding: 11px 14px; background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--brand-light); font-size: .95rem; color: var(--color-on-dark);
}
.gestao__aside-note { margin-top: 20px; font-size: .86rem; color: var(--color-on-dark-mute); opacity: .8; }

/* --- Responsável técnico sem retrato -------------------------------------- */
.experts--nophoto .experts__inner { grid-template-columns: 1fr; max-width: 820px; margin-inline: auto; text-align: left; }
.experts__signature {
  display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px;
  border-top: 1px solid var(--color-line);
}
.experts__seal {
  display: grid; place-items: center; width: 58px; height: 58px; flex: none;
  background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius-card);
}
.experts__seal img { width: 34px; height: auto; }
.experts__signature strong { display: block; font-family: var(--font-display); color: var(--color-ink); }
.experts__signature small { display: block; color: var(--color-text-mute); font-size: .9rem; margin-top: 2px; }

@media (max-width: 900px) {
  .statbar__grid { grid-template-columns: 1fr; gap: 30px; }
  .diff__grid { grid-template-columns: 1fr; }
  .gestao__inner { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 420px) {
  .hero--flat { padding: calc(var(--header-h) + 64px) 0 68px; }
  .diff, .gestao { padding: 68px 0; }
  .diff__card { padding: 24px 20px; }
}

/* ==========================================================================
   CONTENÇÃO HORIZONTAL
   A nav da HCP tem 6 itens com rótulos mais longos que os do Romualdo e,
   sem min-width:0, o flex não deixava a faixa encolher: os links empurravam
   a largura da PÁGINA e tudo vazava para a direita no celular.
   Sem hambúrguer (playbook 13.3): a faixa rola na horizontal.
   ========================================================================== */
html, body { overflow-x: clip; }          /* clip e não hidden: não quebra sticky */
.site-header__inner { min-width: 0; }
.site-nav {
  min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; white-space: nowrap; }
.container { max-width: min(var(--container), 100%); }
.hero--flat .hero__content { max-width: min(900px, 100%); }
img, svg, video { max-width: 100%; }

/* ==========================================================================
   HERO COM FOTO (altura automática, não 100vh: copy longa não clipa o CTA)
   ========================================================================== */
.hero--photo { position: relative; isolation: isolate; }
.hero--photo .hero__bg { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero--photo .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero--photo .hero__overlay {
  display: block; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(37,24,4,.95) 0%, rgba(37,24,4,.88) 42%, rgba(37,24,4,.52) 72%, rgba(37,24,4,.42) 100%),
    linear-gradient(180deg, rgba(37,24,4,.72) 0%, transparent 34%, rgba(37,24,4,.60) 100%);
}
.hero--photo::after { opacity: .05; }

/* Célula da galeria em 4:5 (>= 0.80): o acervo da HCP é frame de vídeo vertical
   e o cover em célula deitada decepava o pé-direito (playbook 15.7). */
.marquee__item { aspect-ratio: 4 / 5; width: clamp(230px, 24vw, 300px); }
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   v3 — RITMO, MOVIMENTO E ENTRADA/SAÍDA
   ========================================================================== */

/* --- 1. Respiro entre dobras mais curto ---------------------------------- */
:root { --dobra-y: clamp(52px, 5.4vw, 76px); }
.statbar, .process, .risk-band, .gestao, .gallery, .experts, .objections, .viability {
  padding-top: var(--dobra-y); padding-bottom: var(--dobra-y);
}
.hero--flat { padding: calc(var(--header-h) + 64px) 0 68px; }
.gallery__head, .form-head { margin-bottom: 30px; }
.section-lead { margin-bottom: 0; }
.steps, .diff__grid, .objections__grid { margin-top: 32px; }
.gallery__cta, .financing__cta, .gestao__cta, .experts__cta { margin-top: 26px; }
.hex-divider { height: 18px; }
.hex-divider__mark { height: 18px; }

/* --- 2. Degradê animado com as cores da marca ---------------------------- */
@property --g1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.brand-flow {
  position: relative; isolation: isolate;
  background:
    radial-gradient(90% 130% at 12% 0%,  rgba(234,162,47,.30), transparent 58%),
    radial-gradient(80% 120% at 92% 30%, rgba(177,81,22,.42), transparent 62%),
    radial-gradient(70% 110% at 50% 108%, rgba(242,197,125,.20), transparent 60%),
    linear-gradient(150deg, var(--color-ink) 0%, #3A2408 55%, #43290A 100%);
  background-size: 180% 180%, 190% 190%, 170% 170%, 100% 100%;
  animation: brandFlow 22s ease-in-out infinite alternate;
}
@keyframes brandFlow {
  0%   { background-position:   0% 0%,  100% 30%, 50% 100%, 0 0; }
  50%  { background-position:  40% 30%,  60% 10%, 20%  70%, 0 0; }
  100% { background-position:  10% 60%,  90% 60%, 80%  90%, 0 0; }
}

/* Fio de luz da marca que corre no topo das dobras escuras */
.brand-wire { position: relative; }
.brand-wire::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--brand) 18%, var(--brand-light) 50%, var(--brand) 82%, transparent);
  background-size: 220% 100%;
  animation: wireRun 5.5s linear infinite;
  opacity: .85;
}
@keyframes wireRun { from { background-position: 220% 0; } to { background-position: -20% 0; } }

/* Brilho que pulsa atrás do hero */
.hero--photo .hero__overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(46% 62% at 22% 46%, rgba(234,162,47,.26), transparent 68%);
  animation: heroGlow 7s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { opacity: .45; transform: scale(1); } to { opacity: .95; transform: scale(1.12); } }

/* --- 3. Entrada E saída (o elemento recolhe ao sair do viewport) ---------- */
[data-anim] {
  opacity: 0; transform: translateY(26px) scale(.985);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  will-change: opacity, transform;
}
[data-anim].is-in { opacity: 1; transform: none; }
[data-anim].is-out { opacity: 0; transform: translateY(-18px) scale(.99); }
[data-anim="left"]  { transform: translateX(-32px); }
[data-anim="right"] { transform: translateX(32px); }
[data-anim="zoom"]  { transform: scale(.93); }
[data-anim].is-in   { transform: none; }

/* escalonamento dos filhos: cada card entra logo depois do anterior */
[data-anim-stagger] > * { opacity: 0; transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-anim-stagger].is-in > * { opacity: 1; transform: none; }
[data-anim-stagger].is-in > *:nth-child(1) { transition-delay: .04s }
[data-anim-stagger].is-in > *:nth-child(2) { transition-delay: .12s }
[data-anim-stagger].is-in > *:nth-child(3) { transition-delay: .20s }
[data-anim-stagger].is-in > *:nth-child(4) { transition-delay: .28s }
[data-anim-stagger].is-in > *:nth-child(5) { transition-delay: .36s }

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-anim-stagger] > * { opacity: 1 !important; transform: none !important; }
  .brand-flow, .brand-wire::before, .hero--photo .hero__overlay::after { animation: none; }
}

/* --- 4. Selo de foto provisória ------------------------------------------ */
.experts__photo { position: relative; }
.experts__placeholder-tag {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 7px 13px; font-family: var(--font-display); font-weight: 600;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-ink); background: var(--brand-light);
  border-radius: var(--radius-btn);
  box-shadow: 0 6px 18px rgba(37,24,4,.32);
}

/* --- Correção de contraste: a dobra de risco virou escura com o brand-flow,
       e o texto dos bullets (vermelho sobre claro no original) sumiu. -------- */
.risk-band.brand-flow .rb__txt { color: var(--color-on-dark); }
.risk-band.brand-flow .rb { border-bottom-color: rgba(255,255,255,.14); }
.risk-band.brand-flow .rb__ic { background: #c0392b; color: #fff; }
.risk-band.brand-flow .rb[data-strike] .rb__txt::after { background: rgba(255,255,255,.55); }
.risk-band.brand-flow .section-title { color: #fff; }
.risk-band.brand-flow .accent-red { color: #ff7a6b; }

/* ==========================================================================
   v4
   ========================================================================== */

/* --- 1. Régua de autoridade: degradê escuro e números em cor brilhante ---- */
.statbar {
  position: relative; isolation: isolate; border-bottom: 0;
  color: var(--color-on-dark);
  background:
    radial-gradient(70% 140% at 8% 0%,   rgba(234,162,47,.34), transparent 60%),
    radial-gradient(65% 130% at 92% 100%, rgba(242,197,125,.26), transparent 62%),
    linear-gradient(120deg, var(--color-ink) 0%, #43290A 48%, #5A360C 100%);
  background-size: 190% 190%, 180% 180%, 100% 100%;
  animation: brandFlow 20s ease-in-out infinite alternate;
  padding-top: calc(var(--dobra-y) + 6px); padding-bottom: calc(var(--dobra-y) + 6px);
}
.statbar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand-light) 50%, var(--brand) 80%, transparent);
  background-size: 220% 100%; animation: wireRun 5.5s linear infinite;
}
.statbar__item { padding-left: 26px; }
.statbar__item::before { background: var(--brand-light); opacity: .9; width: 3px; }
.statbar__num {
  color: transparent; background: linear-gradient(96deg, #FFFFFF 0%, var(--brand-light) 42%, var(--brand) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  animation: numShine 6s ease-in-out infinite alternate;
  text-shadow: none; filter: drop-shadow(0 4px 16px rgba(234,162,47,.30));
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}
@keyframes numShine { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.statbar__num small { color: var(--brand-light); -webkit-text-fill-color: var(--brand-light); }
.statbar__label { color: var(--color-on-dark-mute); }
.statbar__seal { opacity: .22; }

/* --- 2. Portfólio: cartões menores -------------------------------------- */
.marquee__item { width: clamp(168px, 16vw, 216px); }
.marquee__item figcaption { font-size: .82rem; }

/* --- 3. Como funciona: cards alinhados com o texto ----------------------- */
/* o <ol> herdava o recuo de lista e empurrava os cards para dentro */
.steps { padding-left: 0; margin-left: 0; list-style: none; }

/* --- 4. Gestão: colunas equilibradas e aside da altura do texto ---------- */
.gestao__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
.gestao__aside { display: flex; flex-direction: column; justify-content: center; }
.gestao__copy { display: flex; flex-direction: column; }
.gestao__cta { margin-top: auto; padding-top: 24px; }

/* --- 5. Botões: degradê da marca animado, e pulso ------------------------ */
.btn--accent, .btn--green, .btn--ghost-light, .site-header__cta {
  position: relative; background-size: 220% 100%;
  animation: btnFlow 6s ease-in-out infinite alternate, btnPulse 2.8s ease-in-out infinite;
}
.btn--accent, .site-header__cta {
  background-image: linear-gradient(96deg, var(--brand-2) 0%, var(--brand) 38%, var(--brand-light) 62%, var(--brand) 100%);
  color: var(--color-ink);
}
/* verde continua verde: no padrão, verde = conversão e não pode virar ciano */
.btn--green {
  background-image: linear-gradient(96deg, var(--color-green-deep) 0%, var(--color-green) 42%, var(--color-green-light) 64%, var(--color-green) 100%);
  color: #fff;
}
.btn--ghost-light {
  background-image: linear-gradient(96deg, rgba(234,162,47,.16) 0%, rgba(242,197,125,.26) 50%, rgba(234,162,47,.16) 100%);
}
@keyframes btnFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,162,47,.42); }
  55%      { box-shadow: 0 0 0 14px rgba(234,162,47,0); }
}
.btn--green { animation-name: btnFlow, btnPulseGreen; }
@keyframes btnPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,168,88,.45); }
  55%      { box-shadow: 0 0 0 14px rgba(31,168,88,0); }
}
.btn--accent:hover, .btn--green:hover, .site-header__cta:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .statbar, .statbar::before, .statbar__num,
  .btn--accent, .btn--green, .btn--ghost-light, .site-header__cta { animation: none; }
}

/* ==========================================================================
   v5 — CONTRASTE DO HERO
   O brilho pulsante estava em 22% da largura, atrás da coluna de texto, e
   clareava o fundo exatamente onde ele precisa ser escuro. Foi para o lado
   direito, onde não há texto. Somado a isso: scrim mais forte na coluna
   esquerda, corpo em cor cheia (não na mute) e acento no ciano claro, que
   é o que sobrevive sobre a fachada de vidro esverdeada.
   ========================================================================== */

/* 1. o brilho sai de trás do texto */
.hero--photo .hero__overlay::after {
  background: radial-gradient(40% 56% at 82% 40%, rgba(234,162,47,.22), transparent 70%);
}
@keyframes heroGlow { from { opacity: .35; transform: scale(1); } to { opacity: .72; transform: scale(1.10); } }

/* 2. scrim: quase opaco onde o texto vive, e só abre no terço direito */
.hero--photo .hero__overlay {
  background:
    linear-gradient(96deg,
      rgba(24,15,3,.97) 0%,
      rgba(24,15,3,.94) 38%,
      rgba(26,17,3,.82) 58%,
      rgba(31,20,4,.55) 78%,
      rgba(31,20,4,.42) 100%),
    linear-gradient(180deg, rgba(24,15,3,.80) 0%, rgba(24,15,3,.30) 34%, rgba(24,15,3,.72) 100%);
}
.hero--photo .hero__bg img { filter: saturate(.85) contrast(.92) brightness(.72); }

/* 3. texto do hero em cor cheia, com sombra de segurança */
.hero--flat .hero__sub {
  color: #FDF3E4; font-size: clamp(1.02rem, 1.22vw, 1.14rem); line-height: 1.68;
  text-shadow: 0 1px 12px rgba(24,15,3,.85);
}
.hero__headline { text-shadow: 0 2px 20px rgba(24,15,3,.75); }
.hero--photo .hero__headline .accent { color: var(--brand-light); }
.hero--photo .eyebrow--badge {
  background: rgba(24,15,3,.86); color: #F7EFE4;
  border: 1px solid rgba(242,197,125,.34);
}
.hero__cue { color: #EFE2D2; text-shadow: 0 1px 10px rgba(24,15,3,.8); }

/* 4. o botão fantasma precisa de borda para existir sobre foto */
.hero--photo .btn--ghost-light {
  border: 1.5px solid rgba(242,197,125,.55); color: #fff;
  backdrop-filter: blur(3px);
}

/* --- v5.1: o pior ponto do fundo (não a média) é que decide -------------- */
/* O parágrafo chegava a ~1020px, já na região em que o scrim abria: sobrava
   uma mancha clara da fachada atrás de texto pequeno (2,65:1). Duas travas:
   a coluna de texto encurta, e o scrim forte vai mais para a direita.       */
.hero--photo .hero__overlay {
  background:
    linear-gradient(96deg,
      rgba(24,15,3,.97) 0%,
      rgba(24,15,3,.96) 46%,
      rgba(24,15,3,.93) 64%,
      rgba(26,17,3,.72) 80%,
      rgba(31,20,4,.48) 100%),
    linear-gradient(180deg, rgba(24,15,3,.80) 0%, rgba(24,15,3,.34) 34%, rgba(24,15,3,.74) 100%);
}
.hero--flat .hero__sub { max-width: 58ch; }
.hero__headline { max-width: 20ch; }

/* ==========================================================================
   v7
   ========================================================================== */

/* --- Régua de autoridade: centralizada, maior e proporcional ------------- */
.statbar__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px); align-items: center;
  max-width: 1080px; margin-inline: auto;
}
.statbar__item {
  padding: 6px 0 6px 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.statbar__item::before {           /* a crista vira um traço curto sob o número */
  content: ""; position: static; order: 3;
  width: 46px; height: 4px; opacity: .95;
  -webkit-mask: var(--mark-band) center/auto 100% repeat-x;
  mask: var(--mark-band) center/auto 100% repeat-x;
}
.statbar__num { font-size: clamp(2.9rem, 5.6vw, 4.2rem); line-height: .98; order: 1; }
.statbar__num small { font-size: .34em; }
.statbar__label { order: 2; max-width: 26ch; margin-top: 2px; font-size: 1rem; }
.statbar__seal { display: none; }  /* o selo desalinhava a grade de 3 colunas */
.statbar { padding-top: calc(var(--dobra-y) + 18px); padding-bottom: calc(var(--dobra-y) + 18px); }

/* --- Portfólio quadrado e menor ----------------------------------------- */
.marquee__item { aspect-ratio: 1 / 1; width: clamp(150px, 13.5vw, 190px); }

/* --- Telefone: seletor de país + dica + erro com exemplo ----------------- */
.tel-row { display: flex; gap: 8px; align-items: stretch; }
.tel-row .tel-country { flex: 0 0 auto; width: auto; max-width: 42%; min-width: 104px; padding-right: 26px; }
.tel-row input { flex: 1 1 auto; min-width: 0; }
.tel-hint { display: block; margin-top: 6px; font-size: .82rem; color: var(--color-text-mute); }
.error-msg b { color: #ff6b5b; font-weight: 700; letter-spacing: .01em; }
.error-msg strong { color: inherit; }
@media (max-width: 380px) { .tel-row .tel-country { max-width: 46%; min-width: 92px; font-size: 13px; } }

/* --- Hero: deixar a foto aparecer mais, sem perder o texto --------------- */
/* o scrim forte vira um painel SÓ atrás da coluna de texto; o resto da
   fachada clareia. Assim a foto respira e o contraste continua medido. */
.hero--photo .hero__bg img { filter: saturate(.95) contrast(1.0) brightness(.86); }
.hero--photo .hero__overlay {
  background:
    linear-gradient(96deg,
      rgba(24,15,3,.94) 0%,
      rgba(24,15,3,.90) 40%,
      rgba(24,15,3,.72) 56%,
      rgba(26,17,3,.34) 74%,
      rgba(31,20,4,.16) 100%),
    linear-gradient(180deg, rgba(24,15,3,.62) 0%, rgba(24,15,3,.16) 36%, rgba(24,15,3,.60) 100%);
}
.hero--flat .hero__content::before {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--container-pad) * -1); right: 22%; top: -32px; bottom: -32px;
  background: linear-gradient(96deg, rgba(21,13,3,.80) 0%, rgba(21,13,3,.66) 62%, transparent 100%);
  filter: blur(18px);
}
.hero--flat .hero__content { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero--flat .hero__content::before { right: -10%; } }

/* ==========================================================================
   v9
   ========================================================================== */

/* --- Régua de autoridade: volta ao layout anterior, só melhor centrada ---- */
/* Desfaz o v7 (que centralizou o texto e escondeu o selo) e recupera o bloco
   alinhado à esquerda com a barra da crista. O que muda: a grade inteira
   passa a ser centrada como conjunto e as três colunas ficam do mesmo peso. */
.statbar__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 52px);
  max-width: 1120px; margin-inline: auto;
  align-items: center; justify-items: center;
}
.statbar__item {
  display: block; text-align: left; position: relative;
  padding: 4px 0 4px 26px; width: max-content; max-width: 100%;
}
.statbar__item::before {                 /* barra vertical da crista, como antes */
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; height: auto; order: 0; opacity: .9;
  background: var(--brand-light);
  -webkit-mask: var(--mark-band) center/100% auto repeat-y;
  mask: var(--mark-band) center/100% auto repeat-y;
}
.statbar__num  { font-size: clamp(2.4rem, 4.4vw, 3.3rem); line-height: 1; }
.statbar__num small { font-size: .38em; }
.statbar__label { max-width: 24ch; margin-top: 8px; font-size: .97rem; }
.statbar__seal { display: block; }       /* o selo volta */
.statbar { padding-top: calc(var(--dobra-y) + 8px); padding-bottom: calc(var(--dobra-y) + 8px); }

/* --- Gestão vira faixa curta: só declaração e CTA ------------------------ */
.gestao--band { padding-top: calc(var(--dobra-y) - 6px); padding-bottom: calc(var(--dobra-y) - 6px); }
.gestao--band .gestao__inner { display: block; max-width: 900px; margin-inline: auto; text-align: center; }
.gestao--band .section-title::after { margin-inline: auto; }
.gestao--band .eyebrow { justify-content: center; }
.gestao--band .gestao__cta { margin-top: 22px; }

/* --- Escopo: cards compactos, na língua do dono do imóvel ---------------- */
.escopo { padding: var(--dobra-y) 0; background: var(--color-bg); }
.escopo__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 30px;
}
.escopo__card {
  padding: 22px 20px; background: var(--color-bg-soft);
  border: 1px solid var(--color-line); border-left: 3px solid var(--brand);
  border-radius: var(--radius-card);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.escopo__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-left-color: var(--brand-2); }
.escopo__card h3 {
  font-family: var(--font-display); font-size: 1.02rem; color: var(--color-ink);
  margin-bottom: 8px; line-height: 1.3;
}
.escopo__card p { font-size: .93rem; line-height: 1.55; color: var(--color-text-mute); }
.escopo__nota { margin-top: 20px; font-size: .87rem; color: var(--color-text-mute); opacity: .85; }

@media (max-width: 900px) {
  .escopo__grid { grid-template-columns: 1fr 1fr; }
  .statbar__grid { grid-template-columns: 1fr; justify-items: start; gap: 26px; }
}
@media (max-width: 560px) { .escopo__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   v10 — CARDS DE ESCOPO EM DESTAQUE
   A dobra virou escura para os cards existirem como objeto luminoso. Cada
   card tem: borda em degradê animado (mask-composite, não pseudo empilhado),
   brilho que segue a entrada, varredura de luz no hover e a marca d'água do P.
   ========================================================================== */
.escopo { position: relative; isolation: isolate; color: var(--color-on-dark); }
.escopo .section-lead, .escopo__nota--light { color: var(--color-on-dark-mute); }

.escopo__grid { gap: 18px; margin-top: 34px; perspective: 1200px; }

.escopo__card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0; border: 0; border-radius: var(--radius-card);
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  animation-delay: calc(var(--i) * .18s);
}
/* borda em degradê animado: pinta só a moldura, sem cobrir o conteúdo */
.escopo__card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: linear-gradient(115deg, var(--brand-light), var(--brand) 28%, transparent 46%,
                               transparent 62%, var(--brand-2) 84%, var(--brand-light));
  background-size: 260% 260%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bordaFlow 8s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.1s);
  opacity: .75; transition: opacity .4s var(--ease);
}
@keyframes bordaFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* brilho de fundo que acende no hover */
.escopo__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 70%; z-index: 0;
  background: radial-gradient(60% 100% at 30% 0%, rgba(234,162,47,.55), transparent 70%);
  opacity: .22; transition: opacity .45s var(--ease), transform .6s var(--ease);
}
/* marca d'água: o P da marca no canto do card */
.escopo__mark {
  position: absolute; right: -10px; bottom: -14px; width: 92px; height: 118px; z-index: 0;
  background: var(--brand-light);
  -webkit-mask: var(--mark-full) center/contain no-repeat;
  mask: var(--mark-full) center/contain no-repeat;
  opacity: .07; transition: opacity .45s var(--ease), transform .55s var(--ease);
}
/* varredura de luz que atravessa no hover */
.escopo__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .75s var(--ease);
}
.escopo__body { position: relative; z-index: 3; padding: 26px 22px 24px; }
.escopo__card h3 {
  font-family: var(--font-display); font-size: 1.08rem; color: #fff;
  margin-bottom: 10px; line-height: 1.28;
}
.escopo__card p { font-size: .94rem; line-height: 1.58; color: var(--color-on-dark-mute); }

.escopo__card:hover, .escopo__card:focus-within {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 22px 54px rgba(24,15,3,.55), 0 0 0 1px rgba(242,197,125,.22);
}
.escopo__card:hover::before, .escopo__card:focus-within::before { opacity: 1; }
.escopo__card:hover::after,  .escopo__card:focus-within::after  { transform: translateX(120%); }
.escopo__card:hover .escopo__glow { opacity: .55; transform: translateY(6px); }
.escopo__card:hover .escopo__mark { opacity: .18; transform: translate(-4px, -6px) rotate(-4deg); }
.escopo__card:hover h3 { color: var(--brand-light); }

@media (prefers-reduced-motion: reduce) {
  .escopo__card, .escopo__card::before, .escopo__card::after,
  .escopo__glow, .escopo__mark { animation: none; transition: none; }
}

/* ==========================================================================
   v11
   ========================================================================== */

/* --- Correção: a regra .escopo (v9) definia fundo branco e vinha DEPOIS de
       .brand-flow, então vencia e a dobra ficava clara com texto branco em
       cima de branco. Especificidade maior devolve o degradê animado. ------ */
.escopo.brand-flow {
  background:
    radial-gradient(90% 130% at 12% 0%,  rgba(234,162,47,.30), transparent 58%),
    radial-gradient(80% 120% at 92% 30%, rgba(177,81,22,.42), transparent 62%),
    radial-gradient(70% 110% at 50% 108%, rgba(242,197,125,.20), transparent 60%),
    linear-gradient(150deg, var(--color-ink) 0%, #3A2408 55%, #43290A 100%);
  background-size: 180% 180%, 190% 190%, 170% 170%, 100% 100%;
  animation: brandFlow 22s ease-in-out infinite alternate;
}
.escopo.brand-flow .section-title { color: #fff; }

/* --- Portfólio: carrossel manual, quadrado -------------------------------- */
/* o autoplay foi desligado no main.js (speed = 0); as setas e o arrasto
   continuam valendo. Aqui só reforçamos a leitura de "isto se navega". */
.marquee { cursor: grab; }
.marquee:active { cursor: grabbing; }
.marquee__item { aspect-ratio: 1 / 1; width: clamp(190px, 17vw, 250px); }
.marquee__nav {
  opacity: 1; background: var(--brand); color: var(--color-ink);
  box-shadow: 0 10px 26px rgba(24,15,3,.35);
}
.marquee__nav:hover { background: var(--brand-light); }

/* ==========================================================================
   v12
   ========================================================================== */

/* --- Carrossel: as fotos NÃO estavam quadradas --------------------------- */
/* A regra base do clone fixa height: clamp(320px, 42vw, 520px), e altura
   explícita vence aspect-ratio. Por isso o 1/1 não pegava. */
.marquee__item {
  height: auto; aspect-ratio: 1 / 1;
  width: clamp(200px, 18vw, 260px);
}
.marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marquee__track { gap: 16px; }

/* --- Como funciona: os cards ocupavam só o miolo da dobra ---------------- */
/* .steps tinha max-width: 920px dentro de um container de 1200px, o que
   deixava ~140px vazios de cada lado. Agora a grade preenche a dobra. */
.steps {
  max-width: none; width: 100%;
  gap: clamp(18px, 2.2vw, 30px);
  margin: 34px 0 0;
}
.step { padding: clamp(28px, 2.6vw, 40px) clamp(26px, 2.4vw, 38px); }
.step__title { font-size: clamp(1.08rem, 1.35vw, 1.26rem); }
.step__text  { font-size: clamp(.95rem, 1.02vw, 1.02rem); line-height: 1.62; }
.step__ghost { font-size: clamp(4.4rem, 7vw, 7rem); }

@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* --- v13: fotos do portfólio um pouco maiores, seguem quadradas ---------- */
.marquee__item { width: clamp(250px, 23vw, 330px); }
.marquee__item figcaption { font-size: .88rem; }

/* --- v14: o número fantasma estava sendo decepado ------------------------ */
/* .step tem overflow:hidden e o ghost ficava em top:-26px, ou seja, metade
   dele nascia fora do card. Com a fonte maior do v12 o corte ficou evidente.
   Agora ele mora inteiro dentro do card, atrás do conteúdo. */
.step__ghost {
  top: 12px; right: 18px; bottom: auto;
  font-size: clamp(3.4rem, 5.2vw, 5.4rem);
  line-height: .86; opacity: .18;
}
.step:hover .step__ghost { opacity: .28; transform: translateY(2px); }

/* ==========================================================================
   v15 — A DOBRA DE ESCOPO GANHA IDENTIDADE PRÓPRIA
   Ela vinha colada na dobra de risco e com o MESMO brand-flow, então as duas
   liam como um bloco escuro só (playbook 14.12). Aqui ela deixa de repetir
   o degradê da vizinha: base quase preta, malha de cor em movimento, grade
   técnica ao fundo e cards preenchidos em vez de só contornados.
   ========================================================================== */
.escopo--mesh {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--color-on-dark);
  background: #150C02;
  padding-top: calc(var(--dobra-y) + 14px); padding-bottom: calc(var(--dobra-y) + 14px);
}
/* malha de cor: três manchas girando em tempos diferentes */
.escopo--mesh::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30% 34% at 18% 26%, rgba(234,162,47,.50), transparent 62%),
    radial-gradient(28% 32% at 82% 22%, rgba(242,197,125,.34), transparent 64%),
    radial-gradient(34% 38% at 62% 84%, rgba(177,81,22,.55), transparent 66%);
  filter: blur(28px);
  animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%,-2%,0) scale(1.08); }
  100% { transform: translate3d(-3%,3%,0) scale(1.04); }
}
/* grade técnica: lê como prancheta de engenharia, não como fundo genérico */
.escopo--mesh::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(242,197,125,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,197,125,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 78%);
}
.escopo--mesh > .container { position: relative; z-index: 2; }
.escopo--mesh .section-title { color: #fff; }
.escopo--mesh .escopo__nota--light { color: var(--color-on-dark-mute); }

/* --- cards preenchidos, com degradê próprio e realce por posição --------- */
.escopo--mesh .escopo__card {
  background:
    linear-gradient(158deg, rgba(234,162,47,.22) 0%, rgba(177,81,22,.14) 46%, rgba(26,17,3,.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(12,8,2,.45);
}
.escopo--mesh .escopo__card:nth-child(3n+2) {
  background: linear-gradient(158deg, rgba(242,197,125,.22) 0%, rgba(234,162,47,.12) 48%, rgba(26,17,3,.72) 100%);
}
.escopo--mesh .escopo__card:nth-child(3n+3) {
  background: linear-gradient(158deg, rgba(177,81,22,.30) 0%, rgba(234,162,47,.10) 50%, rgba(26,17,3,.74) 100%);
}
/* número de ordem, que também separa esta dobra da de risco */
.escopo--mesh .escopo__card .escopo__body::before {
  content: "0" counter(escopo); counter-increment: escopo;
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .16em; color: var(--brand-light);
  opacity: .75; margin-bottom: 12px;
}
.escopo--mesh .escopo__grid { counter-reset: escopo; }
.escopo--mesh .escopo__card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 60px rgba(12,8,2,.6),
              0 0 0 1px rgba(242,197,125,.30);
}
.escopo--mesh .escopo__mark { opacity: .10; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .24; }

/* ==========================================================================
   v16 — HERO CENTRALIZADO
   O texto deixa de morar na coluna esquerda, então o scrim também muda: era
   uma faixa forte à esquerda que abria para a direita, e vira um véu uniforme
   com vinheta central. Sem isso o texto centralizado cairia justamente na
   parte clara da fachada.
   ========================================================================== */
.hero--flat .hero__content {
  text-align: center;
  max-width: min(1000px, 100%);
  margin-inline: auto;
}
.hero--flat .hero__headline {
  max-width: 22ch; margin-inline: auto;
}
.hero--flat .hero__sub {
  max-width: 62ch; margin-inline: auto;
  font-size: clamp(.95rem, 1.02vw, 1.04rem);   /* menor, como pedido */
  line-height: 1.66;
}
.hero--flat .eyebrow--badge { display: inline-flex; justify-content: center; }
.hero--flat .hero__cta { justify-content: center; }
.hero--flat .hero__cue { justify-content: center; margin-inline: auto; }
.hero--flat .hero__cue::before { margin-inline: auto; }

/* véu uniforme + vinheta, no lugar da faixa lateral */
.hero--photo .hero__overlay {
  background:
    radial-gradient(78% 76% at 50% 46%, rgba(21,13,3,.92) 0%, rgba(21,13,3,.86) 46%, rgba(24,15,3,.66) 78%, rgba(26,17,3,.52) 100%),
    linear-gradient(180deg, rgba(24,15,3,.72) 0%, rgba(24,15,3,.34) 38%, rgba(24,15,3,.70) 100%);
}
.hero--photo .hero__bg img { filter: saturate(.95) contrast(1.0) brightness(.80); }
.hero--photo .hero__overlay::after {
  background: radial-gradient(38% 50% at 50% 42%, rgba(234,162,47,.16), transparent 72%);
}
/* o painel desfocado acompanha o texto: passa a ser centrado */
.hero--flat .hero__content::before {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(1120px, 96%); top: -28px; bottom: -28px;
  background: radial-gradient(62% 70% at 50% 50%, rgba(19,12,2,.72) 0%, rgba(19,12,2,.42) 62%, transparent 100%);
  filter: blur(22px);
}
@media (max-width: 900px) {
  .hero--flat .hero__content::before { width: 118%; }
}

/* ==========================================================================
   v17
   ========================================================================== */

/* quebras fixas do H1 só a partir de 900px: abaixo disso o texto reflui
   sozinho, senão a quebra forçada gera linha órfã no celular */
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }
.hero--flat .hero__headline { max-width: none; }

/* --- Respiro entre dobras mais curto ainda ------------------------------- */
:root { --dobra-y: clamp(38px, 3.8vw, 56px); }
.hero--flat { padding: calc(var(--header-h) + 44px) 0 48px; }
.gallery__head, .form-head { margin-bottom: 22px; }
.steps { margin-top: 26px; }
.escopo__grid { margin-top: 26px; }
.objections__grid { margin-top: 24px; }
.gallery__cta, .gestao__cta, .experts__cta, .financing__cta { margin-top: 20px; }
.hex-divider, .hex-divider__mark { height: 14px; }
.section-lead { margin-bottom: 0; }
.hero__cue { margin-top: 26px; }

/* --- v18: as três linhas do H1 precisam CABER, senão o navegador requebra -- */
/* A coluna era 1000px e a fonte ia a 58px: a linha mais longa ("sob controle
   e prazo para começar a faturar.") não cabia e virava duas. Coluna mais
   larga + corpo um pouco menor fazem a sequência pedida fechar em 3 linhas. */
.hero--flat .hero__content { max-width: min(1200px, 100%); }
.hero--flat .hero__headline { font-size: clamp(30px, 3.55vw, 49px); }
.hero--flat .hero__sub { max-width: 58ch; }

/* ==========================================================================
   v19 — A FOTO APARECE, O TEXTO CONTINUA LEGÍVEL
   Antes: véu radial forte (.92 no centro) cobrindo a fachada inteira. A foto
   quase sumia. Agora: a imagem clareia bastante e o escurecimento passa a ser
   uma elipse justa ATRÁS DO TEXTO, bem desfocada, mais sombra no próprio
   glifo. Assim o contraste vem de onde as letras estão, não da tela toda.
   ========================================================================== */
.hero--photo .hero__bg img {
  filter: saturate(1.06) contrast(1.06) brightness(1.02);
}
/* véu geral bem mais leve: só assenta a imagem, não a apaga */
.hero--photo .hero__overlay {
  background:
    radial-gradient(86% 82% at 50% 46%, rgba(19,12,2,.50) 0%, rgba(19,12,2,.42) 52%, rgba(21,13,3,.30) 80%, rgba(24,15,3,.26) 100%),
    linear-gradient(180deg, rgba(21,13,3,.58) 0%, rgba(21,13,3,.10) 34%, rgba(21,13,3,.52) 100%);
}
.hero--photo .hero__overlay::after {
  background: radial-gradient(34% 44% at 50% 40%, rgba(234,162,47,.14), transparent 74%);
}
/* o escurecimento que garante leitura vive colado ao texto */
.hero--flat .hero__content::before {
  left: 50%; transform: translateX(-50%);
  width: min(1180px, 98%); top: -34px; bottom: -34px;
  background:
    radial-gradient(52% 46% at 50% 34%, rgba(14,9,2,.90) 0%, rgba(14,9,2,.62) 58%, transparent 100%),
    radial-gradient(46% 34% at 50% 74%, rgba(14,9,2,.80) 0%, rgba(14,9,2,.44) 62%, transparent 100%);
  filter: blur(30px);
}
/* sombra no glifo: resolve o pixel claro isolado sem escurecer a foto */
.hero__headline { text-shadow: 0 2px 10px rgba(14,9,2,.92), 0 0 34px rgba(14,9,2,.7); }
.hero--flat .hero__sub { text-shadow: 0 1px 8px rgba(14,9,2,.95), 0 0 22px rgba(14,9,2,.75); }
.hero__cue { text-shadow: 0 1px 8px rgba(14,9,2,.9); }
.hero--photo .eyebrow--badge { background: rgba(19,12,2,.72); backdrop-filter: blur(4px); }

/* --- v19.1: o acento e o eyebrow reprovaram; aperta só o foco atrás do texto */
.hero--photo .hero__bg img { filter: saturate(1.05) contrast(1.05) brightness(.93); }
.hero--flat .hero__content::before {
  background:
    radial-gradient(50% 44% at 50% 33%, rgba(12,8,2,.95) 0%, rgba(12,8,2,.78) 56%, transparent 100%),
    radial-gradient(44% 32% at 50% 73%, rgba(12,8,2,.88) 0%, rgba(12,8,2,.56) 62%, transparent 100%);
  filter: blur(26px);
}
.hero--photo .eyebrow--badge { background: rgba(14,9,2,.88); }

/* --- v19.2: acento do H1 estava em 2,87 contra mínimo 3,0. Ajuste fino no
       foco atrás do texto (a paleta do kit não permite clarear o ciano). --- */
.hero--flat .hero__content::before {
  background:
    radial-gradient(50% 45% at 50% 33%, rgba(12,8,2,.98) 0%, rgba(12,8,2,.86) 58%, transparent 100%),
    radial-gradient(44% 33% at 50% 73%, rgba(12,8,2,.90) 0%, rgba(12,8,2,.60) 64%, transparent 100%);
}

/* --- v19.3: a elipse de cima cobria 50% da largura, mas a 1a linha do H1
       tem quase 1200px: as pontas dela caíam fora do foco. Alargada. ------- */
.hero--flat .hero__content::before {
  background:
    radial-gradient(68% 46% at 50% 33%, rgba(12,8,2,.97) 0%, rgba(12,8,2,.84) 62%, transparent 100%),
    radial-gradient(48% 34% at 50% 74%, rgba(12,8,2,.90) 0%, rgba(12,8,2,.58) 64%, transparent 100%);
}

/* ==========================================================================
   AJUSTES PEDIDOS (03/08)
   ========================================================================== */

/* --- 1. O MARCADOR PASSA A SER A CASA, NAO A JANELA ----------------------
   O kit entrega dois motivos: a casa (--mark-full) e a janela de 4 folhas
   (--mark-band). A janela e otima TILEADA, como regua sob titulo e como
   divisoria entre dobras. Sozinha, a 11px, ela vira "quatro quadradinhos" e
   nao le como HCP. Entao: marcador PONTUAL = casa; faixa TILEADA = janela,
   que e onde ela de fato funciona. */
.eyebrow::before,
.escopo__mark,
.marquee__item figcaption::before,
.financing__specs li::before,
.gestao__list li::before {
  -webkit-mask-image: var(--mark-full);
          mask-image: var(--mark-full);
}
/* a casa e mais larga que alta; o quadrado da janela era 1:1 */
.eyebrow::before,
.marquee__item figcaption::before { width: 15px; height: 13px; }
.escopo__mark { width: 21px; height: 18px; }
.financing__specs li::before { width: 12px; height: 10px; }
.gestao__list li::before { width: 19px; height: 16px; }

/* --- 2. ICONE DO PASSO COM O DEGRADE ANIMADO DOS BOTOES ------------------
   Mesmo gradiente e mesmo btnFlow do .btn--accent, para o "Como funciona"
   pulsar na mesma frequencia do resto da pagina. A cor do traco vira o ink
   (igual ao botao ambar): branco sobre ambar nao passa contraste. */
.step__icon {
  background: none;
  background-image: linear-gradient(96deg,
    var(--brand-2) 0%, var(--brand) 38%, var(--brand-light) 62%, var(--brand) 100%);
  background-size: 220% 100%;
  animation: btnFlow 6s ease-in-out infinite alternate;
  color: var(--color-ink);
}
.step:hover .step__icon { animation-duration: 3s; }

/* --- 3. DOBRA DO CASO: VIDEO LATERALIZADO --------------------------------
   O video e vertical (1080x1920, camera de celular). Em vez de encaixar a
   forca num quadro 16:9, a dobra usa o retrato como coluna e o texto ao
   lado, que e o unico arranjo em que ele nao aparece com tarja preta. */
.caso { position: relative; padding: clamp(64px, 8vw, 104px) 0; }
.caso__inner {
  display: grid; align-items: center;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 5vw, 68px);
}
.caso__copy { position: relative; z-index: 1; }
.caso__lead { color: var(--color-on-dark-mute); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75; margin-bottom: 18px; max-width: 54ch; }
.caso__list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 30px; }
.caso__list li {
  position: relative; padding-left: 30px;
  color: var(--color-on-dark); font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55;
}
.caso__list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 16px;
  background: var(--brand);
  -webkit-mask: var(--mark-full) center/contain no-repeat;
          mask: var(--mark-full) center/contain no-repeat;
}
.caso__col { justify-self: center; width: 100%; max-width: 400px; }
.caso__media {
  position: relative; width: 100%;
  padding: 3px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  clip-path: polygon(var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)),
             calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut));
}
.caso__media video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: cover; background: var(--color-ink);
  clip-path: polygon(calc(var(--hex-cut) - 3px) 0, 100% 0,
             100% calc(100% - (var(--hex-cut) - 3px)),
             calc(100% - (var(--hex-cut) - 3px)) 100%, 0 100%,
             0 calc(var(--hex-cut) - 3px));
}
.caso__legenda {
  margin-top: 14px; text-align: center;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--color-on-dark-mute);
}
@media (max-width: 900px) {
  .caso__inner { grid-template-columns: 1fr; gap: 34px; }
  .caso__col { max-width: 330px; order: 1; }
  .caso__copy { order: 2; }
}

/* Movimento reduzido: o degrade dos icones e o video param. */
@media (prefers-reduced-motion: reduce) {
  .step__icon { animation: none; }
  .caso__media video { display: block; }
}

/* ==========================================================================
   AJUSTES PEDIDOS (03/08, 2a rodada)
   ========================================================================== */

/* --- 1. LOGO ANIMADA (cabecalho e rodape) --------------------------------
   Duas camadas do mesmo canvas: a casa e o resto do lockup. A casa e
   "construida" por um wipe da esquerda para a direita, que e a ordem em que
   a linha se desenha de verdade (perna -> telhado -> descida). O lettering
   entra depois, em fade. So CSS: identidade que depende de JS some em print
   e em PDF, que e como o cliente costuma abrir (playbook 15.3). */
.logo-anim { position: relative; display: inline-block; line-height: 0; }
.logo-anim__casa,
.logo-anim__resto { display: block; width: 100%; height: auto; }
.logo-anim__resto { position: absolute; inset: 0; }

.logo-anim__casa {
  clip-path: inset(0 100% 0 0);
  animation: logoCasa 1.05s .2s cubic-bezier(.62,.04,.3,1) forwards;
}
@keyframes logoCasa { to { clip-path: inset(0 0 0 0); } }

.logo-anim__resto {
  opacity: 0;
  animation: logoResto .75s 1.0s ease forwards;
}
@keyframes logoResto {
  from { opacity: 0; transform: translateY(5px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* o rodape entra quando o lead chega la, nao junto com o cabecalho */
.logo-anim--rodape .logo-anim__casa  { animation-delay: .35s; }
.logo-anim--rodape .logo-anim__resto { animation-delay: 1.15s; }

/* o wrapper virou o filho direto do brand: as regras de tamanho apontavam
   para o <img>, que agora esta um nivel abaixo */
.site-header__brand .logo-anim { width: 84px; }
.site-header__brand img { height: auto; width: 100%; }
.site-footer__logo .logo-anim { width: 150px; }
.site-footer__logo img { height: auto; width: 100%; }

/* --- 2. A REGUA DO ACENTO SAI DE BAIXO DA LINHA SEGUINTE -----------------
   O ::after era absolute sobre o inline inteiro: quando o acento quebrava em
   duas linhas, a regua caia POR CIMA da linha de baixo e cortava a palavra.
   Underline por background com box-decoration-break resolve, porque cada
   fragmento de linha ganha a sua propria regua, sempre logo abaixo dela. */
.hero__headline .accent::after,
.section-title .accent::after { content: none; }

.hero__headline .accent,
.section-title .accent {
  position: relative;
  padding-bottom: .13em;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat;
  background-size: 100% .09em;
  background-position: 0 100%;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* --- 3. DOBRA DO CASO: ESTAMPARIA DE LINHAS + DEGRADE ANIMADO ------------
   Malha de linhas horizontais e verticais por cima do brand-flow (que ja
   anima o degrade). A malha anda devagar em diagonal, para a dobra nao ficar
   estatica, e some nas bordas por mascara, senao vira quadriculado de fundo
   de planilha. */
.caso { overflow: hidden; }
.caso::after {
  content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(242,197,125,.14) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(242,197,125,.10) 0 1px, transparent 1px 78px);
  animation: casoMalha 26s linear infinite;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 88%);
          mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 88%);
}
@keyframes casoMalha {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 78px 78px, 78px 78px; }
}
.caso__inner { position: relative; z-index: 1; }

/* sem o checklist a coluna encurtou: o texto passa a centralizar com o video */
.caso__inner { align-items: center; }
.caso__copy { display: flex; flex-direction: column; justify-content: center; }
.caso__lead { margin-bottom: 16px; max-width: 46ch; }
.caso__lead:last-of-type { margin-bottom: 30px; }

/* --- 4. O VIDEO PULSA ----------------------------------------------------
   Mesma gramatica do ringPulse dos botoes: um anel da marca que cresce e
   some, mais uma respiracao leve na moldura. */
.caso__media { animation: casoRespira 4.2s ease-in-out infinite; }
@keyframes casoRespira {
  0%, 100% { transform: scale(1);     box-shadow: 0 18px 50px rgba(37,24,4,.45); }
  50%      { transform: scale(1.018); box-shadow: 0 26px 70px rgba(234,162,47,.34); }
}
.caso__media::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-primary);
  animation: casoAnel 2.9s ease-out infinite;
  clip-path: polygon(var(--hex-cut) 0, 100% 0, 100% calc(100% - var(--hex-cut)),
             calc(100% - var(--hex-cut)) 100%, 0 100%, 0 var(--hex-cut));
}
@keyframes casoAnel {
  0%   { inset: 0;     opacity: .5; }
  70%  { inset: -18px; opacity: 0; }
  100% { inset: -18px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-anim__casa  { clip-path: none; animation: none; }
  .logo-anim__resto { opacity: 1; animation: none; }
  .caso::after, .caso__media, .caso__media::after { animation: none; }
}

/* A regua do .section-title nasce alinhada a esquerda. Nas dobras em que o
   titulo e centralizado (formulario e popup) ela ficava sozinha na margem,
   parecendo sujeira. Centraliza junto. */
.form-head .section-title::after,
.lead-popup .section-title::after { margin-inline: auto; }

/* A regua do acento so cabe se a linha tiver folga. Com line-height 1.14 ela
   ou encostava na descendente do "q" (padding curto) ou invadia a linha de
   baixo (padding longo). O certo e abrir a entrelinha dos titulos que levam
   acento: 1.14 -> 1.26 resolve os dois casos e nao muda o tamanho da fonte. */
.hero__headline, .section-title { line-height: 1.26; }

/* --- 5. MOLDURA DO VIDEO COM A SILHUETA DA CASA, DE TOPO RETO ------------
   Pedido do cliente: a forma da casa da logo, mas com o telhado quadrado em
   vez de pontudo. O angulo NAO foi chutado: `_build/medir-telhado.py` mediu a
   aba do simbolo do kit e ela e exatamente 45 graus. Num quadro 9:16, manter
   45 graus na tela custa 16/9 de largura para cada 1 de altura, entao um
   chanfro de 12% da altura come 21.3% da largura de cada lado. Sem isso o
   telhado sai deitado e a forma so LEMBRA uma casa em vez de ser a da HCP. */
.caso__media,
.caso__media video,
.caso__media::after {
  clip-path: polygon(0 12%, 21.3% 0, 78.7% 0, 100% 12%, 100% 100%, 0 100%);
}
/* a moldura tem 3px de sobra; o video herda a mesma silhueta e a diferenca
   vira o contorno ambar, igual ao par usado na foto do responsavel */
.caso__media { padding: 3px; }

/* ==========================================================================
   AJUSTES PEDIDOS (03/08, 3a rodada)
   ========================================================================== */

/* --- 6. BOTAO COM DUAS CORES DE VERDADE ----------------------------------
   O degrade antigo era ambar-com-ambar (brand-2 so no 0%, que com o
   background-size raramente entrava em cena), entao lia como cor chapada.
   Agora a terracota entra em BANDA, varrendo de uma borda a outra, e o
   contraste entre as duas cores do manual fica visivel.

   ⚠ Por que a terracota nao ocupa metade do botao: o rotulo e escuro
   (--color-ink), e escuro sobre terracota da 3.3:1, abaixo do minimo. Sobre
   ambar da 7.4:1. Entao a terracota fica nas pontas, varrendo, e o miolo
   onde o texto mora continua ambar. Duas cores visiveis sem perder o rotulo. */
.btn--accent, .site-header__cta {
  background-image: linear-gradient(100deg,
    var(--brand-2) 0%, var(--brand) 24%, var(--brand-light) 48%,
    var(--brand) 72%, var(--brand-2) 100%);
  background-size: 260% 100%;
  animation: btnFlow 5s ease-in-out infinite alternate, btnPulse 2.8s ease-in-out infinite;
}
.btn--accent::before, .site-header__cta::before {
  background: linear-gradient(100deg,
    var(--brand-2) 0%, var(--brand) 26%, var(--brand-light) 50%,
    var(--brand) 74%, var(--brand-2) 100%);
  background-size: 260% 100%;
  animation: btnFlow 5s ease-in-out infinite alternate;
}
.btn--accent:hover::before, .site-header__cta:hover::before {
  background: linear-gradient(100deg, var(--brand-2), var(--brand) 55%, var(--brand-2));
}

/* --- 7. "POR DENTRO DE UMA ENTREGA": DEGRADE MAIS FORTE E MAIS MOVIMENTO --
   A dobra usava o brand-flow padrao, que e discreto de proposito nas dobras
   de formulario. Aqui ela e vitrine, entao ganha degrade proprio, com as tres
   cores da marca em oposicao, mais uma varredura diagonal que atravessa a
   dobra e um brilho que respira atras do video. */
.caso {
  background:
    radial-gradient(78% 108% at 10% 4%,  rgba(234,162,47,.46), transparent 58%),
    radial-gradient(72% 104% at 94% 26%, rgba(177,81,22,.62), transparent 62%),
    radial-gradient(64% 96%  at 46% 106%, rgba(242,197,125,.34), transparent 60%),
    linear-gradient(146deg, #1C1203 0%, #43290A 52%, #5A360C 100%);
  background-size: 200% 200%, 210% 210%, 190% 190%, 100% 100%;
  animation: casoFlow 16s ease-in-out infinite alternate;
}
@keyframes casoFlow {
  0%   { background-position:   0% 0%, 100% 20%, 50% 100%, 0 0; }
  50%  { background-position:  55% 40%, 45%  0%, 10%  60%, 0 0; }
  100% { background-position: 100% 90%,  0% 70%, 90%  20%, 0 0; }
}
/* varredura diagonal: a luz que corre pela dobra */
.caso__brilho {
  content: ""; position: absolute; inset: -30% -10%; z-index: 0; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%, rgba(242,197,125,.20) 47%, rgba(234,162,47,.30) 52%,
    rgba(242,197,125,.18) 57%, transparent 70%);
  background-size: 260% 100%;
  animation: casoVarre 7.5s ease-in-out infinite;
}
@keyframes casoVarre {
  0%   { background-position: 130% 0; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* --- 8. CONTRASTE DO TEXTO DA DOBRA -------------------------------------
   O corpo usava --color-on-dark-mute (#D9CBB8) sobre um fundo que ficou mais
   saturado: ficou apagado. Sobe para o creme cheio e ganha um pouco de peso. */
.caso__lead {
  color: #FBF4EA;
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(28,18,3,.55);
}
.caso .section-title--light { color: #FFFBF5; }
.caso .eyebrow--light { color: var(--brand-light); }
.caso__legenda { color: #EBDCC6; }

@media (prefers-reduced-motion: reduce) {
  .caso, .caso__brilho { animation: none; }
}

/* ==========================================================================
   AJUSTES PEDIDOS (03/08, 4a rodada)
   ========================================================================== */

/* --- 9. ESTAMPARIA REUTILIZAVEL -----------------------------------------
   A malha de linhas era exclusiva da dobra do caso. Virou classe, porque a
   dobra do formulario pediu a mesma coisa e duplicar o codigo faz as duas
   divergirem na primeira alteracao. */
.malha {
  position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(242,197,125,.14) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,  rgba(242,197,125,.10) 0 1px, transparent 1px 78px);
  animation: casoMalha 26s linear infinite;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 88%);
          mask-image: radial-gradient(120% 90% at 50% 45%, #000 40%, transparent 88%);
}
/* a dobra do caso passa a usar a classe; o ::after proprio sai de cena */
.caso::after { content: none; }
.viability { position: relative; overflow: hidden; }

/* --- 10. HERO SEM A MANCHA ATRAS DO TEXTO -------------------------------
   O clone resolvia o contraste do H1 com uma elipse escura e desfocada atras
   do texto (rgba .97, blur 26px) mais duas sombras de texto empilhadas. Isso
   le como borrao sobre a foto, e foi o que o cliente apontou.

   A troca: a foto passa a ser graduada por INTEIRO (uma graduacao uniforme le
   como tratamento de imagem; uma elipse le como sujeira), o texto ganha peso
   proprio, e a sombra cai para um contorno leve, so para segurar a borda da
   letra sobre as partes claras da vitrine. */
.hero--flat .hero__content::before { content: none; }

.hero--photo .hero__bg img { filter: saturate(.98) contrast(1.02) brightness(.60); }
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg, rgba(28,18,3,.86) 0%, rgba(28,18,3,.74) 46%, rgba(28,18,3,.60) 100%),
    linear-gradient(180deg, rgba(28,18,3,.70) 0%, rgba(28,18,3,.28) 38%, rgba(28,18,3,.78) 100%);
}

/* o texto passa a se sustentar sozinho: mais peso e menos sombra */
.hero__headline {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(14,9,2,.55);
}
.hero--flat .hero__sub {
  color: #F6EDE0;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(14,9,2,.5);
}
.hero__cue { text-shadow: 0 1px 3px rgba(14,9,2,.5); }
/* o badge ja tinha fundo proprio; so firma a borda */
.hero--photo .eyebrow--badge {
  background: rgba(20,13,2,.78);
  border: 1px solid rgba(242,197,125,.30);
}

/* --- 11. ENTRELINHA DOS TITULOS DE VOLTA PARA PERTO ----------------------
   Eu tinha aberto para 1.26 para caber a regua do acento. Ficou arejado
   demais no H2 do formulario, que tem 3 linhas. Aperta para 1.18 e a regua
   encolhe junto, senao ela volta a encostar na linha de baixo.

   A conta: com line-height L, sobra (L-1)/2 em de folga abaixo de cada linha.
   Em 1.18 isso da .09em. A regua ocupa do .08em ao .155em, entao ainda cabe
   na folga, e continua abaixo da descendente do "q" (~.21em da base). */
.hero__headline, .section-title { line-height: 1.18; }
.hero__headline .accent,
.section-title .accent {
  padding-bottom: .08em;
  background-size: 100% .075em;
}