/* ==========================================================================
   plan-detail.css — single-plan detail pages (/planes/*, /en/plans/*)

   These pages explain ONE plan in depth. The hierarchy is borrowed from the
   /precios/ pages (offer visible immediately, then the per-size grid, then
   the long-form detail) but the components are their own: a plan page has to
   carry rules, per-size specs and comparisons that a firm price page does not.

   Loaded last, after style.css + plan-comparison.css + standalone.css, so it
   can restyle the shared .plan-* primitives it reuses (.plan-section,
   .plan-offer-price, .plan-table, .plan-faq-item) without touching them
   globally.
   ========================================================================== */

.plan-detail {
  display: block;
}

.plan-detail .container {
  max-width: 1180px;
}

/* ── 1. Topbar: context + verified stamp + sibling-plan pills ────────────── */

.plan-detail-topbar {
  padding: 1.25rem 0 0;
}

.plan-detail-topbar-inner {
  display: block;
}

.plan-detail-topbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.plan-detail-eyebrow {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-detail-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(0, 255, 135, 0.28);
  border-radius: 999px;
  background: rgba(0, 255, 135, 0.07);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.plan-detail-stamp-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 135, 0.18);
  animation: plan-detail-dot 2.4s ease-in-out infinite;
}

@keyframes plan-detail-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 255, 135, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(0, 255, 135, 0.06); }
}

.plan-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.plan-detail-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.plan-detail-pill:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.22);
}

.plan-detail-pill.is-active {
  border-color: rgba(0, 255, 135, 0.5);
  background: rgba(0, 255, 135, 0.1);
  color: var(--accent);
}

/* ── 2. Hero: headline + the offer card ─────────────────────────────────── */

.plan-detail-hero {
  padding-top: 1.5rem;
}

.plan-detail-hero h1 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(1.85rem, 3.8vw, 2.9rem);
  line-height: 1.1;
}

.plan-detail-lead {
  max-width: 780px;
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.plan-detail-lead strong {
  color: var(--text-primary);
}

.plan-detail-updated {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* The offer card. Two columns on desktop: facts on the left, code + CTA on
   the right — same split that works on /precios/, but the left column carries
   a spec list instead of a rating row, because on a plan page the rules ARE
   the differentiator. */
.plan-detail-card {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  border: 2px solid rgba(0, 255, 135, 0.32);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22);
}

@media (min-width: 900px) {
  .plan-detail-card {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    align-items: center;
  }
}

.plan-detail-card-main {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-start;
}

.plan-detail-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.plan-detail-card-logo img {
  max-width: 52px;
  max-height: 42px;
  object-fit: contain;
}

.plan-detail-card-body {
  display: grid;
  gap: 0.7rem;
  flex: 1 1 260px;
  min-width: 0;
}

.plan-detail-card-eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plan-detail-card-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.plan-detail-card-price-old {
  color: var(--text-muted);
  font-size: 1rem;
  text-decoration: line-through;
}

.plan-detail-card-price-new {
  color: var(--text-primary);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
}

.plan-detail-card-off {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 255, 135, 0.12);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Spec strip: the four or five numbers that define the plan. This replaces
   the old sidebar "ficha rápida" + summary row, folded into one place. */
.plan-detail-card-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.55rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.plan-detail-card-specs li {
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-strong);
}

.plan-detail-card-specs span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.plan-detail-card-specs strong {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.25;
}

.plan-detail-card-actions {
  display: grid;
  gap: 0.65rem;
  align-content: center;
}

/* Single component: the code IS the label, the icon carries the copy
   affordance, one border around the whole thing. Replaces the shared
   .code-block, which renders as two separate boxes glued side by side.
   Scoped to this page type — .code-block itself is untouched. */
.plan-detail-code,
.plan-detail-code.copy-btn {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.65rem 0.9rem !important;
  border: 1px solid rgba(0, 255, 135, 0.4) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(0, 255, 135, 0.13), rgba(0, 255, 135, 0.04)) !important;
  color: var(--text-primary) !important;
  text-align: left;
  cursor: pointer;
  box-shadow: none !important;
}

.plan-detail-code:hover {
  border-color: var(--accent) !important;
  background: rgba(0, 255, 135, 0.17) !important;
}

.plan-detail-code-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.plan-detail-code-eyebrow {
  color: var(--accent);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plan-detail-code-value {
  color: var(--text-primary);
  font-family: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, Menlo, monospace;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.2;
}

.plan-detail-code-icon {
  flex: 0 0 auto;
  color: var(--accent);
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.plan-detail-code:hover .plan-detail-code-icon {
  opacity: 1;
}

.plan-detail-code.is-copied {
  border-color: var(--accent) !important;
  background: rgba(0, 255, 135, 0.22) !important;
}

.plan-detail-card-actions .btn-primary {
  width: 100%;
}

.plan-detail-card-helper {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  text-align: center;
  line-height: 1.45;
}

/* ── 3. Size grid: every account size, priced, with its own numbers ──────── */

.plan-detail-sizes {
  padding-top: 2.5rem;
}

.plan-detail-sizes h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.2;
}

.plan-detail-intro {
  max-width: 820px;
  margin: 0.7rem 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.plan-detail-intro strong {
  color: var(--text-primary);
}

.plan-detail-size-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}

.plan-detail-size-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.plan-detail-size-card.is-featured {
  border-color: rgba(0, 255, 135, 0.4);
  background:
    linear-gradient(180deg, rgba(0, 255, 135, 0.06), rgba(0, 255, 135, 0) 55%),
    var(--surface);
}

.plan-detail-size-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: 0.98rem;
  font-weight: 800;
}

.plan-detail-size-tag {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 255, 135, 0.12);
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Restyle the .plan-offer-price block that inject-plan-offers.js writes so it
   reads as a headline price inside the card instead of a table cell. */
.plan-detail-size-card .plan-offer-price {
  display: grid;
  gap: 0.35rem;
}

.plan-detail-size-card .plan-offer-prices {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.plan-detail-size-card .plan-offer-prices del {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.plan-detail-size-card .plan-offer-prices span {
  color: var(--text-primary);
  font-size: 1.5rem;
  font-weight: 800;
}

.plan-detail-size-card .plan-offer-discount {
  justify-self: start;
}

.plan-detail-size-specs {
  display: grid;
  gap: 0.3rem;
  margin: 0.1rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}

.plan-detail-size-specs div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.plan-detail-size-specs dt {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.plan-detail-size-specs dd {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 700;
  text-align: right;
}

/* Compact variant of the hero code button, one per size card. Same component,
   same copy affordance (icon + click-to-copy + "copied" feedback), just
   scaled down so it sits under the price without competing with the CTA. */
.plan-detail-code-sm,
.plan-detail-code-sm.copy-btn {
  gap: 0.5rem;
  margin-top: 0.2rem;
  padding: 0.5rem 0.7rem !important;
  border-radius: 10px !important;
  background: rgba(0, 255, 135, 0.07) !important;
}

.plan-detail-code-sm .plan-detail-code-eyebrow {
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.plan-detail-code-sm .plan-detail-code-value {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.plan-detail-size-card .btn-secondary {
  border-color: rgba(0, 255, 135, 0.35);
  color: var(--text-primary);
  font-weight: 700;
}

.plan-detail-size-card .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.plan-detail-size-card .btn {
  padding: 0.65rem 0.9rem;
  font-size: 0.86rem;
  text-align: center;
}

.plan-detail-note {
  max-width: 860px;
  margin: 1.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── 4. Horizontal jump nav (replaces the old vertical sidebar TOC) ──────── */

/* Appears exactly once, right before the long-form content. It was sticky,
   but ten chips wrap to two rows at desktop width — pinned under the 60px
   header that permanently ate ~170px of every viewport, which read as the bar
   being repeated at every scroll position. Static matches .price-jump-nav,
   the equivalent on /precios/. */
.plan-detail-jump {
  margin-top: 2.25rem;
}

.plan-detail-jump-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.plan-detail-jump-label {
  margin-right: 0.2rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.plan-detail-jump-inner::-webkit-scrollbar {
  display: none;
}

.plan-detail-jump-inner a {
  flex: 0 0 auto;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.plan-detail-jump-inner a:hover {
  color: var(--accent);
  border-color: rgba(0, 255, 135, 0.4);
}

/* ── 5. Long-form body ──────────────────────────────────────────────────── */

.plan-detail-body {
  display: grid;
  gap: 1rem;
  padding-top: 1.75rem;
}

.plan-detail-body > .plan-section,
.plan-detail-body > .plan-cta-box,
.plan-detail-body > .plan-detail-faq,
.plan-detail-sizes {
  scroll-margin-top: 84px;
}

.plan-detail-body .plan-section {
  padding: 1.5rem;
}

/* Blocks run the full 1180px so tables can breathe, but prose is capped at a
   readable measure instead of stretching to the card edge. Tables, mobile
   cards and the fit/no-fit columns keep the full width. */
.plan-detail-body .plan-section > p,
.plan-detail-body .plan-section > ul,
.plan-detail-split p,
.plan-detail-split ul {
  max-width: 72ch;
}

.plan-detail-kicker {
  margin: 0 0 0.4rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Rule blocks (drawdown / consistency / payouts) get an accent rail so the
   three of them read as one family without being squeezed into columns —
   their paragraphs are too long for a 3-up grid to stay legible. */
.plan-detail-rule {
  position: relative;
  overflow: hidden;
  padding-left: 1.75rem !important;
}

.plan-detail-rule::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), rgba(0, 255, 135, 0.15));
}

/* Decision panel: the Builder $1.5K vs $2K call, the reason most people land
   on that page. Gets the strongest treatment on the page after the hero. */
.plan-detail-decision {
  border-color: rgba(0, 255, 135, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(0, 255, 135, 0.07), rgba(0, 255, 135, 0) 40%),
    var(--surface) !important;
}

.plan-detail-verdict {
  margin: 0.9rem 0 0 !important;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(0, 255, 135, 0.26);
  border-radius: 10px;
  background: rgba(0, 255, 135, 0.06);
  color: var(--text-secondary) !important;
}

.plan-detail-verdict strong {
  color: var(--text-primary);
}

/* Two-up "fits you / does not fit you" columns. */
@media (min-width: 860px) {
  .plan-detail-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    align-items: start;
    margin-top: 0.9rem;
  }

  .plan-detail-split > div {
    min-width: 0;
  }
}

.plan-detail-split h3 {
  font-size: 1.02rem;
}

.plan-detail-faq {
  display: block;
}

/* standalone.css centers  for the homepage FAQ; this page's FAQ
   is a left-aligned section like every other block, so pull it back. */
#faq.plan-detail-faq > h2,
.plan-detail-faq > h2 {
  margin: 0 0 1rem !important;
  max-width: none;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.2;
  text-align: left;
}

.plan-detail-faq-items {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .plan-detail-faq-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.plan-detail-faq .plan-faq-item {
  padding: 1.15rem !important;
}

.plan-detail-faq .plan-faq-item h3 {
  font-size: 1rem;
  line-height: 1.35;
}

/* ── 6. Closing CTA band ────────────────────────────────────────────────── */

.plan-detail-final {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  margin: 2.25rem 0 3rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(0, 255, 135, 0.24);
  border-radius: 14px;
  background: rgba(0, 255, 135, 0.05);
  text-align: center;
}

.plan-detail-final strong {
  color: var(--text-primary);
  font-size: 1.1rem;
}

.plan-detail-final p {
  max-width: 640px;
  margin: 0;
  color: var(--text-muted);
}

.plan-detail-final .plan-cta-actions {
  justify-content: center;
}

.plan-detail-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin-top: 0.35rem;
}

.plan-detail-links a {
  color: var(--accent);
  font-size: 0.9rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  /* Ten chips would stack four rows deep on a phone — keep them on one
     swipeable line instead. */
  .plan-detail-jump-inner {
    flex-wrap: nowrap;
  }

  .plan-detail-jump-inner::-webkit-scrollbar {
    display: none;
  }

  .plan-detail-jump-label {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .plan-detail-card,
  .plan-detail-body .plan-section {
    padding: 1.15rem;
  }

  .plan-detail-rule {
    padding-left: 1.4rem !important;
  }

  .plan-detail-topbar-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-detail-card-logo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }
}

@media (max-width: 768px) {
  /* style.css hides .code-block / .copy-btn / .code-copy site-wide at this
     breakpoint; restore them inside the offer card and the size cards, the
     same escape hatch price-page.css uses. */
  .plan-detail-code,
  .plan-detail-code.copy-btn,
  .plan-detail-size-card .copy-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    min-width: unset !important;
    overflow: visible !important;
  }

  .plan-detail-code-text,
  .plan-detail-code-eyebrow,
  .plan-detail-code-value {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
  }

  .plan-detail-code-text {
    display: grid !important;
  }
}

/* ── Mobile: lift the offer card into the first viewport ─────────────────────
   Same trick price-page.css uses: flatten the hero wrappers with
   display:contents and reorder, so a phone sees context → price → CTA before
   the headline, instead of scrolling past 800px of pills and H1 first.
   Desktop DOM and layout are untouched — this only applies below 768px. */
@media (max-width: 768px) {
  .plan-detail {
    display: flex;
    flex-direction: column;
  }

  .plan-detail-topbar,
  .plan-detail-topbar-inner,
  .plan-detail-hero {
    display: contents;
  }

  .plan-detail-topbar-row {
    order: 1;
    padding: 1.25rem 1.5rem 0;
  }

  /* The signature stat leads on mobile, just under the context row and
     ahead of the price card. Without an explicit order it would default to 0
     and jump above everything, because the hero is display:contents here. */
  .plan-detail-flag {
    order: 2;
    margin: 1rem 1.5rem 0;
  }

  .plan-detail-card {
    order: 3;
    margin: 1rem 1.5rem 0;
  }

  .plan-detail-pills {
    order: 4;
    margin-top: 1.15rem;
    padding: 0 1.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .plan-detail-pills::-webkit-scrollbar {
    display: none;
  }

  .plan-detail-pill {
    flex: 0 0 auto;
  }

  .plan-detail-hero h1 {
    order: 5;
    margin-top: 1.5rem;
    padding: 0 1.5rem;
  }

  .plan-detail-lead {
    order: 6;
    padding: 0 1.5rem;
  }

  .plan-detail-updated {
    order: 7;
    padding: 0 1.5rem;
  }

  .plan-detail-sizes { order: 8; }
  .plan-detail-jump { order: 9; }
  .plan-detail-body { order: 10; }
  .plan-detail-final { order: 11; }
}

/* ── Signature stat: one number that defines the plan ────────────────────────
   Used on the Pro page for the $100,000 payout ceiling, which is the reason
   that page exists. Sits between the lead and the offer card so it lands
   inside the first viewport without competing with the price. */
.plan-detail-flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid rgba(0, 255, 135, 0.3);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(0, 255, 135, 0.1), rgba(0, 255, 135, 0) 65%), var(--surface);
}

.plan-detail-flag-value {
  color: var(--accent);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.plan-detail-flag-text {
  flex: 1 1 320px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
}

.plan-detail-flag-text strong {
  color: var(--text-primary);
}