/* Mera Services — scoped under .mera-services.
   Origen: section#comp-ma8cr2dv de propuesta/pages/index.html. */

@font-face {
  font-family: 'wf_0239b14f25af467aa181840e5';
  src: url('../fonts/wf_0239b14f25af467aa181840e5.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'wf_502089972cef477d8b4cd23d0';
  src: url('../fonts/wf_502089972cef477d8b4cd23d0.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'wf_7278fe540adc48839463fa96f';
  src: url('../fonts/wf_7278fe540adc48839463fa96f.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'wf_742595b112bf4ba6835bf037f';
  src: url('../fonts/wf_742595b112bf4ba6835bf037f.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'helvetica-w01-roman';
  src: url('../fonts/helvetica-w01-roman.woff2') format('woff2');
  font-display: swap;
}

.mera-services {
  --mera-services-bg: #fff;
  --mera-services-accent: #1fb9eb;
  --mera-services-navy: #152a42;
  --mera-services-card-bg: rgba(255, 255, 255, 0.3);
  --mera-services-card-shadow: 2.58px 4.28px 12px 2px rgba(0, 0, 0, 0.6);
  --mera-services-font-medium: 'wf_502089972cef477d8b4cd23d0', 'Montserrat', sans-serif;
  --mera-services-font-title: 'wf_7278fe540adc48839463fa96f', 'Helvetica Neue', sans-serif;
  --mera-services-font-bold: 'wf_0239b14f25af467aa181840e5', 'Montserrat', sans-serif;
  --mera-services-font-body: 'wf_742595b112bf4ba6835bf037f', 'Montserrat', sans-serif;
  --mera-services-font-button: 'helvetica-w01-roman', Helvetica, sans-serif;
  position: relative;
  left: 0;
  width: 100%;
  min-width: 980px;
  margin-left: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--mera-services-bg);
}

.mera-services *,
.mera-services *::before,
.mera-services *::after {
  box-sizing: border-box;
}

.mera-services__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mera-services__color-underlay {
  position: absolute;
  inset: 0;
  background: var(--mera-services-bg);
}

.mera-services__bg-media {
  display: none;
}

.mera-services__inline-content,
.mera-services__grid {
  position: relative;
  width: 100%;
}

.mera-services__grid {
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(4, min-content) 1fr;
  grid-template-columns: 100%;
}

/* Wix wedge: reserves 519px across rows 1–4, so the CTA starts at y=519px. */
.mera-services__grid::after {
  content: '';
  visibility: hidden;
  width: 0;
  height: 519px;
  grid-area: 1 / 1 / 5 / 2;
}

.mera-services__eyebrow-wrap {
  position: relative;
  width: 915px;
  margin: 37px 0 0 calc((100% - 980px) * 0.5);
  left: 32px;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  align-self: start;
}

.mera-services__eyebrow {
  margin: 0;
  color: var(--mera-services-accent);
  font-family: var(--mera-services-font-medium);
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.15em;
  text-align: center;
}

.mera-services__title-wrap {
  position: relative;
  width: 654px;
  margin: 0 0 45px calc((100% - 980px) * 0.5);
  left: 162px;
  grid-area: 2 / 1 / 3 / 2;
  justify-self: start;
  align-self: start;
}

.mera-services__title {
  margin: 0;
  color: var(--mera-services-navy);
  font-family: var(--mera-services-font-title);
  font-size: 42px;
  font-weight: 400;
  line-height: 0.9em;
}

.mera-services__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 220px);
  column-gap: 25px;
  width: 980px;
  margin: 0 0 10px calc((100% - 980px) * 0.5);
  padding-left: 8px;
  grid-area: 3 / 1 / 4 / 2;
  justify-self: start;
  align-self: start;
}

.mera-services__card {
  position: relative;
  width: 220px;
  min-height: 294px;
  padding: 0 27px;
  isolation: isolate;
}

.mera-services__card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0 solid rgb(50, 65, 88);
  border-radius: 30px;
  background-color: var(--mera-services-card-bg);
  box-shadow: var(--mera-services-card-shadow);
}

.mera-services__card-content {
  display: flex;
  min-height: 294px;
  flex-direction: column;
  align-items: center;
}

.mera-services__image-wrap,
.mera-services__image-wrap .apPOZK {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mera-services__image-wrap {
  height: 166px;
  flex: 0 0 166px;
}

.mera-services__image {
  display: block;
  width: auto;
  max-width: 233px;
  height: auto;
  max-height: 201px;
  object-fit: cover;
}

.mera-services__card--1 .mera-services__image { width: 194px; height: 201px; }
.mera-services__card--2 .mera-services__image { width: 169px; height: 168px; }
.mera-services__card--3 .mera-services__image { width: 233px; height: 233px; }
.mera-services__card--4 .mera-services__image { width: 150px; height: 146px; }

.mera-services__card--1 .mera-services__image-wrap { margin-top: -12px; }
.mera-services__card--2 .mera-services__image-wrap { margin-top: 4px; margin-bottom: -18px; }
.mera-services__card--3 .mera-services__image-wrap { margin-top: -23px; margin-bottom: 11px; }
.mera-services__card--4 .mera-services__image-wrap { margin-top: 15px; margin-bottom: -7px; }

.mera-services__card-title-wrap,
.mera-services__card-description-wrap {
  width: 162px;
}

.mera-services__card-title {
  margin: 0 0 7px;
  color: var(--mera-services-accent);
  font-family: var(--mera-services-font-bold);
  font-size: 14px;
  font-weight: 400;
  line-height: 0.9em;
  text-align: center;
}

.mera-services__card-description {
  margin: 0;
  color: var(--mera-services-navy);
  font-family: var(--mera-services-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 0.9em;
  text-align: center;
}

.mera-services__button-wrap {
  position: relative;
  width: 343px;
  height: 45px;
  margin: 64px 0 0 calc((100% - 980px) * 0.5);
  left: 318px;
  grid-area: 5 / 1 / 6 / 2;
  justify-self: start;
  align-self: start;
}

.mera-services__button {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: var(--mera-services-accent);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.mera-services__button-label {
  position: relative;
  margin: 0;
  color: inherit;
  font-family: var(--mera-services-font-button);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4em;
  white-space: nowrap;
}

.mera-services__button:hover,
.mera-services__button:focus-visible {
  border-color: var(--mera-services-navy);
  background-color: transparent;
  color: var(--mera-services-navy);
  outline: none;
}

@media (max-width: 1023px) {
  .mera-services {
    min-width: 0;
  }

  .mera-services__grid {
    display: block;
    min-height: 0;
    padding: 48px 24px;
  }

  .mera-services__grid::after {
    display: none;
  }

  .mera-services__eyebrow-wrap,
  .mera-services__title-wrap,
  .mera-services__cards,
  .mera-services__button-wrap {
    left: 0;
    width: 100%;
    margin-left: 0;
  }

  .mera-services__eyebrow-wrap { margin-top: 0; }
  .mera-services__title-wrap { margin: 12px 0 40px; text-align: center; }

  .mera-services__cards {
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: center;
    gap: 32px;
    padding-left: 0;
  }

  .mera-services__button-wrap {
    max-width: 343px;
    margin: 38px auto 0;
  }
}

@media (max-width: 600px) {
  .mera-services__grid { padding: 40px 16px; }
  .mera-services__eyebrow { font-size: 16px; }
  .mera-services__title { font-size: 36px; line-height: 0.95em; text-align: center; }

  .mera-services__cards {
    grid-template-columns: minmax(0, 220px);
  }

  .mera-services__button-wrap { height: auto; }
  .mera-services__button { position: relative; min-height: 45px; padding: 8px 12px; }
  .mera-services__button-label { font-size: 17px; white-space: normal; text-align: center; }
}