/* =========================================================
   MO VÁSQUEZ — CSS EDITORIAL V2
   Diseñado para el maquetado actual del tema Mo Vásquez.
   No cambia HTML, orden de imágenes ni bloques.
   ========================================================= */

:root{
  --mv-paper:#f5f4f0;
  --mv-paper-2:#efeee9;
  --mv-white:#fff;
  --mv-ink:#121212;
  --mv-text:#2f2f2c;
  --mv-muted:#77766f;
  --mv-line:rgba(18,18,18,.14);
  --mv-line-strong:rgba(18,18,18,.28);
  --mv-max:1480px;
  --mv-pad:clamp(22px,4.8vw,82px);
  --mv-radius:2px;
  --mv-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET / WORDPRESS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{
  margin:0!important;
  background:var(--mv-paper)!important;
  color:var(--mv-ink)!important;
  font-family:'Jost',Arial,sans-serif!important;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,textarea,select{font-family:'Jost',Arial,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
main{overflow:clip}
#inicio,#murales,#proyectos,#exhibiciones,#cianotipia,#contacto{scroll-margin-top:108px}

.shell{
  width:min(100%,var(--mv-max));
  margin-inline:auto;
  padding-inline:var(--mv-pad);
}

/* ---------- HEADER / NAVBAR ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(245,244,240,.86);
  border-bottom:1px solid var(--mv-line);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.site-header:hover{
  background:rgba(245,244,240,.96);
  box-shadow:0 14px 40px rgba(0,0,0,.035);
}
.nav-wrap{
  width:min(100%,var(--mv-max));
  margin:auto;
  min-height:94px;
  padding:0 var(--mv-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}
.brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:clamp(30px,2.55vw,45px);
  line-height:1;
  font-weight:300;
  letter-spacing:-.055em;
  white-space:nowrap;
}
.brand::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-9px;
  width:26px;
  height:1px;
  background:var(--mv-ink);
  transition:width .45s var(--mv-ease);
}
.brand:hover::after{width:100%}
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(20px,2.1vw,36px);
}
.nav a{
  position:relative;
  display:block;
  padding:14px 0;
  font-size:14px;
  font-weight:400;
  letter-spacing:.055em;
  color:#373733;
  transition:color .25s ease,transform .25s ease;
}
.nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:8px;
  width:100%;
  height:1px;
  background:var(--mv-ink);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .38s var(--mv-ease);
}
.nav a:hover,.nav a.active{color:#000}
.nav a:hover{transform:translateY(-1px)}
.nav a:hover::after,.nav a.active::after{
  transform:scaleX(1);
  transform-origin:left center;
}
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  padding:12px 0 12px 14px;
  cursor:pointer;
}
.menu-btn span{
  display:block;
  width:28px;
  height:1px;
  margin:6px 0;
  background:var(--mv-ink);
  transition:transform .35s ease,opacity .35s ease;
}
body.admin-bar .site-header{top:32px}

/* ---------- HERO ---------- */
.hero{
  min-height:calc(100svh - 94px);
  display:grid;
  grid-template-columns:minmax(310px,.78fr) minmax(0,1.58fr);
  align-items:center;
  gap:clamp(36px,6vw,104px);
  padding-top:clamp(62px,7vw,110px);
  padding-bottom:clamp(76px,9vw,145px);
}
.hero-copy{max-width:540px}
.kicker,.eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--mv-muted);
}
.hero h1{
  margin:24px 0 34px;
  font-size:clamp(76px,9.3vw,164px);
  line-height:.80;
  font-weight:300;
  letter-spacing:-.072em;
}
.hero-copy p{
  max-width:500px;
  margin:0;
  font-size:clamp(18px,1.42vw,23px);
  line-height:1.62;
  color:#44443f;
}
.hero-links{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  margin-top:42px;
}
.text-link{
  position:relative;
  padding:0 0 7px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.text-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:currentColor;
  transform-origin:left;
  transition:transform .3s ease;
}
.text-link:hover::after{transform:scaleX(.45)}
.hero-grid{
  min-height:620px;
  height:min(72vh,800px);
  display:grid;
  grid-template-columns:1.12fr .88fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
}
.hero-grid figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:var(--mv-paper-2);
}
.hero-grid figure:first-child{grid-row:1/3}
.hero-grid figure:nth-child(4){display:none}
.hero-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .9s var(--mv-ease),filter .7s ease;
}
.hero-grid figure:hover img{transform:scale(1.025);filter:saturate(1.04)}

/* ---------- SECCIONES / TITULOS ---------- */
.section{
  position:relative;
  padding:clamp(96px,10vw,172px) 0;
  border-top:1px solid var(--mv-line);
}
.section::before{
  content:'';
  position:absolute;
  top:-1px;
  left:var(--mv-pad);
  width:54px;
  height:1px;
  background:var(--mv-ink);
}
.section-head{
  display:grid;
  grid-template-columns:minmax(140px,.38fr) minmax(0,1.62fr);
  gap:clamp(26px,4vw,70px);
  align-items:end;
  margin-bottom:clamp(54px,6.5vw,96px);
}
.section-head>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);
  align-items:end;
  gap:50px;
}
.section-head h2{
  margin:0;
  font-size:clamp(64px,7.2vw,116px);
  line-height:.88;
  font-weight:300;
  letter-spacing:-.062em;
}
.section-head p{
  max-width:480px;
  margin:0 0 5px auto;
  font-size:17px;
  line-height:1.65;
  color:#595952;
}

/* ---------- MURALES: GALERIA EDITORIAL ---------- */
.mural-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:row;
  gap:12px;
}
.art-card,.project-main,.thumb,.ex-main,.ex-thumb{
  position:relative;
  padding:0!important;
  margin:0;
  border:0!important;
  border-radius:0;
  background:var(--mv-paper-2)!important;
  cursor:zoom-in;
  overflow:hidden;
}
.art-card{
  grid-column:span 3;
  aspect-ratio:4/3;
}
/* ritmo editorial: algunas obras ganan protagonismo */
.art-card:nth-child(1),
.art-card:nth-child(10),
.art-card:nth-child(21),
.art-card:nth-child(32){
  grid-column:span 6;
  grid-row:span 2;
  aspect-ratio:16/10;
}
.art-card:nth-child(6),
.art-card:nth-child(16),
.art-card:nth-child(27),
.art-card:nth-child(37){
  grid-column:span 4;
  aspect-ratio:1/1;
}
.art-card:nth-child(7),
.art-card:nth-child(17),
.art-card:nth-child(28),
.art-card:nth-child(38){grid-column:span 2;aspect-ratio:3/4}
.art-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--mv-ease),filter .5s ease;
}
.art-card::after,.thumb::after,.ex-thumb::after,.project-main::after,.ex-main::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,0);
  pointer-events:none;
  transition:border-color .35s ease,background .35s ease;
}
.art-card:hover::after,.thumb:hover::after,.ex-thumb:hover::after,.project-main:hover::after,.ex-main:hover::after{
  border-color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.025);
}
.art-card:hover .art-img{transform:scale(1.028);filter:saturate(1.05) contrast(1.01)}
.mural-card.is-hidden{display:none!important}
.more-wrap{display:flex;justify-content:center;margin-top:52px}
.outline-btn{
  min-width:160px;
  padding:15px 28px;
  border:1px solid var(--mv-ink)!important;
  background:transparent!important;
  color:var(--mv-ink)!important;
  font-size:11px;
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.outline-btn:hover{background:var(--mv-ink)!important;color:#fff!important;transform:translateY(-2px)}

/* ---------- PROYECTOS ---------- */
.project-block{
  padding:clamp(68px,7.5vw,112px) 0;
  border-top:1px solid var(--mv-line);
}
.project-block:first-of-type{padding-top:0;border-top:0}
.project-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:40px;
  margin-bottom:34px;
}
.project-head h3,.exhibition-copy h3{
  margin:13px 0 0;
  font-size:clamp(42px,4.5vw,72px);
  line-height:.92;
  font-weight:300;
  letter-spacing:-.052em;
}
.project-head p,.exhibition-copy p{
  margin:0 0 5px;
  font-size:13px;
  font-weight:400;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--mv-muted);
}
.project-layout{
  display:grid;
  grid-template-columns:minmax(0,1.26fr) minmax(320px,.74fr);
  gap:14px;
  align-items:start;
}
.project-layout.reverse{grid-template-columns:minmax(320px,.74fr) minmax(0,1.26fr)}
.project-layout.reverse .project-main{order:2}
.project-layout.reverse .thumb-grid{order:1}
.project-main{aspect-ratio:16/11}
.project-main-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--mv-ease);
}
.project-main:hover .project-main-img{transform:scale(1.02)}
.thumb-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;
  gap:10px;
}
.thumb{aspect-ratio:4/3}
.thumb:nth-child(5n+1){grid-column:span 2;aspect-ratio:16/8}
.thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s var(--mv-ease),filter .45s ease;
}
.thumb:hover .thumb-img{transform:scale(1.03);filter:saturate(1.04)}

/* ---------- EXHIBICIONES ---------- */
.exhibition-block{
  display:grid;
  grid-template-columns:minmax(220px,.34fr) minmax(0,1.66fr);
  gap:clamp(40px,6vw,96px);
  padding:clamp(70px,7.5vw,116px) 0;
  border-top:1px solid var(--mv-line);
  align-items:start;
}
.exhibition-block:first-of-type{padding-top:0;border-top:0}
.exhibition-copy{position:sticky;top:132px;padding-top:4px}
.exhibition-copy h3{font-size:clamp(44px,4.9vw,78px)}
.exhibition-media{
  display:grid;
  grid-template-columns:minmax(290px,.82fr) minmax(0,1.18fr);
  gap:14px;
}
.ex-main{aspect-ratio:4/5}
.ex-main-img{width:100%;height:100%;object-fit:cover;transition:transform .75s var(--mv-ease)}
.ex-main:hover .ex-main-img{transform:scale(1.018)}
.ex-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
  gap:10px;
}
.ex-thumb{aspect-ratio:1/1}
.ex-thumb:nth-child(7n+1){grid-column:span 2;aspect-ratio:2/1}
.ex-thumb-img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--mv-ease)}
.ex-thumb:hover .ex-thumb-img{transform:scale(1.03)}

/* ---------- CIANOTIPIA ---------- */
.cyanotype{
  min-height:62vh;
  background:linear-gradient(180deg,var(--mv-paper) 0%,#f1f3f4 100%);
}
.cyanotype .section-head h2{color:#163e72}
.cyanotype-line{
  position:relative;
  width:100%;
  height:1px;
  margin-top:14vh;
  background:linear-gradient(90deg,#163e72 0 14%,rgba(22,62,114,.2) 14% 100%);
}
.cyanotype-line::after{
  content:'PRÓXIMAMENTE';
  position:absolute;
  right:0;
  top:16px;
  font-size:10px;
  letter-spacing:.24em;
  color:#163e72;
}

/* ---------- CONTACTO ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);
  gap:clamp(52px,7vw,112px);
  align-items:start;
}
.contact-photo{aspect-ratio:4/3;overflow:hidden;background:var(--mv-paper-2)}
.contact-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--mv-ease)}
.contact-photo:hover img{transform:scale(1.018)}
.contact-info{padding-top:8px}
.contact-info h3{
  margin:34px 0 18px;
  font-size:clamp(38px,4vw,62px);
  line-height:.95;
  font-weight:300;
  letter-spacing:-.048em;
}
.contact-info p{margin:0;font-size:16px;line-height:1.85;color:#565650}
.contact-form{
  padding:clamp(30px,3vw,46px);
  border:1px solid var(--mv-line);
  background:rgba(255,255,255,.28);
}
.contact-form h3{
  margin:0 0 40px;
  max-width:680px;
  font-size:clamp(44px,4.5vw,70px);
  line-height:.96;
  font-weight:300;
  letter-spacing:-.052em;
}
.field{margin-bottom:24px}
.field label,
.contact-form label{
  display:block;
  margin-bottom:9px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#585852;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border:0!important;
  border-bottom:1px solid #aaa89f!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:12px 2px 13px!important;
  color:var(--mv-ink)!important;
  font-size:17px!important;
  transition:border-color .25s ease,padding-left .25s ease;
}
.contact-form input:focus,.contact-form textarea:focus{
  border-bottom-color:var(--mv-ink)!important;
  padding-left:8px!important;
}
.contact-form textarea{min-height:170px;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#99978f;opacity:1}
.send{
  width:100%;
  margin-top:8px;
  padding:16px 24px!important;
  border:1px solid var(--mv-ink)!important;
  border-radius:0!important;
  background:var(--mv-ink)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.send:hover{background:transparent!important;color:var(--mv-ink)!important;transform:translateY(-2px)}

/* ---------- FOOTER ---------- */
footer{
  position:relative;
  padding:72px 0 42px;
  border-top:1px solid var(--mv-line);
  background:#111;
  color:#f7f6f2;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:40px;
  align-items:end;
}
.footer-brand{
  max-width:760px;
  font-size:clamp(56px,8vw,126px);
  line-height:.80;
  font-weight:300;
  letter-spacing:-.07em;
}
.footer-links{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:12px 26px;
}
.footer-links a{
  position:relative;
  padding-bottom:5px;
  font-size:13px;
  color:#deddd7;
}
.footer-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--mv-ease);
}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
.copyright{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:60px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#918f88;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:5vw;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(8px);
}
.lightbox.open{display:flex}
.lightbox img{width:auto;max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.lightbox-close{
  position:absolute;
  top:24px;
  right:32px;
  padding:0;
  border:0;
  background:none;
  color:#fff;
  font-size:42px;
  font-weight:200;
  line-height:1;
  cursor:pointer;
}

/* ---------- ANIMACION ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--mv-ease),transform .8s var(--mv-ease)}
.reveal.visible{opacity:1;transform:none}

/* ---------- TABLET ---------- */
@media(max-width:1100px){
  .nav-wrap{min-height:84px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:72px}
  .hero-copy{max-width:760px}
  .hero h1{font-size:clamp(76px,14vw,132px)}
  .hero-grid{height:62vh;min-height:520px}
  .section-head{grid-template-columns:1fr}
  .section-head>div{grid-template-columns:1fr;gap:22px}
  .section-head p{margin-left:0}
  .mural-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .art-card{grid-column:span 2}
  .art-card:nth-child(1),.art-card:nth-child(10),.art-card:nth-child(21),.art-card:nth-child(32){grid-column:span 4}
  .art-card:nth-child(6),.art-card:nth-child(16),.art-card:nth-child(27),.art-card:nth-child(37){grid-column:span 3}
  .art-card:nth-child(7),.art-card:nth-child(17),.art-card:nth-child(28),.art-card:nth-child(38){grid-column:span 3;aspect-ratio:4/3}
  .project-layout,.project-layout.reverse{grid-template-columns:1fr}
  .project-layout.reverse .project-main,.project-layout.reverse .thumb-grid{order:initial}
  .exhibition-block{grid-template-columns:1fr;gap:32px}
  .exhibition-copy{position:static}
  .contact-grid{grid-template-columns:1fr 1fr;gap:34px}
}

/* ---------- MOBILE ---------- */
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:760px){
  :root{--mv-pad:20px}
  html{scroll-padding-top:86px}
  #inicio,#murales,#proyectos,#exhibiciones,#cianotipia,#contacto{scroll-margin-top:86px}
  .nav-wrap{min-height:74px;gap:20px}
  .brand{font-size:30px}
  .menu-btn{display:block}
  .nav{
    position:fixed;
    top:74px;
    left:0;
    right:0;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:20px var(--mv-pad) 28px;
    background:rgba(245,244,240,.98);
    border-bottom:1px solid var(--mv-line);
    transform:translateY(-130%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s var(--mv-ease),opacity .3s ease;
  }
  body.admin-bar .nav{top:120px}
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{width:100%;padding:13px 0;font-size:16px}
  .hero{padding-top:56px;padding-bottom:86px;gap:46px}
  .hero h1{font-size:clamp(68px,20vw,110px);margin-bottom:28px}
  .hero-copy p{font-size:18px}
  .hero-grid{height:auto;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:8px}
  .hero-grid figure{aspect-ratio:1/1}
  .hero-grid figure:first-child{grid-column:1/3;grid-row:auto;aspect-ratio:16/11}
  .hero-grid figure:nth-child(4){display:block}
  .section{padding:84px 0}
  .section::before{left:var(--mv-pad);width:36px}
  .section-head{margin-bottom:46px;gap:18px}
  .section-head h2{font-size:clamp(56px,17vw,82px)}
  .section-head p{font-size:16px}
  .mural-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .art-card,.art-card:nth-child(n){grid-column:span 1;grid-row:auto;aspect-ratio:4/3}
  .art-card:nth-child(1),.art-card:nth-child(8),.art-card:nth-child(15),.art-card:nth-child(22),.art-card:nth-child(29),.art-card:nth-child(36){grid-column:1/3;aspect-ratio:16/10}
  .project-block{padding:64px 0}
  .project-head{grid-template-columns:1fr;gap:14px;margin-bottom:24px}
  .project-head h3,.exhibition-copy h3{font-size:clamp(40px,12vw,60px)}
  .project-main{aspect-ratio:4/3}
  .thumb-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .thumb:nth-child(n){grid-column:span 1;aspect-ratio:4/3}
  .thumb:nth-child(5n+1){grid-column:1/3;aspect-ratio:16/9}
  .exhibition-block{padding:64px 0}
  .exhibition-media{grid-template-columns:1fr;gap:8px}
  .ex-main{aspect-ratio:4/3}
  .ex-grid{grid-template-columns:repeat(2,1fr);gap:7px}
  .ex-thumb:nth-child(n){grid-column:span 1;aspect-ratio:1/1}
  .ex-thumb:nth-child(5n+1){grid-column:1/3;aspect-ratio:16/8}
  .cyanotype{min-height:50vh}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .contact-form{padding:26px 20px}
  .contact-form h3{font-size:clamp(40px,12vw,58px)}
  footer{padding-top:60px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-links{justify-content:flex-start}
  .copyright{flex-direction:column;margin-top:44px}
}

/* ---------- ACCESIBILIDAD ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* =========================================================
   V3 — AJUSTES DE CONSISTENCIA SIN CAMBIAR LA ORGANIZACIÓN
   ========================================================= */

/* Evita saltos visuales y mantiene proporciones estables */
button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.art-card, .project-main, .thumb, .ex-main, .ex-thumb { appearance:none; -webkit-appearance:none; }
.site-header, footer { width:100%; }

/* El menú se pliega antes de quedarse sin espacio */
@media (max-width:1180px){
  .nav-wrap{min-height:82px;}
  .menu-btn{display:block;}
  .nav{
    position:fixed;
    top:82px;
    left:0;
    right:0;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:24px var(--mv-pad) 32px;
    background:rgba(245,244,240,.98);
    border-bottom:1px solid var(--mv-line);
    box-shadow:0 22px 50px rgba(0,0,0,.06);
    transform:translateY(-125%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .38s var(--mv-ease),opacity .28s ease,visibility .28s ease;
  }
  .nav.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav a{
    width:100%;
    padding:12px 0;
    font-size:16px;
  }
  .nav a::after{bottom:7px;width:38px;}
  body.admin-bar .nav{top:114px;}
  .menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn.open span:nth-child(2){opacity:0}
  .menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.mvx-menu-open{overflow:hidden;}
}
@media (max-width:782px){
  body.admin-bar .nav{top:120px;}
}
@media (max-width:600px){
  body.admin-bar .site-header{top:0;}
  body.admin-bar .nav{top:74px;}
}

/* Teclado y accesibilidad */
.nav a:focus-visible,.brand:focus-visible,.text-link:focus-visible,.outline-btn:focus-visible,
.send:focus-visible,.menu-btn:focus-visible,.art-card:focus-visible,.project-main:focus-visible,
.thumb:focus-visible,.ex-main:focus-visible,.ex-thumb:focus-visible,.lightbox-close:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* Suavidad de carga sin saltos */
.hero-grid figure,.art-card,.project-main,.thumb,.ex-main,.ex-thumb,.contact-photo{
  isolation:isolate;
}
.hero-grid img,.art-img,.project-main-img,.thumb-img,.ex-main-img,.ex-thumb-img,.contact-photo img{
  will-change:transform;
}

/* Pantallas muy grandes: evita que la página se disperse */
@media (min-width:1700px){
  :root{--mv-max:1540px;}
}


/* =========================================================
   V4 — ENTRADAS + AUTOCORRECCIÓN DE ESPACIOS VACÍOS
   No cambia organización, textos ni orden de fotografías.
   ========================================================= */

/* El layout nunca debe reservar una columna si su imagen principal no existe/falla */
.project-layout.has-no-main,
.exhibition-media.has-no-main{
  grid-template-columns:1fr !important;
}
.project-layout.has-no-main .thumb-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.exhibition-media.has-no-main .ex-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.project-main.is-broken,.thumb.is-broken,.ex-main.is-broken,.ex-thumb.is-broken,.art-card.is-broken,
.hero-grid figure.is-broken,.contact-photo.is-broken{
  display:none !important;
}

/* Si solo quedan pocas miniaturas, usan el ancho disponible y no dejan huecos absurdos */
.thumb-grid:has(.thumb:nth-child(1):last-child){grid-template-columns:1fr}
.thumb-grid:has(.thumb:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.ex-grid:has(.ex-thumb:nth-child(1):last-child){grid-template-columns:1fr}
.ex-grid:has(.ex-thumb:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* Entrada editorial: cada elemento aparece por separado, no todo el bloque de golpe */
.mvx-enter{
  opacity:0;
  transform:translate3d(0,30px,0);
  filter:blur(2px);
  transition:
    opacity .72s var(--mv-ease) var(--mv-delay,0ms),
    transform .85s var(--mv-ease) var(--mv-delay,0ms),
    filter .7s ease var(--mv-delay,0ms);
}
.mvx-enter.mvx-in{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}
/* Fotografías entran con escala casi imperceptible */
.art-card.mvx-enter,.project-main.mvx-enter,.thumb.mvx-enter,
.ex-main.mvx-enter,.ex-thumb.mvx-enter,.hero-grid figure.mvx-enter,.contact-photo.mvx-enter{
  transform:translate3d(0,22px,0) scale(.985);
}
.art-card.mvx-enter.mvx-in,.project-main.mvx-enter.mvx-in,.thumb.mvx-enter.mvx-in,
.ex-main.mvx-enter.mvx-in,.ex-thumb.mvx-enter.mvx-in,.hero-grid figure.mvx-enter.mvx-in,.contact-photo.mvx-enter.mvx-in{
  transform:translate3d(0,0,0) scale(1);
}

/* Evita que el viejo reveal y el nuevo efecto compitan */
.reveal.mvx-enter{transition:none;opacity:1;transform:none;filter:none}

/* Mejor continuidad vertical entre proyectos: menos vacío cuando las fotos tienen alturas dispares */
.project-layout,.exhibition-media{min-width:0}
.thumb-grid,.ex-grid{min-width:0}
.project-block,.exhibition-block{overflow:visible}
.project-main,.thumb,.ex-main,.ex-thumb{min-width:0}

/* En pantallas grandes, la galería secundaria crece ligeramente para que no parezca arrinconada */
@media(min-width:1101px){
  .project-layout{grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)}
  .project-layout.reverse{grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr)}
  .exhibition-media{grid-template-columns:minmax(320px,.76fr) minmax(0,1.24fr)}
}

@media(max-width:1100px){
  .project-layout.has-no-main .thumb-grid,
  .exhibition-media.has-no-main .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .project-layout.has-no-main .thumb-grid,
  .exhibition-media.has-no-main .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mvx-enter{transform:translate3d(0,18px,0);filter:none}
}

@media(prefers-reduced-motion:reduce){
  .mvx-enter,.mvx-enter.mvx-in{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* =========================================================
   V5 — GALERÍAS RESPONSIVAS SIN HUECOS + CONTACTO WHATSAPP
   Mantiene orden y contenido; corrige únicamente el reflujo.
   ========================================================= */

/* La altura de una foto nunca dicta una celda absurda */
.project-main-img,.thumb-img,.ex-main-img,.ex-thumb-img,.art-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* En escritorio, las composiciones laterales solo se usan cuando están equilibradas */
.project-layout.is-unbalanced,
.project-layout.has-no-main{
  grid-template-columns:1fr !important;
  gap:12px;
}
.project-layout.is-unbalanced .project-main,
.project-layout.has-no-main .project-main{
  order:0 !important;
  width:100%;
  aspect-ratio:16/8.5;
}
.project-layout.is-unbalanced .thumb-grid,
.project-layout.has-no-main .thumb-grid{
  order:1 !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
}
.project-layout.is-unbalanced .thumb,
.project-layout.has-no-main .thumb{
  grid-column:span 1;
  aspect-ratio:4/3;
}
.project-layout.is-unbalanced .thumb:nth-child(7n+1),
.project-layout.has-no-main .thumb:nth-child(7n+1){
  grid-column:span 2;
  aspect-ratio:2/1;
}

.exhibition-media.is-unbalanced,
.exhibition-media.has-no-main{
  grid-template-columns:1fr !important;
  gap:12px;
}
.exhibition-media.is-unbalanced .ex-main,
.exhibition-media.has-no-main .ex-main{
  width:100%;
  aspect-ratio:16/8.5;
}
.exhibition-media.is-unbalanced .ex-grid,
.exhibition-media.has-no-main .ex-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-flow:dense;
}
.exhibition-media.is-unbalanced .ex-thumb,
.exhibition-media.has-no-main .ex-thumb{
  grid-column:span 1;
  aspect-ratio:4/3;
}
.exhibition-media.is-unbalanced .ex-thumb:nth-child(7n+1),
.exhibition-media.has-no-main .ex-thumb:nth-child(7n+1){
  grid-column:span 2;
  aspect-ratio:2/1;
}

/* Cuando el bloque lateral sí cabe, iguala visualmente alturas para evitar bolsas vacías */
@media(min-width:1101px){
  .project-layout:not(.is-unbalanced):not(.has-no-main){align-items:stretch}
  .project-layout:not(.is-unbalanced):not(.has-no-main) .project-main{height:100%;min-height:520px;aspect-ratio:auto}
  .project-layout:not(.is-unbalanced):not(.has-no-main) .thumb-grid{grid-auto-rows:minmax(150px,1fr)}
  .project-layout:not(.is-unbalanced):not(.has-no-main) .thumb{aspect-ratio:auto;min-height:0}

  .exhibition-media:not(.is-unbalanced):not(.has-no-main){align-items:stretch}
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-main{height:100%;min-height:520px;aspect-ratio:auto}
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-grid{grid-auto-rows:minmax(130px,1fr)}
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-thumb{aspect-ratio:auto;min-height:0}
}

/* Contacto: datos claros + WhatsApp */
.contact-intro{
  max-width:420px;
  margin:0 0 28px!important;
  font-size:17px!important;
  line-height:1.65!important;
  color:#565650;
}
.contact-list{border-top:1px solid var(--mv-line)}
.contact-line{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:18px;
  align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--mv-line);
  color:var(--mv-ink);
}
a.contact-line{transition:padding-left .3s var(--mv-ease),opacity .25s ease}
a.contact-line:hover{padding-left:6px;opacity:.7}
.contact-line span{
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mv-muted);
}
.contact-line strong{font-size:16px;font-weight:400;overflow-wrap:anywhere}
.contact-form>.eyebrow{margin-bottom:20px}
.send{display:flex;align-items:center;justify-content:space-between;gap:20px}
.form-note{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--mv-muted)}

@media(max-width:1100px){
  .project-layout.is-unbalanced .thumb-grid,
  .project-layout.has-no-main .thumb-grid,
  .exhibition-media.is-unbalanced .ex-grid,
  .exhibition-media.has-no-main .ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:760px){
  /* En móvil: cero layouts laterales, todo fluye de arriba hacia abajo */
  .project-layout,.project-layout.reverse,
  .project-layout.is-unbalanced,.project-layout.has-no-main,
  .exhibition-media,.exhibition-media.is-unbalanced,.exhibition-media.has-no-main{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .project-layout .project-main,
  .project-layout.reverse .project-main,
  .project-layout.is-unbalanced .project-main,
  .exhibition-media .ex-main,
  .exhibition-media.is-unbalanced .ex-main{
    order:0!important;
    aspect-ratio:4/3!important;
    min-height:0!important;
  }
  .project-layout .thumb-grid,
  .project-layout.reverse .thumb-grid,
  .project-layout.is-unbalanced .thumb-grid,
  .project-layout.has-no-main .thumb-grid,
  .exhibition-media .ex-grid,
  .exhibition-media.is-unbalanced .ex-grid,
  .exhibition-media.has-no-main .ex-grid{
    order:1!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .project-layout .thumb:nth-child(n),
  .project-layout.is-unbalanced .thumb:nth-child(n),
  .exhibition-media .ex-thumb:nth-child(n),
  .exhibition-media.is-unbalanced .ex-thumb:nth-child(n){
    grid-column:span 1!important;
    aspect-ratio:1/1!important;
  }
  .project-layout .thumb:nth-child(5n+1),
  .exhibition-media .ex-thumb:nth-child(5n+1){
    grid-column:1/3!important;
    aspect-ratio:16/9!important;
  }
  .contact-line{grid-template-columns:1fr;gap:5px}
}

/* =========================================================
   V6 — GALERÍAS ADAPTATIVAS + TIPOGRAFÍA DE ESCRITORIO
   La organización y el orden permanecen iguales. El tamaño
   de cada imagen se calcula a partir de su proporción real.
   ========================================================= */

/* Evita desbordes de títulos en cualquier ancho */
.hero-copy,
.section-head > div,
.project-head > div,
.exhibition-copy,
.contact-form{min-width:0}
.hero h1,
.section-head h2,
.project-head h3,
.exhibition-copy h3,
.contact-form h3{
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}
.hero h1{
  font-size:clamp(68px,7.15vw,128px);
  line-height:.86;
  letter-spacing:-.062em;
}
.hero-copy p,
.section-head p{
  text-wrap:pretty;
}

/* Escritorio: se da un poco más de ancho al nombre y al copy. */
@media(min-width:1101px){
  .hero{
    grid-template-columns:minmax(430px,.94fr) minmax(0,1.46fr);
    gap:clamp(34px,4.5vw,82px);
  }
  .hero-copy{max-width:610px}
  .hero-grid{min-width:0}
  .section-head h2{font-size:clamp(62px,6.1vw,108px)}
}
@media(min-width:1500px){
  .hero h1{font-size:clamp(92px,7vw,136px)}
}

/* Los contenedores dinámicos usan filas justificadas solo en tablet/escritorio. */
@media(min-width:761px){
  .mural-grid.mvx-justified,
  .thumb-grid.mvx-justified,
  .ex-grid.mvx-justified{
    display:block!important;
  }
  .mvx-justified-row{
    display:flex;
    width:100%;
    gap:var(--mvx-gap,10px);
    margin:0 0 var(--mvx-gap,10px);
    align-items:stretch;
  }
  .mvx-justified-row:last-child{margin-bottom:0}
  .mvx-justified-row > .art-card,
  .mvx-justified-row > .thumb,
  .mvx-justified-row > .ex-thumb{
    flex:0 0 auto!important;
    width:var(--mvx-w)!important;
    height:var(--mvx-h)!important;
    aspect-ratio:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .mvx-justified-row > .art-card img,
  .mvx-justified-row > .thumb img,
  .mvx-justified-row > .ex-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* La última fila no se estira de forma absurda. */
  .mvx-justified-row.mvx-last-row{
    justify-content:flex-start;
  }
}

/* Proyectos/exhibiciones: no fuerces alturas antes de medirlas. */
@media(min-width:1101px){
  .project-layout:not(.is-unbalanced):not(.has-no-main),
  .exhibition-media:not(.is-unbalanced):not(.has-no-main){align-items:start}

  .project-layout:not(.is-unbalanced):not(.has-no-main) .project-main,
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-main{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:var(--mvx-main-ratio,4/3)!important;
  }

  .project-layout:not(.is-unbalanced):not(.has-no-main) .thumb-grid,
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-grid{
    grid-auto-rows:auto!important;
  }

  .project-layout:not(.is-unbalanced):not(.has-no-main) .thumb,
  .exhibition-media:not(.is-unbalanced):not(.has-no-main) .ex-thumb{
    min-height:0!important;
  }
}

/* Cuando la composición lateral no cabe bien, se apila pero conserva
   la proporción real de la foto principal en vez de recortarla de más. */
@media(min-width:761px){
  .project-layout.is-unbalanced .project-main,
  .project-layout.has-no-main .project-main,
  .exhibition-media.is-unbalanced .ex-main,
  .exhibition-media.has-no-main .ex-main{
    aspect-ratio:var(--mvx-main-ratio,16/9)!important;
    max-height:min(76vh,820px);
  }
}

/* En tablet, el texto nunca se vuelve exagerado y las galerías respiran. */
@media(min-width:761px) and (max-width:1100px){
  .hero h1{font-size:clamp(70px,11vw,108px)}
  .section-head h2{font-size:clamp(56px,9vw,88px)}
  .project-head h3,.exhibition-copy h3{font-size:clamp(42px,7vw,66px)}
}

/* Móvil conserva el layout que ya funcionaba; solo se mejora texto. */
@media(max-width:760px){
  .hero h1{font-size:clamp(62px,19vw,102px);line-height:.88}
  .hero-copy p{font-size:clamp(17px,4.8vw,19px);line-height:1.58}
  .section-head h2{font-size:clamp(52px,16vw,78px);line-height:.91}
  .project-head h3,.exhibition-copy h3{font-size:clamp(38px,11vw,58px);line-height:.95}
  .contact-form h3{font-size:clamp(36px,10vw,54px)}

  /* Si JS envolvió filas antes de un resize, display:contents devuelve
     a cada foto al grid móvil original sin modificar orden. */
  .mural-grid .mvx-justified-row,
  .thumb-grid .mvx-justified-row,
  .ex-grid .mvx-justified-row{display:contents!important}
}