/* mesh — public lists discovery (/listas/).
   Plugin owns this URL unconditionally (template_redirect). Full-bleed is on
   the fallback wrapper so it never conflicts with an Elementor overflow. */
[hidden] { display: none !important; }

/* Fallback wrapper: break out of Astra's page width when plugin renders the URL
   directly (i.e. not through Elementor). Clip variant avoids creating a scroll
   container so position:sticky children still work. */
.mesh-listas-fallback {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
}
/* Belt-and-suspenders: reset any ancestor max-width Astra might apply. */
body:has(.mesh-listas-fallback) #page,
body:has(.mesh-listas-fallback) .site-content,
body:has(.mesh-listas-fallback) .ast-container,
body:has(.mesh-listas-fallback) .entry-content {
  max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  width: 100% !important;
}
/* Prevent the cream #mlp background from bleeding into the footer.
   Astra's footer can be transparent/inherited — force a white base on
   body + page wrapper, then target every known Astra footer element. */
body:has(.mesh-listas-fallback),
html:has(.mesh-listas-fallback) {
  background-color: #fff !important;
  background-image: none !important;
}
body:has(.mesh-listas-fallback) #page {
  background-color: #fff !important;
  background-image: none !important;
}
body:has(.mesh-listas-fallback) .site-footer,
body:has(.mesh-listas-fallback) #colophon,
body:has(.mesh-listas-fallback) footer.site-footer,
body:has(.mesh-listas-fallback) footer[role="contentinfo"],
body:has(.mesh-listas-fallback) .ast-footer-overlay,
body:has(.mesh-listas-fallback) .ast-footer-bottom-area,
body:has(.mesh-listas-fallback) .footer-widget-area,
body:has(.mesh-listas-fallback) .footer-adv,
body:has(.mesh-listas-fallback) .ast-footer-row-layout-default,
body:has(.mesh-listas-fallback) .ast-footer-copyright,
body:has(.mesh-listas-fallback) .site-info {
  background-color: #fff !important;
  background-image: none !important;
  position: relative !important;
  z-index: 1 !important;
}

#mlp, #mlp * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

#mlp {
  --bk: #0a0a0a; --wh: #f5f2eb; --yl: #ffe135;
  --pu: #7c3aff; --pl: #ede9fe;
  --bd: 2px solid #0a0a0a;
  --fh: 'Barlow Condensed', sans-serif;
  --fb: 'Space Grotesk', sans-serif;
  --i3: #777;
  font-family: var(--fb);
  color: var(--bk);
  background: var(--wh);
}
#mlp button {
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  font-size: inherit !important;
  padding: 0 !important;
  border-style: solid !important;
  box-shadow: none !important;
}

/* Hero */
.mlp-hero {
  background: var(--bk);
  padding: 32px 36px 26px;
  border-bottom: var(--bd);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mlp-eyebrow {
  font-family: var(--fh);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--yl);
  margin-bottom: 8px;
  display: block;
}
.mlp-title {
  font-family: var(--fh);
  font-size: clamp(40px, 5.5vw, 68px);
  font-weight: 900; line-height: .9;
  text-transform: uppercase; letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}
.mlp-sub {
  font-size: 15px; line-height: 1.55;
  color: rgba(245,242,235,.7);
  margin: 0; max-width: 580px;
}
.mlp-explorer-cta {
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 12px 22px !important;
  background: var(--yl) !important;
  color: var(--bk) !important;
  border: var(--bd) !important;
  box-shadow: 3px 3px 0 rgba(255,225,53,.35) !important;
  font-family: var(--fh) !important;
  font-size: 14px !important; font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  align-self: flex-end; margin-bottom: 3px;
  transition: transform .1s, box-shadow .1s !important;
}
.mlp-explorer-cta:hover {
  transform: translate(-2px,-2px) !important;
  box-shadow: 5px 5px 0 rgba(255,225,53,.5) !important;
}

@media (max-width: 640px) {
  .mlp-hero { padding: 22px 18px 18px; }
  .mlp-explorer-cta { width: 100%; justify-content: center !important; align-self: stretch; }
}

/* Bar: count + sort */
.mlp-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 18px 36px;
  border-bottom: 1px solid #e0ddd8;
}
.mlp-count {
  font-family: var(--fh);
  font-size: 22px; font-weight: 800;
  letter-spacing: -.02em;
}
.mlp-count::after { content: ' listas'; font-size: 13px; color: var(--i3); font-weight: 500; letter-spacing: 0; }
.mlp-sortwrap { display: flex; align-items: center; gap: 8px; }
.mlp-sort-lbl {
  font-family: var(--fh);
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--i3);
}
.mlp-sort {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: var(--bd);
  border-radius: 0;
  padding: 8px 30px 8px 12px;
  font-family: var(--fb);
  font-size: 13px; font-weight: 600;
  color: var(--bk);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
@media (max-width: 640px) { .mlp-bar { padding: 14px 18px; } }

/* Grid */
.mlp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  padding: 24px 36px 46px;
}
.mlp-card {
  display: flex; flex-direction: column;
  text-decoration: none !important;
  color: var(--bk) !important;
  background: #fff;
  border: 1.5px solid #e4ded2;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mlp-card:hover { transform: translateY(-4px); border-color: var(--bk); box-shadow: 0 12px 0 -3px var(--pl); }

/* square, image-forward cover */
.mlp-card-cover {
  position: relative; width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--pu);
  background-size: cover; background-position: center;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 62px;
}
.mlp-card-cover-emoji { line-height: 1; }

/* mosaic cover — 2x2 grid of item thumbnails.
   place-items:stretch overrides the cover's flex align-items:center, which
   otherwise collapses the (empty) cells to 0 height → black covers. */
.mlp-mosaic { display: grid; gap: 2px; background: #14110c; place-items: stretch; }
.mlp-mosaic > span { background-size: cover; background-position: center; background-color: #e7e3da; min-width: 0; min-height: 0; }
.mlp-mosaic-2 { grid-template-columns: 1fr 1fr; }
.mlp-mosaic-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mlp-mosaic-3 > span:first-child { grid-row: span 2; }
.mlp-mosaic-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* saved-count glass pill, bottom-left of the cover */
.mlp-cover-badge {
  position: absolute; left: 10px; bottom: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(20,17,12,.86); color: var(--yl);
  font-family: var(--fh); font-weight: 700; font-size: 13px;
  padding: 4px 9px; border-radius: 999px; line-height: 1;
}
.mlp-cover-badge i { font-size: 14px; }

/* body */
.mlp-card-body { padding: 13px 15px 15px; flex: 1 1 auto; display: flex; flex-direction: column; }
.mlp-card-eyebrow {
  font-family: var(--fh); font-weight: 700; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pu);
  margin-bottom: 3px;
}
.mlp-card-name {
  font-family: var(--fh); font-weight: 800;
  font-size: 21px; line-height: 1.04; letter-spacing: -.005em;
  text-transform: uppercase; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mlp-card-desc {
  font-size: 13px; line-height: 1.45; color: var(--i3); margin: 5px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mlp-card-meta {
  display: flex; align-items: center; gap: 7px;
  margin-top: 13px; padding-top: 11px;
  border-top: 1px solid #efe9dd;
  font-size: 12px; color: var(--i3);
}
.mlp-card-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: var(--bk); color: var(--yl);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-weight: 800; font-size: 10px;
}
.mlp-card-by { font-weight: 600; color: var(--bk); text-decoration: none !important; }
.mlp-card-by:hover { color: var(--pu) !important; }
.mlp-card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--i3); display: inline-block; }
.mlp-card-ago { color: var(--i3); }
@media (max-width: 640px) { .mlp-grid { padding: 18px; gap: 14px; } }

.mlp-loading {
  grid-column: 1 / -1;
  padding: 60px 30px;
  text-align: center;
  font-size: 14px;
  color: var(--i3);
}

/* "Ver más" */
.mlp-more-wrap { padding: 14px 36px 66px; display: flex; justify-content: center; }
#mlp #mlp-more, #mlp-more.mlp-more {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  width: auto !important; height: auto !important; min-height: 0 !important;
  font-family: var(--fh) !important;
  font-size: 17px !important; font-weight: 800 !important; line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 16px 48px !important;
  background: var(--yl) !important;
  color: var(--bk) !important;
  border: var(--bd) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 var(--bk) !important;
  cursor: pointer !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
#mlp-more.mlp-more i { font-size: 19px !important; }
#mlp-more.mlp-more:hover { transform: translate(-2px, -2px) !important; box-shadow: 7px 7px 0 var(--pu) !important; background: var(--yl) !important; }
#mlp-more.mlp-more:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 var(--bk) !important; }

/* Empty */
.mlp-empty {
  padding: 80px 30px;
  text-align: center;
  color: var(--i3);
}
.mlp-empty p { font-size: 15px; margin: 0 0 20px; }

/* ── /listas/ controls (v11: search + city · vertical · sort) ──────── */
.mlp-controls {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px 36px;
  border-bottom: var(--bd);
}
.mlp-search {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px;
  background: #fff; border: var(--bd); border-radius: 0;
}
.mlp-search i { color: var(--i3); font-size: 18px; }
.mlp-search input {
  border: 0; outline: 0; background: transparent;
  font-family: var(--fb); font-size: 15px; color: var(--bk);
  height: 100%; width: 100%;
}
.mlp-search input::placeholder { color: var(--i3); }

.mlp-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mlp-filter {
  appearance: none; -webkit-appearance: none;
  /* the theme forces select{width:100%}; pin to content width so they sit in a row */
  width: auto !important; flex: 0 0 auto; min-width: 150px;
  height: 42px; box-sizing: border-box;
  background: #fff; border: var(--bd); border-radius: 0;
  padding: 0 34px 0 14px;
  font-family: var(--fb); font-size: 14px; font-weight: 600; color: var(--bk);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.mlp-filter:focus, .mlp-search:focus-within { outline: 0; box-shadow: 4px 4px 0 var(--pu); }

.mlp-clear {
  display: inline-flex; align-items: center; gap: 5px;
  height: 42px; box-sizing: border-box; padding: 0 14px;
  font-family: var(--fh); font-size: 13px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--yl); border: var(--bd); color: var(--bk); cursor: pointer;
}
.mlp-clear:hover { background: var(--bk); color: var(--yl); }
.mlp-clear i { font-size: 15px; }

/* result count pinned to the right of the filter row */
.mlp-filter-row .mlp-count {
  margin-left: auto;
  font-family: var(--fh); font-size: 20px; font-weight: 800; letter-spacing: -.02em;
}

/* per-card city/vertical chips */
.mlp-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mlp-card-chip {
  font-family: var(--fh); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--pl); color: var(--pu);
  padding: 3px 8px; border-radius: 0;
}
@media (max-width: 640px) {
  .mlp-controls { padding: 16px 18px; }
  .mlp-filter { flex: 1 1 calc(50% - 5px); }
  .mlp-filter-row .mlp-count { width: 100%; margin-left: 0; text-align: right; }
}

/* ── footer/bg bleed fix (mirrors mesh-about / explorer-profile pattern) ──
   The Elementor footer is semi-transparent, so the light page bg bled through
   and made it muddy beige. Full-bleed the page + give body the cream and the
   footer an opaque near-black so it renders clean like the other pages. */
.mesh-listas-fallback { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); overflow-x: clip; }
body:has(.mesh-listas-fallback) #page,
body:has(.mesh-listas-fallback) .site-content,
body:has(.mesh-listas-fallback) .ast-container,
body:has(.mesh-listas-fallback) .entry-content {
  max-width: none !important;
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  width: 100% !important;
}
body:has(.mesh-listas-fallback) { background-color: #f5f2eb !important; }
body:has(.mesh-listas-fallback) #colophon,
body:has(.mesh-listas-fallback) .site-footer,
body:has(.mesh-listas-fallback) .elementor-location-footer {
  background-color: #0d0d0d !important; position: relative; z-index: 1;
}