/* Mera Ecotourism Catalog — section#comp-mae0d4qo, scoped under .mera-ecotourism-catalog.
   Origen: propuesta/pages/ecoturismo.html (titulo + linea + Matrix Gallery .wmijw6). */

@font-face {
  font-family: 'wf_0239b14f25af467aa181840e5';
  src: url('../fonts/wf_0239b14f25af467aa181840e5.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;
}

.elementor-widget-mera_ecotourism_catalog,
.elementor-widget-mera_ecotourism_catalog > .elementor-widget-container {
  width: 100%;
  max-width: 100%;
}

.mera-ecotourism-catalog {
  /* Variables Wix de la Matrix Gallery (REQ-002). */
  --number-of-columns: 2;
  --spacing: 19px;
  --row-height: 366px;
  --text-align: center;
  --show-more-container-height: 25px;
  --px-spacing: calc(var(--spacing) + 1 / var(--number-of-columns) * var(--spacing));
  --pct-width: calc(1 / var(--number-of-columns) * 100%);

  /* Tokens propios del widget. */
  --mera-ecotourism-title-color: #152a42;
  --mera-ecotourism-line-color: #1fb9eb;
  --mera-ecotourism-line-width: 5px;
  --mera-ecotourism-font-bold: 'wf_0239b14f25af467aa181840e5', 'Montserrat', sans-serif;
  --mera-ecotourism-font-regular: 'helvetica-w01-roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  position: relative;
  left: 0;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  box-sizing: border-box;
}

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

/* Contenedor de malla: 3 hijos (titulo, linea, galeria). */
.mera-ecotourism-catalog__grid {
  display: grid;
  width: 100%;
  grid-template-rows: repeat(2, min-content) 1fr;
  grid-template-columns: 100%;
}

/* 1) Titulo h2 "ECOTURISMO" (comp-mae0gjqe). */
.mera-ecotourism-catalog__title-wrap {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  justify-self: start;
  align-self: start;
  width: 485px;
  margin: 33px 0 0 calc((100% - 980px) * 0.5);
}

.mera-ecotourism-catalog__title {
  margin: 0;
  color: var(--mera-ecotourism-title-color);
  font-family: var(--mera-ecotourism-font-bold);
  font-size: 33px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.01em;
}

/* 2) Linea horizontal (comp-mbuxwosm, .nJiBti): visible 5px over box 7px. */
.mera-ecotourism-catalog__line {
  position: relative;
  grid-area: 2 / 1 / 3 / 2;
  justify-self: start;
  align-self: start;
  width: 235px;
  height: 7px;
  margin: 0 0 53px calc((100% - 980px) * 0.5);
  border-top: var(--mera-ecotourism-line-width) solid var(--mera-ecotourism-line-color);
  transform-origin: center 2.5px;
}

/* 3) Matrix Gallery (comp-mbv7mc8c, .wmijw6). */
.mera-ecotourism-catalog__gallery {
  position: relative;
  grid-area: 3 / 1 / 4 / 2;
  justify-self: start;
  align-self: start;
  z-index: 0;
  width: 975px;
  margin: 0 0 0 calc((100% - 980px) * 0.5);
}

.mera-ecotourism-catalog__items {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacing) * -1);
}

.mera-ecotourism-catalog__item {
  position: relative;
  width: calc(1 / var(--number-of-columns) * 100% - var(--px-spacing));
  height: var(--row-height);
  margin-right: var(--spacing);
  margin-bottom: var(--spacing);
}

.mera-ecotourism-catalog__item:nth-child(2n) {
  margin-right: 0;
}

.mera-ecotourism-catalog__item-link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.mera-ecotourism-catalog__image-wrap {
  position: relative;
  flex-grow: 1;
}

.mera-ecotourism-catalog__image-pos,
.mera-ecotourism-catalog__image-holder {
  position: absolute;
  inset: 0;
}

.mera-ecotourism-catalog__image-box {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mera-ecotourism-catalog__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.mera-ecotourism-catalog__panel {
  position: relative;
  height: 80px;
  overflow: hidden;
}

.mera-ecotourism-catalog__panel-inner {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 20px;
  left: 0;
}

.mera-ecotourism-catalog__item-title {
  margin: 0;
  overflow: hidden;
  color: var(--mera-ecotourism-title-color);
  font-family: var(--mera-ecotourism-font-regular);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4em;
  text-align: var(--text-align);
  text-overflow: ellipsis;
  white-space: pre-line;
}

.mera-ecotourism-catalog__show-more {
  position: relative;
  height: var(--show-more-container-height);
  pointer-events: none;
}

/* Movil / tablet pequena: 1 columna, sin overflow horizontal, altura flexible. */
@media (max-width: 768px) {
  .mera-ecotourism-catalog {
    --number-of-columns: 1;
    --spacing: 12px;
    --row-height: auto;
  }

  .mera-ecotourism-catalog__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 24px 16px;
  }

  .mera-ecotourism-catalog__title-wrap,
  .mera-ecotourism-catalog__line,
  .mera-ecotourism-catalog__gallery {
    grid-area: auto;
    justify-self: auto;
    align-self: auto;
    width: 100%;
    max-width: 100%;
    margin: 0 0 18px;
  }

  .mera-ecotourism-catalog__line {
    width: 235px;
    margin-bottom: 26px;
  }

  .mera-ecotourism-catalog__gallery {
    width: 100%;
    margin: 0;
  }

  .mera-ecotourism-catalog__items {
    margin-bottom: 0;
  }

  .mera-ecotourism-catalog__item {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: var(--spacing);
  }

  .mera-ecotourism-catalog__item-link {
    position: relative;
  }

  .mera-ecotourism-catalog__image-wrap {
    width: 100%;
    aspect-ratio: 478 / 286;
  }

  .mera-ecotourism-catalog__item-title {
    font-size: 18px;
  }
}

/* Movil pequeno. */
@media (max-width: 480px) {
  .mera-ecotourism-catalog__grid {
    padding: 20px 12px;
  }

  .mera-ecotourism-catalog__title-wrap {
    margin-bottom: 14px;
  }

  .mera-ecotourism-catalog__title {
    font-size: 28px;
  }

  .mera-ecotourism-catalog__line {
    width: 180px;
    margin-bottom: 22px;
  }

  .mera-ecotourism-catalog__panel {
    height: 72px;
  }

  .mera-ecotourism-catalog__item-title {
    font-size: 16px;
  }
}