/* ================================================================
   LIBERDADE PRIVATE CLUB — v6 "MATCHDAY / FUT ENGINE"
   Protocolo EA SPORTS FC: camadas de IMAGEM real (estádio/torcida/
   gramado) com overlay navy pesado, cards estilo Ultimate Team
   (borda metálica dourada + raios de energia + jogador recortado),
   logo gigante marca-d'água fixa. Sobrepõe tudo — carregar por último.
   ================================================================ */

/* ============================================================
   1) LOGO GIGANTE — marca-d'água fixa (elemento injetado por JS)
   ============================================================ */
#page-watermark{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("../assets/img/logo-branco.png") center 46%/min(80vw,940px) no-repeat;
  opacity:.05;filter:grayscale(1) brightness(1.6);
}
#page-vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 38%,transparent 52%,rgba(4,7,16,.8));
}

/* ============================================================
   2) SEÇÕES CINEMATOGRÁFICAS — foto real + overlay navy pesado
   ============================================================ */
.section,.btcsec,.capitaes,.portas,.final,.diretoria{position:relative;overflow:hidden;}

/* helper visual: toda seção com imagem recebe leve grão de estádio por cima */
[data-bg]{background-size:cover;background-position:center;background-repeat:no-repeat;}
@media (min-width:901px){ [data-bg]{background-attachment:fixed;} }

.historia{
  background:linear-gradient(rgba(8,13,32,.9),rgba(10,17,40,.95)),
    url("../assets/img/bg-campo-sunset.jpg") center/cover;
}
.capitaes{
  background:linear-gradient(rgba(7,11,20,.9),rgba(7,11,20,.96)),
    url("../assets/img/peneira-tresrios-03.jpg") center/cover;
}
#maquina{
  background:linear-gradient(rgba(10,17,40,.93),rgba(8,13,32,.97)),
    url("../assets/img/peneira-tresrios-01.jpg") center/cover;
}
.diretoria{
  background:linear-gradient(rgba(10,17,40,.9),rgba(8,13,32,.96)),
    url("../assets/img/bg-campo.jpg") center/cover;
}
.numeros{
  background:linear-gradient(rgba(8,13,32,.92),rgba(10,17,40,.96)),
    url("../assets/img/peneira-tresrios-04.jpg") center/cover;
}
.btcsec{
  background:linear-gradient(rgba(7,11,20,.9),rgba(10,17,40,.95)),
    url("../assets/img/peneira-tresrios-05.jpg") center/cover;
}
.vozes{
  background:linear-gradient(rgba(10,17,40,.93),rgba(8,13,32,.97)),
    url("../assets/img/foto-acao-1.jpg") center/cover;
}
.eco{
  background:linear-gradient(rgba(8,13,32,.92),rgba(10,17,40,.97)),
    url("../assets/img/bg-campo-sunset.jpg") center/cover;
}
.portas{
  background:linear-gradient(rgba(7,11,20,.9),rgba(7,11,20,.96)),
    url("../assets/img/peneira-tresrios-02.jpg") center/cover;
}
.midia{
  background:linear-gradient(rgba(10,17,40,.94),rgba(8,13,32,.97)),
    url("../assets/img/bg-campo.jpg") center/cover;
}
.final{
  background:linear-gradient(rgba(8,13,32,.86),rgba(10,17,40,.92)),
    url("../assets/img/jogadores-abraco.jpg") center/cover;
}
/* trilhas */
.inv-hero,.atl-hero{background-blend-mode:normal;}
.inv-hero{background:linear-gradient(rgba(8,13,32,.86),rgba(10,17,40,.94)),
    url("../assets/img/bg-campo-sunset.jpg") center/cover;}
.atl-hero{background:linear-gradient(rgba(7,11,20,.82),rgba(10,17,40,.92)),
    url("../assets/img/peneira-tresrios-02.jpg") center/cover;}
.jornada{background:linear-gradient(rgba(10,17,40,.93),rgba(8,13,32,.97)),
    url("../assets/img/peneira-tresrios-01.jpg") center/cover;}
.atl-prova{background:linear-gradient(rgba(8,13,32,.9),rgba(10,17,40,.96)),
    url("../assets/img/foto-acao-3.jpg") center/cover;}
.sim{background:linear-gradient(rgba(7,11,20,.93),rgba(10,17,40,.97)),
    url("../assets/img/bg-campo.jpg") center/cover;}
.cap-sec{background:linear-gradient(rgba(10,17,40,.93),rgba(8,13,32,.97)),
    url("../assets/img/peneira-tresrios-04.jpg") center/cover;}

/* ============================================================
   3) WORDMARKS MONUMENTAIS (mantidos, parallax via motion2.js)
   ============================================================ */
.wm{position:absolute;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:900;font-stretch:125%;letter-spacing:-.04em;
  line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(231,201,138,.10);
  font-size:clamp(140px,26vw,460px);top:50%;left:50%;transform:translate(-50%,-50%);will-change:transform;}
.wm.fill{-webkit-text-stroke:0;color:rgba(231,201,138,.04);mix-blend-mode:overlay;}
.wm.edge{top:auto;bottom:-8%;left:-3%;transform:none;text-align:left;}
.wm.right{left:auto;right:-3%;transform:none;text-align:right;top:50%;transform:translateY(-50%);}
.section > .wrap,.btcsec > .wrap,.final > .wrap,.subhero > .wrap{position:relative;z-index:3;}

/* ============================================================
   4) CARDS ESTILO ULTIMATE TEAM (FUT)
   ============================================================ */
/* borda metálica dourada/laranja (mistura de carta rara) via dupla camada */
.cap-card,.dir-card{
  border:0 !important;
  background:
    linear-gradient(160deg,var(--navy-3),var(--navy-2)) padding-box,
    linear-gradient(135deg,#f4dd9e 0%,#e7c98a 22%,#ff7a1a 48%,#7a5a1f 62%,#e7c98a 82%,#f4dd9e 100%) border-box !important;
  border:1.5px solid transparent !important;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9),0 0 40px -18px rgba(231,201,138,.35);
}
.cap-card:hover,.dir-card:hover{
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95),0 0 60px -14px rgba(255,122,26,.5);
}

/* raios de energia atrás do jogador recortado (imagem real, no elemento) */
.cap-photo{
  background:
    radial-gradient(60% 45% at 50% 26%,rgba(255,122,26,.30),transparent 70%),
    url("../assets/img/fut-rays.png") center 20%/125% no-repeat;
}
.cap-card:hover .cap-photo{filter:brightness(1.12);}
.cap-photo img{position:relative;z-index:2;} /* jogador SOBRE os raios */

/* painel FUT: divisória dourada + selo do elemento */
.cap-info{border-top:1px solid transparent;
  background:
    linear-gradient(180deg,transparent,rgba(4,7,16,.62) 28%,rgba(4,7,16,.94)) padding-box;
  box-shadow:inset 0 1px 0 rgba(231,201,138,.35);}
.cap-info h3{text-shadow:0 2px 16px rgba(0,0,0,.6);}
.cap-tag{background:linear-gradient(180deg,#f4dd9e,#e7c98a);color:#20160a !important;
  border:0 !important;box-shadow:0 4px 14px -4px rgba(231,201,138,.6);font-weight:700;}
.cap-tag::before{content:"★";}

/* diretoria como carta de técnico/lenda */
.dir-photo{
  background:
    radial-gradient(70% 55% at 45% 40%,rgba(255,122,26,.22),transparent 72%),
    url("../assets/img/fut-rays.png") center/cover no-repeat;
}
.dir-photo img{position:relative;z-index:2;}
.dir-role{color:var(--gold);}

/* ============================================================
   5) CONTORNOS DOURADOS METÁLICOS — elementos de autoridade
   ============================================================ */
.embaixador,.tese-card,.sim-box,.ct-stage,.math-row .res{
  background-clip:padding-box;
  border:1.5px solid transparent;
  background-image:
    linear-gradient(165deg,var(--navy-3),var(--navy-2)),
    linear-gradient(135deg,#f4dd9e,#e7c98a 30%,#c99a3a 55%,#e7c98a 80%,#f4dd9e);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:0 30px 80px -46px rgba(0,0,0,.9),0 0 40px -20px rgba(231,201,138,.4);
}
.btn-gold{border-width:1.5px;
  background-image:linear-gradient(var(--navy-2),var(--navy-2)),linear-gradient(135deg,#f4dd9e,#c99a3a,#f4dd9e);
  background-origin:border-box;background-clip:padding-box,border-box;}
.btn-gold:hover{background-image:linear-gradient(180deg,#f4dd9e,#e7c98a);}

/* ============================================================
   6) STAT-TILES (mantidos, agora sobre foto — reforço de leitura)
   ============================================================ */
.num-grid{counter-reset:stat;}
.num{counter-increment:stat;position:relative;padding:38px 32px 34px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(10,17,40,.72);
  backdrop-filter:blur(6px);border:1px solid var(--glass-brd);}
.num::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);box-shadow:0 0 12px var(--orange-glow);}
.num::after{content:"◤";position:absolute;top:12px;right:14px;font-size:11px;color:rgba(231,201,138,.6);}
.num > b{position:relative;z-index:2;}
.num > b::after{content:"";display:block;height:3px;width:38px;margin-top:16px;border-radius:3px;
  background:linear-gradient(90deg,var(--orange),var(--gold));box-shadow:0 0 12px var(--orange-glow);}
.num span{position:relative;z-index:2;}
.hero-meta{counter-reset:sumula;}
.hero-meta .m::before{content:"— " counter(sumula,decimal-leading-zero);counter-increment:sumula;}
.hero-meta .m b::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:26px;border-radius:2px;
  background:var(--orange);box-shadow:0 0 10px var(--orange-glow);opacity:.85;}
.hero-meta .m b{position:relative;}

/* legibilidade extra sobre fotos: cards de vidro ganham fundo mais opaco */
.step,.eco-card,.voz,.gov-card,.md-card,.j-step,.porta,.sim-cell,.ct-pay{
  background-color:rgba(10,17,40,.6);
}

/* ============================================================
   7) ÍCONES DESENHADOS (sem emoji)
   ============================================================ */
.eco-ic,.j-ic{width:26px;height:26px;display:block;}
.eco-ic path,.eco-ic circle,.eco-ic rect,.eco-ic line,.eco-ic polyline{
  fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.j-ic path,.j-ic circle,.j-ic rect,.j-ic line,.j-ic polyline{
  fill:none;stroke:#1a0e02;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.eco-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:22px;
  background:linear-gradient(180deg,rgba(255,122,26,.16),rgba(255,122,26,.04));
  border:1px solid rgba(231,201,138,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}

/* ============================================================
   8) REVELAÇÕES CINEMÁTICAS
   ============================================================ */
.rc-clip{clip-path:inset(0 100% 0 0);}
.rc-clip.rc-in{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--out-expo);}
.rc-up{opacity:0;transform:translateY(60px);}
.rc-up.rc-in{opacity:1;transform:none;transition:opacity 1s var(--out-expo),transform 1s var(--out-expo);}
.num b,.hero-meta .m b,.tese-card b,.sim-mult,.sim-cell b,.ct-pay b{
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .wm{font-size:clamp(90px,30vw,180px);}
  body::before{background-size:120vw;}
}
@media (prefers-reduced-motion:reduce){
  .cap-photo::before,.dir-photo::before{animation:none;}
  .rc-clip{clip-path:none;}.rc-up{opacity:1;transform:none;}
  [data-bg],.historia,.capitaes,.numeros{background-attachment:scroll;}
}

/* ================================================================
   v8 — MOTOR HOLOGRÁFICO + GLASS PREMIUM + TIPOGRAFIA MONUMENTAL
   ================================================================ */

/* --- camadas de efeito holográfico (injetadas por main.js) --- */
.fx-glare{
  position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  mix-blend-mode:soft-light;will-change:background;
}
.fx-sheen{
  position:absolute;inset:-40% -25%;z-index:6;pointer-events:none;opacity:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 40%,rgba(255,222,150,.55) 47%,
    rgba(255,255,255,.75) 50%,rgba(255,170,70,.45) 53%,transparent 60%);
  mix-blend-mode:screen;will-change:transform,opacity;
}

/* --- GLASSMORPHISM PREMIUM (fim das caixas azuis chapadas) --- */
.step,.eco-card,.voz,.gov-card,.md-card,.j-step,.porta,.tese-card,.num,.sim-cell,.ct-pay{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),
    rgba(10,17,40,.30) !important;
  -webkit-backdrop-filter:blur(24px) saturate(135%);backdrop-filter:blur(24px) saturate(135%);
  border:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09) !important;
  overflow:hidden;
}
.step:hover,.eco-card:hover,.voz:hover,.gov-card:hover,.md-card:hover,.j-step:hover,
.porta:hover,.tese-card:hover,.num:hover,.sim-cell:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:0 44px 90px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* porta investidor: vidro com aura dourada */
.porta.p-inv{border-top-color:rgba(231,201,138,.4) !important;}

/* --- TIPOGRAFIA MONUMENTAL --- */
.num b{
  font-size:clamp(4rem,8vw,7rem) !important;font-weight:900 !important;
  color:var(--white) !important;letter-spacing:-.045em;line-height:.86;
  text-shadow:0 6px 30px rgba(0,0,0,.5);
}
.num b::after{width:52px;height:4px;background:linear-gradient(90deg,var(--orange),var(--gold));}
.num span{font-size:12px;letter-spacing:.2em;color:var(--off);opacity:.75;margin-top:22px;}
.num::after{font-size:14px;color:var(--orange);}

.hero-meta .m b{font-size:clamp(2.6rem,5vw,4.4rem) !important;font-weight:900;letter-spacing:-.04em;}

/* títulos +40% */
.h2{font-size:clamp(50px,7.3vw,100px) !important;letter-spacing:-.035em;line-height:.96;}
.subhero h1{font-size:clamp(52px,8.4vw,120px) !important;}
.hero h1{font-size:clamp(52px,9vw,140px) !important;}

/* stat gigante do simulador e cap table */
.sim-mult{font-size:clamp(3rem,6vw,5.4rem) !important;font-weight:900;}
.tese-card b{font-size:clamp(2.4rem,4vw,3.4rem) !important;font-weight:900;}
.ct-pay b{font-size:clamp(1.5rem,2.4vw,2rem) !important;}

@media (max-width:560px){
  .num b{font-size:clamp(3.2rem,15vw,4.6rem) !important;}
  .h2{font-size:clamp(40px,11vw,58px) !important;}
}

/* ================================================================
   v9 — LUZ ACESA + GLASS CONTRASTE + WATERMARK INTERNO + FIX OVERFLOW
   + SEÇÃO ESTÁDIO. Bloco final: sobrepõe conflitos anteriores.
   ================================================================ */

/* --- 4) ACENDER O FUNDO: overlays no máximo ~.5 (estádio visível) --- */
.historia{background:linear-gradient(rgba(8,13,32,.5),rgba(10,17,40,.62)),url("../assets/img/bg-campo-sunset.jpg") center/cover !important;}
.capitaes{background:linear-gradient(rgba(7,11,20,.52),rgba(7,11,20,.66)),url("../assets/img/peneira-tresrios-03.jpg") center/cover !important;}
#maquina{background:linear-gradient(rgba(10,17,40,.5),rgba(8,13,32,.64)),url("../assets/img/peneira-tresrios-01.jpg") center/cover !important;}
.diretoria{background:linear-gradient(rgba(10,17,40,.48),rgba(8,13,32,.62)),url("../assets/img/bg-campo.jpg") center/cover !important;}
.numeros{background:linear-gradient(rgba(8,13,32,.5),rgba(10,17,40,.62)),url("../assets/img/peneira-tresrios-04.jpg") center/cover !important;}
.btcsec{background:linear-gradient(rgba(7,11,20,.5),rgba(10,17,40,.64)),url("../assets/img/peneira-tresrios-05.jpg") center/cover !important;}
.vozes{background:linear-gradient(rgba(10,17,40,.5),rgba(8,13,32,.64)),url("../assets/img/foto-acao-1.jpg") center/cover !important;}
.eco{background:linear-gradient(rgba(8,13,32,.5),rgba(10,17,40,.64)),url("../assets/img/bg-campo-sunset.jpg") center/cover !important;}
.portas{background:linear-gradient(rgba(7,11,20,.5),rgba(7,11,20,.64)),url("../assets/img/peneira-tresrios-02.jpg") center/cover !important;}
.midia{background:linear-gradient(rgba(10,17,40,.5),rgba(8,13,32,.64)),url("../assets/img/bg-campo.jpg") center/cover !important;}
.final{background:linear-gradient(rgba(8,13,32,.46),rgba(10,17,40,.6)),url("../assets/img/jogadores-abraco.jpg") center/cover !important;}
.inv-hero{background:linear-gradient(rgba(8,13,32,.46),rgba(10,17,40,.62)),url("../assets/img/bg-campo-sunset.jpg") center/cover !important;}
.atl-hero{background:linear-gradient(rgba(7,11,20,.44),rgba(10,17,40,.6)),url("../assets/img/peneira-tresrios-02.jpg") center/cover !important;}
.jornada{background:linear-gradient(rgba(10,17,40,.5),rgba(8,13,32,.64)),url("../assets/img/peneira-tresrios-01.jpg") center/cover !important;}
.atl-prova{background:linear-gradient(rgba(8,13,32,.5),rgba(10,17,40,.62)),url("../assets/img/foto-acao-3.jpg") center/cover !important;}
.sim{background:linear-gradient(rgba(7,11,20,.52),rgba(10,17,40,.64)),url("../assets/img/bg-campo.jpg") center/cover !important;}
.cap-sec{background:linear-gradient(rgba(10,17,40,.5),rgba(8,13,32,.64)),url("../assets/img/peneira-tresrios-04.jpg") center/cover !important;}

/* vinheta um pouco mais forte p/ compensar a luz e manter leitura nas bordas */
#page-vignette{background:radial-gradient(135% 105% at 50% 35%,transparent 46%,rgba(4,7,16,.82)) !important;}

/* legibilidade do texto solto sobre foto acesa */
.h2,.tl-item h3,.subhero h1,.hero h1{text-shadow:0 3px 26px rgba(4,7,16,.7),0 1px 3px rgba(4,7,16,.6);}
.lead,.kicker,.maquina-quote,.tl-item blockquote,.tl-item p{text-shadow:0 2px 14px rgba(4,7,16,.7);}

/* --- 3) GLASS DE CONTRASTE + brilho interno + marca-d'água da etapa --- */
.step,.eco-card,.voz,.gov-card,.md-card,.j-step,.porta,.tese-card,.num,.sim-cell,.ct-pay{
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(255,255,255,.10),transparent 55%),
    rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 64px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14) !important;
  position:relative;overflow:hidden;
}
/* marca-d'água interna: número gigante da etapa no fundo do card */
.maquina-grid{counter-reset:mstep;}
.maquina-grid .step{counter-increment:mstep;}
.maquina-grid .step::before{
  content:counter(mstep,decimal-leading-zero) !important;
  position:absolute !important;right:-6px;bottom:-42px;margin:0 !important;
  font-family:var(--f-display);font-weight:900;font-stretch:120%;
  font-size:200px;line-height:1;letter-spacing:-.06em;
  color:rgba(255,255,255,.05) !important;z-index:0;pointer-events:none;
  -webkit-text-stroke:0;
}
.maquina-grid .step > *{position:relative;z-index:1;}

/* --- 5) FIX OVERFLOW: números gigantes que CABEM --- */
.num-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;gap:18px;}
.num{padding:34px 30px 30px !important;min-width:0;overflow:hidden;}
.num > b{
  font-size:clamp(3rem,4.6vw,4.2rem) !important;font-weight:900 !important;color:#fff !important;
  line-height:.9;letter-spacing:-.035em;white-space:nowrap;display:block;
  max-width:100%;
  font-variant-numeric:tabular-nums;
}
.num > b::after{width:56px;height:4px;margin-top:14px;
  background:linear-gradient(90deg,var(--orange),var(--gold)) !important;}
.num span{font-size:12px;letter-spacing:.18em;margin-top:20px;color:var(--off);opacity:.8;}
.hero-meta{flex-wrap:wrap;}
.hero-meta .m{min-width:0;}
.hero-meta .m b{font-size:clamp(2.2rem,3.6vw,3.4rem) !important;white-space:nowrap;letter-spacing:-.03em;}

/* glare da VanillaTilt (motor 3D real) */
.js-tilt-glare{border-radius:inherit;overflow:hidden;}
.js-tilt-glare-inner{background-image:radial-gradient(circle at 50% 50%,rgba(255,240,210,.55),rgba(255,170,80,.15) 40%,transparent 60%) !important;}

/* --- 1) SEÇÃO A CASA DA LIBERDADE (ESTÁDIO) --- */
.estadio{
  position:relative;overflow:hidden;min-height:92svh;display:flex;align-items:flex-end;
  padding:0 0 clamp(80px,10vw,140px);
  background:linear-gradient(rgba(6,10,24,.35),rgba(8,13,32,.72)),
    url("../assets/img/bg-campo-sunset.jpg") center/cover !important;
}
@media (min-width:901px){.estadio{background-attachment:fixed !important;}}
.estadio .wrap{position:relative;z-index:3;width:100%;}
.estadio .eyebrow{color:var(--gold);}
.estadio h2{max-width:18ch;}
.estadio .est-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.estadio .est-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:100px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.24);
  font-family:var(--f-body);font-weight:600;font-size:13.5px;color:var(--off);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.estadio .est-chip b{color:var(--gold);font-weight:800;}
.estadio .wm{color:transparent;-webkit-text-stroke:1.5px rgba(231,201,138,.12);}

/* marca-d'água interna do card (elemento real, injetado por motion2.js) */
.step-wm{
  position:absolute;right:-4px;bottom:-46px;z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:900;font-stretch:120%;
  font-size:210px;line-height:1;letter-spacing:-.06em;
  color:rgba(255,255,255,.05);
}
.maquina-grid .step{position:relative;z-index:0;}
.maquina-grid .step h4,.maquina-grid .step p{position:relative;z-index:1;}
.maquina-grid .step::before{content:none !important;}

/* --- fotos reais injetadas nos cards de pessoas (v11) --- */
.voz-avatar.voz-photo{padding:0;overflow:hidden;background:none;border:1px solid rgba(231,201,138,.35);}
.voz-avatar.voz-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;}

.emb-photo{
  width:clamp(150px,20vw,230px);aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  position:relative;flex:none;
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--navy-2),var(--navy-2)) padding-box,
    linear-gradient(135deg,#f4dd9e,#e7c98a 30%,#c99a3a 55%,#e7c98a 80%,#f4dd9e) border-box;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.85),0 0 40px -16px rgba(231,201,138,.4);
}
.emb-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:saturate(1.02) contrast(1.03);}
@media (max-width:900px){.emb-photo{width:min(220px,60vw);margin-top:8px;}}

/* ================================================================
   v10 — VERSÃO MOBILE (só telas pequenas; desktop intacto)
   ================================================================ */
@media (max-width:768px){
  /* respiro: seções deixam de ser gigantes */
  .section, .estadio, .btcsec, .capitaes, .portas, .final{ padding-block:clamp(56px,11vw,80px) !important; }
  .wrap{ padding-inline:20px; }

  /* tipografia proporcional ao celular */
  .hero h1{ font-size:clamp(38px,11vw,50px) !important; line-height:1.02; }
  .subhero h1{ font-size:clamp(34px,10vw,46px) !important; }
  .h2{ font-size:clamp(28px,8.5vw,40px) !important; }
  .lead{ font-size:15px !important; }
  .hero-sub{ font-size:15px !important; }

  /* números monumentais: grandes mas cabendo */
  .num> b, .num b{ font-size:clamp(2.4rem,15vw,3.4rem) !important; }
  .hero-meta .m b{ font-size:clamp(1.9rem,9vw,2.6rem) !important; }
  .sim-mult{ font-size:clamp(2.2rem,12vw,3rem) !important; }

  /* cards mais compactos */
  .step, .eco-card, .voz, .porta, .gov-card, .md-card, .num, .tese-card, .dir-info, .sim-box, .ct-stage{
    padding:26px 22px !important;
  }
  .maquina-grid, .num-grid, .cap-grid, .eco-grid, .portas-grid, .vozes-grid, .dir-grid, .tese-grid{
    gap:14px !important; margin-top:36px !important;
  }

  /* CAPITÃES: cromos menores (era 440px de altura) */
  .cap-card{ min-height:0 !important; }
  .cap-photo{ position:relative !important; height:auto !important; }
  .cap-photo img{ position:relative !important; width:100% !important; height:300px !important; object-position:top center; }
  .cap-info{ position:relative !important; inset:auto !important; transform:none !important; }
  .cap-info::before{ font-size:44px; top:-30px; }

  /* diretoria empilha */
  .dir-card{ grid-template-columns:1fr !important; min-height:0 !important; }
  .dir-photo{ height:300px !important; }

  /* estádio menos alto */
  .estadio{ min-height:0 !important; padding-top:90px !important; }
  .est-chip{ padding:11px 16px !important; font-size:12px !important; }

  /* embaixador empilha, foto some do lado */
  .embaixador{ grid-template-columns:1fr !important; padding:30px !important; }
  .emb-photo{ width:min(200px,55vw) !important; margin-top:6px; }

  /* watermarks monumentais menores pra não estourar */
  .wm{ font-size:clamp(80px,26vw,150px) !important; }
  .step-wm{ font-size:130px !important; }
  .final .n21{ font-size:clamp(110px,40vw,200px) !important; }

  /* nav compacta */
  .nav-logo img{ height:30px; }

  /* timeline mais justa */
  .tl-item{ padding-left:54px !important; padding-bottom:44px !important; }

  /* botões full-width no hero pra dedão */
  .hero-ctas{ gap:12px; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
}

@media (max-width:420px){
  .h2{ font-size:clamp(26px,9vw,32px) !important; }
  .num> b, .num b{ font-size:clamp(2.2rem,17vw,2.9rem) !important; }
  .cap-photo img{ height:260px !important; }
  .step, .eco-card, .voz, .porta{ padding:22px 18px !important; }
}