/* PDFPrivado Pro responsive CTA v1
   Objetivo: evitar solapamientos de la etiqueta Pro en móvil/tablet,
   mantener escritorio estable y dejar CTA informativo, no venta/descarga. */

html {
  scroll-behavior: smooth;
}

/* Ancla interna para que el header pueda llevar a la sección informativa. */
#app-pro {
  scroll-margin-top: 90px;
}

@media (max-width: 767px) {
  .pro-box {
    box-sizing: border-box !important;
    width: min(100% - 24px, 540px) !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 18px 24px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  /* En móvil la etiqueta deja de ser absoluta para que nunca tape el título. */
  .pro-badge {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    width: fit-content !important;
    max-width: calc(100% - 20px) !important;
    margin: -4px auto 18px !important;
    padding: 10px 18px !important;
    border-radius: 18px !important;
    font-size: clamp(0.72rem, 3.4vw, 0.9rem) !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .pro-content {
    gap: 14px !important;
  }

  .pro-content h3 {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.18 !important;
    margin: 0 0 8px !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }

  .pro-features {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 0 0 22px !important;
  }

  .pro-features li {
    align-items: flex-start !important;
    font-size: clamp(1rem, 5vw, 1.18rem) !important;
    line-height: 1.35 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .btn-pro {
    width: 100% !important;
    max-width: 360px !important;
    padding: 14px 18px !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .pro-box {
    padding-top: 58px !important;
  }

  .pro-badge {
    max-width: 70% !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
}