/* Apenas o terceiro plano e a grade necessária para acomodá-lo.
   Os estilos dos dois planos originais permanecem no HTML sem alterações. */
@media (min-width: 1321px) {
  #oferta.arq-black-adicional > .wrap { max-width: 1500px; }
  #oferta .plans-grid--arq-black { max-width: 1456px; grid-template-columns: 1fr 1.18fr 1fr; }
}
@media (min-width: 981px) and (max-width: 1320px) {
  #oferta .plans-grid--arq-black > .plan--arq-black { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 480px; margin-top: 24px; }
}
.plan.plan--arq-black { background: #202139; border: 2.5px solid #D9C6E0; color: #FBF7F1; }
.plan--arq-black .arq-black-label { align-self: center; background: #D9C6E0; color: #202139; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .05em; padding: 8px 15px; border-radius: var(--pill); margin-bottom: 20px; }
.plan.plan--arq-black h3 { color: #EEE6F3; font-size: 32px; font-weight: 700; }
.plan--arq-black .arq-black-intro { color: #E4DCE8; font-size: 14px; line-height: 1.55; margin: 14px 0 20px; }
.plan.plan--arq-black .art { margin: 4px -18px 24px; mix-blend-mode: normal; }
.plan.plan--arq-black .art img { width: 100%; max-height: none; filter: drop-shadow(0 10px 12px #00000040); }
.plan.plan--arq-black .plan-sub { color: #D9C6E0; }
.plan.plan--arq-black ul li { color: #FBF7F1; }
.plan--arq-black .price-old { color: #E4DCE8; font-size: 14px; }
.plan--arq-black .price-now { color: #EEE6F3; margin: 8px 0; }
.plan--arq-black .price-inst { color: #E4DCE8; }
.plan--arq-black .save-chip { color: #EEE6F3; background: #D9C6E01c; border: 1px solid #D9C6E044; font-size: 12px; }
.plan--arq-black .arq-black-foot { margin-top: 16px; color: #D9CEDC; font-size: 12px; line-height: 1.6; }
.plan--arq-black a:focus-visible { outline: 3px solid #EEE6F3; outline-offset: 5px; }


.plan--arq-black .price-old s { color: #E8C3DC; }
.plan--arq-black .arq-black-saving {
  margin: 4px 0 8px;
  color: #CFE7E2;
  background: #0B5B5924;
  border-color: #A1C9C255;
}
.plan--arq-black .arq-black-lifetime { display: inline-block; text-align: center; }
.arq-black-lifetime-access { white-space: nowrap; }
.arq-black-infinity {
  display: inline-block;
  margin-right: 3px;
  vertical-align: -2px;
  color: #E5CFEA;
  font: 700 22px / 1 Arial, sans-serif;
}

#plano-arq-black { scroll-margin-top: 24px; }
.plan > .social-arrow--black-friday:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
  border-radius: 18px;
}
.plan > .social-arrow--black-friday .pill { flex-wrap: wrap; gap: 4px 10px; }
.plan > .social-arrow--black-friday .pill b {
  flex: 0 1 auto;
  white-space: normal;
  font-size: clamp(13px, 3.6vw, 16px);
}
.plan > .social-arrow--black-friday .copy { text-align: center; }
.plan > .social-arrow--black-friday .down { animation-name: arq-black-arrow-nudge; }
@keyframes arq-black-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
@media (max-width: 1320px) {
  .plan > .social-arrow--black-friday { flex-direction: column; }
  .plan > .social-arrow--black-friday .pill { width: 100%; }
  .plan > .social-arrow--black-friday .down { rotate: 90deg; }
}

@property --arq-black-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}
@keyframes arq-black-border-sweep {
  to { --arq-black-border-angle: 1turn; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (mask-composite: exclude) {
    .plan--arq-black::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      padding: 2px;
      pointer-events: none;
      background: conic-gradient(
        from var(--arq-black-border-angle, 0turn),
        transparent 0deg 305deg,
        #DCC6E330 320deg,
        #EEE6F3 352deg,
        transparent 360deg
      );
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: arq-black-border-sweep 9s linear infinite;
    }
  }
}

/* Mobile: compact the basic card without reducing text or touch targets. */
@media (max-width: 620px) {
  #oferta .plans-grid { row-gap: 28px; }
  #oferta .plans-grid > .plan:first-child { padding-top: 20px; padding-bottom: 18px; }
  #oferta .plans-grid > .plan:first-child .art { margin: 4px 0 8px; }
  #oferta .plans-grid > .plan:first-child .art img { max-height: 180px; }
  #oferta .plans-grid > .plan:first-child .plan-sub { margin: 0 0 8px; }
  #oferta .plans-grid > .plan:first-child ul { gap: 8px; margin-bottom: 12px; }
  #oferta .plans-grid > .plan:first-child .price-inst { margin-bottom: 4px; }
  #oferta .plans-grid > .plan:first-child .save-chip { margin-bottom: 12px; }
  #oferta .plans-grid > .plan:first-child > .social-arrow { margin-top: 10px; gap: 4px; }
}

/* Keep both plan CTAs on one line on mobile, with a full-size touch target. */
@media (max-width: 620px) {
  #oferta .plano_basico,
  #oferta .plano_completo {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
    font-size: clamp(12px, 3.5vw, 17px);
    white-space: nowrap;
    text-wrap: nowrap;
    min-height: 56px;
  }
}

/* Full plan: gentle pulse without changing card or button dimensions. */
@keyframes complete-plan-border-pulse {
  0%, 100% { box-shadow: 0 36px 70px -24px rgba(11,91,89,.5), 0 0 0 0 rgba(11,91,89,.28); }
  50% { box-shadow: 0 36px 70px -24px rgba(11,91,89,.5), 0 0 0 7px rgba(11,91,89,0); }
}
@keyframes complete-plan-badge-pulse {
  0%, 100% { box-shadow: 0 14px 26px -8px var(--green-glow), 0 0 0 0 rgba(11,91,89,.35); }
  50% { box-shadow: 0 14px 26px -8px var(--green-glow), 0 0 0 9px rgba(11,91,89,0); }
}
@media (prefers-reduced-motion: no-preference) {
  #oferta .plan--feature { animation: complete-plan-border-pulse 2.6s ease-in-out infinite; }
  #oferta .plan--feature::before { animation: complete-plan-badge-pulse 2.6s ease-in-out infinite; }
  #oferta .plan--feature .plano_completo { animation: pulse 2.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  #oferta .plan--feature,
  #oferta .plan--feature::before,
  #oferta .plan--feature .plano_completo { animation: none !important; }
}