/* Páginas internas (soluciones, etc.) — reusa el design system del home + pocos bits nuevos. */

.page-hero { padding-top: 92px; }
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero .ebadge { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); }

/* Banda CTA oscura (cierre de cada página interna) */
.cta-band { background: var(--bg-dark); padding: 92px 40px; text-align: center;
  position: relative; isolation: isolate; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #F0F0EE; max-width: 660px; margin: 0 auto 16px; }
.cta-band p { color: #9a9a98; max-width: 540px; margin: 0 auto 34px; font-weight: 300; font-size: 17px; line-height: 1.7; }
.cta-band .bp { margin: 0 auto; }

/* Lista de features con check (páginas de solución) */
.feat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; max-width: 900px; }
.feat-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text-muted);
  line-height: 1.55; font-weight: 300; }
.feat-check { color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* Franja de proof (número duro grande) */
.proofline { display: flex; flex-wrap: wrap; gap: 40px; align-items: baseline; margin-top: 8px; }
.proofline .pl-num { font-family: var(--fd); font-size: clamp(30px, 4vw, 44px); font-weight: 600;
  letter-spacing: -.02em; color: var(--text); }
.proofline .pl-lbl { font-size: 14px; color: var(--text-muted); font-weight: 300; }

/* ---- Pricing: tabla de 3 tiers + à la carte ---- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 30px 26px 28px;
  background: var(--bg); display: flex; flex-direction: column; }
.price-card.popular { border-color: var(--accent); box-shadow: 0 12px 40px rgba(21,71,232,.10); position: relative; }
.price-badge { position: absolute; top: -11px; left: 26px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 4px 12px; border-radius: 20px; }
.price-name { font-family: var(--fd); font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.price-for { font-size: 13px; color: var(--text-muted); font-weight: 300; margin: 4px 0 20px; min-height: 34px; }
.price-amt { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-from { font-size: 13px; color: var(--text-faint); }
.price-num { font-family: var(--fd); font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.price-per { font-size: 13px; color: var(--text-muted); }
.price-save { font-size: 12px; color: var(--green); font-weight: 500; margin-bottom: 20px; min-height: 18px; }
.price-feat { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 26px; flex: 1; }
.price-feat li { font-size: 14px; color: var(--text-muted); display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; font-weight: 300; }
.price-feat li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.price-cta { display: block; text-align: center; padding: 12px; border-radius: var(--r);
  font-family: var(--fb); font-size: 14px; font-weight: 500; text-decoration: none; transition: all .2s; }
.price-cta.primary { background: var(--accent); color: #fff; }
.price-cta.primary:hover { background: var(--accent-hover); }
.price-cta.ghost { border: 1px solid var(--border); color: var(--text); }
.price-cta.ghost:hover { border-color: var(--text-muted); background: var(--bg-alt); }
.price-note { font-size: 13px; color: var(--text-faint); margin-top: 18px; }

.alc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; }
.alc-row { background: var(--bg); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.alc-l .alc-t { font-family: var(--fd); font-size: 16px; font-weight: 600; color: var(--text); }
.alc-l .alc-d { font-size: 13px; color: var(--text-muted); font-weight: 300; }
.alc-p { font-family: var(--fd); font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
.alc-p small { font-size: 12px; color: var(--text-faint); font-weight: 400; font-family: var(--fb); }
.alc-soon .alc-p { color: var(--text-faint); }

@media (max-width: 768px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-for, .price-save { min-height: 0; }
  .alc-grid { grid-template-columns: 1fr; }
}

/* ---- Comparativas: tabla vs + concesión honesta + hub ---- */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--rl); background: var(--bg); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
table.cmp th, table.cmp td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cmp thead th { background: var(--bg-alt); font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); }
table.cmp thead th.us { color: var(--accent); }
table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp td.cap { font-size: 14px; color: var(--text); font-weight: 500; width: 34%; }
table.cmp td.val { font-size: 14px; color: var(--text-muted); font-weight: 300; }
table.cmp td.val .mark { font-weight: 700; margin-right: 7px; }
table.cmp td.val .yes { color: var(--green); }
table.cmp td.val .no { color: #C05353; }
table.cmp td.val .partial { color: #B98900; }
table.cmp td.us { background: rgba(21,71,232,.035); }
.cmp-asof { font-size: 12px; color: var(--text-faint); margin-top: 12px; }

.cmp-concede { border: 1px solid var(--border); border-left: 3px solid var(--text-faint);
  border-radius: var(--r); padding: 24px 28px; background: var(--bg-alt); }
.cmp-concede h3 { margin-bottom: 10px; }
.cmp-concede ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cmp-concede li { font-size: 14px; color: var(--text-muted); font-weight: 300; line-height: 1.6;
  display: flex; gap: 10px; }
.cmp-concede li::before { content: '→'; color: var(--text-faint); flex-shrink: 0; }

.cmp-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cmp-hub-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 24px 26px;
  background: var(--bg); text-decoration: none; display: block; transition: border-color .2s, box-shadow .2s, transform .2s; }
.cmp-hub-card:hover { border-color: var(--text-faint); box-shadow: 0 6px 24px rgba(0,0,0,.05); }
.cmp-hub-t { font-family: var(--fd); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -.02em; margin-bottom: 6px; }
.cmp-hub-d { font-size: 14px; color: var(--text-muted); font-weight: 300; line-height: 1.6; }

@media (max-width: 768px) {
  .cmp-hub { grid-template-columns: 1fr; }
  table.cmp th, table.cmp td { padding: 12px 14px; }
}

/* ---- Footer con columnas (superficie de navegación) ---- */
.site-footer { border-top: 1px solid var(--border); background: var(--bg-alt); }
.foot-grid { max-width: 1000px; margin: 0 auto; padding: 60px 40px 40px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand .nl { margin-bottom: 14px; }
.foot-tag { font-size: 14px; color: var(--text-muted); font-weight: 300; line-height: 1.6; max-width: 280px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-h { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px; }
.foot-col a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color .18s; }
.foot-col a:hover { color: var(--text); }
.foot-col a.foot-cta { color: var(--accent); font-weight: 500; }
.foot-bottom { max-width: 1000px; margin: 0 auto; padding: 22px 40px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; }
.foot-bottom .fbrand { font-family: var(--fd); font-size: 14px; font-weight: 600; color: var(--text); }
.foot-bottom .fcopy { font-size: 13px; color: var(--text-faint); }

@media (max-width: 768px) {
  .cta-band { padding: 64px 20px; }
  .feat { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 44px 20px 28px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; gap: 12px; text-align: center; padding: 20px; }
}