/* v8-valorizacao.css: bloco de autoridade "Valorização do portfólio" (01/10/2026, v2 em pódio).
   Segunda parte do capítulo 06 (Plantel). Prefixo vz-; nada aqui altera outras seções.
   Composição centralizada, como uma cerimônia: o número no alto e o pódio embaixo.
   O momento marcante é o pódio subindo um lugar de cada vez, do 5º ao 1º, até o campeão
   ganhar o troféu, o arco dourado e a luz. */

.vz{
  --vz-gold:#c9a684;
  --vz-gold-soft:#dcc3a3;
  --vz-gold-hi:#f3dfc2;
  --vz-ink:#f5f2eb;
  --vz-text:#c9d2db;
  --vz-muted:#a7b3c1;
  --vz-line:rgba(201,166,132,.28);
  --vz-rise:cubic-bezier(.2,.8,.2,1);
  position:relative;isolation:isolate;overflow:clip;
  padding:24px 0 120px;
  color:var(--vz-ink);text-align:center;
  background:linear-gradient(180deg,#253a57 0%,#1f3150 30%,#192841 100%);
}
/* continua a grade do Plantel; luz de palco sobre o pódio e um brilho atrás do número */
.vz::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 620px 360px at 50% 26%,rgba(201,166,132,.12),transparent 70%),
    radial-gradient(ellipse 900px 520px at 50% 92%,rgba(201,166,132,.12),transparent 68%),
    radial-gradient(ellipse 1400px 900px at 50% 60%,transparent 55%,rgba(10,17,29,.45) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.024) 0 1px,transparent 1px 72px);
}
.vz em{font-style:normal}

/* ---- cabeçalho (o mesmo da v2): numeral com filete + título, como o "Como participar" ---- */
.vz-head{padding-top:96px;border-top:1px solid rgba(255,255,255,.12);text-align:left}
.vz-head .eyebrow{margin-bottom:34px}
.vz-lockup{display:flex;align-items:center;gap:44px}
.vz-bignum{
  flex-shrink:0;display:flex;align-items:flex-start;margin:0;
  padding-right:44px;border-right:1px solid rgba(255,255,255,.12);
  font:400 clamp(150px,15vw,232px)/.78 var(--serif);letter-spacing:-.01em;
  background:linear-gradient(170deg,#e6cba8 5%,#b28f6f 55%,#89674a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.vz-bignum small{font-size:.2em;line-height:1;margin:.3em .18em 0 0;letter-spacing:.02em}
.vz-bignum b{font-weight:400;display:inline-block;text-align:left}
.vz-title{min-width:0}
.vz-title h2{margin:0;font-size:var(--h2);line-height:var(--h2-lh,1.16)}
.vz-title h2 em{color:var(--vz-gold)}
.vz-lead{max-width:30em;margin:24px 0 0;font:300 16px/1.75 var(--sans);color:var(--vz-text)}

/* ---- palco ---- */
.vz-stage{margin-top:76px}
.vz-stage-title{
  display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 30px;
  font:400 clamp(20px,1.8vw,26px)/1.15 var(--serif);
  text-transform:uppercase;letter-spacing:.07em;color:var(--vz-ink);
}
.vz-stage-title::before,.vz-stage-title::after{
  content:'';width:clamp(36px,8vw,120px);height:1px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,rgba(201,166,132,.7));
}
.vz-stage-title::after{transform:scaleX(-1)}

.vz-rank{
  list-style:none;margin:0 auto;padding:0;max-width:1180px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-areas:"p4 p2 p1 p3 p5";
  align-items:end;column-gap:12px;
}
.vz-place{position:relative;z-index:0;display:flex;flex-direction:column;align-items:stretch;min-width:0}
.vz-place--1{grid-area:p1;--h:262px;--n:132px;--d:1.5s;z-index:1}
.vz-place--2{grid-area:p2;--h:200px;--n:100px;--d:1.15s}
.vz-place--3{grid-area:p3;--h:160px;--n:84px;--d:.8s}
.vz-place--4{grid-area:p4;--h:118px;--n:66px;--d:.45s}
.vz-place--5{grid-area:p5;--h:90px;--n:54px;--d:.1s}

/* quem está no degrau */
.vz-who{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:18px;padding:0 4px}
.vz-name-main{
  display:block;text-wrap:balance;
  font:400 clamp(19px,1.75vw,24px)/1.05 var(--serif);text-transform:uppercase;letter-spacing:.03em;color:#dfe5ea;
}
.vz-place--2 .vz-name-main,.vz-place--3 .vz-name-main{font-size:clamp(21px,2vw,28px);color:var(--vz-ink)}
.vz-place--1 .vz-name-main{font-size:clamp(24px,2.35vw,34px);color:var(--vz-ink)}
.vz-sfx{
  display:block;margin-top:8px;white-space:nowrap;
  font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--vz-gold);
}
.vz-crown{
  display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(150deg,var(--vz-gold-hi) 0%,var(--vz-gold) 50%,#9c7a5b 100%);
  color:#1c2c42;
  box-shadow:0 0 0 7px rgba(201,166,132,.12),0 16px 34px -12px rgba(201,166,132,.6);
}
.vz-crown svg{width:23px;height:23px;stroke-width:1.6}
/* arco dourado sobre o campeão: o arco da marca, com os pontos da molécula */
.vz-halo{
  position:absolute;left:50%;bottom:-8px;z-index:-1;
  width:clamp(250px,24vw,320px);aspect-ratio:2/1;height:auto;
  transform:translateX(-50%);overflow:visible;pointer-events:none;
}
.vz-halo path{fill:none;stroke:rgba(220,195,163,.62);stroke-width:.85;stroke-linecap:round}
.vz-halo circle{fill:var(--vz-gold-soft)}

/* os degraus */
.vz-block{
  position:relative;overflow:hidden;height:var(--h);
  border:1px solid rgba(255,255,255,.1);border-bottom:0;border-top:1.5px solid rgba(201,166,132,.65);
  background:
    linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.02) 52%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#24395a 0%,#1a2a44 100%);
  box-shadow:0 34px 60px -34px rgba(0,0,0,.75);
}
/* o arco da marca: canto arredondado voltado para fora do pódio */
.vz-place--2 .vz-block,.vz-place--4 .vz-block{border-radius:48px 6px 0 0}
.vz-place--3 .vz-block,.vz-place--5 .vz-block{border-radius:6px 48px 0 0}
.vz-place--4 .vz-block,.vz-place--5 .vz-block{border-top-color:rgba(255,255,255,.3)}
.vz-place--1 .vz-block{
  border-radius:64px 64px 0 0;border-top:2px solid #e7cba8;border-left-color:rgba(201,166,132,.4);border-right-color:rgba(201,166,132,.4);
  background:
    linear-gradient(180deg,rgba(201,166,132,.3) 0%,rgba(201,166,132,.07) 40%,rgba(255,255,255,.01) 100%),
    linear-gradient(180deg,#2a4266 0%,#1b2b44 100%);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.8),0 -10px 50px -20px rgba(201,166,132,.35);
}
/* textura da molécula da marca dentro de cada degrau */
.vz-block::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
  background:url("data:image/svg+xml,%3Csvg width='420' height='420' viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23e7cba8' stroke-width='1.4'%3E%3Cpath d='M25 100C95 35 135 165 215 105S330 35 402 100M12 270c72-65 122 70 205 2s128-52 192 2M80 15c30 75 106 40 118 125s-58 116-7 180 117 12 148 86'/%3E%3C/g%3E%3Cg fill='%23e7cba8'%3E%3Ccircle cx='25' cy='100' r='5'/%3E%3Ccircle cx='215' cy='105' r='5'/%3E%3Ccircle cx='402' cy='100' r='5'/%3E%3Ccircle cx='217' cy='272' r='5'/%3E%3Ccircle cx='198' cy='140' r='5'/%3E%3Ccircle cx='191' cy='320' r='5'/%3E%3C/g%3E%3C/svg%3E") 50% 0/300px repeat;
  -webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%);
}
.vz-block-n{
  position:absolute;left:0;right:0;top:calc(var(--h) * .13);
  font:400 var(--n)/.8 var(--serif);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.2px rgba(201,166,132,.85);
}
.vz-block-n small{font:700 .2em/1 var(--sans);vertical-align:2.6em;margin-left:.08em;-webkit-text-stroke:0;color:var(--vz-gold)}
.vz-place--4 .vz-block-n,.vz-place--5 .vz-block-n{-webkit-text-stroke-color:rgba(255,255,255,.34)}
.vz-place--4 .vz-block-n small,.vz-place--5 .vz-block-n small{color:var(--vz-muted)}
.vz-place--1 .vz-block-n{
  -webkit-text-stroke:0;
  background:linear-gradient(172deg,var(--vz-gold-hi) 0%,#d6b693 45%,#a9835f 100%);
  -webkit-background-clip:text;background-clip:text;
}
.vz-place--1 .vz-block-n small{color:var(--vz-gold-hi)}

/* linha de palco e brilho no chão, a partir do centro */
.vz-place--1::after{
  content:'';position:absolute;z-index:3;left:50%;bottom:0;
  width:min(1180px,100vw);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent 0%,rgba(201,166,132,.5) 16%,var(--vz-gold-hi) 50%,rgba(201,166,132,.5) 84%,transparent 100%);
}
.vz-place--1::before{
  content:'';position:absolute;z-index:-2;left:50%;bottom:-70px;
  width:min(980px,96vw);height:140px;transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(201,166,132,.2),transparent 72%);
  pointer-events:none;
}
/* feixe de luz sobre o 1º lugar */
.vz-spot{
  position:absolute;z-index:-1;left:50%;bottom:0;
  width:190%;height:calc(100% + 150px);transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(243,223,194,0) 0%,rgba(243,223,194,.1) 38%,rgba(243,223,194,.03) 100%);
  clip-path:polygon(41% 0,59% 0,100% 100%,0 100%);
  pointer-events:none;
}

.vz-note{
  display:flex;gap:10px;align-items:flex-start;justify-content:center;
  max-width:44em;margin:58px auto 0;
  font:300 12.5px/1.6 var(--sans);color:var(--vz-muted);
}
.vz-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--vz-gold);stroke-width:1.5}

/* ---- o momento: o pódio sobe um lugar de cada vez ---- */
.vz.is-armed .vz-block{clip-path:inset(100% 0 0 0)}
.vz.is-armed .vz-block-n{transform:translateY(30%);opacity:0}
.vz.is-armed .vz-who{opacity:0;transform:translateY(14px)}
.vz.is-armed .vz-place--1::after{transform:translateX(-50%) scaleX(0)}
.vz.is-armed .vz-place--1::before,.vz.is-armed .vz-spot,.vz.is-armed .vz-halo circle{opacity:0}
.vz.is-armed .vz-halo path{stroke-dasharray:1;stroke-dashoffset:1}
.vz.is-armed .vz-crown{transform:scale(.4);opacity:0}

.vz.is-armed.is-live .vz-place--1::after{transform:translateX(-50%) scaleX(1);transition:transform 1s var(--vz-rise)}
.vz.is-armed.is-live .vz-block{clip-path:inset(0 0 0 0);transition:clip-path .85s var(--vz-rise) var(--d)}
.vz.is-armed.is-live .vz-block-n{transform:none;opacity:1;transition:transform .9s var(--vz-rise) calc(var(--d) + .2s),opacity .5s ease calc(var(--d) + .2s)}
.vz.is-armed.is-live .vz-who{opacity:1;transform:none;transition:opacity .5s ease calc(var(--d) + .5s),transform .7s cubic-bezier(.2,.9,.25,1.2) calc(var(--d) + .5s)}
.vz.is-armed.is-live .vz-place--1::before{opacity:1;transition:opacity 1.2s ease 2s}
.vz.is-armed.is-live .vz-spot{opacity:1;transition:opacity 1.2s ease 2.1s}
.vz.is-armed.is-live .vz-halo path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.25,1) 2.15s}
.vz.is-armed.is-live .vz-halo circle{opacity:1;transition:opacity .4s ease 3s}
.vz.is-armed.is-live .vz-crown{transform:none;opacity:1;transition:transform .6s cubic-bezier(.2,.9,.25,1.5) 2.35s,opacity .3s ease 2.35s}
.vz.is-armed.is-live .vz-place--1 .vz-crown{animation:vz-pulse 1.4s ease-out 2.9s 1 both}
@keyframes vz-pulse{
  from{box-shadow:0 0 0 0 rgba(220,195,163,.6),0 16px 34px -12px rgba(201,166,132,.6)}
  to{box-shadow:0 0 0 22px rgba(220,195,163,0),0 16px 34px -12px rgba(201,166,132,.6)}
}

/* ---- telas médias: degraus menores ---- */
@media(max-width:1279px) and (min-width:1001px){
  .vz-place--1{--h:226px;--n:116px}
  .vz-place--2{--h:172px;--n:88px}
  .vz-place--3{--h:138px;--n:74px}
  .vz-place--4{--h:104px;--n:58px}
  .vz-place--5{--h:80px;--n:48px}
}

/* ---- tablet e celular: pódio de três e placas para o 4º e o 5º ---- */
@media(max-width:1000px){
  .vz{padding-bottom:96px}
  .vz-head{padding-top:72px}
  .vz-lockup{gap:30px}
  .vz-bignum{padding-right:30px;font-size:clamp(116px,17vw,150px)}
  .vz-stage{margin-top:64px}
  .vz-rank{
    grid-template-columns:1fr 1fr 1.2fr 1.2fr 1fr 1fr;
    grid-template-areas:"p2 p2 p1 p1 p3 p3" "p4 p4 p4 p5 p5 p5";
    column-gap:8px;row-gap:34px;max-width:640px;
  }
  .vz-place--1{--h:220px;--n:110px}
  .vz-place--2{--h:168px;--n:84px}
  .vz-place--3{--h:132px;--n:68px}
  .vz-place--1::after{width:min(640px,100vw)}
  .vz-place--1::before{width:min(640px,100vw);bottom:-60px;height:110px}
  .vz-place--4,.vz-place--5{
    flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:14px;
    padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:18px;
    background:rgba(255,255,255,.035);text-align:left;align-self:stretch;
  }
  .vz-place--4 .vz-who,.vz-place--5 .vz-who{align-items:flex-start;margin:0;padding:0}
  .vz-place--4 .vz-block,.vz-place--5 .vz-block{
    flex-shrink:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
    border:1px solid rgba(201,166,132,.45);box-shadow:none;
  }
  .vz-place--4 .vz-block::after,.vz-place--5 .vz-block::after{display:none}
  .vz-place--4 .vz-block-n,.vz-place--5 .vz-block-n{
    position:static;text-align:center;padding-left:.12em;font-size:24px;line-height:1;
    color:var(--vz-gold);-webkit-text-stroke:0;
  }
  .vz-place--4 .vz-block-n small,.vz-place--5 .vz-block-n small{font-size:10px;vertical-align:1em;color:var(--vz-gold)}
  .vz-place--4 .vz-name-main,.vz-place--5 .vz-name-main{font-size:20px}
  .vz-place--4 .vz-sfx,.vz-place--5 .vz-sfx{margin-top:6px}
  .vz.is-armed .vz-place--4 .vz-block-n,.vz.is-armed .vz-place--5 .vz-block-n,
  .vz.is-armed.is-live .vz-place--4 .vz-block-n,.vz.is-armed.is-live .vz-place--5 .vz-block-n{transform:none}
  .vz-note{margin-top:46px}
}
@media(max-width:760px){
  .vz{padding:16px 0 84px}
  .vz-head{padding-top:60px;text-align:center}
  .vz-head .eyebrow{justify-content:center;gap:10px;margin-bottom:28px}
  .vz-head .eyebrow::after{content:'';width:24px;height:1px;background:currentColor;flex-shrink:0}
  .vz-lockup{flex-direction:column;align-items:center;gap:22px}
  .vz-bignum{padding:0 0 22px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12);font-size:clamp(112px,34vw,148px)}
  .vz-lead{margin:18px auto 0}
  .vz-stage{margin-top:54px}
  .vz-stage-title{font-size:19px;gap:12px;margin-bottom:24px}
  .vz-rank{column-gap:6px;row-gap:28px}
  .vz-place--1{--h:172px;--n:86px}
  .vz-place--2{--h:130px;--n:64px}
  .vz-place--3{--h:102px;--n:52px}
  .vz-who{margin-bottom:12px;padding:0}
  .vz-place--1 .vz-name-main{font-size:clamp(15px,4.9vw,20px)}
  .vz-place--2 .vz-name-main,.vz-place--3 .vz-name-main{font-size:clamp(14px,4.3vw,17px)}
  .vz-sfx{font-size:10px;letter-spacing:.14em;margin-top:6px}
  .vz-crown{width:36px;height:36px;margin-bottom:10px;box-shadow:0 0 0 5px rgba(201,166,132,.12),0 12px 26px -10px rgba(201,166,132,.6)}
  .vz-crown svg{width:18px;height:18px}
  .vz-halo{width:min(46vw,190px)}
  .vz-place--2 .vz-block,.vz-place--4 .vz-block{border-top-left-radius:30px}
  .vz-place--3 .vz-block,.vz-place--5 .vz-block{border-top-right-radius:30px}
  .vz-place--1 .vz-block{border-radius:40px 40px 0 0}
  .vz-place--4,.vz-place--5{padding:10px 12px;gap:10px;border-radius:16px}
  .vz-place--4 .vz-block,.vz-place--5 .vz-block{width:42px;height:42px}
  .vz-place--4 .vz-block-n,.vz-place--5 .vz-block-n{font-size:20px}
  .vz-place--4 .vz-name-main,.vz-place--5 .vz-name-main{font-size:17px}
  .vz-note{margin-top:40px;text-align:left}
}

/* celulares estreitos: 4º e 5º em largura total, um embaixo do outro, para os nomes caberem numa linha */
@media(max-width:460px){
  .vz-rank{grid-template-areas:"p2 p2 p1 p1 p3 p3" "p4 p4 p4 p4 p4 p4" "p5 p5 p5 p5 p5 p5";row-gap:10px}
  .vz-place--4{margin-top:20px}
}

@media(prefers-reduced-motion:reduce){
  .vz *,.vz *::before,.vz *::after,.vz-place--1::before,.vz-place--1::after{transition:none!important;animation:none!important}
}