/* Elo Protection · Portfólio 2026 — gerado por scripts/build.mjs */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-ext-400-normal.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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-normal.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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-ext-400-italic.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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-latin-400-italic.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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext-opsz-normal.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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-opsz-normal.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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-ext-opsz-italic.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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(../fonts/newsreader-latin-opsz-italic.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:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext-wdth-normal.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:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-wdth-normal.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:'Elo Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/elo-newsreader-regular-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:'Elo Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/elo-newsreader-regular-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:'Elo Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/elo-newsreader-regular-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:'Elo Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/elo-newsreader-regular-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:'Elo Archivo Wide';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/elo-archivo-wide-regular-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:'Elo Archivo Wide';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/elo-archivo-wide-medium-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:'Elo Archivo Wide';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-wide-semibold-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:'Elo Archivo Wide';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/elo-archivo-wide-bold-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:'Elo Archivo Wide';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/elo-archivo-wide-regular-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:'Elo Archivo Wide';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/elo-archivo-wide-medium-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:'Elo Archivo Wide';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-wide-semibold-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:'Elo Archivo Wide';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/elo-archivo-wide-bold-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:'Elo Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/elo-archivo-medium-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:'Elo Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-semibold-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:'Elo Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/elo-archivo-medium-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:'Elo Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-semibold-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:'Elo Archivo Narrow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-narrow-semibold-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:'Elo Archivo Narrow';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/elo-archivo-narrow-semibold-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;}

/* ==========================================================================
   Elo Protection · Portfólio — tokens
   Cores reais da marca (logo + site). Tipos: Instrument Serif / Newsreader / Archivo.
   ========================================================================== */
:root {
  --navy: #002F56;
  --blue: #005B9F;
  --blue-deep: #003B8C;
  --blue-light: #7FB2E5;
  --red: #BE171A;
  --ink: #06111D;
  --ink-2: #0B1B2B;
  --paper: #F4F1EA;
  --paper-2: #E9E4D8;
  --rule: rgba(var(--ink-rgb), .16);
  --rule-2: rgba(var(--ink-rgb), .34);
  --muted: #5A6472;
  --text-2: #26313D;
  --kraft: #C9A36A;
  --tarp: #8E9BA8;
  --plate: #23262B;
  --logo: #1B2230;
  --on-dark: #F4F1EA;
  --on-dark-2: rgba(var(--paper-rgb), .74);
  --rule-dark: rgba(var(--paper-rgb), .22);
  --placeholder: #FFE45C;

  /* Web: fontes variáveis. Print: instâncias estáticas (ver bloco @media print). */
  --f-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --f-text: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-label: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-label-n: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-label-c: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --track: .16em;
  --wide: 112%;
}

@media print {
  :root {
    /* Fonte variável vira Type3 (texto quebrado) no PDF do Chrome: aqui só instâncias estáticas.
       Largo = wdth 112 (400–700) · normal = wdth 100 (500–600) · estreito = wdth 88 (600). */
    --f-text: 'Elo Newsreader', Georgia, serif;
    --f-label: 'Elo Archivo Wide', Arial, sans-serif;
    --f-label-n: 'Elo Archivo', Arial, sans-serif;
    --f-label-c: 'Elo Archivo Narrow', Arial, sans-serif;
    --hair: .25mm;
    --gap: 4.2mm;
    --sq: 2.2mm;
    --fs-kicker: 7.5pt;
    --fs-label: 7.4pt;
    --fs-label-s: 6.6pt;
    --fs-body: 9.8pt;
    --fs-small: 8.8pt;
    --fs-lead: 11.4pt;
    --fs-title: 36pt;
    --fs-title-l: 40pt;
    --fs-num: 40pt;
    --fs-h3: 17pt;
    --fs-h3-l: 20pt;
    --fs-quote: 22pt;
    --fs-illus: 5.6pt;
    --s1: 1.5mm;
    --s2: 3mm;
    --s3: 5mm;
    --s4: 8mm;
    --s5: 12mm;
  }
}

@media screen {
  :root {
    --hair: 1px;
    --gutter: clamp(16px, 4.4vw, 56px);
    --maxw: 1200px;
    --gap: clamp(16px, 2vw, 28px);
    --sq: 7px;
    --fs-kicker: 12px;
    --fs-label: 12.5px;
    --fs-label-s: 11px;
    --fs-body: 18px;
    --fs-small: 16px;
    --fs-lead: clamp(19px, 1.65vw, 22px);
    --fs-title: clamp(38px, 5.2vw, 68px);
    --fs-title-l: clamp(42px, 5.8vw, 78px);
    --fs-num: clamp(46px, 5vw, 64px);
    --fs-h3: clamp(24px, 2.3vw, 30px);
    --fs-h3-l: clamp(27px, 2.7vw, 34px);
    --fs-quote: clamp(28px, 3.4vw, 44px);
    --fs-illus: 10px;
    --s1: 6px;
    --s2: 12px;
    --s3: 20px;
    --s4: 36px;
    --s5: 64px;
  }
}

/* ==========================================================================
   Base e componentes (valem para print e tela; tamanhos vêm dos tokens)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }

mark.placeholder {
  background: var(--placeholder);
  color: #1D1600;
  outline: 1px dashed #7A6000;
  outline-offset: 1px;
  padding: 0 .18em;
  font-style: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Tipografia editorial ---- */
.kicker {
  display: flex;
  align-items: center;
  gap: .95em;
  font-family: var(--f-label);
  font-size: var(--fs-kicker);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: var(--track);
  line-height: 1.2;
  text-transform: uppercase;
}
.kicker .sq { flex: none; width: var(--sq); height: var(--sq); background: var(--red); }
.title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.36; text-wrap: pretty; }
.is-dark .title { color: #fff; }
.is-dark .lead { color: var(--on-dark-2); }

/* Tipografia de revista: nenhum bloco termina com uma palavra sozinha na última
   linha (o navegador reequilibra as últimas linhas) e os blocos de duas ou três
   linhas saem equilibrados, o que também evita linhas seguidas com o mesmo fim. */
.page p, .page li, .page dd, .page figcaption { text-wrap: pretty; }
.page .lead, .page .work-text, .page .ci-point-text, .page .norms-note,
.page .map-key-text, .page .ed-cap, .page .media-cap,
.page .pb-quote-text, .page .pb-note, .page .sv-closing, .page .norm-value { text-wrap: balance; }
/* Texto corrido em duas colunas: reequilibrar a última linha encurtaria as quatro
   linhas finais e deixaria a segunda coluna com um vão claro. Fica na quebra normal. */
.page .ed-body p { text-wrap: wrap; }

.caps {
  font-family: var(--f-label);
  font-weight: 600;
  font-stretch: var(--wide);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---- Mídia ---- */
.media { position: relative; overflow: hidden; background: var(--paper-2); margin: 0; }
.is-dark .media { background: var(--ink-2); }
.media-img { width: 100%; height: 100%; object-fit: cover; }
.media.is-missing { background: var(--navy); }
.media-cap {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 2.4em 1.3em .9em;
  font-family: var(--f-label); font-size: var(--fs-label-s); font-weight: 600; font-stretch: var(--wide);
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .88);
  background: linear-gradient(0deg, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), 0));
}
.illus-tag {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 1.6em 1em .75em 2.6em;
  font-family: var(--f-label-c); font-size: var(--fs-illus); font-weight: 600; font-stretch: 88%;
  letter-spacing: .1em; line-height: 1.15; text-transform: uppercase; text-align: right;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 0 .5em rgba(var(--ink-rgb), .45);
  background: radial-gradient(ellipse at 100% 100%, rgba(var(--ink-rgb), .5) 0%, rgba(var(--ink-rgb), .22) 45%, rgba(var(--ink-rgb), 0) 72%);
  pointer-events: none;
}
.pattern-layer { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* malha real nas páginas escuras (4 e 7): branca e bem apagada */
.mesh-layer { color: #fff; opacity: .065; }

/* ---- Arte de linha da placa (malha, módulo, fio, canto) ----
   Os SVG herdam a cor por currentColor; a opacidade fica aqui, por uso. */
.plate-mesh { width: 100%; height: 100%; }
.plate-rule { width: 100%; height: auto; }
.cover-mesh, .ct-mesh { position: absolute; left: 0; right: 0; z-index: 1; color: #fff; pointer-events: none; }
/* na capa a malha fica embaixo, dentro do azul, e some antes de chegar ao logo */
.cover-mesh {
  bottom: 0;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 45%, transparent 100%);
}
.ct-mesh { top: 0; bottom: 0; }

/* ---- Selo, rótulos, chips ---- */
.chip-tag {
  display: inline-block;
  font-family: var(--f-label); font-size: var(--fs-label-s); font-weight: 600; font-stretch: var(--wide);
  letter-spacing: .12em; line-height: 1; text-transform: uppercase;
  color: var(--blue); border: var(--hair) solid currentColor;
  padding: .45em .6em .38em;
  white-space: nowrap;
}
.nw { white-space: nowrap; }
.dot { display: inline-block; width: .32em; height: .32em; border-radius: 50%; background: currentColor; opacity: .7; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide);
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); background: transparent; cursor: pointer;
}
.btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-ico { width: 1.25em; height: 1.25em; }

/* ---- Obras ---- */
.work-name { font-family: var(--f-display); font-size: var(--fs-h3-l); line-height: 1.02; letter-spacing: -.005em; }
.work-partners, .work-meta {
  font-family: var(--f-label); font-size: var(--fs-label-s); font-stretch: var(--wide);
  letter-spacing: .11em; text-transform: uppercase; line-height: 1.35;
}
.work-partners { font-weight: 600; color: var(--ink); }
.work-partners .lbl { font-weight: 500; color: var(--muted); }
/* linha guardada (obra sem parceiro numa dupla): ocupa a altura, não aparece */
.work-partners.is-empty { visibility: hidden; }
.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .8em; font-weight: 600; color: var(--blue); }
.work-text { font-size: var(--fs-small); line-height: 1.38; color: var(--text-2); }
.work-pending {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--navy); color: #fff;
}
.work-pending .pattern-layer { opacity: 1; }
.wp-logo {
  position: absolute; z-index: 1; width: auto; max-width: 46%;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .9;
}
.wp-name { position: relative; font-family: var(--f-display); line-height: .98; letter-spacing: -.01em; }
.wp-partner {
  position: relative; font-family: var(--f-label); font-size: var(--fs-label-s); font-weight: 600; font-stretch: var(--wide);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light);
}

/* ---- Parede de logos ---- */
/* Fios por borda (o gap de 0,25 mm some no arredondamento do raster). */
.logo-wall { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); border-block: var(--hair) solid var(--ink); }
.logo-cell { display: grid; place-items: center; aspect-ratio: 20 / 7; min-width: 0; border-right: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
@media print, screen and (min-width: 600px) {
  .logo-wall[data-cols="3"] > .logo-cell:nth-child(3n) { border-right: 0; }
  .logo-wall[data-cols="3"] > .logo-cell:nth-last-child(-n+3) { border-bottom: 0; }
  .logo-wall[data-cols="4"] > .logo-cell:nth-child(4n) { border-right: 0; }
  .logo-wall[data-cols="4"] > .logo-cell:nth-last-child(-n+4) { border-bottom: 0; }
}
.logo-img { width: var(--lw, 50%); height: auto; max-width: 76%; opacity: .9; }
.wordmark { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--logo); opacity: .9; padding: 0 8%; }
.wm-main { font-family: var(--f-label); font-weight: 700; font-stretch: 118%; letter-spacing: .015em; line-height: 1.02; text-transform: uppercase; }
.wm-sub { font-family: var(--f-label); font-weight: 500; font-stretch: 112%; letter-spacing: .26em; text-transform: uppercase; margin-top: .45em; }

/* ---- Mapa ---- */
.map-canvas { position: relative; }
.map-svg { width: 100%; height: 100%; }
.map-grat { fill: none; stroke: rgba(var(--ink-rgb), .075); stroke-width: .2; }
.map-land { fill: var(--paper-2); stroke: rgba(var(--ink-rgb), .08); stroke-width: .12; }
.map-lit { fill: var(--blue); }
.map-borders { fill: none; stroke: rgba(var(--paper-rgb), .38); stroke-width: .16; }
.map-leader { fill: none; stroke: var(--ink); stroke-width: .22; }
.map-leader-end { fill: var(--ink); }
/* Pontos de presença (sem rótulo) e hubs de depósito.
   Os raios estão em unidades do mapa — no A4, 1 unidade = 1 mm — e valem para o
   impresso. Na tela o mapa é menor que 210 mm, então --dot-k/--hub-k ampliam os
   símbolos para que os pontos continuem visíveis (geometria via CSS: r/stroke). */
.map-svg { --dot-r: .75px; --dot-halo: 1.35px; --dot-sw: .25px; --hub-r: 1.75px; --hub-halo: 4px; }
.map-halos, .lg-halo { fill: #fff; opacity: .25; }
.map-dots, .map-dot { fill: rgba(255, 255, 255, .92); stroke: var(--navy); stroke-width: .25; }
.map-svg .map-dots { stroke-width: calc(var(--dot-sw) * var(--dot-k, 1)); }
.map-svg .map-dots > circle { r: calc(var(--dot-r) * var(--dot-k, 1)); }
.map-svg .map-halos > circle { r: calc(var(--dot-halo) * var(--dot-k, 1)); }
.map-svg .hub-halo { r: calc(var(--hub-halo) * var(--hub-k, 1)); }
.map-svg .hub-dot { r: calc(var(--hub-r) * var(--hub-k, 1)); stroke-width: calc(.6px * var(--hub-k, 1)); }
.hub-halo { fill: rgba(var(--red-rgb), .22); }
.hub-dot { fill: var(--red); stroke: #fff; stroke-width: .7; }
/* legenda: quadro de 4,2 unidades de mapa, para o ponto sair no tamanho real */
.lg-sym { flex: none; overflow: hidden; width: var(--lg-box, 4.2mm); height: var(--lg-box, 4.2mm); }
.lg-sym .hub-dot { stroke-width: .6; }
.map-key { position: absolute; z-index: 2; }
.map-key-title {
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.map-key-text { font-style: italic; font-size: var(--fs-small); line-height: 1.3; color: var(--text-2); }
.map-key-list li { display: flex; align-items: center; }
.map-key-list .label {
  font-family: var(--f-label); font-weight: 500; font-stretch: var(--wide); font-size: var(--fs-label-s);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
/* página 2: foto da revelação com as placas 3D num canto */
.ed-figure { position: relative; display: flex; flex-direction: column; }
.ed-frame { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.ed-photo { flex: 1 1 auto; min-height: 0; }
.ed-photo .media-img { position: absolute; inset: 0; }
.ed-caps { display: flex; justify-content: space-between; border-top: var(--hair) solid var(--rule); font-style: italic; color: var(--text-2); }
.ed-cap.is-plates { text-align: right; }
.ed-plates { position: absolute; z-index: 2; }
.ed-plates-img { position: relative; display: block; width: 100%; height: auto; }
.ed-plates-shadow {
  position: absolute; left: 10%; right: 6%; bottom: 7%; height: 16%;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), .34), rgba(var(--ink-rgb), .12) 55%, rgba(var(--ink-rgb), 0));
}
/* página 3, case de resistência: fileira justificada, fotos inteiras (largura ∝ formato) */
.pb-case-grid { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.pb-case-item { position: relative; flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--r); overflow: hidden; background: var(--paper-2); }
.pb-case-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* capa estilo revista: masthead, "o que fazemos" e faixa de CTA */
.cover-masthead { flex: none; }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-list li { list-style: none; }
.cs-no { display: block; font-family: var(--f-label); font-weight: 700; font-stretch: var(--wide); letter-spacing: .12em; color: var(--blue-light); }
.cs-text { color: rgba(255, 255, 255, .88); text-wrap: pretty; }
.cs-lead { display: block; font-family: var(--f-display); font-style: italic; font-weight: 400; line-height: 1; color: #fff; }
.cover-banner { color: #fff; }
.cover-banner-title { text-wrap: balance; }
/* contracapa: slogan e unidade do franqueado */
.ct-slogan { font-family: var(--f-display); font-style: italic; color: #fff; text-wrap: balance; }
.ct-unit .lbl { color: rgba(255, 255, 255, .55); font-weight: 500; }

/* capa: placa 3D flutuando sobre o piso */
.cover-piece { position: absolute; z-index: 1; pointer-events: none; }
.cover-piece-tilt { position: relative; transform: rotate(0deg); transform-origin: 46% 46%; } /* de pé (pedido do cliente) */
.cover-piece-img { display: block; width: 100%; height: auto; }
/* produto-05.png: a peça opaca ocupa x 14–77% e y 16–76% da imagem; as sombras nascem na base (76%). */
.cover-piece-shadow { position: absolute; border-radius: 50%; }
.cover-piece-shadow.is-far {
  left: 12%; right: 4%; top: 70%; height: 17%;
  background: radial-gradient(closest-side, rgba(3, 8, 14, .66), rgba(3, 8, 14, .36) 40%, rgba(3, 8, 14, .1) 72%, rgba(3, 8, 14, 0));
  transform: skewX(-24deg);
}
.cover-piece-shadow.is-near {
  left: 20%; right: 20%; top: 73.5%; height: 6%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, .24) 55%, rgba(0, 0, 0, 0));
}
.map-continent {
  position: absolute; transform: translate(-50%, -50%); width: max-content; max-width: 8.2em; text-align: center;
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); font-size: var(--fs-label-s);
  letter-spacing: .2em; line-height: 1.3; text-transform: uppercase; color: rgba(255, 255, 255, .94);
}
.map-pin-label { position: absolute; }
.map-pin-label.is-left { text-align: right; }
.pin-title {
  display: flex; align-items: baseline; gap: .7em;
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); font-size: var(--fs-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.map-pin-label.is-left .pin-title { justify-content: flex-end; }
.pin-no { color: var(--red); letter-spacing: .04em; }
.pin-text { font-style: italic; font-size: var(--fs-small); line-height: 1.3; color: var(--text-2); }

/* ---- Ciclo (página 7) ---- */
.ci-cycle { position: relative; }
.ci-cycle svg { width: 100%; height: auto; overflow: visible; }
.cy-halo { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .16); stroke-width: .22; stroke-dasharray: .5 1.1; }
.cy-arcs path, .cy-heads path { fill: none; stroke: var(--blue-light); stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.cy-node { fill: var(--navy); stroke: #fff; stroke-width: .45; }
.cy-no { font-family: var(--f-label-n); font-weight: 600; font-size: 3.1px; letter-spacing: .02em; fill: #fff; }
/* ícone do centro do ciclo: traço fixo (vector-effect), em px de tela */
.cy-core path { fill: none; stroke: rgba(var(--blue-light-rgb), .75); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.cy-label {
  position: absolute; width: max-content; max-width: 24%; transform: translateY(-50%);
  font-family: var(--f-label-n); font-weight: 600; font-stretch: 100%; font-size: var(--fs-label-s);
  letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; color: #fff;
}
/* à esquerda há folga até a coluna de texto: cabe "Mantenimiento"/"Manutenzione" (etapa 3) numa linha */
.cy-label.is-left { text-align: right; max-width: 30%; }

/* ---- Diagrama de camadas ---- */
.ly-svg { width: 100%; height: auto; overflow: visible; }
.ly-leader text { font-family: var(--f-label-n); font-weight: 600; font-size: 2.9px; letter-spacing: .02em; fill: var(--blue); }
.ly-sample { position: relative; overflow: hidden; background: #fff; border: var(--hair) solid var(--rule-2); }
.ly-sample .media-img { object-position: var(--focus, 50% 50%); transform: scale(var(--zoom, 1)); transform-origin: var(--focus, 50% 50%); }
.ly-sample .illus-tag { left: 0; font-size: calc(var(--fs-illus) * .92); padding: 2.2em .7em .6em; white-space: nowrap; background: linear-gradient(0deg, rgba(var(--ink-rgb), .62), rgba(var(--ink-rgb), .25) 55%, rgba(var(--ink-rgb), 0)); }
.ly-sample-svg { width: 100%; height: 100%; }
.ly-name {
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase;
}
.ly-desc { font-size: var(--fs-small); line-height: 1.36; color: var(--text-2); }
.chip-swatch { flex: none; box-shadow: inset 0 0 0 .5px rgba(var(--ink-rgb), .25); }
.chip-name { font-family: var(--f-label-n); font-weight: 500; font-stretch: 104%; font-size: var(--fs-label); line-height: 1.2; }

/* ---- Ficha técnica ---- */
.norm { display: flex; justify-content: space-between; align-items: baseline; }
.norm-label { display: flex; flex-direction: column; min-width: 0; color: var(--on-dark-2); text-wrap: pretty; }
.norm-std {
  font-family: var(--f-label); font-weight: 500; font-stretch: var(--wide); letter-spacing: .06em;
  text-transform: uppercase; color: rgba(var(--blue-light-rgb), .78);
}
.norm-value {
  flex: none; text-align: right; font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide);
  letter-spacing: .02em; color: #fff;
}
.norms-note { font-style: italic; color: var(--on-dark-2); }
/* ---- Onde aplicamos ---- */
.sv-apps-list { border-bottom: var(--hair) solid var(--rule); }
.sv-app { display: flex; align-items: baseline; border-top: var(--hair) solid var(--rule); }
.sv-app::before { content: ''; flex: none; background: var(--blue); }
/* ---- Fachadas (obras) ---- */
.fc-render {
  position: absolute; z-index: 2; left: 0; top: 0;
  font-family: var(--f-label-c); font-weight: 600; font-stretch: 88%; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(var(--ink-rgb), .62);
}
.fc-credit {
  position: absolute; z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-label-n); font-weight: 500; letter-spacing: .04em; line-height: 1.1; white-space: nowrap;
  color: rgba(255, 255, 255, .86); text-shadow: 0 0 .4em rgba(var(--ink-rgb), .7);
}
.fc-inset { position: absolute; z-index: 2; overflow: hidden; margin: 0; background: var(--paper-2); }
.fc-inset .media-img { position: absolute; inset: 0; }
.fc-inset-label {
  position: absolute; left: 0; top: 0; z-index: 1;
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
}
.wk-onsite-label {
  font-family: var(--f-label); font-weight: 600; font-stretch: var(--wide); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.wk-onsite-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wk-onsite[data-count="1"] .wk-onsite-grid { grid-template-columns: 1fr; }

/* ---- Selo do produto ---- */
.pr-visual { display: contents; }
.pr-seal svg { width: 100%; height: 100%; overflow: visible; }
.seal-disc { fill: var(--ink); }
.seal-ring { fill: none; stroke: rgba(var(--paper-rgb), .55); stroke-width: .5; }
.seal-text { font-family: var(--f-label); font-weight: 600; font-stretch: 112%; fill: #fff; letter-spacing: .02em; }
.seal-dot { fill: var(--red); }

/* ==========================================================================
   Grade editorial compartilhada: A4 no print e telas largas (≥ 900 px).
   Aqui só posições; tamanhos ficam em 30-print.css e 40-screen.css.
   ========================================================================== */
@media print, (min-width: 900px) {
  .page-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-content: start; }
  .page-head { display: flex; justify-content: space-between; align-items: center; }

  /* 02 editorial: [sumário | texto] em cima, faixa de números no meio e a foto
     da revelação ocupando a largura toda embaixo. */
  .ed-grid { grid-template-rows: auto auto minmax(0, 1fr); }
  .ed-grid::before { content: ''; grid-column: 5; grid-row: 1; margin-left: calc(var(--gap) / -2); border-left: var(--hair) solid var(--rule); }
  .toc { grid-column: 1 / span 4; grid-row: 1; }
  .ed-text { grid-column: 5 / span 8; grid-row: 1; }
  .ed-facts { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; }
  .stats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ed-figure { grid-column: 1 / -1; grid-row: 3; }
  .ed-body { column-count: 2; column-gap: var(--gap); }

  /* 03 problema */
  .pb-photo { grid-column: 1 / -1; grid-row: 1; }
  .pb-head { grid-column: 1 / span 8; grid-row: 2; }
  .pb-quote { grid-column: 9 / span 4; grid-row: 2; align-self: start; }
  .risks { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .pb-case { grid-column: 1 / -1; grid-row: 4; }

  /* 04 produto */
  .pr-intro { grid-column: 1 / span 7; grid-row: 1; }
  .pr-feats { grid-column: 1 / span 7; grid-row: 2; display: flex; flex-direction: column; }
  .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .norms { grid-column: 8 / span 5; grid-row: 2; }

  /* 05 camadas */
  .ly-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .ly-title-main { grid-column: 1 / span 8; }
  .ly-lead { grid-column: 9 / span 4; }
  .ly-figure { grid-column: 1 / -1; display: grid; grid-template-columns: 56% 44%; align-items: stretch; }
  .ly-labels { position: relative; }
  .ly-label { position: absolute; left: 0; right: 0; top: var(--y); display: flex; align-items: flex-start; }
  .ly-no { display: none; }
  .ly-floors { grid-column: 1 / span 8; }
  .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
  .ly-wood { grid-column: 9 / span 4; align-self: start; }

  /* 06 serviço */
  .sv-photo { grid-column: 1 / -1; }
  .sv-title { grid-column: 1 / span 6; }
  .sv-lead { grid-column: 7 / span 6; align-self: end; }
  .timeline { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); position: relative; }
  .timeline::before { content: ''; position: absolute; left: var(--node-r); right: calc(25% - var(--gap) * .75 - var(--node-r)); top: var(--node-r); border-top: var(--line-w) solid var(--blue); }
  .sv-apps { grid-column: 1 / -1; }
  .sv-grid.has-site .sv-apps { grid-column: 1 / span 7; }
  .sv-site { grid-column: 8 / span 5; }
  .sv-apps-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .sv-grid.has-site .sv-apps-list { grid-template-columns: 1fr; }
  .sv-closing { grid-column: 1 / -1; }

  /* 07 circular */
  .ci-intro { grid-column: 1 / span 6; grid-row: 1; }
  .ci-cycle { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; }
  .ci-quote { grid-column: 1 / span 6; grid-row: 2; align-self: end; }
  .ci-points { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }

  /* 08 presença */
  .pe-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .pe-title { grid-column: 1 / span 7; }
  .pe-lead { grid-column: 8 / span 5; }
  .map { grid-column: 1 / -1; }
  .map-legend { display: none; }
  .pe-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }

  /* 09 obras */
  .wk-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .wk-title { grid-column: 1 / span 8; }
  .wk-lead { grid-column: 9 / span 4; }
  .work--hero { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .wk-hero-img { grid-column: 1 / span 8; }
  .wk-hero-side { grid-column: 9 / span 4; display: flex; flex-direction: column; }
  .wk-detail { margin-top: auto; }
  .wk-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }

  /* 10 obras (continuação) */
  .work--cell { grid-column: span 6; }

  /* 11 clientes */
  .cl-head { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; }
  .cl-title { grid-column: 1 / span 7; }
  .cl-lead { grid-column: 8 / span 5; }
  .cl-sub, .logo-wall, .cl-note { grid-column: 1 / -1; }

  /* 12 contato */
  .ct-head { grid-column: 1 / span 10; }
  .ct-card { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .ct-qr { grid-column: 10 / span 3; }
  .ct-sign { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; }
}

/* ==========================================================================
   PRINT · A4 retrato, 12 páginas. Margens 14 / 15 / 15 mm, 12 colunas, gap 4,2 mm.
   ========================================================================== */
@page { size: A4; margin: 0; }

@media print {
  /* Sangria: --bleed 0 no PDF de tela; o PDF de gráfica injeta 3 mm e tudo cresce junto
     (página, margens e os elementos que sangram usam estas variáveis). */
  :root {
    --bleed: 0mm;
    --mt: calc(14mm + var(--bleed));
    --mx: calc(15mm + var(--bleed));
    --mb: calc(15mm + var(--bleed));
  }
  html, body { width: calc(210mm + 2 * var(--bleed)); background: #fff; }
  .web-only { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .page {
    position: relative;
    width: calc(210mm + 2 * var(--bleed)); height: calc(297mm + 2 * var(--bleed));
    overflow: hidden;
    padding: var(--mt) var(--mx) var(--mb);
    display: flex; flex-direction: column;
    background: var(--paper);
    break-after: page; page-break-after: always; break-inside: avoid;
  }
  main > .page:last-child { break-after: auto; page-break-after: auto; }
  .page.is-dark { background: var(--ink); color: var(--on-dark); }
  .page.is-navy { background: var(--navy); }
  .page-head { position: relative; z-index: 3; flex: none; height: 5mm; margin-bottom: 7mm; }
  .is-dark .kicker { color: #fff; }
  .pno { font-family: var(--f-label); font-size: 7.5pt; font-stretch: var(--wide); letter-spacing: .06em; color: var(--muted); }
  .pno b { font-weight: 600; color: var(--ink); }
  .is-dark .pno { color: var(--on-dark-2); }
  .is-dark .pno b { color: #fff; }
  .page-body { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; }
  .folio {
    position: relative; z-index: 3; flex: none;
    display: flex; justify-content: space-between;
    margin-top: 4mm; padding-top: 2.2mm;
    border-top: var(--hair) solid var(--rule);
    font-family: var(--f-label); font-size: 6.8pt; font-weight: 500; font-stretch: var(--wide);
    letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--muted);
  }
  .is-dark .folio { border-color: var(--rule-dark); color: var(--on-dark-2); }

  /* 01 capa ------------------------------------------------------------- */
  .page--cover { color: #fff; background: var(--ink); }
  .cover-media, .cover-photo { position: absolute; inset: 0; }
  .cover-media { z-index: 0; }
  .cover-shade {
    position: absolute; inset: 0;
    background:
      /* topo claro: o logo original (azul-marinho + vermelho) precisa de fundo claro para ler */
      linear-gradient(180deg, rgba(var(--paper-rgb), .92) 0%, rgba(var(--paper-rgb), .8) 11%, rgba(var(--paper-rgb), .42) 21%, rgba(var(--paper-rgb), 0) 31%),
      /* azul da marca subindo de baixo e sumindo no meio da página: dá contraste aos textos brancos */
      linear-gradient(0deg, rgba(var(--navy-rgb), .97) 0%, rgba(var(--navy-rgb), .93) 34%, rgba(var(--navy-rgb), .8) 46%, rgba(var(--navy-rgb), .5) 57%, rgba(var(--navy-rgb), .18) 65%, rgba(var(--navy-rgb), 0) 72%);
  }
  /* masthead: o logo como título de revista, com o fio e a edição */
  .cover-mesh { height: 58%; opacity: .1; }
  .cover-masthead {
    position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 8mm;
    padding-bottom: 3mm;
  }
  .cover-rule { position: relative; z-index: 2; color: rgba(var(--navy-rgb), .6); }
  .cover-logo { width: 76mm; height: auto; }
  .cover-issue {
    font-family: var(--f-label); font-size: 7.6pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase; padding-bottom: 1mm; white-space: nowrap; color: var(--navy);
  }
  .cover-main { position: relative; z-index: 2; margin-top: auto; }
  .cover-main .kicker { color: #fff; }
  .cover-title {
    font-family: var(--f-display); font-weight: 400; font-size: 50pt; line-height: .95;
    letter-spacing: -.018em; margin: 5mm 0 7mm; max-width: 150mm;
  }
  .cover-title em { font-style: italic; color: var(--blue-light); letter-spacing: -.01em; }
  /* "o que fazemos": três pilares em colunas, sob o título */
  /* padding à direita: espaço reservado para a placa que sobe da faixa vermelha */
  .cover-summary { position: relative; z-index: 2; padding-right: 34mm; }
  .cs-kicker { font-size: 7.2pt; margin-bottom: 3mm; color: rgba(255, 255, 255, .82); }
  .cs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6mm; }
  .cs-list li { padding-top: 2.8mm; border-top: var(--hair) solid rgba(255, 255, 255, .42); }
  .cs-no { font-size: 6.8pt; margin-bottom: 2mm; }
  .cs-text { font-size: 9.6pt; line-height: 1.36; }
  .cs-lead { font-size: 17pt; margin-bottom: 1.6mm; }
  .cover-summary .cs-text, .cover-summary .cs-kicker { text-shadow: 0 .2mm .8mm rgba(var(--ink-rgb), .5); }
  /* faixa de chamada: atravessa a página inteira e leva a placa na ponta */
  .cover-banner { position: relative; z-index: 2; margin: 8mm calc(-1 * var(--mx)) 0; background: var(--red); }
  .cover-banner-inner { padding: 5.4mm var(--mx) 5mm; max-width: 148mm; }
  .cover-banner-title {
    font-family: var(--f-label); font-size: 19.5pt; font-weight: 700; font-stretch: 112%;
    letter-spacing: .035em; line-height: 1; text-transform: uppercase; color: #fff;
  }
  .cover-banner-text { margin-top: 2.2mm; font-size: 9.2pt; line-height: 1.3; color: rgba(255, 255, 255, .92); }
  .cover-piece { right: -7mm; bottom: -4mm; width: 54mm; }
  .cover-lines { position: relative; z-index: 2; display: flex; flex-wrap: wrap; margin-top: 6.5mm; padding-top: 3.4mm; border-top: var(--hair) solid rgba(255, 255, 255, .38); }
  .cover-lines li {
    padding: 0 4.6mm; border-left: var(--hair) solid rgba(255, 255, 255, .38);
    font-family: var(--f-label); font-size: 8pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, .75);
  }
  .cover-lines li:first-child { padding-left: 0; border-left: 0; color: #fff; }

  /* 02 editorial -------------------------------------------------------- */
  .ed-grid { align-content: stretch; row-gap: 9mm; }
  .toc { padding-right: 1mm; }
  .toc-title { font-family: var(--f-display); font-size: 22pt; line-height: 1; margin-bottom: 4mm; }
  .toc-list { border-top: var(--hair) solid var(--ink); }
  .toc-list li { border-bottom: var(--hair) solid var(--rule); }
  .toc-list a { display: flex; align-items: baseline; gap: 3mm; padding: 1.45mm 0 1.35mm; text-decoration: none; }
  .toc-no { flex: none; width: 5.5mm; font-family: var(--f-label); font-size: 7.5pt; font-weight: 600; font-stretch: var(--wide); color: var(--blue); }
  .toc-label { font-size: 9.4pt; line-height: 1.25; }
  .ed-facts { gap: 6mm; }
  .stats { column-gap: var(--gap); }
  .stat { display: flex; flex-direction: column; border-top: var(--hair) solid var(--ink); padding-top: 2.2mm; }
  .stat-value { font-family: var(--f-display); font-size: 36pt; line-height: .86; letter-spacing: -.02em; color: var(--blue); }
  .stat-label {
    margin-top: 1.4mm; font-family: var(--f-label); font-size: 6.5pt; font-weight: 500; font-stretch: var(--wide);
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .badge {
    align-self: flex-start; display: flex; align-items: center; gap: 2.4mm; white-space: nowrap;
    border: var(--hair) solid var(--ink); padding: 2.2mm 3.2mm 2.2mm 2.4mm;
    font-family: var(--f-label); font-size: 7.2pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .badge-icon { width: 6mm; height: 6mm; color: var(--blue); }
  .ed-title { font-size: 30pt; line-height: 1.02; margin-bottom: 6.5mm; max-width: 112mm; }
  .ed-body { font-size: 9.7pt; line-height: 1.45; hyphens: auto; }
  .ed-body p { orphans: 2; widows: 2; }
  .ed-body p + p { text-indent: 4.2mm; }
  .dropcap::first-letter {
    float: left; font-family: var(--f-display); font-size: 49pt; line-height: .8;
    padding: 1.3mm 1.8mm 0 0; color: var(--blue);
  }
  .signature { margin-top: 2.6mm; font-style: italic; text-indent: 0 !important; }
  .signature::before { content: ''; display: inline-block; width: 6mm; margin-right: 2mm; vertical-align: middle; border-top: var(--hair) solid var(--ink); }
  .ed-figure { min-height: 70mm; }
  .ed-caps { gap: 6mm; margin-top: 2.2mm; padding-top: 1.8mm; font-size: 8.2pt; line-height: 1.3; }
  /* placas no canto do mármore: longe das mãos e da divisa entre placa e piso */
  .ed-plates { right: 5mm; bottom: 3mm; width: 48mm; }

  /* 03 problema --------------------------------------------------------- */
  .pb-photo { height: 74mm; }
  .pb-head { margin-top: 7mm; }
  .pb-title { font-size: 36pt; line-height: .98; }
  .pb-lead { margin-top: 4mm; max-width: 118mm; }
  .risks { margin-top: 7mm; }
  /* case de resistência: miniaturas pequenas de propósito (fotos de celular e de vídeo) */
  .pb-case { margin-top: 8mm; padding-top: 3mm; border-top: .5mm solid var(--ink); }
  .pb-case-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6mm; row-gap: 1.6mm; }
  .pb-case-head .kicker { grid-column: 1 / -1; }
  .pb-case-title { font-family: var(--f-display); font-weight: 400; font-size: 21pt; line-height: 1; white-space: nowrap; }
  .pb-case-text { font-size: 9pt; line-height: 1.38; color: var(--text-2); max-width: 104mm; justify-self: end; text-wrap: pretty; }
  .pb-case-grid { gap: 2.4mm; margin-top: 4mm; }
  .risk { border-top: var(--hair) solid var(--ink); padding-top: 2.6mm; padding-right: 1mm; }
  .risk-no { display: block; font-family: var(--f-display); font-size: 36pt; line-height: .86; color: var(--blue); }
  .risk-title {
    margin: 2.8mm 0 1.4mm; font-family: var(--f-label); font-size: 7.8pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .risk-text { font-size: 9pt; line-height: 1.4; color: var(--text-2); }
  .pb-quote { margin-top: 9mm; padding-left: 4.4mm; border-left: .6mm solid var(--blue); }
  .pb-quote-text { font-family: var(--f-display); font-style: italic; font-size: 17pt; line-height: 1.12; }
  .pb-note { margin-top: 2mm; font-size: 8.8pt; font-style: italic; color: var(--muted); }

  /* 04 produto ---------------------------------------------------------- */
  .pr-hero { position: absolute; top: 0; left: 0; right: 0; height: 100mm; z-index: 1; }
  .pr-photo { position: absolute; inset: 0; }
  .pr-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--ink-rgb), .74) 0%, rgba(var(--ink-rgb), .1) 26%, rgba(var(--ink-rgb), 0) 55%, rgba(var(--ink-rgb), .9) 100%);
  }
  .pr-caption {
    position: absolute; left: var(--mx); bottom: 4.4mm; max-width: 90mm;
    font-family: var(--f-label); font-size: 6.4pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
  }
  .pr-grid { margin-top: 82mm; grid-template-rows: auto auto; align-content: space-between; row-gap: 6mm; }
  .pr-title { font-size: 40pt; line-height: .96; }
  .pr-lead { margin-top: 3.4mm; max-width: 104mm; font-size: 10.6pt; }
  .pr-piece { position: absolute; z-index: 4; top: -40mm; right: 0; width: 50mm; margin: 0; }
  .pr-piece-img { position: relative; width: 100%; height: auto; }
  .pr-glow {
    position: absolute; left: -8%; right: -8%; top: 8%; bottom: 0;
    background: radial-gradient(closest-side, rgba(var(--blue-light-rgb), .2), rgba(var(--blue-light-rgb), .06) 60%, rgba(var(--blue-light-rgb), 0));
  }
  .pr-seal { position: absolute; z-index: 5; width: 24mm; height: 24mm; top: -19mm; left: calc(58.33% - 4mm); }
  .pr-feats { gap: 5mm; }
  /* imagens numa linha, textos na seguinte (subgrid): bases e ícones alinhados */
  .features.features--media { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(34mm, 1fr) auto; row-gap: 0; }
  .features--media .feature { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-height: 0; }
  .features--media .feat-media { min-height: 0; aspect-ratio: auto; margin-bottom: 2.6mm; }
  .features--media .feat-media .media-img { position: absolute; inset: 0; }
  .features { row-gap: 5mm; }
  .feat-media { aspect-ratio: 1 / 1; margin-bottom: 2.6mm; }
  .feat-body { position: relative; }
  .feat-icon { display: block; width: 5.4mm; height: 5.4mm; margin-bottom: 1.6mm; color: var(--blue-light); }
  .features--compact { padding-top: 4mm; border-top: var(--hair) solid var(--rule-dark); }
  .feat-title {
    font-family: var(--f-label); font-size: 6.9pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; color: #fff;
  }
  .feat-text { margin-top: .9mm; font-size: 8pt; line-height: 1.32; color: var(--on-dark-2); }
  .norms { margin-top: 0; }
  .norms-title {
    padding-bottom: 2mm; border-bottom: var(--hair) solid rgba(255, 255, 255, .55);
    font-family: var(--f-label); font-size: 7.3pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase; color: #fff;
  }
  .norm { gap: 3mm; padding: 1.35mm 0 1.25mm; border-bottom: var(--hair) solid var(--rule-dark); }
  .norm-label { font-size: 7.9pt; line-height: 1.24; }
  .norm-std { margin-top: .5mm; font-size: 5.6pt; line-height: 1.2; }
  .norm-value { max-width: 30mm; font-size: 7.3pt; line-height: 1.24; }
  .norms-note { margin-top: 2.4mm; font-size: 7.2pt; line-height: 1.3; }

  /* 05 camadas ---------------------------------------------------------- */
  .ly-title-main { font-size: 34pt; line-height: .98; }
  .ly-lead { font-size: 9.8pt; line-height: 1.4; }
  .ly-figure { margin-top: 5mm; }
  .ly-label { gap: 3.4mm; transform: translateY(-13mm); padding-left: 1.4mm; }
  .ly-sample { flex: none; width: 26mm; height: 26mm; }
  .ly-text { flex: 1; min-width: 0; padding-top: 1mm; }
  .ly-title { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2mm 2mm; }
  .ly-name { font-size: 7.8pt; }
  .ly-desc { margin-top: 1.5mm; font-size: 8.7pt; }
  .ly-grid { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  .ly-floors { margin-top: 6mm; align-self: end; }
  .ly-floors-title {
    margin-bottom: 2.6mm; font-family: var(--f-label); font-size: 7.4pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase;
  }
  .chips { row-gap: 2.2mm; }
  .chip { display: flex; align-items: center; gap: 2.2mm; padding-top: 2.2mm; border-top: var(--hair) solid var(--rule); }
  .chip-swatch { width: 7.6mm; height: 7.6mm; }
  .chip-name { font-size: 7.6pt; }
  .ly-also { margin-top: 3.6mm; font-size: 9pt; font-style: italic; color: var(--text-2); }
  .ly-wood { margin-top: 6mm; align-self: end; padding: .8mm 0 .8mm 4.2mm; border-left: 1mm solid var(--kraft); }
  .ly-wood-title { font-family: var(--f-display); font-size: 16pt; line-height: 1.04; }
  .ly-wood-text { margin-top: 2mm; font-size: 8.9pt; line-height: 1.42; color: var(--text-2); }

  /* 06 serviço ---------------------------------------------------------- */
  .sv-grid { grid-template-rows: repeat(5, auto); align-content: space-between; }
  .sv-photo { height: 92mm; }
  .sv-title { margin-top: 7mm; font-size: 38pt; line-height: .96; }
  .sv-lead { font-size: 11.6pt; }
  .timeline { --node-r: 4.5mm; --line-w: .35mm; margin-top: 7mm; }
  .step-node {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 9mm; height: 9mm; border-radius: 50%; background: var(--blue); color: #fff;
    box-shadow: 0 0 0 1.4mm var(--paper);
    font-family: var(--f-label); font-size: 7.2pt; font-weight: 600; font-stretch: var(--wide); letter-spacing: .04em;
  }
  .step-title { margin: 4.2mm 0 1.6mm; font-family: var(--f-display); font-size: 17pt; line-height: 1.04; }
  .step-text { font-size: 9pt; line-height: 1.4; color: var(--text-2); padding-right: 2mm; }
  .sv-apps { margin-top: 7mm; }
  .sv-apps-title {
    margin-bottom: 2.4mm; font-family: var(--f-label); font-size: 7.3pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase;
  }
  .sv-app { gap: 2.6mm; padding: 1.7mm 0 1.6mm; font-size: 9.6pt; line-height: 1.25; }
  .sv-app::before { width: 1.4mm; height: 1.4mm; transform: translateY(-.35mm); }
  .sv-site { margin-top: 7mm; min-height: 30mm; }
  .sv-site .media-img { position: absolute; inset: 0; }
  .sv-closing {
    margin-top: 6mm; align-self: end; display: flex; align-items: center; gap: 5mm;
    padding: 3.6mm 0 0; border-top: var(--hair) solid var(--ink);
    font-family: var(--f-display); font-style: italic; font-size: 16.5pt; line-height: 1.12;
  }
  .sv-closing-icon { flex: none; width: 9mm; height: 9mm; color: var(--blue); }

  /* 07 circular --------------------------------------------------------- */
  .ci-hero { position: absolute; top: 0; left: 0; right: 0; height: 146mm; z-index: 1; }
  .ci-photo { position: absolute; inset: 0; }
  .ci-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(var(--navy-rgb), .7) 0%, rgba(var(--navy-rgb), .08) 26%, rgba(var(--navy-rgb), .12) 55%, rgba(var(--navy-rgb), .78) 86%, var(--navy) 100%);
  }
  .ci-caption {
    position: absolute; right: var(--mx); bottom: 8mm; max-width: 80mm; text-align: right;
    font-family: var(--f-label); font-size: 6.4pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
  }
  .ci-grid { margin-top: 124mm; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  .ci-title { font-size: 40pt; line-height: .96; }
  .ci-lead { margin-top: 4mm; font-size: 11pt; }
  .ci-cycle { margin-top: -6mm; }
  .cy-label { font-size: 6.6pt; }
  .ci-quote { margin-top: 8mm; padding-top: 4mm; border-top: var(--hair) solid var(--rule-dark); }
  .ci-quote-text { text-wrap: balance; font-family: var(--f-display); font-style: italic; font-size: 24.5pt; line-height: 1.08; color: #fff; }
  .ci-points { margin-top: 11mm; align-self: end; }
  .ci-point { padding-top: 3mm; border-top: var(--hair) solid rgba(255, 255, 255, .45); }
  .ci-point-title {
    font-family: var(--f-label); font-size: 7.6pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light);
  }
  .ci-point-text { margin-top: 1.5mm; font-size: 9.2pt; line-height: 1.4; color: var(--on-dark-2); }

  /* 08 presença --------------------------------------------------------- */
  .pe-title { font-size: 36pt; line-height: .98; }
  .pe-lead { font-size: 10.4pt; line-height: 1.4; }
  .pe-grid { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  .map { margin: 4mm calc(-1 * var(--mx)) 0; }
  .map-canvas { width: calc(210mm + 2 * var(--bleed)); aspect-ratio: var(--map-ratio); }
  .map-continent { font-size: 7pt; }
  .map-pin-label { width: 38mm; transform: translateY(-2.4mm); }
  .map-pin-label.is-left { transform: translate(-100%, -2.4mm); }
  .pin-title { font-size: 8pt; }
  .map-key { left: 7.143%; bottom: 6%; width: 54mm; }
  .map-key-title { font-size: 7.4pt; }
  .map-key-text { margin-top: 1mm; font-size: 8.8pt; }
  .map-key-list { margin-top: 2.2mm; display: grid; row-gap: 1.2mm; }
  .map-key-list li { gap: 1.8mm; }
  .map-key-list .label { font-size: 6.3pt; }
  .page--presence { --lg-box: 4.2mm; }
  .pin-text { margin-top: .7mm; font-size: 9.2pt; }
  .pe-cards { margin-top: 5mm; align-self: end; }
  .card { padding-top: 3mm; border-top: var(--hair) solid var(--ink); }
  .card .kicker { font-size: 7pt; }
  .card-title { text-wrap: balance; margin: 2.8mm 0 1.8mm; font-family: var(--f-display); font-size: 24pt; line-height: 1.02; }
  .card-text { font-size: 9.4pt; line-height: 1.42; color: var(--text-2); max-width: 82mm; }
  .card-meta {
    margin-top: 2.6mm; display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 2.2mm;
    font-family: var(--f-label); font-size: 6.8pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  }

  /* 09–10 obras --------------------------------------------------------- */
  .wk-title { font-size: 34pt; line-height: .98; }
  .wk-lead { font-size: 9.8pt; line-height: 1.4; }
  .work--hero { margin-top: 7mm; }
  .wk-hero-img { height: 98mm; }
  .wk-hero-cap { padding-top: 2.8mm; border-top: var(--hair) solid var(--ink); }
  .wk-detail { height: 46mm; }
  .wk-pair { margin-top: 9mm; }
  .wk-pair-img { height: 82mm; }
  .wk-hero-cap .work-meta { flex-direction: column; align-items: flex-start; gap: .4mm; }
  .wk-hero-cap .work-meta .dot { display: none; }
  .work-cap { padding-top: 3mm; }
  .work-name { font-size: 20pt; }
  .work-partners { margin-top: 1.6mm; font-size: 6.9pt; }
  .work-meta { margin-top: 1mm; font-size: 6.9pt; }
  .work-text { margin-top: 1.5mm; font-size: 8.6pt; }
  .wk2-grid { row-gap: 9mm; grid-template-rows: var(--wk2-rows, auto); align-content: stretch; }
  .work--cell { display: flex; flex-direction: column; min-height: 0; }
  .work--cell > .wk2-img { flex: 1 1 auto; min-height: 20mm; }
  .wk2-img .media-img { position: absolute; inset: 0; }
  .work-pending { padding: 5.5mm; }
  .fc-render { padding: 1.1mm 2mm 1mm; font-size: 5.8pt; }
  .fc-credit { right: .9mm; bottom: 1.6mm; max-height: 80%; font-size: 5.3pt; }
  .fc-inset { left: 2.6mm; bottom: 2.6mm; width: 31%; aspect-ratio: 4 / 3; border: .7mm solid var(--paper); }
  .fc-inset-label { padding: .5mm 1.2mm .4mm; font-size: 5.4pt; }
  .wk-onsite { margin-top: auto; }
  .wk-onsite-label { margin-bottom: 1.6mm; font-size: 6.5pt; }
  .wk-onsite-grid { gap: 2.4mm; }
  .wk-onsite-img { aspect-ratio: 3 / 4; }
  .wk-onsite[data-count="1"] .wk-onsite-img { aspect-ratio: 4 / 3; }
  .wp-logo { top: 5.5mm; left: 5.5mm; height: calc(11mm * var(--wp-s, 1)); }
  .wp-name { font-size: 28pt; }
  .wp-partner { margin-top: 2mm; font-size: 6.9pt; }

  /* 11 clientes --------------------------------------------------------- */
  .cl-title { font-size: 36pt; line-height: .98; }
  .cl-lead { font-size: 10.4pt; line-height: 1.4; }
  .cl-sub {
    margin: 9mm 0 3mm; font-family: var(--f-label); font-size: 7.3pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .cl-sub--brands { margin-top: 10mm; }
  .logo-cell { aspect-ratio: 20 / 8.7; }
  .logo-wall--brands .logo-cell { aspect-ratio: 20 / 8.7; }
  .wm-main { font-size: 9.2pt; }
  .wm-sub { font-size: 5.6pt; }
  .cl-note { margin-top: 3.4mm; font-size: 7.6pt; font-style: italic; color: var(--muted); }

  /* 12 contato ---------------------------------------------------------- */
  .page--contact { padding-bottom: calc(13mm + var(--bleed)); }
  .ct-bg, .ct-photo-bg { position: absolute; inset: 0; }
  .ct-bg { z-index: 0; }
  .ct-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb), .96) 0%, rgba(var(--ink-rgb), .94) 33%, rgba(var(--ink-rgb), .52) 40%, rgba(var(--ink-rgb), .56) 48%, rgba(var(--ink-rgb), .94) 55%, rgba(var(--ink-rgb), .98) 100%); }
  .ct-mesh { opacity: .07; }
  .ct-grid { grid-template-rows: auto minmax(0, 1fr) auto auto; align-content: stretch; }
  .ct-slogan { grid-column: 1 / span 9; grid-row: 2; align-self: center; font-size: 27pt; line-height: 1.1; }
  .ct-title { font-size: 58pt; line-height: .94; max-width: 160mm; }
  .ct-lead { margin-top: 5mm; max-width: 118mm; }
  .ct-card { grid-row: 3; margin-top: 10mm; padding-top: 4mm; border-top: var(--hair) solid rgba(255, 255, 255, .55); }
  .ct-label {
    font-family: var(--f-label); font-size: 6.9pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light);
  }
  .ct-name { margin-top: 2.6mm; font-family: var(--f-display); font-size: 24pt; line-height: 1.04; color: #fff; }
  .ct-unit { margin-top: 1.6mm; font-size: 7pt; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
  .ct-role {
    margin-top: 1.6mm; font-family: var(--f-label); font-size: 7.2pt; font-weight: 500; font-stretch: var(--wide);
    letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2);
  }
  .ct-rows { margin-top: 4mm; }
  .ct-row { padding: 1.9mm 0 1.7mm; border-top: var(--hair) solid var(--rule-dark); }
  .ct-row dt {
    font-family: var(--f-label); font-size: 6.4pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2);
  }
  .ct-row dd { margin-top: .6mm; font-size: 10.6pt; line-height: 1.25; color: #fff; }
  .ct-row a { text-decoration: none; }
  .ct-row--region dd { font-size: 8.4pt; line-height: 1.38; color: var(--on-dark-2); }
  .ct-qr { grid-row: 3; margin-top: 10mm; align-self: end; }
  .ct-qr-code { width: 31mm; height: 31mm; }
  .ct-qr-code svg { width: 100%; height: 100%; }
  .ct-qr-label { margin-top: 3.2mm; font-size: 8.6pt; line-height: 1.32; font-style: italic; color: var(--on-dark-2); }
  .ct-qr-url {
    margin-top: 1.6mm; font-family: var(--f-label); font-size: 6.3pt; font-weight: 600; font-stretch: var(--wide);
    letter-spacing: .06em; line-height: 1.35; color: #fff; overflow-wrap: anywhere; /* quebra nas barras (<wbr>) */
  }
  .ct-sign { grid-row: 4; position: relative; margin-top: 14mm; padding-top: 7mm; }
  .ct-rule { position: absolute; left: 0; right: 0; top: 0; color: rgba(255, 255, 255, .42); }
  .ct-logo { width: 74mm; height: auto; }
  /* 'Seja um franqueado': pequeno e apagado, à direita, logo acima da tagline (o logo da Elo ocupa a largura toda à esquerda). */
  .ct-franq { position: absolute; right: 0; bottom: 13mm; display: flex; flex-direction: row-reverse; align-items: center; gap: 2.6mm; opacity: .62; text-align: right; }
  .ct-franq p { align-items: flex-end; }
  .ct-franq-qr { width: 12mm; height: 12mm; flex: none; }
  .ct-franq-qr svg { width: 100%; height: 100%; }
  .ct-franq p { display: flex; flex-direction: column; gap: .8mm; }
  .ct-franq-label { font-family: var(--f-label); font-size: 6.2pt; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
  .ct-franq-url { font-family: var(--f-label-n); font-size: 6.2pt; letter-spacing: .04em; color: var(--on-dark-2); }
  .ct-tagline {
    max-width: 62mm; text-align: right; font-family: var(--f-label); font-size: 7.3pt; font-weight: 600;
    font-stretch: var(--wide); letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--on-dark-2);
  }
}

/* ==========================================================================
   TELA · cada página vira uma seção de largura total (conteúdo até 1200 px)
   ========================================================================== */
@media screen {
  html { scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--ink); }
  body { font-size: var(--fs-body); line-height: 1.52; overflow-x: hidden; }
  .print-only { display: none !important; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .is-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--blue-light); }

  .skip {
    position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 16px;
    background: var(--ink); color: #fff; font-family: var(--f-label); font-size: 14px; text-decoration: none;
    transform: translateY(-160%); transition: transform .2s;
  }
  .skip:focus { transform: none; }

  /* ---- Barra fixa ---- */
  .bar {
    position: fixed; inset: 0 0 auto; z-index: 50; height: 64px;
    background: rgba(var(--paper-rgb), .86);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--rule); transition: border-color .35s, background-color .35s;
  }
  /* Sobre a capa (só com JS): transparente sobre o topo claro, com o logo original. Depois da capa: papel com blur. */
  html.js .bar:not(.is-solid) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bar-logo { position: relative; display: block; }
  .bar-logo img { transition: opacity .35s; }
  .bar-logo-rev { position: absolute; left: 0; top: 0; opacity: 0; }
  .bar-pdf, .bar-cta { transition: color .35s, background-color .35s, border-color .35s; }
  .bar-inner { height: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .bar-logo img { width: 92px; height: auto; }
  .bar-nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); }
  .bar-pdf { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 10px 2px; }
  .bar-pdf:hover { color: var(--blue); }
  .bar-ico { width: 17px; height: 17px; }
  .bar-pdf-short { display: none; }
  .bar-cta { font-size: 12.5px; padding: 12px 18px; transition: background-color .2s, border-color .2s; }
  .btn--solid:hover { background: var(--blue); border-color: var(--blue); }
  .lang { position: relative; }
  .lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; padding: 10px 4px; }
  .lang summary::-webkit-details-marker { display: none; }
  .lang-chev { width: 14px; height: 14px; }
  .lang-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: var(--paper); border: 1px solid var(--rule-2); padding: 6px 0; box-shadow: 0 18px 40px -24px rgba(var(--ink-rgb), .5); }
  .lang-list a, .lang-inline a { text-decoration: none; }
  .lang-list a { display: flex; gap: 12px; padding: 9px 16px; font-size: 15px; }
  .lang-list a b { font-family: var(--f-label); font-size: 12px; width: 22px; }
  .lang-list a[aria-current], .lang-inline a[aria-current] { color: var(--blue); }
  .lang-inline { display: none; }

  /* ---- Seções ---- */
  main { display: block; }
  .page { position: relative; overflow: hidden; background: var(--paper); padding: clamp(84px, 10vw, 148px) var(--gutter); }
  .page.is-dark { background: var(--ink); color: var(--on-dark); }
  .page.is-navy { background: var(--navy); }
  .page + .page:not(.is-dark) { border-top: 1px solid var(--rule); }
  .page-head, .page-body { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }
  .page-head { margin-bottom: clamp(28px, 3.4vw, 48px); }
  .is-dark .kicker { color: #fff; }
  .page-body { row-gap: var(--s4); }
  /* a malha da placa (.mesh-layer) mantém a opacidade discreta da base; esta regra valia só para os outros padrões */
  .pattern-layer:not(.mesh-layer) { opacity: .9; }

  /* 01 capa */
  .page--cover { min-height: max(640px, 100svh); display: flex; flex-direction: column; padding-top: 88px; padding-bottom: clamp(28px, 4vw, 48px); color: #fff; background: var(--ink); }
  .cover-media, .cover-photo { position: absolute; inset: 0; }
  /* topo claro (logo original na barra) e azul da marca subindo de baixo, como na capa impressa */
  .cover-shade {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(var(--paper-rgb), .9) 0%, rgba(var(--paper-rgb), .5) 7%, rgba(var(--paper-rgb), 0) 13%),
      linear-gradient(0deg, rgba(var(--navy-rgb), .97) 0%, rgba(var(--navy-rgb), .92) 44%, rgba(var(--navy-rgb), .82) 58%, rgba(var(--navy-rgb), .58) 70%, rgba(var(--navy-rgb), .26) 80%, rgba(var(--navy-rgb), 0) 88%);
  }
  .cover-mesh { height: 60%; opacity: .1; }
  .cover-main .kicker, .cover-title, .cs-text, .cs-lead { text-shadow: 0 1px 14px rgba(0, 24, 46, .5); }
  .cover-masthead, .cover-main, .cover-lines { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; }
  .cover-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 10px; }
  .cover-rule { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; color: rgba(var(--navy-rgb), .5); }
  .cover-logo { display: none; } /* na tela o logo da barra faz as vezes do masthead */
  .cover-issue { font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; }
  .cover-issue { color: var(--navy); }
  .cover-main { margin-top: auto; padding-top: 40px; }
  .cover-main .kicker { color: #fff; }
  .cover-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 7vw, 104px); line-height: .94; letter-spacing: -.02em; margin: 20px 0 clamp(26px, 3vw, 40px); max-width: 12.5em; }
  .cover-title em { color: var(--blue-light); }
  /* "o que fazemos": três pilares em colunas; uma coluna no celular */
  .cs-kicker { margin-bottom: 14px; color: rgba(255, 255, 255, .82); }
  .cs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(18px, 2.6vw, 40px); max-width: 1040px; }
  .cs-list li { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .4); }
  .cs-no { font-size: 11.5px; margin-bottom: 8px; }
  .cs-text { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; }
  .cs-lead { font-size: clamp(22px, 2.1vw, 30px); margin-bottom: 6px; }
  .cover-banner { position: relative; z-index: 2; margin: clamp(28px, 4vw, 52px) calc(50% - 50vw) 0; background: var(--red); }
  .cover-banner-inner { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(18px, 2.4vw, 30px) var(--gutter); }
  .cover-banner-title { font-family: var(--f-label); font-size: clamp(22px, 3.2vw, 40px); font-weight: 700; font-stretch: 112%; letter-spacing: .03em; line-height: 1; text-transform: uppercase; max-width: 14em; }
  .cover-banner-text { margin-top: 10px; font-size: clamp(14px, 1.2vw, 17px); color: rgba(255, 255, 255, .92); }
  /* CTA da faixa vermelha → formulário de teste grátis; a faixa inteira é clicável */
  .cover-banner-cta { margin-top: 16px; padding: 12px 18px; font-size: 12.5px; background: #fff; border-color: #fff; color: var(--red); transition: background-color .2s, border-color .2s, color .2s; }
  .cover-banner-cta::after { content: ""; position: absolute; inset: 0; z-index: 3; }
  .cover-banner-cta:hover, .cover-banner:hover .cover-banner-cta { background: var(--navy); border-color: var(--navy); color: #fff; }
  .cover-piece { right: calc(max(var(--gutter), (100% - var(--maxw)) / 2) - clamp(30px, 4vw, 80px)); bottom: -14%; width: clamp(150px, 17vw, 280px); }
  .cover-lines { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: clamp(22px, 3vw, 36px); padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .36); }
  .cover-lines li { padding: 0 18px; border-left: 1px solid rgba(255, 255, 255, .36); font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
  .cover-lines li:first-child { padding-left: 0; border-left: 0; color: #fff; }

  /* 02 editorial */
  .toc-title { font-family: var(--f-display); font-size: 32px; line-height: 1; margin-bottom: 16px; }
  .toc-list { border-top: 1px solid var(--ink); }
  .toc-list li { border-bottom: 1px solid var(--rule); }
  .toc-list a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; text-decoration: none; transition: color .2s, padding .25s; }
  .toc-list a:hover, .toc-list a:focus-visible { color: var(--blue); padding-left: 6px; }
  .toc-list a:hover .toc-label, .toc-list a:focus-visible .toc-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .toc-arrow { width: 16px; height: 16px; margin-left: auto; align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
  .toc-list a:hover .toc-arrow, .toc-list a:focus-visible .toc-arrow { opacity: 1; transform: none; }
  .toc-no { width: 24px; flex: none; font-family: var(--f-label); font-size: 12px; font-weight: 600; color: var(--blue); }
  .toc-label { font-size: 17px; }
  .stats { margin-top: 40px; display: grid; gap: 22px; }
  .stat { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding-top: 12px; }
  .stat-value { font-family: var(--f-display); font-size: clamp(56px, 6vw, 80px); line-height: .88; color: var(--blue); letter-spacing: -.02em; }
  .stat-label { margin-top: 6px; font-family: var(--f-label); font-size: 12px; font-weight: 500; font-stretch: var(--wide); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
  .badge { margin-top: 36px; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); padding: 10px 16px 10px 12px; font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .14em; text-transform: uppercase; }
  .badge-icon { width: 24px; height: 24px; color: var(--blue); }
  .ed-title { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.02; margin-bottom: 32px; max-width: 16em; }
  .ed-body { line-height: 1.56; }
  .ed-body p + p { margin-top: .9em; }
  .dropcap::first-letter { float: left; font-family: var(--f-display); font-size: 5.1em; line-height: .78; padding: .06em .1em 0 0; color: var(--blue); }
  .signature { margin-top: 18px; font-style: italic; }
  .ed-facts { margin-top: 40px; }
  .ed-facts .stats, .ed-facts .badge { margin-top: 0; }
  .ed-figure { margin-top: 44px; }
  .ed-frame { aspect-ratio: 16 / 9; }
  .ed-caps { gap: 24px; margin-top: 10px; padding-top: 8px; font-size: 15px; line-height: 1.35; }
  .ed-plates { right: 20px; bottom: 12px; width: min(28%, 230px); }

  /* 03 problema */
  .pb-photo { aspect-ratio: 21 / 9; }
  .pb-title { font-size: var(--fs-title); }
  .pb-lead { margin-top: 18px; max-width: 36em; }
  .pb-quote { margin-top: clamp(4px, 1vw, 12px); }
  .pb-case { margin-top: clamp(20px, 3vw, 44px); padding-top: 18px; border-top: 2px solid var(--ink); }
  .pb-case-head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px clamp(18px, 3vw, 44px); }
  .pb-case-head .kicker { grid-column: 1 / -1; }
  .pb-case-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
  .pb-case-text { color: var(--text-2); max-width: 36em; justify-self: end; }
  .pb-case-grid { gap: clamp(6px, .8vw, 12px); margin-top: 18px; }
  .risk { border-top: 1px solid var(--ink); padding-top: 14px; }
  .risk-no { display: block; font-family: var(--f-display); font-size: var(--fs-num); line-height: .86; color: var(--blue); }
  .risk-title { margin: 14px 0 6px; font-family: var(--f-label); font-size: 13px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .14em; text-transform: uppercase; }
  .risk-text { font-size: 17px; color: var(--text-2); }
  .pb-quote { border-left: 3px solid var(--blue); padding-left: clamp(18px, 2.4vw, 32px); }
  .pb-quote-text { font-family: var(--f-display); font-style: italic; font-size: var(--fs-quote); line-height: 1.08; max-width: 22em; }
  .pb-note { margin-top: 10px; font-style: italic; color: var(--muted); }

  /* 04 produto */
  .page--product { padding-top: 0; }
  .pr-hero { position: relative; z-index: 1; margin: 0 calc(-1 * var(--gutter)) clamp(40px, 5vw, 64px); height: clamp(300px, 40vw, 560px); }
  .pr-photo { position: absolute; inset: 0; }
  .pr-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb), .35), rgba(var(--ink-rgb), 0) 40%, rgba(var(--ink-rgb), .9)); }
  .pr-caption { position: absolute; left: var(--gutter); bottom: 18px; right: var(--gutter); font-family: var(--f-label); font-size: 11px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
  .pr-title { font-size: var(--fs-title-l); line-height: .96; }
  .pr-lead { margin-top: 18px; max-width: 32em; }
  .pr-piece { position: absolute; z-index: 4; right: -1%; top: calc(-1 * clamp(150px, 17vw, 250px)); width: clamp(180px, 23vw, 300px); margin: 0; }
  .pr-piece-img { position: relative; width: 100%; height: auto; }
  .pr-glow { position: absolute; inset: 8% -10% 0; background: radial-gradient(closest-side, rgba(var(--blue-light-rgb), .2), rgba(var(--blue-light-rgb), 0)); }
  .pr-seal { position: absolute; z-index: 5; width: clamp(92px, 9vw, 120px); height: clamp(92px, 9vw, 120px); top: calc(-1 * clamp(110px, 12vw, 170px)); left: 55%; }
  .pr-feats { gap: 36px; }
  .features { row-gap: 36px; }
  .features--compact { padding-top: 28px; border-top: 1px solid var(--rule-dark); }
  .feat-media { aspect-ratio: 1 / 1; margin-bottom: 16px; }
  .feat-body { position: relative; }
  .feat-icon { display: block; width: 28px; height: 28px; margin-bottom: 10px; color: var(--blue-light); }
  .feat-title { font-family: var(--f-label); font-size: 13px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .11em; text-transform: uppercase; color: #fff; }
  .feat-text { margin-top: 6px; font-size: 16px; color: var(--on-dark-2); }
  .norms-title { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .55); font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
  .norm { gap: 16px; padding: 9px 0 8px; border-bottom: 1px solid var(--rule-dark); }
  .norm-label { font-size: 15px; line-height: 1.3; }
  .norm-std { margin-top: 2px; font-size: 10.5px; }
  .norm-value { max-width: 45%; font-size: 13px; line-height: 1.3; }
  .norms-note { margin-top: 14px; font-size: 14px; }

  /* 05 camadas */
  .ly-title-main { font-size: var(--fs-title); }
  .ly-figure { margin-top: 12px; }
  .ly-label { gap: clamp(12px, 1.4vw, 20px); transform: translateY(-50px); padding-left: 8px; }
  .ly-sample { flex: none; width: 112px; height: 112px; }
  .ly-sample .illus-tag { font-size: 8px; letter-spacing: .06em; }
  .ly-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .ly-name { font-size: 13px; }
  .ly-desc { margin-top: 6px; font-size: 16px; }
  .ly-floors-title, .cl-sub { font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
  .chips { row-gap: 12px; }
  .chip { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .chip-swatch { width: 34px; height: 34px; }
  .chip-name { font-size: 14px; }
  .ly-also { margin-top: 18px; font-style: italic; color: var(--text-2); }
  .ly-wood { border-left: 4px solid var(--kraft); padding: 4px 0 4px 20px; }
  .ly-wood-title { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.04; }
  .ly-wood-text { margin-top: 10px; font-size: 17px; color: var(--text-2); }

  /* 06 serviço */
  .sv-photo { aspect-ratio: 21 / 9; }
  .sv-title { font-size: var(--fs-title-l); line-height: .96; }
  .timeline { --node-r: 20px; --line-w: 2px; margin-top: 16px; }
  .step-node { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 6px var(--paper); font-family: var(--f-label); font-size: 13px; font-weight: 600; }
  .step-title { margin: 18px 0 6px; font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.04; }
  .step-text { font-size: 16.5px; color: var(--text-2); padding-right: 12px; }
  .sv-apps-title { margin-bottom: 12px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; }
  .sv-app { gap: 12px; padding: 10px 0; font-size: 18px; line-height: 1.3; }
  .sv-app::before { width: 7px; height: 7px; transform: translateY(-2px); }
  .sv-site { min-height: 240px; }
  .sv-site .media-img { position: absolute; inset: 0; }
  .sv-closing { display: flex; align-items: center; gap: 22px; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--f-display); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; }
  .sv-closing-icon { flex: none; width: 48px; height: 48px; color: var(--blue); }

  /* 07 circular */
  .page--circular { padding-top: 0; }
  .ci-hero { position: relative; z-index: 1; margin: 0 calc(-1 * var(--gutter)) clamp(40px, 5vw, 64px); height: clamp(280px, 38vw, 520px); }
  .ci-photo { position: absolute; inset: 0; }
  .ci-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--navy-rgb), .3), rgba(var(--navy-rgb), .05) 40%, var(--navy)); }
  .ci-caption { position: absolute; right: var(--gutter); bottom: 24px; left: var(--gutter); text-align: right; font-family: var(--f-label); font-size: 11px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
  .ci-title { font-size: var(--fs-title-l); line-height: .96; }
  .ci-lead { margin-top: 18px; }
  .cy-label { font-size: 12px; }
  .ci-quote { padding-top: 22px; border-top: 1px solid var(--rule-dark); }
  .ci-quote-text { font-family: var(--f-display); font-style: italic; font-size: var(--fs-quote); line-height: 1.08; color: #fff; }
  .ci-point { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .45); }
  .ci-point-title { font-family: var(--f-label); font-size: 13px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); }
  .ci-point-text { margin-top: 6px; font-size: 17px; color: var(--on-dark-2); }

  /* 08 presença */
  .pe-title { font-size: var(--fs-title); }
  .map { margin: 0 calc(50% - 50vw); }
  .map-canvas { width: 100%; max-width: 1080px; margin: 0 auto; aspect-ratio: var(--map-ratio); }
  .map-svg {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
  }
  .map-pin-label { width: clamp(150px, 16vw, 230px); transform: translateY(-.8em); }
  .map-pin-label.is-left { transform: translate(-100%, -.8em); }
  .pin-text { margin-top: 2px; font-size: 15px; }
  .map-key { left: 4%; bottom: 6%; width: clamp(200px, 22%, 280px); }
  .map-key-title { font-size: 12px; }
  .map-key-text { margin-top: 4px; font-size: 15px; }
  .map-key-list { margin-top: 10px; display: grid; row-gap: 6px; }
  .map-key-list li { gap: 10px; }
  .map-key-list .label { font-size: 11px; }
  /* símbolo da legenda = 4,2 unidades do mapa, logo o ponto sai no tamanho real */
  .page--presence { --lg-box: calc(min(100vw, 1080px) * 4.2 / 210); }
  .map-hubs .lg-sym { transform: translateY(2px); }
  .map-hubs li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
  .map-legend .pin-no { font-family: var(--f-label); font-size: 12px; font-weight: 600; }
  .lg-title { font-family: var(--f-label); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  .lg-text { font-style: italic; color: var(--text-2); }
  .card { border-top: 1px solid var(--ink); padding-top: 16px; }
  .card-title { margin: 14px 0 8px; font-family: var(--f-display); font-size: var(--fs-h3-l); line-height: 1.02; }
  .card-text { color: var(--text-2); max-width: 30em; }
  .card-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

  /* 09–10 obras */
  .wk-title { font-size: var(--fs-title); }
  .wk-hero-img { aspect-ratio: 4 / 3; }
  .wk-hero-cap { border-top: 1px solid var(--ink); }
  .wk-detail { aspect-ratio: 4 / 3.4; margin-top: 24px; }
  .wk-pair-img { aspect-ratio: 4 / 3.3; }
  .work-cap { padding-top: 14px; }
  .work-partners, .work-meta { font-size: 12px; margin-top: 6px; }
  .work-text { margin-top: 6px; }
  .page--works-2 { padding-top: clamp(40px, 5vw, 72px); border-top: 0 !important; }
  .wk2-img { aspect-ratio: 4 / 4.4; }
  .work--cell.is-pending .wk2-img { aspect-ratio: 16 / 9; }
  .work-pending { padding: clamp(20px, 2.4vw, 32px); }
  .fc-render { padding: 6px 10px 5px; font-size: 10px; }
  .fc-credit { right: 5px; bottom: 8px; max-height: 80%; font-size: 10px; }
  .fc-inset { left: 12px; bottom: 12px; width: 32%; aspect-ratio: 4 / 3; border: 3px solid var(--paper); }
  .fc-inset-label { padding: 3px 7px 2px; font-size: 10px; }
  .wk-onsite { margin-top: 24px; }
  .wk-onsite-label { margin-bottom: 8px; font-size: 11px; }
  .wk-onsite-grid { gap: 12px; }
  .wk-onsite-img { aspect-ratio: 3 / 4; }
  .wk-onsite[data-count="1"] .wk-onsite-img { aspect-ratio: 4 / 3; }
  .wp-logo { top: clamp(20px, 2.4vw, 32px); left: clamp(20px, 2.4vw, 32px); height: calc(clamp(30px, 3vw, 42px) * var(--wp-s, 1)); }
  .wp-name { font-size: clamp(34px, 3.8vw, 52px); }
  .wp-partner { margin-top: 10px; font-size: 12px; }

  /* 11 clientes */
  .cl-title { font-size: var(--fs-title); }
  .cl-sub { margin: 16px 0 0; color: var(--muted); }
  .cl-sub--brands { margin-top: 40px; }
  .logo-wall { margin-top: -20px; }
  .wm-main { font-size: clamp(12px, 1.1vw, 15px); }
  .wm-sub { font-size: clamp(8.5px, .72vw, 10px); }
  .cl-note { font-size: 14px; font-style: italic; color: var(--muted); margin-top: -12px; }

  /* 12 contato */
  .ct-bg, .ct-photo-bg { position: absolute; inset: 0; }
  .ct-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb), .96), rgba(var(--ink-rgb), .84) 50%, rgba(var(--ink-rgb), .96)); }
  .ct-title { font-size: clamp(44px, 6.4vw, 92px); line-height: .95; max-width: 13em; }
  .ct-lead { margin-top: 22px; max-width: 32em; }
  .ct-card { margin-top: 16px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .55); row-gap: 32px; }
  .ct-label { font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); }
  .ct-name { margin-top: 12px; font-family: var(--f-display); font-size: clamp(30px, 3vw, 40px); line-height: 1.04; color: #fff; }
  .ct-role { margin-top: 6px; font-family: var(--f-label); font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
  .ct-unit { margin-top: 8px; font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }
  .ct-mesh { opacity: .08; }
  .ct-slogan { margin: clamp(36px, 5vw, 64px) 0 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; max-width: 16em; }
  .ct-rows { margin-top: 18px; }
  .ct-row { padding: 10px 0; border-top: 1px solid var(--rule-dark); }
  .ct-row dt { font-family: var(--f-label); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
  .ct-row dd { margin-top: 2px; font-size: 19px; color: #fff; overflow-wrap: anywhere; }
  .ct-row a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
  .ct-row a:hover { background-size: 100% 1px; }
  .ct-sign { display: none !important; } /* na web o rodapé já tem logo e tagline */
  .ct-logo { width: clamp(180px, 22vw, 280px); height: auto; }
  .ct-tagline { font-family: var(--f-label); font-size: 12.5px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); text-align: right; max-width: 22em; }

  /* ---- Revelação ao rolar (só com JS e sem movimento reduzido) ---- */
  html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
}

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Telas grandes: parede de logos em 6 colunas (quando o total fecha) ---- */
@media screen and (min-width: 1100px) {
  .logo-wall[data-wide="6"] { --cols: 6 !important; }
  .logo-wall[data-wide="6"] > .logo-cell { border-right: var(--hair) solid var(--rule); border-bottom: var(--hair) solid var(--rule); }
  .logo-wall[data-wide="6"] > .logo-cell:nth-child(6n) { border-right: 0; }
  .logo-wall[data-wide="6"] > .logo-cell:nth-last-child(-n+6) { border-bottom: 0; }
  .logo-wall[data-wide="6"] > .logo-cell:nth-child(3n):not(:nth-child(6n)) { border-right: var(--hair) solid var(--rule); }
  .logo-wall[data-wide="6"] > .logo-cell:nth-last-child(-n+6):not(:nth-last-child(-n+3)) { border-bottom: 0; }
  .logo-wall[data-wide="6"] > .logo-cell { aspect-ratio: 16 / 9; }
  .logo-wall[data-wide="6"] .logo-img { width: min(80%, calc(var(--lw) * 1.12)); max-width: 80%; }
  .logo-wall[data-wide="6"] .wm-main { font-size: 12.5px; }
  .logo-wall[data-wide="6"] .wm-sub { font-size: 8.5px; letter-spacing: .2em; }
}

/* Enquadramento por orientação da tela: images.<chave>.posWide / posNarrow no site.json */
@media screen and (min-aspect-ratio: 5 / 4) {
  [style*="--pos-wide"] > .media-img { object-position: var(--pos-wide) !important; }
}
@media screen and (min-aspect-ratio: 5 / 4) {
  .cover-shade {
    background:
      /* telas deitadas: topo claro mais curto e azul subindo um pouco mais, porque o título ocupa a metade de baixo */
      linear-gradient(180deg, rgba(var(--paper-rgb), .88) 0%, rgba(var(--paper-rgb), .45) 8%, rgba(var(--paper-rgb), 0) 15%),
      linear-gradient(0deg, rgba(var(--navy-rgb), .97) 0%, rgba(var(--navy-rgb), .92) 40%, rgba(var(--navy-rgb), .84) 56%, rgba(var(--navy-rgb), .62) 68%, rgba(var(--navy-rgb), .3) 78%, rgba(var(--navy-rgb), 0) 87%);
  }
}
@media screen and (max-aspect-ratio: 3 / 4) {
  [style*="--pos-narrow"] > .media-img { object-position: var(--pos-narrow) !important; }
}

/* ---- Até 899 px: uma coluna ---- */
@media screen and (max-width: 899px) {
  .page-body { display: flex; flex-direction: column; gap: 28px; }
  .page-head { display: flex; }
  .toc { order: 3; }
  .ed-facts { display: grid; gap: 22px; }
  .stats { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .stat-value { font-size: clamp(34px, 9.4vw, 60px); }
  .stat-label { font-size: 10.5px; letter-spacing: .08em; }
  .badge { margin-top: 0; justify-self: start; }
  .ed-facts { margin-top: 0; }
  .ed-figure { margin-top: 0; }
  .ed-frame { aspect-ratio: 3 / 2; }
  .ed-caps { flex-direction: column; gap: 4px; font-size: 14px; }
  .ed-cap.is-plates { text-align: left; }
  .ed-plates { width: min(32%, 210px); right: 8px; bottom: 6px; }
  .cover-piece { right: -10%; bottom: -12%; width: clamp(120px, 34vw, 200px); }
  .cs-list { grid-template-columns: 1fr; gap: 16px; }
  .cs-lead { font-size: 24px; }
  .cover-banner-title { max-width: none; }
  .pb-head { order: 1; }
  .pb-photo { order: 0; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); }
  /* celular: miniaturas em duas colunas, inteiras (contain) sobre o papel */
  .pb-case { order: 5; }
  .pb-case-head { grid-template-columns: 1fr; }
  .pb-case-text { justify-self: start; }
  .pb-case-grid { flex-wrap: wrap; }
  .pb-case-item { flex: 0 0 calc(50% - 4px); aspect-ratio: 4 / 3; }
  .pb-case-img { object-fit: contain; }
  .risks { order: 2; display: grid; gap: 28px; }
  .pb-quote { order: 4; }
  .pr-visual { display: block; position: relative; height: clamp(190px, 50vw, 300px); margin: -8px 0 4px; }
  .pr-piece { top: 0; right: 2%; width: clamp(150px, 42vw, 240px); }
  .pr-seal { top: 50%; left: 6%; transform: translateY(-50%); width: clamp(88px, 24vw, 120px); height: clamp(88px, 24vw, 120px); }
  .pr-feats { display: grid; gap: 32px; }
  .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .feat-icon { width: 24px; height: 24px; }
  .feat-title { font-size: 11.5px; letter-spacing: .06em; }
  .features--media .feature.has-media:first-child { grid-column: 1 / -1; }
  .ly-head { display: block; }
  .ly-lead { margin-top: 16px; }
  .ly-figure { display: block; }
  .ly-drawing { max-width: 520px; margin: 0 auto; }
  .ly-labels { counter-reset: none; display: grid; gap: 18px; margin-top: 18px; }
  .ly-label { position: static; transform: none; display: flex; gap: 14px; padding-left: 0; }
  .ly-sample { width: 76px; height: 76px; }
  .ly-sample .illus-tag { white-space: normal; font-size: 7.5px; letter-spacing: .05em; line-height: 1.1; padding: 1.6em .45em .45em; text-align: left; }
  .ly-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue); font-family: var(--f-label); font-size: 11px; font-weight: 600; }
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .sv-photo { aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); }
  .sv-photo .media-cap { padding-inline: var(--gutter); }
  .sv-site { aspect-ratio: 4 / 3; min-height: 0; }
  .timeline { position: relative; display: grid; gap: 26px; padding-left: 58px; }
  .timeline::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; border-left: 2px solid var(--blue); }
  .step { position: relative; }
  .step-node { position: absolute; left: -58px; top: -6px; }
  .step-title { margin-top: 0; }
  .ci-cycle { width: 100%; max-width: 420px; margin: 24px auto 32px; }
  .cy-label { font-size: 10.5px; letter-spacing: .08em; max-width: 26%; }
  .ci-points { display: grid; gap: 24px; }
  .pe-head { display: block; }
  .pe-lead { margin-top: 16px; }
  .map { margin-inline: calc(-1 * var(--gutter)); }
  /* mapa menor: amplia ponto e pino para continuarem legíveis */
  .page--presence { --dot-k: 1.2; --hub-k: 1.05; --lg-box: calc(100vw * 4.2 / 210 * 1.2); }
  .map-pin-label .pin-text { display: none; }
  .map-pin-label { width: auto; white-space: nowrap; }
  .map-pin-label .pin-title { background: rgba(var(--paper-rgb), .9); padding: 2px 5px 1px; }
  .map-continent { display: none; }
  .map-legend { display: block; margin-top: -8px; }
  .map-key { display: none; }
  .map-legend .map-key-list { margin: 12px 0 10px; }
  .pe-cards { display: grid; gap: 28px; }
  .wk-head, .cl-head { display: block; }
  .wk-lead, .cl-lead { margin-top: 16px; }
  .wk-hero-side { margin-top: 0; }
  .wk-pair { display: grid; gap: 32px; }
  .wk2-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
  .logo-wall { margin-top: -12px; }
  .ct-card { display: grid; gap: 28px; }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  .risks, .pe-cards, .wk-pair, .ci-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features--media .feature.has-media:first-child { grid-column: auto; }
  .wk2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media screen and (max-width: 599px) {
  .logo-wall:not(.logo-wall--brands) { --cols: 2 !important; }
  .logo-wall:not(.logo-wall--brands) > .logo-cell:nth-child(2n) { border-right: 0; }
  .logo-wall:not(.logo-wall--brands) > .logo-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .logo-wall--brands > .logo-cell:nth-child(3n) { border-right: 0; }
  .logo-wall--brands > .logo-cell { border-bottom: 0; }
  .logo-wall--brands .logo-img { width: min(84%, calc(var(--lw) * 1.3)); max-width: 84%; }
  .bar-inner { gap: 10px; }
  .bar-logo img { width: 78px; }
  .bar-pdf-long { display: none; }
  .bar-pdf-short { display: inline; }
  .bar-cta { padding: 10px 12px; font-size: 11px; letter-spacing: .06em; }
  .lang-list { right: -60px; }
  .cover-lines li { padding: 0 12px; font-size: 11px; }
  .cover-issue { font-size: 10.5px; max-width: 12em; }
  .ly-label { gap: 12px; }
  .ly-sample { width: 64px; height: 64px; }

  .map-pin-label .pin-title { font-size: 10px; letter-spacing: .08em; }
  .page--presence { --dot-k: 1.65; --hub-k: 1.1; --lg-box: calc(100vw * 4.2 / 210 * 1.65); }
}

/* ==========================================================================
   TELA · formulário de orçamento, rodapé e página raiz de idiomas
   ========================================================================== */
@media screen {
  .quote { background: var(--paper-2); padding: clamp(84px, 10vw, 140px) var(--gutter); border-top: 1px solid var(--rule); }
  .quote-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
  .quote-intro { grid-column: 1 / span 4; }
  .quote-title { margin-top: 20px; font-size: clamp(38px, 4.4vw, 60px); }
  .quote-intro .lead { margin-top: 18px; }
  .quote-direct { margin-top: 28px; }
  .quote-direct a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-label); font-size: 14px; font-weight: 500; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid var(--rule-2); padding-bottom: 4px; }
  .quote-direct a:hover { color: var(--blue); border-color: var(--blue); }
  .qd-ico { width: 18px; height: 18px; }
  .qf { grid-column: 6 / span 7; }
  .qf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .qf-field { display: flex; flex-direction: column; min-width: 0; }
  .qf-field.is-wide { grid-column: 1 / -1; }
  .qf-field label { font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; color: var(--ink); }
  .qf-field.is-required label::after { content: ' *'; color: var(--red); }
  .qf input:not([type='checkbox']), .qf select, .qf textarea {
    width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: 0;
    background: var(--paper); font-family: var(--f-text); font-size: 18px; line-height: 1.3; color: var(--ink);
    transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
  }
  .qf textarea { resize: vertical; min-height: 140px; }
  .qf input:hover, .qf select:hover, .qf textarea:hover { border-color: var(--ink); }
  .qf input:focus, .qf select:focus, .qf textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 91, 159, .18); }
  .qf [aria-invalid='true'] { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(var(--red-rgb), .12); }
  .qf-select { position: relative; }
  .qf-select select { padding-right: 40px; cursor: pointer; }
  .qf-chev { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; }
  .qf-msg { min-height: 0; font-family: var(--f-label); font-size: 12.5px; color: var(--red); margin-top: 6px; }
  .qf-msg:empty { display: none; }
  .qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .qf-consent-wrap { margin-top: 26px; }
  .qf-consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.4; }
  .qf-consent input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
  .qf-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--ink); background: var(--paper); transition: background-color .2s; }
  .qf-check { width: 16px; height: 16px; color: #fff; opacity: 0; }
  .qf-consent input:checked + .qf-box { background: var(--navy); border-color: var(--navy); }
  .qf-consent input:checked + .qf-box .qf-check { opacity: 1; }
  .qf-consent input:focus-visible + .qf-box { outline: 2px solid var(--blue); outline-offset: 2px; }
  .qf-consent input[aria-invalid='true'] + .qf-box { border-color: var(--red); }
  .qf-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .qf-submit { font-size: 13px; padding: 17px 26px; transition: background-color .2s, border-color .2s, opacity .2s; }
  .qf-submit[disabled] { opacity: .6; cursor: progress; }
  .qf-status { font-size: 17px; line-height: 1.4; max-width: 30em; }
  .qf-status.is-success { color: #1D5B2E; }
  .qf-status.is-error { color: var(--red); }
  .qf-status a { color: inherit; font-weight: 500; }
  .qf.is-done .qf-grid, .qf.is-done .qf-consent-wrap, .qf.is-done .qf-submit { display: none; }
  .qf.is-done .qf-status { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; color: var(--ink); border-left: 3px solid var(--blue); padding-left: 20px; }

  /* ---- WhatsApp do franqueado: botão fixo + janela curta ---- */
  .wa-ico { width: 22px; height: 22px; flex: none; }
  .wa-fab {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border: 0; border-radius: 999px;
    background: #1FA855; color: #fff; font-family: var(--f-label); font-size: 14px; font-weight: 600; letter-spacing: .02em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22); cursor: pointer; transition: transform .2s, background-color .2s;
  }
  .wa-fab:hover { background: #178A45; transform: translateY(-2px); }
  .wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #1FA855; }
  .wa-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
  .wa-dialog::backdrop { background: rgba(var(--ink-rgb), .62); }
  .wa-form { position: relative; padding: 30px 26px 24px; }
  .wa-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer; }
  .wa-kicker { display: inline-flex; align-items: center; gap: 8px; color: #178A45; }
  .wa-kicker .wa-ico { width: 18px; height: 18px; }
  .wa-title { margin-top: 12px; font-family: var(--f-display); font-size: 30px; line-height: 1.05; font-weight: 400; padding-right: 30px; }
  .wa-lead { margin-top: 10px; font-size: 16px; line-height: 1.4; }
  .wa-fields { display: grid; gap: 16px; margin-top: 22px; }
  .wa-submit { margin-top: 22px; width: 100%; justify-content: center; gap: 10px; background: #1FA855; border-color: #1FA855; color: #fff; }
  .wa-submit:hover { background: #178A45; border-color: #178A45; }
  .wa-submit[disabled] { opacity: .7; cursor: progress; }
  .wa-status { margin-top: 12px; font-size: 15px; color: #178A45; }
  .wa-status:empty { display: none; }
  .wa-note { margin-top: 12px; font-size: 12.5px; line-height: 1.4; opacity: .75; }
  @media (max-width: 560px) { .wa-fab span { display: none; } .wa-fab { padding: 15px; } }

  /* ---- Rodapé ---- */
  .site-footer { background: var(--ink); color: var(--on-dark); padding: clamp(56px, 7vw, 96px) var(--gutter) 32px; }
  .sf-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 36px; }
  .sf-brand { grid-column: 1 / span 5; }
  .sf-logo { width: 150px; height: auto; }
  .sf-tagline { margin-top: 16px; font-family: var(--f-label); font-size: 12px; font-weight: 600; font-stretch: var(--wide); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
  .sf-links { grid-column: 7 / span 6; display: grid; gap: 12px; align-content: start; }
  .sf-links a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 18px; }
  .sf-links a:hover span { text-decoration: underline; }
  .sf-ico { width: 18px; height: 18px; flex: none; color: var(--blue-light); }
  .sf-langs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--f-label); font-size: 13px; }
  .sf-langs a { text-decoration: none; color: var(--on-dark-2); }
  .sf-langs a[aria-current] { color: #fff; }
  .sf-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--rule-dark); font-family: var(--f-label); font-size: 12.5px; color: var(--on-dark-2); }
  .sf-top { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; }

  /* ---- Página raiz ---- */
  .root-page { min-height: 100svh; margin: 0; display: grid; place-items: center; background: var(--ink); color: var(--on-dark); }
  .root { width: min(560px, 100% - 32px); padding: 64px 0; }
  .root-logo { width: 180px; height: auto; margin-bottom: 48px; }
  .root-langs { border-top: 1px solid var(--rule-dark); }
  .root-langs a { display: flex; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule-dark); text-decoration: none; font-family: var(--f-display); font-size: 34px; line-height: 1; }
  .root-langs a:hover { color: var(--blue-light); }
  .root-langs b { font-family: var(--f-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; width: 28px; color: var(--blue-light); }
}

@media screen and (max-width: 899px) {
  .quote-inner, .sf-inner { display: flex; flex-direction: column; }
  .qf-grid { grid-template-columns: 1fr; }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  .qf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* marca (content/marca.json) */
:root {
  --navy: #1A5C28;
  --red: #2D8A3E;
  --blue: #2D8A3E;
  --blue-deep: #147030;
  --blue-light: #6FD483;
  --ink: #07240F;
  --ink-2: #0E3D1B;
  --text-2: #2D2D2D;
  --muted: #5B665E;
  --paper: #F5F3EE;
  --paper-2: #E8E0D4;
  --logo: #1F2A22;
  --placeholder: #FFE45C;
  --kraft: #C9A36A;
  --tarp: #8E9BA8;
  --plate: #23262B;
  --peca-texto: #4C5563;
  --peca-apoio: #6B7481;
  --peca-rotulo: #8A93A0;
  --peca-caixa: #EEF0F4;
  --peca-linha: #E4E7EC;
  --navy-rgb: 26, 92, 40;
  --red-rgb: 45, 138, 62;
  --blue-light-rgb: 111, 212, 131;
  --ink-rgb: 7, 36, 15;
  --paper-rgb: 245, 243, 238;
  --rule: rgba(7, 36, 15, .16);
  --rule-2: rgba(7, 36, 15, .34);
  --on-dark: #F5F3EE;
  --on-dark-2: rgba(245, 243, 238, .74);
  --rule-dark: rgba(245, 243, 238, .22);
}