/* mce-artgallery.com, escrito a mano a partir de los valores exactos del WordPress original
   (CSS que imprimía Elementor + estilos computados en Chrome, 7 de octubre de 2026). */

/* Fuentes: las 6 que la web usa de verdad (Avenir Next 800/600/400/200, Lato 400/700) */
@font-face{font-family:"Avenir Next";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/avenir-next-800.woff2) format("woff2")}
@font-face{font-family:"Avenir Next";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/avenir-next-600.woff2) format("woff2")}
@font-face{font-family:"Avenir Next";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/avenir-next-400.woff2) format("woff2")}
@font-face{font-family:"Avenir Next";font-weight:200;font-style:normal;font-display:swap;src:url(/fonts/avenir-next-200.woff2) format("woff2")}
@font-face{font-family:"Lato Font";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:"Lato Font";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/lato-700.woff2) format("woff2")}

:root{
  --avenir:"Avenir Next",sans-serif;
  --lato:"Lato Font",sans-serif;
  --rojo:#CC1402;          /* "Hello!" */
  --gris-logo:#7E7E7E;
  --gris-nombre:#5A5A5A;   /* JENS SCHÄFER y menú */
  --texto:#3E3E3E;
  --ancho:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#333;font:400 16px/24px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}
body.sin-scroll{overflow:hidden}
h1,h2,p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:-9999px;top:0;background:#fff;padding:8px 12px}
.salto:focus{left:8px;top:8px;z-index:100}

/* ---------- Cabecera ---------- */
.cabecera-marca{display:flex;flex-wrap:wrap;margin:3em 0}
.cabecera-marca>div{padding:10px;width:33.082%}
.cabecera-marca .col-nombre{width:33.312%}
.cabecera-marca .col-vacia{width:33.27%}
.cabecera-marca .col-nombre{display:flex;align-items:center}
.cabecera-marca .nombre{width:100%}
.logo{font:800 29px/29px var(--avenir);letter-spacing:.9px;color:var(--gris-logo)}
.logo i{font-style:italic}
.logo .galeria-txt{font-family:var(--lato);font-weight:400;letter-spacing:-.7px}
.nombre{font:700 25px/25px var(--lato);letter-spacing:1.5px;color:var(--gris-nombre);text-align:center}
.pie .logo{text-align:center}

.navegacion{max-width:var(--ancho);margin:0 auto}
.menu-toggle{display:none}
.menu{list-style:none;margin:0;padding:0;display:flex;justify-content:center;text-align:center}
.menu li{position:relative}
.menu a{display:block;padding:13px 20px;font:200 16px/20px var(--avenir);text-transform:uppercase;color:var(--gris-nombre);transition:color .4s}
.menu a:hover,.menu a:focus,.menu a[aria-current="page"],.menu li.abierto>a{color:#000}
.menu li.con-submenu>a{padding-right:30px}
.submenu{list-style:none;margin:0;padding:0;position:absolute;left:0;top:100%;min-width:156px;background:#fff;box-shadow:0 3px 20px rgba(0,0,0,.08);display:none;z-index:50;text-align:left}
.menu li:hover>.submenu,.menu li.abierto>.submenu,.menu li:focus-within>.submenu{display:block}
.submenu a{font-size:13px;color:#000;white-space:nowrap}

/* ---------- Pie ---------- */
.pie{padding:0}
.pie>div{max-width:var(--ancho);margin:0 auto;padding:10px}
.pie .nombre{line-height:25px}

/* ---------- Bloques comunes ---------- */
.contenedor{max-width:var(--ancho);margin:0 auto}
.boton{display:inline-block;background:#000;color:#fff;font:400 15px/1 var(--avenir);letter-spacing:1.5px;text-transform:uppercase;padding:12px 24px;border:0;border-radius:0;cursor:pointer;text-align:center;transition:all .3s}
.boton:hover,.boton:focus{background:#484848;color:#fff}
.centrado{text-align:center}

/* ---------- Home ---------- */
.portada{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.portada-fondo{position:absolute;inset:0;z-index:0}
.portada-fondo div{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 2s ease;transform:translateX(100%)}
.portada-fondo div.activa{transform:translateX(0)}
.portada-fondo div.saliendo{transform:translateX(-100%)}
.portada-contenido{position:relative;z-index:1;width:100%;padding:10px;display:flex;flex-direction:column}  /* flex: los márgenes no se funden, como en la columna de Elementor */
.hello{font:600 46px/46px var(--avenir);letter-spacing:8px;color:var(--rojo);text-align:center;margin-bottom:20px}
.entrar{text-align:right;margin:113px 40px -126px 0}
.entrar .boton{background:#fff;color:#000}
.entrar .boton:hover,.entrar .boton:focus{background:#0B0B0B;color:#fff}
@media (max-width:767px){
  .portada{padding:20em 0;min-height:0;display:block}
  .portada-fondo div{background-size:contain}
}

/* ---------- Galerías (masonry por columnas CSS: sin JavaScript, sin salto de maquetación) ---------- */
.galeria-seccion{padding:10px}  /* sección a ancho completo en el original (elementor-section-full_width): la galería va de borde a borde */
.galeria-seccion.con-margen{margin-top:2em;margin-bottom:2em}
.galeria{columns:var(--cols,6);column-gap:var(--gap,8px)}
.obra{display:block;position:relative;overflow:hidden;break-inside:avoid;margin-bottom:var(--gap,8px)}
.obra img{width:100%;height:auto;transition:transform .8s}
.obra::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5);opacity:0;transition:opacity .8s}
.obra:hover::after{opacity:1}
.galeria.crece .obra:hover img{transform:scale(1.1)}
@media (max-width:1024px){.galeria{columns:2;column-gap:10px}.obra{margin-bottom:10px}}
@media (max-width:767px){.galeria{columns:1}}

/* ---------- Lightbox (mismos colores que el de Elementor: fondo blanco al 66 %, iconos negros, rojo al pasar) ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.66);display:none;flex-direction:column;user-select:none}
.lightbox.abierto{display:flex}
.lightbox-barra{display:flex;justify-content:flex-end;gap:14px;padding:16px 20px;flex:0 0 auto}
.lightbox button{background:none;border:0;padding:0;cursor:pointer;color:#000;display:inline-flex;align-items:center;justify-content:center;transition:color .3s}
.lightbox button:hover,.lightbox button:focus{color:#E62A1F}
.lightbox-barra button{width:30px;height:30px}
.lightbox-barra svg{width:30px;height:30px}
.lightbox-escena{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:auto}
.lightbox-escena img{max-width:calc(100% - 200px);max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;box-shadow:0 0 20px rgba(0,0,0,.15);user-select:none}
.lightbox.zoom .lightbox-escena{display:block;cursor:grab}
.lightbox.zoom .lightbox-escena img{max-width:none;max-height:none;width:auto;height:auto;margin:0 auto;cursor:zoom-out}
.lightbox-nav{position:absolute;top:0;bottom:0;width:100px;font-size:100px}
.lightbox-nav svg{width:100px;height:100px}
.lightbox-nav.ant{left:0}.lightbox-nav.sig{right:0}
.lightbox-pie{flex:0 0 auto;text-align:center;padding:12px;font:400 16px/1 var(--avenir);color:#000}
@media (max-width:767px){
  .lightbox-escena img{max-width:100%}
  .lightbox-nav{width:50px}
  .lightbox-nav svg{width:50px;height:50px}
}

/* ---------- About ---------- */
.about-fotos{display:flex;flex-wrap:wrap;margin-top:3em}
.about-fotos>div{padding:10px;text-align:center}
.about-fotos .foto-1{width:40.789%}
.about-fotos .foto-2{width:59.167%}
.about-fotos .foto-1 img{width:76%;margin:0 auto}
.about-fotos .foto-2 img{width:71%;margin:0 auto}
.about-texto{margin-top:3em;padding:10px}
.about-texto h2{font:700 25px/25px var(--lato);letter-spacing:1.5px;color:#000;margin-bottom:20px}
.about-texto .prosa{margin:0 26px 46px;font:700 14px/21px var(--lato);letter-spacing:1.5px;color:var(--texto)}
.about-texto .prosa p{margin-bottom:.9rem}
.about-texto .prosa p:last-child{margin-bottom:0}
@media (max-width:767px){
  .about-fotos .foto-1,.about-fotos .foto-2{width:100%}
}

/* ---------- Contact ---------- */
.contacto{min-height:100vh;margin:-12em 0;display:flex;align-items:center;justify-content:center;padding:10px}
.contacto .boton:hover,.contacto .boton:focus{background:#313131}

/* Popup del formulario (el de Elementor: velo gris, caja transparente con sombra, columna de 500 px) */
.popup{position:fixed;inset:0;z-index:900;background:rgba(218,218,218,.75);display:none;align-items:center;justify-content:center}
.popup.abierto{display:flex;animation:fadeIn 1.2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.popup-caja{position:relative;width:1000px;max-width:100%;min-height:743px;max-height:100%;overflow:auto;box-shadow:2px 8px 23px 3px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;padding:40px 10px}
.popup-cerrar{position:absolute;top:20px;right:20px;width:30px;height:30px;background:none;border:0;padding:0;cursor:pointer;color:#333}
.popup-cerrar svg{width:22px;height:22px}
.popup-cerrar:hover{color:#E62A1F}
.popup-col{width:500px;max-width:100%}
.popup-col .hello{margin-bottom:20px}
.gracias{text-align:center;font:400 15px/1.5 var(--lato);letter-spacing:4.8px;text-transform:uppercase;color:var(--texto);margin-bottom:34.4px}
.formulario{display:flex;flex-wrap:wrap;margin:0 -5px -10px}
.campo{padding:0 5px;margin-bottom:10px;width:100%}
.campo.mitad{width:50%}
.campo input,.campo textarea{display:block;width:100%;min-height:40px;padding:8px 16px;background:#fff;border:1px solid #69727d;border-radius:3px;font:200 15px/21px var(--avenir);color:#000}
.campo textarea{padding:5px 14px;resize:vertical}
.campo ::placeholder{color:#000;opacity:.6}
.campo input:focus,.campo textarea:focus{outline:2px solid #000;outline-offset:-1px}
.formulario .boton{width:100%;min-height:40px;padding:0 24px;letter-spacing:0}
.formulario .boton:hover,.formulario .boton:focus{background:#202020}
.formulario .boton[disabled]{opacity:.6;cursor:wait}
.mensaje{width:100%;padding:0 5px;margin-top:10px;font:400 14px/1.4 var(--avenir);color:#000}
.mensaje.error{color:#B00020}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:767px){.campo.mitad{width:100%}}

/* ---------- Móvil: cabecera apilada y menú desplegable ---------- */
@media (max-width:767px){
  .cabecera-marca>div,.cabecera-marca .col-nombre{width:100%}
  .cabecera-marca .col-vacia{display:none}
  .navegacion{position:relative}
  .menu-toggle{display:flex;align-items:center;justify-content:center;margin:0 auto;width:33px;height:54px;padding:6px;background:rgba(0,0,0,.05);border:2px solid #000;border-radius:5px;color:#000;cursor:pointer}
  .menu-toggle svg{width:20px;height:20px}
  .menu{display:none;flex-direction:column;position:absolute;left:0;right:0;top:100%;margin-top:10px;background:#fff;z-index:60}  /* desplegable por encima del contenido, como el de Elementor */
  .menu.abierto{display:flex}
  .menu a{padding:10px 0;font-size:13px;line-height:20px}
  .submenu{position:static;display:none;box-shadow:none;min-width:0;text-align:center}
  .menu li.abierto>.submenu{display:block}
  .submenu a{font-size:11.05px}
}

/* ---------- 404 ---------- */
.no-encontrado{max-width:var(--ancho);margin:3em auto;padding:10px;text-align:center;font-family:var(--lato)}