/* =====================================================================
   Jornais de Sociologia — camada v11 (20/10/2026)
   Título em caixa alta, faixa "Nesta edição" viva, hovers suaves e
   vetores de linha nas laterais do topo. Carrega depois de sociologia-v10.css.
   Remova este arquivo (e o bloco .hero-vetores do corpo) para voltar ao v10.
   ===================================================================== */
body[data-materia="soc"]{ --suave:cubic-bezier(.22,1,.36,1); }

/* ================= TÍTULO: só "JORNAIS DE SOCIOLOGIA" em caixa alta, em outra fonte ================= */
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
body[data-materia="soc"] .hero h1{max-width:19ch;text-wrap:balance}
/* o destaque pode quebrar em 2 linhas: a marca dourada acompanha cada linha */
body[data-materia="soc"] .hero h1 .hl{display:inline;padding:0 .06em;
  font-family:'Fraunces',Georgia,serif;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.01em;font-size:1.04em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;
  background:linear-gradient(rgba(201,162,78,.38),rgba(201,162,78,.38)) 0 88%/0% .2em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;animation:marcaLinha .9s 1.1s var(--suave) forwards}
body[data-materia="soc"] .hero h1 .hl::after{content:none}
@keyframes marcaLinha{to{background-size:100% .2em}}

/* ================= FAIXA "NESTA EDIÇÃO" VIVA ================= */
body[data-materia="soc"] .periodic-strip{height:48px;border-bottom:0;
  background:linear-gradient(100deg,#2A1418 0%,var(--bordo-esc) 30%,var(--bordo) 50%,var(--bordo-esc) 70%,#2A1418 100%);
  background-size:260% 100%;animation:faixaCor 14s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(233,211,160,.25),inset 0 -2px 0 var(--ouro),0 10px 24px -12px rgba(94,31,41,.55)}
/* brilho que atravessa a faixa */
body[data-materia="soc"] .periodic-strip::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,240,205,.16) 45%,rgba(255,240,205,.28) 50%,rgba(255,240,205,.16) 55%,transparent);
  transform:translateX(-120%);animation:faixaBrilho 6.5s var(--suave) infinite}
body[data-materia="soc"] .ps-rot{position:relative;z-index:4;background:var(--ouro);color:#2A1418;padding:0 18px 0 16px;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
body[data-materia="soc"] .ps-rot::before{background:#2A1418}
/* esteira: o sociologia.css trava "transform:none!important" na faixa, então ela anda pela propriedade "translate" */
body[data-materia="soc"] .periodic-strip .ps-track.giz{animation:esteira 45s linear infinite!important;will-change:translate}
@keyframes esteira{from{translate:0 0}to{translate:-50% 0}}
body[data-materia="soc"] .ps-track.giz .gz{font:800 14.5px var(--serif);letter-spacing:.04em;text-transform:uppercase;color:#F6EBD4;
  animation:gzRespira 5s ease-in-out infinite;animation-delay:calc(var(--n,0) * -.42s)}
body[data-materia="soc"] .ps-track.giz .gz-la{color:var(--ouro-claro);font-style:italic}
body[data-materia="soc"] .ps-track.giz .gz:nth-child(3n){color:rgba(246,235,212,.72)}
body[data-materia="soc"] .ps-track.giz .gz::after{width:5px;height:5px;background:var(--ouro);box-shadow:0 0 8px rgba(201,162,78,.9)}
body[data-materia="soc"] .periodic-strip:hover .ps-track{animation-play-state:paused!important}
/* nomes da faixa retos (sem a inclinação de giz) */
body[data-materia="soc"] .ps-track.giz .gz{transform:none!important}
@keyframes faixaCor{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes faixaBrilho{0%{transform:translateX(-120%)}55%,100%{transform:translateX(560%)}}
@keyframes gzRespira{0%,100%{opacity:.82}50%{opacity:1}}

/* ================= HOVERS MAIS SUAVES ================= */
body[data-materia="soc"] .btn{transition:transform .6s var(--suave),box-shadow .6s var(--suave),filter .6s var(--suave),background-color .6s var(--suave)!important}
body[data-materia="soc"] .btn:hover{transform:translateY(-2px)}
body[data-materia="soc"] .btn:active{transform:translateY(0);transition-duration:.2s!important}
/* o degradê do botão não troca de uma vez: só clareia */
body[data-materia="soc"] .btn-cherry:hover{background:linear-gradient(180deg,#8A3140,var(--bordo-esc))!important;filter:brightness(1.07) saturate(1.05)}
body[data-materia="soc"] .btn:hover .b-ico{transform:translateX(2px)}
body[data-materia="soc"] .b-ico{transition:transform .7s var(--suave)}
.ap-card{transition:transform .8s var(--suave),box-shadow .8s var(--suave),outline-color .8s var(--suave)!important}
.ap-card:hover{transform:translateY(-3px)}
body[data-materia="soc"] .bonus-card,body[data-materia="soc"] .sec-bonus .bonus-card{transition:transform .8s var(--suave),box-shadow .8s var(--suave)!important}
body[data-materia="soc"] .bonus-card:hover,body[data-materia="soc"] .sec-bonus .bonus-card:hover{transform:translateY(-3px)}
/* chips: em vez de inverter para preto, ganham tom de papel e bordô */
.colecoes-chips span{transition:background-color .6s var(--suave),color .6s var(--suave),box-shadow .6s var(--suave)!important}
.colecoes-chips span:hover{background:var(--marfim);color:var(--bordo);box-shadow:0 0 0 1px rgba(122,41,53,.28)}
.final-jornais img{transition:transform 1.1s var(--suave)!important}
.final-jornais:hover img:nth-child(1){transform:rotate(-9deg) translateX(-10px)}
.final-jornais:hover img:nth-child(3){transform:rotate(9deg) translateX(10px)}
.vp-ico,.vsl-cena .vp-ico{transition:transform .7s var(--suave)!important}
.vsl-play:hover .vp-ico,.vsl-cena .vsl-play:hover .vp-ico{transform:scale(1.04)}
.tilt{transition:transform .7s var(--suave)!important}
.tilt .glare{transition:opacity .6s var(--suave)}
.tilt:hover .glare{opacity:.55}

/* ================= VETORES NAS LATERAIS DO TOPO ================= */
body[data-materia="soc"] .hero{position:relative;background:
  radial-gradient(ellipse 60% 38% at 50% 16%,#FFFDF8 0%,rgba(255,253,248,0) 70%),
  radial-gradient(circle at 0% 30%,rgba(201,162,78,.10) 0%,transparent 34%),
  radial-gradient(circle at 100% 46%,rgba(122,41,53,.08) 0%,transparent 36%),
  repeating-linear-gradient(90deg,transparent 0 119px,rgba(38,35,31,.035) 119px 120px),
  var(--papel)!important}
.hero-vetores{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hv{position:absolute;color:var(--bordo);opacity:.5;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hv .hv-ouro{color:var(--ocre);stroke:var(--ocre)}
.hv .hv-cheio{fill:currentColor;stroke:none}
.hv path,.hv circle,.hv rect,.hv ellipse,.hv line,.hv polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:hvDesenha 2.4s var(--suave) forwards;animation-delay:calc(.6s + var(--d,0) * .15s)}
.hv .hv-cheio{stroke-dasharray:none;animation:hvAparece 1.2s var(--suave) both;animation-delay:calc(1.4s + var(--d,0) * .15s)}
.hv-g{animation:hvFlutua 9s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
.hv-g.b{animation-duration:11s;animation-delay:-3s}.hv-g.c{animation-duration:13s;animation-delay:-6s}
@keyframes hvDesenha{to{stroke-dashoffset:0}}
@keyframes hvAparece{from{opacity:0}to{opacity:1}}
@keyframes hvFlutua{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.hv-esq{left:-26px;top:150px;width:250px;height:760px}
.hv-dir{right:-26px;top:210px;width:250px;height:760px}
@media (max-width:1100px){.hv-esq,.hv-dir{width:190px;height:580px}.hv{opacity:.4}}
@media (max-width:820px){.hv-esq{left:-70px;top:110px}.hv-dir{right:-70px;top:150px}.hv{opacity:.22}}
@media (max-width:480px){.hv-esq,.hv-dir{width:140px;height:430px}.hv-esq{left:-62px}.hv-dir{right:-62px}.hv{opacity:.18}}

/* como a faixa do v10, estes movimentos são lentos e continuam mesmo com "reduzir movimento" ligado no sistema */
@media (prefers-reduced-motion:reduce){
  body[data-materia="soc"] .periodic-strip{animation:faixaCor 14s ease-in-out infinite!important}
  body[data-materia="soc"] .periodic-strip .ps-track.giz{animation:esteira 45s linear infinite!important}
  body[data-materia="soc"] .periodic-strip::after{animation:faixaBrilho 6.5s var(--suave) infinite!important}
  .hv-g{animation:hvFlutua 9s ease-in-out infinite!important}
  .hv path,.hv circle,.hv rect,.hv ellipse,.hv line,.hv polyline{animation:hvDesenha 2.4s var(--suave) forwards!important;animation-delay:calc(.6s + var(--d,0) * .15s)!important}
  .hv .hv-cheio{animation:hvAparece 1.2s var(--suave) both!important}
  body[data-materia="soc"] .hero h1 .hl{animation:marcaLinha .9s 1.1s var(--suave) forwards!important}
}