/* ======================================================================
   BLOCO PLANO DE SÓCIOS — BANNERS + CTAs (sem redundâncias)
   ====================================================================== */

/* ---------- Base do bloco ---------- */
.ps-plano-minimal{
  width:90%;
  max-width:1280px;
  margin:48px auto;
  text-align:center;
}

.ps-cta-note{
  margin-top:10px;
  font-size:.78rem;
  color:#4b4f57;
  line-height:1.35;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .ps-banner-img,
  .ps2-media{
    animation:none !important;
    transition:none !important;
  }
}

/* ======================================================================
   PLANO DE SÓCIOS (banner novo com <picture>)
   ====================================================================== */

.ps-banner-button{
  position:relative;
  display:inline-block;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  outline:none;
  text-decoration:none;
}

.ps-banner-button:focus{ outline:none !important; }

.ps-banner-picture{
  display:block;
  border-radius:22px;
  overflow:hidden;
}

.ps-banner-img{
  width:100%;
  max-width:1280px;
  display:block;
  border-radius:0;
  box-shadow:0 18px 40px rgba(0,0,0,.26);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* texto-link (só mobile) */
.ps-banner-tap-click{
  display:block;
  margin-top:10px;
  font-size:.95rem;
  color:#0b4d8f;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:.22em;
}

@media (min-width:769px){
  .ps-banner-tap-click{ display:none !important; }
}

/* ---------- Variações do banner novo ---------- */
.ps-style-glass{
  padding:10px 16px;
  background:linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,.82));
  border-radius:26px;
  box-shadow:0 26px 60px rgba(0,0,0,.25);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ps-style-glass .ps-banner-picture{ border-radius:18px; }
.ps-style-glass .ps-banner-img{ box-shadow:none; }
.ps-style-glass:hover .ps-banner-img{ transform:scale(1.02); filter:brightness(1.03); }

.ps-style-pulse .ps-banner-img{ animation:psPulse 2.8s ease-in-out infinite; }
@keyframes psPulse{
  0%,100%{ transform:scale(1); box-shadow:0 18px 40px rgba(0,0,0,.26); }
  40%{ transform:scale(1.03); box-shadow:0 26px 58px rgba(0,0,0,.34); }
}
.ps-style-pulse:hover .ps-banner-img{ transform:scale(1.04); }

.ps-style-glow .ps-banner-img{ animation:psGlow 4.5s ease-in-out infinite; }
@keyframes psGlow{
  0%{ box-shadow:0 18px 40px rgba(11,77,143,.45); }
  33%{ box-shadow:0 18px 40px rgba(251,89,4,.50); }
  66%{ box-shadow:0 18px 40px rgba(255,201,56,.55); }
  100%{ box-shadow:0 18px 40px rgba(11,77,143,.45); }
}
.ps-style-glow:hover .ps-banner-img{ transform:scale(1.03); }

.ps-style-press .ps-banner-img{ box-shadow:0 18px 40px rgba(0,0,0,.28); }
.ps-style-press:active .ps-banner-img{
  transform:translateY(4px) scale(.985);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.ps-style-tilt{ perspective:1200px; }
.ps-style-tilt .ps-banner-img{ transform-origin:center; }
.ps-style-tilt:hover .ps-banner-img{
  transform:rotateX(6deg) rotateY(-6deg) scale(1.02);
  box-shadow:0 28px 60px rgba(0,0,0,.35);
}

.ps-style-float .ps-banner-img{ animation:psFloat 5.5s ease-in-out infinite; }
@keyframes psFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
.ps-style-float:hover .ps-banner-img{ transform:translateY(-6px) scale(1.02); }

@media (max-width:768px){
  .ps-style-float .ps-banner-img{ animation:none; transform:none; }
}

/* ======================================================================
   MOBILE ONLY — especialistas_mobile.png + OFERTA + CTA
   ====================================================================== */

/* só mobile */
.ps-only-mobile{ display:block; }
@media (min-width:769px){
  .ps-only-mobile{ display:none !important; }
}

/* evita deformação */
.ps-banner-media{
  display:block;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:2/1; /* 1500x750 */
  background:rgba(0,0,0,.06);
}

.ps-banner-media > .ps-banner-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* feedback de clique */
.ps-banner-mobile .ps-banner-img{
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.ps-banner-mobile:active .ps-banner-img{
  transform:scale(.988);
  filter:brightness(1.02);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}

.ps-banner-mobile:focus-visible{
  outline:3px solid rgba(47,209,255,.55);
  outline-offset:3px;
}

/* ---------- Oferta mobile (ARRUMADA e BONITA) ---------- */
/* Usa exatamente o seu HTML atual com: .psm-pill + .psm-price + .psm-deadline */
.psm-offer{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  justify-items:center;
}

/* linha 1: pílulas lado a lado */
.psm-pill,
.psm-price,
.psm-deadline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:9px 12px;
  line-height:1;
  white-space:nowrap;
}

.psm-pill{
  gap:8px;
  font-size:.88rem;
  font-weight:900;
  color:#b42318;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.22);
}

.psm-price{
  gap:10px;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}

.psm-old{
  font-size:.95rem;
  text-decoration:line-through;
  opacity:.55;
}

.psm-new{
  font-size:1.45rem;
  font-weight:1000;
  color:#16a34a;
  letter-spacing:-.2px;
}

.psm-deadline{
  font-size:.95rem;
  font-weight:900;
  color:#0f172a;
  background:rgba(255,156,56,.14);
  border:1px solid rgba(255,156,56,.22);
}

/* Em telas um pouco maiores, coloca 2 chips na mesma linha */
@media (min-width:390px){
  .psm-offer{
    grid-template-columns: auto auto;
    gap:10px 10px;
  }
  .psm-deadline{
    grid-column: 1 / -1; /* deadline embaixo centralizado */
  }
}
/* CTA forte mobile */
.psm-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:14px;
  padding:14px 18px;
  border-radius:999px;

  font-weight:1000;
  font-size:1.02rem;
  text-decoration:none;

  color:#0b1220;
  background:linear-gradient(90deg, #ff9c38, #ffd06a);

  box-shadow:
    0 16px 40px rgba(0,0,0,.20),
    0 0 0 1px rgba(47,209,255,.14),
    0 0 18px rgba(255,156,56,.20);

  transition:transform .2s ease, filter .2s ease;
}

.psm-cta:hover{ filter:brightness(1.03) saturate(1.04); }
.psm-cta:active{ transform:translateY(2px) scale(.99); }

.psm-cta:focus-visible{
  outline:3px solid rgba(47,209,255,.55);
  outline-offset:3px;
}

/* ======================================================================
   DESKTOP ONLY — plano-de-socios-2 (especialistas_desktop.png)
   ====================================================================== */

/* REGRA ÚNICA (sem duplicar): escondido no mobile, aparece no desktop */
.ps2-only-desktop{ display:none !important; }
@media (min-width:769px){
  .ps2-only-desktop{ display:block !important; }
}

.ps2-banner{
  display:block;
  text-decoration:none;
  border-radius:22px;
}

.ps2-media{
  display:block;
  width:100%;
  border-radius:22px;
  overflow:hidden;
  background:#0b1220;

  box-shadow:
    0 22px 60px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 34px rgba(47,209,255,.18),
    0 0 34px rgba(255,156,56,.16);

  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.ps2-img{
  width:100%;
  height:auto;
  display:block;
}

.ps2-banner:hover .ps2-media{
  transform:translateY(-2px);
  filter:brightness(1.03) saturate(1.05);
  box-shadow:
    0 30px 74px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.10),
    0 0 44px rgba(47,209,255,.22),
    0 0 44px rgba(255,156,56,.20);
}

.ps2-banner:active .ps2-media{ transform:translateY(1px) scale(.99); }

.ps2-banner:focus-visible{
  outline:3px solid rgba(47,209,255,.55);
  outline-offset:3px;
}

/* Oferta desktop (linha simples e legível) */
.ps-offer{
  margin-top:14px;
  font-size:1rem;
  color:#0f172a;
}

.ps-offer strong{
  color:#ef4444;
  margin-right:6px;
}

.old-price{
  text-decoration:line-through;
  opacity:.55;
  margin:0 6px;
}

.new-price{
  font-size:1.55rem;
  font-weight:1000;
  color:#16a34a;
  letter-spacing:-.2px;
}

.deadline{
  margin-left:6px;
  font-weight:900;
  color:#334155;
}

/* CTA forte desktop */
.ps-cta-strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:14px;
  padding:14px 28px;
  border-radius:999px;

  font-size:1.05rem;
  font-weight:1000;
  text-decoration:none;

  color:#0b1220;
  background:linear-gradient(90deg, #ff9c38, #ffd06a);
  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 44px rgba(0,0,0,.24),
    0 0 0 1px rgba(47,209,255,.16),
    0 0 22px rgba(255,156,56,.18);

  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.ps-cta-strong:hover{
  transform:translateY(-2px);
  filter:brightness(1.04) saturate(1.05);
}

.ps-cta-strong:active{ transform:translateY(2px) scale(.99); }

.ps-cta-strong:focus-visible{
  outline:3px solid rgba(47,209,255,.55);
  outline-offset:3px;
}

/* label opcional */
.ps-promo-label{
  font-size:.78rem;
  color:#777;
  text-align:center;
  margin-bottom:4px;
  font-weight:600;
}

@media (max-width: 768px){
  [data-part="plano-de-socios-2"],
  .ps2-only-desktop{
    display:none !important;
  }
}


/* =========================================================
   MOBILE — oferta + CTA compactos (ATUAL)
   ========================================================= */

/* desativa o layout antigo no mobile (pra não conflitar) */
@media (max-width:768px){
  .psm-offer{ display:none !important; }
  .psm-cta{ display:none !important; }
  .ps-cta-note{ display:none !important; }
}

/* oferta compacta */
.psm-offer-compact{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  line-height:1;
}

.psm-offer-compact .psm-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.82rem;
  color:#b42318;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.22);
}

.psm-offer-compact .psm-old{
  font-size:.88rem;
  text-decoration:line-through;
  opacity:.55;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);
}

.psm-offer-compact .psm-new{
  font-size:1.25rem;
  font-weight:1000;
  color:#16a34a;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.18);
  letter-spacing:-.2px;
}

.psm-offer-compact .psm-until{
  font-size:.88rem;
  font-weight:900;
  color:#0f172a;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,156,56,.12);
  border:1px solid rgba(255,156,56,.20);
}

/* CTA compacto (botão de verdade) */
.psm-cta-compact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:12px;
  padding:13px 18px;
  border-radius:999px;

  font-weight:1000;
  font-size:1.02rem;
  text-decoration:none;

  color:#0b1220;
  background:linear-gradient(90deg, #ff9c38, #ffd06a);
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    0 0 0 1px rgba(47,209,255,.12),
    0 0 16px rgba(255,156,56,.18);

  transition:transform .2s ease, filter .2s ease;
}

.psm-cta-compact:hover{ filter:brightness(1.03) saturate(1.04); }
.psm-cta-compact:active{ transform:translateY(2px) scale(.99); }

.psm-cta-compact:focus-visible{
  outline:3px solid rgba(47,209,255,.55);
  outline-offset:3px;
}

/* nota curta */
.psm-note{
  margin-top:8px;
  font-size:.78rem;
  color:#4b4f57;
  line-height:1.3;
}

/* ajustes em telas muito pequenas */
@media (max-width:360px){
  .psm-offer-compact{ gap:6px; }
  .psm-offer-compact .psm-new{ font-size:1.18rem; }
  .psm-cta-compact{ font-size:1rem; padding:12px 16px; }
}


/* =========================================================
   PULSE SÓ NO ÍCONE (CTA) — mobile + desktop
   ========================================================= */

/* garante que o ícone seja animável */
.psm-cta-compact i,
.ps-cta-strong i{
  display:inline-block;
  transform-origin:center;
}

/* pulse leve (escala + micro deslocamento) */
@keyframes ctaIconPulse{
  0%, 60%, 100% { transform:translateX(0) scale(1); }
  30%          { transform:translateX(1px) scale(1.12); }
}

/* aplica o pulse só no ícone */
.psm-cta-compact i,
.ps-cta-strong i{
  animation:ctaIconPulse 1.8s ease-in-out infinite;
  opacity:.95;
}

/* no hover/focus, acelera e dá um pouco mais de “sinal” */
.psm-cta-compact:hover i,
.psm-cta-compact:focus-visible i,
.ps-cta-strong:hover i,
.ps-cta-strong:focus-visible i{
  animation-duration:1.2s;
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .psm-cta-compact i,
  .ps-cta-strong i{
    animation:none !important;
  }
}