/* ==========================================================================
   TIPOGRAFÍA LEGIBLE DE TODA LA PÁGINA
   Fuentes: Bricolage Grotesque (titulares, con carácter) + Figtree (texto, de ojo abierto y muy legible
   en pantallas pequeñas) + IBM Plex Mono (cifras y precios).
   Base de 17 px (antes 16) y pisos mínimos para etiquetas, notas y celdas que antes quedaban de 10 a 13 px.
   Va al final de cada página para ganarle a los estilos en línea.
   ========================================================================== */
:root {
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html { font-size: 106.25%; }                       /* 17 px */
body { line-height: 1.65; font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
p, li, td, th, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
h1 { line-height: 1.08; }
h2 { line-height: 1.12; }
h3, h4 { line-height: 1.2; }
.pt-price, .pt-boost-big, .pv-price, .pt-extra-price, .pt-p, .pt-perk-tag, .pv-users dd, .demo-steps li::before { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pt-price, .pv-price, .pt-boost-big { font-family: var(--font-heading); }

/* ---------- Etiquetas y rótulos en mayúscula (mínimo 13 px) ---------- */
.stage-tab-btn, .tap-zoom-pill, .lightbox-tag, .video-title-tag, .sound-text, .hero-device-tag, .gb-surface-tag, .hero-live-badge,
.badge-pill, .pt-kicker, .pt-boost-kicker, .pt-perk-tag, .pv-tag, .pv-once, .pt-card-for, .pt-card-flag,
.gb-launch-tag, .discount-pill, .gb-adaptive-badge, .demo-eyebrow, .pt-compare thead th { font-size: max(.8rem, 13px); }

/* ---------- Selector de tipo de plan (la palanca) y facturación mensual / anual ---------- */
.pt-kicker { font-size: .85rem; }
.pt-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
.pt-k { font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); }
.pt-s { font-size: .95rem; }
.pt-p { font-size: .88rem; }
.pt-help { font-size: 1.12rem; line-height: 1.6; }
.billing-toggle-label { font-size: 1.05rem; }
.billing-toggle-container { gap: 14px; }

/* ---------- Tarjetas de planes ---------- */
.pt-card-desc, .pt-card-desc + * { font-size: 1rem; }
.pt-price-note { font-size: .98rem; }
.pt-list li { font-size: 1rem; }
.pt-more summary { font-size: 1rem; }
.pt-capacity li { font-size: .98rem; }
.pt-allin p { font-size: 1rem; }
.pt-cta { font-size: 1.05rem; }
.pv-lead, .pt-boost-lead { font-size: 1.12rem; }
.pv-equiv { font-size: 1rem; }
.pv-users dt { font-size: .8rem; }
.pv-opt-link b { font-size: 1.02rem; }
.pv-opt-link span:not(.pv-opt-badge) { font-size: .92rem; }
.pt-perk h4 { font-size: 1.28rem; }
.pt-perk p { font-size: 1rem; }
.pt-boost-sub { font-size: 1rem; }
.pt-boost-foot { font-size: 1rem; }
.pt-compare { font-size: 1.02rem; }
.pt-compare tbody th { font-size: 1rem; }

/* ---------- Estilos antiguos de planes y tablas ---------- */
.gb-annual-rule, .gb-quota-pill, .gb-quota-extra, .gb-quota-box-title, .gb-plan-details-summary { font-size: .95rem; }
.gb-plan-list li, .gb-quota-banner p { font-size: 1rem; }
.gb-comparison td, .gb-comparison th, .gb-table td, .gb-table th, table td, table th { font-size: max(.95rem, 15px); }
.faq-answer, .faq-answer p, .faq-answer li { font-size: 1.04rem; }
.footer-col a, .footer-bottom, .footer-grid p { font-size: 1rem; }
.bnm-btn span, .bnm-label { font-size: .78rem; }          /* barra inferior móvil: 13 px, ya cabe en 5 botones */

/* ---------- Demostraciones ---------- */
.demo-lead { font-size: 1.12rem; }
.demo-steps b { font-size: 1.08rem; }
.demo-steps span { font-size: 1rem; }
.demo-note { font-size: .92rem; }
.demo-btn { font-size: 1rem; }
.demo-hint { font-size: .9rem; }

/* ---------- Textos pequeños escritos en línea (solo en páginas de lectura) ---------- */
body[data-tipo] [style*="font-size:0.6"], body[data-tipo] [style*="font-size: 0.6"],
body[data-tipo] [style*="font-size:0.7"], body[data-tipo] [style*="font-size: 0.7"],
body[data-tipo] [style*="font-size:0.8"], body[data-tipo] [style*="font-size: 0.8"] { font-size: .95rem !important; }
body[data-tipo] [style*="font-size:0.9"], body[data-tipo] [style*="font-size: 0.9"] { font-size: 1rem !important; }
body[data-tipo] [style*="font-size:11px"], body[data-tipo] [style*="font-size:12px"], body[data-tipo] [style*="font-size:13px"] { font-size: .95rem !important; }
body[data-tipo] small, body[data-tipo] .small { font-size: .92rem; }

/* ---------- Teléfonos ---------- */
@media (max-width: 560px) {
  html { font-size: 106.25%; }
  .pt-s { display: block; font-size: .8rem; line-height: 1.2; }
  .pt-p { font-size: .8rem; line-height: 1.25; }
  .pt-opt { min-height: 96px; }
  .pt-k { font-size: 1.1rem; }
  .pt-title { font-size: 1.6rem; }
  .billing-toggle-container { flex-wrap: wrap; justify-content: center; }
  .billing-toggle-label { font-size: 1rem; }
  .demo-lead, .pv-lead, .pt-boost-lead { font-size: 1.05rem; }
}

/* Botones de «Ver comparativa / Ver alcance» y otros rótulos de acordeón */
summary span, .gb-collapsible-section summary span { font-size: .95rem; }

@media (max-width: 560px) {
  .billing-toggle-container { border-radius: 28px; padding: 14px 16px; row-gap: 10px; }
  .billing-toggle-label.inactive, .billing-toggle-label.active { text-align: center; }
  .billing-toggle-label .discount-pill { display: flex; justify-content: center; white-space: nowrap; margin: 6px auto 0; width: max-content; }
}

/* Teléfonos muy angostos (320 a 380 px): ninguna cuadrícula puede ser más ancha que la pantalla */
@media (max-width: 380px) {
  #planes-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .gb-dian-grid { grid-template-columns: minmax(0, 1fr); }
  .gb-dian-item, .pt-card, .pv, .pt-perk, .pt-terms-list li { min-width: 0; }
  .pt-terms, .pt-boost { padding-inline: 18px; }
}
@media (max-width: 380px) {
  .container > *, .container > * > * { min-width: 0; max-width: 100%; }
  .badge-pill { white-space: normal; max-width: 100%; text-align: center; }
}

/* ---------- Botones: .btn-secondary no tenía estilos (salía como texto suelto) ---------- */
.btn-secondary {
  color: var(--text-main, #0F172A); background: transparent; border: 2px solid currentColor;
  box-shadow: none; text-decoration: none; cursor: pointer;
}
.btn-secondary:hover { background: rgba(15, 23, 42, .07); transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary:focus-visible, .btn:focus-visible { outline: 3px solid var(--primary, #FF6B35); outline-offset: 3px; }
.hero-section .btn-secondary, .void .btn-secondary, [class*="dark"] .btn-secondary {
  color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55);
}
.hero-section .btn-secondary:hover { background: rgba(255, 255, 255, .16); }
.btn { min-height: 48px; }
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
  .gb-hero-cta, .hero-cta, .page-hero .btn-group { flex-wrap: wrap; }
  .page-hero .gb-hero-cta .btn, .hero-section .hero-actions .btn { width: 100%; }
}
/* El botón de WhatsApp flotante no tapa la hoja de módulos abierta */
body:has(.module-sheet.open) .wa-fab { opacity: 0; pointer-events: none; }

/* Botón secundario sobre fondo oscuro (cajas de llamada a la acción) */
.btn-secondary.btn-on-dark { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.btn-secondary.btn-on-dark:hover { background: rgba(255, 255, 255, .18); }
.btn { max-width: 100%; }

/* Banda «Incluido en todos los planes» y chips de usuarios */
.pt-incl-d { font-size: .98rem; }
.pt-quota span, .pt-delta { font-size: .92rem; }