/* Mercado Pago: exported Figma measurements, with natural content flow. */
.mercadopago-page {
  --mp-frame-width: 1440px;
  --mp-light-blue: #dcf0fb;
  --mp-inline: 150px;
  --mp-section-gap: 100px;
  --mp-radius: 150px;
  --mp-blue-gradient: linear-gradient(109.69deg, #1a2c84, #019ee3);
  --mp-yellow: var(--mercado-pago-yellow-pure, #ffe700);
}
.mp-project { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: white; text-align: left; }
.mp-hero { width: 100%; position: relative; background: var(--system-background-medium); }
.mp-hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 611px;
  background: var(--mp-blue-gradient); border-radius: 0 0 var(--mp-radius) var(--mp-radius);
}
.mp-hero-inner {
  position: relative; width: 100%; max-width: var(--mp-frame-width); min-height: 770px;
  margin-inline: auto; padding: 111px var(--mp-inline) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 100px; align-items: start;
}
.mp-left { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; color: white; }
.mp-logo { width: auto; height: 48px; object-fit: contain; }
.mp-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.mp-title { display: flex; flex-direction: column; gap: 8px; margin: 0; color: white; font: 400 56px/1.2 var(--font-family-headings); letter-spacing: -.04em; }
.mp-title > span { display: block; }
.mp-hero-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mp-hero-tag { margin: 0; padding-inline: 8px; background: var(--mp-yellow); color: var(--system-text-black); font: 400 24px/1.4 var(--font-family-body); letter-spacing: .24px; }
.mp-right { margin-top: 27px; width: 540px; max-width: 100%; }
.mp-right img { display: block; width: 540px; height: 632px; max-width: 100%; object-fit: cover; object-position: center; }
.mp-overview { width: 100%; background: var(--system-background-medium); border-radius: 0 0 var(--mp-radius) var(--mp-radius); }
.mp-overview-inner {
  width: 100%; max-width: var(--mp-frame-width);
  margin-inline: auto; padding: 0 var(--mp-inline) 100px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 48px;
  background: transparent;
}
.mp-overview-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.mp-overview p, .mp-metadata dd { margin: 0; font: 400 20px/1.4 var(--font-family-body); letter-spacing: .2px; }
.mp-overview strong { font-weight: 700; }
.mp-metadata { display: grid; grid-template-columns: max-content 204px minmax(0, 1fr) 226px; gap: 88px; width: 100%; margin: 0; }
.mp-meta-item { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.mp-label { display: inline-flex; margin: 0; padding: 2px 6px; background: var(--mp-yellow); color: var(--system-text-black); font: 700 16px/1.2 var(--font-family-body); letter-spacing: .16px; }
/* Results are independent of the Contexto metadata. */
.mp-results { --mp-results-blue: #50b4e9; width: 100%; max-width: var(--mp-frame-width); margin-inline: auto; padding: 75px var(--mp-inline); display: flex; flex-direction: column; align-items: flex-start; gap: 75px; }
.mp-results-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.mp-results-heading h2 { margin: 0; padding: 4px 8px; background: var(--mp-results-blue); color: white; font: 400 32px/1 var(--font-family-headings); letter-spacing: -.05em; }
.mp-results p { margin: 0; color: var(--system-text-black); font: 400 20px/1.4 var(--font-family-body); letter-spacing: .01em; }
.mp-results strong { font-weight: 700; }
.mp-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 100px; width: 100%; margin: 0; padding: 0; list-style: none; }
.mp-result-card { display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; text-align: center; }
.mp-result-card > .case-media-link { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; flex-shrink: 0; border-radius: 250px; background: #c8e9f8; }
.mp-result-icon { display: block; width: auto; max-width: 100%; height: 53px; flex-shrink: 0; object-fit: contain; }
.mp-result-copy { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.mp-result-copy h3 { margin: 0; color: var(--mp-results-blue); font: 400 20px/1.4 var(--font-family-headings); letter-spacing: -.05em; }
.mp-results-conclusion { width: 100%; padding: 8px 24px; background: var(--mp-results-blue); }
.mp-results-conclusion p { color: white; }
.mp-gallery { border-radius: var(--mp-radius) var(--mp-radius) 0 0; background: var(--mp-light-blue); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; padding: 100px 0; margin-inline: auto; }
.mercadopago-page .related-cases { max-width: none; background: var(--mp-light-blue); padding-inline: max(var(--mp-inline), calc((100% - 1140px) / 2)); }
.mp-showcase { width: 100%; max-width: 1140px; aspect-ratio: 1140 / 700; margin: 0; overflow: hidden; }
.mp-showcase--yellow { background: linear-gradient(-71.29deg, #fffbd7, #ffe700); }
.mp-showcase--blue { background: var(--mp-blue-gradient); }
/* Full exports already include the phones and decorative circles. */
.mp-showcase img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mercadopago-page .footer-outer { max-width: var(--mp-frame-width); padding: 75px var(--mp-inline); }
.mercadopago-page .footer-row { grid-template-columns: minmax(0, 593fr) minmax(0, 497fr); gap: 50px; }
.mercadopago-page .footer-cta { font-size: 56px; }
.mercadopago-page .footer-contacts .cb-link { min-height: 56px; padding: 8px 0 8px 8px; gap: 8px; }
.mercadopago-page .footer-contacts .contact-button + .contact-button { border-top: 4px solid transparent; }
.mercadopago-page .footer-contacts .cb-icon { padding: 4px; }
.mercadopago-page .footer-contacts .cb-icon svg { width: 32px; height: 32px; }
.mercadopago-page .copyright { line-height: 1.2; letter-spacing: .16px; }
@media (max-width: 1250px) {
  .mercadopago-page { --mp-inline: 64px; }
  .mp-gallery { padding-inline: var(--mp-inline); }
  .mp-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .mp-title { font-size: clamp(32px, 4.4vw, 56px); }
  .mp-right { width: 100%; }
  .mp-right img { width: 100%; height: auto; aspect-ratio: 540 / 632; }
  .mp-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 1000px) {
  .mercadopago-page { --mp-inline: 24px; --mp-section-gap: 64px; --mp-radius: 64px; }
  .mp-hero::before { height: calc(100% - 64px); }
  .mp-hero-inner { min-height: 0; padding-top: 64px; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mp-right { width: min(100%, 540px); margin-top: 0; justify-self: center; }
  .mp-overview-inner { min-height: 0; padding-block: 0 64px; }
  .mp-gallery { padding-block: 64px; }
  .mp-results { padding-block: 64px; }
  .mp-results-grid { column-gap: 48px; }
  .mercadopago-page .footer-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mercadopago-page .footer-cta { font-size: 36px; }
  .mercadopago-page .footer-outer { padding-block: 48px; }
}
@media (max-width: 600px) {
  .mercadopago-page { --mp-inline: 20px; --mp-section-gap: 48px; --mp-radius: 48px; }
  .mp-hero-inner { padding-top: 48px; }
  .mp-title { font-size: clamp(26px, 6.5vw, 36px); }
  .mp-hero-tag { font-size: 20px; }
  .mp-overview-inner { padding-block: 0 48px; gap: 32px; }
  .mp-metadata { grid-template-columns: minmax(0, 1fr); }
  .mp-gallery { padding-block: 48px; }
  .mp-results { padding-block: 48px; }
  .mp-results-grid { grid-template-columns: minmax(0, 1fr); }
  .mp-results-heading h2 { font-size: 28px; }
}

/* One owner for the desktop transition from gallery to related projects. */
@media (min-width: 1251px) {
 .mp-gallery { padding-bottom: 0; }
 .mercadopago-page .related-cases { padding-top: 150px; }
}