/* ==========================================================================
   EVORA EMPREENDIMENTOS — STYLES
   Tokens do kit_preparado da Evora. Simbolo = P isometrico (mascara, nao clip-path).
   ========================================================================== */

:root {

  /* --- KIT DE MARCA EVORA (kit_preparado, marca/kit/tokens.css) -----------
     Cores lidas do FILL do PDF vetorial da logo, nao amostradas de pixel.
     Os dois motivos entram em data URI: funcionam em file://, print e PDF
     (playbook 15.1). mark-full = contorno das tres barras (o "E" modular);
     mark-band = UMA barra mais o vao na proporcao medida da marca, que tileia;
     mark-solid = o simbolo cheio, para uso miudo (a 1em o contorno some). */
  --mark-full: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAACWCAYAAADe3WqbAAAC8ElEQVR42u3dP24TQRjG4XdiK5E4QRSJComWBil3oOEg9NyEhiq5A+IOSDS0tCjhAmmC/3wU3rWWxbINNgqKnqdxEqUa/TTeROP5WlVV4ADT0feVZGFZ2GGSpPXfNDsRx9qJqivrW5JP3dfiYqzv4jLJ03U3tTLrXq+tE7tU1fWwm/Ez0WlVTbodam652PDONU9yuvXBurW2qKrWWvOAzXgHal0fvzzqnFgaDiUiRISIEBGICBEhIkQEIkJEiAgRgYgQESJCRCAiRISIEBGICBEhIkQEIkJEiIg87pvSWncryMTlV2zQd9G2RTTrbgNxIwibLJKkqmbjnacGN6XdJvnipjSy/aa0F0ku+m5aVS1HvwT7qOHbmXD4211pHdF368FBNVXVE8sAPPhO5JkIAAAAAMgx/tk4tQzAg+9E7y0Dh0bkBCM5xjjG4UEjnwBhl2UGJxvHO9EiyX0Xkh2KTacZl0nOkkzGn/aYd19/SPImq0GxBgmz6Z3rR5J3SV733Yz/vL9rrd1YK7J9oPDdts+dTarqxEhzdjxDT3aNNF9W1bK1trRmjHagZdeHkebEhQ6ICBGBiBARIkJEICJEhIgQEYgIESEiRAQiQkSICBGBiBARIkJEICJEhIiIadQQ06jJv5pGPR3N8zyvqsusLrkSEr/tRFldcnU+7MbFnxz94s+KuxrJXnc3NlcQc9Sd6K1lAAyIAQAAAADyKP7Z6HQj8PA70TPLwKERzSwDxx5p7lgs2eOYbIbnifrT+/3rxBqxh3U308GY6pMkX5N87OIyvpNs+JziPMmrJM/X3dTKrHu9sk7sMQv2atjN+EDaWfcz06jJlg92nO2aRj2vqrTWRMR4B0rXh2nUuNABESEiEBEiQkSICESEiBARIgIRISJEhIhARIgIESEiEBEiQkSICESEiBARIoIYaU6MNCf/70jz/s7Gvq7bJJ+7K/fsRGTDAOFFkpdJLvpuDBLm6M9Eibsa+cM/yKZJ7q0Jh/gJi4M3PA2POkMAAAAASUVORK5CYII=');
  --mark-band: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAmCAYAAAAmy2KXAAAAyklEQVR42u3cwWkCQRTH4Tc6ZjEELMMyJE1Yg515sAixi5QRCAjqrC8N7IK74O377u/y53eY05Tbz/43YMgiWnzVVfw9Dt32dMzzrpbvS3vltH6slxsLMqjPjM9ViWvfTT2t0TItyKASLVrWiJLTwypRLMhoWjP7WNiO9zzPQFgIC2GBsBAWwgJhISyEBcJCWAgLhIWwEBYIC2EhLBAWwkJYICyEhbBAWAgLYYGwEBbCglmqb9cYlfO/5at9n82CjGhxf5Zl5nPq4T81XSNilltmmQAAAABJRU5ErkJggg==');
  --mark-solid: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAACWCAYAAADe3WqbAAABmElEQVR42u3dMUoDURSF4fvCQ1IJZgu6CLFxGXZZhggp3IebcRs21laCltGRa2OT+gjTfB9kA4efITCPN2N3/dAFgY0JEBEiQkQgIkSEiBARiAgRISJEBCJCRIgIEYGIEBEiQkQgIkSEiBARiAgRISJEBCJCRIgIEYGIEBEiQkQgIv7frGq3xxJGNOYwA1FE3cubGYgi2n5vr8wArGr8/QAAAAAAIqOfb6cZgJWfRK93T2Ygi+h971AalR1K+/xazEB4PLb8saYc1EdEiAgRgYgQESJCRCZARIgIEYGIEBEiQkQgIkSEiBARiAgRISJEBCJCRIgIEYGIEBEiQkQgIkSEiBAR1OmdjV0u/iSM6OLMxZ+EEX0c780A1Lo36rcPxAAAAAAAuVH16E0+sPKT6PzmcGkGEnP+LC9mIDsKMjZewJJ+jbrbDKSfNB9moBzUR0SICBGBiBARIkJEICJEhIhARIgIESEiEBEiQkSICESEiBARIgIRISJEhIhARIgIESEiEBEiQkSICOr0zkZXNhJG1N1HM5D4BdfxJeL4QhuSAAAAAElFTkSuQmCC');

  /* estamparia do kit (a mesma dos posts): entra por mask, herda a cor do
     contexto, e serve tanto na dobra clara quanto na escura. */
  --pat-pauta: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAHgCAYAAAB91L6VAAAEIElEQVR42u3ZS41FMQxEwc6HWJiFud9yGFhzlSoIZ2O1nAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/2aiqJQMAAABPLOAjAwD0H+CSAQB6TQkAoN9OcmUAAAAgL/yAtwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8xaiqJQMAAABPLOAjAwD0H+CSAQB6TQkAoN9OcmUAAAAgL/yAtwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8xaiqJQMAAABPLOAjAwD0H+CSAQB6TQkAoN9OcmUAAAAgL/yAtwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8xaiqJQMAAABPLOAjAwD0H+CSAQB6TQkAoN9OcmUAAAAgL/yAtwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8xaiqJQMAAABPLOAjAwD0H+CSAQB6TQkAoN9OcmUAAAAgL/yAtwwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPDnB25/RNqmV+RmAAAAAElFTkSuQmCC');

  --brand: #133979; --brand-2: #FFDE59; --brand-air: #84AAEC;
  --brand-soft: #1339791a;

  /* --- DECISAO DE PROJETO: o acento da dobra escura e o AMARELO -----------
     A marca da Evora e azul-marinho e SOME na dobra escura (playbook, "cor
     da marca escura"). O kit oferece o brand_claro (#84AAEC) como acento,
     mas sobre marinho ele le como "tech", nao como acabamento. O acento
     passa a ser o AMARELO da propria marca, que e cor oficial e nao invencao.
     O #84AAEC (--brand-air) fica nos fios finos, tints e estados. */
  --brand-light: #FFDE59;

  --radius-btn: 0px; --radius-card: 0px;   /* medido no icone: barras retas */

  /* Marca */
  --color-primary: #133979;
  --color-primary-strong: #0D2856;
  --color-primary-soft: #EAF0FB;

  /* Institucional / superficies */
  --color-ink: #061123;
  --color-ink-2: #0C1E3E;
  --color-ink-3: #1B4A97;
  --color-graphite: #26324A;
  --color-slate: #4A5568;

  /* Neutras */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F7F6F5;
  --color-bg-mute: #EDEEF2;
  --color-line: #E6E2E1;
  --color-text: #111A2B;
  --color-text-mute: #4A5568;
  --color-on-dark: #EAEFF8;
  --color-on-dark-mute: #B9C6E0;

  /* Acento luxo: o amarelo da marca, nao um dourado de fora da paleta */
  --color-gold: #E8C63C;

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

  /* Header fixo, mais alto que o da Evora: a logo da Evora e EMPILHADA */
  --header-h: 104px;

  /* Tipografia do kit */
  --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 */
  --shadow-sm: 0 4px 14px rgba(6, 17, 35, 0.07);
  --shadow: 0 12px 40px rgba(6, 17, 35, 0.12);
  --shadow-lg: 0 24px 60px rgba(6, 17, 35, 0.18);
  --shadow-accent: 0 16px 40px rgba(19, 57, 121, 0.26);

  /* 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 reto(s), ver camada Evora no fim do arquivo usam
   clip-path (não dependem de border-radius).
   ========================================================================== */
*, *::before, *::after { border-radius: var(--radius-btn, 5px); }

/* Marcador/ícone reto(s), ver camada Evora no fim do arquivo da marca (pointy-top, igual à logo) */
.hex {
}

::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(9,24,48, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 10px 18px;
  margin-bottom: 22px;
  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; }
}

/* 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);
  opacity: .85;
}

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

/* TODOS os botões têm pontas RETAS (ver camada Evora no fim do arquivo) (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;
  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 reto(s), ver camada Evora no fim do arquivo (::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 reto(s), ver camada Evora no fim do arquivo
   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;
  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: #E6E2E1; }

/* 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, #0C1E3E 0%, #061123 60%, #0A1A33 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%, #FFE98C 50%, var(--color-primary) 70%, transparent);
  opacity: 0.8;
}
.site-header.is-solid {
  background: linear-gradient(115deg, rgba(16,42,84,0.92) 0%, rgba(11,30,62,0.94) 60%, rgba(8,22,45,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;
  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 reto(s), ver camada Evora no fim do arquivo (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(9,24,48, 0.90) 0%, rgba(9,24,48, 0.70) 34%, rgba(9,24,48, 0.30) 66%, rgba(9,24,48, 0.18) 100%),
    linear-gradient(180deg, transparent 45%, rgba(9,24,48, 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(9,24,48, 0.88) 0%,
        rgba(9,24,48, 0.74) 34%,
        rgba(9,24,48, 0.30) 60%,
        rgba(9,24,48, 0.20) 78%,
        rgba(9,24,48, 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 RETO (ver camada Evora no fim do arquivo) (borda reto(s), ver camada Evora no fim do arquivo, não quadrada) */
.hero__cue-chevron {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 35px;
  background: rgba(101,146,224, 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(101,146,224, 0.42));
  animation: sealPulse 3.6s var(--ease) infinite alternate;
}
@keyframes sealPulse {
  from { filter: drop-shadow(0 6px 18px rgba(101,146,224, 0.30)); }
  to   { filter: drop-shadow(0 6px 30px rgba(101,146,224, 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(101,146,224,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(101,146,224, 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(101,146,224, 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(101,146,224, 0.4);
  background: rgba(101,146,224, 0.06);
}
.offer__card--featured {
  background: linear-gradient(160deg, rgba(101,146,224, 0.12), rgba(101,146,224, 0.02));
  border-color: rgba(101,146,224, 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(101,146,224,0.45);
  background: rgba(101,146,224,0.06);
}
.financing__card--featured { border-color: rgba(101,146,224,0.4); background: linear-gradient(180deg, rgba(101,146,224,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);
}
.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));
  filter: drop-shadow(0 24px 46px rgba(6,17,35, 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;
}
.experts__caption {
  position: absolute;
  left: 18px; right: 18px; bottom: 20px;
  z-index: 2;
  background: rgba(6,17,35, 0.88);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 15px 30px;
  border-radius: 0;
  /* Pontas reto(s), ver camada Evora no fim do arquivo nas laterais (igual aos botões da marca) */
  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 reto(s), ver camada Evora no fim do arquivo 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);
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(101,146,224,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(6,17,35, 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(6,17,35, 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(101,146,224,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(11,30,62,0.11);
  border-color: rgba(101,146,224,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 reto(s), ver camada Evora no fim do arquivo 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;
  box-shadow: 0 10px 24px rgba(101,146,224,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(101,146,224,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(101,146,224,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;
  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(101,146,224,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(101,146,224,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(11,30,62,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(101,146,224,0.4);
  box-shadow: 0 14px 32px rgba(11,30,62,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(101,146,224,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(101,146,224,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(101,146,224,0.16); }
  50%      { box-shadow: 0 22px 56px rgba(101,146,224,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(101,146,224,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;
}
.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;
}
.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;
}
.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(101,146,224, 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(101,146,224, 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(101,146,224, 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: #98A2B3; }
.form__field input:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(101,146,224, 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(101,146,224, 0.12);
  color: var(--color-ink);
  border: 1px solid rgba(101,146,224, 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;
  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);
}
.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: #98A2B3; }
.form-group input:focus, .form-group select:focus {
  outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(101,146,224,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: #E6E2E1; 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 RETO (ver camada Evora no fim do arquivo) — 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(101,146,224,0.5));
}
.hex-divider::after { transform: scaleX(-1); }
.hex-divider__mark {
  width: 18px; height: 20px;
  background: var(--color-primary);
  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: #0A1A33;
  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(101,146,224,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 reto(s), ver camada Evora no fim do arquivo (vazado) */
.dev-badge {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  background: var(--color-primary);
  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: #0A1A33;
  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(6,17,35, 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(8,22,45,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: #98A2B3; 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;
  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(101,146,224,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 HERDADA DA PROJEX (base do clone)
   O simbolo da Evora e um P isometrico 3D: nao da pra descrever em polygon,
   entao ele entra como MASCARA (--mark-full) e a crista do telhado como
   faixa tileavel (--mark-band). Substitui a gramatica reto(s), ver camada Evora no fim do arquivo 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(101,146,224, .45)); }

/* ==========================================================================
   DOBRAS HERDADAS DA PROJEX (base do clone)
   O Romualdo é construção financiada e tem foto de obra; a Evora é 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(101,146,224, .20), transparent 62%),
    linear-gradient(155deg, var(--color-ink) 0%, var(--color-ink-2) 58%, #12305F 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 Evora 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(6,17,35,.95) 0%, rgba(6,17,35,.88) 42%, rgba(6,17,35,.52) 72%, rgba(6,17,35,.42) 100%),
    linear-gradient(180deg, rgba(6,17,35,.72) 0%, transparent 34%, rgba(6,17,35,.60) 100%);
}
.hero--photo::after { opacity: .05; }

/* Célula da galeria em 4:5 (>= 0.80): o acervo da Evora é retrato de celular
   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(101,146,224,.30), transparent 58%),
    radial-gradient(80% 120% at 92% 30%, rgba(19,57,121,.42), transparent 62%),
    radial-gradient(70% 110% at 50% 108%, rgba(160,192,244,.20), transparent 60%),
    linear-gradient(150deg, var(--color-ink) 0%, #0C1E3E 55%, #12305F 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(101,146,224,.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(6,17,35,.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(101,146,224,.34), transparent 60%),
    radial-gradient(65% 130% at 92% 100%, rgba(160,192,244,.26), transparent 62%),
    linear-gradient(120deg, var(--color-ink) 0%, #12305F 48%, #1B4A97 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(101,146,224,.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(101,146,224,.16) 0%, rgba(160,192,244,.26) 50%, rgba(101,146,224,.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(101,146,224,.42); }
  55%      { box-shadow: 0 0 0 14px rgba(101,146,224,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(101,146,224,.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(4,12,26,.97) 0%,
      rgba(4,12,26,.94) 38%,
      rgba(4,13,27,.82) 58%,
      rgba(5,14,30,.55) 78%,
      rgba(5,14,30,.42) 100%),
    linear-gradient(180deg, rgba(4,12,26,.80) 0%, rgba(4,12,26,.30) 34%, rgba(4,12,26,.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: #EAEFF8; font-size: clamp(1.02rem, 1.22vw, 1.14rem); line-height: 1.68;
  text-shadow: 0 1px 12px rgba(4,12,26,.85);
}
.hero__headline { text-shadow: 0 2px 20px rgba(4,12,26,.75); }
.hero--photo .hero__headline .accent { color: var(--brand-light); }
.hero--photo .eyebrow--badge {
  background: rgba(4,12,26,.86); color: #EAEFF8;
  border: 1px solid rgba(160,192,244,.34);
}
.hero__cue { color: #DDE5F4; text-shadow: 0 1px 10px rgba(4,12,26,.8); }

/* 4. o botão fantasma precisa de borda para existir sobre foto */
.hero--photo .btn--ghost-light {
  border: 1.5px solid rgba(160,192,244,.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(4,12,26,.97) 0%,
      rgba(4,12,26,.96) 46%,
      rgba(4,12,26,.93) 64%,
      rgba(4,13,27,.72) 80%,
      rgba(5,14,30,.48) 100%),
    linear-gradient(180deg, rgba(4,12,26,.80) 0%, rgba(4,12,26,.34) 34%, rgba(4,12,26,.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(4,12,26,.94) 0%,
      rgba(4,12,26,.90) 40%,
      rgba(4,12,26,.72) 56%,
      rgba(4,13,27,.34) 74%,
      rgba(5,14,30,.16) 100%),
    linear-gradient(180deg, rgba(4,12,26,.62) 0%, rgba(4,12,26,.16) 36%, rgba(4,12,26,.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(4,11,24,.80) 0%, rgba(4,11,24,.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(101,146,224,.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(4,12,26,.55), 0 0 0 1px rgba(160,192,244,.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(101,146,224,.30), transparent 58%),
    radial-gradient(80% 120% at 92% 30%, rgba(19,57,121,.42), transparent 62%),
    radial-gradient(70% 110% at 50% 108%, rgba(160,192,244,.20), transparent 60%),
    linear-gradient(150deg, var(--color-ink) 0%, #0C1E3E 55%, #12305F 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(4,12,26,.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: #040C1A;
  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(101,146,224,.50), transparent 62%),
    radial-gradient(28% 32% at 82% 22%, rgba(160,192,244,.34), transparent 64%),
    radial-gradient(34% 38% at 62% 84%, rgba(19,57,121,.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(160,192,244,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,192,244,.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(101,146,224,.22) 0%, rgba(19,57,121,.14) 46%, rgba(4,13,27,.72) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(3,8,18,.45);
}
.escopo--mesh .escopo__card:nth-child(3n+2) {
  background: linear-gradient(158deg, rgba(160,192,244,.22) 0%, rgba(101,146,224,.12) 48%, rgba(4,13,27,.72) 100%);
}
.escopo--mesh .escopo__card:nth-child(3n+3) {
  background: linear-gradient(158deg, rgba(19,57,121,.30) 0%, rgba(101,146,224,.10) 50%, rgba(4,13,27,.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(3,8,18,.6),
              0 0 0 1px rgba(160,192,244,.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(4,11,24,.92) 0%, rgba(4,11,24,.86) 46%, rgba(4,12,26,.66) 78%, rgba(4,13,27,.52) 100%),
    linear-gradient(180deg, rgba(4,12,26,.72) 0%, rgba(4,12,26,.34) 38%, rgba(4,12,26,.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(101,146,224,.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(4,10,22,.72) 0%, rgba(4,10,22,.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(4,10,22,.50) 0%, rgba(4,10,22,.42) 52%, rgba(4,11,24,.30) 80%, rgba(4,12,26,.26) 100%),
    linear-gradient(180deg, rgba(4,11,24,.58) 0%, rgba(4,11,24,.10) 34%, rgba(4,11,24,.52) 100%);
}
.hero--photo .hero__overlay::after {
  background: radial-gradient(34% 44% at 50% 40%, rgba(101,146,224,.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(3,9,20,.90) 0%, rgba(3,9,20,.62) 58%, transparent 100%),
    radial-gradient(46% 34% at 50% 74%, rgba(3,9,20,.80) 0%, rgba(3,9,20,.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(3,9,20,.92), 0 0 34px rgba(3,9,20,.7); }
.hero--flat .hero__sub { text-shadow: 0 1px 8px rgba(3,9,20,.95), 0 0 22px rgba(3,9,20,.75); }
.hero__cue { text-shadow: 0 1px 8px rgba(3,9,20,.9); }
.hero--photo .eyebrow--badge { background: rgba(4,10,22,.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(3,8,18,.95) 0%, rgba(3,8,18,.78) 56%, transparent 100%),
    radial-gradient(44% 32% at 50% 73%, rgba(3,8,18,.88) 0%, rgba(3,8,18,.56) 62%, transparent 100%);
  filter: blur(26px);
}
.hero--photo .eyebrow--badge { background: rgba(3,9,20,.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(3,8,18,.98) 0%, rgba(3,8,18,.86) 58%, transparent 100%),
    radial-gradient(44% 33% at 50% 73%, rgba(3,8,18,.90) 0%, rgba(3,8,18,.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(3,8,18,.97) 0%, rgba(3,8,18,.84) 62%, transparent 100%),
    radial-gradient(48% 34% at 50% 74%, rgba(3,8,18,.90) 0%, rgba(3,8,18,.58) 64%, transparent 100%);
}


/* ==========================================================================
   CAMADA DE IDENTIDADE EVORA
   O simbolo da Evora sao TRES BARRAS empilhadas (um "E" modular). Nao ha
   versao horizontal da logo e nao se remonta lockup deitado (kit, LEIA-ME).
   Esta camada vem por ultimo e vence a base clonada da Projex.
   ========================================================================== */

/* --- 1. Marcador miudo = o simbolo CHEIO ----------------------------------
   A 1em o --mark-full (contorno erodido) cai abaixo de 1px e o marcador some,
   lendo como caixa vazia (kit, nota do Zgrada). Todo marcador pequeno passa a
   usar --mark-solid; o --mark-band fica so onde ele TILEIA (regua e divisoria). */
.eyebrow::before,
.offer__list li::before,
.marquee__item figcaption::before,
.gestao__list li::before,
.financing__specs li::before {
  -webkit-mask-image: var(--mark-solid);
  mask-image: var(--mark-solid);
}
.eyebrow::before { width: 1.05em; height: 1.05em; }
.marquee__item figcaption::before { width: 12px; height: 12px; }
.offer__list li::before, .gestao__list li::before { width: 16px; height: 16px; }

/* --- 2. Marca d'agua do card: o simbolo e quase quadrado (794x817) -------- */
.escopo__mark { width: 108px; height: 111px; right: -14px; bottom: -16px; }

/* --- 3. Botao de acento = AMARELO da marca, texto ink --------------------
   O degrade herdado ia de amarelo a marinho e o rotulo ink sumia no meio do
   botao. O acento vira o amarelo cheio, que e o que a marca tem de luminoso. */
.btn--accent, .site-header__cta {
  background-image: linear-gradient(96deg, #E8C63C 0%, #FFDE59 38%, #FFF0A8 60%, #FFDE59 100%);
  color: #061123;
}
.btn--accent::before, .site-header__cta::before { background: transparent; }
.btn--accent:hover, .site-header__cta:hover { color: #061123; }

/* --- 4. Setas da galeria: marinho com seta BRANCA -------------------------
   Na base era marinho com seta ink (quase preto sobre azul-escuro). */
.marquee__nav { background: var(--brand); color: #FFFFFF; }
.marquee__nav:hover { background: var(--brand-2); color: #061123; }

/* --- 5. Numeros da statbar: o degrade terminava em marinho e sumia no
       fundo marinho da propria dobra. Termina no amarelo palido. ---------- */
.statbar__num {
  background: linear-gradient(96deg, #FFFFFF 0%, #FFDE59 46%, #FFF0A8 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 16px rgba(19,57,121,.45));
}

/* --- 6. Header: a logo e EMPILHADA, entao ela precisa de altura ----------- */
.site-header__brand img { height: 76px; filter: none; }
@media (max-width: 900px) { .site-header__brand img { height: 58px; } }
@media (max-width: 420px) { .site-header__brand img { height: 50px; } }
.site-footer__logo img { width: clamp(112px, 11vw, 138px); filter: none; }

/* --- 7. Foco visivel na cor da marca (o outline herdado era ciano) -------- */
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }

/* --- 8. Fio de luz das dobras escuras: amarelo com o azul-claro do kit ---- */
.brand-wire::before, .statbar::before {
  background: linear-gradient(90deg, transparent, var(--brand-air) 18%, var(--brand-2) 50%, var(--brand-air) 82%, transparent);
  background-size: 220% 100%;
}

/* --- 9. Regua sob o titulo: a barra da marca, na cor certa de cada fundo -- */
.section-title::after { background: var(--brand); }
.section-title--light::after { background: var(--brand-2); }

/* --- 10. Cartao de escopo: borda reta e realce amarelo no hover ----------- */
.escopo__card { border-radius: 0; }
.escopo__glow { background: radial-gradient(60% 100% at 30% 0%, rgba(255,222,89,.42), transparent 70%); }

/* --- 11. Chips e selos que herdaram raio da Projex ------------------------ */
.eyebrow--badge, .experts__placeholder-tag, .trust-item, .site-nav a,
.form-card, .lead-popup__card, .objection, .step, .diff__card, .gestao__aside {
  border-radius: 0;
}

/* ==========================================================================
   CAMADA EVORA v2 — o que o primeiro render mostrou
   ========================================================================== */

/* --- 12. O anel de pulso do botao cobria o proprio botao ------------------
   .btn--accent::after tem z-index -2 mas o .btn--accent tem isolation:isolate,
   entao o pseudo pinta ACIMA do background do elemento. Com o anel em marinho
   a 55%, o amarelo virava caqui. Corpo e anel passam a ser amarelos. */
.btn--accent::before { background: linear-gradient(96deg, #E8C63C 0%, #FFDE59 40%, #FFF0A8 62%, #FFDE59 100%); }
.btn--accent::after  { background: #FFDE59; }
.btn--accent:hover::before { background: linear-gradient(96deg, #FFDE59 0%, #FFF0A8 50%, #FFDE59 100%); }
.btn--accent:hover, .site-header__cta:hover { color: #061123; }

/* --- 13. Sublinhado do acento: amarelo onde o fundo e escuro -------------- */
.hero--photo .hero__headline .accent,
.section-title--light .accent { color: var(--brand-2); }
.hero--photo .hero__headline .accent::after,
.section-title--light .accent::after { background: var(--brand-2); opacity: .9; }

/* --- 14. Marcador do eyebrow: amarelo no escuro, marinho no claro --------- */
.eyebrow--light::before, .eyebrow--badge::before { background: var(--brand-2); }
.eyebrow--dark::before { background: var(--brand); }

/* --- 15. Lousa das dobras escuras: o brilho de atmosfera e AZUL -----------
   Amarelo em area grande sobre marinho vira caqui. O amarelo fica no que e
   fino e nitido (fio, regua, numero, botao); a atmosfera fica no azul do kit. */
.escopo__glow { background: radial-gradient(60% 100% at 30% 0%, rgba(101,146,224,.55), transparent 70%); }

/* --- 16. Eyebrow em dobra escura: a Projex usava o ciano da marca, que era
       claro. O marinho da Evora some no fundo escuro. ---------------------- */
.eyebrow--light { color: var(--color-on-dark); }
.eyebrow--badge .eyebrow__dot, .eyebrow--badge::before { background: var(--brand-2); }

/* --- 17. Regua sob o titulo = a BARRA da marca, cheia --------------------
   Mascarada com o --mark-band em 46px, ela saia como "duas barrinhas e um
   vao", que le como falha de render e nao como motivo. O kit define a regua
   como barra solida (tokens.css); e ela que vale. */
.section-title::after {
  -webkit-mask: none; mask: none;
  width: 52px; height: 4px;
}

/* --- 18. Divisoria entre dobras: barra da marca CENTRADA -----------------
   Full-bleed, o motivo tileado virava faixa de codigo de barras atravessando
   a pagina inteira. Centrada e curta, ele volta a ler como assinatura. */
.hex-divider { display: flex; align-items: center; justify-content: center; height: 46px; }
.hex-divider__mark {
  width: 30px; height: 31px; opacity: .5; background: var(--brand);
  -webkit-mask: var(--mark-solid) center/contain no-repeat;
  mask: var(--mark-solid) center/contain no-repeat;
}

/* ==========================================================================
   CAMADA EVORA v3 — rodada de ajustes do Thalisson (01/09/2026)
   ========================================================================== */

/* --- 19. Hero sem sombra atras do texto ----------------------------------
   O contraste passa a vir SO do veu, que ficou mais fechado na faixa do
   texto. Sombra em titulo grande engorda o traco e suja a Jost. */
.hero__headline, .hero--flat .hero__sub, .hero__cue { text-shadow: none; }
.hero--photo .hero__bg img { filter: saturate(.9) contrast(.95) brightness(.62); }
.hero--photo .hero__overlay {
  background:
    radial-gradient(76% 78% at 50% 44%, rgba(4,11,24,.94) 0%, rgba(4,11,24,.88) 48%,
                    rgba(6,17,35,.72) 76%, rgba(6,17,35,.60) 100%),
    linear-gradient(180deg, rgba(4,11,24,.82) 0%, rgba(4,11,24,.44) 34%, rgba(4,11,24,.80) 100%);
}
.hero--photo .hero__overlay::after { opacity: .28; }

/* --- 20. Sublinhado do acento COLADO na palavra --------------------------
   Era um ::after absoluto: ficava longe do glifo e, quando o acento quebrava
   em duas linhas, saia uma risca so, atravessada. Vira fundo do proprio
   texto, que acompanha cada linha e encosta na palavra sem tocar a de baixo. */
.hero__headline .accent::after,
.section-title .accent::after,
.lead-popup__title .accent::after { content: none; }
.hero__headline .accent,
.section-title .accent,
.lead-popup__title .accent {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% .075em;
  background-position: 0 calc(1em + .06em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .1em;
}
.section-title, .hero__headline { line-height: 1.24; }

/* --- 21. Regua de autoridade: sem degrade animado, cor mais fechada ------- */
.statbar {
  animation: none;
  background: linear-gradient(140deg, #0A1A33 0%, #12305F 52%, #0C1E3E 100%);
  background-size: auto;
}
.statbar::before { animation: none; opacity: .8; }
.statbar__num {
  animation: none; filter: none;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #FFFFFF; -webkit-text-fill-color: #FFFFFF;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);   /* era ate 4.2rem: destacava demais */
  font-weight: 600;
}
.statbar__num small { color: var(--brand-2); -webkit-text-fill-color: var(--brand-2); }
.statbar__item::before { width: 38px; height: 3px; opacity: .95; }
.statbar__label { color: #C9D6EE; font-size: .97rem; }

/* --- 22. Passo a passo: numero fantasma maior e card cheio ---------------- */
.steps { align-items: stretch; }
.step { display: flex; flex-direction: column; height: 100%; }
.step__text { flex: 1 1 auto; }
.step__ghost {
  font-size: clamp(4.2rem, 6.4vw, 6.2rem);
  line-height: .82; opacity: .16; top: 14px; right: 18px;
}

/* --- 23. Cards de escopo: a marca no canto SUPERIOR DIREITO, na diagonal -- */
.escopo__mark {
  top: -16px; right: -14px; bottom: auto; left: auto;
  width: 96px; height: 99px;
  transform: rotate(-18deg);
  transform-origin: top right;
}
.escopo--mesh .escopo__mark { opacity: .20; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .34; transform: rotate(-18deg) scale(1.06); }
.escopo__card { overflow: hidden; }

/* --- 24. Quem responde: texto a esquerda, retrato a direita --------------- */
.experts--retrato-direita .experts__inner {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; max-width: var(--container); margin-inline: auto; text-align: left;
}
.experts--retrato-direita .experts__photo {
  position: relative; margin: 0; order: 2;
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-bg-mute);
}
.experts--retrato-direita .experts__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
}
.experts__photo-tag {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-family: var(--font-display); font-weight: 500;
  font-size: .95rem; color: #fff;
  background: linear-gradient(180deg, rgba(6,17,35,0), rgba(6,17,35,.86) 46%);
}
.experts__photo-seal {
  width: 15px; height: 15px; flex: none; background: var(--brand-2);
  -webkit-mask: var(--mark-solid) center/contain no-repeat;
  mask: var(--mark-solid) center/contain no-repeat;
}
@media (max-width: 900px) {
  .experts--retrato-direita .experts__inner { grid-template-columns: 1fr; }
  .experts--retrato-direita .experts__photo { order: 2; max-width: 420px; }
}

/* --- 25. Indicador de etapas do formulario: os numeros somiam ------------- */
.steps-indicator .step-circle {
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,222,89,.55);
  color: #FFFFFF; font-weight: 700;
}
.steps-indicator .step-circle.active,
.steps-indicator .step-circle.complete { background: var(--brand-2); color: #061123; border-color: var(--brand-2); }
.steps-indicator .step-label { color: #E7EDF9; font-weight: 500; }
.steps-indicator .step-connector { background: rgba(255,255,255,.22); }
.steps-indicator .step-connector-fill { background: var(--brand-2); }

/* --- 26. Selo da M2 Black vira BOTAO -------------------------------------- */
.site-footer__dev { margin-top: 22px; }
.dev-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; text-decoration: none;
  font-family: var(--font-display); font-size: .86rem; letter-spacing: .04em;
  color: #E7EDF9; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  transition: background var(--t), border-color var(--t), transform var(--t-fast), color var(--t);
}
.dev-btn__label { opacity: .72; font-weight: 400; }
.dev-btn__marca { font-weight: 700; letter-spacing: .10em; }
.dev-btn svg { width: 15px; height: 15px; opacity: .7; }
.dev-btn:hover {
  background: rgba(255,255,255,.12); border-color: var(--brand-2);
  color: #fff; transform: translateY(-2px);
}
.dev-btn:hover svg { opacity: 1; }

/* --- 27. Barra de progresso de leitura visivel ---------------------------- */
.read-progress {
  height: 4px; background: linear-gradient(90deg, var(--brand-air), var(--brand-2) 60%, #FFF0A8);
  box-shadow: 0 0 12px rgba(255,222,89,.55); opacity: 1; z-index: 1000;
}

/* --- 28. A logo entra: os tres tracos, um a um, da esquerda para a direita
       As 4 camadas sao fatias do MESMO canvas, empilhadas por absolute, entao
       nenhuma peca e reposicionada (o kit proibe remontar lockup). A camada
       de medida segura o tamanho e volta a aparecer com "reduzir movimento". */
.marca-anim { position: relative; display: inline-block; line-height: 0; }
.marca-anim__medida { display: block; opacity: 0; }
.marca-anim__parte {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: marcaEntra .66s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--ordem) * .17s);
}
@keyframes marcaEntra {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marca-anim__medida { opacity: 1; }
  .marca-anim__parte { display: none; }
}

/* --- 29. v3.1: o que o render mostrou ------------------------------------- */

/* O anel de pulso do botao virou moldura: com o hero mais escuro ele deixou
   de ser "brilho" e passou a ler como borda dupla. O botao amarelo ja salta
   sozinho no marinho, entao o anel sai. */
.btn--accent::after { display: none; }
.btn--accent, .site-header__cta { animation-name: btnFlow; }

/* A foto que o cliente escolheu e grafica e clara: com brightness .62 ela
   virava um borrao preto. Sobe a luz e o veu fecha so onde o texto mora. */
.hero--photo .hero__bg img { filter: saturate(.92) contrast(1.02) brightness(.86); }
.hero--photo .hero__overlay {
  background:
    radial-gradient(64% 66% at 50% 44%, rgba(4,11,24,.90) 0%, rgba(4,11,24,.80) 46%,
                    rgba(6,17,35,.50) 74%, rgba(6,17,35,.34) 100%),
    linear-gradient(180deg, rgba(4,11,24,.74) 0%, rgba(4,11,24,.30) 36%, rgba(4,11,24,.72) 100%);
}

/* O sublinhado subiu demais e cortava o pe do "c" e do "g". Desce para o
   limite da caixa, com folga suficiente para nao tocar a linha de baixo. */
.hero__headline .accent,
.section-title .accent,
.lead-popup__title .accent {
  background-size: 100% .07em;
  background-position: 0 100%;
  padding-bottom: .14em;
}

/* --- 30. v3.2: a barra da regua de autoridade e VERTICAL ------------------
   O width/height que eu tinha posto virou traco horizontal em cima do numero.
   A barra volta a ser o filete vertical a esquerda do bloco, que e o motivo
   da marca aplicado no eixo certo. */
.statbar__item::before {
  width: 3px; height: auto; top: 4px; bottom: 4px; left: 0;
  position: absolute; order: 0; opacity: .95;
}

/* --- 31. v3.3: a marca no card de escopo -------------------------------
   Era o CONTORNO (--mark-full) grande e sangrando pela borda: lia como
   wireframe solto, e o playbook proibe simbolo cortado pela borda. Vira o
   simbolo CHEIO, menor, inteiro dentro do card e mais presente. */
.escopo__mark {
  top: 14px; right: 14px; bottom: auto; left: auto;
  width: 62px; height: 64px;
  transform: rotate(-16deg); transform-origin: center;
  -webkit-mask-image: var(--mark-solid); mask-image: var(--mark-solid);
}
.escopo--mesh .escopo__mark { opacity: .26; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .42; transform: rotate(-16deg) scale(1.08); }

/* --- 32. v3.4: respiro entre linhas e a regua do titulo centralizado ------
   1. Com o sublinhado colado na palavra, linha apertada faz a risca de uma
      linha encostar no topo da seguinte (foi o que reprovou em "quem responde
      tecnicamente"). 1.3 resolve sem inchar o titulo.
   2. Em dobra de titulo CENTRALIZADO a regua nascia colada a esquerda, logo
      abaixo do sublinhado do acento: lia como "a linha quebrou". */
.section-title, .hero__headline { line-height: 1.3; }
.form-head .section-title::after,
.gallery__head .section-title::after { margin-inline: auto; margin-top: 20px; }
.form-head .section-title, .lead-popup__title { line-height: 1.28; }

/* --- 33. v3.5: a coluna de texto de "quem responde" precisa caber o acento
       numa linha so, senao o sublinhado por linha volta a empilhar. */
.experts--retrato-direita .experts__inner { grid-template-columns: 1.16fr .84fr; }
.experts--retrato-direita .section-title { font-size: clamp(1.6rem, 2.7vw, 2.35rem); }

/* --- 34. v3.6: o CTA fixo tampava o fim do rodape -------------------------
   O botao "Desenvolvido por M2 BLACK" e a linha de copyright ficavam embaixo
   da barra verde fixa, em qualquer largura. O rodape ganha o respiro da
   altura da barra. */
.site-footer { padding-bottom: 132px; }
@media (max-width: 480px) { .site-footer { padding-bottom: 148px; } }

/* --- 35. v3.7: no celular a dobra de "quem responde" volta a UMA coluna ---
   A regra de 1.16fr/0.84fr foi escrita depois da media query e vencia dentro
   dela: a foto do Joao virava um selo de 24px ao lado do texto. */
@media (max-width: 900px) {
  .experts--retrato-direita .experts__inner { grid-template-columns: 1fr; }
  .experts--retrato-direita .experts__photo { width: 100%; max-width: 420px; }
}

/* --- 36. No celular o titulo e proporcionalmente maior, entao o sublinhado
       de uma linha chega perto da linha seguinte. Mais respiro. ----------- */
@media (max-width: 760px) {
  .hero__headline, .section-title { line-height: 1.36; }
}

/* --- 37. v3.8: a tarja do retrato ficava ATRAS da foto --------------------
   O CSS base da a `.experts__photo img` position:relative + z-index:1, entao
   a foto pintava por cima da legenda absoluta (o elementFromPoint no meio da
   tarja devolvia o IMG). A tarja sobe para z-index 2. */
.experts__photo-tag { z-index: 2; }

/* ==========================================================================
   CAMADA EVORA v4 — 2a rodada do Thalisson (01/09/2026)
   ========================================================================== */

/* --- 38. O veu do hero deixa de ser cortina preta -------------------------
   A queixa foi a "sombra preta" chapada. O escurecimento passa a vir do
   TRATAMENTO da foto (brightness/contraste), que le como foto escura, e o
   veu por cima fica leve, so o suficiente para o texto branco se sustentar. */
.hero--photo .hero__bg img { filter: saturate(1.06) contrast(1.06) brightness(.60); }
.hero--photo .hero__overlay {
  background:
    radial-gradient(70% 72% at 50% 46%, rgba(6,17,35,.52) 0%, rgba(6,17,35,.40) 52%,
                    rgba(6,17,35,.20) 80%, rgba(6,17,35,.10) 100%),
    linear-gradient(180deg, rgba(6,17,35,.46) 0%, rgba(6,17,35,.10) 38%, rgba(6,17,35,.48) 100%);
}
.hero--photo .hero__overlay::after { opacity: .18; }

/* --- 39. Sublinhado do acento: underline de verdade -----------------------
   O background-image ficava a distancia fixa da caixa e, para nao cortar o
   pe do "p" e do "c", precisava de folga, que e o "espacamento gigante" que
   reprovou. O underline nativo ancora na BASELINE e o skip-ink abre espaco
   sozinho onde o glifo desce. Cola na palavra sem cortar nada. */
.hero__headline .accent,
.section-title .accent,
.lead-popup__title .accent {
  background-image: none; padding-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .17em;
  text-decoration-skip-ink: auto;
}

/* --- 40. Uma linha por titulo: a regua sai onde ja existe o sublinhado ----
   Titulo com acento sublinhado MAIS a regua embaixo lia como risco duplo.
   Onde ha acento, o sublinhado ja e a assinatura; a regua so fica nos
   titulos sem acento. */
.section-title:has(.accent)::after { content: none; }

/* --- 41. Regua de autoridade: degrade animado, mais cor, unidade em amarelo
       "+5 anos", "+32 anos", "+2 engenheiros" numa linha so, com a unidade
       destacada; a descricao desce para o rotulo. */
.statbar {
  background:
    radial-gradient(64% 130% at 6% 0%,   rgba(101,146,224,.42), transparent 62%),
    radial-gradient(58% 120% at 96% 100%, rgba(255,222,89,.20), transparent 60%),
    radial-gradient(52% 110% at 52% 120%, rgba(132,170,236,.30), transparent 62%),
    linear-gradient(126deg, #061123 0%, #12305F 46%, #1B4A97 100%);
  background-size: 190% 190%, 180% 180%, 170% 170%, 100% 100%;
  animation: brandFlow 18s ease-in-out infinite alternate;
}
.statbar::before { animation: wireRun 5.5s linear infinite; opacity: .9; }
.statbar__num {
  display: flex; align-items: baseline; gap: .28em; flex-wrap: wrap;
  white-space: nowrap;
}
.statbar__un {
  font-family: var(--font-display); font-weight: 600;
  font-size: .46em; letter-spacing: .01em; color: var(--brand-2);
  -webkit-text-fill-color: var(--brand-2);
}
.statbar__label { color: #CFDCF4; }

/* --- 42. Cards de escopo: a marca sobe, gira mais e fica mais presente ---- */
.escopo__mark {
  top: -6px; right: 10px; width: 74px; height: 76px;
  transform: rotate(-32deg); transform-origin: center;
}
.escopo--mesh .escopo__mark { opacity: .40; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .58; transform: rotate(-32deg) scale(1.08); }

/* --- 43. v4.1 -------------------------------------------------------------
   1. O flex separava o "+" do numero ("+ 5"). O gap fica so entre o numero e
      a unidade.
   2. A marca do card subiu tanto que passou a ser CORTADA pela borda de cima.
      Simbolo sangrado le como erro de montagem (playbook 15.2), entao ela
      volta para dentro, ainda bem no alto e na diagonal. */
.statbar__num { gap: 0; }
.statbar__un { margin-left: .3em; }
.escopo__mark { top: 10px; right: 12px; }

/* ==========================================================================
   CAMADA EVORA v5 — 3a rodada do Thalisson (01/09/2026)
   ========================================================================== */

/* --- 44. HERO NO MOLDE DA ROCCAN -----------------------------------------
   A "sombra preta atras do H1" era um veu radial no centro, porque o texto
   estava centralizado: nao tem como escurecer o meio sem manchar o meio.
   O hero passa a ser como o da Roccan: TEXTO A ESQUERDA e veu DIRECIONAL de
   muitas paradas, forte na coluna do texto e abrindo ate quase nada do lado
   direito, onde a foto aparece. Somado a isso, a propria foto ja vem tratada
   de baixo contraste do _build-imagens.py, entao o veu nao precisa ser denso. */
.hero--flat .hero__content {
  text-align: left; max-width: min(1240px, 100%); margin-inline: auto;
}
.hero--flat .hero__headline { max-width: 17ch; margin-inline: 0; }
.hero--flat .hero__sub      { max-width: 56ch; margin-inline: 0; }
.hero--flat .eyebrow--badge { justify-content: flex-start; }
.hero--flat .hero__cta      { justify-content: flex-start; }
.hero--flat .hero__cue      { justify-content: flex-start; margin-inline: 0; }
.hero--flat .hero__cue::before { margin-inline: 0; }

.hero--photo .hero__bg img { filter: none; }   /* o tratamento e do arquivo */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(6,17,35,.94) 0%,
      rgba(6,17,35,.90) 24%,
      rgba(6,17,35,.76) 42%,
      rgba(6,17,35,.48) 58%,
      rgba(6,17,35,.26) 74%,
      rgba(6,17,35,.30) 100%),
    linear-gradient(180deg, rgba(6,17,35,.52) 0%, transparent 28%, transparent 68%, rgba(6,17,35,.62) 100%);
}
.hero--photo .hero__overlay::after { content: none; }   /* sem brilho pulsante */

/* --- 45. REGUA DE AUTORIDADE: degrade animado nos azuis do kit -----------
   Cinco paradas de azul da marca correndo na horizontal, visivel, mais a
   estamparia do kit por cima (a mesma dos posts). */
.statbar {
  background-image: linear-gradient(102deg,
    #061123 0%, #133979 22%, #1B4A97 40%, #2E63C8 52%, #1B4A97 64%, #133979 80%, #061123 100%);
  background-size: 320% 100%;
  background-position: 0% 50%;
  animation: reguaFlow 14s linear infinite;
}
@keyframes reguaFlow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 320% 50%; }
}
.statbar::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #FFFFFF; opacity: .07;
  -webkit-mask: var(--pat-pauta) left top/190px repeat;
  mask: var(--pat-pauta) left top/190px repeat;
}
.statbar > * { position: relative; z-index: 1; }

/* --- 46. Sem suspiro e sem logo entre a dobra de risco e a de escopo ------ */
.hex-divider { display: none; }

/* --- 47. A marca no card fica quase imperceptivel ------------------------- */
.escopo__mark { top: 6px; right: 12px; width: 66px; height: 68px; }
.escopo--mesh .escopo__mark { opacity: .085; }
.escopo--mesh .escopo__card:hover .escopo__mark { opacity: .16; transform: rotate(-32deg) scale(1.04); }

/* --- 48. Espaco entre palavras: fechar sem grudar ------------------------- */
.hero__headline, .section-title, .lead-popup__title,
.step__title, .escopo__body h3, .objection summary, .statbar__num { word-spacing: -.055em; }
body, .hero__sub, .section-lead, .step__text, .escopo__body p,
.experts__lead, .objection p, .statbar__label { word-spacing: -.015em; }
.eyebrow { letter-spacing: .13em; word-spacing: -.02em; }

/* --- 49. v5.1: a coluna do H1 estava estreita demais (5 linhas) ----------- */
.hero--flat .hero__headline { max-width: 21ch; }
.hero--flat { padding: calc(var(--header-h) + 52px) 0 56px; }

/* ==========================================================================
   CAMADA EVORA v6 — o hero copiado da Roccan de verdade
   Comparei os dois lado a lado: na Roccan a foto APARECE atrás do texto, o
   veu so abaixa o brilho. Aqui ela sumia porque eu somei duas coisas: a foto
   ja tratada de baixo contraste MAIS um veu de 90%. Um dos dois tinha que
   ceder, e quem cede e o veu. Paradas na mesma curva da Roccan, so que mais
   abertas, e o contraste do texto volta pela sombra difusa do titulo (que a
   Roccan tambem usa) em vez de por cortina.
   ========================================================================== */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(6,17,35,.82) 0%,
      rgba(6,17,35,.76) 24%,
      rgba(6,17,35,.60) 42%,
      rgba(6,17,35,.40) 58%,
      rgba(6,17,35,.22) 74%,
      rgba(6,17,35,.28) 100%),
    linear-gradient(180deg, rgba(6,17,35,.46) 0%, transparent 26%, transparent 68%, rgba(6,17,35,.56) 100%);
}
.hero--flat::after, .hero--photo::after { content: none; }   /* textura solta some */

/* a sombra do titulo e DIFUSA (24px de blur), nao mancha: e a mesma da Roccan */
.hero__headline { text-shadow: 0 2px 24px rgba(6,17,35,.55); }
.hero--flat .hero__sub { color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(6,17,35,.6); }
.hero__cue { text-shadow: 0 1px 12px rgba(6,17,35,.7); }

/* o eyebrow deixa de ser tarja preta e vira a pilula translucida da Roccan */
.hero--photo .eyebrow--badge {
  background: rgba(19,57,121,.34);
  border: 1px solid rgba(255,222,89,.42);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: none;
}
.hero--photo .eyebrow--badge::before { background: var(--brand-2); }

/* a copy nova e mais longa: a coluna abre um pouco */
.hero--flat .hero__headline { max-width: 24ch; }

/* --- 50. A marca d'agua da dobra escura vira ESTAMPARIA -------------------
   O simbolo entrava a 34% da largura da dobra: na do orcamento saiam tres
   retangulos gigantes no canto, que leem como caixa vazia e nao como marca.
   Troca pela estamparia do kit, a mesma da regua de autoridade e dos posts. */
.hex-texture::after {
  background: #FFFFFF; opacity: .05;
  -webkit-mask: var(--pat-pauta) left top/200px repeat;
  mask: var(--pat-pauta) left top/200px repeat;
}

/* --- 51. Enquadramento do hero, como o da Roccan -------------------------
   Lá o fundo é `center 32% / cover` com um `scale(1.04)`: o 32% sobe o corte
   para a altura em que a equipe aparece, e o scale de 4% tira a chance de
   borda branca em qualquer proporção de tela. */
.hero--photo .hero__bg img {
  object-position: center 32%;
  transform: scale(1.04);
}
@media (max-width: 760px) {
  .hero--photo .hero__bg img { object-position: center 30%; }
}

/* --- 52. O terco direito abre mais: e la que a equipe aparece -------------
   Na Roccan os dois alpinistas leem. Aqui o de baixo cai justamente onde o
   veu ainda estava em 22% e, com a foto dessaturada, ele sumia. */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(6,17,35,.90) 0%,
      rgba(6,17,35,.84) 24%,
      rgba(6,17,35,.64) 42%,
      rgba(6,17,35,.38) 58%,
      rgba(6,17,35,.16) 74%,
      rgba(6,17,35,.14) 100%),
    linear-gradient(180deg, rgba(6,17,35,.44) 0%, transparent 26%, transparent 70%, rgba(6,17,35,.56) 100%);
}

/* --- 53. Comparado com a Roccan lado a lado, a foto ainda vinha escura -----
   O veu vertical escurecia topo e base na LARGURA INTEIRA, inclusive no terco
   direito, onde a foto tem que aparecer. Ele passa a valer so no comeco e no
   fim, e mais fraco, e o veu lateral abre mais cedo. */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(6,17,35,.88) 0%,
      rgba(6,17,35,.80) 26%,
      rgba(6,17,35,.54) 44%,
      rgba(6,17,35,.26) 60%,
      rgba(6,17,35,.06) 76%,
      rgba(6,17,35,.04) 100%),
    linear-gradient(180deg, rgba(6,17,35,.34) 0%, transparent 22%, transparent 76%, rgba(6,17,35,.44) 100%);
}

/* --- 54. Enquadramento da foto nova: a torre e a fachada curva -----------
   A foto e 4:3 e o hero e bem mais deitado, entao o `cover` corta topo e base.
   O 44% mantem a torre e a curva do vidro no quadro, e deixa o letreiro do
   predio na altura da coluna de texto, onde o veu ja o abafa. */
.hero--photo .hero__bg img { object-position: center 44%; }
@media (max-width: 760px) { .hero--photo .hero__bg img { object-position: center 42%; } }

/* --- 55. O veu deixa de ser preto e vira AZUL DA MARCA -------------------
   Ate aqui o veu era o ink (#061123), que e quase preto: sobre a foto ele
   lia como mancha escura, nao como camada de marca. Passa a ser o brand
   (#133979) puxando para um marinho profundo so na borda esquerda, onde o
   texto mora. E fica mais transparente: o pico cai de 88% para 78% e o resto
   da escala desce junto. Azul da marca sobre vidro azul-claro e ceu CONTRASTA,
   preto sobre foto so apaga. */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(11,32,74,.80) 0%,
      rgba(15,44,100,.70) 26%,
      rgba(19,57,121,.46) 44%,
      rgba(19,57,121,.22) 60%,
      rgba(19,57,121,.06) 78%,
      rgba(19,57,121,.02) 100%),
    linear-gradient(180deg, rgba(11,32,74,.26) 0%, transparent 20%, transparent 78%, rgba(11,32,74,.34) 100%);
}

/* --- 56. Sem veu nenhum sobre a foto (pedido do Thalisson) ---------------
   A foto entra limpa. O contraste do texto passa a depender so do que a
   imagem oferece naquela regiao; medido logo abaixo. */
.hero--photo .hero__overlay { display: none; }

/* ==========================================================================
   CAMADA EVORA v7 — sombra preta ZERO
   ========================================================================== */

/* --- 57. Nenhuma sombra preta em lugar nenhum do hero --------------------
   O veu ja tinha saido, mas o TEXTO continuava com sombra desfocada atras
   (`text-shadow` com blur de 24px no ink), e era ela o halo escuro em volta
   das letras. Some, junto com as do subtitulo e do "conheca a Evora". */
.hero__headline, .hero--flat .hero__sub, .hero__cue,
.hero--photo .hero__headline, .hero--photo .hero__sub { text-shadow: none; }
.hero--flat .hero__sub { color: #FFFFFF; }

/* --- 58. O degrade volta EXATAMENTE no molde da Roccan -------------------
   Mesmas seis paradas, mesmo angulo de 100deg, mesmo veu vertical. A unica
   troca e a COR: la e o ink deles (#010D28), aqui e o AZUL DA MARCA
   (#133979). E degrade de cor, com contraste; nao e sombra preta. */
.hero--photo .hero__overlay {
  display: block;
  background:
    linear-gradient(100deg,
      rgba(19,57,121,.95) 0%,
      rgba(19,57,121,.90) 24%,
      rgba(19,57,121,.74) 42%,
      rgba(19,57,121,.46) 58%,
      rgba(19,57,121,.24) 74%,
      rgba(19,57,121,.32) 100%),
    linear-gradient(180deg, rgba(19,57,121,.55) 0%, transparent 26%, transparent 68%, rgba(19,57,121,.65) 100%);
}

/* --- 59. Sem NENHUMA camada sobre a foto do hero -------------------------
   O degrade sai de vez. A "sombra preta" que sobrava depois de zerar
   text-shadow e veu era a TORRE DO PREDIO na propria foto, em contraluz:
   um bloco quase preto atravessando o meio da dobra (medido: #0E1521 na
   faixa x 700-1000). Isso nao se resolve no CSS, se resolve na imagem, e e
   o que o _build-imagens.py passou a fazer levantando as sombras. */
.hero--photo .hero__overlay { display: none; }

/* --- 60. "Conheca a Evora" vira chip, como o eyebrow ---------------------
   Sem camada nenhuma sobre a foto, este era o unico texto do hero que caia
   abaixo do minimo (3,97:1 contra 4,5:1 exigido para texto pequeno), porque
   ele fica na altura do jardim e do calcamento, que sao claros. A solucao
   nao e sombra: e o mesmo chip translucido que o eyebrow ja usa. */
.hero--photo .hero__cue {
  background: rgba(19,57,121,.62);
  border: 1px solid rgba(255,222,89,.34);
  padding: 9px 14px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #FFFFFF;
}
.hero--photo .hero__cue::before { content: none; }   /* a regua solta sai */

/* --- 61. Enquadramento do celular: o texto precisa cair na parte cheia ----
   Em 393px o subtitulo caia sobre o vidro e o ceu, as duas areas mais claras
   da foto, e ficava em 3,5:1. Subindo o corte, a torre e a fachada (mais
   densas) ficam atras do bloco de texto. Enquadramento, nao camada. */
@media (max-width: 760px) { .hero--photo .hero__bg img { object-position: center 16%; } }

/* --- 62. O "conheca a Evora" saiu do hero (pedido do Thalisson) ----------
   Com ele fora, o chip da regra 60 nao tem mais alvo; as regras ficam inertes
   e nao se apaga a base, que e compartilhada com as outras LPs da linhagem. */
.hero__cue { display: none; }

/* --- 63. Volta o degrade da Roccan, na cor da marca ----------------------
   Medido no pacote, sem camada nenhuma o H1 nao aguenta a variacao de
   largura: o `cover` traz o ceu e as nuvens para tras dele em tela larga, e o
   contraste caia para 2,3:1 em 1440 e 2,6:1 em 1920 (minimo 3:1). Densidade
   so na imagem nao resolve sem apagar a foto.
   Entao volta o degrade, com as regras que o Thalisson deu: no molde da
   Roccan e NA COR DA MARCA. Nada de preto: e o brand #133979, com as paradas
   da Roccan suavizadas, porque a foto ja vem tratada. */
.hero--photo .hero__overlay {
  display: block;
  background:
    linear-gradient(100deg,
      rgba(19,57,121,.72) 0%,
      rgba(19,57,121,.66) 24%,
      rgba(19,57,121,.52) 42%,
      rgba(19,57,121,.34) 58%,
      rgba(19,57,121,.16) 74%,
      rgba(19,57,121,.20) 100%);
}

/* --- 64. Ajuste fino nas paradas do meio ---------------------------------
   Medindo so os blocos que contem glifo (medir a caixa inteira do H1 incluia
   area vazia sobre o ceu e dava falso negativo), o H1 passa com folga em toda
   largura. Quem ficava curto era o SUBTITULO, que e texto pequeno e vive
   justamente onde o degrade ja afrouxou: 4,0:1 em 1280 e 1440, contra 4,5:1.
   As duas paradas do meio sobem; as pontas ficam como estao, para a foto
   continuar aberta a direita. */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(19,57,121,.74) 0%,
      rgba(19,57,121,.70) 24%,
      rgba(19,57,121,.62) 42%,
      rgba(19,57,121,.46) 58%,
      rgba(19,57,121,.18) 74%,
      rgba(19,57,121,.20) 100%);
}

/* --- 65. As paradas do meio precisam de mais peso, e a conta explica ------
   O subtitulo vive entre 10% e 47% da largura, sobre o vidro que reflete o
   ceu (luminancia ~0,50). Compondo: 0,62 de azul sobre isso da L=0,218, que
   e exatamente os 3,98:1 medidos. Para passar de 4,5:1 o azul precisa chegar
   a ~0,78 nessa faixa. As duas ultimas paradas ficam baixas, entao a foto
   segue aberta no terco direito. */
.hero--photo .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(19,57,121,.86) 0%,
      rgba(19,57,121,.82) 24%,
      rgba(19,57,121,.78) 46%,
      rgba(19,57,121,.60) 62%,
      rgba(19,57,121,.20) 78%,
      rgba(19,57,121,.18) 100%);
}