/* Reusa los tokens de style.css (--bg, --accent, --font-display, etc.) */

.bot-hero{ padding: 5rem 1.5rem 3.5rem; text-align: center; }
.bot-hero .section-inner{ padding: 0; max-width: 760px; }
.bot-hero h1{ font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 0.6em; }
.bot-hero .hero-sub{ margin: 0 auto 2rem; }
.bot-hero-actions{ display:flex; gap: 1rem; justify-content:center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.bot-hero-note{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); }

.section-subtitle{ color: var(--text-muted); max-width: 560px; margin: 0 auto 2.5rem; text-align:center; }

/* Ladder table */
.ladder-visual .section-inner{ max-width: 720px; }
.ladder-table{ width:100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.ladder-table th, .ladder-table td{ text-align:left; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.ladder-table th{ background: var(--bg-panel-2); color: var(--text-muted); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ladder-table tr:last-child td{ border-bottom: none; }
.ladder-table td.value{ font-family: var(--font-mono); color: var(--accent); font-weight: 600; }

/* Pricing (single card) */
.bot-pricing .pricing-card{
  max-width: 420px; margin: 0 auto; text-align:center;
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--bg-panel); padding: 2.5rem 2rem;
}
.bot-pricing .price-tag{ font-family: var(--font-mono); font-size: 3rem; font-weight: 700; margin: 0.3rem 0 0; }
.bot-pricing .price-tag span{ font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.bot-pricing .price-period{ color: var(--text-muted); font-size: 0.85rem; margin: 0 0 1.75rem; }
.bot-pricing ul{ list-style:none; padding:0; margin: 0 0 2rem; text-align:left; display:grid; gap: 0.7rem; }
.bot-pricing li{ display:flex; gap: 0.6rem; font-size: 0.9rem; color: var(--text-muted); }
.bot-pricing .check{ color: var(--accent); font-weight:700; }

.risk-note{ padding-bottom: 5rem; }
.risk-note .section-inner{ max-width: 720px; padding-top: 0; }
.risk-note .box{
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem 1.5rem; font-size: 0.85rem; color: var(--text-muted);
}
.risk-note .box strong{ color: var(--text); }

@media (max-width: 640px){
  .ladder-table th, .ladder-table td{ padding: 0.65rem 0.75rem; font-size: 0.82rem; }
}