/* Escala proporcional da vitrine do app: base de 280 × 374 por cartão,
   com todos os tamanhos derivados da largura disponível (872 = 3 × 280 + 2 × 16). */
#planos.pricing--app { background: #eeeceb !important; }
#planos .app-plans {
  width: 100%; max-width: none; margin-inline: auto;
  container-type: inline-size;
  --plan-design-width: 872;
  --plan-unit: calc(100cqi / var(--plan-design-width));
}
#planos .app-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: calc(16 * var(--plan-unit)); }
#planos.pricing--app .app-plans .app-plan {
  box-sizing: border-box; display: flex; flex-direction: column;
  min-width: 0; min-height: calc(374 * var(--plan-unit)); padding: calc(16 * var(--plan-unit)) !important; margin: 0; border: calc(1 * var(--plan-unit)) solid #dedcdb;
  border-radius: calc(16 * var(--plan-unit)); background: #fff; color: #262626;
  transform: translateY(0); transition: transform 220ms cubic-bezier(.2,.7,.3,1); opacity: 1; box-shadow: none !important;
}
#planos.pricing--app .app-plans #plan-pro { background: #1c1a19 !important; border: calc(1 * var(--plan-unit)) solid #789083 !important; color: #fff; }
#planos.pricing--app .app-plans #plan-ultra { background: #121110 !important; border: calc(2 * var(--plan-unit)) solid #10b981 !important; padding: calc(15 * var(--plan-unit)) !important; color: #fff; }
#planos .app-plan__title { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--plan-unit)); margin-bottom: calc(4 * var(--plan-unit)); min-height: calc(20 * var(--plan-unit)); }
#planos .app-plan__title h3, #planos .app-network__title h3 { margin: 0; font-size: calc(16 * var(--plan-unit)); font-weight: 900; line-height: calc(20 * var(--plan-unit)); letter-spacing: -.025em; color: inherit; }
#planos .app-plan__badge { padding: calc(2 * var(--plan-unit)) calc(8 * var(--plan-unit)); border-radius: calc(999 * var(--plan-unit)); font-size: calc(11 * var(--plan-unit)); font-weight: 900; line-height: calc(16 * var(--plan-unit)); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#planos .app-plan__badge--popular { color: #fff; background: #10b981; }
#planos .app-plan__badge--exclusive { color: #111; background: #f59e0b; }
#planos .app-plan__description { margin: 0; color: #777; font-size: calc(11 * var(--plan-unit)); font-weight: 500; line-height: calc(16 * var(--plan-unit)); }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__description { color: #aaa; }
#planos .app-plan__price { display: flex; align-items: baseline; gap: calc(2 * var(--plan-unit)); margin: calc(12 * var(--plan-unit)) 0; }
#planos .app-plan__amount { font-size: calc(24 * var(--plan-unit)); font-weight: 900; line-height: calc(32 * var(--plan-unit)); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
#planos .app-plan__currency { color: #777; font-size: calc(10 * var(--plan-unit)); font-weight: 700; }
#planos .app-plan__period { color: #777; font-size: calc(12 * var(--plan-unit)); font-weight: 700; }
#planos :is(.app-plan--pro,.app-plan--ultra) :is(.app-plan__currency,.app-plan__period) { color: #aaa; }
#planos .app-plan__billing { margin: 0 0 calc(12 * var(--plan-unit)); padding: calc(4 * var(--plan-unit)) calc(8 * var(--plan-unit)); border-radius: calc(6 * var(--plan-unit)); background: #ecfdf5; color: #047857; font-size: calc(11 * var(--plan-unit)); font-weight: 700; line-height: calc(16 * var(--plan-unit)); }
#planos .app-plan__billing:empty { display: none; }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__billing { background: #ffffff1a; color: #6ee7b7; }
#planos .app-plan__body { flex: 1; border-top: calc(1 * var(--plan-unit)) solid #e7e5e4; padding-top: calc(12 * var(--plan-unit)); margin-bottom: 0; }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__body { border-color: #ffffff1a; }
#planos .app-plan__inherits { margin: 0 0 calc(8 * var(--plan-unit)); padding: calc(6 * var(--plan-unit)) calc(10 * var(--plan-unit)); border-radius: calc(8 * var(--plan-unit)); background: #f5f5f4; font-size: calc(12 * var(--plan-unit)); font-weight: 900; line-height: calc(16 * var(--plan-unit)); }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__inherits { background: #ffffff1a; color: #e5e5e5; }
#planos .app-plan__features { display: grid; gap: calc(4 * var(--plan-unit)); list-style: none; margin: 0; padding: 0; }
#planos .app-plan__features li { display: flex; align-items: flex-start; gap: calc(6 * var(--plan-unit)); margin: 0; padding: 0; font-size: calc(12 * var(--plan-unit)); font-weight: 700; line-height: calc(15 * var(--plan-unit)); }
#planos .app-plan__features svg { flex: 0 0 calc(13 * var(--plan-unit)); width: calc(13 * var(--plan-unit)); height: calc(13 * var(--plan-unit)); margin-top: calc(1 * var(--plan-unit)); color: #10b981; }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__features li { color: #f59e0b; font-size: calc(11 * var(--plan-unit)); font-weight: 800; }
#planos :is(.app-plan--pro,.app-plan--ultra) .app-plan__features svg { color: #f59e0b; }
#planos .app-plan__cta { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--plan-unit)); min-height: calc(40 * var(--plan-unit)); padding: calc(10 * var(--plan-unit)) calc(12 * var(--plan-unit)); border: 0; border-radius: calc(8 * var(--plan-unit)); background: #2173ea; color: #fff; font-size: calc(12 * var(--plan-unit)); font-weight: 900; line-height: calc(16 * var(--plan-unit)); letter-spacing: .03em; text-align: center; text-transform: uppercase; box-shadow: none; transition: background-color .15s; }
#planos .app-plan__cta svg { flex: 0 0 calc(14 * var(--plan-unit)); width: calc(14 * var(--plan-unit)); height: calc(14 * var(--plan-unit)); }
#planos .app-plan__cta:hover { background: #1d61cb; }
#planos .app-plan__cta:focus-visible { outline: calc(3 * var(--plan-unit)) solid #2173ea; outline-offset: calc(4 * var(--plan-unit)); }
#planos.pricing--app .app-plans #plan-rede { display: flex; align-items: center; justify-content: space-between; gap: calc(24 * var(--plan-unit)); margin-top: calc(16 * var(--plan-unit)); padding: calc(20 * var(--plan-unit)); border: calc(1 * var(--plan-unit)) dashed #d2cfcc; border-radius: calc(12 * var(--plan-unit)); background: #fff; color: #262626; }
#planos .app-network__copy { min-width: 0; flex: 1; }
#planos .app-network__title { display: flex; align-items: center; gap: calc(8 * var(--plan-unit)); margin-bottom: calc(4 * var(--plan-unit)); }
#planos .app-network__icon { display: grid; place-items: center; width: calc(32 * var(--plan-unit)); height: calc(32 * var(--plan-unit)); border-radius: 50%; background: #eeeceb; color: #777; }
#planos .app-network__icon svg { width: calc(16 * var(--plan-unit)); height: calc(16 * var(--plan-unit)); }
#planos .app-network .app-plan__description { margin-bottom: calc(12 * var(--plan-unit)); }
#planos .app-network .app-plan__inherits { display: inline-block; padding: calc(6 * var(--plan-unit)) calc(10 * var(--plan-unit)); }
#planos .app-network .app-plan__cta { flex-shrink: 0; padding-inline: calc(16 * var(--plan-unit)); }
@media (max-width: 919px) {
  #planos.pricing--app .app-plans #plan-rede { align-items: flex-start; flex-direction: column; gap: calc(16 * var(--plan-unit)); }
  #planos .app-network .app-plan__cta { width: 100%; }
}

@media (min-width: 600px) and (max-width: 959px) {
  #planos .app-plans { --plan-design-width: 576; }
  #planos .app-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #planos.pricing--app .app-plans #plan-ultra {
    grid-column: 1 / -1; justify-self: center;
    width: calc(280 * var(--plan-unit)) !important;
  }
}
@media (max-width: 599px) {
  #planos .app-plans { --plan-design-width: 280; }
  #planos .app-plans__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  #planos.pricing--app .app-plans .app-plan:hover { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  #planos.pricing--app .app-plans .app-plan { transition: none; }
}

/* O banner e o seletor usam a mesma escala e os mesmos pesos dos planos. */
#planos.pricing--app > .container--wide {
  container-type: inline-size;
  --pricing-type-design-width: 872;
}
#planos.pricing--app :is(.trial-banner, .billing-toggle) {
  --pricing-type-unit: calc(100cqi / var(--pricing-type-design-width));
  font-family: inherit;
}
#planos.pricing--app .trial-banner strong {
  font-size: calc(16 * var(--pricing-type-unit));
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.025em;
}
#planos.pricing--app .trial-banner p {
  font-size: calc(12 * var(--pricing-type-unit));
  font-weight: 700;
  line-height: 1.55;
  color: #404040;
}
#planos.pricing--app .trial-banner .btn {
  font-size: calc(12 * var(--pricing-type-unit));
  font-weight: 900;
  line-height: 1.35;
}
#planos.pricing--app :is(.billing-toggle__label, .billing-toggle__badge) {
  font-size: calc(11 * var(--pricing-type-unit));
  font-weight: 900;
}
@media (min-width: 600px) and (max-width: 959px) {
  #planos.pricing--app > .container--wide { --pricing-type-design-width: 576; }
}
@media (max-width: 599px) {
  #planos.pricing--app > .container--wide { --pricing-type-design-width: 280; }
}


#planos .billing-toggle__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 640px) {
  #planos.pricing--app .billing-toggle {
    flex-direction: column;
    flex-wrap: nowrap;
    width: fit-content;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  #planos .billing-toggle__controls {
    padding: 4px 16px;
    border: 1px solid #d5d9de;
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
  }
  #planos.pricing--app .billing-toggle__label { font-size: 14px; }
  #planos.pricing--app .billing-toggle__badge {
    flex-basis: auto;
    align-self: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
  }
}