/* voz · entardecer, ameixa-noite */
.vz-secao{
  position:relative;isolation:isolate;overflow:clip;
  background:linear-gradient(in oklab 180deg, #1f1a22 0%, #2c2230 55%, #3d2b36 100%);
  color:#f6ece1;
  padding:var(--respiro) var(--margem);
  font-family:var(--f-texto);font-weight:300;
}
.vz-ceu{position:absolute;inset:0;z-index:-2;pointer-events:none}
.vz-m{position:absolute;border-radius:50%}
.vz-m1{width:80vmax;height:60vmax;left:-30vmax;top:-30vmax;opacity:.55;
  background:radial-gradient(closest-side in oklab, #3d2b36 0%, color-mix(in oklab, #3d2b36 0%, transparent) 100%);
  animation:vz-deriva1 34s ease-in-out infinite alternate}
.vz-m2{width:60vmax;height:44vmax;left:-14vmax;bottom:-24vmax;opacity:.32;
  background:radial-gradient(closest-side in oklab, #94543f 0%, color-mix(in oklab, #94543f 0%, transparent) 100%);
  animation:vz-deriva2 28s ease-in-out infinite alternate}
/* poente: o resto da tarde terracota entra pelo topo e se apaga no ameixa */
.vz-poente{position:absolute;left:0;right:0;top:0;height:clamp(140px,16vw,260px);
  background:linear-gradient(in oklab 180deg, color-mix(in oklab, #94543f 55%, #1f1a22) 0%, color-mix(in oklab, #94543f 18%, #1f1a22) 38%, color-mix(in oklab, #1f1a22 0%, transparent) 100%)}
.vz-poente::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, transparent, rgb(242 207 176 / .35) 30%, rgb(242 207 176 / .35) 70%, transparent)}
/* sol baixo atrás dela */
.vz-sol{position:absolute;width:62vmax;height:62vmax;right:-14vmax;top:18%;opacity:.5;
  background:radial-gradient(closest-side in oklab, #f2cfb0 0%, #c9944f 26%, color-mix(in oklab, #94543f 30%, transparent) 55%, color-mix(in oklab, #3d2b36 0%, transparent) 100%);
  animation:vz-respira 22s ease-in-out infinite alternate}
@keyframes vz-deriva1{to{transform:translate(6vmax,4vmax) scale(1.06)}}
@keyframes vz-deriva2{to{transform:translate(5vmax,-2vmax) scale(1.08)}}
@keyframes vz-respira{from{opacity:.38;scale:.96}to{opacity:.54;scale:1.04}}

.vz-in{max-width:var(--conteudo);margin:0 auto;position:relative}
.vz-texto{position:relative;z-index:2;width:min(58%, 780px)}

/* epígrafe: legenda gravada na base do retrato */
.vz-epigrafe{
  position:absolute;z-index:3;right:0;bottom:calc(-.35 * var(--respiro));margin:0;
  width:min(46%, 470px);text-align:right;
  display:grid;gap:8px;justify-items:end;
}
.vz-ep-frase{font-family:var(--f-titulo);font-weight:500;font-size:clamp(34px,3.3vw,52px);line-height:.9;letter-spacing:.01em;color:#f2cfb0;text-shadow:0 2px 24px rgb(20 14 20 / .8)}
.vz-ep-ref{white-space:nowrap;font-size:15px;letter-spacing:.02em;color:#d8c9c4;text-shadow:0 1px 12px rgb(20 14 20 / .9);display:flex;align-items:center;gap:12px}
.vz-ep-ref::before{content:"";width:28px;height:1px;background:#c9944f}
.vz-titulo{margin:0 0 22px;font-family:var(--f-titulo);font-weight:500;font-size:clamp(20px,1.7vw,24px);letter-spacing:.18em;text-transform:uppercase;color:#d8c9c4;display:flex;align-items:center;gap:14px}
.vz-titulo::before{content:"";width:34px;height:2px;border-radius:2px;background:#c9944f}

.vz-q1{margin:0;position:relative}
.vz-luz{position:absolute;z-index:-1;left:0;top:0;width:min(40vw,520px);aspect-ratio:1.6;border-radius:50%;pointer-events:none;
  translate:calc(var(--vz-x, 0px) - 50%) calc(var(--vz-y, 0px) - 50%);opacity:0;
  background:radial-gradient(closest-side in oklab, rgb(242 207 176 / .2) 0%, rgb(201 148 79 / .08) 50%, rgb(201 148 79 / 0) 100%);
  transition:translate .55s var(--curva), opacity 1.2s ease}
.vz-luz.on{opacity:1}
.vz-q1 blockquote{margin:0}
.vz-frase{
  margin:0;font-family:var(--f-titulo);font-weight:500;
  font-size:clamp(52px,7.6vw,128px);line-height:.86;letter-spacing:-.005em;
  color:#f2cfb0;
}
.vz-frase .vz-el{font-size:.42em;letter-spacing:.04em;color:#c9944f;vertical-align:.95em}
.vz-frase .vz-p{position:relative;transition:color 1.1s ease, text-shadow 1.4s ease}
.js .vz-frase .vz-p{color:rgb(246 236 225 / .16)}
.js .vz-frase .vz-p.on{color:#f2cfb0;text-shadow:0 0 .5em rgb(242 207 176 / .16)}
.vz-frase .vz-forte{color:#ffe7cf}
.js .vz-frase .vz-p.on.vz-forte{color:#ffe7cf;text-shadow:0 0 .4em rgb(201 148 79 / .5)}
/* fio de ouro sob "amor" e "esperança" (sublinhado de texto: acompanha a linha base da Teko) */
.vz-frase .vz-forte{text-decoration:underline;text-decoration-thickness:.05em;text-underline-offset:.1em;text-decoration-skip-ink:none;text-decoration-color:#c9944f;transition:color 1.1s ease, text-shadow 1.4s ease, text-decoration-color 1.4s ease .3s}
.js .vz-frase .vz-forte{text-decoration-color:rgb(201 148 79 / 0)}
.js .vz-frase .vz-forte.on{text-decoration-color:#c9944f}
.vz-q1 figcaption{margin-top:28px;font-size:16px;color:#d8c9c4;line-height:1.5}
.vz-q1 figcaption::before{content:"";display:inline-block;width:22px;height:1px;margin-right:12px;background:#d8c9c4;opacity:.6;vertical-align:.32em}
.vz-q1 figcaption strong{font-weight:400;color:#f6ece1}
.vz-apoio{margin:34px 0 0;max-width:31em;text-wrap:pretty;font-size:clamp(18px,1.35vw,21px);line-height:1.6;color:#f6ece1}

/* raia: faixa com linhas brancas, como uma raia de pista ao fim da tarde */
.vz-raia{
  position:relative;margin-top:clamp(56px,6vw,88px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 44px;align-items:end;
  padding:34px 0 36px;
  border-block:1px solid rgb(255 250 243 / .2);
}
.vz-rotulo{margin:0 0 12px;font-family:var(--f-titulo);font-weight:500;font-size:19px;letter-spacing:.16em;text-transform:uppercase;color:#c9944f}
.vz-q4{margin:0;position:relative}
.vz-q4 blockquote{margin:0}
.vz-q4 blockquote p{margin:0;font-weight:300;font-style:italic;font-size:clamp(21px,1.75vw,26px);line-height:1.38;color:#f6ece1}
.vz-q4 figcaption{margin-top:12px;font-size:15px;color:#d8c9c4}
.vz-ig{position:relative}
.vz-ig p{margin:0 0 18px;font-size:18px;line-height:1.55;color:#d8c9c4;text-wrap:pretty}
.vz-link{
  display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px 0 20px;border-radius:var(--raio);
  background:#f2cfb0;color:#1c1a1c;text-decoration:none;font-size:17px;font-weight:400;
  transition:transform .35s var(--curva), background-color .3s, box-shadow .35s;
  box-shadow:0 12px 30px -14px rgb(201 148 79 / .6);
}
.vz-link b{font-weight:500}
.vz-link svg{width:21px;height:21px;flex:none}
.vz-link:hover,.vz-link:focus-visible{transform:translateY(-2px);background:#f7dcc2}
.vz-link:focus-visible{outline:2px solid #f2cfb0;outline-offset:3px}

/* retrato vivo: a parede cinza do estúdio vira luz de fim de tarde, e ela fica grande, até a borda */
.vz-retrato{
  position:absolute;z-index:1;margin:0;
  top:calc(-1 * var(--respiro));bottom:calc(-1 * var(--respiro));
  right:calc(-1 * max(var(--margem), (100vw - var(--conteudo)) / 2));
  width:min(48vw, 760px);
  isolation:isolate;
  background:radial-gradient(ellipse 74% 46% at 62% 28%, #fff0df 0%, #f4d0ae 30%, #b67a63 60%, #4a3140 84%, #2c2230 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%);
          mask-composite:intersect;
}
.vz-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:56% 8%;mix-blend-mode:multiply;filter:contrast(1.05) saturate(.92)}

@media (max-width:1100px){
  .vz-texto{width:min(60%, 640px)}
  .vz-frase{font-size:clamp(52px,7vw,92px)}
  .vz-raia{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .vz-secao{padding-top:0}
  .vz-in{display:flex;flex-direction:column}
  .vz-texto{width:auto;margin-top:-18vw}
  .vz-retrato{
    position:relative;inset:auto;order:-1;
    width:calc(100% + 2 * var(--margem));margin:0 calc(-1 * var(--margem));
    aspect-ratio:4/5;max-height:760px;
    background:radial-gradient(ellipse 80% 52% at 54% 30%, #fff0df 0%, #f4d0ae 32%, #b67a63 62%, #4a3140 86%, #2c2230 100%);
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
  }
  .vz-video{object-position:50% 6%}
  .vz-epigrafe{position:relative;right:auto;bottom:auto;order:-1;width:auto;text-align:left;justify-items:start;margin:-22vw 0 34px;z-index:3}
  .vz-ep-ref{flex-direction:row-reverse}
  .vz-frase{font-size:clamp(46px,9.6vw,92px)}
  .vz-texto{margin-top:0}
  .vz-sol{right:-30vmax;top:-10%}
}
@media (max-width:520px){
  .vz-frase{font-size:clamp(46px,13.6vw,64px)}
  .vz-ep-frase{font-size:34px}
  .vz-ep-ref{white-space:normal}
  .vz-ep-ref::before{display:none}
  .vz-epigrafe{margin-top:-20vw}
  .vz-q1 figcaption{font-size:15px}
  .vz-q4 figcaption{font-size:15px}
  .vz-link{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .vz-frase .vz-p{color:#f2cfb0}
  .js .vz-frase .vz-forte{text-decoration-color:#c9944f}
}