/* ===== 01-hero.html ===== */
/* ---------- palco ---------- */
.c-hero {
  --c-sobre: #f6f0e7;
  position: relative;
  isolation: isolate;
  height: var(--c-hero-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-papel);
}

/* malha de cor: manchas radiais desfocadas, em oklab, que derivam devagar */
.c-malha, .c-malha::before, .c-malha::after {
  position: absolute;
  inset: -12%;
  content: "";
  pointer-events: none;
}
.c-malha {
  z-index: -3;
  background:
    radial-gradient(circle at 16% 22% in oklab, var(--c-papel-luz) 0%, transparent 46%),
    radial-gradient(circle at 34% 78% in oklab, color-mix(in oklab, var(--c-pessego) 70%, var(--c-papel)) 0%, transparent 44%);
}
.c-malha::before {
  background:
    radial-gradient(circle at 56% 50% in oklab, color-mix(in oklab, var(--c-taupe) 62%, var(--c-papel)) 0%, transparent 38%),
    radial-gradient(circle at 8% 96% in oklab, color-mix(in oklab, var(--c-taupe) 34%, var(--c-papel)) 0%, transparent 40%);
  animation: c-deriva-a 34s ease-in-out infinite alternate;
}
.c-malha::after {
  background:
    radial-gradient(circle at 46% 88% in oklab, color-mix(in oklab, var(--c-vermelho) 11%, var(--c-papel)) 0%, transparent 36%),
    radial-gradient(circle at 40% 8% in oklab, color-mix(in oklab, var(--c-pele) 34%, var(--c-papel)) 0%, transparent 40%);
  animation: c-deriva-b 26s ease-in-out infinite alternate;
}
@keyframes c-deriva-a { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.08); } }
@keyframes c-deriva-b { from { transform: translate3d(3%, -2%, 0) scale(1.06); } to { transform: translate3d(-4%, 3%, 0) scale(1); } }

/* granulado de papel */
.c-grao {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- a foto: quem está por trás da palavra ---------- */
.c-foto {
  position: absolute;
  z-index: -1;
  margin: 0;
  top: 0;
  right: calc(var(--c-foto) * var(--c-corte) * -1);
  width: var(--c-foto);
  height: var(--c-foto);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.82) 18%, #000 25%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 3%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.82) 18%, #000 25%);
}
.c-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* o pé do hero se desfaz no papel da seção seguinte */
.c-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  pointer-events: none;
  background: linear-gradient(180deg in oklab, transparent 0%, color-mix(in oklab, var(--c-papel) 55%, transparent) 55%, var(--c-papel) 100%);
}

/* ---------- navegação ---------- */
.c-nav {
  flex: none;
  height: var(--c-nav-h);
  padding: 0 var(--c-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.c-marca { text-decoration: none; display: flex; align-items: baseline; gap: 14px; }
.c-marca b {
  font-family: var(--c-serif);
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.c-marca span, .c-links a, .c-meta dt, .c-meta dd, .c-apoio, .c-sec {
  font-family: var(--c-sans);
}
.c-marca span i { font-style: normal; }
.c-marca > span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-tinta-2);
  white-space: nowrap;
}
.c-links { display: flex; gap: clamp(18px, 2.4vw, 38px); color: var(--c-sobre); text-shadow: 0 1px 14px rgba(20, 10, 8, .6); }
.c-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 10px 0;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1);
}
.c-links a:hover, .c-links a:focus-visible { background-size: 100% 1px; }

/* ---------- prova (cabeçalho de página) ---------- */
.c-meta {
  margin: clamp(10px, 2.4vh, 26px) 0 auto;
  padding: 0 var(--c-pad);
  display: grid;
  grid-template-columns: 158px 196px 96px;
  gap: 26px;
}
.c-meta div { border-top: 1px solid var(--c-fio); padding-top: 10px; }
.c-meta dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-tinta-2);
  margin-bottom: 6px;
}
.c-meta dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--c-tinta);
}

/* ---------- a frase ---------- */
.c-frase {
  margin: 0;
  padding: 0 var(--c-pad);
  font-family: var(--c-serif);
  font-weight: 400;
  color: var(--c-tinta);
}
.c-l1 {
  display: block;
  font-size: calc(var(--c-giga) * .19);
  line-height: 1;
  letter-spacing: -.012em;
  margin-bottom: calc(var(--c-giga) * -.185);
}
.c-giga {
  display: block;
  width: max-content;
  font-style: italic;
  font-size: var(--c-giga);
  line-height: .86;
  letter-spacing: -.028em;
  padding: 0 .06em .13em .09em;
  margin-left: -.125em;
  white-space: nowrap;
  /* tinta sobre o papel, papel sobre a foto: o degradê é medido na largura da tela */
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--c-tinta) calc(100vw - var(--c-foto) * (1 - var(--c-corte) - .105)),
    var(--c-sobre) calc(100vw - var(--c-foto) * (1 - var(--c-corte) - .15)));
  background-size: 100vw 100%;
  background-position: calc(.09em - var(--c-pad)) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
}
.c-hifen { display: none; }

.c-notas {
  list-style: none;
  margin: calc(var(--c-giga) * -.15) 0 0 calc(var(--c-giga) * .5);
  padding: 0;
  display: flex;
  gap: 0;
  font-family: var(--c-serif);
  font-style: italic;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.3;
  color: var(--c-tinta);
  white-space: nowrap;
}
.c-notas li + li::before {
  content: "·";
  font-style: normal;
  margin: 0 .7em;
  opacity: .6;
}
.c-notas i { font-style: inherit; display: inline-block; animation: c-respira 11s ease-in-out infinite; }
.c-notas li:nth-child(2) i { animation-delay: -2.7s; }
.c-notas li:nth-child(3) i { animation-delay: -5.5s; }
.c-notas li:nth-child(4) i { animation-delay: -8.2s; }
@keyframes c-respira { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }

.c-fecho {
  padding: 0 var(--c-pad);
  margin-top: calc(var(--c-giga) * .075);
  display: flex;
  align-items: baseline;
  gap: .9em;
  font-family: var(--c-serif);
}
.c-l3 {
  font-size: calc(var(--c-giga) * .19);
  line-height: 1;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.c-l3 em { font-style: italic; color: var(--c-vermelho); }
.c-voz {
  margin: 0;
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1;
  color: var(--c-tinta);
  white-space: nowrap;
}

/* ---------- apoio e ação ---------- */
.c-base {
  padding: clamp(16px, 2.8vh, 28px) var(--c-pad) clamp(24px, 4.2vh, 42px);
  display: grid;
  grid-template-columns: minmax(0, 446px) auto;
  justify-content: start;
  align-items: center;
  gap: 18px 36px;
}
.c-apoio {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  font-weight: 300;
  color: var(--c-tinta);
}
.c-apoio strong { font-weight: 500; }
.c-acoes { display: flex; align-items: center; gap: 26px; }
.c-botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 26px 0 22px;
  border-radius: 2px;
  background: var(--c-tinta);
  color: var(--c-papel-luz);
  font-family: var(--c-sans);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -16px rgba(44, 27, 23, .7);
  transition: background-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.c-botao svg { width: 18px; height: 18px; flex: none; }
.c-botao:hover, .c-botao:focus-visible { background: #45291f; transform: translateY(-2px); }
.c-sec {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--c-sobre);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid currentColor;
  text-shadow: 0 1px 14px rgba(20, 10, 8, .55);
}

/* ---------- entrada: a frase se compõe palavra a palavra ---------- */
.c-p { display: inline-block; }
@keyframes c-sobe { from { opacity: 0; transform: translate3d(0, .32em, 0); filter: blur(5px); } }
@keyframes c-surge { from { opacity: 0; } }
@keyframes c-giga-in { from { opacity: 0; transform: translate3d(0, .05em, 0); filter: blur(10px); } }
@keyframes c-tinge { from { --c-sobre: #2c1b17; } }
@keyframes c-foto-in { from { opacity: 0; transform: scale(1.035); } }

.c-nav, .c-meta, .c-base { animation: c-surge 1.4s ease .15s backwards; }
.c-l1 .c-p { animation: c-sobe 1.1s cubic-bezier(.2,.65,.2,1) backwards; }
.c-l1 .c-p:nth-child(1) { animation-delay: .5s; }
.c-l1 .c-p:nth-child(2) { animation-delay: .82s; }
.c-l1 .c-p:nth-child(3) { animation-delay: 1.14s; }
.c-l1 .c-p:nth-child(4) { animation-delay: 1.4s; }
.c-giga { animation: c-giga-in 2s cubic-bezier(.2,.65,.2,1) 1.9s backwards; }
.c-hero { animation: c-tinge 3s ease 3.1s backwards; }
.c-foto { transform-origin: 45% 40%; animation: c-foto-in 3.4s cubic-bezier(.3,.6,.2,1) 3s backwards; }
.c-notas li { animation: c-surge 1.6s ease backwards; }
.c-notas li:nth-child(1) { animation-delay: 4.3s; }
.c-notas li:nth-child(2) { animation-delay: 4.7s; }
.c-notas li:nth-child(3) { animation-delay: 5.1s; }
.c-notas li:nth-child(4) { animation-delay: 5.5s; }
.c-l3 .c-p { animation: c-sobe 1.2s cubic-bezier(.2,.65,.2,1) backwards; }
.c-l3 .c-p:nth-child(1) { animation-delay: 5.9s; }
.c-l3 .c-p:nth-child(2) { animation-delay: 6.25s; }
.c-voz { animation: c-surge 1.8s ease 7.2s backwards; }

/* espera as fontes para começar (com saída de segurança no script) */
.c-espera .c-hero, .c-espera .c-hero * { animation-play-state: paused !important; }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  :root {
    --c-pad: 5.4vw;
    --c-nav-h: 92px;
    --c-foto: 122vw;
    --c-giga: 41vw;
  }
  .c-hero { height: auto; min-height: 100svh; }
  .c-nav {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    border-bottom: 1px solid var(--c-fio);
  }
  .c-marca { justify-content: space-between; align-items: center; gap: 10px; }
  .c-marca b { font-size: 23px; }
  .c-marca span { font-size: 9.5px; letter-spacing: .12em; line-height: 1.5; text-align: right; }
  .c-marca span i { display: none; }
  .c-marca span span { display: block; }
  .c-links { justify-content: space-between; gap: 8px; color: var(--c-tinta); text-shadow: none; }
  .c-links a { font-size: 12px; padding: 6px 0; }

  .c-hero::after { display: none; }
  .c-foto {
    top: var(--c-nav-h);
    left: -4vw;
    right: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.8) 78%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.1) 91%, transparent 95%);
            mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,.8) 78%, rgba(0,0,0,.4) 85%, rgba(0,0,0,.1) 91%, transparent 95%);
  }

  .c-frase { margin-top: 62vw; }
  .c-l1 {
    font-size: 8vw;
    color: var(--c-sobre);
    text-shadow: 0 1px 16px rgba(20, 10, 8, .6);
    margin-bottom: 0;
  }
  .c-giga {
    width: auto;
    white-space: normal;
    line-height: .74;
    padding: 0 0 .1em;
    margin-left: -.035em;
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .c-g1, .c-g2 { display: block; }
  .c-g1 { color: var(--c-sobre); text-shadow: 0 2px 30px rgba(20, 10, 8, .35); }
  .c-g2 { color: var(--c-tinta); margin-left: .3em; }
  .c-hifen { display: inline; }

  .c-notas {
    margin: 1vw 0 0;
    padding: 0 var(--c-pad);
    font-size: 4.1vw;
    justify-content: space-between;
  }
  .c-notas li + li::before { margin: 0 .35em 0 0; }
  .c-fecho {
    margin-top: 5.5vw;
    flex-direction: column;
    gap: 2.2vw;
  }
  .c-l3 { font-size: 10.4vw; }
  .c-voz { font-size: 6.2vw; }

  .c-base {
    order: 3;
    grid-template-columns: 1fr;
    padding: 6.5vw var(--c-pad) 7vw;
    gap: 6vw;
  }
  .c-acoes { order: -1; }
  .c-botao { flex: 1; justify-content: center; height: 56px; padding: 0 16px; }
  .c-sec { display: none; }
  .c-apoio { font-size: 14.5px; }

  .c-meta {
    order: 4;
    margin: 0;
    padding: 0 var(--c-pad) 9vw;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
  }
  .c-meta div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .c-notas i { opacity: .85; }
}

/* ===== 02-escuta.html ===== */
/* ============ 02 · escuta (Sobre / o diferencial) ============ */
.es-sec {
  --es-fw: clamp(380px, 38vw, 548px);          /* largura do retrato */
  --es-fh: calc(var(--es-fw) * 1.5);
  --es-giga: calc(var(--es-fw) * .79);
  --es-eixo: calc(var(--es-fw) * .665);        /* distância do centro até o fio de cada formação */
  padding-top: clamp(40px, 5vw, 84px);
  overflow-x: clip;
}
/* a emenda com o hero: a malha rosada do fim do hero continua aqui e se desfaz no papel (sem faixa) */
.es-sec::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(220px, 30vw, 430px); pointer-events: none;
  background: linear-gradient(90deg, #dfd1c8 0%, #e6d3c8 22%, #ecd3c7 36%, #e8d0c5 46%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.1) 78%, transparent 100%), linear-gradient(90deg, #000 38%, rgba(0,0,0,.5) 47%, transparent 57%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 22%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.1) 78%, transparent 100%), linear-gradient(90deg, #000 38%, rgba(0,0,0,.5) 47%, transparent 57%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.es-palco {
  position: relative;
  max-width: var(--vg-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--es-eixo) * 2) minmax(0, 1fr);
  grid-template-rows: calc(var(--es-fh) * .46) calc(var(--es-fh) * .235) auto;
}
.es-rot { grid-column: 1; grid-row: 1; align-self: start; display: flex; gap: 14px; align-items: center; }
.es-rot::after { content: ""; flex: none; width: 56px; height: 1px; background: var(--c-fio); }

/* o retrato: de pé, grande, fundido ao papel por todos os lados */
.es-foto {
  grid-column: 2; grid-row: 1 / span 3; justify-self: center;
  margin: 0;
  width: var(--es-fw); height: var(--es-fh);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.56) 17%, rgba(0,0,0,.86) 24%, #000 31%, #000 69%, rgba(0,0,0,.86) 76%, rgba(0,0,0,.56) 83%, rgba(0,0,0,.24) 90%, rgba(0,0,0,.06) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.5) 7%, rgba(0,0,0,.86) 11%, #000 15%, #000 68%, rgba(0,0,0,.8) 77%, rgba(0,0,0,.4) 86%, rgba(0,0,0,.1) 93%, transparent 98%);
          mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.24) 10%, rgba(0,0,0,.56) 17%, rgba(0,0,0,.86) 24%, #000 31%, #000 69%, rgba(0,0,0,.86) 76%, rgba(0,0,0,.56) 83%, rgba(0,0,0,.24) 90%, rgba(0,0,0,.06) 96%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 3%, rgba(0,0,0,.5) 7%, rgba(0,0,0,.86) 11%, #000 15%, #000 68%, rgba(0,0,0,.8) 77%, rgba(0,0,0,.4) 86%, rgba(0,0,0,.1) 93%, transparent 98%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.es-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* as duas formações: cada uma com o seu fio, que desce até a palavra */
.es-lomb { position: relative; grid-row: 1; align-self: start; margin-top: calc(var(--es-fh) * .13); padding-bottom: calc(var(--es-fh) * .05); }
.es-lomb-a { grid-column: 1; text-align: right; padding-right: 26px; }
.es-lomb-b { grid-column: 3; padding-left: 26px; }
.es-lomb h3 { margin: 10px 0 14px; font: 400 clamp(32px, 3.3vw, 50px)/.98 var(--c-serif); letter-spacing: -.014em; }
.es-lomb h3 em { font-style: italic; color: var(--c-vermelho); }
.es-lomb h3 span { display: block; }
.es-lomb p:last-child { margin: 0; font: 300 14.5px/1.6 var(--c-sans); color: var(--c-tinta-2); max-width: 23ch; }
.es-lomb-a p:last-child { margin-left: auto; }
.es-fio { position: absolute; top: 4px; width: 1px; height: calc(var(--es-fh) * .2); background: var(--c-tinta); opacity: .5; transform-origin: 50% 0; }
.es-lomb-a .es-fio { right: 0; }
.es-lomb-b .es-fio { left: 0; }

/* a palavra: tinta no papel, papel sobre o retrato, tinta de novo */
.es-giga {
  position: absolute; left: calc(var(--c-pad) * -1); right: calc(var(--c-pad) * -1);
  top: calc(var(--es-fh) * .155);
  text-align: center;
  font-size: var(--es-giga);
  padding: 0 0 .14em;
  white-space: nowrap;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg,
    var(--c-tinta) calc(50% - var(--es-fw) * .405),
    #f6f0e7 calc(50% - var(--es-fw) * .375),
    #f6f0e7 calc(50% + var(--es-fw) * .375),
    var(--c-tinta) calc(50% + var(--es-fw) * .405));
  -webkit-background-clip: text;
          background-clip: text;
}

/* a história: de um lado a frase, do outro o porquê; embaixo do retrato, o que ela é */
.es-voz { grid-column: 1; grid-row: 3; justify-self: end; text-align: right; max-width: 12.5em; padding: 6px 26px 0 0; font-size: clamp(24px, 2.25vw, 33px); line-height: 1.16; text-wrap: balance; }
.es-hist { grid-column: 3; grid-row: 3; max-width: 330px; padding: 12px 0 0 26px; }
.es-oficio { max-width: 620px; margin: clamp(10px, 1.6vw, 28px) auto 0; text-align: center; }
.es-oficio .vg-voz { font-size: clamp(28px, 3.05vw, 44px); line-height: 1.08; letter-spacing: -.008em; text-wrap: balance; }
.es-oficio .vg-txt { margin: 18px auto 0; max-width: 46ch; }

/* a trajetória como dados: uma linha só, itens pendurados no fio */
.es-traj { max-width: var(--vg-max); margin: clamp(56px, 6.4vw, 104px) auto 0; }
.es-traj ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1.15fr 1.5fr .8fr; column-gap: clamp(20px, 2.6vw, 44px); border-top: 1px solid var(--c-fio); }
.es-traj li { position: relative; padding-top: 22px; }
.es-traj li::before { content: ""; position: absolute; top: -1px; left: 0; width: 1px; height: 12px; background: var(--c-tinta); opacity: .5; }
.es-traj h3 { margin: 8px 0 10px; font: 400 clamp(22px, 1.95vw, 28px)/1.1 var(--c-serif); letter-spacing: -.008em; text-wrap: balance; }
.es-traj li > p:last-child { margin: 0; font: 300 14.5px/1.6 var(--c-sans); color: var(--c-tinta); max-width: 34ch; }

/* o gesto: os dois fios descem das formações e se encontram na palavra, que só então aparece */
.vg-js .es-fio { transform: scaleY(0); transition: transform 2s var(--vg-curva) .5s; }
.vg-js .es-lomb > :not(.es-fio) { opacity: 0; transition: opacity 1.4s var(--vg-curva) .2s; }
.vg-js .es-giga { opacity: 0; filter: blur(10px); transition: opacity 2s var(--vg-curva) 1.5s, filter 2s var(--vg-curva) 1.5s; }
.vg-js .es-on .es-fio { transform: none; }
.vg-js .es-on .es-lomb > :not(.es-fio) { opacity: 1; }
.vg-js .es-on .es-giga { opacity: 1; filter: none; }

/* no computador o pé do hero já termina em papel: a continuação rosada só vale no celular */
@media (min-width: 821px) { .es-sec::before { display: none; } }
@media (max-width: 820px) {
  .es-sec { --es-fw: 100vw; --es-giga: 42vw; padding-top: 0; }
  .es-sec::before {
    height: 70vw; background: #ead4c8;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 30%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .es-palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
  .es-rot { position: absolute; z-index: 2; top: 20px; left: 0; color: #f6f0e7; text-shadow: 0 1px 12px rgba(20,10,8,.6); }
  .es-rot::after { background: currentColor; opacity: .6; }
  .es-foto {
    grid-column: 1 / -1; grid-row: 1;
    margin: 0 calc(var(--c-pad) * -1);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 4%, #000 10%, #000 66%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.36) 84%, rgba(0,0,0,.08) 92%, transparent 97%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 4%, #000 10%, #000 66%, rgba(0,0,0,.78) 74%, rgba(0,0,0,.36) 84%, rgba(0,0,0,.08) 92%, transparent 97%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .es-giga { top: calc(var(--es-fh) * .3); background: none; color: #f6f0e7; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 30px rgba(20,10,8,.3); }
  .es-lomb { grid-row: 2; margin-top: calc(var(--es-fh) * -.2); padding-bottom: 0; padding-top: calc(var(--es-fh) * .1); }
  .es-lomb-a { grid-column: 1; text-align: left; padding: calc(var(--es-fh) * .1) 10px 0 14px; }
  .es-lomb-a p:last-child { margin-left: 0; }
  .es-lomb-a .es-fio { right: auto; left: 0; }
  .es-lomb-b { grid-column: 2; padding-left: 14px; }
  .es-lomb h3 { font-size: 7.6vw; margin: 8px 0 10px; }
  .es-lomb p:last-child { max-width: none; }
  .es-fio { top: calc(var(--es-fh) * -.215); height: calc(100% + var(--es-fh) * .215); }
  .es-voz { grid-column: 1 / -1; grid-row: 3; justify-self: start; text-align: left; max-width: none; padding: 46px 0 0; font-size: 27px; }
  .es-hist { grid-column: 1 / -1; grid-row: 4; max-width: none; padding: 18px 0 0; }
  .es-oficio { text-align: left; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-fio); }
  .es-oficio .vg-voz { font-size: 27px; }
  .es-traj ol { grid-template-columns: 1fr; border-top: 0; }
  .es-traj li { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; padding: 16px 0 18px; border-top: 1px solid var(--c-fio); }
  .es-traj li::before { display: none; }
  .es-traj li .vg-rot { grid-row: 1 / span 2; padding-top: 7px; }
  .es-traj h3 { margin: 0 0 6px; font-size: 23px; }
  .es-traj li > p:last-child { max-width: none; }
}

/* ===== 03-areas.html ===== */
/* ============ áreas: um índice de seis palavras e, na mesma linha, o que cada uma guarda ============ */
.ar-sec {
  --ar-g: clamp(96px, 11.3vw, 184px);    /* corpo das seis palavras */
  --ar-f: clamp(18px, 1.72vw, 25px);     /* itálicos do que a palavra guarda */
  --ar-base: .79;                        /* linha de base dentro da caixa da palavra */
  --ar-vao: clamp(24px, 3.2vw, 48px);
  --ar-col: minmax(0, 1.38fr) minmax(0, 1fr);
  background: radial-gradient(ellipse 78% 56% at 84% 42% in oklab, color-mix(in oklab, var(--c-pessego) 26%, var(--c-papel)) 0%, transparent 100%);
}

/* o título se reparte pelas duas colunas do índice: o nome à esquerda, o que ele guarda à direita */
.ar-topo {
  display: grid;
  grid-template-columns: var(--ar-col);
  column-gap: var(--ar-vao);
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--c-fio);
  margin-bottom: clamp(26px, 3.2vw, 50px);
}
.ar-dica { margin: 0; font: italic 400 clamp(16px, 1.25vw, 18px)/1.3 var(--c-serif); color: var(--c-tinta-2); }
.ar-t {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--ar-col);
  column-gap: var(--ar-vao);
  margin-top: clamp(30px, 3.6vw, 56px);
  text-wrap: wrap;
}

.ar-lista { list-style: none; margin: 0; padding: 0; }
.ar-item {
  display: grid;
  grid-template-columns: var(--ar-col);
  column-gap: var(--ar-vao);
  align-items: start;
  padding-bottom: clamp(20px, 2.4vw, 36px);
}
.ar-h { margin: 0; display: flex; align-items: baseline; font-weight: 400; }
/* o fio que liga a palavra ao que ela guarda, como num sumário */
.ar-h::after {
  content: ""; flex: 1; height: 1px; margin-left: calc(var(--ar-g) * .2);
  background:
    linear-gradient(color-mix(in oklab, var(--c-tinta) 46%, transparent), color-mix(in oklab, var(--c-tinta) 46%, transparent)) 0 0 / 100% 100% no-repeat,
    color-mix(in oklab, var(--c-tinta) 13%, transparent);
}
.ar-pal {
  appearance: none; border: 0; background: none; margin: 0 0 0 -.035em; padding: 0 0 .12em;
  font: italic 400 var(--ar-g)/.86 var(--c-serif);
  letter-spacing: -.028em;
  color: var(--c-tinta);
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.ar-pal:focus-visible { outline-color: var(--c-tinta); outline-offset: 0; }
.ar-pal::after { content: "."; color: var(--c-vermelho); opacity: 0; }

.ar-atras { padding-top: calc(var(--ar-g) * var(--ar-base) - var(--ar-f) * 1.14); }
.ar-notas { font-size: var(--ar-f); line-height: 1.3; }
.ar-notas li + li::before { margin: 0 .52em; }
.ar-corpo { padding-top: 20px; }
.ar-corpo .vg-rot { margin-bottom: 10px; }
.ar-txt { max-width: 45ch; }
.ar-tel { list-style: none; margin: 16px 0 0; padding: 4px 0 0; border-top: 1px solid var(--c-fio); max-width: 400px; }
.ar-tel li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font: 300 14.5px/1.4 var(--c-sans); }
.ar-tel li + li { border-top: 1px solid color-mix(in oklab, var(--c-tinta) 10%, transparent); }
.ar-tel a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 64px; min-height: 44px; font: 400 27px/1 var(--c-serif); text-decoration: none; letter-spacing: .01em; }

.ar-fim { margin: clamp(30px, 3.6vw, 56px) 0 0; padding-top: 18px; border-top: 1px solid var(--c-fio); font: italic 400 clamp(19px, 1.6vw, 24px)/1.4 var(--c-serif); color: var(--c-tinta); }
.ar-fim .vg-link { font: inherit; padding: 12px 0; display: inline-block; }

/* ---------- com script: o índice vivo ---------- */
.ar-vivo .ar-pal {
  cursor: pointer;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--c-tinta) 58%, transparent);
  transition: color .9s var(--vg-curva), -webkit-text-stroke-color .9s var(--vg-curva), transform 1.2s var(--vg-curva);
}
.ar-vivo .ar-pal::after { -webkit-text-stroke: 0; transition: opacity .7s var(--vg-curva) .15s; }
.ar-vivo .ar-on .ar-pal { color: var(--c-tinta); -webkit-text-stroke-color: transparent; }
.ar-vivo .ar-on .ar-pal::after { opacity: 1; }
.ar-vivo .ar-h::after { background-size: 0% 100%, auto; transition: background-size 1.4s var(--vg-curva); }
.ar-vivo .ar-on .ar-h::after { background-size: 100% 100%, auto; }
@supports not (-webkit-text-stroke: 1px #000) {
  .ar-vivo .ar-pal { color: color-mix(in oklab, var(--c-tinta) 24%, transparent); }
}

@media (min-width: 821px) {
  /* os itálicos cabem sempre numa linha só: o corpo acompanha a largura da coluna */
  .ar-sec { --ar-f: clamp(14.5px, 1.68vw, 25px); }
  .ar-notas { flex-wrap: nowrap; white-space: nowrap; }
  .ar-vivo .ar-lista {
    position: relative;
    display: grid;
    grid-template-columns: var(--ar-col);
    column-gap: var(--ar-vao);
  }
  .ar-vivo .ar-item { display: contents; }
  .ar-vivo .ar-h { grid-column: 1; margin-right: calc(var(--ar-vao) * -1 + 18px); padding-bottom: clamp(4px, .9vw, 14px); }
  .ar-vivo .ar-on .ar-pal { transform: translate3d(.07em, 0, 0); }
  /* os itálicos ficam sempre na linha de base da palavra; o texto abre a partir deles */
  .ar-vivo .ar-atras {
    grid-column: 2;
    position: absolute; left: 0; right: 0; top: 0;
    cursor: pointer;
  }
  .ar-vivo .ar-on .ar-atras { z-index: 2; cursor: auto; }
  .ar-vivo .ar-notas { opacity: .5; transition: opacity .8s var(--vg-curva); }
  .ar-vivo .ar-on .ar-notas { opacity: 1; }
  .ar-vivo .ar-cala .ar-notas { opacity: 0; transition-duration: .35s; }
  .ar-vivo .ar-corpo {
    opacity: 0; visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: opacity .4s var(--vg-curva), clip-path 0s .4s, visibility 0s .4s;
  }
  .ar-vivo .ar-on .ar-corpo { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: opacity 1s var(--vg-curva) .4s, clip-path 1.5s var(--vg-curva) .4s, visibility 0s; }
  /* nas três últimas, o texto abre para cima e termina pousado nos itálicos */
  .ar-vivo .ar-item:nth-child(n+4) .ar-atras { display: flex; flex-direction: column-reverse; top: auto; bottom: calc(100% - var(--ar-g) * var(--ar-base) - var(--ar-f) * .22); padding-top: 0; }
  .ar-vivo .ar-item:nth-child(n+4) .ar-corpo { padding: 0 0 22px; clip-path: inset(100% 0 0 0); }
  .ar-vivo .ar-item:nth-child(n+4).ar-on .ar-corpo { clip-path: inset(0 0 0 0); }
  .ar-vivo .ar-item:nth-child(1) > * { grid-row: 1; }
  .ar-vivo .ar-item:nth-child(2) > * { grid-row: 2; }
  .ar-vivo .ar-item:nth-child(3) > * { grid-row: 3; }
  .ar-vivo .ar-item:nth-child(4) > * { grid-row: 4; }
  .ar-vivo .ar-item:nth-child(5) > * { grid-row: 5; }
  .ar-vivo .ar-item:nth-child(6) > * { grid-row: 6; }
}

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .ar-sec { --ar-g: 23.4vw; --ar-f: 7vw; background: none; }
  .ar-topo { grid-template-columns: 1fr; margin-bottom: 11vw; }
  .ar-t { order: 2; grid-template-columns: 1fr; margin-top: 9vw; }
  .ar-dica { order: 3; margin-top: 14px; font-size: 17.5px; }
  .ar-item { grid-template-columns: 1fr; padding-bottom: 14vw; }
  .ar-h { margin-right: calc(var(--c-pad) * -1); }
  .ar-h::after { margin-left: 5vw; }
  .ar-pal { min-height: 44px; }
  /* como no hero: os itálicos encostam embaixo da palavra, um por linha */
  .ar-atras { padding-top: 2.4vw; }
  .ar-notas { display: block; line-height: 1.14; }
  .ar-notas li { display: block; }
  .ar-notas li + li::before { content: none; }
  .ar-notas li:nth-child(2) { margin-left: 1.1em; }
  .ar-notas li:nth-child(3) { margin-left: 2.2em; }
  .ar-notas li:nth-child(4) { margin-left: 3.3em; }
  .ar-corpo { margin-top: 5.5vw; padding-top: 10px; border-top: 1px solid var(--c-fio); }
  .ar-txt { font-size: 15px; }
  .ar-vivo .ar-notas li, .ar-vivo .ar-corpo { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 1.1s var(--vg-curva), transform 1.2s var(--vg-curva); }
  .ar-vivo .ar-notas li:nth-child(1) { transition-delay: .1s; }
  .ar-vivo .ar-notas li:nth-child(2) { transition-delay: .26s; }
  .ar-vivo .ar-notas li:nth-child(3) { transition-delay: .42s; }
  .ar-vivo .ar-notas li:nth-child(4) { transition-delay: .58s; }
  .ar-vivo .ar-corpo { transition-delay: .7s; }
  .ar-vivo .ar-visto .ar-notas li, .ar-vivo .ar-visto .ar-corpo { opacity: 1; transform: none; }
  .ar-tel { max-width: none; }
  .ar-fim { margin-top: 0; }
}

/* ===== 04-conversa.html ===== */
/* ============ 04 · como funciona — "conversa" (prefixo cv-) ============ */
.cv-sec {
  --cv-u: min(1vw, 19.2px);
  --cv-sobre: #f6f0e7;
  --cv-giga: calc(var(--cv-u) * 21);
  --cv-meio: .578em;                  /* altura, na caixa da palavra, em que passa a borda da mesa */
  --cv-vao: calc(var(--cv-u) * 3.2);  /* da linha ao texto */
  padding-top: calc(var(--vg-sec-y) * .2);
  overflow: hidden;
}

/* ---------- o palco: a mesa da conversa ---------- */
.cv-palco { position: relative; margin: 0 calc(var(--c-pad) * -1); }
.cv-foto {
  position: relative;
  margin: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.14) 1.2vw, rgba(0,0,0,.55) 2.8vw, #000 4.6vw);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.14) 1.2vw, rgba(0,0,0,.55) 2.8vw, #000 4.6vw);
}
.cv-foto picture {
  display: block;
  /* ela inteira à esquerda; a janela se desfaz no papel; o tampo segue, nítido, até a borda da tela */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 51%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.3) 63%, transparent 72%),
    linear-gradient(0deg, #000 0, #000 13.5vw, transparent 13.95vw);
          mask-image:
    linear-gradient(90deg, #000 0%, #000 51%, rgba(0,0,0,.72) 56%, rgba(0,0,0,.3) 63%, transparent 72%),
    linear-gradient(0deg, #000 0, #000 13.5vw, transparent 13.95vw);
}
/* a mesa e a palavra cabem inteiras na primeira tela: o que sobra é teto, e é ele que se corta */
.cv-foto img {
  display: block;
  width: 100%;
  height: clamp(50.5vw, calc(100svh - 13.5vw), 55vw);
  object-fit: cover;
  object-position: 0 100%;
}
/* sombra rente à borda da mesa, para a metade de cima da palavra */
.cv-foto::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 9.4vw;
  background: linear-gradient(180deg, transparent, rgba(29, 21, 19, .5));
  pointer-events: none;
}

.cv-abre {
  position: absolute;
  top: calc(var(--cv-u) * 10);
  left: calc(var(--cv-u) * 63);
  right: var(--c-pad);
}
.cv-abre .vg-rot { padding-top: 12px; border-top: 1px solid var(--c-fio); width: max-content; padding-right: 3em; }
.cv-tese { margin-top: calc(var(--cv-u) * 2.2); font-size: clamp(30px, calc(var(--cv-u) * 3.9), 70px); line-height: 1.02; }
.cv-abre .vg-txt { margin-top: calc(var(--cv-u) * 1.7); max-width: 40ch; }

/* a palavra: metade sobre o tampo, metade sobre o papel */
.cv-giga {
  position: relative;
  margin: calc(var(--cv-meio) * -1) 0 0;
  padding: 0 calc(var(--c-pad) - .02em) 0 0;
  font-size: var(--cv-giga);
  text-align: right;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, var(--cv-sobre) 0, var(--cv-sobre) var(--cv-meio), var(--c-tinta) var(--cv-meio), var(--c-tinta) 100%);
  -webkit-background-clip: text;
          background-clip: text;
}
.cv-hifen { display: none; }

/* ---------- os quatro tempos: você de um lado da linha, eu do outro ---------- */
.cv-tempos {
  position: relative;
  list-style: none;
  margin: calc(var(--cv-u) * 1.2) 0 0;
  padding: calc(var(--cv-u) * 3.4) 0 calc(var(--cv-u) * 5.4);
}
.cv-linha {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c-fio);
}
.cv-linha i {
  position: absolute; inset: 0;
  background: var(--c-tinta);
  transform-origin: 50% 0;
  transform: scaleY(var(--cv-p, 1));
}
/* a ponta que escreve */
.cv-linha b {
  position: absolute;
  left: -3px; top: calc(var(--cv-p, 1) * 100% - 3px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-tinta);
}
.cv-tempo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: calc(var(--cv-vao) * 2);
  align-items: start;
  padding: calc(var(--cv-u) * 3.2) 0;
}
.cv-num {
  grid-row: 1;
  font: italic 400 calc(var(--cv-u) * 12)/.74 var(--c-serif);
  letter-spacing: -.04em;
  color: var(--c-tinta);
}
.cv-corpo { grid-row: 1; }
.cv-fala {
  margin: 0;
  font: 400 calc(var(--cv-u) * 5.1)/1 var(--c-serif);
  letter-spacing: -.018em;
  color: var(--c-tinta);
}
.cv-fala em { font-style: italic; }
.cv-corpo .vg-txt { margin-top: calc(var(--cv-u) * 1.5); max-width: 44ch; }
/* quem chega fala à esquerda da linha */
.cv-esq .cv-corpo { grid-column: 1; text-align: right; }
.cv-esq .cv-corpo .vg-txt { margin-left: auto; }
.cv-esq .cv-num { grid-column: 2; }
/* ela responde à direita */
.cv-dir .cv-corpo { grid-column: 2; }
.cv-dir .cv-num { grid-column: 1; justify-self: end; }
/* a frase do escritório fica na margem do tempo 4, como nota */
.cv-cita {
  grid-column: 1; grid-row: 1;
  justify-self: start; align-self: end;
  width: calc(var(--cv-u) * 27);
  margin: 0; padding: 14px 0 0;
  border-top: 1px solid var(--c-fio);
}
.cv-cita p { margin: 0; font: italic 400 clamp(20px, calc(var(--cv-u) * 1.75), 32px)/1.22 var(--c-serif); }
.cv-cita footer { margin-top: .9em; }

/* o tempo 3 é a tese: ocupa a largura toda e atravessa a linha */
.cv-tempo-3 { display: block; padding: calc(var(--cv-u) * 2.6) 0 calc(var(--cv-u) * 3.4); }
.cv-tempo-3 .cv-num { display: block; width: calc(50% - var(--cv-vao)); text-align: right; }
.cv-tempo-3 .cv-fala {
  position: relative;
  margin: calc(var(--cv-u) * 1.4) 0 calc(var(--cv-u) * 1.8);
  padding: .1em 0 .14em;
  background: var(--c-papel);
  font-size: calc(var(--cv-u) * 9.42);
  line-height: .94;
  letter-spacing: -.026em;
  white-space: nowrap;
  text-align: center;
}
.cv-tempo-3 .cv-fala em { color: var(--c-vermelho); }
.cv-tempo-3 .cv-corpo .vg-txt { margin: 0 0 0 calc(50% + var(--cv-vao)); max-width: 44ch; }

/* estado "a lápis": só com JS; a linha passa e a frase ganha tinta */
.vg-js .cv-escreve .cv-tempo > * { opacity: .24; transition: opacity 1.5s var(--vg-curva); }
.vg-js .cv-escreve .cv-tempo.cv-dito > * { opacity: 1; }
.vg-js .cv-escreve .cv-tempo.cv-dito > .cv-cita { transition-delay: .35s; }

/* ---------- fecho: a linha termina no convite ---------- */
.cv-fecho {
  position: relative;
  padding-top: calc(var(--cv-u) * 2.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.cv-fecho .vg-voz { font-size: clamp(24px, calc(var(--cv-u) * 2.7), 48px); margin-bottom: 6px; }
.cv-fecho .vg-fonte { margin: 0; font-size: 12.5px; line-height: 1.6; }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .cv-sec {
    --cv-giga: 45vw;
    --cv-meio: .49em;
    --cv-rec: 8.6vw;   /* recuo do texto em relação à linha */
    padding-top: 6vw;
  }
  .cv-palco { display: flex; flex-direction: column; }
  .cv-foto {
    order: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.2) 4vw, #000 12vw);
            mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.2) 4vw, #000 12vw);
  }
  .cv-foto picture { -webkit-mask-image: none; mask-image: none; }
  .cv-foto img { height: auto; }
  .cv-foto::after { height: 15vw; }
  /* "con-" sobre a borda da mesa; "versa" já no papel */
  .cv-giga { order: 2; padding: 0 var(--c-pad); text-align: left; line-height: .74; }
  .cv-g1, .cv-g2 { display: block; }
  .cv-g1 { margin-left: -.03em; }
  .cv-g2 { text-align: right; margin-right: -.02em; }
  .cv-hifen { display: inline; }
  .cv-abre { order: 3; position: static; padding: 13vw var(--c-pad) 0; }
  .cv-tese { margin-top: 5vw; font-size: 10vw; }
  .cv-abre .vg-txt { margin-top: 5vw; }

  .cv-tempos { margin-top: 13vw; padding: 3vw 0 12vw; }
  .cv-linha { left: 0; }
  .cv-tempo, .cv-tempo-3 { display: block; padding: 7vw 0 7vw var(--cv-rec); }
  .cv-num, .cv-dir .cv-num, .cv-tempo-3 .cv-num { display: block; width: auto; justify-self: auto; text-align: left; font-size: 24vw; line-height: .8; }
  .cv-esq .cv-corpo { text-align: left; }
  .cv-esq .cv-corpo .vg-txt { margin-left: 0; }
  .cv-fala { margin-top: 3vw; font-size: 10vw; line-height: 1.02; }
  .cv-corpo .vg-txt { margin-top: 3.8vw; }
  /* a tese volta à margem e interrompe a linha */
  .cv-tempo-3 .cv-fala {
    margin: 3vw 0 0 calc(var(--cv-rec) * -1 - 2px); padding: .1em 0 .12em 2px;
    font-size: 19.4vw; line-height: .9; white-space: normal; text-align: left;
  }
  .cv-tempo-3 .cv-fala span { display: block; }
  .cv-tempo-3 .cv-corpo .vg-txt { margin: 4vw 0 0; }
  .cv-cita { width: auto; margin-top: 7vw; }
  .cv-cita p { font-size: 5.8vw; }

  .cv-fecho { margin-left: var(--cv-rec); padding-top: 0; align-items: flex-start; text-align: left; gap: 16px; }
  .cv-fecho .vg-voz { font-size: 7vw; margin-bottom: 2px; }
  .cv-fecho .vg-fonte { font-size: 14.5px; }
  .cv-fecho .vg-botao { width: 100%; justify-content: center; height: 56px; padding: 0 16px; }
}

/* ===== 05-silencio.html ===== */
/* ============ 05 · silêncio — o único momento escuro: a estante atrás dela ============ */
.si-sec {
  --si-elev: clamp(170px, 17vw, 250px);   /* altura do anoitecer: papel → noite */
  --si-p: 1;                              /* avanço da rolagem (0 a 1); sem script, tudo aceso */
  --si-fw: clamp(340px, 42vw, 610px);     /* largura do retrato */
  --si-fh: calc(var(--si-fw) * 1.501);
  --si-giga: 39vw;
  /* o anoitecer passa pelos tons quentes da casa (pêssego, pele, brasa), sem cinza */
  --si-a1: color-mix(in oklab, var(--c-pessego) 38%, var(--c-papel));
  --si-a2: color-mix(in oklab, var(--c-pele) 50%, var(--c-pessego));
  --si-a3: color-mix(in oklab, var(--c-noite) 42%, var(--c-pele));
  --si-a4: color-mix(in oklab, var(--c-noite) 72%, var(--c-pele));
  --si-a5: color-mix(in oklab, var(--c-noite) 91%, var(--c-pele));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  color: var(--c-sobre-noite);
  padding: calc(var(--si-elev) + clamp(8px, 2vw, 32px)) var(--c-pad) calc(var(--si-elev) + clamp(16px, 2.6vw, 44px));
  background:
    linear-gradient(180deg, var(--c-papel) 0%, var(--si-a1) 20%, var(--si-a2) 42%, var(--si-a3) 62%, var(--si-a4) 79%, var(--si-a5) 91%, var(--c-noite) 100%) top / 100% var(--si-elev) no-repeat,
    linear-gradient(0deg, var(--c-papel) 0%, var(--si-a1) 20%, var(--si-a2) 42%, var(--si-a3) 62%, var(--si-a4) 79%, var(--si-a5) 91%, var(--c-noite) 100%) bottom / 100% var(--si-elev) no-repeat,
    var(--c-noite);
}

/* brasas: malha muito discreta, só na parte escura */
.si-malha, .si-malha::before {
  position: absolute;
  content: "";
  pointer-events: none;
}
.si-malha {
  z-index: -3;
  inset: calc(var(--si-elev) * 1.15) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  background:
    radial-gradient(circle at 50% 30% in oklab, rgba(110, 38, 41, .36) 0%, transparent 40%),
    radial-gradient(circle at 10% 82% in oklab, rgba(58, 12, 14, .7) 0%, transparent 40%);
}
.si-malha::before {
  inset: -10%;
  background:
    radial-gradient(circle at 24% 30% in oklab, rgba(110, 38, 41, .14) 0%, transparent 36%),
    radial-gradient(circle at 80% 74% in oklab, rgba(58, 12, 14, .62) 0%, transparent 38%);
  animation: si-deriva 30s ease-in-out infinite alternate;
}
@keyframes si-deriva { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.08); } }

/* rótulo */
.si-rot { color: var(--c-apoio-noite); display: flex; align-items: center; justify-content: center; gap: 14px; }
.si-rot::before, .si-rot::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: .45; }

/* palco: ela de frente, em penumbra; a palavra atravessa o peito, abaixo do rosto */
.si-palco {
  position: relative;
  height: var(--si-fh);
  margin-top: clamp(18px, 2.2vw, 34px);
}
.si-foto {
  position: absolute;
  z-index: -2;
  margin: 0;
  left: 50%;
  top: 0;
  width: var(--si-fw);
  height: var(--si-fh);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.08) 86%, transparent 93%);
          mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.08) 86%, transparent 93%);
}
.si-palco::before {
  /* luz de abajur atrás dela: solta o cabelo do fundo */
  content: "";
  position: absolute;
  z-index: -3;
  left: 50%;
  top: calc(var(--si-fh) * -.1);
  width: calc(var(--si-fw) * 1.9);
  height: calc(var(--si-fh) * .86);
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 46% in oklab, rgba(187, 149, 136, .2) 0%, rgba(110, 38, 41, .16) 38%, transparent 100%);
}
.si-foto img {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(.74) saturate(.52) contrast(1.06);
}
.si-sombra {
  position: absolute;
  inset: 0;
  /* a máscara (o próprio recorte) vem no atributo style da marcação: caminho relativo à página */
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background:
    radial-gradient(ellipse 50% 32% at 44% 24% in oklab, transparent 0%, transparent 34%, rgba(29, 21, 19, .8) 100%),
    linear-gradient(90deg, rgba(29, 21, 19, .1) 30%, rgba(29, 21, 19, .62) 100%);
}

/* a palavra: quase invisível, acende letra a letra com a rolagem */
.si-giga {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: calc(var(--si-fh) * .43);
  transform: translateX(-50.5%);
  font-size: var(--si-giga);
  white-space: nowrap;
  color: rgba(241, 231, 220, .15);
  user-select: none;
}
.si-giga span {
  display: inline-block;
  opacity: calc(.14 + .86 * clamp(0, var(--si-p) * 9.6 - var(--si-i) - .5, 1));
  transition: opacity 1.8s var(--vg-curva);
}

/* a citação */
.si-cit {
  margin: calc(var(--si-giga) * -.05) auto 0;
  max-width: 1000px;
  text-align: center;
}
.si-frase {
  margin: 0;
  font: 400 clamp(28px, 3.5vw, 54px)/1.12 var(--c-serif);
  letter-spacing: -.012em;
  color: var(--c-sobre-noite);
  text-wrap: balance;
}
.si-asp { display: inline-block; width: 0; direction: rtl; white-space: nowrap; color: var(--c-apoio-noite); }
.si-frase em { font-style: italic; color: color-mix(in oklab, var(--c-vermelho) 86%, #fff); }
.si-w { display: inline-block; opacity: 0; transform: translate3d(0, .22em, 0); filter: blur(5px); transition: opacity 1.3s var(--vg-curva) var(--si-t, 0s), transform 1.3s var(--vg-curva) var(--si-t, 0s), filter 1.3s var(--vg-curva) var(--si-t, 0s); }
.si-ouve .si-w { opacity: 1; transform: none; filter: none; }
.si-eco {
  margin: clamp(28px, 3vw, 46px) 0 0;
  font: italic 400 clamp(21px, 1.9vw, 28px)/1.25 var(--c-serif);
  color: var(--c-apoio-noite);
}
.si-fonte { display: block; margin-top: 14px; color: color-mix(in oklab, var(--c-apoio-noite) 82%, var(--c-noite)); font-style: normal; }

/* a ficha: fato pequeno e sóbrio */
.si-ficha {
  max-width: 1120px;
  margin: clamp(56px, 5.6vw, 88px) auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(241, 231, 220, .18);
  display: grid;
  grid-template-columns: max-content 1fr 1.2fr;
  gap: 14px clamp(28px, 4vw, 64px);
  align-items: start;
}
.si-rot2 { margin: 7px 0 0; white-space: nowrap; font: 500 10px/1.5 var(--c-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-apoio-noite); }
.si-fatos { display: grid; gap: 8px; }
.si-fatos h3 { margin: 0; font: 400 clamp(19px, 1.55vw, 23px)/1.25 var(--c-serif); color: var(--c-sobre-noite); }
.si-eu { margin: 3px 0 0; font: 300 clamp(15px, 1.08vw, 16px)/1.7 var(--c-sans); color: var(--c-apoio-noite); }

@media (max-width: 820px) {
  .si-sec { --si-elev: 190px; --si-fw: 92vw; --si-giga: 38.4vw; padding-bottom: calc(var(--si-elev) + 20px); }
  .si-palco { margin-top: 10px; }
  .si-giga { top: calc(var(--si-fh) * .5); }
  .si-cit { margin-top: calc(var(--si-fh) * -.2); padding-left: .3em; }
  .si-frase { font-size: clamp(27px, 7.6vw, 34px); line-height: 1.14; }
  .si-ficha { grid-template-columns: 1fr; margin-top: 56px; gap: 12px; }
  .si-rot2 { margin: 0; }
  .si-eu { font-size: 15px; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .si-giga span { opacity: 1; }
  .si-w { opacity: 1; transform: none; filter: none; }
}

/* ===== 06-duvida.html ===== */
/* ============ dúvida: a interrogação que vira ponto ============ */
@property --du-corte {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.du-sec {
  --du-k: 2.83;                                                   /* comprimento de "dúvida?" em relação ao corpo */
  --du-f: min(calc((100svh - 72px) / var(--du-k)), 21vw, 310px);  /* corpo da palavra em pé: ocupa a altura da tela */
  --du-colw: calc(var(--du-f) * .92);
  --du-gap: clamp(28px, 5vw, 96px);
  --du-rec: 64px;                                                 /* recuo do numeral */
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--du-colw) minmax(0, 1fr);
  column-gap: var(--du-gap);
  align-items: start;
  max-width: var(--vg-max);
  margin: 0 auto;
  overflow-x: clip;
}
/* luz de janela atrás do sinal */
.du-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 12% 14% in oklab, var(--c-papel-luz) 0%, transparent 100%),
    radial-gradient(38% 34% at 20% 62% in oklab, color-mix(in oklab, var(--c-pessego) 46%, transparent) 0%, transparent 100%);
}

/* ---------- a palavra em pé, como lombada ---------- */
.du-pe {
  position: sticky;
  z-index: 2;
  top: max(20px, calc((100svh - var(--du-f) * var(--du-k)) / 2));
  height: calc(var(--du-f) * var(--du-k));
  margin-left: calc(var(--du-f) * -.06);
  pointer-events: none;
}
.du-giga {
  position: absolute;
  left: 0;
  top: 100%;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  font-size: var(--du-f);
  line-height: 1;
  white-space: nowrap;
}

/* o sinal: "?" que perde o gancho e fica só com o ponto */
.du-sinal {
  display: inline-block;
  line-height: 1;
  padding: .12em .16em 0 .04em;
  margin: -.12em -.16em 0 -.04em;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--du-corte) - 9%), #000 var(--du-corte));
          mask-image: linear-gradient(180deg, transparent calc(var(--du-corte) - 9%), #000 var(--du-corte));
  transition: --du-corte 1.5s var(--vg-curva);
}
.du-giga .du-sinal { color: var(--c-vermelho); }
.du-q .du-sinal { transition: --du-corte 1.5s var(--vg-curva), transform 1.5s var(--vg-curva); }
.du-item[open] .du-q .du-sinal { transform: translate3d(-.07em, 0, 0); }
.du-sec:has(.du-item[open]) .du-giga .du-sinal,
.du-item[open] .du-sinal { --du-corte: 81%; }
/* ao chegar na seção, a interrogação ainda está inteira e se desfaz diante de quem lê */
.vg-js .du-pe.vg-on .du-giga .du-sinal { animation: du-chega 1.9s var(--vg-curva) 1.1s backwards; }
@keyframes du-chega { from { --du-corte: 0%; } }

/* ---------- coluna das perguntas ---------- */
.du-col { min-width: 0; }
.du-topo {
  position: relative;
  display: grid;
  grid-template-columns: var(--du-rec) minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 0;
  align-items: end;
  border-top: 1px solid var(--c-fio);
  padding: 12px 0 clamp(44px, 5.4vw, 84px);
}
.du-topo .vg-rot { grid-column: 1 / -1; margin-bottom: clamp(26px, 3.2vw, 50px); }
.du-chamada { grid-column: 2; padding-right: 20px; }
.du-guia { grid-column: 3; max-width: 31ch; padding-bottom: .5em; color: var(--c-tinta-2); }

.du-lista { position: relative; border-bottom: 1px solid var(--c-fio); }
.du-item { position: relative; border-top: 1px solid var(--c-fio); transition: border-color .9s ease; }
/* a pergunta aberta ganha fio de tinta cheia, como linha assinada */
.du-item[open] { border-top-color: color-mix(in oklab, var(--c-tinta) 78%, transparent); }
.du-item::before { transition: background-color .9s ease; }
.du-item[open]::before { background: color-mix(in oklab, var(--c-tinta) 78%, transparent); }
/* os fios correm até a margem, por trás da palavra: folha pautada */
.du-topo::before, .du-item::before, .du-lista::after {
  content: "";
  position: absolute;
  right: 100%;
  top: -1px;
  width: calc(var(--du-colw) + var(--du-gap) + var(--c-pad));
  height: 1px;
  background: var(--c-fio);
  pointer-events: none;
}
.du-lista::after { top: auto; bottom: -1px; }

.du-perg {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: var(--du-rec) minmax(0, 1fr);
  align-items: baseline;
  padding: clamp(20px, 2.05vw, 31px) 0;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.du-perg::-webkit-details-marker { display: none; }
.du-perg::marker { content: ""; }
.du-num {
  font: italic 400 clamp(19px, 1.6vw, 24px)/1 var(--c-serif);
  color: var(--c-tinta-2);
  transition: color .6s ease;
}
.du-item[open] .du-num { color: var(--c-tinta); }
.du-q {
  margin: 0;
  font: 400 clamp(25px, 2.6vw, 39px)/1.1 var(--c-serif);
  letter-spacing: -.012em;
  color: var(--c-tinta);
  text-wrap: balance;
  transition: transform .7s var(--vg-curva);
}
@media (hover: hover) {
  .du-item:not([open]) .du-perg:hover .du-q { transform: translate3d(10px, 0, 0); }
}

/* ---------- a resposta ---------- */
.du-resp {
  display: grid;
  grid-template-columns: var(--du-rec) minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 0;
  align-items: start;
  padding: clamp(4px, .6vw, 10px) 0 clamp(34px, 3.6vw, 54px);
}
.du-liga {
  grid-column: 2;
  margin: 0;
  padding-right: clamp(24px, 3vw, 52px);
  font: italic 400 clamp(23px, 2.1vw, 31px)/1.18 var(--c-serif);
  color: var(--c-tinta);
  text-wrap: balance;
}
.du-corpo { grid-column: 3; padding-top: .35em; }
.du-item[open] .du-liga, .du-item[open] .du-corpo > * { animation: du-abre 1.1s var(--vg-curva) backwards; }
.du-item[open] .du-corpo > :nth-child(1) { animation-delay: .12s; }
.du-item[open] .du-corpo > :nth-child(2) { animation-delay: .2s; }
.du-item[open] .du-corpo > :nth-child(3) { animation-delay: .28s; }
.du-item[open] .du-corpo > :nth-child(4) { animation-delay: .36s; }
.du-item[open] .du-corpo > :nth-child(5) { animation-delay: .44s; }
@keyframes du-abre { from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(4px); } }

.du-rot { margin-bottom: 10px; }
.du-cit { margin: 0; }
.du-corpo .vg-txt + .vg-txt { margin-top: 12px; }
.du-formas { margin: 16px 0 18px; font-size: clamp(20px, 1.62vw, 24px); row-gap: 2px; flex-wrap: nowrap; }
.du-formas li { white-space: nowrap; }
.du-formas li + li::before { content: none; }
.du-formas li:not(:last-child)::after { content: "·"; font-style: normal; margin: 0 .5em; opacity: .6; }
.du-caso {
  margin: 18px 0 0;
  font: italic 400 16.5px/1.4 var(--c-serif);
  color: var(--c-tinta-2);
}
.du-tel {
  display: inline-block;
  padding: 12px 2px;
  margin: -12px 0;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat;
}

/* ---------- fecho ---------- */
.du-fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 30px;
  padding: clamp(30px, 3.4vw, 50px) 0 0 var(--du-rec);
}
.du-zap { display: inline-block; padding: 15px 0; }

@media (max-width: 1100px) {
  .du-formas { flex-wrap: wrap; }
  .du-resp { grid-template-columns: var(--du-rec) minmax(0, 1fr); }
  .du-liga { padding-right: 0; }
  .du-corpo { grid-column: 2; padding-top: 16px; max-width: 38em; }
}

/* ---------- celular: a palavra deita e ocupa a largura ---------- */
@media (max-width: 820px) {
  .du-sec {
    --du-f: 30.5vw;
    --du-rec: 34px;
    display: block;
    padding-bottom: calc(var(--vg-sec-y) + 40px);
  }
  .du-sec::before {
    background: radial-gradient(90% 26% at 70% 4% in oklab, color-mix(in oklab, var(--c-pessego) 50%, transparent) 0%, transparent 100%);
  }
  .du-pe { position: static; height: auto; margin: 0 0 7vw -.03em; }
  .du-giga { position: static; transform: none; line-height: .86; }
  .du-topo::before, .du-item::before, .du-lista::after { display: none; }
  .du-topo { display: block; padding-bottom: 40px; }
  .du-chamada { font-size: clamp(32px, 9.4vw, 40px); padding-right: 0; }
  .du-guia { margin-top: 16px; font-size: 15px; max-width: none; }
  .du-perg { padding: 22px 0; }
  .du-num { font-size: 18px; }
  .du-q { font-size: clamp(25px, 7.1vw, 30px); text-wrap: pretty; }
  .du-resp { padding: 0 0 30px; }
  .du-liga { font-size: clamp(22px, 6.2vw, 26px); }
  .du-corpo .vg-txt { font-size: 15px; }
  .du-rot { font-size: 10.5px; letter-spacing: .1em; }
  .du-formas { flex-direction: column; font-size: 23px; line-height: 1.28; padding-left: 14px; border-left: 1px solid var(--c-fio); }
  .du-formas li:not(:last-child)::after { content: none; }
}

/* ===== 07-aqui.html ===== */
/* ---------- aqui: contato e endereço ---------- */
.aq-sec {
  --aq-giga: min(27vw, 400px);
  --aq-a1: 62deg; --aq-a2: 36deg; --aq-a3: 55deg; --aq-a4: 64deg;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 36% at 0% 62% in oklab, color-mix(in oklab, var(--c-pessego) 50%, var(--c-papel)) 0%, transparent 100%),
    radial-gradient(ellipse 42% 30% at 100% 32% in oklab, color-mix(in oklab, var(--c-taupe) 20%, var(--c-papel)) 0%, transparent 100%),
    var(--c-papel);
  padding-top: calc(var(--vg-sec-y) + 24px);
  padding-bottom: clamp(72px, 7.5vw, 112px);
}
.aq-in { max-width: var(--vg-max); margin: 0 auto; }

/* o palco: a palavra, o ponto e o endereço */
.aq-palco { position: relative; }
.aq-rot { position: relative; z-index: 2; }
.aq-giga { font-size: var(--aq-giga); margin: .12em 0 0 -.035em; white-space: nowrap; position: relative; z-index: 1; width: max-content; }
.aq-i { position: relative; display: inline-block; }

/* o ponto do i é o lugar: âncora de tamanho zero na linha de base, medida na letra de verdade */
.aq-ponto { display: inline-block; width: 0; height: 0; position: relative; vertical-align: baseline; }
.aq-ponto::before { content: ""; position: absolute; left: .2215em; bottom: .5075em; width: .112em; height: .112em; border-radius: 50%; background: var(--c-vermelho); }
.aq-aros { position: absolute; left: .2775em; top: -.5635em; width: 5.2em; height: 5.2em; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; z-index: -1; }
.aq-aros circle { fill: none; stroke: var(--c-tinta); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.aq-aros .aq-luz { fill: url(#aq-luz); stroke: none; }
.aq-aros text { font: italic 400 23px var(--c-serif); fill: var(--c-tinta); letter-spacing: .012em; }
.aq-aros .aq-coord { font: 400 11.5px var(--c-sans); letter-spacing: .18em; fill: var(--c-tinta-2); }
.aq-g1 { transform: rotate(var(--aq-a1)); }
.aq-g2 { transform: rotate(var(--aq-a2)); }
.aq-g3 { transform: rotate(var(--aq-a3)); }
.aq-g4 { transform: rotate(var(--aq-a4)); }

/* o gesto: os aros se abrem a partir do ponto e uma onda lenta continua saindo dele */
.vg-js .aq-abre { transform: scale(.02); opacity: 0; transition: transform 2.2s var(--vg-curva), opacity 1.6s ease; }
.vg-js .aq-g2 .aq-abre { transition-delay: .25s; }
.vg-js .aq-g3 .aq-abre { transition-delay: .5s; }
.vg-js .aq-g4 .aq-abre { transition-delay: .75s; }
.vg-js .aq-giga.vg-on .aq-abre { transform: none; opacity: 1; }
.aq-aros .aq-onda { stroke-opacity: .3; opacity: 0; animation: aq-onda 12s cubic-bezier(.25, .5, .4, 1) 2.6s infinite; }
@keyframes aq-onda { 0% { transform: scale(.02); opacity: 0; } 6% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* embaixo da palavra: a voz à esquerda da perna do q, o endereço à direita dela */
.aq-linha { position: relative; z-index: 1; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: calc(var(--aq-giga) * .03); align-items: baseline; }
.aq-voz { margin-top: calc(var(--aq-giga) * -.025); max-width: 10.6em; text-wrap: balance; }
.aq-dir, .aq-voz { position: relative; z-index: 2; }
.aq-end { font-style: normal; margin: 0; }
.aq-rua { display: block; font: 400 calc(var(--aq-giga) * .128)/1.04 var(--c-serif); letter-spacing: -.012em; white-space: nowrap; }
.aq-bairro { display: block; margin-top: .45em; font: italic 400 clamp(20px, 1.9vw, 28px)/1.25 var(--c-serif); }
.aq-acoes { margin-top: clamp(26px, 2.8vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.aq-acoes .vg-link, .aq-ver { display: inline-flex; align-items: center; min-height: 44px; }
.aq-ver { appearance: none; border: 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat; padding: 0; margin: 0; cursor: pointer; font: 400 13.5px var(--c-sans); color: var(--c-tinta); transition: background-size .5s var(--vg-curva); }
.aq-acoes .vg-link { background-position: 0 calc(100% - 9px); padding: 0; }
.aq-ver:hover { background-size: 40% 1px; }

/* o mapa: só carrega quando pedem */
.aq-mapa { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1.2s var(--vg-curva); position: relative; z-index: 1; }
.aq-mapa.aq-aberto { grid-template-rows: 1fr; }
.aq-mapa-in { overflow: hidden; min-height: 0; }
.aq-moldura { margin: clamp(36px, 5vw, 72px) calc(var(--c-pad) * -1) 0; height: clamp(340px, 34vw, 480px); position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-composite: intersect; }
.aq-moldura iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.55) sepia(.28) contrast(.96); mix-blend-mode: multiply; }
.aq-nota { margin: 14px 0 0; }

/* os dados: o número grande à esquerda, alinhado à palavra; os quatro fatos à direita, alinhados ao endereço */
.aq-dados { position: relative; z-index: 2; margin-top: clamp(64px, 7.5vw, 116px); display: grid; grid-template-columns: calc(var(--aq-giga) * 1.815 - 40px) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.aq-item { border-top: 1px solid var(--c-fio); padding: 12px 0 0; }
.aq-item h3 { margin: 0 0 9px; }
.aq-item p { margin: 0; font: 300 14.5px/1.6 var(--c-sans); }
.aq-fone { font: 400 calc(var(--aq-giga) * .2)/1 var(--c-serif); letter-spacing: -.018em; text-decoration: none; display: inline-block; padding: .06em 0 .16em; white-space: nowrap; }
.aq-item-1 p { font-size: clamp(15px, 1.12vw, 16.5px); }
.aq-quatro { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.4vw, 36px); row-gap: 30px; }
.aq-item a:not(.aq-fone) { text-underline-offset: 4px; text-decoration-thickness: 1px; display: inline-block; padding: 11px 0; margin: -11px 0; }

@media (max-width: 1180px) and (min-width: 821px) { .aq-acoes { gap: 10px 20px; } .aq-acoes .vg-botao { padding: 0 20px 0 18px; } }
@media (max-width: 820px) {
  .aq-sec { --aq-giga: min(45vw, 260px); --aq-a1: -4deg; --aq-a2: -34deg; --aq-a3: -44deg; --aq-a4: -37deg; padding-top: 64px; }
  .aq-rot { text-align: right; }
  .aq-giga { margin-top: 248px; }
  .aq-aros { width: 8em; height: 8em; }
  .aq-aros text { font-size: 20.5px; }
  .aq-aros .aq-coord { font-size: 15px; letter-spacing: .12em; }
  .aq-linha { display: block; }
  .aq-voz { margin: calc(var(--aq-giga) * .2) 0 22px; max-width: none; }
  .aq-rua { white-space: normal; }
  .aq-acoes .vg-botao { width: 100%; justify-content: center; height: 56px; }
  .aq-acoes { gap: 6px 28px; }
  .aq-ver, .aq-acoes .vg-link { font-size: 14.5px; }
  .aq-dados { margin-top: 52px; grid-template-columns: 1fr; row-gap: 30px; }
  .aq-quatro { column-gap: 20px; row-gap: 26px; }
  .aq-fone { padding: 6px 0 12px; }
  .aq-item-1 p { font-size: 15px; }
  .aq-rua { font-size: min(7.6vw, 44px); }
  .aq-bairro { font-size: min(5.4vw, 28px); }
  .aq-voz { font-size: min(6vw, 31px); }
  .aq-fone { font-size: min(11.6vw, 64px); }
  .aq-moldura { height: 380px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
}
@media (max-width: 820px) and (min-width: 560px) { .aq-aros { width: 5.6em; height: 5.6em; } .aq-aros text { font-size: 29px; } .aq-aros .aq-coord { font-size: 20px; } .aq-acoes .vg-botao { width: auto; } }

/* ===== 08-rodape.html ===== */
/* ---------- rodapé ---------- */
.ro-rodape { position: relative; padding: 0 var(--c-pad); background: var(--c-papel); color: var(--c-tinta); }
.ro-in { max-width: var(--vg-max); margin: 0 auto; border-top: 1px solid var(--c-fio); padding: clamp(40px, 4.6vw, 68px) 0 0; }
.ro-topo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; }
.ro-frase { margin: 0; font: 400 clamp(27px, 2.7vw, 40px)/1.08 var(--c-serif); letter-spacing: -.012em; max-width: 11em; }
.ro-frase em { font-style: italic; }
.ro-quem b { display: block; font: 500 25px/1.1 var(--c-serif); letter-spacing: -.005em; }
.ro-quem .vg-rot { margin-top: 8px; }
.ro-casa, .ro-end { margin: 0; font: 300 14.5px/1.65 var(--c-sans); font-style: normal; }
.ro-quem .vg-rot { line-height: 1.6; }
.ro-quem .ro-casa { margin-top: 18px; }
.ro-end a { display: inline-block; padding: 10px 0; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ro-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.ro-nav a { display: flex; align-items: center; min-height: 44px; margin-top: -11px; font: 400 14.5px var(--c-sans); text-decoration: none; }
.ro-nav a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding: 3px 0; transition: background-size .5s var(--vg-curva); }
.ro-nav a:hover span, .ro-nav a:focus-visible span { background-size: 100% 1px; }
.ro-selo { margin: clamp(44px, 5vw, 72px) 0 0; border-top: 1px solid var(--c-fio); padding: 6px 0 14px; display: flex; justify-content: flex-end; font: 400 13px var(--c-sans); letter-spacing: .01em; color: var(--c-tinta-2); }
.ro-selo span { display: inline-flex; align-items: center; min-height: 44px; }
.ro-selo a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .35em; color: var(--c-tinta); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s ease; }
.ro-selo a:hover, .ro-selo a:focus-visible { color: var(--c-vinho); }
@media (max-width: 820px) {
  .ro-rodape { padding-bottom: 84px; }
  .ro-topo { grid-template-columns: 1fr; row-gap: 34px; }
  .ro-frase { font-size: 8vw; }
  .ro-nav a { margin-top: 0; }
  .ro-nav { margin-top: -8px; }
  .ro-selo { justify-content: flex-start; margin-top: 30px; font-size: 14.5px; padding-bottom: 0; }
}