/* =====================================================================
   Jornais de Sociologia — camada v19 (20/10/2026)
   Botões de compra / ver planos mais bonitos: sem a "bolha de vidro" do v13,
   vinho em degradê suave com luz no topo, aro dourado fino, borda de baixo que dá relevo,
   selo dourado com a seta e reflexo de espelho mais fino e elegante.
   Carrega depois de sociologia-v13.css. Remova este arquivo para voltar ao v13.
   ===================================================================== */

body[data-materia="soc"] .btn{font-weight:700;letter-spacing:.01em}
body[data-materia="soc"] .btn .b-txt{font-size:16.5px}

/* ---------- vinho (comprar / ver planos) ---------- */
body[data-materia="soc"] .btn-cherry{
  background:
    radial-gradient(120% 160% at 50% -60%,rgba(255,226,214,.32),rgba(255,226,214,0) 58%),
    linear-gradient(180deg,#A63A4D 0%,#8A2B3C 52%,#6F1F2E 100%)!important;
  color:#FFF7EA;
  box-shadow:
    inset 0 0 0 1px rgba(236,206,150,.70),
    inset 0 1px 0 rgba(255,240,226,.40),
    inset 0 -3px 0 rgba(58,12,20,.30),
    0 1px 2px rgba(60,15,22,.30),
    0 12px 26px -12px rgba(122,41,53,.70),
    0 0 0 0 rgba(201,162,78,.38)!important;
  animation:ctaAura 3.2s ease-in-out infinite!important}
/* some a bolha de vidro do v13 */
body[data-materia="soc"] .btn-cherry::before{content:none!important}
body[data-materia="soc"] .btn-cherry .b-txt{text-shadow:0 1px 1px rgba(40,6,12,.35)}
/* reflexo: filete fino e luminoso, passa devagar */
body[data-materia="soc"] .btn-cherry::after{width:28%;mix-blend-mode:soft-light;
  background:linear-gradient(100deg,transparent 0%,rgba(255,244,224,0) 30%,rgba(255,248,234,.75) 48%,#fff 50%,rgba(255,248,234,.75) 52%,rgba(255,244,224,0) 70%,transparent 100%);
  animation:espelho 4.4s cubic-bezier(.45,0,.2,1) infinite!important}
@keyframes ctaAura{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(236,206,150,.70),inset 0 1px 0 rgba(255,240,226,.40),inset 0 -3px 0 rgba(58,12,20,.30),0 1px 2px rgba(60,15,22,.30),0 12px 26px -12px rgba(122,41,53,.70),0 0 0 0 rgba(201,162,78,.38)}
  55%{box-shadow:inset 0 0 0 1px rgba(242,218,170,.95),inset 0 1px 0 rgba(255,240,226,.40),inset 0 -3px 0 rgba(58,12,20,.30),0 1px 2px rgba(60,15,22,.30),0 16px 30px -12px rgba(122,41,53,.80),0 0 0 8px rgba(201,162,78,0)}}
/* selo da seta: moeda dourada com aro */
body[data-materia="soc"] .btn-cherry .b-ico{width:40px;height:40px;
  background:radial-gradient(circle at 35% 28%,#FBEBC2,#E2C27C 55%,#BE9545 100%)!important;color:#5A1D27!important;
  box-shadow:0 0 0 2px rgba(255,236,196,.28),0 3px 8px -2px rgba(40,6,12,.55),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(140,96,30,.35)!important}
body[data-materia="soc"] .btn .b-ico svg{transition:transform .5s var(--suave)}
body[data-materia="soc"] .btn:hover .b-ico svg{transform:translateX(3px)}
/* hover: sobe um pouco, acende a luz do topo */
body[data-materia="soc"] .btn-cherry:hover{
  background:
    radial-gradient(120% 160% at 50% -60%,rgba(255,232,220,.42),rgba(255,226,214,0) 60%),
    linear-gradient(180deg,#B24054 0%,#932F41 52%,#752131 100%)!important;
  transform:translateY(-2px);filter:none}
body[data-materia="soc"] .btn-cherry:active{transform:translateY(0) scale(.99)}

/* ---------- marfim (plano Básico) ---------- */
body[data-materia="soc"] .btn-milk{
  background:linear-gradient(180deg,#FFFEFB 0%,#F7F0E3 100%)!important;color:#5A1D27;
  box-shadow:inset 0 0 0 1px rgba(166,58,77,.45),inset 0 1px 0 #fff,inset 0 -3px 0 rgba(122,41,53,.10),0 1px 2px rgba(38,35,31,.12),0 10px 22px -14px rgba(38,35,31,.45)!important}
body[data-materia="soc"] .btn-milk .b-txt{text-shadow:none}
body[data-materia="soc"] .btn-milk::after{width:28%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0) 30%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 70%,transparent);
  animation:espelho 4.4s cubic-bezier(.45,0,.2,1) 1.4s infinite!important}
body[data-materia="soc"] .btn-milk .b-ico{width:40px;height:40px;
  background:linear-gradient(180deg,#A63A4D,#7A2535)!important;color:#FFF3DC!important;
  box-shadow:0 3px 8px -3px rgba(122,41,53,.6),inset 0 1px 0 rgba(255,255,255,.25)!important}
body[data-materia="soc"] .btn-milk:hover{background:linear-gradient(180deg,#FFFFFF 0%,#F3E8D4 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(166,58,77,.7),inset 0 1px 0 #fff,inset 0 -3px 0 rgba(122,41,53,.12),0 1px 2px rgba(38,35,31,.12),0 14px 26px -14px rgba(38,35,31,.5)!important}

/* barra fixa do celular: selo menor */
body[data-materia="soc"] .barra-compra .btn .b-ico{width:36px;height:36px}
body[data-materia="soc"] .barra-compra .btn .b-txt{font-size:15px}

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