/* Mercado Pago integration page; theme colors come from each SiFactura site. */
.mp-page { color: var(--ink); }
.mp-page h1, .mp-page h2, .mp-page h3 { color: var(--ink); }
.mp-page .mp-hero { padding: 34px 0 102px; border-bottom: 1px solid var(--line); }
.mp-page .mp-hero .breadcrumbs { margin-bottom: 48px; }
.mp-hero-grid, .mp-story-grid, .mp-fiscal-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(38px, 6vw, 92px); align-items: center; }
.mp-hero-copy { max-width: 660px; }
.mp-page .mp-hero h1 { max-width: 760px; margin: 20px 0 23px; font-size: clamp(2.75rem, 4.35vw, 4.75rem); line-height: 1.08; letter-spacing: -.046em; }
.mp-page .mp-hero .hero-lead { max-width: 630px; margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.68; }
.mp-hero-copy .actions { margin-top: 32px; }
.mp-hero-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.mp-hero-tags span { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.76); color: var(--page-ink); font-size: .8rem; font-weight: 700; }
.mp-hero-visual, .mp-panel { border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 22px 65px rgba(35, 47, 89, .09); }
.mp-hero-visual { padding: 23px; }
.mp-visual-top { display: flex; align-items: center; gap: 8px; padding: 0 2px 18px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .76rem; font-weight: 700; }
.mp-visual-top > span:last-child { margin-left: auto; color: var(--page-ink); }
.mp-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3d987b; box-shadow: 0 0 0 4px #e4f4ee; }
.mp-visual-card { display: flex; align-items: center; gap: 16px; min-height: 108px; margin-top: 20px; padding: 19px; border: 1px solid var(--line); border-radius: 16px; background: var(--canvas); }
.mp-visual-icon, .mp-invoice-icon { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border-radius: 14px; background: #e9f5fa; color: #287599; font-size: .9rem; font-style: normal; font-weight: 800; letter-spacing: -.03em; }
.mp-invoice-icon { background: var(--page-soft); color: var(--page-ink); font-size: 1.5rem; }
.mp-visual-card div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-visual-card small, .mp-visual-card em { color: var(--ink-soft); font-size: .78rem; font-style: normal; }
.mp-visual-card strong { color: var(--ink); font-size: 1.08rem; }
.mp-visual-check { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; margin-left: auto; border-radius: 50%; background: #e4f4ee; color: #28795f; font-size: .8rem; font-weight: 800; }
.mp-visual-path { display: flex; align-items: center; gap: 12px; padding: 17px 8px 0; color: var(--page-ink); font-size: .73rem; font-weight: 700; text-align: center; }
.mp-visual-path span { flex: 1; height: 1px; background: var(--line); }
.mp-visual-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 21px; padding: 15px 4px 1px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .73rem; }
.mp-visual-foot span:last-child { color: var(--page-ink); font-weight: 800; }

.mp-kicker { display: inline-block; color: var(--brand-deep); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mp-intro { padding: 102px 0 92px; background: var(--canvas); text-align: center; }
.mp-intro .shell { max-width: 850px; }
.mp-intro h2, .mp-section-heading h2 { margin: 14px 0 17px; font-size: clamp(2.2rem, 3.5vw, 3.55rem); line-height: 1.12; letter-spacing: -.038em; }
.mp-intro p, .mp-section-heading p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.mp-story { padding: clamp(78px, 8vw, 120px) 0; background: var(--canvas); }
.mp-story-soft { background: var(--soft); }
.mp-story-reverse .mp-story-copy { grid-column: 2; grid-row: 1; }
.mp-story-reverse .mp-panel { grid-column: 1; grid-row: 1; }
.mp-story-copy h2 { max-width: 640px; margin: 15px 0 20px; font-size: clamp(2.1rem, 3.4vw, 3.55rem); line-height: 1.14; letter-spacing: -.038em; }
.mp-story-copy p { max-width: 610px; margin: 0; color: var(--ink-soft); font-size: 1.04rem; line-height: 1.75; }
.mp-checks { display: grid; gap: 13px; margin: 29px 0 0; padding: 0; list-style: none; }
.mp-checks li { position: relative; padding-left: 30px; color: var(--ink); font-size: .96rem; font-weight: 700; }
.mp-checks li::before { content: '✓'; position: absolute; top: 2px; left: 0; display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--page-accent); color: #fff; font-size: .68rem; }
.mp-panel { min-height: 350px; padding: 30px; }
.mp-panel-label { margin-bottom: 26px; color: var(--page-ink); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.mp-panel-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.mp-panel-row span { color: var(--ink); font-size: 1.04rem; font-weight: 800; }
.mp-panel-row strong { color: var(--page-ink); font-size: .78rem; }
.mp-panel-link { display: flex; justify-content: center; align-items: center; gap: 8px; height: 48px; }
.mp-panel-link i { width: 5px; height: 5px; border-radius: 50%; background: var(--page-accent); }
.mp-panel-status { margin-top: 25px; padding: 14px 16px; border-radius: 10px; background: var(--page-soft); color: var(--page-ink); font-size: .83rem; font-weight: 700; }
.mp-timeline-item { display: grid; grid-template-columns: 40px 1fr; gap: 15px; padding: 13px 0 20px; border-bottom: 1px solid var(--line); }
.mp-timeline-item:last-child { border-bottom: 0; }
.mp-timeline-item > span { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; background: var(--page-soft); color: var(--page-ink); font-size: .75rem; font-weight: 800; }
.mp-timeline-item div { display: flex; flex-direction: column; gap: 4px; }
.mp-timeline-item strong { color: var(--ink); }
.mp-timeline-item small { color: var(--ink-soft); font-size: .82rem; }
.mp-document-row { display: grid; grid-template-columns: 66px 1fr auto; gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.mp-document-row span { color: var(--page-ink); font-size: .78rem; font-weight: 800; }
.mp-document-row strong { color: var(--ink); font-size: .85rem; }
.mp-document-row b { padding: 6px 8px; border-radius: 6px; background: #e9f5ee; color: #347855; font-size: .71rem; }

.mp-benefits { padding: 108px 0; background: var(--canvas); }
.mp-section-heading { max-width: 800px; margin: 0 auto 45px; text-align: center; }
.mp-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.mp-benefit { min-height: 222px; padding: 25px 23px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.mp-benefit > span { color: var(--page-ink); font-size: .76rem; font-weight: 800; }
.mp-benefit h3 { margin: 30px 0 9px; font-size: 1.15rem; }
.mp-benefit p { margin: 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.65; }
.mp-fiscal { padding: 96px 0; border-block: 1px solid var(--line); background: var(--soft); }
.mp-fiscal h2 { margin: 15px 0 19px; font-size: clamp(2.05rem, 3.35vw, 3.4rem); line-height: 1.14; letter-spacing: -.035em; }
.mp-fiscal p { max-width: 650px; color: var(--ink-soft); line-height: 1.76; }
.mp-text-link { display: inline-flex; gap: 8px; margin-top: 16px; color: var(--page-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.mp-text-link:hover { color: var(--brand-deep); }
.mp-fiscal-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 145px; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 18px 44px rgba(35, 47, 89, .05); }
.mp-fiscal-flow span, .mp-fiscal-flow strong { padding: 11px 15px; border-radius: 10px; background: var(--page-soft); color: var(--page-ink); font-size: .88rem; font-weight: 800; }
.mp-fiscal-flow strong { background: #e9f5ee; color: #347855; }
.mp-fiscal-flow i { color: var(--ink-soft); font-style: normal; }
.mp-countries { padding: 100px 0; background: var(--canvas); }
.mp-country-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 15px; }
.mp-country-grid a { display: flex; flex-direction: column; gap: 9px; padding: 27px; border: 1px solid var(--line); border-radius: 17px; background: var(--page-soft); text-decoration: none; }
.mp-country-grid a:hover { border-color: var(--page-accent); background: var(--soft); }
.mp-country-grid strong { color: var(--ink); font-size: 1.25rem; }
.mp-country-grid span { color: var(--ink-soft); font-size: .86rem; }
.mp-country-grid b { margin-top: 13px; color: var(--page-ink); font-size: .85rem; }
.mp-related { padding: 101px 0; background: var(--canvas); }
.mp-faq { padding: 100px 0; }
.mp-faq .faq-layout > div:first-child > p:last-child { color: var(--ink-soft); line-height: 1.7; }
.mp-faq .faq-list details { background: #fff; }

@media (max-width: 980px) {
  .mp-hero-grid, .mp-story-grid, .mp-fiscal-grid { grid-template-columns: 1fr; gap: 44px; }
  .mp-hero-copy, .mp-story-copy { max-width: 760px; }
  .mp-hero-visual, .mp-panel { width: min(100%, 720px); margin-inline: auto; }
  .mp-story-reverse .mp-story-copy, .mp-story-reverse .mp-panel { grid-column: auto; grid-row: auto; }
  .mp-story-reverse .mp-panel { order: 2; }
  .mp-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .mp-page .mp-hero { padding: 22px 0 68px; }
  .mp-page .mp-hero .breadcrumbs { margin-bottom: 35px; }
  .mp-page .mp-hero h1 { font-size: clamp(2.35rem, 9vw, 3.4rem); }
  .mp-hero-copy .actions { display: flex; flex-direction: column; align-items: stretch; }
  .mp-hero-copy .actions .button { justify-content: center; }
  .mp-hero-visual { padding: 15px; }
  .mp-visual-top > span:last-child { display: none; }
  .mp-visual-card { padding: 14px; }
  .mp-intro, .mp-benefits, .mp-fiscal, .mp-countries, .mp-related, .mp-faq { padding: 72px 0; }
  .mp-story { padding: 70px 0; }
  .mp-panel { min-height: 0; padding: 22px; }
  .mp-benefit-grid, .mp-country-grid { grid-template-columns: 1fr; }
  .mp-benefit { min-height: 0; }
  .mp-document-row { grid-template-columns: 1fr auto; }
  .mp-document-row span { display: none; }
}