/* Obras directory — neobrutalist mesh. Scoped under .mesh-obras. */
.mesh-obras{
  --mo-cream:#F4F1E9; --mo-paper:#FFF; --mo-ink:#0E0E0E;
  --mo-violet:#6041D5; --mo-violet2:#7A54E8; --mo-violetsoft:#EDE7FF;
  --mo-yellow:#FFD400; --mo-green:#1FA463; --mo-pink:#FF4D6D;
  --mo-muted:#6B6459; --mo-line:#0E0E0E;
  --mo-disp:"Archivo Black",system-ui,sans-serif;
  --mo-cond:"Barlow Condensed",system-ui,sans-serif;
  --mo-body:"Space Grotesk",system-ui,sans-serif;
  --mo-mono:"Space Mono",ui-monospace,monospace;
  --mo-sh:5px 5px 0 var(--mo-ink); --mo-sh-sm:3px 3px 0 var(--mo-ink);
  background:var(--mo-cream); color:var(--mo-ink); font-family:var(--mo-body);
}
.mesh-obras *{box-sizing:border-box}
/* The theme drops our page into a container it caps + left-aligns; break out so
   the hero is full-bleed and the inner wrap centers on its own. */
.mesh-obras-fallback{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
.mesh-obras{width:100%;border-bottom:2.5px solid var(--mo-ink)} /* crisp end so cream doesn't bleed into the footer */
/* class selectors below set display:flex/grid, which would otherwise beat the UA
   [hidden] rule — restore it so hidden lightbox/filters/buttons stay hidden. */
.mesh-obras [hidden]{display:none!important}
.mesh-obras .mo-wrap{max-width:1240px;margin:0 auto;padding-inline:22px}

.mesh-obras .mo-hero{background:var(--mo-ink);color:#fff;border-bottom:2.5px solid var(--mo-ink);margin-bottom:0}
.mesh-obras .mo-hero .mo-wrap{padding-block:34px 40px}
.mesh-obras .mo-kicker{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:15px;color:var(--mo-yellow)}
.mesh-obras .mo-title{font-family:var(--mo-disp);font-size:clamp(46px,8vw,86px);line-height:.9;letter-spacing:-.03em;margin:10px 0 0;text-transform:uppercase;color:#fff}
.mesh-obras .mo-sub{color:#c9c4bb;font-size:16px;line-height:1.5;max-width:56ch;margin:16px 0 0}

.mesh-obras .mo-controls{padding-block:20px 0}
.mesh-obras .mo-cbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mesh-obras .mo-seg{display:inline-flex;border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);background:var(--mo-paper)}
.mesh-obras .mo-seg button{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:16px;background:transparent;border:0;padding:9px 15px;cursor:pointer;color:var(--mo-ink);display:flex;gap:6px;align-items:center}
.mesh-obras .mo-seg button+button{border-left:2.5px solid var(--mo-ink)}
.mesh-obras .mo-seg button.on{background:var(--mo-violet);color:#fff}
.mesh-obras .mo-count{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:16px;color:var(--mo-muted)}
.mesh-obras .mo-count b{color:var(--mo-ink)}
.mesh-obras .mo-sp{flex:1}
.mesh-obras .mo-selwrap{position:relative;display:inline-block}
/* line-height must be set explicitly: <select> caps its content box, and the
   inherited 24px line-height overflowed it, clipping the glyph bottoms. */
.mesh-obras .mo-selwrap select{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:15px;line-height:1.15;background:var(--mo-paper);color:var(--mo-ink);border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);padding:8px 40px 8px 14px;appearance:none;cursor:pointer;border-radius:0;min-width:172px;text-overflow:ellipsis}
.mesh-obras .mo-selwrap::after{content:"▾";position:absolute;right:12px;top:9px;pointer-events:none;font-size:13px}
/* Location picker: searchable dropdown (trigger looks like the selects). */
.mesh-obras .mo-dd{position:relative;display:inline-block}
.mesh-obras .mo-dd-trig{display:flex;align-items:center;gap:10px;font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:15px;line-height:1.15;background:var(--mo-paper);color:var(--mo-ink);border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);padding:8px 14px;cursor:pointer;border-radius:0;min-width:200px;max-width:260px;text-align:left}
.mesh-obras .mo-dd-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesh-obras .mo-dd-val.ph{opacity:.6}
.mesh-obras .mo-dd-arr{font-size:13px;flex:0 0 auto}
.mesh-obras .mo-dd-panel{display:none;position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:260px;background:var(--mo-paper);border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh)}
.mesh-obras .mo-dd.open .mo-dd-panel{display:block}
.mesh-obras .mo-dd-search{width:100%;box-sizing:border-box;font-family:var(--mo-body);font-size:14px;border:0;border-bottom:2px solid var(--mo-ink);padding:9px 12px;background:var(--mo-paper);border-radius:0;outline:none}
.mesh-obras .mo-dd-opts{max-height:280px;overflow-y:auto}
.mesh-obras .mo-dd-opt{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;font-family:var(--mo-body);font-size:14px;text-align:left;background:none;border:0;padding:8px 12px;cursor:pointer;color:var(--mo-ink)}
.mesh-obras .mo-dd-opt:hover{background:rgba(0,0,0,.06)}
.mesh-obras .mo-dd-opt.on{font-weight:700;background:rgba(0,0,0,.05)}
.mesh-obras .mo-dd-opt--country{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.03em;font-weight:700;font-size:13px}
.mesh-obras .mo-dd-opt--city{padding-left:26px}
.mesh-obras .mo-dd-n{margin-left:auto;opacity:.5;font-size:12px}
.mesh-obras .mo-filtrar{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:16px;background:var(--mo-yellow);border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);padding:9px 16px;cursor:pointer}
.mesh-obras .mo-filtrar.on{background:var(--mo-ink);color:var(--mo-yellow)}

/* Single rolling row (like the other directories), not a wrapping wall of chips. */
.mesh-obras .mo-strip{display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-block:16px 20px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mesh-obras .mo-strip::-webkit-scrollbar{height:6px}
.mesh-obras .mo-strip::-webkit-scrollbar-thumb{background:var(--mo-line);border-radius:0}
.mesh-obras .mo-chip{flex:0 0 auto;font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:15px;background:var(--mo-paper);color:var(--mo-ink);border:2.5px solid var(--mo-ink);padding:6px 13px;cursor:pointer;box-shadow:2px 2px 0 var(--mo-ink);white-space:nowrap}
.mesh-obras .mo-chip:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--mo-ink)}
.mesh-obras .mo-chip.on{background:var(--mo-yellow)}
.mesh-obras .mo-chip .mo-n{opacity:.55;font-weight:600;margin-left:5px}

.mesh-obras .mo-adv{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px;margin-top:4px;background:var(--mo-paper);border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh)}
.mesh-obras .mo-input{font-family:var(--mo-body);font-size:15px;border:2px solid var(--mo-ink);padding:9px 12px;background:var(--mo-paper);min-width:220px;flex:1;border-radius:0}
.mesh-obras .mo-sale{font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--mo-ink);border:2px solid var(--mo-ink);background:var(--mo-paper);padding:9px 14px;cursor:pointer;display:flex;gap:7px;align-items:center}
.mesh-obras .mo-sale .mo-dot{width:11px;height:11px;border:2px solid var(--mo-ink);background:var(--mo-paper)}
.mesh-obras .mo-sale.on{background:var(--mo-green);color:#fff}
.mesh-obras .mo-sale.on .mo-dot{background:#fff}
.mesh-obras .mo-clear{font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;font-size:15px;color:var(--mo-violet);background:none;border:0;cursor:pointer;text-decoration:underline}

.mesh-obras .mo-grid{display:grid;gap:18px;padding-block:22px 30px}
.mesh-obras .mo-mode-mosaico{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));grid-auto-rows:230px;grid-auto-flow:dense}
.mesh-obras .mo-mode-mosaico .mo-tile.mo-big{grid-column:span 2;grid-row:span 2}
.mesh-obras .mo-mode-mosaico .mo-tile.mo-tall{grid-row:span 2}
.mesh-obras .mo-mode-mosaico .mo-tile.mo-wide{grid-column:span 2}
/* Taller text tiles can show more of the excerpt so they don't read as empty. */
.mesh-obras .mo-mode-mosaico .mo-tile.mo-big .mo-texttile .mo-ex,
.mesh-obras .mo-mode-mosaico .mo-tile.mo-tall .mo-texttile .mo-ex{-webkit-line-clamp:6}
.mesh-obras .mo-mode-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.mesh-obras .mo-mode-feed{grid-template-columns:minmax(0,540px);justify-content:center}

.mesh-obras .mo-tile{position:relative;border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh);overflow:hidden;cursor:pointer;background:var(--mo-paper);transition:transform .14s,box-shadow .14s;display:flex;flex-direction:column}
.mesh-obras .mo-mode-mosaico .mo-tile{display:block}
.mesh-obras .mo-tile:hover{transform:translate(2px,2px);box-shadow:var(--mo-sh-sm)}
.mesh-obras .mo-media{position:relative;width:100%;background:var(--mo-cream)}
.mesh-obras .mo-mode-mosaico .mo-media{position:absolute;inset:0}
.mesh-obras .mo-mode-grid .mo-media{aspect-ratio:1/1}
.mesh-obras .mo-mode-feed .mo-media{aspect-ratio:4/5}
.mesh-obras .mo-media img{width:100%;height:100%;object-fit:cover;display:block}
.mesh-obras .mo-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--mo-muted);font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;background:var(--mo-violetsoft)}
.mesh-obras .mo-noimg i{font-size:34px}

.mesh-obras .mo-capov .mo-t{font-weight:700;font-size:15px;line-height:1.15}
.mesh-obras .mo-capov .mo-a{font-size:13.5px;margin-top:2px}
.mesh-obras .mo-capov .mo-mm{display:none;font-family:var(--mo-mono);font-size:12px;margin-top:5px}
.mesh-obras .mo-mode-feed .mo-capov .mo-mm{display:block;color:var(--mo-muted)}
.mesh-obras .mo-mode-mosaico .mo-capov{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;color:#fff;background:linear-gradient(0deg,rgba(14,14,14,.94),rgba(14,14,14,.55) 60%,transparent)}
.mesh-obras .mo-mode-mosaico .mo-capov .mo-a{color:#d9cfff}
.mesh-obras .mo-mode-grid .mo-capov,.mesh-obras .mo-mode-feed .mo-capov{position:relative;background:var(--mo-paper);color:var(--mo-ink);border-top:2.5px solid var(--mo-ink);padding:12px}
.mesh-obras .mo-mode-grid .mo-capov .mo-a,.mesh-obras .mo-mode-feed .mo-capov .mo-a{color:var(--mo-violet)}
.mesh-obras .mo-caprow{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.mesh-obras .mo-capov .mesh-inline{flex:none;display:flex;gap:6px}
/* Compact the Save/Recomendar buttons on mosaico tiles (overlaid, tight space). */
.mesh-obras .mo-mode-mosaico .mo-capov .mesh-inline-btn{width:30px!important;height:30px!important;padding:0!important;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.mesh-obras .mo-mode-mosaico .mo-capov .mesh-inline-btn i{font-size:15px}
/* Hide Share on wall tiles in every view (it lives on the single); keep Save + Recomendar. */
.mesh-obras .mo-tile .mesh-inline-share{display:none!important}
/* Save/Recomendar on the violet writing tiles: the shared control's white pill
   loses its faint (rgba black) border against violet, and its ACTIVE .is-on state
   fills violet — so a saved/recommended button vanishes into the tile. Give both
   states a solid ink-bordered chip that reads on purple; yellow = active (the mesh
   accent), so the on-state is unmistakable instead of violet-on-violet. */
.mesh-obras .mo-texttile.mo-v .mesh-inline-btn{
  border:2px solid var(--mo-ink)!important;background:#fff!important;color:var(--mo-ink)!important;
}
.mesh-obras .mo-texttile.mo-v .mesh-inline-btn:hover{
  border-color:var(--mo-ink)!important;background:var(--mo-yellow)!important;color:var(--mo-ink)!important;
}
.mesh-obras .mo-texttile.mo-v .mesh-inline-save.is-on,
.mesh-obras .mo-texttile.mo-v .mesh-inline-rec.is-on{
  background:var(--mo-yellow)!important;border-color:var(--mo-ink)!important;color:var(--mo-ink)!important;
}

.mesh-obras .mo-tag{position:absolute;font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;font-size:12.5px;letter-spacing:.03em;border:2px solid var(--mo-ink);padding:2px 8px;z-index:2}
.mesh-obras .mo-tag.mo-dest{top:10px;left:10px;background:var(--mo-violet);color:#fff}
.mesh-obras .mo-tag.mo-disc{top:10px;left:10px;background:var(--mo-paper)}
.mesh-obras .mo-tag.mo-price{top:10px;right:10px;background:var(--mo-pink);color:#fff;font-family:var(--mo-mono);font-size:12px}
.mesh-obras .mo-tag.mo-price.mo-consul{background:var(--mo-paper);color:var(--mo-ink)}
.mesh-obras .mo-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:var(--mo-yellow);border:2.5px solid var(--mo-ink);display:flex;align-items:center;justify-content:center;z-index:2}
/* Inline player: the provider iframe replaces the poster in place (single-play). */
.mesh-obras .mo-playhost{cursor:pointer}
.mesh-obras .mo-embed{position:absolute;inset:0;z-index:4;background:var(--mo-ink)}
.mesh-obras .mo-embed iframe{width:100%;border:0;display:block}
.mesh-obras .mo-playhost--video .mo-embed iframe{height:100%}
/* Audio players keep their own (short) height, centered on a dark field. */
.mesh-obras .mo-playhost--audio .mo-embed{display:flex;align-items:center;justify-content:center;padding:8px}
.mesh-obras .mo-playhost--audio .mo-embed iframe{height:auto;max-height:100%}
.mesh-obras .mo-lbimg .mo-media{position:absolute;inset:0}
.mesh-obras .mo-play::after{content:"";border-left:17px solid var(--mo-ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.mesh-obras .mo-dur{position:absolute;bottom:66px;right:10px;font-family:var(--mo-mono);font-size:12px;background:var(--mo-ink);color:#fff;padding:2px 7px;z-index:2}
.mesh-obras .mo-mode-grid .mo-dur,.mesh-obras .mo-mode-feed .mo-dur{bottom:auto;top:10px;right:10px}

.mesh-obras .mo-texttile{display:flex;flex-direction:column;padding:16px;gap:9px;height:100%}
.mesh-obras .mo-mode-mosaico .mo-texttile{position:absolute;inset:0}
.mesh-obras .mo-mode-grid .mo-texttile{min-height:270px}
/* Feed: text tiles match the media tiles' full footprint — a media tile is a 4/5
   poster (~669px at the 540 column) PLUS its ~93px caption, so 7/10 lands the
   text tile at the same ~765px height instead of the old squat 270px, and it
   scales with the column on mobile. */
.mesh-obras .mo-mode-feed .mo-texttile{aspect-ratio:7/10;min-height:520px}
.mesh-obras .mo-texttile.mo-v{background:var(--mo-violet);color:#fff}
.mesh-obras .mo-texttile.mo-y{background:var(--mo-yellow);color:var(--mo-ink)}
.mesh-obras .mo-texttile .mo-g{font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.06em;border:2px solid currentColor;align-self:flex-start;padding:2px 8px}
/* flex:0 1 auto (not flex:1): let the excerpt be its own clamped whole-line
   height instead of being stretched to a fractional height that clips the last
   line mid-glyph. margin-top:auto on .mo-tm keeps the title/artist pinned to the
   bottom of the tile. Title clamps too so a long one never squeezes the excerpt. */
.mesh-obras .mo-texttile .mo-ex{font-family:var(--mo-body);font-size:16px;line-height:1.35;font-style:italic;flex:0 1 auto;min-height:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.mesh-obras .mo-mode-mosaico .mo-texttile{padding:14px;gap:7px}
.mesh-obras .mo-mode-mosaico .mo-texttile .mo-ex{-webkit-line-clamp:2}
/* Feed has the vertical room, so let writing show a real chunk of the excerpt. */
.mesh-obras .mo-mode-feed .mo-texttile .mo-ex{-webkit-line-clamp:14}
.mesh-obras .mo-texttile .mo-tm{flex:none;margin-top:auto;font-weight:700;font-size:14px}
.mesh-obras .mo-texttile .mo-ti{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mesh-obras .mo-texttile .mo-tm small{display:block;font-weight:400;opacity:.85;font-size:12.5px}
/* Overlaid image-tile caption: clamp a long title so it can't fill the tile. */
.mesh-obras .mo-mode-mosaico .mo-capov .mo-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.mesh-obras .mo-empty{grid-column:1/-1;text-align:center;color:var(--mo-muted);padding:64px;font-family:var(--mo-cond);text-transform:uppercase;font-weight:700;font-size:18px}
.mesh-obras .mo-more-wrap{text-align:center;padding-block:8px 14px}
.mesh-obras .mo-grid{padding-bottom:14px}
.mesh-obras .mo-more{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:16px;border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh);padding:12px 24px;cursor:pointer;background:var(--mo-yellow)}
.mesh-obras .mo-more:active{transform:translate(2px,2px);box-shadow:var(--mo-sh-sm)}

/* lightbox */
.mesh-obras.mo-lb-open,.mo-lb-open{overflow:hidden}
.mesh-obras .mo-lb{position:fixed;inset:0;z-index:9999;background:rgba(14,14,14,.6);display:flex;align-items:center;justify-content:center;padding:22px}
.mesh-obras .mo-lbcard{position:relative;width:min(940px,100%);max-height:100%;overflow:auto;background:var(--mo-cream);border:3px solid var(--mo-ink);box-shadow:8px 8px 0 var(--mo-ink);display:grid;grid-template-columns:1.05fr .95fr}
.mesh-obras .mo-lbimg{position:relative;aspect-ratio:1/1;border-right:3px solid var(--mo-ink);background:var(--mo-paper)}
.mesh-obras .mo-lbimg img{width:100%;height:100%;object-fit:cover;display:block}
.mesh-obras .mo-lbinfo{padding:26px;display:flex;flex-direction:column;gap:15px;min-width:0}
.mesh-obras .mo-lbeye{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:13px;color:var(--mo-muted)}
.mesh-obras .mo-lbinfo h2{font-family:var(--mo-disp);margin:0;font-size:26px;line-height:1.04;text-transform:uppercase}
.mesh-obras .mo-lbartist{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mesh-obras .mo-av{width:44px;height:44px;border:2.5px solid var(--mo-ink);background:var(--mo-violet);color:#fff;font-family:var(--mo-disp);font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.mesh-obras .mo-av img{width:100%;height:100%;object-fit:cover;display:block}
.mesh-obras .mo-lbartist b{font-weight:700;font-size:16px}
.mesh-obras .mo-lbartist small{display:block;font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:12.5px;color:var(--mo-muted)}
/* align-items:baseline: the 13px condensed <dt> label and the 15px body <dd>
   value sit in one grid row; without it the row stretches both cells equally and
   their differing line-heights leave the label and value on visibly different
   baselines ("MEDIO" riding above "Imagen"). Baseline snaps them onto one line. */
.mesh-obras .mo-specs{border-top:2.5px solid var(--mo-ink);padding-top:14px;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:15px;margin:0;align-items:baseline}
.mesh-obras .mo-specs dt{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:13px;color:var(--mo-muted)}
.mesh-obras .mo-specs dd{margin:0}
.mesh-obras .mo-specs .mo-pr{font-family:var(--mo-mono);font-weight:700}
.mesh-obras .mo-lbcta{margin-top:auto;display:flex;gap:11px;flex-wrap:wrap;padding-top:6px}
.mesh-obras .mo-b{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:16px;border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);padding:11px 18px;cursor:pointer;background:var(--mo-paper);color:var(--mo-ink);text-decoration:none;display:inline-block}
.mesh-obras .mo-b-p{background:var(--mo-violet);color:#fff}
.mesh-obras .mo-close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;background:var(--mo-yellow);border:2.5px solid var(--mo-ink);cursor:pointer;font-size:22px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}

/* ---- obra single ---- */
.mesh-obras.mo-single{padding-block:28px 60px}
.mesh-obras .mo-single-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.mesh-obras .mo-single-media{border:3px solid var(--mo-ink);box-shadow:var(--mo-sh);background:var(--mo-paper);overflow:hidden}
.mesh-obras .mo-single-media img{width:100%;display:block}
.mesh-obras .mo-single-media iframe{width:100%;display:block;border:0;aspect-ratio:16/9}
.mesh-obras .mo-single-media .mo-noimg{aspect-ratio:1/1}
.mesh-obras .mo-single-text{padding:24px;font-size:18px;line-height:1.55}
.mesh-obras .mo-single-info{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}
.mesh-obras .mo-single-title{font-family:var(--mo-disp);font-size:clamp(28px,4vw,42px);line-height:1;letter-spacing:-.02em;margin:0;text-transform:uppercase}
.mesh-obras .mo-single-actions{display:flex;gap:10px;align-items:center}
.mesh-obras .mo-single-actions .mesh-inline{display:flex;gap:10px}
.mesh-obras .mo-single-desc{font-size:16px;line-height:1.6;border-top:2.5px solid var(--mo-ink);padding-top:16px}
.mesh-obras .mo-morerail{margin-top:44px}
.mesh-obras .mo-railtitle{font-family:var(--mo-cond);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:22px;margin:0 0 14px}
.mesh-obras .mo-railrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
.mesh-obras .mo-railcard{border:2.5px solid var(--mo-ink);box-shadow:var(--mo-sh-sm);background:var(--mo-paper);text-decoration:none;color:inherit;display:flex;flex-direction:column}
.mesh-obras .mo-railcard img,.mesh-obras .mo-railcard .mo-noimg{aspect-ratio:1/1;width:100%;object-fit:cover;display:block}
.mesh-obras .mo-railcap{padding:9px 10px;font-weight:700;font-size:14px;border-top:2.5px solid var(--mo-ink)}

@media (max-width:760px){ .mesh-obras .mo-single-grid{grid-template-columns:1fr} .mesh-obras .mo-single-info{position:static} }
@media (max-width:560px){
  .mesh-obras .mo-mode-mosaico{grid-auto-rows:220px}
  .mesh-obras .mo-lbcard{grid-template-columns:1fr}
  .mesh-obras .mo-lbimg{border-right:0;border-bottom:3px solid var(--mo-ink)}
}
/* One-column mosaico (phones): drop the 2-column spans so nothing overflows;
   keep the row spans for a little vertical rhythm. */
@media (max-width:520px){
  .mesh-obras .mo-mode-mosaico .mo-tile.mo-big,
  .mesh-obras .mo-mode-mosaico .mo-tile.mo-wide{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.mesh-obras *{transition:none!important}}