/* ============================================================
   CONGOIS — Design System v2.1 · Champagne (Editorial Luxo)
   Construção civil, industrial, remodelação e engenharia · Luanda, Angola
   Filosofia: carvão quente + bronze champagne + papel marfim.
   v2.1 adiciona: metal vivo no dourado (sheen lento), display
   maior, hairlines, chanfros de alfaiataria, molduras duplas,
   filetes que crescem e movimento lento (--lux).
   ============================================================ */

:root {
  --bg:        #f4efe5;   /* marfim — fundo principal */
  --bg-2:      #fbf8f0;   /* superfície elevada */
  --bg-3:      #f7f2e8;   /* painéis elevados */
  --paper:     #fffdf6;   /* papel — documentos */
  --paper-2:   #e8e0cf;
  --bronze:    #8a6d3b;   /* ouro escurecido — contraste AA sobre marfim */
  --bronze-l:  #a8834a;
  --bronze-d:  #5f4a26;
  --bronze-grad: linear-gradient(115deg, #ecd9a8 0%, #c6a15c 45%, #8a6d3b 100%);
  --ink:       #17130c;
  --muted:     #55503f;
  --muted-2:   #837c6a;
  --line:      rgba(138, 109, 59, .22);
  --line-soft: rgba(138, 109, 59, .12);
  --ok:        #4caf8b;
  --warn:      #d99b2b;
  --err:       #d95c4a;
  --radius-s:  3px;
  --radius-m:  10px;
  --radius-l:  18px;
  --serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* PADRÃO v2.1 · Champagne — refinamento de luxo */
  --lux: cubic-bezier(.16, 1, .3, 1);            /* movimento caro, lento, sem quebras */
  --hairline: linear-gradient(90deg, transparent 0%, rgba(138,109,59,.6) 50%, transparent 100%);
  --gold-sheen: linear-gradient(110deg, #5f4a26 0%, #a8834a 26%, #d9bd85 50%, #8a6d3b 74%, #5f4a26 100%);
  --gold-size: 240% 100%;
  --inner-glow: inset 0 1px 0 rgba(255, 247, 224, .38);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-size: 15.5px;
}

/* atmosfera — respiro dourado ambiente em todo o site */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1000px 560px at 86% -12%, rgba(198, 161, 92, .075), transparent 62%),
    radial-gradient(900px 640px at -12% 108%, rgba(198, 161, 92, .045), transparent 58%);
}

/* grão de filme em todo o site — mata o acabamento "flat de IA" */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

::selection { background: rgba(198, 161, 92, .32); color: #fff; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3a3d47, #2c2e36); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--bronze), var(--bronze-d)); }

img { max-width: 100%; display: block; }
a { color: var(--bronze-l); text-decoration: none; transition: color .25s ease; }
a:hover { color: #fff; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* P3 · LINHAS-GUIA — margem regrada de revista: filetes verticais fixos alinhados ao .wrap (1240px centrado). Desktop apenas; o grão (z999) e o loader (z1000) ficam acima por desenho. */
@media (min-width: 1360px) {
  main::before,
  main::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(198, 161, 92, .14) 9%,
      rgba(198, 161, 92, .14) 91%,
      transparent 100%
    );
  }
  main::before { left: calc(50% - 620px); }
  main::after  { right: calc(50% - 620px); }
}
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

/* ---------------- tipografia ---------------- */

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; color: var(--paper); }

.display {
  font-size: clamp(2.9rem, 6.8vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -.032em;
  font-weight: 600;
  text-wrap: balance;
}
.display em, .gold-em { font-style: italic; font-weight: 500; letter-spacing: 0; }

/* ligaduras de editora — o serif tratado como tipo de livro (liga/calt/kern) */
h1, h2, .display, blockquote {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
}

/* metal vivo — o champagne desliza lentamente sobre o dourado */
.gold-em {
  background-image: var(--gold-sheen);
  background-size: var(--gold-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 11s var(--lux) infinite alternate;
}
@keyframes sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 500; }

/* etiquetas editoriais — mono, espaçadas, sem "pill" genérica */
.tag {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tag::before { content: ""; width: 42px; height: 1px; background: var(--hairline); }
.tag.center::after { content: ""; width: 42px; height: 1px; background: var(--hairline); }

.lede { font-size: 1.08rem; color: var(--muted); max-width: 620px; }
.lede b { color: var(--paper); font-weight: 500; }

.ghost {
  font-family: var(--serif);
  font-size: clamp(7rem, 18vw, 16rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 161, 92, .14);
  user-select: none;
  pointer-events: none;
}

.mono { font-family: var(--mono); }

/* ---------------- botões ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: var(--radius-s);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease, color .22s ease, border-color .22s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
  background: var(--bronze-grad);
  color: #171204;
  border: 1px solid rgba(247, 236, 208, .6);
  box-shadow: var(--inner-glow), 0 14px 36px rgba(150, 115, 47, .3);
}
.btn-gold:hover { box-shadow: var(--inner-glow), 0 22px 52px rgba(150, 115, 47, .46); color: #171204; }
/* brilho que varre o botão */
.btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.btn-gold:hover::after { left: 130%; }

.btn-outline {
  border-color: rgba(198, 161, 92, .5);
  color: var(--bronze-l);
  background: transparent;
}
.btn-outline:hover { background: rgba(198, 161, 92, .08); border-color: var(--bronze-l); color: #fff; }

/* P2 · IMÃ DE BUTIQUE — o CTA desliza na direção do cursor (gate pointer:fine; sem JS nada muda) */
@media (min-width: 721px) and (pointer: fine) {
  .btn-gold, .nav-cta .btn, .hero-actions .btn {
    transition: transform .3s var(--lux), box-shadow .3s var(--lux),
                background .22s ease, color .22s ease, border-color .22s ease;
  }
}

/* MI-3 · gota de champanhe — único feedback tátil do clique (span .ripple criado pelo JS no app.js; o .btn base já é relative + overflow:hidden, a gota nunca vaza) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,161,92,.42) 0%, rgba(198,161,92,0) 68%);
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
}

.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; color: var(--ink); }

.btn-dark { background: var(--bg-3); color: var(--paper); border-color: var(--line); }
.btn-dark:hover { border-color: var(--bronze); }

.btn-danger { background: rgba(217, 92, 74, .1); color: #e08b7c; border-color: rgba(217, 92, 74, .35); }

.btn-sm { padding: 10px 22px; font-size: .76rem; }
.btn-block { width: 100%; }

/* ---------------- header ---------------- */

.topbar {
  background: var(--bg-2);
  border-top: 1px solid rgba(198, 161, 92, .3);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.topbar b { color: var(--bronze); font-weight: 500; }
.topbar .live { display: inline-flex; align-items: center; gap: 8px; }
.topbar .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 13, 16, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(198, 161, 92, .18), 0 16px 48px rgba(0, 0, 0, .4);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }

.brand { display: flex; align-items: center; gap: 14px; font-family: var(--serif); }
.brand-mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(230, 207, 154, .55);
  color: var(--bronze-l);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
  background: linear-gradient(150deg, rgba(198,161,92,.16), transparent);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: var(--inner-glow);
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .3em;
  color: var(--paper);
  font-weight: 500;
}
.brand-name i { font-style: normal; color: var(--bronze); }

.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze-grad);
  transition: width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--paper); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(198, 161, 92, .35);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.user-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.menu-toggle { display: none; background: none; border: none; color: var(--paper); font-size: 1.4rem; cursor: pointer; font-family: var(--serif); }

/* ---------------- hero — composição editorial ---------------- */

.hero {
  position: relative;
  padding: 96px 0 120px;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(198,161,92,.1), transparent 60%),
    radial-gradient(700px 500px at -10% 90%, rgba(198,161,92,.05), transparent 55%),
    var(--bg);
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero .tag { margin-bottom: 30px; }
.hero .display { margin-bottom: 28px; max-width: 640px; }
.hero .display .gold-em {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { margin-bottom: 40px; font-size: 1.13rem; }

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 46px; }

.hero-fine {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-fine b { color: var(--bronze); font-weight: 500; }

/* EC-1 · registo-ledger do hero — valor serif sobre etiqueta mono, hairlines verticais (scopo .hero: o checklist.html usa .hero-fine noutra coluna) */
.hero .hero-fine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 560px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  gap: 0;
}
.hero .hero-fine span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 18px;
  color: var(--muted-2);
}
.hero .hero-fine span:first-child { padding-left: 0; }
.hero .hero-fine span:last-child { padding-right: 0; }
.hero .hero-fine span:not(:last-child) { border-right: 1px solid var(--line-soft); }
.hero .hero-fine b {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--bronze-l);
}
@media (max-width: 720px) {
  .hero .hero-fine { grid-template-columns: 1fr; gap: 16px; border-top: none; padding-top: 0; }
  .hero .hero-fine span:not(:last-child) { border-right: none; padding-left: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
  .hero .hero-fine span:last-child { border-bottom: 1px solid var(--line-soft); padding-bottom: 14px; } /* fecho da pauta (mobile-only — desktop mantém a pauta aberta em baixo, deliberado) */
}

/* composição visual do hero — camadas, moldura deslocada, chips */
.hero-media { position: relative; padding: 0 28px 28px 0; }
.hero-media-frame {
  position: absolute; top: 0; right: 0;
  width: 100%; height: 100%;
  border: 1px solid var(--bronze);
  transform: translate(28px, -28px);
  pointer-events: none;
  z-index: 0;
  opacity: .9;
}
/* segunda moldura interior — o detalhe do enquadramento de butique */
.hero-media-frame::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(230, 207, 154, .28);
}
/* losango na linha superior da moldura — assinatura de gravura */
.hero-media-frame::after {
  content: "◆";
  position: absolute;
  top: -9px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--bronze);
  background: var(--bg);
  padding: 0 12px;
}
.hero-media-photo {
  position: relative;
  height: 560px;
  background:
    linear-gradient(180deg, #1a1c22 0%, #101114 100%);
  border-radius: var(--radius-s);
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 0 1px rgba(198, 161, 92, .2), 0 40px 90px rgba(0,0,0,.55);
}
/* P1 · O BALCÃO DE LUZ — profundidade em camadas + luz interior na fotografia do hero */
.hero-media-photo {
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 224, .18),
    0 0 0 1px rgba(198, 161, 92, .2),
    0 2px 0 rgba(230, 207, 154, .12),
    0 44px 90px rgba(0, 0, 0, .55),
    0 130px 220px -60px rgba(0, 0, 0, .72);
}
.hero-media-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(12,13,16,.85) 100%);
  z-index: 2;
}
.hero-media-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.05);
}

/* varredura de luz — a galeria passa a luz sobre a moldura (1 vez, após a intro) */
.hero-media-photo::after {
  content: "";
  position: absolute;
  top: -30%; left: 0;
  width: 34%; height: 160%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent, rgba(230, 207, 154, .16) 45%, rgba(255, 247, 224, .1) 55%, transparent);
  transform: translateX(-160%) rotate(10deg);
  animation: sweep 5.5s var(--lux) 1.6s 1 forwards;
}
@keyframes sweep {
  0%   { transform: translateX(-160%) rotate(10deg); }
  100% { transform: translateX(320%) rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media-photo::after { animation: none; }
}


.hero-chip {
  position: absolute;
  z-index: 3;
  background: rgba(18, 19, 24, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(198, 161, 92, .4);
  border-radius: var(--radius-s);
  padding: 14px 20px;
  font-family: var(--mono);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.hero-chip b { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--bronze-l); line-height: 1.2; }
.hero-chip span { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.hero-chip.c1 { top: 26px; left: -16px; animation: drift 7s ease-in-out infinite; }
.hero-chip.c2 { bottom: 40px; right: -10px; animation: drift 8s ease-in-out 1.2s infinite; }

/* ML-1 · hero-chip — arestas light-catching + sheen metálico que varre no hover (externo sempre recortado pelo clip-path: só inset vive) */
.hero-chip {
  border-top-color: rgba(246, 230, 190, .55);
  border-bottom-color: rgba(142, 108, 47, .4);
  box-shadow: var(--inner-glow);
}
.hero-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(253, 246, 223, .18) 50%, transparent 66%);
  background-size: 240% 100%;
  background-position: 120% 0;
  transition: background-position 1.2s var(--lux);
}
.hero-chip:hover::after { background-position: -20% 0; }
@media (prefers-reduced-motion: reduce) { .hero-chip::after { display: none; } }
@keyframes drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.hero-scroll {
  position: absolute; bottom: 34px; left: 32px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex; align-items: center; gap: 12px;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(180deg, var(--bronze), transparent);
  animation: drop 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------------- marquee — fita de confiança ---------------- */

.marquee {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-x 34s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: 26px;
  padding-right: 26px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee-item b { color: var(--bronze); font-weight: 500; }
.marquee-item .sep { color: var(--bronze); opacity: .6; }

/* ---------------- seções ---------------- */

section { padding: 130px 0; position: relative; }
.section-head { margin-bottom: 64px; }
.section-head h2 { max-width: 640px; margin-top: 18px; }
.section-head .lede { margin-top: 18px; }

/* folio de capítulo — numeração marginal de revista (01–07 na home) */
main { counter-reset: ec-folio; }
.section-head { counter-increment: ec-folio; position: relative; }

.section-head::before {
  content: counter(ec-folio, decimal-leading-zero);
  position: absolute; top: 3px; right: 0;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .26em;
  color: var(--bronze-d);
}
.section-head::after {
  content: ""; position: absolute; top: 22px; right: 0;
  width: 34px; height: 1px;
  background: var(--line-soft);
}

/* hierarquia de etiqueta — o kicker corre até à margem; o folio fica livre à direita */
.section-head .tag:not(.center) {
  display: flex; align-items: center;
  width: calc(100% - 84px);
}
.section-head .tag:not(.center)::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line-soft);
}

@media (max-width: 720px) {
  .section-head .tag:not(.center) { width: calc(100% - 56px); }
  .section-head::before { top: 4px; font-size: .56rem; }
  .section-head::after { top: 20px; width: 26px; }
}



.index-list { border-top: 1px solid var(--line); }
.index-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 34px 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s ease, padding-left .5s var(--lux);
  color: inherit;
}
.index-item:hover { background: rgba(198, 161, 92, .045); padding-left: 26px; }
/* filete dourado que cresce no hover */
.index-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bronze-grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--lux);
}
.index-item:hover::before { transform: scaleY(1); }
.index-item .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--bronze);
  opacity: .85;
}
.index-item .ii-main h3 { font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.6rem); font-weight: 500; margin-bottom: 6px; transition: color .25s ease; }
.index-item:hover .ii-main h3 { color: var(--bronze-l); }
.index-item .ii-main p { color: var(--muted); font-size: .88rem; max-width: 560px; }
.index-item .ii-foot { text-align: right; }
.index-item .price { font-family: var(--serif); font-size: 1.25rem; color: var(--bronze-l); display: block; white-space: nowrap; }
.index-item .ii-meta { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); }
.index-item .arrow {
  position: absolute; right: -20px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .3s ease, transform .3s var(--ease);
  color: var(--bronze-l);
  font-size: 1.1rem;
}
.index-item:hover .arrow { opacity: 1; transform: none; }

/* placa de preço — numerais tabulares + monograma ◆, gravada no catálogo */
.index-item .price {
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 0 14px;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.index-item .price::before {
  content: "◆";
  font-size: .38em; line-height: 1;
  color: var(--bronze-d);
}
.index-item:hover .price {
  background-image: var(--bronze-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.index-item:hover .price::before { color: var(--bronze-l); }

.plan .p-price {
  font-variant-numeric: tabular-nums lining-nums;
  padding-bottom: 10px;
}
.plan .p-price::after {
  content: ""; display: block;
  width: 42px; height: 1px;
  margin-top: 12px;
  background: var(--hairline);
}

/* ledger — os números da prova em coluna (contadores, hero, fatura) */
.hero-fine b, .hero-chip b, .stat-card b, .meta-box b, .invoice .inv-tot b {
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 720px) {
  .index-item .price { padding: 0 10px; }
}

/* ---------------- processo — 3 passos com numerais ---------------- */

.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.process-step {
  padding: 56px 40px 44px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
}
.process-step:last-child { border-right: none; }
.process-step .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.4rem;
  line-height: 1;
  background: var(--bronze-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 22px;
}
.process-step h3 { font-size: 1.2rem; margin-bottom: 10px; }
.process-step p { color: var(--muted); font-size: .88rem; }
.process-step::after {
  content: "→";
  position: absolute; top: 60px; right: -14px;
  color: var(--bronze);
  font-size: 1rem;
  z-index: 2;
  background: var(--bg);
  padding: 0 6px;
}
.process-step:last-child::after { display: none; }

/* ---------------- verificação — timeline 5 etapas ---------------- */

.verify { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); }
.verify-step {
  padding: 30px 22px;
  border-right: 1px solid var(--line);
  position: relative;
}
.verify-step:last-child { border-right: none; }
.verify-step .v-num { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; color: var(--bronze); display: block; margin-bottom: 12px; }
.verify-step b { display: block; font-size: .82rem; font-weight: 600; color: var(--paper); margin-bottom: 6px; letter-spacing: .02em; }
.verify-step span { font-size: .72rem; color: var(--muted); }
.verify-step::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--bronze-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.verify-step:hover::before { transform: scaleX(1); }

/* OF-2 · pauta de admissão — carimbos de tinta numerados + veredicto (motivo tinta, não cera; content curto p/ caber nas 3 grelhas; background fora da transition — gradiente não interpola) */
.verify-step .v-num {
  display: inline-block;
  padding: 3px 10px;
  border: 1px dashed rgba(198, 161, 92, .55);
  background: rgba(198, 161, 92, .07);
  transform: rotate(-1.5deg);
  transition: color .3s ease, border-color .3s ease;
}
.verify-step:hover .v-num {
  background: var(--bronze-grad);
  color: #171204; /* constante da casa para texto sobre bronze-grad (btn-gold, p-flag) */
  border-color: transparent;
}
.verify-step:last-child::after {
  content: "ADMITIDO · SELO 90 DIAS";
  position: absolute; left: 22px; right: 22px; bottom: 14px;
  padding: 6px 10px;
  border: 1.5px solid var(--bronze);
  background: var(--bg);
  color: var(--bronze-l);
  font-family: var(--mono); font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
  text-align: center;
  transform: rotate(-1.2deg);
  white-space: nowrap;
  opacity: .95;
}
.verify-step:last-child { padding-bottom: 58px; } /* faixa do veredicto — o selo ADMITIDO assenta limpo sob a descrição (PL-2) */

/* ---------------- compromissos com consequências ---------------- */

.commits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.commit {
  border: 1px solid var(--line);
  padding: 44px 34px;
  border-radius: var(--radius-s);
  background: linear-gradient(170deg, rgba(255,255,255,.02), transparent);
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease, transform .3s var(--ease);
}
.commit:hover { border-color: rgba(198,161,92,.45); transform: translateY(-4px); }
.commit::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--bronze-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--lux);
}
.commit:hover::before { transform: scaleX(1); }
.commit .c-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--bronze);
  color: var(--bronze-l);
  margin-bottom: 26px;
}
.commit .c-icon svg { width: 22px; height: 22px; }
.commit h3 { font-size: 1.18rem; margin-bottom: 10px; }
.commit p { color: var(--muted); font-size: .88rem; margin-bottom: 18px; }
.commit .c-term {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze-l);
  border-top: 1px dashed rgba(198,161,92,.3);
  padding-top: 14px;
}
.commit .c-term b { font-weight: 600; }

/* EC-2 · cláusulas ART. I–III — numeral romano mono no canto dos compromissos (counter reinicia em cada .commits; 3 cards estáticos = ART. I–III) */
.commits { counter-reset: art; }
.commit { counter-increment: art; }
.commit::after {
  content: "ART. " counter(art, upper-roman);
  position: absolute;
  top: 18px; right: 24px;
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .28em;
  color: var(--bronze-d);
  border-bottom: 1px solid var(--line-soft);
  padding: 0 2px 5px;
  pointer-events: none;
}
.commit:hover::after { color: var(--bronze-l); border-bottom-color: rgba(198, 161, 92, .4); }

/* documento de garantia */
.guarantee-doc {
  margin-top: 64px;
  background: var(--paper);
  color: var(--ink);
  padding: 64px 72px;
  border-radius: var(--radius-s);
  position: relative;
  max-width: 720px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.guarantee-doc::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(142, 108, 47, .35);
  /* marca d'água — monograma CG como em papel de alta gramatura */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Ctext x='90' y='114' text-anchor='middle' font-family='Georgia,serif' font-style='italic' font-size='62' fill='none' stroke='%238e6c2f' stroke-opacity='0.13' stroke-width='1'%3ECG%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
  pointer-events: none;
}
.guarantee-doc.ornate::after { background: var(--paper); color: var(--bronze-d); }
.guarantee-doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--bronze); padding-bottom: 18px; margin-bottom: 26px; }
.guarantee-doc .doc-head h4 { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); font-weight: 500; letter-spacing: .04em; }
.guarantee-doc .doc-head .doc-no { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; color: var(--bronze-d); text-transform: uppercase; text-align: right; }
.guarantee-doc p { font-size: .9rem; color: #3a352a; margin-bottom: 14px; }
.guarantee-doc p b { color: var(--bronze-d); }

/* P5 · INICIAL CAPITULAR — o certificado lido como escritura de editora (P maiúsculo gravado) */
.guarantee-doc > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3em, 12vw, 4.4em);
  line-height: .74;
  float: left;
  padding: 8px 16px 0 2px;
  color: var(--bronze-d);
  text-shadow: 0 1px 0 rgba(255, 247, 224, .55), 0 2px 2px rgba(142, 108, 47, .25);
}
.guarantee-doc .doc-sig { display: flex; justify-content: space-between; margin-top: 34px; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-d); }
.guarantee-doc .doc-sig .line { border-top: 1px solid var(--bronze-d); padding-top: 6px; }

/* chancela de cera — selo EC cunhado na dobra do certificado */
.doc-seal {
  position: absolute; right: -24px; bottom: -24px;
  width: 88px; height: 88px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.15rem; letter-spacing: .06em;
  color: var(--ink);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 247, 224, .65), transparent 42%),
    radial-gradient(circle at 70% 80%, rgba(63, 44, 14, .45), transparent 48%),
    linear-gradient(145deg, var(--bronze-l) 0%, var(--bronze) 46%, var(--bronze-d) 82%, #6b4f22 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 247, 224, .55),
    inset 0 -4px 8px rgba(0, 0, 0, .45),
    0 16px 38px rgba(0, 0, 0, .5);
  transform: rotate(-7deg);
  user-select: none;
  pointer-events: none;
}
.doc-seal::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(107, 79, 34, .5);
  border-radius: 50%;
}
.doc-seal::after {
  content: ""; position: absolute; inset: 13px;
  border: 1px dashed rgba(107, 79, 34, .42);
  border-radius: 50%;
}
@media (max-width: 720px) {
  .doc-seal { right: -12px; bottom: -20px; width: 62px; height: 62px; font-size: .85rem; }
}

/* microtexto de tiragem — a escassez por escrito, com número */
.guarantee-doc .doc-limit {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(142, 108, 47, .35);
  background: rgba(142, 108, 47, .05);
  border-radius: var(--radius-s);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-d);
}
.guarantee-doc .doc-limit::before { content: "◆"; font-size: .5rem; }
/* assinatura caligráfica — a mão, não a máquina */
.guarantee-doc .doc-sig .line:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink);
}
.guarantee-doc .doc-sig .line:first-child::after {
  content: "❧";
  font-size: .55em;
  color: var(--bronze-d);
  margin-left: 10px;
  vertical-align: 3px;
}
@media (max-width: 720px) {
  .guarantee-doc .doc-sig .line:first-child { font-size: 1.15rem; }
}

/* ---------------- equipa ---------------- */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-card {
  padding: 44px 36px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .3s ease;
}
.team-card:last-child { border-right: none; }
.team-card:hover { background: rgba(198, 161, 92, .04); }
.team-card .t-photo {
  height: 300px;
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: linear-gradient(160deg, #1c1e24, #101114);
}
.team-card .t-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.06); transition: transform .8s var(--ease); }
.team-card:hover .t-photo img { transform: scale(1.05); }
.team-card .t-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12,13,16,.72));
}
.team-card .t-photo .t-inits {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3.4rem;
  color: rgba(230, 207, 154, .5);
}

/* ML-2 · retrato cunhado — moldura dupla chanfrada (eco do hero-media-frame) + monograma em baixo-relevo; ::before estava livre (o scrim é o ::after) */
.team-card .t-photo {
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, .22), inset 0 -1px 0 rgba(0, 0, 0, .6);
}
.team-card .t-photo::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1; /* só precisa subir o scrim ::after (z-auto) */
  pointer-events: none;
  border: 1px solid rgba(198, 161, 92, .35);
}
.team-card .t-photo .t-inits {
  text-shadow: 0 1px 0 rgba(230, 207, 154, .14), 0 -1px 2px rgba(0, 0, 0, .72);
}
.team-card h3 { font-size: 1.25rem; margin-bottom: 4px; }
.team-card .t-role { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-bottom: 14px; }
.team-card p { font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.team-card .t-stats { display: flex; gap: 26px; border-top: 1px dashed rgba(198,161,92,.25); padding-top: 16px; }
.team-card .t-stats b { font-family: var(--serif); font-size: 1.1rem; color: var(--bronze-l); font-weight: 500; display: block; }
.team-card .t-stats span { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }

/* ---------------- depoimentos — editorial ---------------- */

.testis-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: stretch; }
.testi-feature {
  border: 1px solid var(--line);
  padding: 64px 60px;
  border-radius: var(--radius-s);
  background: linear-gradient(165deg, rgba(198,161,92,.07), transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.testi-feature .q-mark { font-family: var(--serif); font-size: 5rem; line-height: .6; color: var(--bronze); opacity: .55; margin-bottom: 26px; }
.testi-feature blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  margin-bottom: 28px;
  color: var(--paper);
}
.testi-feature blockquote .gold-em {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.testi-stack { display: grid; gap: 24px; }
.testi-sm {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 30px 32px;
  background: var(--bg-2);
}

/* EC-5 · índice de testemunhos — coluna marginal numerada 02–04 com filetes (o feature é o 01 implícito; contraste: caixa fechada vs coluna aberta) */
.testi-stack { counter-reset: ti 1; gap: 0; }
.testi-sm {
  counter-increment: ti;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 18px;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 26px 4px 30px 0;
}
.testi-sm:first-child { border-top: 1px solid var(--line); }
.testi-sm:last-child { border-bottom: none; }
.testi-sm::before {
  content: counter(ti, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .2em;
  color: var(--bronze-d);
  border-top: 1px solid var(--line-soft);
  padding-top: 5px;
  margin-top: 3px;
  align-self: start;
}
.testi-sm blockquote { margin-bottom: 16px; }
.testi-sm .testi-who { grid-column: 2; }
.testi-sm blockquote { font-size: .92rem; color: var(--paper-2); margin-bottom: 16px; font-style: italic; }
.testi-who { display: flex; align-items: center; gap: 14px; }
.testi-who .w-avatar {
  width: 40px; height: 40px;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: .85rem;
  color: var(--bronze-l);
}
.testi-who b { display: block; font-size: .84rem; font-weight: 600; }
.testi-who span { font-size: .7rem; color: var(--muted-2); }
.testi-who .stars { margin-left: auto; color: var(--bronze); font-size: .72rem; letter-spacing: 3px; }

/* ---------------- planos ---------------- */

.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.plan {
  padding: 60px 52px;
  border-right: 1px solid var(--line);
  position: relative;
}
.plan:last-child { border-right: none; background: linear-gradient(170deg, rgba(198,161,92,.07), transparent 55%); }
.plan .p-tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 18px; }
.plan h3 { font-size: 1.6rem; margin-bottom: 22px; }
.plan .p-price {
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--bronze-l);
  margin-bottom: 6px;
}
.plan .p-price small { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.plan .p-desc { font-size: .86rem; color: var(--muted); margin: 16px 0 30px; }
.plan ul { list-style: none; margin-bottom: 36px; }
.plan li {
  font-size: .86rem;
  color: var(--paper-2);
  padding: 10px 0 10px 30px;
  position: relative;
  border-bottom: 1px dashed rgba(198,161,92,.14);
}
.plan li::before {
  content: "";
  position: absolute; left: 0; top: 17px;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--bronze);
  border-bottom: 1.5px solid var(--bronze);
  transform: rotate(-45deg);
}
.plan .p-note { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-top: 20px; }

/* ---------------- CTA final ---------------- */

.final-cta {
  text-align: center;
  padding: 120px 40px;
  border: 1px solid var(--line);
  background:
    radial-gradient(700px 340px at 50% -20%, rgba(198,161,92,.16), transparent 70%),
    linear-gradient(170deg, #14161b, var(--bg));
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute; inset: 14px;
  border: 1px solid rgba(198, 161, 92, .22);
  pointer-events: none;
}
.final-cta .ghost { position: absolute; bottom: -30px; right: -20px; font-size: 13rem; }
.final-cta .display { margin: 20px auto 24px; max-width: 760px; }
.final-cta .display .gold-em {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.final-cta .lede { margin: 0 auto 44px; }
.final-cta .btn { font-size: 1rem; padding: 20px 52px; }
.final-cta .fine { margin-top: 26px; font-family: var(--mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); }

/* P8 · CHANCELA DE ESCASSEZ — microtexto numerado no ponto de decisão (24 = mesma tiragem do certificado) */
.chancela {
  margin: 34px auto 0;
  max-width: 660px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.chancela b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--bronze-l);
}
.chancela .sep { font-size: .45rem; color: var(--bronze-d); }

/* ---------------- footer ---------------- */

.site-footer { border-top: 1px solid var(--line-soft); background: #090a0c; padding: 90px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 70px; }
.footer-grid .brand { margin-bottom: 20px; }
.footer-grid .f-about { font-size: .86rem; color: var(--muted); max-width: 320px; }
.footer-grid h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze); margin-bottom: 22px; font-weight: 500; }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 12px; }
.footer-grid a { color: var(--muted); font-size: .86rem; }
.footer-grid a:hover { color: var(--paper); }

/* rodapé-índice — entradas numeradas como índice de revista (01–12) */
.footer-grid { counter-reset: fi; }
.footer-grid li { counter-increment: fi; }
.footer-grid li::before {
  content: counter(fi, decimal-leading-zero);
  display: inline-block; width: 22px; text-align: right;
  font-family: var(--mono); font-size: .56rem;
  letter-spacing: .1em;
  color: var(--bronze-d);
  margin-right: 10px;
  pointer-events: none;
}
.footer-grid li:hover::before { color: var(--bronze-l); }

/* sublinha sob o título de coluna — eco do kicker das secções */
.footer-grid h4::after {
  content: ""; display: block;
  width: 28px; height: 1px;
  margin-top: 10px;
  background: var(--hairline);
}
.footer-big {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 8vw, 6.4rem);
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 161, 92, .22);
  text-align: center;
  line-height: 1;
  margin-bottom: 50px;
  user-select: none;
}
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------------- páginas internas ---------------- */

.page-hero { padding: 120px 0 70px; text-align: center; position: relative; overflow: hidden; }
.page-hero .ghost { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 11rem; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { margin: 22px auto 0; max-width: 780px; }
.page-hero .lede { margin: 20px auto 0; }
.page-hero .tag { justify-content: center; }
.page-hero .tag::after { content: ""; width: 28px; height: 1px; background: var(--bronze-grad); }

.section-sm { padding: 80px 0; }

/* filtros de categorias — refinados */
.cats { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-bottom: 60px; border-bottom: 1px solid var(--line); }
.cat-chip {
  padding: 14px 30px;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.cat-chip:hover { color: var(--paper); }
.cat-chip.active { color: var(--bronze-l); border-bottom-color: var(--bronze); }

/* catálogo em lista (serviços) */
.cat-block { margin-bottom: 40px; }
.cat-block .cat-title { display: flex; align-items: baseline; gap: 18px; margin-bottom: 0; border-top: 1px solid var(--line); padding-top: 34px; }
.cat-block .cat-title h2 { font-size: 1.9rem; }
.cat-block .cat-title span { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; color: var(--muted-2); text-transform: uppercase; }

/* lista de profissionais (página) */
.prof-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

/* página profissional */
.prof-page { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
.prof-hero {
  border: 1px solid var(--line);
  padding: 50px 46px;
  border-radius: var(--radius-s);
  background: linear-gradient(165deg, rgba(255,255,255,.02), transparent);
}
.prof-hero .pc-top { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; }
.prof-hero .t-avatar {
  width: 92px; height: 92px; flex-shrink: 0;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--bronze-l);
  background: linear-gradient(150deg, rgba(198,161,92,.14), transparent);
}
.prof-hero h1 { font-size: 2rem; }
.prof-hero .t-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); margin-top: 6px; }
.prof-hero .pc-rating { margin-top: 10px; color: var(--bronze-l); font-family: var(--serif); font-size: 1.05rem; }
.prof-hero .bio { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }
.prof-hero .meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.meta-box { padding: 18px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-2); text-align: center; }
.meta-box b { display: block; font-family: var(--serif); color: var(--bronze-l); font-size: 1.3rem; font-weight: 500; }
.meta-box span { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.esp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.esp-tags span {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-l);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: var(--radius-s);
  background: rgba(198,161,92,.05);
}

.avaliacao-item { padding: 20px 0; border-bottom: 1px dashed rgba(198,161,92,.15); }
.avaliacao-item:last-child { border-bottom: none; }
.avaliacao-item .stars { color: var(--bronze); font-size: .76rem; letter-spacing: 3px; }
.avaliacao-item p { font-size: .88rem; color: var(--paper-2); margin: 8px 0; }
.avaliacao-item .who { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

/* ---------------- formulários ---------------- */

.auth-wrap { max-width: 500px; margin: 0 auto; padding: 130px 0 90px; }
.auth-card {
  border: 1px solid var(--line);
  padding: 54px 52px;
  border-radius: var(--radius-s);
  background: linear-gradient(170deg, rgba(255,255,255,.025), transparent);
  box-shadow: 0 34px 90px rgba(0,0,0,.45);
  position: relative;
}
.auth-card::before { content: ""; position: absolute; top: 0; left: 52px; right: 52px; height: 1px; background: var(--bronze-grad); }
.auth-card h1 { font-size: 2rem; margin: 18px 0 10px; }
.auth-card .auth-sub { font-size: .88rem; color: var(--muted); margin-bottom: 34px; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(198, 161, 92, .2);
  border-radius: var(--radius-s);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .94rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bronze);
  background: rgba(198,161,92,.04);
  box-shadow: 0 0 0 3px rgba(198, 161, 92, .12);
}

/* ML-4 · bezel de champagne — foco gravado (nunca halo genérico) + etiqueta que acende via :focus-within; transição na base p/ o revert ser suave */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bronze-l);
  background: rgba(198, 161, 92, .05);
  box-shadow: var(--inner-glow), 0 0 0 1px rgba(230, 207, 154, .3), 0 0 0 3px rgba(198, 161, 92, .1);
}
.field label { transition: color .35s var(--lux); }
.field:focus-within label { color: var(--bronze-l); }
.field select option { background: var(--bg-2); color: var(--paper); }
.field .hint { font-size: .72rem; color: var(--muted-2); margin-top: 7px; font-family: var(--mono); letter-spacing: .04em; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.auth-alt { margin-top: 26px; text-align: center; font-size: .84rem; color: var(--muted); }
.auth-alt a { color: var(--bronze-l); border-bottom: 1px solid rgba(198,161,92,.4); padding-bottom: 1px; }
.auth-alt a:hover { border-color: var(--bronze-l); color: #fff; }

/* ---------------- flash ---------------- */

.flashes { position: fixed; top: 96px; right: 26px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.flash {
  padding: 15px 22px;
  border-radius: var(--radius-s);
  font-size: .86rem;
  border: 1px solid;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: slideIn .35s var(--ease);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  font-family: var(--mono);
  letter-spacing: .03em;
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.flash.ok { background: rgba(76, 175, 139, .13); border-color: rgba(76, 175, 139, .4); color: #9fdcc3; }
.flash.warn { background: rgba(217, 155, 43, .13); border-color: rgba(217, 155, 43, .4); color: #f2cd8f; }
.flash.err { background: rgba(217, 92, 74, .13); border-color: rgba(217, 92, 74, .4); color: #f0a294; }

/* ---------------- dashboards ---------------- */

.dash { padding: 110px 0 90px; }
.dash-top { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: 44px; }
.dash-top h1 { font-size: 2.4rem; }
.dash-top .lede { margin-top: 8px; font-size: .92rem; }

.cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 48px; }
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--bg-2);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--bronze-grad);
  opacity: 0;
  transition: opacity .3s ease;
}
.stat-card:hover::after { opacity: 1; }
.stat-card b { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--bronze-l); }
.stat-card span { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: linear-gradient(170deg, rgba(255,255,255,.02), transparent);
  overflow: hidden;
  margin-bottom: 36px;
}
.panel-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.panel-head h2 { font-size: 1.2rem; }
.panel-body { padding: 28px; }

.tbl { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tbl th {
  text-align: left;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.tbl td { padding: 15px 14px; border-bottom: 1px dashed rgba(198,161,92,.12); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .cell-sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted-2); margin-top: 3px; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius-s); }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.solicitado { background: rgba(217, 155, 43, .1); color: #f2cd8f; border: 1px solid rgba(217,155,43,.3); }
.status.confirmado { background: rgba(76, 175, 139, .1); color: #9fdcc3; border: 1px solid rgba(76,175,139,.3); }
.status.concluido { background: rgba(198, 161, 92, .1); color: var(--bronze-l); border: 1px solid var(--line); }
.status.cancelado { background: rgba(217, 92, 74, .1); color: #f0a294; border: 1px solid rgba(217,92,74,.3); }
.status.pendente { background: rgba(217, 155, 43, .1); color: #f2cd8f; border: 1px solid rgba(217,155,43,.3); }
.status.ativo { background: rgba(76, 175, 139, .1); color: #9fdcc3; border: 1px solid rgba(76,175,139,.3); }
.status.nova { background: rgba(76, 175, 139, .1); color: #9fdcc3; border: 1px solid rgba(76,175,139,.3); }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* estrelas */
.stars-input { display: flex; gap: 8px; flex-direction: row-reverse; justify-content: flex-end; }
.stars-input input { display: none; }
.stars-input label { font-size: 1.6rem; color: rgba(198,161,92,.22); cursor: pointer; transition: color .15s; }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: var(--bronze); }

/* ---------------- fatura ---------------- */

.invoice {
  max-width: 720px; margin: 0 auto;
  background: var(--paper);
  color: #2a2518;
  border-radius: var(--radius-s);
  padding: 60px 64px;
  font-size: .9rem;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.invoice h1 { font-family: var(--serif); color: #141008; font-size: 2rem; letter-spacing: .14em; font-weight: 500; }
.invoice .inv-head { display: flex; justify-content: space-between; margin-bottom: 44px; align-items: flex-start; }
.invoice .inv-tot { text-align: right; }
.invoice .inv-tot b { font-family: var(--serif); font-size: 1.5rem; color: var(--bronze-d); display: block; font-weight: 500; }
.invoice table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.invoice th { text-align: left; font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: #8a7a52; padding: 10px 8px; border-bottom: 2px solid var(--bronze); }
.invoice td { padding: 13px 8px; border-bottom: 1px solid #e0d8c3; }
.invoice .inv-note { font-size: .74rem; color: #8a7a52; margin-top: 32px; border-top: 1px solid #ddd2b8; padding-top: 18px; }

/* P6 · BORDA GUILLOCHÉ + PAPEL VERGÉ — certificado e fatura como papel de alta gramatura */
.guarantee-doc, .invoice {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(142, 108, 47, .045) 0, rgba(142, 108, 47, .045) 1px, transparent 1px, transparent 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='16'%3E%3Cpath d='M23 2 L31 8 L23 14 L15 8 Z' fill='none' stroke='%238e6c2f' stroke-opacity='.32'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='16'%3E%3Cpath d='M23 2 L31 8 L23 14 L15 8 Z' fill='none' stroke='%238e6c2f' stroke-opacity='.32'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='46'%3E%3Cpath d='M8 15 L14 23 L8 31 L2 23 Z' fill='none' stroke='%238e6c2f' stroke-opacity='.32'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='46'%3E%3Cpath d='M8 15 L14 23 L8 31 L2 23 Z' fill='none' stroke='%238e6c2f' stroke-opacity='.32'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0 0, top left, bottom left, left top, right top;
  background-size: auto, 46px 16px, 46px 16px, 16px 46px, 16px 46px;
}
.print-bar { max-width: 720px; margin: 26px auto 0; display: flex; justify-content: center; gap: 12px; }
@media print { .print-bar, .site-header, .topbar, .site-footer, .flashes { display: none !important; } body { background: #fff; } .dash { padding: 20px 0; } }

/* ---------------- WhatsApp flutuante ---------------- */

.whatsapp-float {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 250;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .38);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.whatsapp-float:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 46px rgba(37, 211, 102, .5); color: #fff; }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .55);
  animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.65); opacity: 0; } }

/* ---------------- rastreamento de serviço ---------------- */

.track-result { max-width: 760px; margin: 0 auto; }
.track-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.track-head h2 { font-size: 1.7rem; }
.track-code {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .22em;
  color: var(--bronze-l);
  border: 1px solid var(--line);
  background: rgba(198,161,92,.06);
  padding: 10px 20px;
  border-radius: var(--radius-s);
}
.track-timeline { display: flex; margin: 40px 0 34px; }
.tt-step { flex: 1; text-align: center; position: relative; padding: 0 6px; }
.tt-step::before {
  content: "";
  position: absolute; top: 14px; left: 0; right: 0;
  height: 2px;
  background: rgba(198, 161, 92, .14);
}
.tt-step:first-child::before { display: none; }
.tt-step .dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 2px solid rgba(198, 161, 92, .3);
  background: var(--bg);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .58rem;
  color: var(--muted-2);
  position: relative; z-index: 1;
}
.tt-step.done .dot { background: var(--bronze-grad); border-color: transparent; color: #171204; }
.tt-step.done::before { background: var(--bronze-grad); }
.tt-step.current .dot { border-color: var(--bronze); box-shadow: 0 0 0 6px rgba(198,161,92,.12); color: var(--bronze-l); }
.tt-step.cancel .dot { background: rgba(217,92,74,.16); border-color: rgba(217,92,74,.5); color: #f0a294; }
.tt-step.cancel::before { background: rgba(217,92,74,.35); }
.tt-step b { display: block; font-size: .76rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.tt-step.done b, .tt-step.current b { color: var(--bronze-l); }
.tt-step span { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.track-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 30px 0; }
.track-note {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  border-top: 1px dashed rgba(198,161,92,.25);
  padding-top: 18px;
  text-align: center;
}
@media (max-width: 720px) { .track-meta { grid-template-columns: 1fr; } .whatsapp-float { width: 54px; height: 54px; right: 18px; bottom: 18px; } .whatsapp-float svg { width: 26px; height: 26px; } }

/* ---------------- responsivo ---------------- */

@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 60px; }
  .hero-media { max-width: 560px; }
  .process { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--line); }
  .process-step::after { display: none; }
  .verify { grid-template-columns: repeat(3, 1fr); }
  .verify-step { border-bottom: 1px solid var(--line); }
  .commits, .team-grid { grid-template-columns: 1fr; }
  .team-card { border-right: none; border-bottom: 1px solid var(--line); }
  .testis-grid { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .plan { border-right: none; border-bottom: 1px solid var(--line); }
  .prof-list { grid-template-columns: 1fr; }
  .prof-page { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .index-item { grid-template-columns: 56px 1fr; }
  .index-item .ii-foot { grid-column: 2; text-align: left; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    background: rgba(12, 13, 16, .98);
    padding: 30px 32px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-140%);
    transition: transform .32s var(--ease);
    align-items: flex-start;
  }
  .nav-links.open { transform: none; }
  .nav-cta .btn { padding: 10px 20px; font-size: .72rem; }
  section { padding: 90px 0; }
  .hero { padding: 70px 0 90px; }
  .hero-media-photo { height: 400px; }
  .hero-chip.c1 { left: 0; }
  .field-row { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .tbl-wrap { overflow-x: auto; }
  .invoice { padding: 36px 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .guarantee-doc { padding: 44px 34px; }
  .testi-feature { padding: 46px 34px; }
  .index-item { padding: 26px 4px; grid-template-columns: 1fr; gap: 10px; }
  .index-item .ii-foot { grid-column: 1; }
  .verify { grid-template-columns: 1fr; }
  .auth-card { padding: 40px 30px; }
}

/* ---------------- animações — o luxo move-se devagar ---------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--lux), transform 1.1s var(--lux); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-26px); transition: opacity 1s var(--lux), transform 1.1s var(--lux); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(26px); transition: opacity 1s var(--lux), transform 1.1s var(--lux); }
.reveal-right.visible { opacity: 1; transform: none; }

/* P7 · CORTINA DE DIPLOMA — a garantia desenrola-se ao entrar (o selo de cera emerge por fim) */
.guarantee-doc.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.4s var(--lux);
}
.guarantee-doc.reveal.visible { clip-path: inset(-70px -70px -120px -70px); }

@media (prefers-reduced-motion: reduce) {
  .guarantee-doc.reveal { clip-path: none; transition: none; }
}

/* ---------------- ornamentos tipográficos clássicos ---------------- */

.fleuron {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--bronze);
  margin: 0 auto 30px;
  letter-spacing: .5em;
  user-select: none;
}
.fleuron::after { content: "❧"; }

/* ---------------- camada MAISON — a marca que cobra alto ---------------- */

/* intro de marca — capa da maison na 1ª visita */
.loader {
  position: fixed; inset: 0;
  z-index: 1000;
  background: #0c0d10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  transition: opacity .7s var(--lux), visibility .7s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader .l-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .34em;
  background-image: var(--gold-sheen);
  background-size: var(--gold-size);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 2.2s var(--lux) infinite alternate;
  padding-left: .34em; /* compensa o tracking no fim */
}
.loader .l-line {
  width: 200px; height: 1px;
  background: var(--hairline);
  animation: l-grow 1s var(--lux) .15s both;
}
.loader .l-sub {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding-left: .42em;
  animation: l-fade 1s ease .3s both;
}
@keyframes l-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes l-fade { from { opacity: 0; } to { opacity: 1; } }

/* cortina de palco — transição de página (View Transitions; Chrome/Edge 126+) */
@view-transition { navigation: auto; }

/* blackout de palco — a região exposta pelo clip é o carvão do site, nunca uma faixa clara */
::view-transition, ::view-transition-root { background: var(--bg); }

::view-transition-old(root) { animation: vt-leave .65s var(--lux) both; }
::view-transition-new(root) { animation: vt-enter  .65s var(--lux) both; }
@keyframes vt-leave {
  from { opacity: 1;   clip-path: inset(0 0 0 0); }
  to   { opacity: 0;   clip-path: inset(100% 0 0 0); }
}
@keyframes vt-enter {
  from { opacity: .35; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1;   clip-path: inset(0 0 0 0); }
}

/* navegação numerada — índice de catálogo de butique */
.nav-links a::before {
  content: attr(data-n);
  display: inline-block;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: 0;
  color: var(--bronze);
  opacity: .8;
  margin-right: 8px;
  vertical-align: 1px;
  transition: color .25s ease;
}
.nav-links a:hover::before { color: var(--bronze-l); }

/* losango de gravura — pendurado na linha superior (diplomas e molduras) */
.ornate { position: relative; }
.ornate::after {
  content: "◆";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  color: var(--bronze);
  background: var(--bg);
  padding: 0 14px;
  pointer-events: none;
}

/* luz que acompanha o cursor no hero — o gesto da loja de butique */
.hero-glow {
  position: absolute; top: 0; left: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 92, .08), transparent 62%);
  pointer-events: none;
  transform: translate(-320px, -320px);
  transition: transform .55s var(--lux);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; }
}

/* ============================================================
   COMPATIBILIDADE — classes v1 usadas por templates internos
   (dashboard, painel, admin, planos, login, formulários)
   ============================================================ */

:root {
  --ink-2: #17130c;
  --shadow: 0 34px 90px rgba(72, 56, 28, .14);
  --slate: #55503f;
  --slate-2: #837c6a;
}

/* etiqueta v1 → tag editorial */
.eyebrow {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--bronze-grad); }
.section-head.centered, .eyebrow[style*="center"] { text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head.centered .eyebrow::after { content: ""; width: 28px; height: 1px; background: var(--bronze-grad); }

/* subtítulo v1 */
.sub { font-size: 1.02rem; color: var(--muted); max-width: 640px; }
.section-head.centered .sub, .page-hero .sub { margin-left: auto; margin-right: auto; }

/* texto dourado v1 */
.gold-text {
  background: var(--bronze-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* botão fantasma v1 → contorno */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(198, 161, 92, .5);
  color: var(--bronze-l);
  background: transparent;
  transition: transform .22s var(--ease), background .22s ease, border-color .22s ease, color .22s ease;
  white-space: nowrap;
}
.btn-ghost:hover { background: rgba(198, 161, 92, .08); border-color: var(--bronze-l); color: #fff; transform: translateY(-2px); }
.btn-ghost.btn-sm { padding: 10px 22px; font-size: .76rem; }

/* seção alternada */
.alt { background: var(--bg-2); }

/* selo verificado */
.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9fdcc3;
  border: 1px solid rgba(76, 175, 139, .35);
  background: rgba(76, 175, 139, .08);
  padding: 3px 10px;
  border-radius: var(--radius-s);
  vertical-align: middle;
  white-space: nowrap;
}
.verified::before { content: "✓"; font-weight: 700; }

/* estrelas genéricas (avaliações) */
.stars { color: var(--bronze); font-size: .78rem; letter-spacing: 3px; }

/* atribuição mono genérica */
.who b { display: block; font-size: .84rem; font-weight: 600; color: var(--paper); }
.who span { font-size: .7rem; color: var(--muted-2); }

/* cartão de profissional (página profissionais) */
.prof-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 38px 36px;
  background: linear-gradient(170deg, rgba(255,255,255,.02), transparent);
  transition: border-color .3s ease, transform .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.prof-card:hover { border-color: rgba(198,161,92,.45); transform: translateY(-4px); }
.prof-card .pc-top { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.prof-card .pc-avatar {
  width: 56px; height: 56px; flex-shrink: 0;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--bronze-l);
  background: linear-gradient(150deg, rgba(198,161,92,.14), transparent);
}
.prof-card .pc-name { font-family: var(--serif); font-size: 1.15rem; color: var(--paper); font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prof-card .pc-role { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-top: 5px; }
.prof-card .pc-bio { font-size: .86rem; color: var(--muted); margin-bottom: 20px; flex: 1; }
.prof-card .pc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px dashed rgba(198,161,92,.2); padding-top: 16px; }
.prof-card .pc-rating { color: var(--bronze-l); font-family: var(--serif); font-size: .95rem; }
.prof-card .pc-rating small { font-family: var(--mono); font-size: .6rem; color: var(--muted-2); letter-spacing: .06em; }

/* profissional.html — variantes herdadas */
.prof-hero .pc-avatar { /* alias para .t-avatar */
  width: 92px; height: 92px; flex-shrink: 0;
  border: 1px solid var(--bronze);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 1.9rem; color: var(--bronze-l);
  background: linear-gradient(150deg, rgba(198,161,92,.14), transparent);
}
.prof-hero .pc-role { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze); margin-top: 6px; }
.prof-hero .pc-rating { margin-top: 10px; color: var(--bronze-l); font-family: var(--serif); font-size: 1.05rem; }
.prof-hero .bio { color: var(--muted); font-size: .92rem; margin-bottom: 26px; }
.prof-hero .pc-top { display: flex; gap: 24px; align-items: center; margin-bottom: 28px; }
.prof-hero .pc-top h1 { font-family: var(--serif); font-size: 2rem; color: var(--paper); }

/* planos — variantes herdadas */
.plan .p-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #171204;
  background: var(--bronze-grad);
  padding: 5px 14px;
  border-radius: var(--radius-s);
  margin-bottom: 14px;
}
.plan.featured { border: 1px solid rgba(198,161,92,.5); box-shadow: 0 30px 80px rgba(0,0,0,.4); }

/* ============ FUNIL DE VENDAS — kanban do admin ============ */
.dash-actions { display: flex; gap: 10px; align-items: center; }
.kanban { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 14px; align-items: start; margin-top: 4px; }
.kanban-col { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; min-height: 140px; }
.kanban-col.fechado { background: rgba(76,175,139,.05); }
.kanban-col.perdido { background: rgba(217,92,74,.04); }
.kanban-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.kanban-head h3 { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze-l); margin: 0; }
.k-count { font-family: var(--mono); font-size: .7rem; color: var(--bg); background: var(--bronze-grad); border-radius: var(--radius-s); padding: 2px 8px; min-width: 26px; text-align: center; }
.kanban-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 12px; margin-bottom: 10px; }
.k-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.k-top b { font-size: .86rem; color: var(--paper); }
.k-time { font-family: var(--mono); font-size: .58rem; color: var(--muted-2); white-space: nowrap; }
.k-wa a { font-family: var(--mono); font-size: .7rem; color: var(--bronze); letter-spacing: .04em; }
.k-wa { margin-top: 5px; }
.k-svc { font-size: .72rem; color: var(--muted); margin-top: 6px; font-style: italic; }
.k-notes { font-size: .7rem; color: var(--bronze-d); background: rgba(198,161,92,.08); border-radius: var(--radius-s); padding: 6px 8px; margin-top: 8px; }
.k-move { display: flex; gap: 6px; margin-top: 10px; }
.k-select { flex: 1; min-width: 0; }
.k-select option { background: var(--bg-2); color: var(--paper); }
.k-copy { display: block; width: 100%; margin-top: 8px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-l); background: transparent; border: 1px dashed rgba(198,161,92,.4); border-radius: var(--radius-s); padding: 7px 10px; cursor: pointer; transition: all var(--lux) .35s; }
.k-copy:hover { border-color: var(--bronze); background: rgba(198,161,92,.08); }
.k-note { display: flex; gap: 6px; margin-top: 8px; }
.k-note input { flex: 1; min-width: 0; }
.k-del { margin-top: 8px; text-align: right; }
.kanban-empty { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); text-align: center; padding: 22px 0; border: 1px dashed var(--line); border-radius: var(--radius-m); }

/* ============ GUIA DAS CHUVAS — documento impresso ============ */
.guarantee-doc .guia-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(142,108,47,.18); align-items: start; }
.guarantee-doc .guia-num { font-family: var(--mono); font-size: .72rem; color: var(--bronze-d); padding-top: 2px; }
.guarantee-doc .guia-body b { font-family: var(--serif); font-size: .96rem; color: var(--ink); font-weight: 600; }
.guarantee-doc .guia-body p { font-size: .82rem; color: #4a4231; margin: 4px 0 0; line-height: 1.5; }
.guarantee-doc .guia-custo { font-family: var(--mono); font-size: .66rem; color: var(--bronze-d); white-space: nowrap; padding-top: 3px; }

/* impressão — só o documento */
@media print {
  body { background: #fff; }
  .loader, .topbar, .site-header, .site-footer, .no-print, .whatsapp-float, .flashes { display: none !important; }
  main { padding: 0; }
  .guarantee-doc { box-shadow: none; border-color: #333; }
  .guarantee-doc p, .guarantee-doc .guia-body p { color: #222; }
  @page { margin: 14mm; }
}

/* ============================================================
   TEMA CLARO — marfim editorial (overrides do carvão v2.1)
   Texto que era claro sobre carvão passa a escuro sobre marfim.
   ============================================================ */

body { color: var(--ink); }
h1, h2, h3, .serif { color: var(--ink); }
a:hover { color: var(--bronze-d); }
.lede b { color: var(--ink); }

/* logo oficial — substitui a marca tipográfica */
.brand-logo { height: 46px; width: auto; display: block; }
.site-footer .brand-logo { height: 52px; }
.loader .l-logo { width: min(340px, 64vw); height: auto; }
.loader .l-line { margin-top: 4px; }

/* header — marfim translúcido */
.site-header {
  background: rgba(255, 253, 246, .9);
  box-shadow: 0 1px 0 rgba(198, 161, 92, .16), 0 16px 48px rgba(72, 56, 28, .1);
}
.brand-name { color: var(--ink); }
.nav-links a { color: var(--muted); }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.menu-toggle { color: var(--ink); }
.user-chip { color: var(--ink); }

/* preloader — marfim */
.loader { background: #f4efe5; }
.loader .l-sub { color: var(--muted); }

/* hero — BALCÃO DE LUZ em marfim: 5 camadas âmbar + placa de legenda + chips (CG-3) */
.hero-media-photo {
  background: linear-gradient(180deg, #eee7d7 0%, #e5ddca 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 224, .55),
    0 0 0 1px rgba(138, 109, 59, .3),
    0 2px 0 rgba(230, 207, 154, .35),
    0 44px 90px rgba(72, 56, 28, .14),
    0 130px 220px -60px rgba(72, 56, 28, .22);
}
.hero-media-photo::before {
  background: linear-gradient(180deg, transparent 46%, rgba(95, 74, 38, .26) 100%);
}

.hero-chip { box-shadow: 0 18px 44px rgba(72, 56, 28, .2), var(--inner-glow); }
.hero-chip span { color: var(--paper-2); }

/* botões — texto bronze escuro nos outline/ghost */
.btn-outline { color: var(--bronze); border-color: rgba(138, 109, 59, .4); }
.btn-outline:hover { background: rgba(138, 109, 59, .08); color: var(--bronze-d); }
.btn-ghost { color: var(--bronze); }
.btn-ghost:hover { background: rgba(138, 109, 59, .08); color: var(--bronze-d); }
.auth-alt a:hover { color: var(--bronze-d); }
.btn-dark { color: var(--ink); }

/* painéis e documentos — sombras âmbar suaves */
.guarantee-doc { box-shadow: 0 30px 80px rgba(72, 56, 28, .16); }
.auth-card { box-shadow: 0 34px 90px rgba(72, 56, 28, .14); }
.flash { box-shadow: 0 20px 50px rgba(72, 56, 28, .16); }
.plan.featured { box-shadow: 0 30px 80px rgba(72, 56, 28, .14); }
.commit { box-shadow: none; }

/* superfícies — texturas bronze subtil em vez de brilho branco */
.kanban-col { background: rgba(138, 109, 59, .045); }
.prof-hero { background: linear-gradient(170deg, rgba(138,109,59,.05), transparent); }
.panel { background: linear-gradient(170deg, rgba(138,109,59,.05), transparent); }
.stat-card { background: linear-gradient(165deg, rgba(138,109,59,.05), transparent); }

/* texto que usava marfim-escuro sobre carvão — agora muted sobre marfim */
.testi-sm blockquote { color: var(--muted); }
.avaliacao-item p { color: var(--muted); }
.plan li { color: var(--muted); }

/* formulários — campos marfim com texto escuro */
.field input, .field select, .field textarea {
  background: rgba(255, 253, 246, .85);
  border-color: rgba(138, 109, 59, .3);
  color: var(--ink);
}
.field label { color: var(--muted); }
.field:focus-within label { color: var(--bronze-d); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field select option, .k-select option { color: var(--ink); }
.k-select { color: var(--ink); }
.k-note input { background: rgba(255, 253, 246, .85); border-color: rgba(138, 109, 59, .3); color: var(--ink) !important; }

/* rodapé — marfim profundo */
.site-footer { background: #efe8d9; }
.footer-grid a:hover { color: var(--ink); }
.footer-big { -webkit-text-stroke: 1px rgba(138, 109, 59, .3); }

/* detalhes que eram brancos sobre dourado/verde — mantêm o claro */
.whatsapp-float, .whatsapp-float:hover { color: #fff; }

/* ============================================================
   MODERNO 2026 — CSS Snapshot 2026 / Interop 2026
   Scroll-driven animations · Anchor Positioning · View
   Transitions por elemento · Container Queries · linear() ·
   @starting-style · color-mix().
   REGRA do briefing: recursos novos SÓ sob feature detection
   (@supports) com fallback — nunca quebram browsers antigos.
   ============================================================ */

:root { color-scheme: light; }

/* scrollbar — bronze sobre marfim (era carvão do tema antigo) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b3925a, #8a6d3b);
  border-radius: 5px;
  border: 2px solid var(--bg);
}

/* ---- 1 · VIEW TRANSITIONS POR ELEMENTO (Chrome/Edge 126+) ----
   A logo do header persiste entre páginas (nunca "salta");
   a fotografia do hero faz a sua própria cortina, além do
   blackout de palco do root já existente. */
.site-header .brand-logo { view-transition-name: cg-brand; }
.hero-media-photo { view-transition-name: cg-hero; }

::view-transition-old(cg-brand),
::view-transition-new(cg-brand) { animation-duration: .5s; }
::view-transition-old(cg-hero) { animation: cg-hero-out .55s var(--lux) both; }
::view-transition-new(cg-hero) { animation: cg-hero-in  .55s var(--lux) both; }

@keyframes cg-hero-out { from { opacity: 1; transform: scale(1); }   to { opacity: 0; transform: scale(.965); } }
@keyframes cg-hero-in  { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* ---- 2 · SCROLL-DRIVEN — régua de leitura (progresso da página) ----
   animation-timeline: scroll(root) — sem um único JS listener. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 110;
  pointer-events: none;
  transform-origin: 0 50%;
  background: var(--bronze-grad);
  box-shadow: 0 0 14px rgba(198, 161, 92, .6);
  animation: cg-progress linear both;
  animation-timeline: scroll(root);
}
@keyframes cg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports not (animation-timeline: scroll(root)) { .scroll-progress { display: none; } }

/* ---- 3 · SCROLL-DRIVEN — parallax do vídeo do hero ----
   O vídeo respira sobre o marfim enquanto a página desce:
   escala base 1.12 garante cobertura total durante o deslize. */
@supports (animation-timeline: view()) {
  .final-cta .ghost {
    animation: cg-ghost-f linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 75%;
  }
}
@keyframes cg-ghost-f { from { transform: translateY(10%); } to { transform: translateY(-10%); } }

/* ---- 4 · linear() — o luxo ganha uma mola subtil (overshoot ~4%) ----
   Substitui o cubic-bezier dos reveals por uma curva de movimento
   com ressalto mínimo — a mesma elegância, mais "viva". */
@supports (transition-timing-function: linear(0, 1)) {
  .reveal, .reveal-left, .reveal-right {
    transition-timing-function: linear(0, .08 7%, .18 13%, .3 19%, .43 26%,
      .56 33%, .68 40%, .79 48%, .88 56%, .95 64%, 1.01 72%, 1.04 80%,
      1.02 88%, 1 94%);
  }
}

/* ---- 5 · CONTAINER QUERIES — o processo reflui pelo próprio espaço ----
   Antes: style inline fixo em 5 colunas a qualquer largura (o @media
   1080 nunca mandava). Agora: 5 → 3 → 2 → 1 conforme o espaço REAL
   do .wrap; browsers sem CQ mantêm o comportamento antigo (3→1). */
.wrap:has(> .process) { container-type: inline-size; }

@supports (container-type: inline-size) {
  .process { grid-template-columns: repeat(5, 1fr); }
  @container (max-width: 1000px) {
    .process { grid-template-columns: repeat(3, 1fr); }
    .process-step:nth-child(3) { border-right: none; }          /* fim da 1ª fila */
    .process-step:nth-child(3)::after { display: none; }        /* seta não aponta para nada */
  }
  @container (max-width: 640px) {
    .process { grid-template-columns: repeat(2, 1fr); }
    .process-step { border-right: none; }
    .process-step:nth-child(odd):not(:last-child) { border-right: 1px solid var(--line); }
    .process-step::after { display: none; }
  }
  @container (max-width: 420px) {
    .process { grid-template-columns: 1fr; }
  }
}

/* ---- 6 · ANCHOR POSITIONING ----
   a) tooltip do WhatsApp declarativamente ancorado ao botão
      (position-area quando existe; posição absoluta clássica como
      fallback universal — degrada sem CSS novo);
   b) os hero-chips declaram a relação geométrica com o hero-media
      via anchor() — mesmo resultado, ligação declarativa. */
.wa-tip {
  position: absolute;
  right: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  z-index: 251;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 88%, var(--bronze));
  background: color-mix(in srgb, var(--ink) 94%, var(--bronze));
  border: 1px solid rgba(198, 161, 92, .45);
  padding: 10px 18px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--lux), transform .3s var(--lux), visibility .3s;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(23, 19, 12, .35);
}
.whatsapp-float:hover .wa-tip,
.whatsapp-float:focus-visible .wa-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@supports (anchor-name: --wa-anchor) {
  .whatsapp-float { anchor-name: --wa-anchor; }
  .wa-tip { position-anchor: --wa-anchor; }
  @supports (position-area: left center) {
    .wa-tip { right: auto; position-area: left center; transform: translateX(8px); }
    .whatsapp-float:hover .wa-tip,
    .whatsapp-float:focus-visible .wa-tip { transform: translateX(0); }
  }
  @supports (inset-area: left center) {
    .wa-tip { right: auto; inset-area: left center; transform: translateX(8px); }
    .whatsapp-float:hover .wa-tip,
    .whatsapp-float:focus-visible .wa-tip { transform: translateX(0); }
  }
}

@supports (anchor-name: --hero-media) {
  .hero-media { anchor-name: --hero-media; }
  .hero-chip.c1, .hero-chip.c2 { position-anchor: --hero-media; }
  .hero-chip.c1 { top: calc(anchor(top) + 26px);    left: calc(anchor(left) - 16px); }
  .hero-chip.c2 { bottom: calc(anchor(bottom) + 40px); right: calc(anchor(right) - 10px); }
}

/* ---- 7 · @starting-style — as flash messages entram com elegância ----
   (aparecem no load após login/logout; antes surgiam secas) */
@supports (transition-behavior: allow-discrete) {
  .flash { transition: opacity .5s var(--lux), transform .5s var(--lux); }
  @starting-style {
    .flash { opacity: 0; transform: translateY(-10px); }
  }
}

/* ---- redução de movimento — tudo novo desliga ----
   (a mesma cortesia que o site já prestava aos reveals) */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .final-cta .ghost { animation: none; }
  .wa-tip, .flash { transition: none; }
}

/* ============================================================
   PADRÃO ULTRA LUXO — CONGOIS (2026-08-13)
   8 patches aprovados por 5 juízes adversários (skill
   /padrao-ultra-luxo, modo completo). Camada anexada: nunca
   editar os blocos anteriores; esta camada vence por ordem.
   ============================================================ */

/* ---- CG-1 · ENCERRAMENTO EM REVISTA — final-cta em marfim profundo
   (era carvão-escuro sobre marfim — quebrado), radiais de champagne,
   colofão de fecho com NIF, losango do ornamento sobre marfim ---- */
.final-cta {
  border-color: rgba(138, 109, 59, .3);
  background:
    radial-gradient(720px 360px at 50% -24%, rgba(198, 161, 92, .2), transparent 72%),
    radial-gradient(520px 260px at 88% 118%, rgba(138, 109, 59, .12), transparent 68%),
    radial-gradient(520px 260px at 12% 118%, rgba(138, 109, 59, .12), transparent 68%),
    linear-gradient(170deg, var(--bg-2), var(--bg-3) 52%, var(--bg));
}
.final-cta::before { border-color: rgba(138, 109, 59, .3); }
.final-cta.ornate::after { background: var(--bg-2); color: var(--bronze-d); }
.final-cta .display { color: var(--ink); }
.final-cta .lede { color: var(--muted); }
.final-cta .fine { color: var(--muted-2) !important; }
.final-cta .chancela { border-top-color: rgba(138, 109, 59, .28); }
.final-cta .close-colophon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.final-cta .close-colophon::before,
.final-cta .close-colophon::after {
  content: "";
  width: 64px;
  height: 1px;
  flex: none;
}
.final-cta .close-colophon::before { background: linear-gradient(90deg, transparent, rgba(138, 109, 59, .45)); }
.final-cta .close-colophon::after  { background: linear-gradient(90deg, rgba(138, 109, 59, .45), transparent); }

/* ---- CG-2 · MENU MÓVEL DE REVISTA — marfim com blur, pauta entre
   itens, numerais bronze-d (AA), entrada em cascata 01→06.
   (corrige links ≈1.4:1 sobre carvão do menu antigo) ---- */
@media (max-width: 720px) {
  .nav-links {
    background: rgba(255, 253, 246, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 18px 32px 26px;
    gap: 0;
    border-bottom: 1px solid rgba(138, 109, 59, .28);
    box-shadow: 0 30px 60px rgba(72, 56, 28, .18);
    color-scheme: light;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(138, 109, 59, .16);
  }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 15px 0;
    font-size: .84rem;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .32s var(--lux), transform .32s var(--lux), color .25s ease;
  }
  .nav-links a::before { color: var(--bronze-d); }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a.active { color: var(--bronze-d); }
  .nav-links.open a { opacity: 1; transform: none; }
  .nav-links.open li:nth-child(1) a { transition-delay: .05s; }
  .nav-links.open li:nth-child(2) a { transition-delay: .1s; }
  .nav-links.open li:nth-child(3) a { transition-delay: .15s; }
  .nav-links.open li:nth-child(4) a { transition-delay: .2s; }
  .nav-links.open li:nth-child(5) a { transition-delay: .25s; }
  .nav-links.open li:nth-child(6) a { transition-delay: .3s; }
}



/* ---- CG-5 · CARIMBOS DO CICLO — timbre do documento (respiro no
   cabeçalho) + carimbo REGISTADO na página de solicitação registada
   (outline duplo de tinta, rotação de -2°, nowrap) ---- */
.guarantee-doc .doc-head { gap: 10px; flex-wrap: wrap; }
.doc-sig .stamp {
  flex: 0 0 auto;
  align-self: center;
  padding: 7px 14px;
  border: 1.5px solid rgba(138, 109, 59, .5);
  outline: 1.5px solid rgba(138, 109, 59, .45);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--bronze-d);
  background: rgba(138, 109, 59, .05);
  font-size: .58rem;
  letter-spacing: .18em;
  transform: rotate(-2deg);
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .guarantee-doc .doc-sig { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ---- CG-6 · PAUTA CUNHADA — o valor em metal gravado: gradiente
   escurecido local (stops bronze-l → bronze → bronze-d cobrem 3:1
   em texto grande), itálico 600, prefixo -webkit, fallback bronze-d
   nos browsers sem background-clip: text ---- */
.hero .hero-fine b {
  font-style: italic;
  font-weight: 600;
  color: var(--bronze-d);
}
.plan .p-price {
  font-style: italic;
  color: var(--bronze-d);
}
@supports (background-clip: text) {
  .hero .hero-fine b,
  .plan .p-price {
    background: linear-gradient(115deg, var(--bronze-l) 0%, var(--bronze) 55%, var(--bronze-d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bronze-d);
  }
}

/* ---- CG-7 · FIO DE PRUMO — o guia de leitura do hero ganha hairline
   (::before), cor bronze-d (AA) e o prumo enche com o scroll REAL
   (animation-timeline: view(), zero JS; sem suporte → gota antiga) ---- */
.hero-scroll { gap: 16px; color: var(--bronze-d); }
.hero-scroll::before {
  content: "";
  width: 42px; height: 1px;
  background: var(--bronze);
  opacity: .55;
}
.hero-scroll::after {
  width: 2px; height: 54px;
  background: linear-gradient(180deg, var(--bronze-d), transparent);
}
@supports (animation-timeline: view()) {
  .hero-scroll::after {
    animation: cg-prumo linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 55%;
  }
}
@keyframes cg-prumo {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ---- CG-8 · TIPOGRAFIA DE CASA — prosa de editora (text-wrap
   balance/pretty + hifenização nos blocos longos), sweep micro-AA
   (bronze-d em mono pequeno), testemunhos em serif com gesto de
   hover e coluna marginal ancorada por filete.
   Corrige 2 bugs do tema claro: .testi-feature blockquote e
   .verify-step b eram var(--paper) ≈1.15:1 sobre marfim — invisíveis. ---- */
html { text-rendering: optimizeLegibility; }
h1, h2, .display { text-wrap: balance; }
.lede, .testi-feature blockquote { text-wrap: pretty; }
.lede, .guarantee-doc p, .testi-feature blockquote {
  -webkit-hyphens: auto;
  hyphens: auto;
}
.tag { color: var(--bronze-d); }
.topbar b { color: var(--bronze-d); }
.marquee-item b { color: var(--bronze-d); }
.verify-step .v-num { color: var(--bronze-d); }
.verify-step b { color: var(--ink); }
.tbl th { color: var(--bronze-d); }
.team-card .t-role { color: var(--bronze-d); }
.site-footer h4 { color: var(--bronze-d); }
.chancela b { color: var(--bronze-d); }
.testi-feature blockquote { color: var(--ink); }
.testi-stack { border-left: 1px solid var(--line); padding-left: 22px; }
.testi-sm {
  transition: opacity 1s var(--lux), transform 1.1s var(--lux), background .4s var(--lux), padding-left .4s var(--lux);
}
.testi-sm:hover {
  background: linear-gradient(90deg, rgba(138, 109, 59, .07), transparent 70%);
  padding-left: 12px;
}
.testi-sm blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

/* ---- redução de movimento — as animações novas da camada ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll::after { animation: none; }
  .nav-links a { opacity: 1; transform: none; transition: none; }
  .nav-links.open li a { transition-delay: 0s; }
  .testi-sm { transition: none; }
}

/* ---- P-1 (polimento 13/08, skill padrao-ultra-luxo Fase 9) — diploma centrado na pauta ---- */
/* O documento de garantia (720px) ficava encostado à esquerda com ~456px de dead-space
   à direita. Centrado, vira artefacto em vitrina — coerente com o balcão de luz (CG-3)
   e o colofão (CG-1). Chancela/cortina/marca d'água seguem o doc (ancoragem relativa);
   mobile inalterado (o doc já ocupa a coluna). */
.guarantee-doc { margin-inline: auto; }

/* ---- FONTES SELF-HOST (auditoria 13/08) — sem CDN externo: o 1º paint esperava 7.8s pelo Google Fonts em rede bloqueada ---- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-400-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-400-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-500-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-500-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-500-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-600-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-600-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-600-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/inter-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/inter-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/inter-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/inter-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/playfair-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/playfair-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-normal-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/playfair-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   FAQ (SEO 13/08) — perguntas numeradas em pauta regrada
   ============================================================ */
.faq-list {
  max-width: 880px;
  margin-inline: auto;
  counter-reset: faq;
}
.faq-item {
  position: relative;
  padding: 26px 0 26px 64px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.faq-item:first-child { border-top: none; }
.faq-item::before {
  counter-increment: faq;
  content: "0" counter(faq);
  position: absolute;
  left: 0;
  top: 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--bronze-d);
}
.faq-item h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--ink);
  text-wrap: balance;
}
.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.7;
  max-width: 68ch;
}
.faq-item p a {
  color: var(--bronze-d);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-item p em { color: var(--ink); font-style: italic; }
@media (max-width: 640px) {
  .faq-item { padding-left: 0; }
  .faq-item::before { display: none; }
}

/* ============================================================
   CITAÇÃO DE IA (SEO 13/08) — h2-pergunta + prosa autocontida
   ============================================================ */
.cite-block {
  max-width: 880px;
  margin-inline: auto;
  padding: 8px 0 4px;
  text-align: left;
}
.cite-block h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}
.cite-block p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
  max-width: 70ch;
  text-wrap: pretty;
}

/* ============================================================
   FACE 3D (13/08) — planta técnica + tilt (WebGL removido 15/08)
   Camada final — nunca reescrever blocos anteriores.
   · blueprint: planta técnica que se desenha com o scroll
   · tilt: profundidade nos itens de índice (JS em app.js)
   ============================================================ */


.process-sec { position: relative; overflow: hidden; }
.process-sec .wrap { position: relative; z-index: 1; }
.blueprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
}
.bp-gridline { stroke: rgba(138, 109, 59, .14); stroke-width: 1; }
.bp-line { stroke: rgba(95, 74, 38, .55); stroke-width: 1; fill: none; }
.bp-text {
  fill: rgba(95, 74, 38, .6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
}
/* o desenho técnico traça-se quando entra no ecrã (scroll-driven);
   sem suporte a view() fica simplesmente visível (fallback limpo) */
@supports (animation-timeline: view()) {
  .bp-line {
    stroke-dasharray: 2600;
    stroke-dashoffset: 2600;
    animation: cg-bp-draw 1s linear both;
    animation-timeline: view();
  }
  .bp-1 { animation-range: entry 10% cover 30%; }
  .bp-2, .bp-3 { animation-range: entry 18% cover 38%; }
  .bp-4 { animation-range: entry 26% cover 46%; }
  .bp-5, .bp-6 { animation-range: entry 34% cover 54%; }
  .bp-text {
    opacity: 0;
    animation: cg-bp-in .5s linear both;
    animation-timeline: view();
    animation-range: entry 42% cover 62%;
  }
}
@keyframes cg-bp-draw { to { stroke-dashoffset: 0; } }
@keyframes cg-bp-in { to { opacity: 1; } }

/* --- tilt de profundidade (JS em app.js; sem JS nada muda) --- */
.index-item,
.commit {
  transition: background .3s ease, padding-left .5s var(--lux),
              transform .55s var(--lux), box-shadow .55s var(--lux);
  transform-style: preserve-3d;
}
.index-item:hover,
.commit:hover { z-index: 5; }

/* --- movimento lento e seguro (regras permanentes do PADRÃO) --- */
@media (prefers-reduced-motion: reduce) {

  .bp-text { animation: none; opacity: 1; }
  .index-item, .commit { transition: none; }
}

/* ============================================================
   CG ENGINE V2.1 — CAMADA ENGINE (14/08/2026)
   A "nova forma" do CONGOIS em todo o site: a engine não
   substitui o PADRÃO — dirige-o. Esta camada é ANEXADA ao
   fim do style.css; nunca reescreve blocos anteriores.
   Sem JS, nada aqui muda: os selectors dependem de atributos
   e variáveis que só a engine escreve.
   Regras permanentes: sem emoji, prefers-reduced-motion
   coberto, gate pointer:fine, só ADICIONA (nunca remove
   classes/estilos do app.js).
   ============================================================ */

/* 0 · variáveis da sessão — dom.js escreve no :root */
:root {
  --cg-density: 1;      /* 0..1  — quantidade de movimento */
  --cg-info: 1;         /* 0|1|2 — quantidade de informação */
  --cg-camera: 1;       /* 0.5|1|1.4 — estilo de câmara */
  --cg-dust: 0.05;      /* 0..0.08 — ambiência em pó de construção */
}


/* 2 · dust — ambiência de obra (véu fixo de pó, nunca interage) */
[data-cg-ambient]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.1px 1.1px at 8%  18%, rgba(168,131,74,.9), transparent 100%),
    radial-gradient(1.4px 1.4px at 23% 64%, rgba(168,131,74,.8), transparent 100%),
    radial-gradient(0.9px 0.9px at 41% 31%, rgba(138,109,59,.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 58% 78%, rgba(168,131,74,.8), transparent 100%),
    radial-gradient(1.0px 1.0px at 74% 12%, rgba(138,109,59,.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 91% 47%, rgba(168,131,74,.8), transparent 100%);
  background-repeat: repeat;
  background-size: 260px 260px;
  opacity: var(--cg-dust, 0.05);
  animation: cg-dust-float 26s linear infinite;
}
@keyframes cg-dust-float {
  from { background-position: 0 0; }
  to   { background-position: 260px 130px; }
}
/* as rotas de formulário e segurança recebem dust zero pelo dom.js
   (--cg-dust=0) — o conteúdo fala sozinho; ambiência nunca polui */

/* 3 · stagger — atraso de reveal dirigido (só pré-reveal; RM zera) */
body.cg-engine-on .reveal[data-cg-stagger]:not(.visible) {
  transition-delay: calc(var(--cg-i, 0) * 70ms * var(--cg-density, 1));
}
/* quando .visible chega (app.js), o delay zera — hovers nunca atrasam */

/* 4 · câmara — parallax discreto em [data-cg-parallax] */
[data-cg-parallax] {
  transform: translate3d(calc(var(--cg-camera, 1) * -0.4%),
                         calc(var(--cg-camera, 1) * -0.3%), 0);
  transition: transform .9s var(--lux);
}

/* 5 · anel de foco — routeProfile form (o bug V2 "data-cg-mode=focused"
      está eliminado: o selector é body[data-cg-route-profile="form"]) */
body[data-cg-route-profile="form"] [data-cg-focus] {
  border-radius: 2px;
  transition: box-shadow .3s var(--lux), border-color .3s var(--lux);
}
body[data-cg-route-profile="form"] [data-cg-focus]:focus-within {
  box-shadow: 0 0 0 3px rgba(168,131,74,.22), 0 0 0 1px var(--bronze-l);
}

/* 6 · blueprint — o passo ativo iluminado (só em tour) */
body.cg-engine-on .process-step.cg-step-active {
  border-color: rgba(168,131,74,.55);
  background: linear-gradient(135deg, rgba(168,131,74,.07), transparent 62%);
}
body.cg-engine-on .process-step.cg-step-active .num {
  color: var(--bronze-l);
  border-color: var(--bronze-l);
}

/* 7 · TIMELINE — /empresa (só com engine; sem JS = lista simples) */
body.cg-engine-on .cg-timeline {
  list-style: none; margin: 0; padding: 0;
  max-width: 760px; position: relative;
}
body.cg-engine-on .cg-timeline::before {
  content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--bronze-d), var(--bronze-l) 30%, var(--bronze-d) 100%);
  opacity: .5;
}
body.cg-engine-on .cg-tl-step {
  position: relative; padding-left: 52px;
  padding-bottom: calc(30px + 14px * var(--cg-density, 1));
  transition: padding-bottom .5s var(--lux);
}
body.cg-engine-on .cg-tl-step::before {
  content: ""; position: absolute; left: 8px; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--bronze-l);
  background: var(--marfim, #f4efe5);
  transition: background .4s var(--lux), box-shadow .4s var(--lux);
}
body.cg-engine-on .cg-tl-step.cg-step-active::before {
  background: var(--bronze-l);
  box-shadow: 0 0 0 5px rgba(168,131,74,.16);
}
body.cg-engine-on .cg-tl-date {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-l);
}
body.cg-engine-on .cg-tl-step h3 { margin: 0 0 8px; font-size: 1.3rem; }
body.cg-engine-on .cg-tl-step p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 560px; }
body.cg-engine-on .cg-tl-meta {
  border-left: 2px solid rgba(168,131,74,.35);
  padding-left: 14px;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--lux), opacity .5s var(--lux),
              padding .5s var(--lux);
}
body.cg-engine-on .cg-tl-step[data-cg-meta-open] .cg-tl-meta {
  max-height: 80px; opacity: 1;
  padding-top: 8px; padding-bottom: 8px;
}

/* 8 · CARDS — informação dirigida + spotlight de vitrine */
[data-cg-card][data-cg-info="0"] .ii-meta,
[data-cg-card][data-cg-info="0"] .t-stats { display: none; }
body.cg-engine-on [data-cg-card].cg-spotlight {
  border-color: rgba(168,131,74,.6);
  box-shadow: 0 0 0 1px rgba(168,131,74,.35), 0 18px 44px rgba(95,74,38,.12);
}
body.cg-engine-on [data-cg-card] { transition: border-color .4s var(--lux), box-shadow .4s var(--lux); }

/* 9 · prefers-reduced-motion — anula MOVIMENTO não essencial e todo
      loop visual contínuo da engine — NUNCA funcionalidade */
@media (prefers-reduced-motion: reduce) {
  body.cg-engine-on .reveal[data-cg-stagger]:not(.visible) { transition-delay: 0ms !important; }
  [data-cg-ambient]::before { animation: none; }
  [data-cg-parallax] { transform: none; transition: none; }
  .cg-tl-step, .cg-tl-meta, [data-cg-focus] { transition: none !important; }
}

/* 10 · gate pointer:coarse — sem parallax em toque */
@media (pointer: coarse) {
  [data-cg-parallax] { transform: none; }
}

/* ============================================================
   11 · CORRECÇÕES DE LAYOUT (camada ENGINE, anexada ao fim)
   Bugs pré-existentes apanhados pelos gates mobile novos
   (test_engine_smoke) — nunca tocam nos blocos anteriores,
   apenas restauram o comportamento correcto:

   a) .meta-grid: 3 colunas 1fr em mobile esticam o track do
      .prof-page (min-content dos meta-box 115+108+95+gap > 326)
      → overflow horizontal 81px em /empresa. minmax(0,1fr)
      zera a contribuição de min-content — os boxes encolhem.
   b) .wa-tip: o anchor positioning (bloco 6) posiciona o tooltip
      em right≈466px em QUALQUER viewport (CB de 54px resolve mal
      no Chromium) — o tooltip aparece no meio da página no hover.
      Restaurado o fallback clássico right: calc(100% + 18px),
      que posiciona sempre à esquerda do botão, dentro do viewport.
   ============================================================ */

@media (max-width: 720px) {
  /* especificidade .prof-hero .meta-grid (0,2,0) — precisa da mesma
     (a minha regra .meta-grid sozinha perdia e o track voltava a
     esticar; o minmax zera o min-content dos meta-box) */
  .prof-hero .meta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* os grid items do .prof-page também contribuem com o seu
     min-content para o track 1fr — min-width: 0 permite encolher */
  .prof-page > * { min-width: 0; }
  /* c) /proposta: o CTA WhatsApp (.btn base é white-space: nowrap)
     com texto longo estica a 393px num content de ~264 → overflow
     66px. Quebra em 2 linhas e limita ao content. */
  .btn-outline { white-space: normal; max-width: 100%; }
}

.whatsapp-float { anchor-name: initial; }
.wa-tip { position-anchor: initial; }
@supports (position-area: left center) {
  .wa-tip { position-area: initial; inset-area: initial; }
}

/* ============================================================
   12 · CG VISIBLE — a nova forma VISÍVEL (14/08/2026)
   Resposta ao utilizador: a CG ENGINE era dirigida por sinais e
   subtil de mais — esta camada torna a transformação perceptível
   em TODO o site, mantendo os contratos (--cg-dust ≤ 0.08, RM,
   pointer:fine, sem emoji, sem JS nada muda — tudo vive atrás de
   body.cg-engine-on / atributos que a engine escreve).
   ANEXADA ao fim; nunca reescreve blocos anteriores.
   ============================================================ */

/* a) GRELHA TÉCNICA DE PLANTA — fundo vivo do site inteiro.
      Background-image no próprio body: atrás de todo o conteúdo,
      custo zero, cor de fundo intocada. --cg-grid regula por modo:
      exploration/vitrine acendem, essential apaga (foco total). */
:root { --cg-grid: .05; }
body[data-cg-mode="exploration"] { --cg-grid: .07; }
body[data-cg-mode="vitrine"]     { --cg-grid: .07; }
body[data-cg-mode="essential"]   { --cg-grid: 0; }
body.cg-engine-on {
  background-image:
    repeating-linear-gradient(0deg,  rgba(138,109,59,var(--cg-grid)) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(138,109,59,var(--cg-grid)) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(138,109,59,calc(var(--cg-grid) * .6)) 0 1px, transparent 1px 480px),
    repeating-linear-gradient(90deg, rgba(138,109,59,calc(var(--cg-grid) * .6)) 0 1px, transparent 1px 480px);
}

/* b) CANTOS DE OBRA — moldura de planta em cada cabeçalho de secção
      (geometria pura, sem cotas — nada inventado; .section-head é
      sempre esquerdo em todo o site, nunca center) */
body.cg-engine-on .section-head { position: relative; padding-left: 36px; }
body.cg-engine-on .section-head::before {
  content: ""; position: absolute; left: 2px; top: 2px;
  width: 22px; height: 22px;
  border-top: 1px solid rgba(168,131,74,.5);
  border-left: 1px solid rgba(168,131,74,.5);
}
body.cg-engine-on .section-head::after {
  content: ""; position: absolute; right: 2px; bottom: 2px;
  width: 22px; height: 22px;
  border-right: 1px solid rgba(168,131,74,.35);
  border-bottom: 1px solid rgba(168,131,74,.35);
}

/* c) PRUMO DE SECÇÃO — o fio que enche com o scroll real em CADA
      cabeçalho (mesma linguagem do CG-7 do hero, agora global:
      "em todo o site"). Enche ao entrar em view, fica cheio. */
body.cg-engine-on .section-head .tag { position: relative; padding-left: 30px; }
body.cg-engine-on .section-head .tag::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -27px;
  width: 2px; height: 54px;
  background: linear-gradient(to bottom, var(--bronze-l), var(--bronze-d));
  transform-origin: top;
  animation: cg-sec-plumb 1.2s linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}
@keyframes cg-sec-plumb {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
body.cg-engine-on .section-head .tag::after {
  content: ""; position: absolute; left: -4px; top: 50%; margin-top: 25px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--bronze-l); background: var(--paper);
  animation: cg-sec-drop 1.2s linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}
@keyframes cg-sec-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* d) DUST MAIS VIVO — o pó do canteiro em 2 velocidades de deriva
      (contrato intacto: opacity = var(--cg-dust) ≤ 0.08) */
[data-cg-ambient]::before {
  background-image:
    radial-gradient(1.2px 1.2px at 6% 14%, rgba(168,131,74,.95), transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 62%, rgba(168,131,74,.85), transparent 100%),
    radial-gradient(1.0px 1.0px at 27% 34%, rgba(138,109,59,.95), transparent 100%),
    radial-gradient(1.3px 1.3px at 39% 84%, rgba(168,131,74,.85), transparent 100%),
    radial-gradient(1.1px 1.1px at 47% 18%, rgba(138,109,59,.9),  transparent 100%),
    radial-gradient(1.4px 1.4px at 58% 48%, rgba(168,131,74,.8),  transparent 100%),
    radial-gradient(1.0px 1.0px at 69% 76%, rgba(138,109,59,.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 78% 26%, rgba(168,131,74,.9),  transparent 100%),
    radial-gradient(1.5px 1.5px at 89% 58%, rgba(168,131,74,.8),  transparent 100%),
    radial-gradient(1.1px 1.1px at 95% 12%, rgba(138,109,59,.85), transparent 100%),
    radial-gradient(1.9px 1.9px at 33% 55%, rgba(168,131,74,.45), transparent 100%),
    radial-gradient(2.2px 2.2px at 71% 41%, rgba(168,131,74,.4),  transparent 100%);
  background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px,
                    240px 240px, 240px 240px, 240px 240px, 240px 240px,
                    240px 240px, 240px 240px, 520px 520px, 520px 520px;
  animation: cg-dust-drift 18s linear infinite;
}
@keyframes cg-dust-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 240px 120px, 240px 120px, 240px 120px, 240px 120px,
                              240px 120px, 240px 120px, 240px 120px, 240px 120px,
                              240px 120px, 240px 120px, 520px 260px, 520px 260px; }
}

/* e) DIRECTOR VISÍVEL — o modo de vitrine acende a montra */
body[data-cg-mode="vitrine"] .btn-gold {
  animation: cg-showcase 4.5s ease-in-out infinite;
}
@keyframes cg-showcase {
  0%, 100% { box-shadow: 0 10px 28px rgba(168,131,74,.16); }
  50%      { box-shadow: 0 10px 34px rgba(168,131,74,.36),
                         0 0 0 1px rgba(168,131,74,.45); }
}


/* g) prefers-reduced-motion — anula o movimento novo (nunca a
      informação); regra repetida AQUI por ser esta a camada que
      define as animações (a do bloco 9 vem antes na cascata) */
@media (prefers-reduced-motion: reduce) {
  body.cg-engine-on .section-head .tag::before,
  body.cg-engine-on .section-head .tag::after { animation: none; transform: none; opacity: 1; }
  body[data-cg-mode="vitrine"] .btn-gold { animation: none; }
  [data-cg-ambient]::before { animation: none; }
}

/* ============================================================
   BLOCO 13 — HERO SEM VÍDEO (14/08)
   O hero deixa de ter <video>: o mundo 3D é o único meio vivo e
   o poster (obra-poster.jpg) vira background da moldura — o
   fallback automático quando WebGL não está disponível.
   (14/08: o skyline global foi testado e REMOVIDO a pedido do
   usuário — a animação do hero fica só no hero; ver git log.)
   ============================================================ */

/* poster do hero = fundo da moldura (o canvas opaco cobre-o
   quando o mundo vive; canvas.remove() no fallback mostra-o) */
.hero-media-photo {
  background-image: url("../img/obra-poster.jpg");
  background-size: cover;
  background-position: center;
}

/* ============================================================
   BLOCO 14 — CANTEIRO DE JOGO (14/08, pedido "gráficos tipo jogo")
   O site conta a obra como um jogo de construção:
   · HUD .cg-quest — quest tracker fixo à direita: as fases do
     processo (01→05) acendem com o scroll e a barra vertical
     enche com o progresso da página (scroll-driven, zero JS).
   · Barras XP — as estatísticas do hero enchem como health bars
     (animation-timeline: view() — enchem quando entram).
   · Build-in — os passos do processo constroem-se ao entrar:
     o numeral sobe do chão, a caixa risca-se (ring inset).
   Camada 1: o HUD só existe em / (o quest.js cria-o só onde há
   .process-step) — confirmar antes de espalhar (lição 14/08).
   Só ADICIONA (app.js intacto); sem engine → nada disto existe;
   RM anula movimento, mantém estado; sem scroll-driven as
   barras ficam cheias (sem prejuízo).
   ============================================================ */

/* a) HUD — painel (o JS cria-o só com alvos; o CSS mostra-o só
      em pointer fino + ecrã largo; nunca bloqueia o conteúdo) */
.cg-quest {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 700;
  display: none;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
@media (pointer: fine) and (min-width: 1080px) {
  .cg-quest { display: flex; }
}

/* trilho + barra de progresso: enche com o scroll do documento */
.cg-quest-track {
  position: relative;
  width: 1px;
  height: 220px;
  background: rgba(138, 109, 59, .18);
  overflow: hidden;
}
.cg-quest-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bronze-l), var(--bronze-d));
  transform-origin: top;
  animation: cg-quest-fill 1s linear both;
  animation-timeline: scroll(root);
}
@keyframes cg-quest-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* itens: dot numerado + rótulo mono (mesma linguagem da nav) */
.cg-quest-items { display: flex; flex-direction: column; gap: 16px; }
.cg-quest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: .35;
  transition: opacity .35s var(--lux);
}
.cg-quest-dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(138, 109, 59, .45);
  background: rgba(244, 239, 229, .92);
  color: var(--bronze-d);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .05em;
  transition: background .35s var(--lux), border-color .35s var(--lux),
              color .35s var(--lux), box-shadow .35s var(--lux);
}
.cg-quest-label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze-d);
  white-space: nowrap;
}
/* estados: feito (cheio) · agora (acende + anel) · futuro (apagado) */
.cg-quest-item.cg-quest-done,
.cg-quest-item.cg-quest-now { opacity: 1; }
.cg-quest-item.cg-quest-done .cg-quest-dot,
.cg-quest-item.cg-quest-now .cg-quest-dot {
  background: var(--bronze);
  border-color: var(--bronze);
  color: var(--marfim, #f4efe5);
}
.cg-quest-item.cg-quest-now .cg-quest-dot {
  box-shadow: 0 0 0 3px rgba(138, 109, 59, .16);
}

/* b) barras XP — stats do hero enchem como health bars;
      sem suporte scroll-driven ficam cheias (sem prejuízo) */
body.cg-engine-on .hero .hero-fine span::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bronze-l), var(--bronze));
  transform-origin: left;
}
@supports (animation-timeline: scroll(root)) {
  body.cg-engine-on .hero .hero-fine span::after {
    transform: scaleX(0);
    animation: cg-xp-fill 1.2s linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}
@keyframes cg-xp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* c) build-in — o passo constrói-se ao entrar: o numeral sobe do
      chão (transform só no .num — o reveal do app.js é no passo,
      via transition: sem conflito) e um ring inset risca a caixa */
@supports (animation-timeline: view()) {
  body.cg-engine-on .process-step .num {
    animation: cg-build-num 1.5s cubic-bezier(.2, .7, .2, 1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 16%;
  }
  body.cg-engine-on .process-step {
    animation: cg-build-ring 1.5s linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 16%;
  }
}
@keyframes cg-build-num {
  from { transform: translateY(20px) scale(.7); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes cg-build-ring {
  from { box-shadow: inset 0 0 0 1px rgba(138, 109, 59, 0); }
  to   { box-shadow: inset 0 0 0 1px rgba(138, 109, 59, .35); }
}

/* d) RM — anula movimento, mantém estado: o HUD fica (é
      informação de progresso), as barras ficam cheias, os
      passos aparecem sem build-in */
@media (prefers-reduced-motion: reduce) {
  .cg-quest-bar,
  .hero .hero-fine span::after,
  .process-step .num,
  .process-step {
    animation: none !important;
  }
  .hero .hero-fine span::after { transform: scaleX(1); }
  .process-step .num { opacity: 1; transform: none; }
}

/* ============================================================
   CANTEIRO DE JOGO — camada 2 (14/08, alargado a todo o site
   a pedido do usuário): rótulos longos das outras rotas
   ("Naves e instalações industriais"...) cortam com ellipsis
   para o HUD caber sempre (mesma especificidade, vem depois).
   ============================================================ */
.cg-quest-label {
  max-width: 152px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   F12 — ORÇAMENTO DE BACKDROP (GPU): o blur é caro em integradas
   (Intel UHD medido 6–24fps). O Quality Manager stampa
   body[data-cg-tier] (dom.js); basic/off = o mínimo absoluto —
   o glass mantém a cor, perde o blur. Só ADICIONA (regra dom).
   ============================================================ */
body[data-cg-tier="basic"] .site-header,
body[data-cg-tier="basic"] .hero-chip,
body[data-cg-tier="basic"] .flash,
body[data-cg-tier="basic"] .nav-links,
body[data-cg-tier="off"] .site-header,
body[data-cg-tier="off"] .hero-chip,
body[data-cg-tier="off"] .flash,
body[data-cg-tier="off"] .nav-links {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ═══ 16 — OTIMIZAÇÃO COMPLETA (14/08): o navegador salta a pintura de
       conteúdo fora do ecrã (content-visibility:auto + altura estimada);
       as animações scroll-driven continuam — cada item renderiza ao
       entrar no viewport. Nunca no hero (LCP) nem no loader. ═══ */
@supports (content-visibility: auto) {
  main .index-list,
  main .process-step,
  main .faq-item,
  main .commit,
  main .team-card,
  main .cite-block,
  main .meta-box {
    content-visibility: auto;
    contain-intrinsic-size: auto 460px;
  }
}
@media (prefers-reduced-motion: reduce) {
  main .index-list,
  main .process-step,
  main .faq-item,
  main .commit,
  main .team-card,
  main .cite-block,
  main .meta-box {
    content-visibility: visible;
  }
}


/* ============================================================
   BLOCO 18 — HERO SEM IMAGEM (14/08, pedido "agora esta uma
   imagem no hero, retire")
   O poster (obra-poster.jpg) deixa de ser exibido na moldura —
   o hero fica só com o botão "Ver obra em 3D": o mundo assume a
   moldura no clique, sem WebGL fica a moldura vazia (scrim e
   molduras da composição mantêm-se).
   O bloco 13 fica na história; esta regra anula por ordem de
   cascata (mesma especificidade, anexada ao fim).
   ============================================================ */
.hero-media-photo {
  background-image: none;
}

/* ============================================================
   BLOCO 19 — LOGOTIPO NA MOLDURA (14/08, pedido "coloque o
   logotipo ali com um efeito de girar com boa qualidade e com
   uma sombra abaixo")
   Em repouso a moldura do hero mostra o logotipo oficial (as
   referências à obra — legenda "Obra em execução" e placa
   "Obra n.º — sob solicitação" — foram removidas a pedido).
   · Entrada com giro 3D (flip de moeda) — visível ao abrir.
   · Hover (pointer:fine): giro de 360° como uma moeda.
   · Sombra projetada abaixo — camadas difusas que "somem" no
     perfil do giro (efeito moeda real).
   Quando o mundo 3D vive (.ready), o logo esconde-se — o canvas
   opaco assume a moldura.
   RM: nada gira; só a sombra fica.
   ============================================================ */
.hero-media-photo .hero-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(330px, 58%);
  height: auto;
  object-fit: contain;
  filter: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 24px -12px rgba(72, 56, 28, .38),
    0 36px 64px -30px rgba(72, 56, 28, .5);
  animation: cg-logo-giro 3.6s cubic-bezier(.16, 1, .3, 1) .3s both;
}
@keyframes cg-logo-giro {
  from { transform: translate(-50%, -50%) perspective(900px) rotateY(-360deg); opacity: 0; }
  to   { transform: translate(-50%, -50%) perspective(900px) rotateY(0deg); opacity: 1; }
}
@media (pointer: fine) {
  .hero-media-photo .hero-logo:hover {
    animation: cg-logo-giro-hover 5s cubic-bezier(.33, 0, .4, 1);
  }
}
@keyframes cg-logo-giro-hover {
  from { transform: translate(-50%, -50%) perspective(900px) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) perspective(900px) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media-photo .hero-logo { animation: none; }
}

/* ============ QUESTOFF (14/08) — HUD de quest removido a pedido do usuário ============ */
/* "remova isso de todo site!" — as linhas do quest tracker fixo à direita
   sobrepunham-se ao texto da secção "O Método CONGOIS". O system quest.js
   já não cria o painel; esta camada anexada anula os blocos 14-15 (que
   ligavam display flex em ecrãs largos) mesmo com JS antigo em cache. */
.cg-quest {
  display: none !important;
}

/* ============ BP-OFF (14/08) — planta técnica removida da secção do processo ============ */
/* "tem linhas sobre esse texto, atrapalhando de ler!" — o desenho técnico
   (grid de 28px + traços da planta + "ESCALA 1:100 · CG — PROJETO") cruzava
   POR TRÁS do título e dos passos de "O Método CONGOIS" e o texto
   transparente deixava as linhas misturar-se com as letras (prova:
   elementFromPoint = .gold-em por cima, SVG com 5 traços na zona do h2).
   A secção fica limpa; os restantes desenhos do site intocados. */
.process-sec .blueprint { display: none; }

/* ============ V4 — CÂMERA E LUZ (14/08) — direção cinematográfica ============ */
/* 1 · cortina de obra — cada navegação é um corte de filme: cross-document
      View Transitions (Chrome 126+; sem suporte → navegação normal, o site
      fica intacto). A página que sai recua para cima com um pano, a que
      entra sobe do pano; o logótipo (cg-brand — view-transition-name do
      PADRÃO) viaja entre as duas. Regra: só ADICIONA. */
@supports (view-transition-navigation: auto) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: cg-cortina-sai .38s var(--lux) both; }
  ::view-transition-new(root) { animation: cg-cortina-entra .46s var(--lux) both; }
}
@keyframes cg-cortina-sai {
  to { opacity: 0; transform: translateY(-1.6%) scale(.995); }
}
@keyframes cg-cortina-entra {
  from { opacity: 0; transform: translateY(1.8%) scale(1.005); }
}

/* 2 · plano de câmara — o director aproxima os cabeçalhos com o modo:
      vitrine (scroll rápido) puxa o plano médio, essential sossega.
      O app.js não transforma .section-head (verificado) — só ADICIONA. */
.section-head {
  transform: scale(var(--cg-shot, 1));
  transform-origin: left top;
  transition: transform 1.2s var(--lux);
}
body[data-cg-mode="vitrine"] { --cg-shot: 1.012; }
body[data-cg-mode="essential"] { --cg-shot: 1.006; }

/* 3 · RM — a cortina vira instantânea, os planos não movem */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .section-head { transform: none; transition: none; }
}


/* ============ ÁTOMOS SÍNTESE-1000 (15/08) — melhorias no site real ============
   Y83 grão · Y80 radar · Y88 typewriter · Y67 elástico · Y90 footer-big · Y63 parallax */

/* Y83 — grão global (textura de papel sobre a marfim; soft-light) */

/* ---- SMART HEADER (átomo 16/08) — o cabeçalho cede o ecrã a descer ----
   O JS (atoms.js) só alterna .cg-hid; a transição é 100% CSS. */
.site-header { transition: transform .5s var(--lux); }
.site-header.cg-hid { transform: translateY(-100%); }

/* ---- VOLTAR AO TOPO (átomo 16/08) — visibilidade + anel de progresso
   de leitura 100% CSS scroll-driven (zero JS; sem suporte → não existe) ---- */
.to-top {
  position: fixed;
  right: 26px; bottom: 100px;          /* acima do WhatsApp flutuante */
  z-index: 240;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(12, 13, 16, .92);
  border: 1px solid rgba(198, 161, 92, .4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .35s ease, transform .35s var(--lux),
              border-color .3s ease, box-shadow .3s ease;
}
.to-top:hover {
  border-color: rgba(198, 161, 92, .85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(198, 161, 92, .35);
  transform: translateY(-2px);
}
.to-top svg { width: 44px; height: 44px; position: absolute; }
.to-top .tp-track { fill: none; stroke: rgba(198, 161, 92, .18); stroke-width: 2; }
.to-top .tp-prog {
  fill: none; stroke: var(--bronze); stroke-width: 2;
  stroke-dasharray: 119.38;            /* 2π×19 — circunferência do anel */
  stroke-dashoffset: 119.38;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.to-top .tp-arrow {
  color: var(--bronze-l);
  font-size: 1.05rem;
  line-height: 1;
  transform: translateY(-1px);
}
@supports (animation-timeline: scroll(root)) {
  .to-top {
    animation: cg-top-show linear both;
    animation-timeline: scroll(root);
    animation-range: 0 320px;          /* visível a partir de 320px de rolagem */
  }
  .to-top .tp-prog {
    animation: cg-top-ring linear both;
    animation-timeline: scroll(root);  /* o anel enche com o progresso total */
  }
}
@keyframes cg-top-show {
  from { opacity: 0; visibility: hidden; transform: translateY(12px); }
  1%, to { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes cg-top-ring { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .to-top { display: none; }           /* padrão do site: RM desliga scroll-driven */
}
#granoCanvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: .5;
}

/* Y80 — radar de obra (página segurança) */
.radar-sec {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  background:
    linear-gradient(180deg, rgba(15,16,20,.94), rgba(11,12,15,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,247,224,.06),
    0 0 0 1px rgba(198,161,92,.14);
  padding: 34px 38px 30px;
  overflow: hidden;
}
.radar-canvas { display: block; width: 100%; height: 300px; }
.radar-label {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bronze);
}
.radar-label::before { content: "◆ "; }
@media (max-width: 720px) {
  .radar-sec { padding: 22px 14px 20px; }
  .radar-canvas { height: 240px; }
}

/* Y88 — typewriter (Compromisso de Execução) */
.tw-w { opacity: 0; transition: opacity .18s ease; }
.tw-w.on { opacity: 1; }
.tw-w.neg { color: var(--bronze-d); font-weight: 700; }
.tw-w.lit { opacity: 1; }
.tw-caret {
  display: inline-block;
  width: 1px; height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--bronze);
  opacity: 0;
}

/* Y67 — texto elástico (h2 dos depoimentos) */
#elasticWord { display: inline-block; will-change: transform; }

/* Y90 — footer-big ergue-se com o scroll (perspective CSS, zero WebGL) */
.site-footer { perspective: 800px; }
.footer-big { transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .footer-big { transform: none !important; }
}

/* ============ BRILHO DE OBRA (18/08) — placa de obra no hero + régua do
   processo + hover premium nos cards. Tudo camada anexada ao fim (padrão
   do projeto: anexar vence por ordem; nunca editar blocos anteriores).
   Zero WebGL, zero invenção, RM → estado estático. ============ */

/* --- 1. Placa de obra: o registo-ledger do hero vira placa com moldura
   de segurança (cantos de esquadro + hachuras diagonais + etiqueta) --- */
.hero .hero-fine {
  position: relative;
  max-width: 640px;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(198, 161, 92, .055) 0 10px, transparent 10px 20px),
    var(--bg);
  padding: 20px 22px 18px;
  box-shadow: 0 16px 38px rgba(72, 56, 28, .12);
}
.hero .hero-fine::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(198, 161, 92, .30);
  pointer-events: none;
}
.hero .hero-fine::after {
  content: "CG · DADOS DA OBRA";
  position: absolute; top: -9px; left: 16px;
  background: var(--bg);
  padding: 0 10px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--bronze);
}
/* selo de carimbo: anel de texto CG a girar lentamente (SVG puro) */
.hero .hero-fine .hero-seal {
  position: absolute;
  right: -18px; top: -30px;
  width: 92px; height: 92px;
  z-index: 3;
  animation: cg-seal-giro 30s linear infinite;
  filter: drop-shadow(0 4px 12px rgba(72, 56, 28, .28));
}
@keyframes cg-seal-giro { to { transform: rotate(360deg); } }
.seal-ring { fill: none; stroke: var(--bronze); stroke-width: 1.1; opacity: .72; }
.seal-text { font-family: var(--mono); font-size: 9.4px; letter-spacing: .2em; fill: var(--bronze-d); }
.seal-mid { font-family: var(--serif); font-style: italic; font-size: 32px; fill: var(--bronze); }

/* --- 2. Régua de obra no processo: a linha enche enquanto a secção
   atravessa o viewport (scroll-driven, zero JS; fallback = cheia) --- */
.process-ruler { margin: 46px 0 6px; }
.pr-track { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.pr-fill {
  height: 100%; width: 100%;
  background: var(--bronze-grad);
  transform-origin: left;
  animation: pr-enche linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 55%;
}
@keyframes pr-enche { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pr-mark {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- 3. Hover premium nos cards de área: elevação + número a acender +
   seta que desliza (transition lux, sem tocar na estrutura) --- */
.index-item .num,
.index-item .arrow { transition: transform .35s var(--lux), text-shadow .35s var(--lux), opacity .35s var(--lux); }
.index-item { transition: background .3s ease, padding-left .5s var(--lux), transform .35s var(--lux), box-shadow .35s var(--lux); }
.index-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(72, 56, 28, .14);
}
.index-item:hover .num { transform: scale(1.12); text-shadow: 0 0 26px rgba(198, 161, 92, .38); }
.index-item:hover .arrow { transform: translateX(6px); opacity: 1; }

/* --- 4. Modo reduzido: selo parado + régua cheia (informação mantida) --- */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-fine .hero-seal { animation: none; }
  .pr-fill { transform: none !important; }
}
@supports not (animation-timeline: view()) {
  .pr-fill { transform: none; }
}

/* ============ POLIMENTO MAISON (18/08) — fio de leitura no topo + sheen
   nos botões + seleção/scrollbar bronze + fleuron editorial nos títulos +
   hairline de topo nos cards. Camada anexada ao fim (padrão do projeto),
   zero invenção, RM → estático. ============ */

/* --- 1. Fio de leitura: 2px bronze-grad fixo no topo, preenche com o scroll
   (JS rAF no app.js — gate RM; sem JS a barra não existe, nada quebra) --- */
.reading-bar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: var(--bronze-grad);
  z-index: 9999;
  box-shadow: 0 1px 6px rgba(198, 161, 92, .35);
}

/* --- 2. Sheen nos botões: reflexo diagonal que varre no hover
   (.btn base já é relative + overflow:hidden; ::after livre — verificado.
   O ripple (span) e o imã (transform inline) convivem sem conflito) --- */
.btn::after {
  content: "";
  position: absolute; top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.btn:hover::after { opacity: 1; animation: btn-sheen 1.1s var(--lux); }
@keyframes btn-sheen { to { left: 130%; } }

/* --- 3. Seleção de texto + scrollbar: bronze, fina, discreta --- */
::selection { background: rgba(198, 161, 92, .32); color: var(--bronze-l); }
html { scrollbar-width: thin; scrollbar-color: var(--bronze-d) var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bronze-d); border-radius: 5px; border: 2px solid var(--bg); }

/* --- 4. Fleuron editorial nos títulos de secção (padrão MAISON do
   ecossistema — o site já usa ❧ no colofão final "❧ Fim · CONGOIS") --- */
.section-head h2::before {
  content: "❧";
  font-family: var(--serif);
  font-style: italic;
  color: var(--bronze);
  font-size: 1.05em;
  margin-right: .35em;
}

/* --- 5. Hairline de topo nos cards de área: acende bronze no hover
   (box-shadow inset — soma com a elevação da camada BRILHO DE OBRA) --- */
.index-item:hover {
  box-shadow: inset 0 1px 0 rgba(198, 161, 92, .5),
              0 18px 44px rgba(72, 56, 28, .14);
}

/* --- 6. RM: sheen parado (seleção e scrollbar são estáticas — mantêm-se) --- */
@media (prefers-reduced-motion: reduce) {
  .btn::after { display: none; }
}

/* --- 7. FIX 18/08: colisão "engenharia," × "fala por nós" no h2 dos
   depoimentos — o Y67 (elástico) escala o span #elasticWord com origem
   CENTRADA, e o lado esquerdo avançava sobre a palavra anterior (e o
   espaço entre a vírgula e o span era descartado pelo inline-block).
   Origem à ESQUERDA: o esticar acontece todo para a direita — o fim
   esquerdo fica fixo na vírgula. O espaço vive no template (no span) --- */
#elasticWord {
  transform-origin: left center;
  margin-left: .08em;
}

/* --- 8. FIX 18/08: h2 dos testemunhos +50% (pedido "faça um aumento de
   50% do tamanho atual") — clamp 1.9rem/4vw/3.1rem → 2.85rem/6vw/4.65rem;
   line-height 1.14 (mais folga entre as 2 linhas, agora maiores) --- */
#testemunhos .section-head h2 {
  font-size: clamp(2.85rem, 6vw, 4.65rem);
  line-height: 1.14;
}

/* ============ GALERIA "A OBRA DE PERTO" (06/09) — fotos originais do cliente.
   Mosaico editorial: colunas CSS, moldura papel + filete bronze, hover sobe.
   Imagens leves (webp q80 ≤900px) com <picture> e fallback jpg. ============ */
.obras-sec { padding: 130px 0 96px; }
.obras-grid {
  columns: 3 300px;
  column-gap: 18px;
  margin-top: 8px;
}
.obras-item {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
.obras-item:hover {
  transform: translateY(-4px);
  border-color: rgba(198, 161, 92, .5);
  box-shadow: 0 20px 36px -20px rgba(23, 19, 12, .38);
}
.obras-item picture { display: block; overflow: hidden; line-height: 0; }
.obras-item img {
  width: 100%;
  height: auto;
  filter: saturate(.92) contrast(1.03);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.obras-item:hover img { transform: scale(1.035); filter: saturate(1.02) contrast(1.06); }
@media (max-width: 900px) {
  .obras-grid { columns: 2 180px; column-gap: 14px; }
  .obras-item { margin-bottom: 14px; padding: 6px; }
}
@media (max-width: 560px) { .obras-grid { columns: 1; } }
@media (prefers-reduced-motion: reduce) {
  .obras-item, .obras-item img { transition: none; transform: none; }
}

/* ============ MOTION-LITE (07/09) ============================================
   O gate no <head> do base.html marca <html data-motion="lite"> quando o
   aparelho é fraco (ecrã táctil/tablet, ≤4 núcleos, saveData ou
   prefers-reduced-motion). Aqui corta-se o movimento CONTÍNUO que satura o
   main-thread em telemóveis — medido: 38 anims → 4.8fps; com o corte →
   15.3fps num perfil 4× de telemóvel (≈ fluido ~60fps nativo).

   = lite é o tratamento reduced-motion já provado do site, MENOS os dois
     esconderes funcionais (.to-top e .scroll-progress ficam — telemóvel
     precisa do voltar-ao-topo), MAIS os contínuos que o bloco RM esquecia
     (.gold-em sheen, waPulse, pulse do .live, sheen do loader).
   = entradas/reveals viram instantâneas (nada de coreografia ao scroll),
     o que elimina o jank de rolar a página no telemóvel.
   = O desktop capaz (rato + >4 núcleos) nunca recebe o atributo → o
     espectáculo cinematográfico fica intacto lá. Regras espelham os blocos
     prefers-reduced-motion (append-only: não se reescreve regra antiga).
   = html[data-motion="lite"] tem precedência de atributo sobre os
     seletores base (mesma especificidade de classe + html) e vem no fim. */
html[data-motion="lite"] {
  --cg-dust: 0 !important;          /* poeira do canteiro: var é lida na opacity do ::before */
}
html[data-motion="lite"] [data-cg-ambient]::before { animation: none !important; }
html[data-motion="lite"] .hero-media-photo::after { animation: none !important; }
html[data-motion="lite"] .hero-media-photo .hero-logo { animation: none !important; }
html[data-motion="lite"] .hero-chip::after { display: none; }
html[data-motion="lite"] .hero-chip,
html[data-motion="lite"] .hero-chip.c1,
html[data-motion="lite"] .hero-chip.c2 { animation: none !important; }
html[data-motion="lite"] .hero .hero-fine .hero-seal { display: none; }  /* selo decorativo: só lê bem a girar — parado no telemóvel fica um anel partido a sangrar atrás do FAB (QA visual 07/09) */
html[data-motion="lite"] .hero .hero-fine span::after { animation: none !important; }
html[data-motion="lite"] .gold-em { animation: none !important; }
html[data-motion="lite"] .loader .l-mark { animation: none !important; }
html[data-motion="lite"] .marquee-track { animation: none !important; }
html[data-motion="lite"] .marquee-track > .marquee-item:nth-child(2) { display: none; }  /* 2.ª cópia do loop some → sem seam de duplicação no modo parado (QA visual 07/09) */
html[data-motion="lite"] .final-cta .ghost,
html[data-motion="lite"] .hero-scroll::after { animation: none !important; }
html[data-motion="lite"] .whatsapp-float::before { display: none; }
html[data-motion="lite"] .topbar .live::before { animation: none !important; }
html[data-motion="lite"] .bp-text { animation: none !important; opacity: 1; }
html[data-motion="lite"] .btn::after,
html[data-motion="lite"] body[data-cg-mode="vitrine"] .btn-gold { animation: none !important; }
html[data-motion="lite"] .process-step,
html[data-motion="lite"] .process-step .num { animation: none !important; }
html[data-motion="lite"] .footer-big { transform: none !important; }
html[data-motion="lite"] .pr-fill { transform: none !important; }
html[data-motion="lite"] [data-cg-parallax] { transform: none; transition: none; }
html[data-motion="lite"] .cg-tl-step, .cg-tl-meta, [data-cg-focus] { transition: none !important; }
html[data-motion="lite"] .reveal,
html[data-motion="lite"] .reveal-left,
html[data-motion="lite"] .reveal-right {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html[data-motion="lite"] .guarantee-doc.reveal { clip-path: none; transition: none; }
html[data-motion="lite"] body.cg-engine-on .reveal[data-cg-stagger]:not(.visible) { transition-delay: 0ms !important; }
html[data-motion="lite"] body.cg-engine-on .section-head .tag::before,
html[data-motion="lite"] body.cg-engine-on .section-head .tag::after { animation: none; transform: none; opacity: 1; }
html[data-motion="lite"] .section-head { transform: none; transition: none; }
html[data-motion="lite"] main .index-list,
html[data-motion="lite"] main .faq-item,
html[data-motion="lite"] main .commit,
html[data-motion="lite"] main .team-card,
html[data-motion="lite"] main .index-item { transition: none !important; }
html[data-motion="lite"] .wa-tip, .flash, .testi-sm { transition: none; }
html[data-motion="lite"] .obras-item, .obras-item img { transition: none; transform: none; }
html[data-motion="lite"] .nav-links a { opacity: 1; transform: none; transition: none; }
html[data-motion="lite"] .nav-links.open li a { transition-delay: 0s; }
html[data-motion="lite"] ::view-transition-old(root),
html[data-motion="lite"] ::view-transition-new(root) { animation-duration: 0s !important; }
/* ============ GALERIA "A OBRA DE PERTO" — grelha uniforme 1:1 (07/09) ============
   Override do mosaico de colunas soltas (bordas em escada: colunas de
   839/1142/1393px no desktop, linhas desencontradas) por uma grelha de células
   QUADRADAS iguais com corte centrado de cada foto (escolha do dono: 1:1).
   Desktop 4×2 · tablet 2×4 · telemóvel 1×8 — linhas e colunas alinhadas. ========= */
.obras-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.obras-item { margin: 0; break-inside: auto; }
.obras-item img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 900px) { .obras-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 560px) { .obras-grid { grid-template-columns: 1fr; } }

/* ===== MOBILE v1 · 07/09 — sem fuga/sobreposição + acordeão FAQ + lightbox obras =====
   Pedido do dono: "otimize para telemóvel, mais interativo e bonito, textos sem
   sobrepor e sem fugir da tela". Rede global anti-fuga + correções de causa dos
   culpados reais + os dois componentes interativos aprovados.
   = Este bloco é APPEND-ONLY: nada acima foi reescrito; vence por estar no fim.
   = Degrada sob html[data-motion="lite"] e prefers-reduced-motion (bloco no fim
     do ficheiro tem precedência sobre o gate de 07/09 acima). */

/* ---- rede global anti-fuga ----
   overflow-x:clip corta o estouro sem criar scroll container (o sticky do header
   e o position:fixed do drawer/flashes continuam a funcionar). Browsers sem clip
   (legados) -> fallback overflow-x:hidden só na raiz. overflow-wrap:anywhere parte
   palavra/filho largo de uma coluna 1fr SÓ quando, senão, estouraria o ecrã. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
body { overflow-wrap: anywhere; }

/* ---- .wrap respirável (content ~324px num ecrã 360) ---- */
@media (max-width: 900px) { .wrap, .wrap-narrow { padding: 0 24px; } }
@media (max-width: 560px) { .wrap, .wrap-narrow { padding: 0 18px; } }

/* ---- botões que cabem: quebra de linha em vez de estourar.
   .btn-sm (CTA do header) fica fora — tem regra própria abaixo. ---- */
@media (max-width: 560px) {
  .btn:not(.btn-sm), .btn-ghost { white-space: normal; text-align: center; line-height: 1.15; padding: .8em 1em; height: auto; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .final-cta .btn { width: 100%; justify-content: center; }
  .hero .display, .final-cta .display { font-size: clamp(2.05rem, 8.4vw, 3.4rem); line-height: 1.06; }
  .final-cta { padding: 84px 22px; }
  .final-cta::before { inset: 8px; }
  .chancela { gap: 8px; }
  .doc-sig .stamp { white-space: normal; text-align: center; }
}

/* ---- header em 320-390: encolhe o logótipo (mantém rácio) p/ caber na linha
   sem estourar. .nav tem height fixo 78px -> o toggle 44px não altera o topo
   do drawer (top:78px) nem a altura do sticky. ---- */
@media (max-width: 560px) {
  .brand { gap: 10px; }
  .brand-logo { height: auto; width: auto; max-height: 40px; max-width: 34vw; }
  .nav-cta { gap: 4px; }
  .nav-cta .btn { font-size: .64rem; padding: 8px 10px; white-space: nowrap; }
}

/* ---- drawer: alvo tátil 44px + lista com scroll próprio (nunca clipa) ---- */
@media (max-width: 720px) {
  .menu-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
  .nav-links.open { max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.cg-lock { overflow: hidden; }
}

/* ---- flashes dentro do ecrã (antes: right:26px + max-width:400px -> em 360
   a caixa estourava pela esquerda fora do viewport) ---- */
@media (max-width: 720px) {
  .flashes { left: 18px; right: 18px; top: 92px; max-width: none; }
}

/* ---- documento-garantia: custo/m² passa para a sua própria linha na grelha
   (34px 1fr auto com nowrap -> estourava em coluna estreita) ---- */
@media (max-width: 720px) {
  .guarantee-doc .guia-item { grid-template-columns: 26px 1fr; gap: 10px; }
  .guarantee-doc .guia-custo { grid-column: 2; white-space: normal; padding-top: 2px; }
}

/* ============ FAQ ACORDEÃO — native <details> (aprovado) ============ */
.faq-item > summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary h3 { margin: 0; }
.faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--bronze);
  border: 1px solid var(--line);
  border-radius: 50%;
  transform-origin: 50% 50%;
  transition: transform .35s var(--ease), color .3s ease, border-color .3s ease, background .3s ease;
}
.faq-item > summary:hover::after,
.faq-item > summary:focus-visible::after { color: var(--bronze-d); border-color: rgba(138,109,59,.55); }
.faq-item > summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; border-radius: 2px; }
.faq-item[open] > summary::after {
  transform: rotate(45deg);               /* + vira × */
  color: var(--bronze-d);
  border-color: rgba(138,109,59,.5);
  background: rgba(138,109,59,.08);
}
.faq-a > p { padding-top: 14px; }         /* só renderiza quando [open] (o <details> esconde o corpo fechado) */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] > .faq-a { animation: cgFaqIn .42s var(--ease) both; }
  @keyframes cgFaqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
}
html[data-motion="lite"] .faq-item[open] > .faq-a { animation: none; }
html[data-motion="lite"] .faq-item > summary::after { transition: none; }

/* ============ LIGHTBOX OBRAS — <dialog> (aprovado) ============ */
.obras-item { position: relative; }
.obras-open {
  position: absolute; inset: 0;
  z-index: 2;
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: inherit;
  cursor: zoom-in;
  touch-action: manipulation;
}
.obras-open::after {                       /* botão + discreto: affordance de zoom */
  content: "+";
  position: absolute; right: 12px; bottom: 12px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1.15rem; font-weight: 400; line-height: 1;
  color: var(--paper);
  background: rgba(12, 13, 16, .6);
  border: 1px solid rgba(230, 207, 154, .5);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s var(--ease);
  pointer-events: none;
}
.obras-open:hover::after,
.obras-open:focus-visible::after,
html[data-motion="lite"] .obras-open::after { opacity: 1; transform: none; }
.obras-open:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -3px;
  border-radius: var(--radius-m);
}
dialog.obras-lb {
  padding: 0;
  border: 0;
  background: var(--paper);
  border-radius: var(--radius-m);
  width: min(92vw, 1040px);
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(12, 13, 16, .5);
}
dialog.obras-lb::backdrop {
  background: rgba(12, 13, 16, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.obras-lb-inner { position: relative; display: grid; }
.obras-lb img {
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  display: block;
  background: var(--bg);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}
.obras-lb-close {
  position: absolute; top: 12px; right: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1rem; line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 8px 24px rgba(12, 13, 16, .22);
}
.obras-lb-close:hover { color: var(--bronze-d); border-color: rgba(138,109,59,.5); }
.obras-lb-close:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.obras-lb-cap {
  margin: 0;
  padding: 12px 18px 14px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--muted);
  border-top: 1px solid var(--line);
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  dialog.obras-lb[open] { animation: cgLbIn .28s var(--ease) both; }
  @keyframes cgLbIn { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
}
html[data-motion="lite"] dialog.obras-lb[open] { animation: none; }
html[data-motion="lite"] .obras-open::after { transition: none; }


/* ===== MOBILE v1 · 07/09 — grelhas 1fr colapsadas: min-width:0 =====
   Nas larguras <=1080px as grelhas colapsam para 1fr, mas cada item herda
   min-width:auto do grid: o track NAO encolhe abaixo do min-content do item
   mais largo, o conteudo estoura o contentor e a rede anti-fuga
   (overflow-x:clip) corta-o em vez de o deixar escapar — texto visivelmente
   truncado. min-width:0 devolve o colapso (equivale a minmax(0,1fr)) SEM mudar
   o nr de colunas nem colidir com os media <=720/<=1080 ja existentes.
   Verificado em 360/768px: .process-step 541->324px e .team-card 532->324px
   apenas com esta regra (sem ela o texto clipa dentro do contentor). */
@media (max-width: 1080px) {
  .process-step,
  .verify-step,
  .team-card,
  .commit-card,
  .index-item,
  .plan { min-width: 0; }
}