/* =====================================================================
   Jornais de Sociologia — camada v13 (20/10/2026)
   1) Botões de compra / ver planos mais chamativos, com reflexo de espelho passando.
   2) Vetores de linha nas laterais das seções ao longo da página (desenham ao aparecer na tela).
   Carrega depois de sociologia-v11.css. Remova este arquivo (e os blocos .sec-vetores) para voltar.
   As animações são lentas e continuam mesmo com "reduzir movimento" ligado, como o resto do topo.
   ===================================================================== */

/* ================= BOTÕES ================= */
body[data-materia="soc"] .btn{min-height:62px;font-weight:800;letter-spacing:.015em}
body[data-materia="soc"] .btn .b-txt{text-shadow:0 1px 0 rgba(0,0,0,.18)}

/* vermelho (comprar / ver planos): vinho vivo, aro dourado, brilho de vidro em cima e reflexo que passa */
body[data-materia="soc"] .btn-cherry{
  background:linear-gradient(180deg,#B23A4C 0%,#8E2A3A 48%,#6E1E2B 100%)!important;color:#FFF8EC;
  box-shadow:inset 0 0 0 1.5px rgba(233,211,160,.75),inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px rgba(122,41,53,.75),0 0 0 0 rgba(201,162,78,.45)!important;
  animation:ctaPulso 2.8s ease-in-out infinite!important}
/* vidro: metade de cima mais clara, como um espelho */
body[data-materia="soc"] .btn-cherry::before{content:""!important;position:absolute;left:3px;right:3px;top:3px;height:46%;z-index:0;pointer-events:none;border-radius:999px 999px 40% 40%/999px 999px 14px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.04));animation:none!important}
/* reflexo: faixa larga suave + filete fino brilhante, inclinados, atravessando o botão */
body[data-materia="soc"] .btn-cherry::after{content:""!important;position:absolute;top:-30%;bottom:-30%;left:0;width:46%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 0%,rgba(255,236,200,.10) 28%,rgba(255,246,226,.55) 47%,#FFF9EE 50%,rgba(255,246,226,.55) 53%,rgba(255,236,200,.10) 72%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);animation:espelho 3.6s cubic-bezier(.45,0,.2,1) infinite!important}
@keyframes espelho{0%,38%{transform:translateX(-160%) skewX(-18deg)}72%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes ctaPulso{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(233,211,160,.75),inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -8px rgba(122,41,53,.75),0 0 0 0 rgba(201,162,78,.45)}
  50%{box-shadow:inset 0 0 0 1.5px rgba(233,211,160,.95),inset 0 1px 0 rgba(255,255,255,.35),0 14px 34px -8px rgba(122,41,53,.85),0 0 0 9px rgba(201,162,78,0)}}
body[data-materia="soc"] .btn-cherry .b-ico{background:linear-gradient(180deg,#F3DFA8,var(--ouro))!important;color:#4A1820!important;box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.6)}
body[data-materia="soc"] .btn-cherry:hover{background:linear-gradient(180deg,#BF4256 0%,#982E3F 48%,#741F2D 100%)!important;filter:none}

/* branco (plano Básico): marfim com aro dourado e o mesmo reflexo, mais discreto */
body[data-materia="soc"] .btn-milk{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#FFFDF8,#F3EADA)!important;color:var(--tinta);
  box-shadow:inset 0 0 0 1.5px var(--ouro),0 8px 22px -10px rgba(38,35,31,.45)!important}
body[data-materia="soc"] .btn-milk::after{content:""!important;position:absolute;top:-30%;bottom:-30%;left:0;width:40%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.0) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 70%,transparent);
  transform:translateX(-160%) skewX(-18deg);animation:espelho 3.6s cubic-bezier(.45,0,.2,1) 1.2s infinite!important}
body[data-materia="soc"] .btn-milk .b-ico{background:var(--bordo)!important;color:#fff!important}

/* barra fixa de compra no celular */
body[data-materia="soc"] .barra-compra .btn{min-height:52px}

@media (prefers-reduced-motion:reduce){
  body[data-materia="soc"] .btn-cherry{animation:ctaPulso 2.8s ease-in-out infinite!important}
  body[data-materia="soc"] .btn-cherry::after{animation:espelho 3.6s cubic-bezier(.45,0,.2,1) infinite!important}
  body[data-materia="soc"] .btn-milk::after{animation:espelho 3.6s cubic-bezier(.45,0,.2,1) 1.2s infinite!important}
}

/* ================= VETORES AO LONGO DA PÁGINA (v14: mesmo estilo do topo, classes .hv do v11) ================= */
.tem-vetores{position:relative;overflow-x:clip}
.tem-vetores > :not(.sec-vetores){position:relative;z-index:1}
.sec-vetores{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sec-vetores .hv-esq{top:60px}
.sec-vetores .hv-dir{top:140px}
/* só desenham quando a seção entra na tela */
.sec-vetores:not(.in) .hv path,.sec-vetores:not(.in) .hv circle,.sec-vetores:not(.in) .hv rect,.sec-vetores:not(.in) .hv .hv-cheio{animation-play-state:paused!important}
/* seções escuras (bônus e final): traço creme e dourado */
.sec-tinta .hv,.sec-bonus .hv{color:#E9D3A0;opacity:.32}
.sec-tinta .hv .hv-ouro,.sec-bonus .hv .hv-ouro{color:#C9A24E;stroke:#C9A24E}

/* ================= v16: AMOSTRAS EM CARROSSEL (slides + atividades) — no topo da seção de bônus ================= */
.amostras{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;max-width:980px;margin:clamp(28px,4vw,44px) auto clamp(48px,6vw,72px)}
.am{margin:0}
.am-pilha{position:relative;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
/* as duas pilhas têm a mesma altura e as imagens ficam centradas: botões e legendas na mesma linha */
.am-pilha{height:clamp(300px,32vw,400px)}
.am-ativ .am-pilha{width:min(100%,330px);margin:0 auto}
.am-pilha img{position:absolute;display:block;object-fit:cover;-webkit-user-drag:none;box-shadow:0 18px 40px -14px rgba(0,0,0,.6),0 0 0 1px rgba(233,211,160,.18);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .5s ease;opacity:0;z-index:0}
.am-slides img{left:8%;top:50%;margin-top:-23.625%;width:84%;height:auto;aspect-ratio:16/9;border-radius:10px}
.am-ativ img{left:14%;top:50%;margin-top:-50.88%;width:72%;height:auto;aspect-ratio:600/848;border-radius:4px;background:#fff}
.am-pilha img[data-pos="0"]{opacity:1;z-index:3}
.am-pilha img[data-pos="1"],.am-pilha img[data-pos="2"]{opacity:1}
.am-pilha img[data-pos="1"]{z-index:2}.am-pilha img[data-pos="2"]{z-index:1}
.am-pilha img[data-pos="x"]{transform:scale(.82)}
.am-pilha img[data-pos="sai"]{opacity:0;z-index:4;transform:translateX(-70%) rotate(-12deg) scale(.96)}
.am-slides img[data-pos="0"]{transform:none}
.am-slides img[data-pos="1"]{transform:translate(9%,-2%) rotate(4deg) scale(.94)}
.am-slides img[data-pos="2"]{transform:translate(-9%,-6%) rotate(-5deg) scale(.9)}
.am-ativ img[data-pos="0"]{transform:none}
.am-ativ img[data-pos="1"]{transform:translateX(22%) rotate(8deg)}
.am-ativ img[data-pos="2"]{transform:translateX(-22%) rotate(-9deg)}
.am-ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px}
.am-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ouro);background:rgba(233,211,160,.08);color:var(--ouro-claro);cursor:pointer;
  transition:background-color .5s cubic-bezier(.22,1,.36,1),color .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.am-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.am-btn:hover{background:var(--ouro);color:#2A1418;transform:translateY(-1px)}
.am-btn:active{transform:scale(.94)}
.am-btn:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px}
.am-cont{min-width:52px;text-align:center;font:600 14px var(--sans);color:rgba(246,235,212,.7)}.am-cont b{color:#F6EBD4}
.am figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 10px;margin-top:14px;text-align:center}
.am figcaption b{font:700 20px var(--serif);color:#F6EBD4}
.am figcaption span:last-child{font:500 14px var(--sans);color:rgba(246,235,212,.7)}
.am-tag{flex-basis:100%;font:700 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
@media (max-width:720px){.amostras{grid-template-columns:1fr;gap:44px}.am-pilha{height:auto;aspect-ratio:16/11}.am-ativ .am-pilha{width:min(78%,300px);aspect-ratio:600/800}}

/* ================= v18: FEEDBACKS EM ESTEIRA (prints simples, seção enxuta) ================= */
.sec-feedbacks{overflow:hidden;padding-top:clamp(44px,6vw,72px)!important;padding-bottom:clamp(36px,5vw,56px)!important}
.sec-feedbacks .title{margin-bottom:0}
.fb-sub{max-width:520px;margin:8px auto 0;font:500 13.5px/1.5 var(--sans);color:var(--cinza)}
.fb-esteira{position:relative;margin-top:clamp(20px,3vw,30px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fb-trilho{display:flex;align-items:flex-start;width:max-content;animation:fbDesliza 100s linear infinite}
.fb-copia{display:flex;align-items:flex-start}
.fb-esteira:hover .fb-trilho{animation-play-state:paused}
@keyframes fbDesliza{from{translate:0 0}to{translate:-50% 0}}
.fb-card{flex:none;width:clamp(180px,17vw,220px);margin:0 8px}
/* todos os prints com o mesmo tamanho: mesma proporção, cortando só o excesso de baixo */
.fb-card img{display:block;width:100%;height:auto;aspect-ratio:440/740;object-fit:cover;object-position:50% 0;border-radius:10px;box-shadow:0 8px 22px -12px rgba(38,35,31,.45)}
@media (max-width:640px){.fb-card{width:170px;margin:0 6px}.fb-trilho{animation-duration:80s}}
@media (prefers-reduced-motion:reduce){.fb-trilho{animation:fbDesliza 100s linear infinite!important}}